In last class, you get introduced to HTML
Quiz class1:
What do you mean by HTML.
Write format for opening tag.
Write format for closing tag.
Write basic structure of html document using html tag, head tag, title tag and body tag.
CLICK HERE: FOR HTML CLASS 1
LEARN FROM IIT PASS OUTS AND INDUSTRY EXPERTS
HTML Class 2
Understanding tags
You have learn about
<html> and </html> -Main layer or container for HTML documents
<head> and </head>- The layer which provides information (not visible to the end user of web page) about HTML documents.
<body> and </body>- The layer which contains visible part of the HTML documents.
Let’s discuss the tags, which are used in head segment of HTML document.
Define the tags which are used in head segment of an HTML document.
Tags are categorized in seven categories based on uses in head segment.
Title tag:
You have seen how to use title tag in class 1. It helps search engines for indexing purpose as well as become default name for bookmarking purpose in web browsers.
Format:
<title>...</title>
*Always give a title to your page as it helps in Search Engine Optimization also.
Meta tags:
Meta tags are the most important tag of head segment and very useful for search engine optimization. It provides information about document only, not about content. It allows you specify metadata which is used by search engines to give ranking.
Format for Meta tag:
<meta />
*Meta tags are empty tags.
*Empty tags provide information using attributes, so they do not need closing tags as in the case of other tags like <html>…</html> , <body>…</body> etc.
Attributes of Meta tag:
name: It provides name to the property and could be anything like author, keywords, description etc.
Ex. <meta name=”author” />
content: It specifies the value of property.
Ex. <meta name=”keywords” content=”Jobs, Resume, Fresher” />
scheme: It specifies how to interpret the value of property as declared in the content segment.
Ex. <meta name=”author” content=”Listed Jobs” scheme=””/>
http-equiv: It is used provide commands to http response message headers like to refresh the page, to set expiry time, to define content-type or to set a cookie.
<meta http-equiv="refresh" content="10" />
Base tags:
It is used to set a base URL for all relative links on the web page and has no end tag.
Format: <base />
Example: Suppose the absolute address for images in the body segment of HTML document are as given below
<html>
<head>
<title>HTML without base tag</title>
</head>
<body>
<img src="http://listedjobs.weebly.com/uploads/1/5/9/6/15969036/7536589.jpg?180" />
<img src="http://listedjobs.weebly.com/uploads/1/5/9/6/15969036/3222737.jpg?140" />
</body>
<html>
Base URL is http://www.listedjobs.weebly.com
Relative links are /uploads/1/5/9/6/15969036/7536589.jpg?180 and /uploads/1/5/9/6/15969036/3222737.jpg?140
Now, once you specify http://www.listedjobs.weebly.com as base URL in head section, then you do not have to use complete path of images in body segment.
<html>
<head>
<title>HTML base tag</title>
<base href="http://www.listedjobs.weebly.com"/>
</head>
<body>
<img src="/uploads/1/5/9/6/15969036/7536589.jpg?180"/>
<img src="/uploads/1/5/9/6/15969036/3222737.jpg?140"/>
</body>
</html>
Attributes of base tag
href: It takes URL as the value
target:It takes four keywords as mentioned below as the value and give command for where to open the target URL.
_blank: open in a new window
_self: open in the same frame as it was clicked
_parent:open in the parent frameset
_top :open in the full body of the window
Let's do some HTML coding...
Step 1: Open text editor.
Step 2:
<html>
<head>
<title>HTML base tag</title>
<base href="http://www.listedjobs.weebly.com"/>
</head>
<body>
<img src="/uploads/1/5/9/6/15969036/7536589.jpg?180"/>
<img src="/uploads/1/5/9/6/15969036/3222737.jpg?140"/>
<a href="http://www.listedjobs.weebly.com" target="_blank">Listed Jobs </a>
</body>
</html>
Step 3:Save the work.
a.Go to file menu at the top of editor,click on it.
b.Find save or save as option, click on it. A box will appear.
c.Create new folder and open it.
d.Find "save as type" option at the bottom of box, select "All Files" options from drop down menu.
e.Give a name to your HTML file,type base.htm or base.html
**You can use either .htm or .html, both are valid extension for HTML file,
f.Click Save.
congratulations, you have created your second offline web page with linking property. open it,click on link of listed job and see the result,
Link tag:
It is used to link an external file like css or script files.
Format:
<link.../>
Example:
<link rel="stylesheet" type="text/css" href="/style.css" />
We will discuss it further in the other classes preferably after css class.
Style tag:
It is used to declare style sheet rules inside the document.
Format:
<style>...</style>
Example:
<style type="text/css">
h1 { color:#000FF1 }
</style>
We will discuss it further in the other classes.
Script tag:
It is used to include JAVAScript or VBScript inside the document.
Format:
<script>...</script>
Example:
<script type="text/javascript">
document.write("Calling Javascript...")
</script>
We will discuss it further in the other classes.
Object tag:
It is used to add multimedia files like images, audio files, video files etc. to the web page.param tags are used to define various parameters of an object tag.
Format:
<object>...</object>
Example:
<object title="mp3file" classid="java.class">
<param name="audio" value="trans.wav" />
<param name="width" value="300" />
<param name="height" value="200" />
</object>
We will discuss it further in the other classes.
Let’s discuss the tags, which are used in body segment of HTML document.
Define the tags which are used in body segment of an HTML document.
As you know, body segment displays information (visible to the end user), so, it needs formatting which is done by using various tags like heading tags, paragraph tags, embed tag etc.
We will discuss these tags and learn their uses in next chapters.
Please practice Base tag code
Quiz class1:
What do you mean by HTML.
Write format for opening tag.
Write format for closing tag.
Write basic structure of html document using html tag, head tag, title tag and body tag.
CLICK HERE: FOR HTML CLASS 1
LEARN FROM IIT PASS OUTS AND INDUSTRY EXPERTS
HTML Class 2
Understanding tags
You have learn about
<html> and </html> -Main layer or container for HTML documents
<head> and </head>- The layer which provides information (not visible to the end user of web page) about HTML documents.
<body> and </body>- The layer which contains visible part of the HTML documents.
Let’s discuss the tags, which are used in head segment of HTML document.
Define the tags which are used in head segment of an HTML document.
Tags are categorized in seven categories based on uses in head segment.
Title tag:
You have seen how to use title tag in class 1. It helps search engines for indexing purpose as well as become default name for bookmarking purpose in web browsers.
Format:
<title>...</title>
*Always give a title to your page as it helps in Search Engine Optimization also.
Meta tags:
Meta tags are the most important tag of head segment and very useful for search engine optimization. It provides information about document only, not about content. It allows you specify metadata which is used by search engines to give ranking.
Format for Meta tag:
<meta />
*Meta tags are empty tags.
*Empty tags provide information using attributes, so they do not need closing tags as in the case of other tags like <html>…</html> , <body>…</body> etc.
Attributes of Meta tag:
name: It provides name to the property and could be anything like author, keywords, description etc.
Ex. <meta name=”author” />
content: It specifies the value of property.
Ex. <meta name=”keywords” content=”Jobs, Resume, Fresher” />
scheme: It specifies how to interpret the value of property as declared in the content segment.
Ex. <meta name=”author” content=”Listed Jobs” scheme=””/>
http-equiv: It is used provide commands to http response message headers like to refresh the page, to set expiry time, to define content-type or to set a cookie.
<meta http-equiv="refresh" content="10" />
Base tags:
It is used to set a base URL for all relative links on the web page and has no end tag.
Format: <base />
Example: Suppose the absolute address for images in the body segment of HTML document are as given below
<html>
<head>
<title>HTML without base tag</title>
</head>
<body>
<img src="http://listedjobs.weebly.com/uploads/1/5/9/6/15969036/7536589.jpg?180" />
<img src="http://listedjobs.weebly.com/uploads/1/5/9/6/15969036/3222737.jpg?140" />
</body>
<html>
Base URL is http://www.listedjobs.weebly.com
Relative links are /uploads/1/5/9/6/15969036/7536589.jpg?180 and /uploads/1/5/9/6/15969036/3222737.jpg?140
Now, once you specify http://www.listedjobs.weebly.com as base URL in head section, then you do not have to use complete path of images in body segment.
<html>
<head>
<title>HTML base tag</title>
<base href="http://www.listedjobs.weebly.com"/>
</head>
<body>
<img src="/uploads/1/5/9/6/15969036/7536589.jpg?180"/>
<img src="/uploads/1/5/9/6/15969036/3222737.jpg?140"/>
</body>
</html>
Attributes of base tag
href: It takes URL as the value
target:It takes four keywords as mentioned below as the value and give command for where to open the target URL.
_blank: open in a new window
_self: open in the same frame as it was clicked
_parent:open in the parent frameset
_top :open in the full body of the window
Let's do some HTML coding...
Step 1: Open text editor.
Step 2:
<html>
<head>
<title>HTML base tag</title>
<base href="http://www.listedjobs.weebly.com"/>
</head>
<body>
<img src="/uploads/1/5/9/6/15969036/7536589.jpg?180"/>
<img src="/uploads/1/5/9/6/15969036/3222737.jpg?140"/>
<a href="http://www.listedjobs.weebly.com" target="_blank">Listed Jobs </a>
</body>
</html>
Step 3:Save the work.
a.Go to file menu at the top of editor,click on it.
b.Find save or save as option, click on it. A box will appear.
c.Create new folder and open it.
d.Find "save as type" option at the bottom of box, select "All Files" options from drop down menu.
e.Give a name to your HTML file,type base.htm or base.html
**You can use either .htm or .html, both are valid extension for HTML file,
f.Click Save.
congratulations, you have created your second offline web page with linking property. open it,click on link of listed job and see the result,
Link tag:
It is used to link an external file like css or script files.
Format:
<link.../>
Example:
<link rel="stylesheet" type="text/css" href="/style.css" />
We will discuss it further in the other classes preferably after css class.
Style tag:
It is used to declare style sheet rules inside the document.
Format:
<style>...</style>
Example:
<style type="text/css">
h1 { color:#000FF1 }
</style>
We will discuss it further in the other classes.
Script tag:
It is used to include JAVAScript or VBScript inside the document.
Format:
<script>...</script>
Example:
<script type="text/javascript">
document.write("Calling Javascript...")
</script>
We will discuss it further in the other classes.
Object tag:
It is used to add multimedia files like images, audio files, video files etc. to the web page.param tags are used to define various parameters of an object tag.
Format:
<object>...</object>
Example:
<object title="mp3file" classid="java.class">
<param name="audio" value="trans.wav" />
<param name="width" value="300" />
<param name="height" value="200" />
</object>
We will discuss it further in the other classes.
Let’s discuss the tags, which are used in body segment of HTML document.
Define the tags which are used in body segment of an HTML document.
As you know, body segment displays information (visible to the end user), so, it needs formatting which is done by using various tags like heading tags, paragraph tags, embed tag etc.
We will discuss these tags and learn their uses in next chapters.
Please practice Base tag code
