Skip to content

Commit 6f71eff

Browse files
rahilsamarahilsama
committed
hyperlinks and page structuring
1 parent 786ea6b commit 6f71eff

File tree

2 files changed

+106
-65
lines changed

2 files changed

+106
-65
lines changed

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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+
<h1>Blog</h1>
11+
12+
<a href="./index.html">Home</a>
13+
</body>
14+
</html>

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

Lines changed: 92 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -8,79 +8,106 @@
88
<!-- <strong> for bold -->
99
<!-- <emphasize> for italic-->
1010
<body>
11-
<h1>📘 The Code Magazine</h1>
12-
<img
13-
src="/starter/02-HTML-Fundamentals/laura-jones.jpg"
14-
alt="Picture of the author: laura Jones"
15-
width="50"
16-
height="50"
17-
/>
18-
<p>Posted by <strong>Jones</strong> on Monday, June 21st 2027</p>
19-
<!-- Here are the different text sizes in the basic html -->
20-
<!-- <h1>The Basic Language of the Web: HTML</h1> -->
11+
<header>
12+
<h1>📘 The Code Magazine</h1>
2113

22-
<!-- Images added to the html doc -->
23-
<img
24-
src="/starter/02-HTML-Fundamentals/post-img.jpg"
25-
alt="HTML code on the screen"
26-
width="500"
27-
height="200"
28-
/>
14+
<nav>
15+
<a href="./blog.html">Blog</a>
16+
<a href="#">Challenges</a>
17+
<a href="#">Flexbox</a>
18+
<a href="#">CSS grid</a>
19+
</nav>
20+
</header>
2921

30-
<h2>The Basic Language of the Web: HTML</h2>
31-
<!-- <h3>The Basic Language of the Web: HTML</h3> -->
32-
<!-- <h4>The Basic Language of the Web: HTML</h4> -->
33-
<!-- <h5>The Basic Language of the Web: HTML</h5> -->
34-
<!-- <h6>The Basic Language of the Web: HTML</h6> -->
22+
<article>
23+
<header>
24+
<h2>The Basic Language of the Web: HTML</h2>
3525

36-
<p>
37-
All modern websites and web applications are built using three fundamental
38-
technologies: HTML, CSS and JavaScript. These are the languages of the
39-
web.
40-
</p>
41-
<p>
42-
In this post, let's focus on HTML. We will learn what HTML is all about,
43-
and why you too should learn it.
44-
</p>
45-
<h3>What is HTML?</h3>
46-
<p>
47-
HTML stands for <strong>H</strong>yper <strong>T</strong>ext
48-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup language
49-
that web developers use to structure and describe the content of a webpage
50-
(not a programming language).
51-
</p>
26+
<img
27+
src="/starter/02-HTML-Fundamentals/laura-jones.jpg"
28+
alt="Picture of the author: laura Jones"
29+
width="50"
30+
height="50"
31+
/>
32+
<p>Posted by <strong>Jones</strong> on Monday, June 21st 2027</p>
33+
<!-- Here are the different text sizes in the basic html -->
34+
<!-- <h1>The Basic Language of the Web: HTML</h1> -->
5235

53-
<p>
54-
HTML consists of elements that describe different types of content:
55-
paragraphs, links, headings, images, video, etc. Web browsers understand
56-
HTML and render HTML code as websites.
57-
</p>
36+
<!-- Images added to the html doc -->
37+
<img
38+
src="/starter/02-HTML-Fundamentals/post-img.jpg"
39+
alt="HTML code on the screen"
40+
width="500"
41+
height="200"
42+
/>
43+
</header>
44+
<!-- <h3>The Basic Language of the Web: HTML</h3> -->
45+
<!-- <h4>The Basic Language of the Web: HTML</h4> -->
46+
<!-- <h5>The Basic Language of the Web: HTML</h5> -->
47+
<!-- <h6>The Basic Language of the Web: HTML</h6> -->
5848

59-
<p>In HTML, each element is made up of 3 parts:</p>
49+
<p>
50+
All modern websites and web applications are built using three
51+
fundamental technologies: HTML, CSS and JavaScript. These are the
52+
languages of the web.
53+
</p>
54+
<p>
55+
In this post, let's focus on HTML. We will learn what HTML is all about,
56+
and why you too should learn it.
57+
</p>
58+
<h3>What is HTML?</h3>
59+
<p>
60+
HTML stands for <strong>H</strong>yper <strong>T</strong>ext
61+
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
62+
language that web developers use to structure and describe the content
63+
of a webpage (not a programming language).
64+
</p>
6065

61-
<ol>
62-
<li>The opening tag</li>
63-
<li>The closing tag</li>
64-
<li>The actual element</li>
65-
</ol>
66+
<p>
67+
HTML consists of elements that describe different types of content:
68+
paragraphs, links, headings, images, video, etc. Web browsers understand
69+
HTML and render HTML code as websites.
70+
</p>
6671

67-
<h3>Why should you learn HTML?</h3>
68-
<p>
69-
There are countless reasons for learning the fundamental language of the
70-
web. Here are 5 of them:
71-
</p>
72+
<p>In HTML, each element is made up of 3 parts:</p>
7273

73-
<ul>
74-
<li>To be able to use the fundamental web dev language</li>
75-
<li>
76-
To hand-craft beautiful websites instead of relying on tools like
77-
Worpress or Wix
78-
</li>
79-
<li>To build web applications</li>
80-
<li>To impress friends</li>
81-
<li>To have fun 😃</li>
82-
</ul>
74+
<ol>
75+
<li>The opening tag</li>
76+
<li>The closing tag</li>
77+
<li>The actual element</li>
78+
</ol>
8379

84-
<p>Hopefully you learned something new here. See you next time!</p>
80+
<p>
81+
You can learn more at the
82+
<a
83+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
84+
target="_blank"
85+
>MDN Web Docs</a
86+
>.
87+
</p>
88+
89+
<h3>Why should you learn HTML?</h3>
90+
<p>
91+
There are countless reasons for learning the fundamental language of the
92+
web. Here are 5 of them:
93+
</p>
94+
95+
<ul>
96+
<li>To be able to use the fundamental web dev language</li>
97+
<li>
98+
To hand-craft beautiful websites instead of relying on tools like
99+
Worpress or Wix
100+
</li>
101+
<li>To build web applications</li>
102+
<li>To impress friends</li>
103+
<li>To have fun 😃</li>
104+
</ul>
105+
106+
<p>Hopefully you learned something new here. See you next time!</p>
107+
</article>
108+
109+
<footer>Copyright &copy; 2027 by the Code Magazine</footer>
85110
</body>
86111
</html>
112+
113+
<!-- semantics -->

0 commit comments

Comments
 (0)