-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlab_017.html
130 lines (125 loc) · 5.13 KB
/
lab_017.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lab 17 - Page Titles</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="17">
<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 17</em>
Page Titles
</h1>
<h2>Goals</h2>
<ul>
<li>
Add a <code class="language-html"><head></code> to your personal website
</li>
<li>
Add a <code class="language-html"><title></code> to your personal website
</li>
<li>
Update all your other pages to include the tags we've learned about
</li>
</ul>
<h2>Head</h2>
<p>Let's add some more structure to your website. While the main content of the your page goes inside its <code
class="language-html"><body></code>, there is also the <code class="language-html"><head></code>
tag which goes before the <code class="language-html"><body></code>. The <code
class="language-html"><head></code> contains information <em>about</em> the page which is not
visible on the page itself.</p>
<p>This includes the <code class="language-html"><title></code> tag which
determines the title of your website, obvious we know. It can also include meta information for search engines
to categorize your site with and tags that link your HTML to your CSS styling. For now, add the <code
class="language-html"><head></code> tag before the <code class="language-html"><body></code>.</p>
<p class="note"><strong>Note:</strong> This is above your <code class="language-html"><body></code> tag, but
inside your <code class="language-html"><html></code> tag.</p>
<h2>Website Title</h2>
<p>
If you look at your website in your browser, you might notice that
your tab just says <code>index.html</code> or the file path. That
doesn't look very nice so let's change that.
</p>
<img class="image" src="assets/1701.png" alt="Image showing a webpage without the title tag" />
<p>
In your <code class="language-html"><head></code>, add a
<code class="language-html"><title></code>. Then, between the
opening and closing tags of the
<code class="language-html"><title></code>, give your website a
title. It can be anything!
</p>
<p>
Now when you refresh your webpage, you should see that your website's
tab has a title. If you save your webpage as a bookmark, this will
also be the name of your bookmark! The page below has the title
"Personal Website".
</p>
<img class="image" src="assets/1702.png" alt="Image showing a webpage with the title tag" />
<h2>Update Pages</h2>
<p>
Let's set up your other HTML documents, just like you did for
<code>index.html</code>. For each of the other HTML documents, add the
following:
</p>
<ul>
<li>
A <strong>document type declaration</strong> to the top of each
file
</li>
<li>
Add an <code class="language-html"><html></code> tag to each
page
</li>
<li>
Add a <code class="language-html"><head></code> tag to each
page
</li>
<li>
Add a <code class="language-html"><title></code> in the
<code class="language-html"><head></code> of each page
</li>
<li>
Add text to each <code class="language-html"><title></code>
</li>
<li>
Add a <code class="language-html"><body></code> to each page
</li>
</ul>
<p class="note">
<strong>Note:</strong> If you need help, refer to the previous labs or
ask on GitHub Discussions! Remember to stage and commit your changes
often along the way!
</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>