Tuesday, 7 January 2014

Tutorial 12: HTML Head

The HTML <head> Element


The HTML head element contains all HTML tags elements which includes  <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.


The HTML <title> Element


The title tag (<title>) displays the title of the HTML document.

The <title> element:
  • defines a title in the browser toolbar
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search-engine results
EXAMPLE:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

OUTPUT IN BROWSER:



The HTML <link> Element


The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets.

EXAMPLE:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


The HTML <style> Element


Inside the style tag of HTML, you can describe the styling and how the HTML document should look like.

EXAMPLE:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

*This code will make the background color of document yellow and make the paragraph text color blue.


The HTML <meta> Element


Metadata is information about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
<meta> tags always go inside the <head> element.

USES OF <meta> ELEMENT

1.To define keywords for search engines.
eg=> <meta name="keywords" content="HTML TUTORIALS">

2.To define a description of your web page.
eg=> <meta name="description" content="Free tutorials on HTML and CSS">

3.To define the author of a page.
eg=>  <meta name="author" content="author name">

4.To Refresh document after a given time interval.
eg=> <meta http-equiv="refresh" content="50">

*The above code will refresh the page after every 50 seconds.



No comments:

Post a Comment