-
Notifications
You must be signed in to change notification settings - Fork 0
/
lab_022.html
148 lines (141 loc) · 7.45 KB
/
lab_022.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!doctype html>
<html lang="en">
<head>
<title>
Lab 22 - Lists, Links, and Images
</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="22">
<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 22</em>
Links, Lists, and Images
</h1>
<h2>Goals</h2>
<ul>
<li>Learn about lists, links, and images in HTML</li>
<li>
Add an <code class="language-html"><a></code> to your personal website
</li>
<li>
Add a <code class="language-html"><ul></code> to your personal website
</li>
<li>
Add an <code class="language-html"><img></code> to your personal website
</li>
</ul>
<h2>Connect with Links</h2>
<p>So far, we have a few individual HTML webpages right now, but many unconnected webpages doth not make a
website. Like everything on the Internet, it's time we connect our webpages together with <em>links</em>. That's
what the HyperText in HTML is referring to: a system of links.</p>
<p>We can make a link with an anchor tag, <code class="language-html"><a></code>, which will let us
determine the link text as well as the destination for the link. The destination is set using a
<strong>URL</strong> in the <code>href=""</code> attribute of the anchor tag.
</p>
<p>Let's add a link to your <code>index.html</code> page that points back to your <code>index.html</code> page.
Silly, but necessary. In the <code class="language-html"><h1></code> heading in your <code
class="language-html"><nav></code> tag, wrap the text in an anchor tag.
</p>
<p>Then, in your anchor tag's opening tag, add the <code>href="index.html"</code>attribute.</p>
<h3 class="file-heading"><em>index.html</em></h3>
<pre class="file line-numbers" data-range="1,21" data-src="prism/html/2201.html" data-line="7-11"></pre>
<h2>Test Your Connection</h2>
<p>Now, go to your page. You will see the logo text colored blue and underlined, much like a hyperlink you
would see on other websites. If you experiment with changing your <code>href="index.html"</code> to your other
HTML pages, you can click and move to that page.</p>
<p>Once you're done experimenting, change it back to <code>href="index.html"</code>! Make sure to add the same
link to the logo text on every other page as well. They should all link to <code>index.html</code>.</p>
<img class="image" src="assets/2201.png"
alt="Website index.html with logo text that is blue and underlined, a link">
<h2>Lists</h2>
<p>There are two types of lists we will focus on. Ordered lists and unordered lists. Both lists hold list
items, but ordered lists precede each item with a incrementing numbers while unordered lists usually use bullet
points.</p>
<p>Both lists have the same structure with <code class="language-html"><ol></code> tags representing an
ordered list and <code class="language-html"><ul></code> tags representing and unordered list. Inside each
of the list tags are list item tags, <code class="language-html"><li></code>, surrounding content.</p>
<h3 class="file-heading"><em>lists.html</em></h3>
<div class="side-by-side-container">
<div class="side-by-side-child">
<pre class="file line-numbers" data-range="7,24" data-src="prism/html/2202.html"></pre>
</div>
<div class="side-by-side-child">
<iframe class="iframe-full file" src="prism/html/2202.html"></iframe>
</div>
</div>
<h2>Navigation</h2>
<p>Now that we understand lists and links, let's work on connecting our pages together with navigation. A navbar
is just a list of links. So let's do just that and make an unordered list of links inside the
<code class="language-html"><nav></code> and below the <code class="language-html"><h1></code>
heading of your <code>index.html</code>.
</p>
<p>Each list item should link to the other HTML pages and the text between the list item tags should be the names
of those pages. Also add a "Home" linked list item that links back to <code>index.html</code>. For example:</p>
<h3 class="file-heading"><em>index.html</em></h3>
<pre class="file line-numbers" data-range="8,17" data-src="prism/html/2203.html"></pre>
<p>Do the same for every other HTML page. Once done, you should be able to use the links on the page to navigate
between your different HTML webpages. You have a basic website!</p>
<video class="video" controls>
<source src="assets/2201.mp4" type="video/mp4">
</video>
<h2>Images</h2>
<p>All this text we have doesn't really showcase the multimedia nature of the internet. Let's add an image to our
<code>index.html</code> so that the world can percieve us! In your <code>index.html</code>, add the following to
your <code class="language-html"><div class="about-image"></code> tag.
</p>
<pre><code class="language-html"><img src="<path/to/image>" alt="<description of image>"></code>
</pre>
<p class="note"><strong>Note:</strong> Image is a self-closing tag like <code
class="language-html"><br></code> so you just need an one tag.</p>
<p>Make sure to put an image in the same directory as all your HTML and other files! We have an image
<code>sky.jpg</code> which we will add to our page.
</p>
<pre><code class="language-html"><img src="sky.jpg" alt="A video of an image of the sky and clouds being too
big"></code></pre>
<video class="video" controls>
<source src="assets/2202.mp4" type="video/mp4">
</video>
<p>Our image is <em>way</em> too big, but we can change it to fit better once we learn CSS. For now let's put a
width and/or height on our image using the <code>width</code> and <code>height</code> HTML attributes to keep
the image smaller.
</p>
<p class="note"><strong>Note:</strong> Always add an <code>alt</code> attribute value to increase accessibility
for
users of your website.</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>