-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
199 lines (176 loc) · 7.4 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Website I used to learn HTML</title>
<!--Meta Tags-->
<meta charset="UTF-8">
<meta name="description" content="Basic HTML For Beginners">
<meta name="keywords" content="HTML, Beginners, Turtorial">
<meta name="author" content="TOGZ8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="30">
</head>
<body>
<!--Hello!-->
<h1>Welcome Aboard!</h1>
<hr>
<h1>I do not like pizza</h1>
<br>
<h2>I do not like pizza</h2>
<br>
<h3>I do not like pizza</h3>
<br>
<h4>I do not like pizza</h4>
<br>
<h5>I do not like pizza</h5>
<br>
<h6>I do not like pizza</h6>
<br>
<p>This is some sample paragraph text</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eos cum voluptate cupiditate quas cumque recusandae, voluptates aspernatur adipisci natus quod sapiente! Pariatur amet itaque praesentium odit. Blanditiis, qui vero?</p>
<hr>
<!--Hyperlinks-->
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target=_blank title="This is def. not a rickroll :)">
<h2>Click Here!</h2>
</a>
<br>
<a href="page2.html" target=_self>
<h1>Go to page 2!</h1>
</a>
<br>
<a href="mailto:[email protected]" target=_self>
<h2>Email me</h2>
</a>
<hr>
<br>
<!--Images-->
<img src="https://togz819.github.io/htmlbasics/Images/Shrek.png" height="500" alt="This is a image of shrek being happy" title="A picture of happy shrek :)">
<!--You can change the height and the width seperatly, although the they change proportionally-->
<br>
<a href="https://en.wikipedia.org/wiki/Princess_Fiona" target=_blank>
<img src="https://togz819.github.io/htmlbasics/Images/princessf.png" height="500" alt="Picture of Princess Fiona" title="Click on this image for Princess Fionas wikipedia page! This image is also a picture of Princess Fiona">
</a>
<hr>
<br>
<!--Audio-->
<audio controls autoplay muted loop src="https://togz819.github.io/htmlbasics/Audio/Night Shift - National Sweetheart.mp3"></audio>
<hr>
<br>
<!--Videos:
MP4, WebM, and OGG
Can have the same attributes as Audio
-->
<video controls src="https://togz819.github.io/htmlbasics/Videos/The%20Fast%20and%20The%20Furious%20-%20Tokyo%20Drift%20Welcome%20to%20Tokyo%20%5BTubeRipper.com%5D.mp4" height="500"></video>
<hr>
<br>
<!--Text Formatting-->
<p>This is normal text</p>
<p>This is <b>bold</b> text</p>
<p>This is <i>italic</i> text</p>
<p>This is <big>big</big> text</p>
<p>This is <small>Small</small> text</p>
<p>This is <sub>subscript</sub> text</p>
<p>This is <sup>superscript</sup> text</p>
<p>This is <ins>underlined/inserted</ins> text</p>
<p>This is <del>deleted</del> text</p>
<p>This is <mark>marked</mark> text</p>
<hr>
<br>
<!--Lists-->
<h4>Unordered List</h4>
<ul>
<li>Pizza Dough</li>
<li>Tomato Sauce</li>
<li>Cheese</li>
<li>Topping
<ul>
<li>Pepperoni</li>
<li>Mushrooms</li>
<li>Pineapple</li>
<li>Peppers</li>
</ul>
</ul>
<h4>Ordered List</h4>
<ol type = "A">
<li>Wake Up</li>
<li>Take A Shower</li>
<li>Brush Teeth</li>
<li>Change Clothes</li>
</ol>
<h4>Description List</h4>
<dl>
<dt>HTML</dt>
<dd>HTML 5 is a promgramming language that adds structure to a webpage.</dd>
<dt>CSS</dt>
<dd>CSS is a programming language adds style to a webpage.</dd>
<dt>JS/JavaScript</dt>
<dd>Js/Javascript is a programming language that adds functionallity to a webpage.</dd>
</dl>
<hr>
<br>
<!--Tables-->
<h3>Store Hours</h3>
<table bgcolor="Black" width="700">
<tr bgcolor="grey">
<th width="100">Sunday</th>
<th width="100">Monday</th>
<th width="100">Tuesday</th>
<th width="100">Wednesday</th>
<th width="100">Friday</th>
<th width="100">Saturday</th>
</tr>
<tr bgcolor="lightgrey" align="center">
<td>Closed</td>
<td>Open 9-5</td>
<td>Open 9-5</td>
<td>Open 9-5</td>
<td>Open 9-5</td>
<td>Closed</td>
</tr>
</table>
<hr>
<br>
<!--Colors-->
<h2 style="background-color: aquamarine;">This text has a bg color of aquamarine</p>
<h2 style="color: red;">This text has a color of red</h2>
<h2 style="color:rgb(255,200,90);">This text has a color of yellowish/orange with RGB</h2>
<h2 style="color: #28f005;">This text has a color of green with hex</h2>
<h2 style="color: #28f005; background-color: grey;">This text has multiple attributes making it hav grey background with green text.</h2>
<hr>
<br>
<!--Span & Div-->
<div style="background-color: #444444;">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa ea dignissimos illo ut aut aliquam, dolorem velit non quis incidunt repudiandae ab eveniet, quibusdam expedita iure quasi veniam laboriosam! Aliquam.
</p>
<p>
<span style="color: red;">Lorem ipsum dolor sit amet consectetur adipisicing elit.</span> Nam officiis eveniet neque qui recusandae dicta laboriosam minima iste nulla, autem quae nesciunt ut distinctio ullam, maxime vel velit, sed iusto?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet officia minima consequuntur sapiente consectetur cupiditate dolores eum magni sunt fuga a dolorum, vel reiciendis nisi ratione. Porro facilis voluptatibus laborum.
</p>
</div>
<hr>
<br>
<!--iframe = embeds content from another webpage into an HTML Document.-->
<iframe style="border:0;" src="https://togz819.github.io/htmlbasics/Iframehtml/Iframe.html" width="450" height="520"></iframe>
<hr>
<br>
<!--Buttons-->
<a href="https://www.youtube.com/watch?v=xvFZjo5PgG0">
<button disabled style="height:50px;width: 100px; background-color: #333333; border-radius:20px;">Click Me!</button>
</a>
<br>
<a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" target=_blank>
<button style="height:50px;width: 100px; background-color: #333333; border-radius:20px;">Click Me!</button>
</a>
<br>
<button onclick="doSomething()" style="height:50px;width: 100px; background-color: #333333; border-radius:20px;">Click Me!</button>
<p id="test">Hello</p>
<script>
function doSomething(){
document.getElementById("test").innerHTML = "Goodbye";
}
</script>
</body>
</html>