The HTML <head> Element:
The
<head> element is a container for all the head elements. Elements inside
<head> can include scripts, instruct the browser 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>.
The HTML <title> Element:
The
<title> tag defines the title of the document.
The
<title> element is required in all HTML/XHTML documents.
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
A simplified HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
The HTML <base> Element:
The
<base> tag specifies the base URL/target for all relative URLs in a page:
<head>
<base
href="http://www.webcoachbd.wordpress.com/images/"
target="_blank">
</head>
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:
<head>
<link rel="stylesheet"
type="text/css" href="mystyle.css">
</head>
The HTML <style> Element:
The <style>
tag is used to define style information for an HTML document.
Inside the
<style> element you specify how HTML elements should render in a browser:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
The HTML <meta> Element:
Metadata
is data (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.
<meta> Tags - Examples of Use
Define keywords for search engines:
<meta name="keywords" content="HTML,
CSS, XML, XHTML, JavaScript">
Define a description of your web page:
<meta name="description"
content="Free Web tutorials on HTML and CSS">
Define the author of a page:
<meta name="author" content="Belal
hossain">
Refresh document every 30 seconds:
<meta http-equiv="refresh"
content="30">
HTML head Elements:
<head> tag:
An HTML document, with a required <title> tag in
the head section:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
<title> tag:
Define a title for your HTML document:
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
The content of the document......
</body>
</html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
The content of the document......
</body>
</html>
<title> tag 2:
<!DOCTYPE html>
<html>
<head>
<title>My first HTML
page</title>
</head>
<body>
<p>The content of the body element
is displayed in the browser.</p>
<p>The content of the title
element is displayed in the browser's title.</p>
</body>
</html>
<title>
<link> tag:
Link to an external style sheet:
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<meta> tag:
Describe metadata within an HTML document:
<head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Belal hossain">
<meta charset="UTF-8">
</head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Belal hossain">
<meta charset="UTF-8">
</head>
<meta> tag 2:
<!DOCTYPE html>
<html>
<head>
<meta name="description"
content="Free Web tutorials">
<meta name="keywords"
content="HTML,CSS,XML,JavaScript">
<meta name="author"
content=" Belal hossain ">
<meta charset="UTF-8">
</head>
<body>
<p>All meta information goes in
the head section...</p>
</body>
</html>
<meta> tag 2 result:
All meta
information goes in the head section...
<script> tag
Write "Hello world" with JavaScript:
<script>
document.write("Hello World!")
</script>
document.write("Hello World!")
</script>
<style> tag:
Use of the <style> element in an HTML document:
<html>
<head>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
<head>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
No comments:
Post a Comment