-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlab_016.html
111 lines (104 loc) · 5.5 KB
/
lab_016.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
109
110
111
<!doctype html>
<html lang="en">
<head>
<title>
Lab 16 - Tags, Attributes, and Elements
</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="16">
<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 16</em>
Tags, Attributes, and Elements
</h1>
<h2>Goals</h2>
<ul>
<li>Learn what tags, attributes, and elements are</li>
<li>Add an <code class="language-html"><!DOCTYPE html></code> to your personal website</li>
<li>Add an <code class="language-html"><html></code> to your personal website</li>
<li>Add a <code class="language-html"><body></code> to your personal website</li>
</ul>
<h2>Elements</h2>
<p><em>Elements</em> refer to the different types of text that make up a webpage. An HTML element looks something
like:</p>
<pre><code class="language-html"><tag>text content</tag></code></pre>. <p>The text in the middle is
the content of the element and the bracketed text on either side of the content are the element's tags.</p>
<h2>Tags</h2>
<p><em>Tags</em> are the building blocks of all web applications. They surround content and give it meaning and
provide context. Let's add a few to your website. Make sure your document looks like the following:</p>
<h3 class="file-heading"><em>index.html</em></h3>
<pre class="file line-numbers" data-src="prism/html/1601.html"></pre>
<p>At the very top of all HTML documents is a <strong>document type declaration</strong>. This tells your web
browser what version of HTML you're using. Always include this or your browser will have no idea how to
interpret your HTML document.</p>
<h3 class="file-heading"><em>index.html</em></h3>
<pre class="file line-numbers" data-line="1" data-src="prism/html/1601.html"></pre>
<p>Following that, everything is wrapped in the <code class="language-html"><html></code> <strong>opening
tag</strong> and the <code class="language-html"></html></code> <strong>closing tag</strong>. Everything
we put in between is an HTML document. The main content of the page goes between the <code
class="language-html"><body></code> and <code class="language-html"></body></code> tags.
</p>
<h3 class="file-heading"><em>index.html</em></h3>
<pre class="file line-numbers" data-line="2-3,5-6" data-src="prism/html/1601.html"></pre>
<p>Most tags will look like the <code class="language-html"><html></code> and <code
class="language-html"><body></code> tags do with an opening and closing tag. Usually, content can be put
in between the tags. We'll be going over some of the most common and useful tags, but there are so many tags
that we can't possibly cover them all.</p>
<p>If you want to explore the tags, we suggest going to the official documentation for HTML: <a
href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank" rel="noopener">https://developer.mozilla.org/en-US/docs/Web/HTML</a>
</p>
<p class="note"><strong>Note:</strong> Now would be a good time to stage and commit your changes as we're about to
go into a new topic!
</p>
<h2>Structure, not Style</h2>
<p>If you open your browser now and refresh your HTML page, you'll see that nothing has changed. This is because
HTML doesn't change the way things <em>appear</em>, but it adds structure and meaning to the content.
Right-click the
site and <strong>Inspect</strong> to see the HTML structure you added.</p>
<video class="video" controls>
<source src="assets/1601.mp4" type="">
</video>
<h2>Attributes</h2>
<p>Some HTML tags will have what are called <em>attributes</em>. Attributes are extra information you can apply to
certain tags. One of the main thing they can be used for is to group different HTML tags together in a way that
we can reference when styling our page with CSS.</p>
<p>Attributes are placed inside the opening tag and their values are placed inside quotation marks. For example:
</p>
<pre><code class="language-html"><tag attribute="value">text content</tag></code></pre>
</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>