-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhello.html
205 lines (188 loc) · 9.13 KB
/
hello.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
<!DOCTYPE html>
<!--You left off your tutorial (https://www.youtube.com/watch?v=UB1O30fR-EE) at 48:38. Update: You finished the tutorial! good job :)-->
<html>
<head>
<title>Daniel's Website</title> <!-- This is what the tab name is. -->
<style type="text/css">
#main-header{
text-align:center;
background-color: black;
color:white;
padding:10px
}
#main-footer{
text-align: center;
font-size:18px;
}
</style>
</head>
<body>
<header id="main-header">
<h1>Daniel's Super Duper Website</h1>
</header>
<h1>Hello, internet!</h1>
<h2>Can't wait to say hello!</h2>
<p>I was created by Daniel C. I will be worked on more soon!</p>
<br />
<br />
<p>Thank you to Brad Traversy for his Html tutorial. <br /> <a href="https://www.youtube.com/watch?v=UB1O30fR-EE" target="_blank"><cite>Html Crash Course</cite></a> by Brad Traversy</p>
<br />
<a href="fake_blog.html"><em>Go to my "blog"</em></a>
<br />
<br />
<hr> <!--Creates horizontal line across the page. Can be used to group text and or sections if you wish to.-->
<img src="lakeside copy.jpg" width="1000px" height="550px"/> <!--I could also set the width using width="[value]px" and also the height, but I'm not gonna do that now. Actually, I will!-->
<!--I wanted to add a button that would say something like-->
<!--"Press to play groovy music", but I don't know how right now.-->
<!--I'm just gonna leave that until I know how to it.-->
<h3>Break Example</h3> <!--Links are made with <a> and </a> which surround the text you want to be a link. The href="" thing is where you put the link that takes the user where you want them to be when they click it. The target="" thing makes it so that when clicked, the link opens a new tab. You do this because if you don't, when the user clicks on it, it will leave the page and go to that location, which you typically don't want to do if you want users to continue reading and exploring the webpage.-->
<p>If you look at the code (on my github page: <a href="https://github.com/CatX711/Hyper-Text-Markup" target="_blank">Hyper-Text-Markup</a>), you'll see that there is a break right about here ➡️ <br /> See how that indents? Ain't that cool?</p>
<p>Essentially, a break is just how you would move down a line when you're writing a book or something. <br /> It's also useful because the thing that lets you make paragraphs, doesn't let you move down a line.</p>
<h3>Different Types Of Headings - Test</h3>
<!--Header Types-->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h3>Lorem Ipsum, Dolor Sit Amet</h3>
<!--Note, by default, <strong> makes the text it's surrounding bold, but you can change it with CSS.-->
<p><strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p><em>Vitae auctor eu augue ut.</em></p>
<!--By default <em> makes the text itallic.-->
<hr>
<h3>Lists</h3>
<!--Lists: Unordered lists and ordered lists (bullet points and numbers)-->
<ul> <!--Unordered list, aka bullet point list.-->
<li>List Item 1</li> <!--<li> stands for list item. It's what goes to the right of the bullet points.-->
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>
<ol> <!--Ordered list, aka numbered list.-->
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ol>
<h3>Tables</h3>
<!--Tables-->
<table>
<thead>
<tr> <!--Table Row-->
<th>Name</th>
<th>Email</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Daniel Catarig</td>
<td>[email protected]</td>
<td>11</td>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>13</td>
</tr>
<tr>
<td>Jason Drake</td>
<td>[email protected]</td> <!--This is an easter egg to a character in my game, Pie OS called "WomanSlayer420"-->
<td>17</td>
</tr>
</tbody>
</table>
<br />
<hr>
<br />
<h3>Input</h3>
<br />
<br />
<!--Forms-->
<form action="process.php" method="POST">
<div>
<label>First Name</label>
<input type="text" name="FirstName"
placeholder="Enter Your Name">
</div>
<br /> <!--Doesn't make a line break for some reason 😭--> <!--Update: it does but only when u put two line breaks lol-->
<br />
<div>
<label>Last Name</label>
<input type="text" name="LastName"
placeholder="Enter Your Last Name">
</div>
<br />
<br />
<div>
<label>Email</label>
<input type="email" name="Email">
</div>
<br />
<br />
<div>
<label>Message</label>
<textarea name="Feedback/Message"></textarea>
</div>
<br />
<br />
<div>
<label>Gender</label>
<select name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
<br />
<br />
<input type="submit" name="submit" value="Submit">
</form>
<br />
<br />
<br />
<br />
<p>Hey! You got to the second image! Good on you! Have a cookie.</p>
<!--Small thing to add: I can make it so that if you click on a picture, it will take you to that picture's location. So it's essentially clicking on a link to the picture. I'll do it here.-->
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"> <!--I couldn't find the image's original location so I made the link a rickroll lol.-->
<img src="mountains copy.jpeg" width="1000px" height="550">
</a>
<h3>Abbreviations (abbr)</h3>
<!--Abbreviations: When there's an acronym that can be abbreviated, you can set what that abreviation is. The acronym will be underlinded and hovering your mouse over it will show you the abbreviated acronym.-->
<p>Thanks for visiting my <abbr title="Cool And Fun To Program">CARFTP</abbr> website!</p>
<p>The <abbr title="World Wide Web">WWW</abbr> is cool!</p>
<p><abbr title="Hyper-Text-Markup-Language">HTML</abbr> is cool and fun to learn and use!</p>
<br />
<br />
<hr>
<h2>Sandbox</h2>
<br />
<p>I'm just going to try random stuff in here, hence the name.</p>
<br />
<br >
<p><em>I'm just going to try random stuff in here, hence the name.</em></p>
<br />
<br />
<p><strong>I'm just going to try random stuff in here, hence the name.</strong></p>
<br />
<br />
<p><strong><em>I'm just going to try random stuff in here, hence the name.</em></strong></p>
<p>I bet you won't click this link: <a href="https://www.youtube.com/watch?v=p7YXXieghto"><em>Will you do it?</em></a></p>
<!--I purposefully made that href have no target="_blank" so that the rickroll would instantly open instead of pausing when a new tab is made lol im so devious 😈 nah jk lol-->
<!--Update: I removed it, since I RICKROLLED MYSELF 😭-->
<div style="margin-top:200px"></div> <!--Makes the page a bit bigger-->
<br />
<br />
<footer id="main-footer">
<p>Copyright © 2022, My Website, Dan Inc.</p>
</footer>
<h1>
Thanks for visiting my website!
</h1>
<p>Finally, thank you all for checkin' out my website. It may not be that good, and I may be crap at getting
the CSS to work, but it's been <abbr title="Very Fun To learn And Now I Will Take A Break">VFTLANIWTAB</abbr>!
</p>
</body>
</html>