Loading...
Please wait.
Join LetsLearnLights for expert coding and programming guidance. Study popular languages like Java, Python and JavaScript. Improve your skills today

Master HTML: A Comprehensive Guide to Learning HTML from A-Z with Simple Language

Mnzr chauhanMnzr chauhan May 14, 2021
HTML all about - Learn HTML A to Z in Simple Words. What is HTML?

Description:

What is HTML? Click here to read about what is HTML? Today in this tutorial, we will learn about HTML, how to create it. What are its types? How to use it to create a website? HTML is actually a web file that stands for display of a web page. In this blog, we will look at almost all aspects of HTML. After completing this blog, you will be able to create HTML sites, scripts and documents. Everything will be taught step by step.

The Table of content is given below
  1.  Headlines 
  2.  Type of HTML 
  3.  Explain in Details 
  4.  Simple Web Code 
  5.  Final Lines 

Headlines.

Types of HTML:

HTML is the free language of the platform. It is not a programming language like C, C ++, Java and BASIC. It's basically a set of markup tags that tell the browser how to display web page content. HTML is not divided into categories. However, there are versions.
The versions are as follows:
HTML, HTML+, HTML 1.0, HTML 2.0, HTML 3.2, HTML 4.01 (It has access to cascading style sheets and multimedia) and now HTML 5.0 (It has access to local storage and offline databases).
There is only one way to create an HTML file that I have explained to you in this post.
While the version is defined by the coding done in HTML.
Top

Define HTML Version:

HTML Version is define with <!DOCTYPE x>. DOCTYPE is not a tag or element, it is a information. It just tell the browser about HTML version. x is a Hypothetical word. It is replaced by a reference of HTML.

HTML5 documents:

For HTML5 documents (which should include almost all new web documents), the DOCTYPE declaration should be: 
<!DOCTYPE html>
This needs to be the first thing in your document, before the <html> or <head> elements. Also, there is no closing tag.

Other DOCTYPES you might encounter

There is virtually no reason to compose new HTML documents in an older standard. However, you may see any of the following document types on legacy systems:

HTML 4.01 Strict 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
When you create a new document with the .html extension, you have created a webpage or website.
We will now Declared the version by adding some code before anything else. Version codes are already described above. So, the first thing after creating HTML document, opened it any Code or text editor (You can use even simple system text editor). then add version code as <!DOCTYPE html> after that we will add a head tag with its closing tag as <head></head>. Head  tag is invisible tag which is used for Indexing file for current document and keep all information of the webpage. webpage style, information (title, searching tags and description), searches data, favicon and any other external links are placed inside the head tag. after that, we used body tag. Body tag is default, but we code it for our convenience. We can use background picture, color & styles using body tag
Top

Explain in Details.

Finally, I would not suggest you to use an older version. Use v5.0 which is the latest version and I hope this will be the best choice. And also that v5.0 is very simple. This task of web developing or coding is very simple, you just have to learn it once and for all. I will create a simple and basic web page.
First of all, remember that each site has four major sections.

  1. Header
  2. Content
  3. Sidebar
  4. Footer
To create a site, we must use these four sections.
I have already told you how to create an HTML file, but if you do not know how to create an HTML file, you can learn by clicking here.
After creating the HTML file, open it in any coding editor. I will suggest you "Notepad ++" if you are doing this for the first time, but if you want to work faster you can use "Brackets Coding Editor". But it is a bit heavier software than "Notepad ++".
Then you can start coding in it. Coding is not difficult at all, if you follow me you can learn it very easily.

This is a simple web code (HTML):

(Every tag that starts is also closed. Each tag is written off in < >. And to close it, / is used at the start inside < > ie: <example> </example>)

Top 
<!DOCTYPE html>
<html>

<head>
    <title>My Website</title>
</head>

<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div id="content">
        <p>Welcome to my website!</p>
        <p>Here you can find information about me and my work.</p>
    </div>
    <aside>
        <h3>Additional Information</h3>
        <p>Here is some additional information about me and my work.</p>
    </aside>
    <footer>
        <p>Copyright ©2022 My Website</p>
    </footer>
</body>

</html>

My Website

Welcome to my website!

Here you can find information about me and my work.

Copyright ©2022 My Website

Top
Header: This section usually contains the site's logo, main navigation menu, and search bar.
Content: This is the main area of the website where the majority of the information is displayed.
Footer: This section typically contains links to additional information such as legal disclaimers, contact information, and privacy policies.
Sidebar: It is the section which contains the links, additional information, call to action etc.

The webpage you see in the preview above is a very simple example. Because HTML only displays content, it cannot be styled. CSS is used to style it. In addition, the webpage has some other essentials such as website title, favicon and sidebar.
These things can also be done in HTML. As shown below.
Top

We can create a aside tag inside body after the header or content element to add sidebar. We can enter this <link rel="shortcut icon" type="image/jpg" href="Favicon_Image_Location/image.x"/> code inside the head section to apply the favicon.
"Favicon_Image_Location" is replaced by an image link, whether the image is on an online server or on a local host.
"image" is replaced by image name & 
"x" is replaced by image extension.

Advertise...

For Example:

<link rel="shortcut icon" type="image/jpg"  href="https://letslearnlights.blogspot.com/favicon.ico">

On the other hand, the title is also entered in the head section and the <title>Your site Tittle</title> code is used for it.

Top
The full site blog will be written in the coming posts. If you follow all my blogs related to HTML, you will be able to do all things that are done with HTML.

Final Lines.

As a result, the structure of a complete website is as follows.
Top 

<!DOCTYPE html>
<html>
<head>
    <title>Your site Tittle</title>
    <link rel="shortcut icon" type="image/png" href="https://i.ibb.co/NpX46f7/61-Ck-JY2cp-KL.png"/>
</head>
    <body>
    <header>
        This is a header section
    </header>
        <p>This is a body section</p>
    <footer>
        This is a footer section
    </footer>
    </body>
</html>

Top

Above I have given the link of an online png file for Favicon so for that I have also written png in image type. And the same title is appearing.
This is what HTML is all about. How to make it? How does this make a webpage or website? The above are just examples. We haven't created a complete website yet. For a complete site, it is important to use styles (CSS) with HTML. In the coming post we will learn how to link a stylesheet ie CSS with HTML and design the site and also see with an example how javaScript is used in websites and how it works.


Posted by Mnzr chauhan
««« Thanks again for reading our blog. If you have any questions, feel free to ask. Your support is enough for us to share this post with your friends. And a good comment for our hard work. »»»
Thank you ツ
Mnzr chauhan

Posted by Mnzr chauhan

Post a Comment

3 Comments

Unknown said…
I always confused about HTML but now I'm much recognized.
October 19, 2021 at 10:15 PM
Post a Comment