-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathLesson1.html
104 lines (92 loc) · 5.25 KB
/
Lesson1.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lesson 1</title>
<link rel="icon" href="Resources/imag.png">
<!--internal css stored in the HEAD ; in the style tag -->
<style>
body{
background: dimgrey;
margin: 0px;
padding: 0px;
}
h1,h2{
font-family: "Yu Gothic Medium";
color: orangered;
padding-left: 50px;
}
p{
font-family: "Baskerville Old Face";
font-size: 18px;
text-align: justify;
padding-left: 50px;
padding-right: 50px;
}
a{
padding-left: 50px;
font-size: 30px;
}
div{
background-color: lavender;
padding-left: 80px;
padding-right: 80px;
text-align: justify;
padding-bottom: 10px;
padding-top: 10px;
}
/*we use a dot to call a class*/
/*a class is an attribute of an element*/
.para1{
font-family:Century;
color: #40168b;
font-size: 22px;
}
/*use a hash to call an id*/
#para2{
font-family: "Times New Roman";
font-size: 18px;
color: #805712;
}
</style>
</head>
<body>
<h1>HTML 5</h1>
<hr>
<h2><u>Introduction</u></h2>
<p><b>Welcome to HTML 5</b></p>
<div><p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong> <br> Alias autem, distinctio eaque enim et ex fugiat illo laudantium minima minus mollitia nisi praesentium quia, quo rem rerum saepe tempore veniam.</p>
</div>
<p class="para1"><span><i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Aliquam aliquid ex nulla officia officiis? At delectus doloremque dolores fuga harum illo laboriosam nisi nostrum nulla omnis, quod repudiandae sequi vitae?</span><span>Adipisci aperiam consectetur cum dicta dolores eligendi enim est exercitationem illo in inventore, ipsam itaque labore minima modi nobis quam quia quis repellat rerum sed soluta voluptatem voluptates voluptatibus voluptatum.</span><span>A accusantium aut consequuntur deserunt dolor dolores enim, excepturi hic labore laborum magni minima nobis non nulla odio placeat porro possimus ratione repudiandae sit tenetur unde ut vel vero voluptate?</span><span>A, adipisci alias aliquam commodi, consectetur cumque dicta eaque modi quam ratione rem velit vero. Aspernatur debitis dignissimos doloremque, exercitationem ipsum, nesciunt qui quibusdam, ratione repellendus sequi sunt ut vero.</span><span>Alias amet, aut consequuntur deserunt dolores eligendi esse ex hic incidunt nam nesciunt obcaecati perspiciatis quis quod soluta suscipit vero? Aperiam nostrum nulla placeat reiciendis! Ab doloribus esse in nobis? </i> </span></p>
<!--assign a class(no spacing) or an id to make a particular item to be unique-->
<p id="para2"><span><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Architecto, ducimus ea eligendi est facere illum nulla sequi ullam. Ad adipisci aut dolorum ea explicabo nulla odit placeat tenetur ullam voluptates.</span><span>Ab ad adipisci alias aliquid animi blanditiis culpa deleniti deserunt, dignissimos dolores est eveniet excepturi harum impedit ipsa itaque laboriosam minus necessitatibus numquam odio quibusdam quos repellat sed tenetur voluptatem.</span><span>Ab beatae, culpa eum facere in itaque, maiores nam officiis porro provident, quidem recusandae reiciendis. Aperiam dicta eum, ipsam laboriosam molestiae numquam rem sapiente sequi sit soluta tempore temporibus voluptate!</span><span>Architecto asperiores consequatur delectus dolore, earum, enim eos labore laudantium magnam neque non perferendis possimus quod repudiandae sit tenetur vitae voluptas voluptate voluptatem voluptatum! Aliquid dolores maiores perspiciatis quasi soluta.</em></span>
</p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores distinctio dolor dolorem doloribus esse facere fugiat, libero maiores nisi provident quia, sed sequi sint ut vel veniam veritatis vero voluptatem.</span><span>Dolor esse illo impedit iste nemo praesentium quae soluta temporibus ut. Alias aliquid assumenda autem consequuntur fugiat hic impedit labore laudantium minima minus nulla officiis quaerat quam quo, sed tenetur?</span><span>Ab adipisci aut cumque deserunt dicta dolorem eaque eius enim eos esse fuga in itaque laudantium libero maiores molestias neque nisi officiis perferendis provident repellat, repudiandae sequi sint vero voluptatibus.</span></p>
<p>
24<sup>th</sup> June 2019.
</p>
<p>
H<sub>2</sub>SO<sub>4</sub>
</p>
<p>
©
</p>
<div>
<h4>Copyright © 2019. eMobilis</h4>
<h2><u>Special Characters</u></h2>
© => Copyright Sign <br>
™ => Trademark Sign <br>
® => Registered Sign <br>
⅛ => Fraction One Eigth <br>
& => Ampersand <br>
< => Less than Sign <br>
=> Non-Breaking sign <br>
> => Greater than Sign
</div>
<a href="Lesson2.html">Next Page</a>
</body>
</html>
<!--link an icon from your directory-->
<!--elements have attributes-->
<!--concatenation is the combining of elements-->
<!--character formatting-->