-
Notifications
You must be signed in to change notification settings - Fork 0
/
practice.html
288 lines (268 loc) · 10.2 KB
/
practice.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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" conten="Anyanwu Johnpaul Chinedu" />
<title>Learning HTML</title>
</head>
<body>
<h1>About Google</h1>
<!--Linked a Cafe Website from index.html to cafe.html-->
<p> <a href="cafe.html">Cafe Site</a></p>
<p> <a href="wrox.html">Wrox Site</a></p>
<!--Implementing Paragraphs in HTML-->
<p>
Google is best known for its search engine, although Google now offers a
number of other services.
</p>
<p>
Google’s mission is to organize the world’s information and make it
universally accessible and useful.
</p>
<p>
Its founders Larry Page and Sergey Brin started Google at Stanford
University.
</p>
<p> Google is best known for its search engine, although Google now offers a
number of other services. </p>
<p> Google’s mission is to organize the world’s information and make it
universally accessible and useful. </p>
<p> Its founders Larry Page and Sergey Brin started Google at Stanford
University. </p>
<p> <a href=”http://www.Google.com/” > Click here to visit Google’s Web
site. </a> </p>
<!--Implementing Headings in HTML-->
<h1>Heading 1</h1>
<p> This section is going to address the way in which you mark up text.
Almost every document you create will contain some form of text, so this
will be a very important section. </p>
<h2>Heading 2</h2>
<p> Before you start to mark up your text, it is best to understand what
XHTML does when it comes across spaces and how browsers treat long sentences
and paragraphs of text. </p>
<h3>Heading 3</h3>
<p> No matter what sort of document you are creating, most documents have
headings in some form or other... </p>
<h4>Heading 4</h4>
<P>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi, velit nulla illo quae sunt laboriosam maiores assumenda praesentium sit nam!</P>
<h5>Heading 5</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, eius?</p>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa beatae minima ratione ipsa, fugiat neque!</p>
<!--Using Deprecated align attributes in HTML headings-->
<p style="text-align: left;">I am Jaypee</p>
<p style="text-align: center;">I'm a Frontend Engineer</p>
<p style="text-align: right;">Based in Lagos</p>
<!--Implementing paragraphs in HTML-->
<p> Here is a paragraph of text. </p>
<p> Here is a second paragraph of text. </p>
<p> Here is a third paragraph of text. </p>
<!--Implementing Line break tags in HTML paraggraphs-->
<p>HTML</p> <br>
<p>CSS</p> <br>
<p>JavaScript</p> <br>
<p>Python</p> <br>
<p>Java</p> <br>
<p>C</p> <br>
<p>PHP</p> <br>
<p>C</p>
<!--Implementing Presentational element in HTML-->
<h3>Bold</h3>
<p>The following word uses a <b>bold</b> typeface</p>
<h3>Italic</h3>
<p>The following word uses an <i>italic</i> typeface.</p>
<h3>Strikethrough</h3>
<p>The following word would have a <s> strikethrough </s> </p>
<h3>Small</h3>
<p>The following word should be <small> smaller </small >than those around it.</p>
<h3>Big</h3>
<p>The following word should be <big> Bigger </big>than those around it.</p>
<!--Implementing phrase element in HTML-->
<h3>Emphasis/h3>
<p>You <em> must </em> remember to close elements in XHTML.</p>
<h3>Emphasis/h3>
<p>You <strong> must </strong> remember to close elements in XHTML.</p>
<h3>Address Element</h3>
<p>I live at <address> Wrox Press, 10475 Crosspoint Blvd, Indianapolis, IN 46256 </address></p>
<h3>Abbreviation Element</h3>
<p>I have a friend called <abbr title=”Beverly” > Bev </abbr> .</p>
<h3>Acronym Element</h3>
<p>This chapter covers marking up text in <acronym title=”Extensible Hypertext
Markup Language” > XHTML </acronym></p>
<h3>Blockquote Element</h3>
<p><blockquote>XHTML 1.0 is the W3C’s first Recommendation for XHTML,
following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML
2.0.</blockquote></p>
<!--Using the cite Attribute with the < blockquote >Element -->
<h3>CIte Attribute Element</h3>
<p> <blockquote cite="https://www.2markup.com">XHTML 1.0 is the W3C’s first
Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML
4.0, HTML 3.2 and HTML 2.0.</blockquote></p>
<h3>The Q Element</h3>
<p>As Dylan Thomas said, <q> Somebody’s boring me. I think it’s me </q> .</p>
<h3>Cite Element</h3>
<p>This chapter is taken from <cite> Beginning Web Development </cite></p>
<h2>List Element</h2>
<p>Types of list list element</p>
<p>Ordered list</p>
<p>Unordered list</p>
<p>Definition list</p> <br>
<h3>Ordered List</h3>
<P>
<ol>
<li>Jaypee</li>
<li>Judie Beautie </li>
<li>Julie Gold</li>
<li>Janey</li>
</ol>
</P>
<h3>Unordered List</h3>
<P>
<ul>
<li>Joy</li>
<li>Bolu</li>
<li>Olamide</li>
</ul>
</P>
<!--Roman numerals in a list-->
<h3>Roman Numerals</h3>
<ol type=”i”>
<li> Point number one </li>
<li> Point number two </li>
<li> Point number three </li>
</ol>
<!--Using start Attributes in a list-->
<h3>Start Attributes in a list</h3>
<ol type=”A” start=”4”>
<li> Point number one </li>
<li> Point number two </li>
<li> Point number three </li>
</ol>
<!--Implementation of Definition list-->
<h3>Definition list</h3>
<dl>
<dt> Unordered List </dt>
<dd> A list of bullet points. </dd>
<dt> Ordered List </dt>
<dd> An ordered list of points, such as a numbered set of steps. </dd>
<dt> Definition List </dt>
<dd> A list of terms and definitions. </dd>
</dl>
<!--Nesting list-->
<h3>Nesting different kinds of list in a particular type of list</h3>
<ol type=”I”>
<li> Item one </li>
<li> Item two </li>
<li> Item three </li>
<li> Item four
<ol type=”i”>
<li> Item 4.1 </li>
<li> Item 4.2 </li>
<li> Item 4.3 </li>
</ol>
</li>
<li> Item Five </li>
</ol>
<!--Using alphanumeric identity and Implementing font element-->
<h3> Using the & lt;font & gt; element </h3>
<font face=”arial, verdana, sans-serif” size=”2” color=”#345ac4”> The
& lt;font & gt; element has been deprecated since HTML 4.0. You should now use
CSS to indicate how text should be styled. </font>
<!--Implelementing block element-->
<h1> Block-Level Elements </h1>
<p> <strong> Block-level elements </strong> always start on a new line. The
<code> & lt;h1 & gt; </code>and <code> & lt;p & gt; </code>elements will not sit
on the same line, whereas the inline elements flow with the rest of the
text. </p>
<!--Grouping element with div-->
<div class=”footnotes”>
<h2> Footnotes </h2>
<p> <b>1</b> The World Wide Web was invented by Tim Berners-Lee </p>
<p> <b>2</b> The W3C is the World Wide Web Consortium which maintains many
Web standards </p>
</div>
<!--Implementing a span element in a div-->
<div class=”footnotes”>
<h2> Footnotes </h2>
<p> <span class=”inventor” > <b> 1 </b>The World Wide Web was invented by Tim
Berners-Lee </span> </p>
<p> <b> 2 </b> The W3C is the World Wide Web Consortium which maintains many Web
standards </p>
</div>
<!--Linking pages to an external website-->
<div>
<p> Why not visit the <a href=”http://www.wrox.com/” > Wrox web site </a> ? </p>
</div>
<!--Linking to a page within a website: A snippet-->
<!--Let assume we have the various sections on a Website; Home, Product, About, Service and Info-->
<div>
<!--Linking and Navigations-->
<p>List of pages on this website</p>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="product.html">Product</a></li>
<li><a href="about.html">About</a></li>
<li><a href="service.html">Service</a></li>
<li><a href="info.html">Info</a></li>
</ul>
</nav>
</header>
</div>
<h3>URLs</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos similique rerum odio explicabo voluptatem voluptates quisquam non earum deserunt quo. Temporibus distinctio ab architecto iusto ipsum excepturi voluptate aspernatur commodi.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos similique rerum odio explicabo voluptatem voluptates quisquam non earum deserunt quo. Temporibus distinctio ab architecto iusto ipsum excepturi voluptate aspernatur commodi.</p>
<!--Back to top link-->
<footer><a href="practice.html">Back to top </a></footer>
<h3>Source and Anchors</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos similique rerum odio explicabo voluptatem voluptates quisquam non earum deserunt quo. Temporibus distinctio ab architecto iusto ipsum excepturi voluptate aspernatur commodi.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos similique rerum odio explicabo voluptatem voluptates quisquam non earum deserunt quo. Temporibus distinctio ab architecto iusto ipsum excepturi voluptate aspernatur commodi.</p>
<footer><a href="practice.html">Back to top </a></footer>
<!--Images, Audio and Video-->
<!--Adding images using the <img> elements-->
<!--Embeding the height and width attributes-->
<ul>
<li><img src="logo.gif" alt="Wrox logo" height="120" width="180" /> </li>
<li><img src="images/logo.gif" alt="example cafe" width="194" height="80" /></li>
<li><img src="images/scrambled_eggs.jpg" width="622" height="370" alt="Photo of
scrambled eggs on an English muffin" style="text-align:left;" /></li>
</ul>
<!--Using Images as Links-->
<p><a href=”../index.html” title=”Click here to return to the home page” >
<img src=”images/logo.gif” width=”338” height=”79” alt=”Wrox Logo” />
</a ></p>
<!--list-->
<ul>
<li>A</li>
<li>B</li>
<ol>
<li>B1</li>
<li>B2</li>
<ul>
<li>B2a</li>
<ul>
<li>B2aa</li>
<li>B2aa</li>
</ul>
<li>B2b</li>
<li>B2c</li>
</ul>
<li>B3</li>
<ol>
<li>B31</li>
<li>B32</li>
</ol>
</ol>
<li>C</li>
</ul>
<!--Anchor tags in a list-->
<ol start="3">
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.github.com.">GitHub</a></li>
<li><a href="https://www.freeCodeCamp.org">freeCodeCamp</a></li>
<li><a href="https://www.codecademy.com">Codecademy</a></li>
</ol>
</body>
</html>