-
Notifications
You must be signed in to change notification settings - Fork 0
/
lab_023.html
108 lines (101 loc) · 4.88 KB
/
lab_023.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!doctype html>
<html lang="en">
<head>
<title>
Lab 23 - Tables and Forms
</title>
<meta charset="UTF-8" />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta "="" content=" width=device-width, initial-scale=1.0" name="viewport" />
<meta content="A guided tour through the fundamentals of Git, HTML, & CSS" name=" description" />
<meta content="#0000ff" name="theme-color" />
<link href="manifest.json" rel="manifest" />
<link href="css/reset.css" media="screen" rel="stylesheet" />
<link href="css/screen.css" media="screen" rel="stylesheet" />
<link href="css/prism.css" rel="stylesheet" />
</head>
<body data-lab-id="23">
<a class="skip-to-content" href="#content" tabindex="1">
Skip to content
</a>
<main class="layout">
<nav id="index">
<p class="link-home">
<a href="index.html">
<span>Hack4Impact Starter Pack</span>
</a>
</p>
<button class="link-menu">
Menu
</button>
<nav tabindex="0">
<ol>
</ol>
</nav>
</nav>
<div id="content" tabindex="-1">
<h1 class="lab_title">
<em>Lab 23</em>
Tables and Forms
</h1>
<h2>Goals</h2>
<ul>
<li>Learn about tables and forms in HTML</li>
<li>
Add a <code class="language-html"><form></code> to your personal website
</li>
</ul>
<h2>Tables</h2>
<p>In the early days of the Internet, tables were
used to layout the pages. Now that we can use CSS, tables are mainly for displaying tabular data.
Imagine an Excel or Google Sheets table and the kind of information you would display there.
Tables have a <strong>table</strong> definition, <strong>table row</strong>, and <strong>table data</strong>
cells. Respectively, these are <code class="language-html"><table></code>, <code
class="language-html"><tr></code>, and <code class="language-html"><td></code>.</p>
<p>The following is the structure for a 3 x 4 table. It defines the table and gives it 4 table rows each of which
have 3 table data cells.</p>
<h3 class="file-heading"><em>table.html</em></h3>
<div class="side-by-side-container">
<div class="side-by-side-child">
<pre class="file line-numbers" data-range="7,33" data-src="prism/html/2301.html"></pre>
</div>
<div class="side-by-side-child">
<iframe class="iframe-full file" src="prism/html/2301.html"></iframe>
</div>
</div>
<p>As you can see, the HTML definition of the table only positions the elements in place and doesn't provide any
styling, borders or colors, that you would expect table in a traditional spreadsheet program. Worry not,
when we learn about styling we'll learn how to add those features to our tables.</p>
<h2>Forms</h2>
<p>The final HTML tag we will cover is <em>forms</em>. Forms are important all across the internet because we want
users to be able to interact with our website and not just look at it! Coding a form in just HTML won't be much
use to us though.</p>
<p>Now that you have more experience in HTML, take a look at the following code examples for forms and see if you
can understand what each tag and attribute is doing. Try typing into the fields.</p>
<p class="note"><strong>Note:</strong> The <code>id</code> attribute is like <code>class</code> except it can only
be applied to one tag on each page. Usually used for unique items per page.</p>
<h3 class="file-heading"><em>form.html</em></h3>
<div class="side-by-side-container">
<div class="side-by-side-child">
<pre class="file line-numbers" data-range="8,39" data-src="prism/html/2302.html"></pre>
</div>
<div class="side-by-side-child">
<iframe class="iframe-full file" src="prism/html/2302.html"></iframe>
</div>
</div>
<p class="note"><strong>Note:</strong> Other <code>type</code> of <code class="language-html"><input></code>
include <code>"radio"</code> and <code>"checkbox"</code>. What do you think those inputs look like?
Try experimenting with changing the <code>type</code> to them.</p>
<p>If you remember back to Lab 15, HTML only provides the <strong>semantics</strong>
or meaning of a webpage and not its appearance <em>or</em> its function. This separation of powers helps to keep your code nice
and neat, but it also means that our forms won't function without the programming run it.</p>
</div>
</main>
<script src="js/ui.js" type="text/javascript"></script>
<script src="js/prism.js" type="text/javascript"></script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({startOnLoad: true, theme: "base"});
</script>
</body>
</html>