-
Notifications
You must be signed in to change notification settings - Fork 0
/
html_practice.html
88 lines (69 loc) · 2.57 KB
/
html_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
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="style.css">
<title>Training arc</title>
</head>
<body style="background-color:#DDD0C8;">
<div class="sticky">
<div class = "topnav">
<a href="quiz1.html">Home</a>
<a href="profile.html">Profile</a>
<a href="hometown.html">Hometown</a>
<a href="food.html">Cuisine</a>
<a href="tourist.html">Tourism</a>
<a class="easter" href="html_practice.html">emoH</a>
</div>
</div>
<h1 style="font-size: 300px;" class="waduh"> WADUH</h1>
<h2> Welcome traveler to my HTML learning arc!<br> So your intrusive thoughts got the best of you I see :D<br> Or you inspected my code.. </h2>
<p> Html links are defined with the a tag: </p>
<a href="https://www.instagram.com/has.sunken/">This is my Instagram</a> <!--this is for links-->
<h2> for images you use img src tag </h2>
<img src="Sadao.png" alt="picture of Sadao" width="300" height="300">
<p> just make sure the image file is in the same folder as the html code. Oh and alt is for when
the image didn't load and you'll know what it's trying to display
</p>
<h2> for buttons it's simple just use the button tag</h2>
<button> Try clicking me </button>
<h2> for list you use ul(unordered) tag for unordered list and ol{ordered} for an ordered list and for each list element
use the tag li.
</h2>
<ul>
<li> milk</li>
<li> chocolate</li>
</ul>
<ol>
<li> almond</li>
<li> seeds</li>
</ol>
<h2 title="I'm a title :D"> Try hovering over at this title</h2>
<p title="This is interesting!"> This is done by using title as a tag after the header tag or the
paragraph tag
</p>
<h2> For a coloured text you use style tag equals to quotation color:red or green whatever;"> then
whatever text you want
</h2>
<p style="color:darkblue;"> This color is darkblue :D</p>
<p> Now this time <br> the line actually goes <br> down :D</p>
<p> By using the pre tag, you'll be able to retain the spacing positions</p>
<div class="texthd">
<pre>
Like <a href="Double_trouble.html">here</a>:
I'm not using the break
in between
these texts
ehe
like quite literally
</pre>
</div>
<p style="color:red;"> This is red :D</p>
<p style="font-size:50px;"> I am Biug </p>
<p> Now you are wondering what I'll do here, well I will make the whole page beige colored
by placing the style tag and baground colour within the body tag at the top.
</p>
<h1 style="font-family:verdana;text-align: center;"> Woah a different Font family!</h1>
<h3 style="font-family:verdana;"> just place the style tag with font-family:then your desired
font family I also made it centered under the same style tag just after the first ';'</h3>
</body>
</html>