Friday, December 22, 2017

Html Header (Html tutorial)

Hello guys, morning and welcome to this section of my tutorial on HTML, in this tutorial i wanna talk about HTML header, as you all know have actualy talked a little bit about HTML header before in my early post on HTML. But in this post i wanna talk about it in full details.
We have already learnt in my early tutorial on HTML that a typical HTML document will have the following structure:

Document declaration tag
<html>
         <head>
              Document header related tags
         </head> 
         
         <body>
              Document body related tags 
          </body>

</html>

Like i said from the begining of this post, this section of my tutorial will give little more details about the header part which is represented by HTML <head> tag. The <head> tag is a container of various important tags like <title>, <meta>, <link>, <base>, <style>, <script>, and <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 your self.

The HTML <meta> Tag 
The HTML <meta> tag is used to provide metadata about the HTML document which includes information about page expiry, 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
The HTML <base> tag is used for specifying the base URL for all relative URLs in a page, which means all other URLs will be concatenated into a base URL while locating for the given item. 

For example, all the given pages will be searched after prefixing the given URLs with base URL https://www.webdesigntutorialz.blogspot.com directory: 
  
<!DOCTYPE html>
<html>
<head>
<title>Base Tag Example</title>
<base href="https://www.webdesigntutorialz.blogspot.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 relationships between the current document and external resource. Following is an example to link an external style sheet file available in css sub-directory within the web root:

<!DOCTYPE html>
<html>
<head>
<title>Link Tag Example</title>
<base href="https://www.webdesigntutorialz.blogspot.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 is used to specify style sheet for the current HTML document. Below is an example to define few style sheet rules inside <style> tag.

<!DOCTYPE html>
<html>
<head>
<title>Style Tag Example</title>
<base href="https://www.webdesigntutorialz.blogspot.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 is used to include either external script file or to define an internal script for the HTML document. Following is an example  where we are using javascript to define a simple javascript function:

<!DOCTYPE html>
<html>
<head>
<title>Script Tag Example</title>
<base href="https://www.webdesigntutorialz.blogspot.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 thats it for this tutorial, don't forget to subscribe with us, see you in my next tutorial.


Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration, Html Basic Tags, Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content , HTML-Phrase TagsHtml-Phrase Tags[CONCLUSION] , Html-Meta Tags , Html-Comments , Html Images , Html Tables , Html Tables(Conclusion) , Html List , Html Text Links , Html Image LinksHtml Frames , Html Iframes , Html Blocks , Html Backgrounds , Html Fonts , How to create Html Forms (Web Design Tutorial)How to Embed Multimedia into a Html web page(web design) , Html Marquees (Web design)
 
Share:

2 comments: