Introduction to HTML

            
 In this session you will learn the following tags 
              

            

        

          

          
          

          

              

                  
              

          

          

          




    

        
History of HTML:

        

          
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. 
            It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

         
Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. 
          HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
 

      

  

  

  


The <HTML> element


<HTML> element is considered as the root of all elements in HTML.
  Sample document is shown below





  <!DOCTYPE html>
  <html lang="en">
  <head>
        <title>Document</title>
  </head>
  <body>
      
  </body>
  </html>







lang Attribute in HTML



  The lang attribute is used for mentioning the documents language. This attribute will help speech reading and translation tools. HTML Page that uses Hindi Language is shown below 
  and the lang attribute is mentioned as "hi"






  <!DOCTYPE html>
  <html lang="hi">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>हिंदी सीखना</title>
  </head>
  <body>
      <p>यह हिंदी में लिखा है </p> 
  </body>
  </html>





<head> element in HTML


<Head> element is used for representing the metadata collection for the document.
  The contents included in the head element is not for page viewers. The following elements can be nested within the head element

  
    
    
  • title
    • 
    
  • meta
    • 
    
  • link
    • 
    
  • base
    • 
    
  • style
    • 
  

  Sample document is shown below






  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>HTML Introduction</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <base href="https://www.codespindle.com/">
      <link rel="stylesheet" href="test.css">
  </head>
  <body>
      <p></p> 
  </body>
  </html>  






<title> element in HTML



  The title element is used for mentioning the title of the document. The title will help the identification of the document in bookmarks,user history and in search results.
  There must be ONLY ONE title element per page.










<base> element in HTML



  The base element is used for representing the base url for the document. The links in the document will use the base url as the starting point.
  Code sample is given below
  
          



  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>HTML Introduction</title>
      <base href="codespindle.com">
  </head>
  <body>
      <a href="/javaindex.html">click here</a> 
  </body>
  </html>







<meta> element in HTML 



  The meta element can be used with any one of the following attributes(there are other attributes too but not mentioned here). Only one of the attributes should be specified for a meta element. The content attribute should also be specified if any one of the attributes given below is used with the meta element.
  
    
    
  • name
    • 
    
  • charset
    • 
    
  • http-equiv
    • 
  

  Sample document is shown below





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>HTML Introduction</title>
      <meta name="author" content="Satish C J">
  </head>
  <body>
  </body>
  </html>






<meta> element - name Attribute



  The name attribute can take up any of the following values. 
   
    
     
  • application-name - represents the name of the web application the page represents
    • 
     
  • author - represents the name of the author of the page.
    • 
     
  • description - provides the description of the page
    • 
     
  • keywords - list of keywords relevant to the page as provided by the author
    • 
     
  • generator - provides the name of the software used for generating the page.
    • 
     
  • viewport - It is the users visible area of a webpage. The width of the visible area is set to the device width as a webpage is viewed across devices of different screen sizes
    • 
   

   Sample document is shown below

 



  !DOCTYPE html>
  <html lang="en">
  <head>
      <title>HTML Introduction</title>
      <meta name="author" content="Satish C J">
      <meta name="generator" content="Frontweaver 8.2">
      <meta name="keywords" content="neo4j,graphs,database">
      <meta name="description" content="Get the best possible tutorials here">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  </body>
  </html> 






<meta> element - charset Attribute 



  The charset attribute mentions the character encoding used by the document. There should be ONLY ONE meta element with a charset attribute for a page.
  The charset encoding is used for storing and transmission of the document. Sample code is given below.
   

 



  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
  </body>
  </html>  






<meta> element -  http-equiv Attribute



  This is a pragma directive. The following key values are defined for http-equiv attribute. 
    
    
      
  • Content-Type - alternative form of setting the charset attribute
    • 
      
  • Default Style - Specifies the default style sheet to use
    • 
      
  • Refresh - Defines a time period for the document to reload in seconds
    • 
      
  • X-UA-Compatible - what version of internet explorer the page should be rendered as
    • 
      
  • Content security policy - which sources are approved to be loaded. Used for prevention of attacks
    • 
    
  

  



  <!DOCTYPE html>
  <html lang="en">
  <!--http-equiv Encoding declaration-->
  <meta http-equiv="Content-Type" charset= "utf-8">
  <!--http-equiv Refresh the page every 30 seconds-->
  <meta http-equiv="refresh" content="30">
  <!--http-equiv content security policy for prevention of cross site scripting attacks-->
  <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' codespindle.com">
  <!--http-equiv X-UA-Compatible IE version  -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
  </head>
  <body>
      <p>Hello World</p>
  </body>
  </html> 







<style> element in HTML



  The style elements allows css styles to be embedded in documents. This element is for styling the document and does not represent any content for the user. Sample code is given below
    

    



  <!DOCTYPE html>
  <html lang="en">
      <style>
          p{
              color:red;
          }
      </style>
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      <p>Hello World</p>
  </body>
  </html> 







 h1 - h6 tag



  h1 - h6 HTML tags are used for defining headings in your webpage.
  Sample Code for use of h1 - h6 html tags is given below
 





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML Basics</title>
  </head>
  <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
  </body>
  </html>  

  
Output

  image displaying h1-h6 tags




Paragraph tag <p>



  <p> is used for starting a new paragraph. The content begins in a new line.
          Sample code is shown below
 





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML Basics</title>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo rerum neque quaerat, asperiores corrupti hic ipsum, earum optio velit sint aliquam? Nam voluptates, consequatur officiis amet porro laudantium asperiores? Ullam!</p>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis culpa debitis fuga harum in quas possimus aliquid, eligendi, odit, totam eius id placeat! Excepturi facere officiis illo, expedita recusandae temporibus.</p>
  </body>
  </html>  

  
Output

  image displaying paragraph tags




quotation tag <q>



  <q> is used for representing quotations.
  Sample code is shown below
 





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML Basics</title>
  </head>
  <body>
    <q>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo rerum neque quaerat, asperiores corrupti hic ipsum, earum optio velit sint aliquam? Nam voluptates, consequatur officiis amet porro laudantium asperiores? Ullam!</q>
  </body>
  </html>  

  
Output

  image displaying quotation tag




anchor tag <a>



  <a> tag is used for creating hyperlinks.
  Sample code is shown below
 





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML Basics</title>
  </head>
  <body>
      <!-- use of an hyperlink -->
      <a href="newpage.html">click on this link</a>
  </body>
  </html>  

  
Output

  image displaying anchor tag




unordered list tag <ul>



  <ul> tag is used for creating an unordered list.Sample code is shown below for creating a simple unordered list.
 





  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Basics</title>
</head>
<body>
    <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    </ul>
</body>
</html> 

  
Output

  image displaying simple unordered list




Ordered List tag <ol>



  <ol> tag is used for creating an ordered list.
  Sample code is shown below for creating a simple ordered list.
 





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>HTML Basics</title>
  </head>
  <body>
      <ol>
      <li>Task 1</li>
      <li>Task 2</li>
      <li>Task 3</li>
      <li>Task 4</li>
      </ol>
  </body>
  </html> 

  
Output

  image displaying simple unordered list




<table> tag in HTML



  <table> tag is used for creating a table in HTML.

  <tr> represents a row inside the table where as <td>
  represents a column inside the table.
  Sample code is shown below for creating a simple table in HTML.






  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>HTML Basics</title>
  </head>
  <body>
  <table border="1">
      <tr><td>Faculty</td><td>Course</td></tr>
      <tr><td>Satish C J</td><td>IWP</td></tr>
      <tr><td>Mathew</td><td>Java</td></tr>
      <tr><td>Ram</td><td>PhP</td></tr>
  </table>
  </body>
  </html> 

  
Output

  image displaying simple html table




Exercise on table tag in HTML



 Create a table with an header row.
 





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>HTML Basics</title>
  </head>
  <body>
  <table border="1">
      <tr><th>Faculty</th><th>Course</th></tr>
      <tr><td>Satish C J</td><td>IWP</td></tr>
      <tr><td>Mathew</td><td>Java</td></tr>
      <tr><td>Ram</td><td>PhP</td></tr>
  </table>
  </body>
  </html>  

  
Output

  image displaying table with a header row



Exercise 2 on table tag in HTML



  Code for creating a table with a caption. 
 





<table border="1">
<caption>Course Table</caption>
<tr><th>Faculty</th><th>Course</th></tr>
<tr><td>Satish C J</td><td>IWP</td></tr>
<tr><td>Mathew</td><td>Java</td></tr>
<tr><td>Ram</td><td>PhP</td></tr>
</table>
</body>
</html>
 

  
Output

  image displaying a table with a caption



Exercise 3 on table tag in HTML



  Code for merging two columns in a row using colspan attribute in a HTML table. 
 





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>HTML Basics</title>
  </head>
  <body>
  <table border="1">
      <caption>Course Table</caption>
      <tr><td colspan="2">Winter Semester</td></tr>
      <tr><th>Faculty</th><th>Course</th></tr>
      <tr><td>Satish C J</td><td>IWP</td></tr>
      <tr><td>Mathew</td><td>Java</td></tr>
      <tr><td>Ram</td><td>PhP</td></tr>
  </table>
  </body>
  </html> 

  
Output

  image displaying table with colspan



Exercise 5 on tables in HTML



  Code for merging three rows using rowspan attribute in a HTML table.  
 





  DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>HTML Basics</title>
  </head>
  <body>
  <table border="1">
  <caption>Course Table</caption>
  <tr><td colspan="3">Winter Semester</td></tr>
  <tr><th>Faculty</th><th>Course</th></tr>
  <tr><td>Satish C J</td><td>IWP</td></tr>
  <tr><td rowspan="3">Mathew</td><td>Java</td></tr>
  <tr><td>software</td></tr>
  <tr><td>Blockchain</td></tr>
  <tr><td>Ram</td><td>PhP</td></tr>
  </table>
  </body>
  </html> 

  
Output

  image displaying table with rowspan



Exercise 6 on tables in HTML



  Code for using thead,tbody and tfoot tags in a table.  
 





  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>HTML Basics</title>
      <style>
          thead{
              background-color:blue;
          }
          tbody
          {
              background-color: aqua;
          }
          tfoot
          {
              background-color:cadetblue;
          }
  
</style>
</head>
<body>
<table>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tbody>
<tr><td>value 1</td><td>value 2</td></tr>
<tr><td>value 1</td><td>value 2</td></tr>
<tr><td>value 1</td><td>value 2</td></tr>
<tr><td>value 1</td><td>value 2</td></tr>
<tr><td>value 1</td><td>value 2</td></tr>
<tr><td>value 1</td><td>value 2</td></tr>
<tr><td>value 1</td><td>value 2</td></tr>
</tbody>
<tfoot>
<tr><td>Final</td><td>Final</td></tr>
</tfoot>
</table>
</body>
</html> 

  
Output

  image displaying table