-
Notifications
You must be signed in to change notification settings - Fork 0
/
content.html
170 lines (114 loc) · 4.8 KB
/
content.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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DesignLab Exercises: Content</title>
</head>
<body>
<h1>DesignLab Exercise: Describing Content</h1>
<!--
In this exercise, we'll practice using HTML elements and attributes to describe specific pieces of content.
Headings
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics#headings
Let's start with headings. There are six levels of heading defined in HTML5. Let's wrap each of this with a <h*> element, replacing the * with the appropriate number for that heading. E.g. <h1> for the Level One Heading.
-->
Level One Heading
Level Two Heading
Level Three Heading
Level Four Heading
Level Five Heading
Level Six Heading
<!--
Paragraphs
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics#paragraphs
Now! Let's work on some paragraphs. Wrap each of these in a <p> element. And let's wrap the heading "Paragraphs" in a level two heading.
-->
Paragraphs
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, dolorum a soluta officia quas, dicta in neque esse reiciendis debitis quisquam magnam iste molestiae ea assumenda voluptate? Laudantium, blanditiis reiciendis.
Nobis impedit vel, accusamus possimus qui voluptatibus quae quos laboriosam fugit quod, doloribus beatae reprehenderit veniam, distinctio sed nostrum veritatis illum velit.
Quibusdam, reiciendis labore excepturi impedit autem, quaerat magnam eius consequuntur beatae rerum, quidem quod magni. Ea non eum deserunt quaerat dolor officiis?
<!--
Lists
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics#lists
Let's now work on some lists. Two of the more common lists we'll use are the ordered list <ol> and the unordered list <ul>. each of those will contain any number of list items <li>. So, remember to encode the start and stop of each list item, and make sure they are together inside a specific type of list. For example:
<ul>
<li>Ea non eum deserunt</li>
<li>Quaerat dolor officiis</li>
</ul>
-->
lists
Ordered list
Lorem ipsum dolor sit amet
Consectetur adipisicing elit
Aperiam dolor fugiat aut aspernatur
Excepturi quam aliquid ab quaerat
Sit cum laborum nobis maxime
set doloremque.
Vitae cum beatae delectus rem.
Unordered List
Lorem ipsum dolor sit amet
Consectetur adipisicing elit
Aperiam dolor fugiat aut aspernatur
Excepturi quam aliquid ab quaerat
Sit cum laborum nobis maxime
set doloremque.
Vitae cum beatae delectus rem.
<!--
You can nest lists! In fact, you'll often need to. We'll use the same elements as earlier, except we need to make sure for any list that are subpoints, we make sure that list is *inside* the appropriate list item:
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three (includes a sublist)
<ul>
<li>List item one</li>
<li>List item two</li>
</ul>
</li>
<li>List item four</li>
</ul>
Try below!
-->
Nested list!
Lorem ipsum dolor sit amet
Consectetur adipisicing elit
Aperiam dolor fugiat aut aspernatur
Excepturi quam aliquid ab quaerat
Sit cum laborum nobis maxime
set doloremque.
Vitae cum beatae delectus rem.
Excepturi quam aliquid ab quaerat
Sit cum laborum nobis maxime
Set doloremque
Lorem ipsum dolor sit amet
Consectetur adipisicing elit
Aperiam dolor fugiat aut aspernatur
Vitae cum beatae delectus rem.
<!--
Links!
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics#links
Links get us to where we need to go on the Web.
-->
Links
University of Virginia Library
Scholars’ Lab
<!--
Blockquotes
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
Blockquotes describe content from another source that you're sharing on your Web page. It should include the quote itself, and a <cite> element that includes the source of the quote:
<blockquote>
<p>The unread story is not a story; it is little black marks on wood pulp. The reader, reading it, makes it live: a live thing, a story.</p>
<cite>Ursula K. Le Guin</cite>
</blockquote>
-->
Blockquotes
We live in capitalism. Its power seems inescapable. So did the divine right of kings. Any human power can be resisted and changed by human beings. Resistance and change often begin in art, and very often in our art, the art of words.
Ursula K. Le Guin
<!--
Images
<img src="example.jpg" alt="Text helpfully describing the content of the image.">
Find an image, either one you already have or one on the internet, and add that to the page below:
-->
Images
</body>
</html>