Lesson 2.Basic tags
Now that we know how to declare the document type of a document ,let us look at the other tags that are commonly used in a html webpage.The Basic tags for defining a document have been described in this chapter for your reference.
Heading
In order to give a document's Body,the required structure, it must be divided into headings,paragraphs,lists,tables and images. html supports six levels of headings,which can be defined using the tags,<h1>,<h2>,<h3>,<h4>,<h5>and <h6>.All these different heading levels have a different font size ,which decreases as the level increases.moreover,every time a heading tag is encountered,by default, the Browser adds a line before and after the heading .Sample document that demonstrates the difference in heading levels is given below.
<!doctype html>
<html>
<head>
<title>heading demo</title>
</head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</html>
The webpage corresponding to this code is as follows
Paragraph
In order to create paragraphs in html,the<p></p> tags are used.Anything that appears within these tags is formatted according to paragraph guidelines of html.As is obvious ,<p> is the opening tag and </p> is the closing tag.
<!doctype html>
<html>
<head>
<title>Paragraph demo</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>
The Webpage corresponding to this code shall look like this
Line Break
Whenever the <br/>tag is encountered,the text that succeeds this tag is display on the next line .This tag is also referred to as an empty element because nothing has to appear between the opening and closing tags,therefore a single tag is used.
Please note that there should be a space between the characters br and /.if you miss out the space ,older browsers will not be able to comprehend the tag.moreover,if you miss out the forward slash(/) , the tag will be considered invalid by xhtml.
<!doctype html>
<html>
<head>
<title>line break demo</title>
</head>
<body>
<p>hey<br />this is the next line.<br />thanks<br />this is also on the next line</p>
</body>
</html>
The Webpage corresponding to this code is show n below
Centering content
In order to bring the content to the center of the element,which holds true for table cells,the <center>tag may be used.Sample code to demonstrates the behaviour of this tag is given below
<!doctype html>
<html>
<head>
<title>centering content demo</title>
</head>
<body>
<p>not the center!</p>
<center>
<p>centered!</p>
</center>
</body>
</html>
The Webpage corresponding to this code is show n below
Horizontal Lines
In order to different between sections of a document ,you might like to draw lines that separate them .using the <hr /> tag,such horizontal lines can be created.This tag creates a horizontal line from the place where it is used to the right margin of the webpage. Sample code to demonstrates behavior of this tag is given below
<!doctype html>
<html>
<head>
<title>horizontal line demo</title>
</head>
<body>
<p>Section 1</p>
<hr />
<p>Section 2</p>
</body>
</html>
The Webpage corresponding to this code is show n below
Like the line break tag (<br />),the hr tag is also an empty element.so,there are no opening and closing tags .moreover,no text goes between the tags. it is important to note here that there must be a space between hr and / or else some of the browsers may not be able to recognize is considered invalid by xhtml.
Preformatted tag
In some cases,you don't want browser to display the webpage as it is written in the html document. The preformatted tag can be used to preserve the formatting of the document.Therefore, the text that appears between <pre> and </pre> retains the formatting that it receives from the source document.Sample code to demonstrate the behavior of this tag is given below-
<!doctype html>
<html>
<head>
<title>preformatted tag demo</title>
</head>
<body>
<pre>
function demofunction( str_text ){
Alert( str_text )
}
</pre>
</body>
</html>
The Webpage corresponding to this code is show n below
if you remove the <pre> and </pre> tags,the output will appear something like this
Non Breaking Spaces
In case you don't want the client browser to break your text on the basis of character limit onlines, you can use Non Breaking Spaces or  .Sample code to demonstrate the behavior of this tag is given below-
<!doctype html>
<html>
<head>
<title>Non Breaking Spaces demo</title>
</head>
<body>
<p>demo:"12 angry men."</p>
</body>
</html>
The Webpage corresponding to this code is show n below
Elements in html
The starting tag that can include other tags for defining a document is referred to as an element .moreover,if other element are included ,then the tag will have a corresponding closing tag as well .For example,<p> has a closing tag </p> while<br /> doesn't have a closing tag.elements that don't have a closing tag are also called void elements.An html document can be seen as a tree of html elements, This tree can be used to visualize how the html page will be displayed and what kind of content can be placed in which part of the html document. This may make you wonder as to then ,what is the difference between html tags and elements.An element Begins with a tag and ends with a tag.therefore ,the entity that is created using a set of tags is an element.
For instance ,if <p> is the opening tag and </p> is the closing tag,then the element created as result is the paragraph element.html allows nesting of elements.in other words ,you can have one element inside another elements and many elements enclosed inside a single element.In the sample code given below,the element head has the element title while the element body has the elements,h1 and p.moreover,the element h1 has the element i and the element p has the element u .
<!doctype html>
<html>
<head>
<title>Nested Elements demo </title>
</head>
<body>
<h1>text is <i>italic</i>heading</h1>
<p>text is <u>underlined</u>
paragraph</p>
</body>
</html>
The Webpage corresponding to this code is show n below
Also read:-
0 टिप्पणियाँ