Introduction to HTML

 HTML stands for HyperText Markup language where hyper defines the link between multiple web pages and markup defines structure of the pages using tags. 

        - It is used to design the layout of a web page.

HTML contains multiple Tages and Attributes which are used to design a web page.

Let's look at the basic format of an html file

<html>
      <head>
            <!--here we define title, styles, meta data etc for the web page-->
      </head>
      <body>
            <!--Inside body we define the actual content of the web page, this content will be shown on the web page-->
      </body>
</html>


Note: <html> tag is the root element of HTML document.

Consider the following example:
      <!DOCTYPE html>
      <head>
            <title>Think Design And Create</title>
      </head>
      <body>
            <h1>Think Design And Create</h1>
            <p>Here you'll learn to create a web page</p>
      </body>
      </html>


html page

Note: !DOCTYPE defines the version of markup language written on current page.


HTML consist of multiple tags and attributes

What are Tags ?
     There are mainly two types of tags defined:
          1. Block Level Tags
          2. Inline Tags
   
Note: Self closing Tags: These tags do not have a closing tag. 
          For Example: <img />, <br>, <hr> etc.

Let us understand each one with an example:
   1. Block Level Tags
            A block level tag always starts on a new line and it takes up the full width available for the page.

       For Example: <div>, <p>, <ul>, <section> etc.

   2. Inline Tags:
           These elements do not start on a new line like block level tags.
    
        For Example: <span>, <b>, <input> etc.

What are attributes ?
    Attribute in html is used to provide additional information about the elements, it also modifies the HTML element.
          <tag attribute-name= "value">...</tag>
Note: Attributes are always applied on the start tag of html.

For Example: 
           <p style="color:red" >Hello World</p>
      Here style is an attribute and "color:red" is its value.
       Similarly there are multiple attributes are defined for each tag, some of the examples are: 
           <img src="./background.jpg" alt="alternative text">
            <a href="about.html">About Us</a>

Note: Save the html file as filename.html to render the page on a web browser. Here .html is an extension for html documents.

Continue Learning: html Elements
   

Comments

Popular Posts