Introduction To HTML

Introduction To HTML

What is HTML?

  • HTML stands for Hyper Text Markup Language

  • It defines the content and structure of a website

  • It is a markup language

HTML Tags

💡 What are HTML Tags?

HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

💡 What is HTML Element?

The HTML element is everything from the start tag to the end tag:

<tagname>Content goes here...</tagname>

1. The Heading Element

example:-
<h1>Hello World</h1>
----------------------------
Here 
<h1> is a opening tag where as </h1> is a closing tag

-> anything that's inside an angle bracket(< >) is a tag
-> <h1>Hello World</h1> this entire thing is called an element
  • The heading element ranges from <h1> to <h6>

  • <h1> is the highest section level whereas <h6> is the lowest section level

    1. Paragraph Element
example:-
<p>This is a paragraph.</p>
-------------------------------------
Here
<p> is a opening tag where as </p> is a closing tag
  1. Self Closing Tags

    →Horizontal Rule Element

     syntax:-
     <hr /> or <hr>
    

    →Break Element

     syntax:-
     <br /> or <br>
    
  2. The List Elements

    →Ordered and Unordered Lists

     Unordered List
     syntax: <ul>
               <li>Milk</li>
               <li>Flour</li>
             </ul>
     Ordered List
     syntax: <ol>
                <li>Milk</li>
                <li>Flour</li>
              </ol>
     nested unordered list
     syntax:<ul>
             <li>Rice</li>
             <li>Flour</li>
             <ul>
                 <li>Atta</li>
             </ul>
             <ol>
                 <li>aashirwaad</li>
             </ol>
             <li>Milk</li>
         </ul>
    
  3. The Anchor Element

    →It allows us to create Hyperlink(It is used to link from one page to another)

     syntax:-
     <a href="url/src">This is a link</a>
     or we can have global attributes like draggable and set it true which results in the hypertext being draggable.
    
  4. The Image Element

    →It allows us to add images to our website

     syntax:-
     <img src="url/size" alt="image of some sunset"/>
     url followed by the size of the image in pixels
    

File Path

-> We have two different types of File Path

Relative File Path

Absolute File Path

A relative path describes the location of a file relative to the current (working) directory

An absolute path describes the location from the root directory.

-→In Web Development Relative File Path is more useful :)

Let’s understand Relative File Path with an example

→Here since we want to link a file( i.e anchor.html) that is in the same folder

 a single dot followed by a slash helps us to locate the file

In another example

->Here The file which we want to link is located in another folder

a double dot followed by a slash helps us to locate the desired file(i.e. external.html)

HTML BoilerPlate

What is an HTML Boiler Plate?

A boilerplate in HTML is a template you will add at the start of your project. You should add this boilerplate to all of your HTML pages.

<!DOCTYPE html> //This tag tells the browser which version of the file was written in.
<html lang="en"> // this is the language of the text content in that element.
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> //this keeps our code compatible with Internet Explorer
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> //it tell you the viewport and it defines how the website should be displayed relative to the screen that it's being rendered on.
    <title>Document</title> //this get displayed in the tab bar 
</head>
<body>
    //this is where all of the content of the website goes.
//the text,the titles,the images,the links,everything that you can do with HTML
</body>
</html>

This is the Basic Introduction to HTML we have a few more topics to cover like buttons and etc which we will do as I keep learning :)

Thank you for reading and keep learning :)

Â