Skip to content

Commit a576364

Browse files
Lazik10Lazik10
committed
Lazik - HTML fundamentals
1 parent 10de6bc commit a576364

File tree

8 files changed

+167
-0
lines changed

8 files changed

+167
-0
lines changed

‎starter/02-HTML-Fundamentals/blog.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<h2>BLOG</h2>
11+
<a href="index.html">Back</a>
12+
</body>
13+
</html>

starter/02-HTML-Fundamentals/challenges.jpg renamed to starter/02-HTML-Fundamentals/img/challenges.jpg

File renamed without changes.

starter/02-HTML-Fundamentals/laura-jones.jpg renamed to starter/02-HTML-Fundamentals/img/laura-jones.jpg

File renamed without changes.

starter/02-HTML-Fundamentals/post-img.jpg renamed to starter/02-HTML-Fundamentals/img/post-img.jpg

File renamed without changes.

starter/02-HTML-Fundamentals/related-1.jpg renamed to starter/02-HTML-Fundamentals/img/related-1.jpg

File renamed without changes.

starter/02-HTML-Fundamentals/related-2.jpg renamed to starter/02-HTML-Fundamentals/img/related-2.jpg

File renamed without changes.

starter/02-HTML-Fundamentals/related-3.jpg renamed to starter/02-HTML-Fundamentals/img/related-3.jpg

File renamed without changes.

‎starter/02-HTML-Fundamentals/index.html‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<!DOCTYPE html>
2+
<!-- html tag has language attribute -->
3+
<html lang="cz">
4+
<head>
5+
<meta charset="UTF-8" />
6+
<title>Basic language of the web: HTML</title>
7+
</head>
8+
9+
<body>
10+
<!-- Comments
11+
<h1>The basic language of the web: HTML</h1>
12+
<h2>The basic language of the web: HTML</h2>
13+
<h3>The basic language of the web: HTML</h3>
14+
<h4>The basic language of the web: HTML</h4>
15+
<h5>The basic language of the web: HTML</h5>
16+
<h6>The basic language of the web: HTML</h6>
17+
-->
18+
19+
<header>
20+
<!-- H - Main Headline -->
21+
<h1>The Code Magazine [DEMO]</h1>
22+
23+
<nav>
24+
<!-- Anchors / Links -->
25+
<a href="blog.html">Blog</a>
26+
<a href="#">Chalanges</a>
27+
<a href="#">Flexbox</a>
28+
<a href="#">CSS Grid</a>
29+
</nav>
30+
</header>
31+
32+
<article>
33+
<header>
34+
<!-- Secondary Headline -->
35+
<h2>The Basic Language of the Web: HTML</h2>
36+
37+
<img
38+
src="img/laura-jones.jpg"
39+
alt="Lazik image"
40+
width="50"
41+
height="50"
42+
/>
43+
<!-- Paragraph -->
44+
<p>Posted by <strong>Lazik</strong> on Monday, June 21st</p>
45+
46+
<!-- Image -->
47+
<img
48+
src="img/post-img.jpg"
49+
alt="HTML code on a screen"
50+
width="500"
51+
height="200"
52+
/>
53+
</header>
54+
55+
<p>
56+
All modern websites and web applications are built using three
57+
<!-- Emphasis / Italic-->
58+
<em>fundamental</em>
59+
technologies: HTML, CSS and JavaScript, These are the languages of the
60+
web
61+
</p>
62+
<p>
63+
In this post, let's focus on HTML. We will leadn what HTML is all about,
64+
and why you too should leadn it.
65+
</p>
66+
67+
<h3>What is HTML?</h3>
68+
<p>
69+
<!-- Strong / Bold -->
70+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
71+
<strong>M</strong>arkup <strong> L</strong>anguage. It's a markup
72+
language that web developers use to structure and describe the content
73+
of the webpage (not a programming language)
74+
</p>
75+
<p>
76+
HTML consists of elements that describe different types of content:
77+
paragraphs, links, headings, images, video, etx. Web browsers understand
78+
HTML and render HTML code as websites.
79+
</p>
80+
<p>In HTML, each element is mafe up of 3 parts:</p>
81+
<!-- OL (Ordered List)-->
82+
<ol>
83+
<!-- LI (List element) -->
84+
<li>The opening tag</li>
85+
<li>The closing tag</li>
86+
<li>Content</li>
87+
</ol>
88+
89+
<p>
90+
You can learn more at the
91+
<!-- a (anchor element) is used for links -->
92+
<a href="https://developer.mozilla.org/en-US/" target="_blank"
93+
>MDN Web Docs</a
94+
>.
95+
</p>
96+
97+
<h3>Why should you learn HTML?</h3>
98+
<p>
99+
There are counless reasons for learning the fundamental language of the
100+
web. Here are 5 of them:
101+
</p>
102+
<!-- UL (Unordered List) -->
103+
<ul>
104+
<li>To be able to use the fundamental web dev language</li>
105+
<li>
106+
To hand-craft beautiful websites instead of relying on tools like
107+
Wordpress or Wix
108+
</li>
109+
<li>To build web applications</li>
110+
<li>To impress firends</li>
111+
<li>To have fun</li>
112+
</ul>
113+
<p>Hopefully you learned something new here. See you next time!</p>
114+
</article>
115+
116+
<aside>
117+
<h4>Related posts</h4>
118+
<ul>
119+
<li>
120+
<img
121+
src="img/related-1.jpg"
122+
alt="img/related-1.jpg"
123+
height="50"
124+
width="50"
125+
/>
126+
<a href="">How to Learn Web Developement</a>
127+
<p>By Jonas Schmedtmann</p>
128+
</li>
129+
<li>
130+
<img
131+
src="img/related-2.jpg"
132+
alt="img/related-2.jpg"
133+
height="50"
134+
width="50"
135+
/>
136+
<a href="">The Unknown Powers of CSS</a>
137+
<p>By Jim Dillon</p>
138+
</li>
139+
<li>
140+
<img
141+
src="img/related-3.jpg"
142+
alt="img/related-3.jpg"
143+
height="50"
144+
width="50"
145+
/>
146+
<a href="">Why JavaScript is Awesome</a>
147+
<p>by Matilda</p>
148+
</li>
149+
</ul>
150+
</aside>
151+
152+
<footer>Copyright &copy; 2027 by The Code Magazine</footer>
153+
</body>
154+
</html>

0 commit comments

Comments
 (0)