PROJECT CODE

                                            The Developers Choice!!!!
                                                                                                            Home | About Us | Contact Us

HTML TUTORIALS

Lecture12 : Head

What is HTML <head> Element
The HTML Head Element (<head>) provides general information (metadata) about the document, including its title and links to or definitions of scripts and style sheets. Element is a container for all the head elements. Elements inside can include scripts, instruct the Client site* where to find style sheets, provide meta information, and more. The following tags can be added to the head section:<title> ,<style>, <meta>, <link>, <script>, <noscript>, and <base>.
How to use HTML <head> Element
We use head tag to define the heading or title of our project which display on Browser tab.

<head>
<title>Title with Name</title>
</head>
How to implement HTML <head> Element
Example :
<!DOCTYPE html>
<html>
<head>
<title>Title with Name</title>
</head>

<body>
Write content here......
</body>

</html>


Output : Title with Name Write content here......
What is HTML <title> Element
The title tag is an HTML title element critical to both SEO and user experience that is used to briefly and accurately describes the topic and theme of an online document. The title tag is displayed in two key places: Internet Browser – Title Tags display in the top bar of internet browsers.
How to use HTML <title> Element
Title tags are often used on search engine results pages (SERPs).
Title are important both for SEO and social sharing.
Title tags—technically called title elements—define the title of a document.

<head>
<title>Title with Name</title>
</head>
How to implement HTML <title> Element
Example :
<!DOCTYPE html>
<html>
<head>
<title>Title with Name</title>
</head>

<body>
Write content here......
</body>

</html>


Output : Title with Name Write content here......
What is HTML <base> Element
Relative links within a document (such as <a href="someplace.html"...> or <img src="someimage.jpg"... >) will become relative to the URI specified in the base tag. The base tag must go inside the head element. href is used to specify the location on the base URI.
How to use HTML <base> Element
Title tags are often used on search engine results pages (SERPs).
Title are important both for SEO and social sharing.
Title tags—technically called title elements—define the title of a document.

<head>
<title>Title with Name</title>
</head>
How to implement HTML <base> Element
Example :
<!DOCTYPE html>
<html>
<head>
<base href="http://www.projectcode.co.in/images/" target="_blank">
</head>
<body>
<p><a href="http://www.projectcode.co.in">Project Code</a> - Note - the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".</p>
</body>
</html>


Output :

Project Code
Note - the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".

What is HTML <link> Element
The HTML link element is very similar to the HTML a element because it's used to link a document to other resources. But unlike it, the HTML link element can only be defined in the head section of the document (HTML head element).
How to use HTML <link> Element
It is use to provide global relational information about the document.
The link element is used to add this information in the header of your document in the HEAD element.

<head>
<link rel="stylesheet" type="text/css" href="styleName.css">
</head>
How to implement HTML <link> Element
Example :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styleName.css">
</head>
<body>
<h1>Apply link style sheet</h1>
<p>Me too!</p>
</body>
</html>


Output :

Apply link style sheet

Me too!

What is HTML <style> Element
The HTML <style> element contains style information for a document, or a part of document. The specific style information is contained inside of this element, usually in the CSS. Inside the STYLE tag, you include the HTML tags you want to style, and the style properties that define the styles.
How to use HTML <style> Element
The STYLE tag is used to define style information in an HTML document. When you use a STYLE tag, you are adding an embedded style sheet to your document.

<head>
<style type="text/css">
body {background-color:pink;}
p {color:teal;}
</style>
</head>
How to implement HTML <style> Element
Example :
<!DOCTYPE html>
<head>
<style type="text/css">
body {background-color:white;}
p {color:teal;}
h1 {color:green;}
</style>
</head>

<body>
<h1>Apply link style sheet</h1>
<p>Me too!</p>
</body>
</html>


Output :

Apply link style sheet

Me too!

What is HTML <meta> Element
Meta tags are one piece in a large algorithmic puzzle that major search engines look at when deciding which results are relevant to show users who have typed in a search query.They are part of a web page's head section. The information that you provide in a meta tag is used by search engines to index a page so that someone searching for the kind of information the page contains will be able to find it. The meta tag is placed near the top of the HTML in a Web page as part of the heading.
How to use HTML <meta> Element
Meta elements are tags used in HTML or XHTML documents to provide structured metadata about a Web page. Metadata is data (information) about data.
We can use Multiple Meta elements with different attributes on the same page. Meta elements can be used to specify page description, keywords and any other metadata not provided through the other head elements and attributes. It will not be displayed on the page, but will be machine parsable.
It can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

Define keywords for search engines :
<meta name="keywords" content="HTML, HTML5, CSS, Jquery, JavaScript">

Define a description of your web page :
<meta name="description" content="Free Website code on HTML5 and CSS3">

Define the author of a page :
<meta name="author" content="Albert Einstein">

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



<head>
<meta charset="UTF-8">
<meta name="description" content="Free Website code on HTML5 and CSS3">
<meta name="keywords" content="HTML, HTML5, CSS, Jquery, JavaScript">
<meta name="author" content="Albert Einstein">
</head>

How to implement HTML <meta> Element
Example :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Website code on HTML5 and CSS3">
<meta name="keywords" content="HTML, HTML5, CSS, Jquery, JavaScript">
<meta name="author" content="Albert Einstein">
</head>

<body>
All Meta tag information write inside head tag section
</body>

</html>


Output :
All Meta tag information write inside head tag section
   
All Rights Reserved with Project code