-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
197 lines (195 loc) · 11.3 KB
/
index.html
File metadata and controls
197 lines (195 loc) · 11.3 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quen Del Pilar | My First Kodego Website</title>
<link rel="stylesheet" href="styles/style.css">
<link rel="icon" type="image/png" sizes="32x32" href="sources/favicon.png">
</head>
<body>
<div class="main-wrapper">
<header>
<nav>
<ul class="flex-row">
<li><a href="#home">Home</a></li>
<li><a href="#html-section">HTML</a></li>
<li><a href="#elements-section">Elements</a></li>
<li><a href="#tags-section">Tags</a></li>
<li><a href="#attributes-section">Attributes</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<div class="content-wrapper flex-column">
<video class="video-bg" autoplay muted loop>
<source src="sources/video-bg-1.mp4">
</video>
<section class="hero-section" id="home">
<div class="hero-item-1">
<h1>
HTML BASICS
</h1>
<p>
Quen Del Pilar <br>
WD35P <br>
<span style="font-size: 14px;">(Things I learned in week 1)</span>
</p>
</div>
</section>
<section id="html-section"> <!-- HTML Section -->
<div class="section-container flex-column main-column">
<h2>
What is HTML?
</h2>
<p>
HTML stands for <strong>HyperText Markup Language</strong>. It is a standard markup language for web page creation. It allows the creation and structure of sections, paragraphs, and links using HTML elements (the building blocks of a web page) such as tags and attributes.
</p>
<div class="flex-row main-row">
<img src="sources/img-html-section.png" alt="Example of an HTML code and website" width="100%" height="auto">
<div>
<p>
HTML has a lot of use cases, namely:
</p>
<ul>
<li><strong>Web development.</strong> Developers use HTML code to design how a browser displays web page elements. </li>
<li><strong>Internet navigation.</strong> Users can easily navigate and insert links between related pages and websites.</li>
<li><strong>Web documentation.</strong> HTML makes it possible to organize and format documents.</li>
</ul>
</div>
</div>
</div>
</section>
<section id="elements-section"> <!-- Elements Section -->
<div class="section-container flex-column main-column">
<h2>What are HTML Elements?</h2>
<div class="flex-row main-row">
<p>
The element usually starts with an opening tag, which consists of the name of the element. It's wrapped in opening and closing angle brackets. The opening tag indicates where the element begins. Similar to the opening tag, the closing tag is also wrapped in opening and closing angle brackets. But it also includes a forward slash before the element's name. Everything inside the opening and closing tags is the content.
</p>
<img src="sources/img-element-section.png" alt="Illustration of an HTMl element structure" width="100%" height="auto">
</div>
<p>
But not all elements follow this pattern. We call those that don't empty elements. They only consist of a single tag or an opening tag that cannot have any content. These elements are typically used to insert or embed something in the document. They can be classified into two categories:
</p>
<div class="flex-row split-row">
<div class="split-item">
<h3>Block-Level Elements</h3>
<p>A block-level element takes up the entire width of a page. It always starts a new line in the document. For example, a heading element will be in a separate line from a paragraph element.
</p>
</div>
<div class="split-item">
<h3>Inline Elements</h3>
<p>An inline element formats the inner content of block-level elements, such as adding links and emphasized strings. Inline elements are most commonly used to format text without breaking the flow of the content.
</p>
</div>
</div>
</div>
</section>
<section id="tags-section"> <!-- Tags Section -->
<div class="section-container">
<div class="tag-container flex-column main-column">
<h2>
HTML Tags
</h2>
<p>
An HTML tag is commonly defined as a set of characters constituting a formatted command for a Web page. At the core of HTML, tags provide the directions or recipes for the visual content that one sees on the Web.
</p>
<div>
<h3>
Block-level Tags
</h3>
<div class="tags-section">
<ul>
<li><code><adress></code></li>
<li><code><article></code></li>
<li><code><div></code></li>
<li><code><h1></code></li>
<li><code><header></code></li>
<li><code><li></code></li>
<li><code><main></code></li>
<li><code><nav></code></li>
<li><code><ol></code></li>
<li><code><p></code></li>
<li><code><table></code></li>
</ul>
</div>
</div>
<div>
<h3>
Inline Tags
</h3>
<div class="tags-section">
<ul>
<li><code><a></code></li>
<li><code><button></code></li>
<li><code><cite></code></li>
<li><code><code></code></li>
<li><code><data></code></li>
<li><code><em></code></li>
<li><code><i></code></li>
<li><code><select></code></li>
<li><code><span></code></li>
<li><code><time></code></li>
<li><code><video></code></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="attributes-section"> <!-- Attributes Section -->
<div class="section-container flex-column main-column">
<h2>
What are HTML Attributes?
</h2>
<p>
Elements also have attributes, which contain extra information about the element that will not appear in the content.
</p>
<div class="flex-row main-row">
<img src="sources/img-attribute-section.png" alt="Illustration of HTML attributes structure" width="100%" height="auto">
<div class="flex-column">
<p>
With this example, you can see the following characteristics of attributes:
</p>
<ol>
<li>There is a space between attributes and the element name</li>
<li>Attributes are added in the opening tag</li>
<li>Attributes are added in the opening tag</li>
<li>Attributes usually have a name and a value: name=“value”</li>
</ol>
</div>
</div>
</div>
</section>
</div>
</main>
<footer id="about"> <!-- Footer About Section -->
<div class="footer-container flex-row">
<div class="flex-column footer-item-1">
<h2>
About this project
</h2>
<p>
This project is the first activity in our coding bootcamp. The goal is to simply apply basic HTML elements on a website and apply what we've learned in our first week. It also took me about 6 hours combined time to create it from start to finish.
</p>
<p>
I used a dark theme since it is November and it's never too late for Halloween.. right? Anyway I think my structure is very unorgranized and inefficient, so, there's still a lot of room for improvement. I wasn't really satisfied with the final outcome and the css is also a mess. However, it ia a pretty fun activity and I'd like to enjoy front-end development as much as possible because the backend seems creepier than my Halloween theme. Have a nice day, thank you.
</p>
</div>
<div class="flex-column footer-item-2">
<p>
Credits to FreeCodeCamp.org for the content I used on this project. <br>
<a href="https://www.freecodecamp.org/news/html-basics-for-beginners/">"Learn HTML Basics for Beginners in Just 15 Minutes"</a>
</p>
<a href="https://github.com/quendp/HTML-basics"><button>View GitHub Repository</button></a>
<a href="https://quendp.github.io/HTML-basics/"><button>View Live Website on GitHub Pages</button></a>
</div>
</div>
<p style="text-align: center; font-size: 14px;">Made by Quen Del Pilar | November 12, 2022</p>
</footer>
</div>
</body>
</html>