For any confusion, contact the author at the email address

[email protected]

Author: Mocan Cristian Natanael

Copyright 2024, all rights reserved

Dej,2024

1
 HTML

FROM 0
TO HERO

Author:Mocan Cristian Natanael

Dej,2024

2
Welcome!

This book is dedicated to all those who want to take the first steps in
web programming and step into a new world unknown to them until
this moment. I will not hide the fact that you should not have fast
expectations, believing that a programmer can qualify overnight. To
reach the desired level, it takes a lot of work, perseverance, ambi-
tion and most importantly, passion. In this book are all the lessons
that include Hyper Text Markup Language (HTML), there are ex-
ercises after each lesson, and of course a theme. To understand
the depth, you have to solve absolutely everything, developing
your horizon in terms of web programming. I will try to present each
chapter in a way that is as understandable as possible.

I am Mocan Cristian, Front-End Developer and I hope that my ex-

perience will help you through what I wrote in this volume. I always
appreciate the feedback I receive, that’s why I encourage you to
write to me at the email address: [email protected] or contact
me at mobile number +40766060362.

Success!

3
Cuprins
Introduction...............................................................6
What we use to create web pages?.........................8
How do I create my first project?..............................9
Chapter 1. Page structure........................................12
1.1 Simple structure..................................................12
1.2 Advanced structure(body content)......................14
1.3 Head content.......................................................16
1.4 Verification test....................................................16

Chapter 2. Basic Tags...............................................18

2.1 What are the start tags?......................................18
2.2 What means <br>&<hr>?................
2.3 How do I add images to my site?..........
2.4 How do I create a table?.......................
2.5 How can I navigate between the pages
of the site? (Hyperlinks).....................................
2.6 How can I group items?.........................
2.7 Exercises..............................................
2.8 Verification test.....................................
2.9 Homework+Bonus............................................

Chapter 3. Internal Links..............................

3.1 Favicon.................................................
3.2 <style>............................
3.3 <script>....................
3.4 Exercises..............................................
3.5 Verification test.....................................
3.6 Homework............................................

4
Chapter 4. Advanced Tags................................
4.1 Lists.............................................................
4.2 How can I add an mp4, mp3 file to my web-
site?........................................................................
4.3 What does tag marquee & textarea?..........
4.4 <form>, <input>, <button>.................................
4.5 Emoji.................................................................

Chapter 5. Projects...............................................
5.1 Formular......................................................
5.2 A web page.................................................

5
How did the internet appear?
The web was invented in 1989 at the European Center for Nu-
clear Research (CERN) in Geneva, Switzerland. The original
proposal to create a collection of linked documents was made
by Tim Berners-Lee in March 1989. The proposal arose out of
communication
problems experienced by research teams using the
center, even using electronic mail. The term World Wide Web,
abbreviated WWW or www, also called web for short, is the
totality of sites / documents and hypertext-type information
linked to each other, which can be accessed through the
worldwide Internet
network. Documents, which reside in different
locations on different server computers, can be found
using a unique identifier called a URL. Hypertext
including images etc. it is displayed using a web browsing
program called a browser, which downloads web pages from a
web server and displays them on a
“client” terminal to the user.The WWW is only one of the many
computer services and applications
available on the Internet. Other services such as:
display of information in the form of text, images and sounds,
e-mail, transfer of data files and FTP information, chat, video
applications, Internet telephony and video telephony services
of the VoIP type, Internet radio and television, e-commerce,
opinion polls, news dissemination via RSS methods, all kinds
of graphics and music, remote computer work over the Inter-
net, discussion groups on various topics, interactive game
systems, distribution software etc.

6
The operation of the web is based on 3 standards, namely:
1) (HTTP) - Hypertext Transfer Protocol, the OSI
protocol stack through which the web server and the client
(user) browser communicate with each other;
2) (HTML)- Hypertext Markup Language, standard for defining
and presenting web pages;
3) (URI) - Uniform Resource Identifier, universal
system for identifying web resources, used to identify and find
web pages.

7
What we use to create web pages?
Well, maybe when you thought of a start in web
programming, you probably wanted to write the code in a text editor
like notepad, well no! What I recomend and we will use in this book
is actually Visual Code. You can also try in notepad but it is much
more
difficult because it does not show you the mistakes in real time and
for a beginner this can be a nightmare.

Here is a link where you can install visual code:

https://code.visualstudio.com/

8
How do I create my first project?
Step 1:Go to Files/Documents
Step 2:Create a new folder named “HtmlProject”
Step 3:Create a file named “index.html”(windows 10), “index-
”(windows 11)-> In Windows 11, the default (txt) extension can
only be changed if you use a certain program, I will immediate-
ly show you how to change the extension
Step 4:Open Visual Code
Step 5:Click on “Open folder”

9
Step 6:Go to Documents
Step 7:Click on “HtmlProject” and click on “select”
Step 8:Right click on “index.txt”
Step 9:Click on Rename and replace “txt” with “html”

It doesn’t matter if you use windows 10 or windows 11,

you must reach this result. As we can see, the file icon has
changed from txt to html.

10
To see the progress of the pages in real time, click on exten-
sions and search for “live server” and install it.

11
1.Page Structure
To begin with, I would like to start with the simplified structure
of the web page because, being a beginner, you need a clear
understanding of the basics. My
recommendation is to understand how everything works to be
able to move on, don’t try to skip this
lesson if it’s your first time facing such a challenge.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>First Project</title>
</head>
<body>
<!--content-->
</body>
</html>

<!DOCTYPE html> -specify version 5 of html

<html> -marks the start of a html document, which
can be divided into the head and the body.
<head> -defines the head section, which contains
general information about the document and relates
to external files. It can contain the following tags in
this subsection
<title> -page title (top left)

12
<body> -most importantly, the one that defines the content of a
web page
<!-- --> -it is a comment, it only removes certain
syntaxes from the code, not being applied in the code but re-
maining there as a reference.
<...lang=”en”> -specify the language in which it is made(En-
glish -> https://www.w3bai.com/ro/tags/ref_language_codes.
html#gsc.tab=0)
Next, we will analyze the entire structure of the web page, so
let’s get started!

13
The advanced structure has a much more developed body, the
context of the page being very well divided

<!DOCTYPE html>
<html lang=”en” >
<head>
<title>First Project</title>
</head>
<body>
<header>
<nav>
<!--content-->
</nav>
</header>
<main>
<aside>
<!--content-->
</aside>
<section>
<arcticle>
<!--content-->
</arcticle>
</section>
</main>
<footer>
<!--content-->
</footer>
</body>
</html>

14
 HEADER

NAV
MAIN

SECTION ASIDE

ARCTICLE

FOOTER

<header> -the first part of the page content

<nav> -page navigation bar (menu)
<main> -a kind of body to body(between header and footer),
defines the main content
<aside> -on the right side of the page (it doesn’t really have
content)
<section> -the head of the article
<article> -refers to clothing items, sneakers, video games, etc.
(pictures + price + product title)
<footer> -here is the summary of the site, possibly certain
links, about the site, the contact section, copyright, etc.

15
We continue with the content of the head. What
content is in it, what tags are included, what do they do? Well,
there aren’t as many as you think there are.

<title> -page title (top left)

<base> -specifies the base URL for all relative URLs

1)href=URL
2)target=_blank:new window

If you don’t want a new tab, simply don’t specify the target.

<meta...>-informations about the site

1)<meta charset=”UTF-8”/>
2)<meta name=”author” content=”Chris”/>
3) <meta name=”viewport” content=”width=device-width, ini-
tial-scale=1.0”>
4) <meta name=”description” content=”Free Web
tutorials”>
5)<meta name=”keywords” content=”HTML, CSS, JavaS-
cript”>

All this information is not physically visible on the

website, but it can affect the content in one way or
another.

Great! Now that I’ve finished the first chapter, I want to test
your knowledge to see how well you know the structure of the
web page

16
Verification Test
1) What does HTML mean?

a) Hyper Text Markup language

b) Home Tool Markup Language
c) Hyperlinks and Text Markup Language

2) <!DOCTYPE> means:

a) HTML version
b) Defines main content
c) after “head”

3) From the perspective of the cardinal points “aside” is posi-

tioned at:

a) Nourth
b) West
c) East

4) <nav> tag is in:

a) <aside>
b) <header>
c) <footer>

17
Great! I hope you did very well! Being the first basic lesson,
you should have done all the correct questions, but if not, I
recommend you go back and study the lesson once more. The
answers to the questions are the following:

1->a; 2->a; 3->c; 4->b;

18
2.1 Start Tags
1) Paragraph <p>
<p> ->contains a paragraph, it is usually used as a product
description. In most cases it is positioned in <main>, but it can
also be in <footer> with additional information about your site
such as “Copyright 2024”.It is a simple text.

...<main>
<aside>
<p>This is a paragraph</p>
</aside>
<section>
<arcticle>
<!--content-->
</arcticle>
</section>
</main>...

19
To see the paragraph on the website, we will use the
extension we told you about earlier, namely “Live server”. To
see the progress, just go to the top left of the VC (Visual Code)
program, press “View”->”Command Palette” and look for “Live
server” then search the option “Live server: Open with Live
server”, that’s all!
To save each code change, press the “Ctrl+S”.

20
2) Heading (<h1>-<h6>)

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

...<main>
<aside>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</aside>
<section>
<arcticle>
<!--content-->
</arcticle>
</section>
</main>...

As we can see the titles are getting smaller and smaller, basi-
cally I took from the largest (<h1>) to the smallest (<h6>).

21
These tags are block elements. Block elements means when
tag 2 automatically moves to the next row without causing it
with a breakline <br> (we’ll talk about that in a moment).

22
3) <strong>, <b> & <small>

<strong>- This tag has a “bold” effect on the text making it

thicker
<b>- It is exactly like the <strong> tag
<small>- This tag makes the text a small size
These tags are inline elements. Block elements means when
tag 2 does not automatically move to the next row. If we want
to move the second tag to the next row, we will have to use a
breakline <br>.

...<aside>
<strong>This is heading 1</strong>
<b>This is heading 2</b>
<small>This is heading 3</small>
</aside>...

23
4) <em> & <i>

<em>- This tag is emphasized text

<i>- This tag is italic text

...<aside>
<em>This is heading 1</em>
<i>This is heading 2</i>
</aside>...

24
5) <br> & <hr>

Ok, I’m glad that we can finally solve that dilemma with inline
elements and block elements!

<br>- Usually used on inline elements to give them a breakline

<hr>- A horizontal line under an element

...<aside>
<em>This is heading 1</em> <br>
<i>This is heading 2</i>
</aside>...

25
As you can see compared to last time, the <em> and <i> tags
are no longer on the same row, but now they are on different
rows thanks to the <br> tag. As I said before, the <hr> tag
deals with underlining/highlighting an element.
At the moment, with the knowledge we have, we do not know
how to specify the size and position of the horizontal line, but
we will learn this in the styling library, namely Cascading Style
Sheet (CSS).

...<aside>
<em>This is heading 1</em> <hr>
<i>This is heading 2</i> <hr>
</aside>...

26
2.3 How do I add images to my site?

Well, to add images to our site we need the <img> tag. Ok,
and how does it work? First of all, I want you to go to the folder
you created at the beginning (HtmlProject) and create anoth-
er folder inside it called “images” because there we will save
all the images.Now you just have to glorify an image of your
choice in that folder.

27
 ...<aside>
<img src=”images/Earth.jpg” alt=”Earth”>
</aside>...

a)src=” ”- It is the path of your image

b)alt=” ”- It is an alternative text in case the image does not ap-
pear or we write the wrong location (this can generally happen
in a text editor like Notepad).

28
In this case the image does not appear, only the text. How-
ever, the image can be taken directly from the Internet, this
would mean that there would be no need to download it and
put it in a folder. In this case the image does not appear, only
the text. However, the image can be taken directly from the In-
ternet, this would mean that there would be no need to down-
load it and put it in a folder. I do not recommend this option
because it is not efficient at all. Just imagine that the author
who posted the picture on the Internet deletes it and you are
just thinking about what you used for a website and one day
you notice on your website that instead of the image there is
only that alternative text. Of course, the first option remains the
most efficient, but ultimately it is up to the developer.

29
2.4 How do I create a table?

Well, to create a painting you need some significant basic

elements. Don’t think about something complicated or
supernatural, you just have to think about it logically.First of
all, we need a tag called <table>. It signifies the structure of
the table. For the main row we have <tr> for rows and <th> for
columns. For the other rows we have <tr> for rows and <td>
for columns.

...<table>
<tr><th>Coloana 1</th><th>Coloana 2</th></tr>
<tr><td>Celula 1.1</td><td>Celula 1.2</td></tr>
<tr><td>Celula 2.1</td><td>Celula 2.2</td></tr>
</table>...

30
<table>- The table
<tr>- Table lines
<th>- Table columns(the main line)
<td>- Table columns(all other lines), cells

I know it doesn’t look like a table because there is no border,

spacing between lines and columns, etc., but don’t worry,
that’s what you’ll learn in CSS.However, I will show you a fairly
basic example so you can see how it looks.

...<table border=”1px solid black”>

<tr><th>Coloana 1</th><th>Coloana 2</th></tr>
<tr><td>Celula 1.1</td><td>Celula 1.2</td></tr>
<tr><td>Celula 2.1</td><td>Celula 2.2</td></tr>
</table>...

31
2.5 How can I navigate between the pages
of the site? (Hyperlinks)

Good! This will be a very interesting lesson. Have you ever

wondered when you browse a site like wikipedia? Well, ev-
erything you see there is called “Hyperlinks”, so what are
so-called Hyperlinks in HTML? These are in the form of tags
marked with <a>-</a> and are mainly of 2 types:

1) Hyperlinks that connect pages on the same tab

2) Hyperlinks that connect pages on different tabs

To begin with, we will start with those that make the connec-
tion on the same tab. First of all, we will have to create another
web page, preferably we can just copy the index page and
note the new page with index 2.

<a href=”index2.html”>Link</a>

32
href=” ”- The path of that page

33
We notice that if we click on “Link” it takes us to the “index2”
page, staying on the same tab. Now we will move on to the
other category of Hyperlinks, namely those with different tabs.

<a href=”index2.html” target=”_blank”>Link</a>

target=”_blank”- Link to a new tab

34
2.6 How can I group items?
Well, there is not much to say here, everything is focused on
<div> and <span>. The major difference between the two is
that <div> is a block grouping element and <span> is an inline
grouping element.

...<div>First</div>
<div>Second</div>
<span>Third</span>
<span>Fourth</span>...

35
However, let me show you how <div> and <span> can still be
used.

...<div style=”background-color: aqua;”>First</div>

<div style=”background-color: aqua;”>Second</div>
<span style=”background-color: aqua;”>Third</span>
<span style=”background-color: aqua;”>Fourth<span>...

36
2.7 Exercises

1) Use the <html>, <head>, <title> and <body> tags to create

a simple HTML page. Add a title in <title> and a few para-
graphs in <body>.(Simple Structure)

2) Create a simple navigation menu using <a> tags for hyper-

links to other pages.(Simple Structure)

3) Use the <html>, <head>, <title> and <body> tags to create

a simple HTML page. Add a title in <title> 4 paragraphs in
<body>.(Advanced Structure)

4) Use the <img> tag to insert an image on the page. Make

sure you specify the path to the desired image correctly.

37
1) <!DOCTYPE html>
<html>
<head>
<title>First Website</title>
</head>
<body>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</body>
</html>

2) <!DOCTYPE html>
<html>
<head>
<title>First Website</title>
</head>
<body>
<a href=”project.html”>Project</a>
</body>
</html>

38
3) <!DOCTYPE html>
<html lang=”en” >
<head>
<title>First Project</title>
</head>
<body>
<header>
<nav>
<!--content-->
</nav>
</header>
<main>
<aside>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Fourth paragraph</p>
</aside>
<section>
<arcticle>
<!--content-->
</arcticle>
</section>
</main>
<footer>
<!--content-->
</footer>
</body>
</html>

39
4) <!DOCTYPE html>
<html>
<head>
<title>First Website</title>
</head>
<body>
<img src=”images/example” alt=”Example”>
</body>
</html>

40
2.8 Verification Test

1) To add an image we use:

a)<h1>
b)<h4>
c)<img>
d)<title>

2) The tag for the columns of a table is:

a)<table>
b)<th>
c)<tr>
d)<td>

3) The tag for the lines of a table is:

a)<table>
b)<th>
c)<tr>
d)<td>

4) The tag that makes the text smaller is:

a)<strong>
b)<smaller>
c)<em>
d)<img>

41
5) The tag that makes the text bold is:

a)<smaller>
b)<a>
c)<i>
d)<b>

6) The tag that styles the text italic is:

a)<i>
b)<table>
c)<strong>
d)<img>

7) What is the role of the <br> tag?

a) Create a table
b) Inserts a new line between elements
c) Inserts an image
d) Connects two pages

8) What is the role of the <hr> tag?

a) Inserts a new line between elements

b) It is the largest text size in the Heading series
c) Inserts a horizontal line
d) You can also write <br>

42
Ok, I hope you did well in this test because this is the first real
step towards becoming a frontend developer. Normally you
should have solved at least 7 out of 8 considering the difficulty
of the verification test. However, if you have made less than
6-7 correct answers, I recommend you to go back and repeat
what I did once more because you cannot afford to make mis-
takes in the basic things. The answers are the following:

1->c); 2->d); 3->c); 4->b); 5->d); 6->a); 7->b); 8->c)

43
2.9 Homework

1) Create a hyperlink to the main page of a website.

2) Use div elements to group content(3 paragraphs).

3) Inserts a breakline between the texts in the same tag.

4) Inserts a horizontal line between the texts in the same tag.

5) Use text formatting tags: <strong>, <b>, <i>, <em>,

<small> (Example: <p>This is a <strong>critical sentence</
strong>.</p>).

6) Create a table using <table>, <tr>, <th>, and <td> tags.

44
BONUS!

In this bonus section you will learn some optional tags that
are not commonly used in the website industry.So for the first
section we will learn the following tags:

1) <sub>
2) <blockquote>
3) <pre>

The biggest advantage of the <sub> tag is that you can write
chemical formulas, let me show you.

<p>H₂O is water</p>

45
Next, we have the <blockquote> tag, which practically delimits
the text.

<p>Astăzi, în urma unei conferințe de presă, CEO-ul

companiei a declarat:</p>
<blockquote>
<p>”Suntem hotărâți să inovăm și să creăm produse
care să facă viața mai ușoară pentru toată lumea.”</p>
<p>- John Doe, CEO</p>
</blockquote>
<p>Aceasta a fost declarația pe care CEO-ul a făcut-o cu
privire la viitorul companiei.</p>

46
And finally the last tag, <pre>. This preformats the text, that is,
if you wrote it chaotically, it will be displayed on the web page
as well.

<pre>
Acest text
este preformatat
și menține
spațierea.
</pre>

47