This repository was archived by the owner on Mar 1, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtutorial.html
195 lines (193 loc) · 12.8 KB
/
tutorial.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
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>CodeArchive2.0 - HTML5</title>
<link rel="stylesheet" href="./styling/maintheme.css">
<script>
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
document.cookie = `theme=${themeName}; path=/; SameSite=None; Secure`;
}
function toggleTheme() {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-light');
} else {
setTheme('theme-dark');
}
}
let gets = decodeURIComponent(document.cookie).split('; ');
console.log(gets);
if (gets.length == 2) {
getc = gets[1];
} else {
getc = gets[0];
}
let gettheme = getc.split('=');
if (gettheme[0] === 'theme' && gettheme[1] === 'theme-light') {
setTheme('theme-light');
} else {
setTheme('theme-dark');
}
</script>
</head>
<body style='overflow-x:hidden;'>
<div>
<div class="topnav">
<img align="left" src="./media/images/codearchive.gif">
<div>
<a href="./index.html" target="_self">🔑Logout</a>
<a href="./feedback.html" target="_self">💬Feedback</a>
<a href="./contact.html">🖥️Contact</a>
<a class="active" href="./tutorial.html" target="_self">🏠Home</a>
<label id="switch" class="switch">
<input type="checkbox" onchange="toggleTheme()" id="slider">
<span class="slider round"></span>
</label>
</div>
</div>
<div class="sidenav">
<br><br><br>
<a href='./tutorial.html'><p><span>Main page</span></p></a>
<a href="#INTRO"><p> Introduction</p></a>
<a href="#WHATISHTML"><p> What is HTML?</p></a>
<a href="#ELEMENTS"><p> Elements</p></a>
<a href="#TAGS"><p> Tags</p></a>
<a href='./childs/_comment.html'><p> Commenting in HTML</p></a></li>
<a href='./childs/_doctype.html'><p> DOCTYPE Declaration</p></a></li>
<a href='./childs/_html.html'><p> Set up document</p></a></li>
<a href='./childs/_head.html'><p> Head of a document</p></a></li>
<a href='./childs/_meta.html'><p> Set up metadata</p></a></li>
<a href='./childs/_script.html'><p> Using scripts</p></a></li>
<a href='./childs/_style.html'><p> Styling</p></a></li>
<a href='./childs/_body.html'><p> Body container</p></a></li>
<a href='./childs/_footer.html'><p> Set up footer</p></a></li>
<a href='./childs/!global_attr.html'><p> Global attributes</p></a></li>
<a href='./childs/!event_attr.html'><p> Event attributes</p></a></li>
<a href="#TUTORIAL"><p> Tutorials</p></a>
<a href='./childs/how_to_button.html'><p> Ripple effect button</p></a></li>
<a href='./childs/how_to_iframe.html'><p> Creating iframe</p></a></li>
<a href="#CONCLUSION"><p> Conclusion</p></a>
<a href='./videos.html'><p>Videos</p></a>
<a href='./quizintro.html'><p>Quizzes</p></a>
<a href='./suggestion.html'><p>Suggestions</p></a>
<br><br><br><br><br><br>
</div>
<div class="gtranslate_wrapper"></div>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
<script>window.gtranslateSettings = {"default_language":"en","languages":["en","zh-TW","el","es","ru","de","tl","fr","it"],"wrapper_selector":".gtranslate_wrapper"}</script>
</div>
<div class='main'>
<div>
<img src='./media/images/htmlbanner.png' width='1300px'>
</div>
<div>
<h1>Introduction</h1>
<h1 class="anchor" id='INTRO'></h1>
<h2>What is HTML?</h2>
<h1 class="anchor" id='WHATISHTML'></h1>
<iframe id="video" src="https://www.youtube.com/embed/SLFOg4kjHNQ" frameborder="0" allowfullscreen></iframe>
<p>HTML stands for <b>HyperText Markup Language</b> and it is a markup language used for structuring and presenting content using tags within the document on the World Wide Web. It is being used to design web pages.</p>
<p>HTML5 has improved the markup available for documents and has introduced application programming interfaces (API) and Document Object Model (DOM).</p>
<h2>HTML has a lot of usages, including:</h2>
<ul>
<li><b>Website development:</b> Developers use HTML code to design how a browser displays web page elements, such as text, hyperlinks, and media files.</li>
<li><b>Internet navigation:</b> Users can easily navigate and insert links between related pages and websites as HTML is heavily used to embed hyperlinks.</li>
<li><b>Website documentation:</b> HTML makes it possible to organize and format documents, similarly to Microsoft Word.</li>
</ul>
<img src="./media/images/webdesign.jpg" class="center">
<p>HTML is not considered a programming language as it can't create dynamic functionality. It is now considered an official web standard. The World Wide Web Consortium (W3C) maintains and develops HTML specifications, along with providing regular updates.</p>
<p>HTML documents are files that end with a <code>.html</code> or <code>.htm</code> extension. A web browser reads the HTML file and renders its content so that internet users can view it.</p>
<img src="./media/images/file_ext.png" alt="files used in this projects" style="margin-left:auto;margin-right:auto;width:70%;">
</div>
<hr>
<div>
<h2>Elements</h2>
<h1 class="anchor" id='ELEMENTS'></h1>
<p>All HTML pages have a series of HTML elements, consisting of a set of tags and attributes.</p>
<p>HTML elements are the building blocks of a web page. A tag tells the web browser where an element begins and ends, whereas an attribute describes the characteristics of an element.</p>
<h2>The three main parts of an element are:</h2>
<ul>
<li><b>Opening tag:</b> State where an element starts. The tag is wrapped with opening and closing angle brackets. E.g. <code><P></code> is to create a paragraph element.</li>
<li><b>Content:</b> This is the output that other users see.</li>
<li><b>Closing tag:</b> The same as the opening tag, but with a forward slash before the element name. E.g. <code></P></code> is to end a paragraph element.</li>
</ul>
<p>The combination will create an HTML element.</p>
<p>However, not every elements need a closing tag. Some just need an opening tag. <code><BR></code> and <code><HR></code> are good examples.</p>
</div>
<hr>
<div>
<h2>Tags</h2>
<h1 class="anchor" id='TAGS'></h1>
<p>Tags are being used to define structures and contents and they are mostly case insensitive.</p>
<p>Below are some of the basic tags.</p>
<div>
<table>
<tr>
<th style='width: 200px;'>Tag</th>
<th style="width: 1020px;">Description</th>
</tr>
<tr>
<td translate='no'><a href='./childs/_comment.html' target='_self'><!--<i>comment</i>--></a></td>
<td>Defines a comment.</td>
</tr>
<tr>
<td translate='no'><a href='./childs/_doctype.html' target='_self'><!DOCTYPE></a></td>
<td>Defines the document's body.</td>
</tr>
<tr>
<td translate='no'><a href='./childs/_html.html' target='_self'><html></a></td>
<td>Defines the root of an HTML document.</td>
</tr>
<tr>
<td translate='no'><a href='./childs/_head.html' target='_self'><head></a></td>
<td>Defines the head portion of the document that contains information about the document such as title.</td>
</tr>
<tr>
<td translate='no'><a href='./childs/_meta.html' target='_self'><meta></a></td>
<td>Provides structured metadata about the document content.</td>
</tr>
<tr>
<td translate='no'><a href='./childs/_script.html' target='_self'><script></a></td>
<td>Places script in the document for client-side processing.</td>
</tr>
<tr>
<td translate='no'><a href='./childs/_style.html' target='_self'><style></a></td>
<td>Inserts style information (commonly CSS) into the head of a document.</td>
</tr>
<tr>
<td translate='no'><a href='./childs/_body.html' target='_self'><body></a></td>
<td>Defines the document's body.</td>
</tr>
<tr>
<td translate='no'><a href='./childs/_footer.html' target='_self'><footer></a></td>
<td>Represents the footer of a document or a section.</td>
</tr>
</table>
</div>
</div>
<hr>
<div>
<h1>Tutorials:</h1>
<h1 class="anchor" id='TUTORIAL'></h1>
<ul>
<li><a href="./childs/how_to_button.html" target="_self">How to make a button with ripple effect</a></li>
<li><a href="./childs/how_to_iframe.html" target="_self">How to create an iframe</a></li>
</ul>
</div>
<hr>
<div>
<h1>Conclusion</h1>
<h1 class="anchor" id='CONCLUSION'></h1>
<p>HTML is the primary markup language found on the internet. Every HTML page has a series of elements that create the content structure of a web page or application.</p>
<p>HTML is a beginner-friendly language with plenty of support and is mainly used for static website pages. HTML works best together with CSS for the styling and JavaScript for the functionality.</p>
<h2>Submit a feedback form to let me know if you have any other favorite resources to learn HTML with. Happy coding!</h2>
</div>
<h3>Source: <a href='https://www.geeksforgeeks.org/html5-introduction/' target='_blank'>Geeksforgeeks</a>, <a href='https://en.wikipedia.org/wiki/HTML5' target='_blank'>Wikipedia</a>, <a href='https://www.hostinger.com/tutorials/what-is-html' target='_blank'>Hostinger Tutorials</a>, <a href='https://www.tutorialrepublic.com/html-reference/html5-tags.php' target='_blank'>TutorialRepublic, <a href='https://www.w3schools.com/tags/ref_byfunc.asp' target='_blank'>W3Schools</a></h3>
</div>
<footer>
<p class="p" style="text-align:right; padding-right:10px;">Open source project by [it0007]. Last updated: 4 July 2023</p>
</footer>
</body>
</html>