fbpx
April 2, 2020
html header

Tutorial 24# Learn How To Install HTML Header the Easy Way

In this tutorial you will be learning about HTML header and how you can install and beautify them. In our previous tutorial we learnt about HTML Marquee and how to structure them. If you haven’t gone through the tutorial then you are missing out a lot.

Read previous tutorial on: Tutorial 23# Learn How To Use HTML Marquee The Easy Way

What is HTML HEADER ?

HTML header is the head section added to the HTML document that holds the page title tag.

During the course of this HTML tutorial, we made several mentions of the header and its tag. Well! We will be emphasizing more on this HTML header tag but most especially on the other tags that can be placed in the header tag.

Here are the list of other tags you can find in the HTML header section

  • Title tags <title> & </title>
  • Meta tags <meta>
  • Style tags <style> & </style>
  • Script tags <script> & </script>
  • Base tags <base>
  • Links tags <link>

Tittle HTML tags

The title HTML tags are use to add titles to the HTML web document. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>illustration of HTML Title Example </title>
   </head>
	
   <body>
<p>Hello, Develoferd!</p>
      


   </body>

</html>

Result

illustration of HTML Title Example

Hello, Develoferd!

Meta tags

The HTML meta tags are used to add further information to the web documents mostly for site engine recognition and optimization. information such as page description, keywords etc can be added here. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <meta name="keywords" content="add the web page related keywords here ">

      <title>illustration of HTML meta Example </title>
   </head>
	
   <body>
      


   </body>

</html>

HTML style tags

The HTML style tags can be used to style the HTML header section. it is used to specify the style sheet for the particular header section

<!DOCTYPE html>
<html>

   <head>
      <style type="text/css">
      .mytitle {
            background-color:red;
            padding: 15px;
         }
      </style>

      <title>illustration of HTML style tags </title>
   </head>
	
   <body>
<p> hey! buddie! </p>
      


   </body>

</html>

HTML Base tags

The base tag is used to add the web page base URL to the HTML header. other URLs added to the web document without a base domain URL will make use of the base URL added to the header. Example below

<!DOCTYPE html>
<html>

   <head>
      <base href="https://develoferd.com"  >
      

      <title>illustration of HTML Base tags Example </title>
   </head>
	
   <body>
      <a href = "/htmlebook/ebooks.html" title = "HTML Tutorial">HTML Tutorial Learning</a> 
      


   </body>

</html>

HTML Link tags

The link tags is used to link an external document to the HTML document. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <link rel="stylesheet" type="text/css" href="style.css">
      
      

      <title>illustration of Link  tags Example </title>
   </head>
	
   <body>
      <p>HELLO BUDDIE!</p>
       
      


   </body>

</html>

RESULT

illustration of Link tags Example

HELLO BUDDIE!

HTML Script tag

The HTML script tag is used to add external scripts such as javascript to the HTML web document.

<!DOCTYPE html>
<html>

   <head>
      
      <script>
      function Hello() {
            return "hello buddie";
         }
      
      </script>
      
      

      <title>illustration of script  tags Example </title>
   </head>
	
   <body>
      <p>HELLO BUDDIE!</p>
       
      


   </body>

</html>

Result

illustration of script tags Example

HELLO BUDDIE!

Conclusion

Now you understand the HTML header in web Documents and you are really doing great. Lets move on to the next tutorial on HTML STYLE SHEET

Leave a Reply

Your email address will not be published. Required fields are marked *