Html Tutorial

HTML Tutorial

Beginner’s Guide to Build a Web Page using HTML

One of the most used languages on the Web for creating web pages is HTML. It enables you to learn more about Web development and develop your talents.

Therefore, let’s explore its definition and its foundations along with its origin, overview, structure, how does it work, and fundamentals through this article.

Kick-start your web development career by learning our HTML Training in Chennai at Softlogic Systems.

We have friendly trainers with the updated course curriculum for beginners.

Origin of HTML

A strange and intriguing narrative may be found in the history of the Hyper Text markup language (HTML).

Tim Berners-Lee, the inventor of HTML, was developing his first simple browsing and authoring system for the Web when he quickly came up with a little hypertext language that would suit his needs.

However, the language’s simplicity was the issue. Anyone could generate or convert content for the Web using any editor or word processor since it was text-based.

New functionality was added to browsers by the creators, and more sophisticated HTML versions were made available.

Overview of HTML

A text document can be formatted and laid out using a markup language, which is a computer language.

The text becomes more interactive and dynamic thanks to markup language. It may change the format of text to create pictures, tables, links, and other things.

The markup language used to create web pages and online applications is called HTML, or Hyper Text Markup Language.

It is used to define the markup-based structure of Web pages.

Structure of HTML

Block-level and inline tags are the two basic categories of HTML tags.

Block-level items always begin a new line in the document and use the whole available space.

Headings and paragraphs are two examples of block tags.

Inline components don’t begin a new line on the page and just occupy the space they require.

Typically, they are used to format block-level components’ internal contents. Links and highlighted strings are a few instances of inline tags.

and are the three block level tags that you require for your HTML content.

 The top-level element that encloses each HTML page is the/tag.
 The title and charset of the page are two meta-data items that are contained in the/element.
 The whole text on the page is enclosed by the/element.

How does it works?

The.html or.htm extension is used to signify Hyper Text Markup Language files. Any web browser will let you view it.

The content is shown for viewers to view when the browser has read the Hyper Text Markup Language file.

The building blocks of web pages are a collection of tags or components that make up an page.

They provide a hierarchy that divides the material into headers, sections, and other content units.

Let’s look at an illustration to show how its elements are organized :

The Main Heading


<img src=”/” alt=”Image”>

Second Paragraph with hyperlink

Fundamentals of Hyper Test Markup Language

You must be familiar with some of the fundamental parts of Hyper Test Markup Language in order to create a webpage, including:


elements define HTML headers. The most significant heading is defined by
designates the least significant heading as follows:

First Heading

Second Heading

Third Heading

Fourth Heading

Fifth Heading
Sixth Heading



elements are used to define paragraphs. With this tag, you are free to include as many paragraphs as you like.

First Paragraph

Second Paragraph


Hyperlinks are links in HTML. A link can be clicked to go to another file or website. tags are used to define links:

Add Link


Images are necessary to enhance or clearly express complicated ideas on your website. <img alt=”pic1″> tags are used to define HTML images.
The characteristics width, height, alternate text (alt), and source file (src) are as follows:
<img src=”image.jpg” alt=”Softlogic” style=”width:120px;height:150px”>


Hyper Text Markup Language buttons may be created using the


There are three different ways to define lists of data in HTML. One or more list components are a requirement for all lists.

    • : Unordered list (

      • ) that uses simple bullets to group things.


        1. : The items in an ordered list are listed using several numbering systems.


: A definition list organizes your objects in the same manner that a dictionary does.


Unordered List


This list was made using the Hyper Text ML “
    ” tag

    • Python
    • Java
    • DevOps
    • Cloud Computing

Ordered List

It will be created as follows using “

      1. tags

        1. Python
        2. Java
        3. DevOps
        4. Cloud Computing

Definition List

A glossary, list of words, or other name/value list is best presented using a definition list. It is made by combining the and


This stands for Hyper Text Markup Language
This stands for Hyper Text Transfer Protocol



element specifies an Hyper Text Markup Language table. Thetags are used to define rows. Thetags are used to specify headers.
 Thetags are used to define table cells. Now that you are familiar with the basics, let’s look at the whole code for making a simple HYper Text Markup Language webpage.
Sample.html here

Output Welcome to Softlogic!
Learn about HTML here
Full Stack
Cloud Computing Conclusion Now that you are familiar with HTML. Check out Softlogic Systems at Web Development Certification Training in Chennai.

Learn how to build stunning websites with HTML5, CSS3, Twitter Bootstrap 3, jQuery, and Google APIs and deploy them to Amazon Simple Storage Service with the aid of web development certification training (S3).

Table Example

Leave a Comment