WEB DESIGN TUTORIAL HTML THE LAST PART OF PART-022 FULL WEB DESIGN HTML
At first, Thank for my all Post Readers. Today HTML Full parts 22 post.( Full Web design tutorial To Html ) This is Full HTML Web Page in the Tutorial. you can learn a full HTML web design it. I hope so. Let's start...
Today's Subject is HTML Header
HTML Header
We have learnt that a typical HTML document will have following structure:
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
This chapter will give a little more detail about header part which is
represented by HTML <head> tag. The <head> tag is a container of various
important tags like <title>, <meta>, <link>, <base>, <style>, <script>, and
<noscript> tags.
The HTML <title> Tag
The HTML <title> tag is used for specifying the title of the HTML document.
Following is an example to give a title to an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
This will produce following result:
The HTML <meta> Tag
The HTML <meta> tag is used to provide metadata about the HTML document
which includes information about page expiry, page author, list of keywords,
page description etc.
Following are few of the important usages of <meta> tag inside an HTML
document:
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<!-- Provide list of keywords -->
<meta name="keywords" content="C, C++, Java, PHP, Perl, Python">
<!-- Provide description of the page -->
<meta name="description" content="Simply Easy Learning by Tutorials Point">
<!-- Author information -->
<meta name="author" content="toneysoftblog">
<!-- Page content type -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- Page refreshing delay -->
<meta http-equiv="refresh" content="30">
<!-- Page expiry -->
<meta http-equiv="expires" content="Wed, 21 June 2006 14:25:27 GMT">
<!-- Tag to tell robots not to index the content of a page -->
<meta name="robots" content="noindex, nofollow">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
This will produce following result:
The HTML <base> Tag
The HTML <base> tag is used for specifying the base URL for all relative URLsin a page, which means all the other URLs will be concatenated into base URL
while locating for the given item.
For example, all the given pages and images will be searched after prefixing
the given URLs with base URL http://www.toneysoftblog.blogspot.com/directory:
<html>
<head>
<title>HTML Base Tag Example</title>
<base href="http://www.toneysoftblog.blogspot.com/" />
</head>
<body>
<img src="/images/logo.png" alt="toneysoftbloglogo"/>
<a href="/html/index.htm" title="HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>
This will produce following result:
HTML Tutorial
But if you change base URL to something else, for example, if base URL is
http://www.toneysoftblog.blogspot.com/home then image and other given links will
become like http://www.toneysoftblog.blogspot.com/home/images/toneysoftbloglogo.png and
http://www.toneysoftblog.blogspot.com/home/html/index.htm
The HTML <link> Tag
The HTML <link> tag is used to specify relationships between the currentdocument and external resource. Following is an example to link an external
style sheet file available in css sub-directory within web root:
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href="http://www.toneysoftblog.blogspot.com/" />
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
The HTML <style> Tag
The HTML <style> tag is used to specify style sheet for the current HTMLdocument. Following is an example to define few style sheet rules inside
<style> tag:
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href="http://www.toneysoftblog.blogspot.com/" />
<style type="text/css">
.myclass{
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p>
