Friday, December 22, 2017

Html Header


Hello dear readers! welcome back to another section of my tutorial on Html. In this tutorial guide, we are going to be discussing about the Html header. As you all know, i have actualy discussed a little bit about Html header before in my earlier post on Html. But in this post i want to discuss about it in full details.

We have already studied in my earlier tutorial post on Html that a typical Html document will have the structure as shown below :

Document declaration tag


<html>          

     <head>               
            Document header related tags          
     </head>                     

     <body>               
            Document body related tags            
     </body>
</html>

Like i already said from the very begining of this post, this tutorial guide will be giving a little more details about the header part which is represented by the Html <head> tag. This <head> tag is a container of different important tags like the <title>, <meta>, <link>, <base>, <style>, <script>, and also the <nonscript> tags.


The HTML <title> Tag

The Html <title> tag is used for specifying the title of the Html document. Below is an example to give a title to a Html document:

Example


<!DOCTYPE html>
<html>

     <head>
            <title>Title Tag Example</title>
     </head>

     <body>
            <p>This code was written by nkpara kennedy</p>
     </body>
</html>

You can try the above code out using your text editors to see the result for yourselves.

The HTML <meta> Tag

The Html <meta> tag is used to provide metadata about the Html document which includes the information about the page expiry date, page author, list of keywords, page description etc.

Example


<!DOCTYPE html>
<html>

     <head>
            <title>Meta Tag Example</title>


            <!-- Provide list of keywords -->
            <meta name="keywords"  content="Python, Html, Css, Php" >

            <!-- Provide page description -->
            <meta  name="description"  content="We teach web design courses" >

            <!-- Author information -->
            <meta name="author"  content="Nkpara Kennedy" >

            <!-- page content type -->
            <meta  http-equiv="content type"  content="text/html; charset-8" >

            <!-- page refreshing delay -->
            <meta http-equiv="refresh"  content="50"> 

            <!-- page expiry -->
            <meta http-equiv="expires"  content="mon, 25 december 2017 15:30:28 GMT" >  

            <!-- Tag to tell robot not to index the content of a page -->
            <meta name="robots"  content="nonindex, nofollow" >

     </head>

     <body>
            <p>This code was written by Nkpara Kennedy</p>
     </body>
</html>

The HTML <base> Tag

Html <base> tag is used to specify the base URL for all relative URLs in a page, which means all other URLs will be concatenated into a base URL while locating the given item. 

RECOMMENDED POST: Html Backgrounds

For example, all the given pages will be searched after prefixing the given URLs with the website's base URL https://www.webdesigntutorialz.com directory:

<html>

     <head>
            <title>Base Tag Example</title>
            <base href="https://www.webdesigntutorialz.com"  /> 
     </head>

     <body>
            <a href="/html/index.html"  title="web design tutorialz" >Html tutorial</a>  
     </body>
</html>

The HTML <link> Tag

The Html <link> tag is used to specify the relationship between the current Html document and the external resource or web page. The following below is an example to link an external Css file that is available in a css sub-directory within the web root:

<!DOCTYPE html>
<html>

     <head>
            <title>Link Tag Example</title>
            <base href="https://www.webdesigntutorialz.com"  /> 
            <link rel="stylesheet"  type="text/css"  href="/css/style.css" >   
     </head>

     <body>
            <p>This is the body of the HTML document.</p>
     </body>
</html>

The HTML <style> Tag

The Html <style> tag can be used for specifying Style Sheet for the current Html document. Below is an example to define a few style rules inside <style> tag.

<!DOCTYPE html>
<html>

     <head>
            <title>Style Tag Example</title>
            <base href="https://www.webdesigntutorialz.com"  /> 

            <style  type="text/css" >
                  .menubar   {             
                       background-color: blue;             
                       padding:20px;
                  }
            </style>
     </head>

     <body>
            <p class="menubar">This is the body of the HTML document.</p> 
     </body>
</html>

The HTML <script> Tag

The Html <script> tag can be used to include either external script file or to define an internal script for the Html document. The following is an example  where by we are making use of javascript to define a simple javascript function:


<!DOCTYPE html>
<html>

     <head>
            <title>Script Tag Example</title>
            <base href="https://www.webdesigntutorialz.com"  /> 

            <script  type="text/javascript" >
                  function Hello()   {             
                       alert("Hello, world");
                  } 
            </script>
     </head>

     <body>
            <input  type="button"  onclick="Hello();"  name="ok"  Value="ok"  />  
     </body>
</html>

You can try out all the above codes with your text editor and feel free to ask your questions.

Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be discussing about the Html Stylesheet.

Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.
Share:

2 comments:

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.