HTML Tutorial

by Trainer Riad Thalji

Web Page Structure

Web browsers can understand a simple text document written using a tool like notepad.

To see this, please open your notepad or similar simple text editor, and write a sentence like: Hi, I’m learning HTML.  Your screen may look something like the following:


Save the file naming it something like, myTextDoc1.txt

Now open that document with your browser and see the result which simply shows that message.

Now let’s do the following steps for converting this file to HTML:



Now let’s enhance our file by adding some HTML Tags with these simple steps:




What we done is adding some html tags to tell the browser how to display that text.  Namely we added the <h1> tab to tell the browser that the sentence “Hi, I’m learning HTML” is a page header, and we didn’t forget to close that tag by using the backslash like: </h1>, so that the browser knows where to stop considering that header.  We also used the tag <p> to tell the browser that the enclosed text is a paragraph.
The browser understood the tags and responded with the corresponding web page.

Now let’s look at a basic structure for a web page:

<!doctype html>
<html>
<head>
   Where header tags like the page title goes here.
</head>
<body>
   This is the body of the web page where all the contents are described.
</body>
</html>

Now let’s apply this on our simple web page.  Open that page in your text editor and modify it to look like:
<!doctype html>
<html>
<head>
<title>My Learning Plan </title>
</head>
<body>
<h1>Hi, I'm learning HTML. </h1>
<p>I will use it for developing web pages. 
It is very easy and simple. </p>
<p>This is part of my learning plan. </p>
</body>
</html>

By this it became more standard and acceptable by all types of browsers and devices.

We will go through more advanced page structure in the next sections of this tutorial.

Join Our Coming PMP Prep Course

Delivered by Trainer

Riad Thalji



From the Video Library

How to Create Multi-Lingual Navbars in ASP.Net Core 2.1

How to Create Multi-Lingual Navbars in ASP.Net Core 2.1 | Advanced Programming Series | Riad Thalji

How to Create Multi-Lingual Navbars in ASP.Net Core 2.1

How to Quickly Import Data between Excel, Access and SQL Server

Project Management Office - PMO

Project Managemenet Office - PMO Crash Course

Project Management Office - PMO

How to Create Nested Layouts in ASP.Net Core 2.1 | Advanced Programming Series | Riad Thalji

Developed by Thalji.net, © Riad Thalji