HTML is used to create structure of web page ,it is very easy to learn

and understand

<!doctype html> --->doctype refers to version 5 in HTML ,there are some of versions before but most of the developers use version 5

<head> --->head works like a human brain where body content can be handled by head tag ,it can set styles to body tag ,title ,script

<title> --->it shows the title of a new web page

<body> ---->when we write anything in body tag it will be displayed in background it will show the content center of web page

<html></html> ---->It refers any content that should be written in between these opening and closing tags

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First WWW project</title>
</head>
<body>
    <h1>My Introduction</h1>
    <h2>Mohammad Sameer Adnan</h2>
    <img src="  D:\pictures\sameer.jpg" width="200" height="300">
    <p>Contact me <a href="https://www.instagram.com/" target="_blank">here</a></p><hr>

    <h3>Description:</h3>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, expedita. Molestias dolorum autem dolor dicta, placeat quibusdam obcaecati, neque error mollitia quidem vitae fugiat! Enim laboriosam vitae provident dicta! Temporibus mollitia tenetur soluta illo excepturi doloribus dolorem voluptatibus quidem ipsum, dolor est labore, facere, recusandae quis culpa placeat. Ipsa iusto iste hic cupiditate laudantium, voluptatibus autem facilis. Eius impedit deleniti fugiat ipsum quisquam quibusdam nemo sit placeat non sapiente officiis optio qui, illum voluptatum, blanditiis rem tempore ad praesentium quasi est ea laborum perspiciatis mollitia necessitatibus? Fugit ea omnis eum consectetur nam porro ipsum eaque enim velit. Reprehenderit, consectetur iusto provident dolor sunt exercitationem? Reiciendis expedita sint autem quaerat deserunt iure magnam nemo, dignissimos hic! Voluptatum, laborum! Tempora voluptatibus accusamus ea adipisci? Quam quidem repellat repellendus, numquam quibusdam doloremque dolores sit cupiditate reprehenderit maiores debitis incidunt dignissimos vero expedita placeat accusantium minus enim eveniet doloribus ipsa, perspiciatis et! Quo, ad pariatur consequatur, inventore ratione voluptatum praesentium a hic harum qui dignissimos magnam reprehenderit dolorem consequuntur? Amet repudiandae natus optio mollitia praesentium minima et adipisci enim unde porro nihil ab eius iusto corrupti, nostrum non dolore voluptatum reiciendis accusantium laudantium doloribus suscipit quasi temporibus numquam? Harum perferendis numquam ad itaque alias?
</body>
</html>

Body Tags:

<h1> to h6> ----->These are heading tags ,where size of the content will be initiated based upon h1,h2.....h6

---->content will be shown in paragraph type

<pre> ---->It is quite similar to paragraph tag ,but in this content will be displayed in pre-formatted text ,as we write same in pre tag

, --->Both makes text bold

--->makes the text underline

--->i makes text in italic

--->subscript makes half character of normal line text

--->superscript acts opposite to subscript ,it shows above the normal line text

<a href="" target="_blank ">name</a> --->It is anchor tag <a> ,

href is hyper reference of particular link of website ,it will be shown inside inverted commas
In between opening and closing tag we give name to locate the address of a anchor tag
Target is used for open the website in another page

Self Closing Tags:

This means it has no closing tag

-->br is used break the content ,paragraph

<hr> ---->hr is to make the line after the content

image is also a self closing tag ,it inserts image without closing tag
src is a source ,path of image will be written in between inverted commas
To Adjust the image width and height ,we can set in it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic tags</title>
</head>
<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum maxime repellendus amet voluptas omnis ratione saepe cumque dicta possimus, nisi, ducimus sint autem sit porro expedita neque rem praesentium consectetur optio est a temporibus nihil? Ducimus minus est modi amet rerum delectus beatae quo explicabo omnis eaque nulla cupiditate sapiente repellendus, vel ullam accusantium corporis architecto quasi atque adipisci natus earum assumenda! Architecto, modi! Corporis dolorum molestiae dolorem architecto vero rerum, placeat inventore repellat doloribus, eveniet illum. Porro illum quaerat consequuntur, ratione vero quos debitis iste cupiditate in vitae ipsa ipsam esse eum cumque sit. Maxime ut, pariatur iusto asperiores magni aut cumque dicta, ipsam quaerat, repudiandae corrupti? Autem ratione voluptatum aspernatur culpa hic qui facere. Excepturi commodi assumenda quam earum aliquid eos soluta reiciendis quis officiis, rerum deleniti pariatur</p>
 <pre>My soul
        has travelled
        long and far
        to find
        yours
    </pre><hr>
    <p>Lorem ipsum dolor <b>sit</b> amet consectetur <i>adipisicing</i> elit. Deserunt quasi culpa <u>voluptatem</u> quisquam, modi veniam nam molestias officiis omnis officia.</p>
    <h1>chemcial formulas</h1>
    H<sub>2</sub>O
    H<sub>2</sub>SO<sub>4</sub>
    Bacl<sub>2</sub><br>
    H<sup>+</sup>
    Ag<sup>+</sup>

</body>
</html>

A Skill Can be taught ,But will Can't be

Basic HTML tags

Body Tags:

Self Closing Tags:

Subscribe to my newsletter

Adnan Adnan

Adnan Adnan