Friday, April 3, 2020

HTML Tutorial - HTML head tag Elements – Code VS Script

HTML head tag Elements
HTML head tag Elements 


What is HTML head tag Elements?

The HTML head tag Element is the container for holding Meta Data and it lies between the <html> tag and the <body> tag.

HTML Meta Data is HTML document information that is not displayed in the browser.

Meta Data generally refers to the titles, character sets, styles, links, scripts and other information in the document.

Metadata is described using these tags: <title>, <style>, <meta>, <link>, <script> and <base>.

<base> Element

The <base> element is used to set all the URLs of a webpage and the target URL to a target URL and target:

<!DOCTYPE html>
<html>
    <head>
  <base href="https://codevsscript.blogspot.com/images/" target="_blank">
</head>
<body>
<img src="test.jpg" width="24" height="39" alt="Test">
<a href="https://codevsscript.blogspot.com/">w3programmers</a>
</body>
</html>
Explanation: The image displayed with the code above will show from the image folder of codevsscript.blogspot.com and we did not have to give it the path of the image folder. Again we did not have to set a target for the hyperlink, because we have already set the target in the <base> tag, now clicking the link will open the link directly in a new tab. And the href and target here are attribute of the base tag

<title> Element

The tags are used to display the title of any webpage in the browser's title bar.

<!DOCTYPE html>
<html>
    <head>
        <title>Our HTML Tutorials</title>
    </head>
    <body>
    This is Body
    </body>
</html>

You can see the text "Our HTML Tutorials" in the title bar of the browser using the code above.

<style> Element

The <style> </style> tag is used to use the Internal Style sheet. For example :

<!DOCTYPE html>
<html>
    <head>
        <title>Our HTML Tutorials</title>
        <style type="text/css">
            body {background-color: red;}
            p {
                margin-left: 20px;
                font-weight: bold;
                color: #006;
            }
        </style>
    </head>
    <body>
    This is Body
    </body>
</html>



<link> Element

The <link> element is used to link to the external stylesheet:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Link Example</title>
  <link rel="stylesheet" href="../style.css">
</head>
<body>
    <h2>HTML Link Example</h2>
    <p>This is a Paragraph</p>
</body>
</html>

<script> Element

The <script> </script> tag is used to add scripts like JavaScript, JQuery etc. For example :

 <!DOCTYPE html>
<html>
<head>
  <title>HTML script Example</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="sliding_effect.js"></script
</head>
<body>
    <h2>HTML script Example</h2>
    <p>This is a Paragraph</p>
</body>
</html>

<meta> Element

Elements are used to indicate character sets, page descriptions, keywords, page creators and other metadata.

Metadata is used for browsers, search engines and other web services.

To indicate the Character Set:

1
<meta charset="UTF-8">

To give a web page description:

1
<meta name="description" content="Free HTML tutorials">

Key words for search engine to indicate:

1
<meta name="keywords" content="HTML, CSS, XML, JavaScript">

To indicate the name of the author of the page:

1
<meta name="author" content="Masud Alam">

Refresh the document every 30 seconds:
1
<meta http-equiv="refresh" content="30">

All the examples together:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Meta Data Example</title>
    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="Masud Alam">
</head>
<body>
    <p>Meta Data Example</p>
</body>
</html>
Disqus Comments