HTML TAGS
HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.
When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.
An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.
List of HTML Tags by Alphabets
Uses of HTML TAGS
USE OF HEADING TAGS
To display the text in some special size, heading levels are used. HTML provides six heading levels. The tag <hn> is used for headings where n is any number ranning from 1 to 6.
<h1>First Level Heading</h1>
<h2>Second Level Heading</h2>
<h3>Third Level Heading</h3>
<h4>Fourth Level Heading</h4>
<h5>Fifth Level Heading</h5>
<h6>Sixth Level Heading</h6>
The following HTML document contains various heading tags:
BODY TAG
All other tags and text is contained within the <body> and </body> tags. Body tag has various attributes. These attributes have been explained in the later section.
<body>
.............
............. --Text and other HTML tags.
.............
</body>
Attributes of <body> tag
Attributes are those commands which are written with their parent tags. For example <body> tag has the following attributes:
1. background attribute.
2. text attribute.
3. bgcolor attribute.
4. link attribute.
5. alink attribute.
6. vlink attribute.
7. leftmargin attribute.
8. topmargin attribute.
These attributes have been explained in the next pages.
Giving Line Breaks in the Document
Line breaks can be given by <br> tag. This is an empty tag which does not require closing tag. You can give as many line breaks in the document as you need. You have to write <br> after the text where you want to give the line break. The following illustration shows the use of <br> tag.
Example: <html>
<head>
<title>Break</title>
</head>
<h2>Use of Break Tag</h2>
<body>
This is a Sample Page.
<br>
<br>
This page is created by me.
<br>
I am learning Web Designing.
</html>
PARAGRAPHING
Paragraph can be indicated by <p> tag. This is a container tag and it needs its closing tag </p> This tag inserts a line break in the web page with extra spacing. Paragraph alignment by default is left but you can align the paragraphs to the centre or right as well.
Example :
<html>
<head>
<title>PARAGRAPH</title>
</head>
<h3>INDICATION PARAGRAPH</h3>
<body>
<title>PARAGRAPH</title>
</head>
<h3>INDICATION PARAGRAPH</h3>
<body>
<p>Computers have made a break through in present scenario. Present scenario is of information technology.</p>
Information Technology has opened gates for Computer Professionals.<p>
I.T. Professionals are in great demand.
</p>
</body>
</html>
Attributes of paragraph element
Paragraphs can be aligned to the left, centre or right. By default the paragraph starts from the left of the web page. The following attributes can be used with <p> tag.
Center
The center attribute of <p> tag starts from the centre of the web page. The following illustrations shows the use of center attribute.
Example :
<html>
<head>
<title>Alignment</title>
</head>
<body>
<p align="center">My Name is
Ravia Akhtar.</p>
</html>
RIGHT
The rightr attribute of <p> tag starts the paragraph from the right of the web page. The following illustration shows the use of right attribute.
Example :
<html>
<head>
<title>Right Alignment Size</title>
</head>
<body>
<p align= <"right">
My Favourite Book is the Harry Potter</p>
</body>
</html>
ATTRIBUTES OF<BODY>TAG
Background
The background attribute selects an image to be displayed as background image in the web page.
Example:
<html>
<head>
<title>BACKGROUND</title>
</head>
<body background="ash.gif">
<h1>Background Image of RCR </h1>
</body >
</html>
Bgcolor
The attribute is used with <body> tag to select the colour of background of the web page.
<body bgcolor= "pink">
The above command changes the background colour to pink. You
can select any colour from the various colours.
List of colours:
Text
The attribute text is used to choose text colour in the web page.
<body text="Name of the Colour">
You have to write the name of colour to be given to the text.
<body text-"magenta">
The above command selects the colour of text as magenta.
Topmargin
The attribute topmargin sets the top margin of the text. The value of top margin is given in pixels.
A pixel is the smallest element of the screen or image. An image is made of thousands of pixels.
<body topmargin="50">
The above command displays the text 50 pixels away from the top of the page.
Leftmargin
The attribute leftmargin sets the let margin of the text.
The value of left margin is also given in pixels.
<body leftmargin="50">
The above command displays the text 50 pixels away from the left of the page.
Link, alink, vlink
The link attribute is used to select the colour of unvisited links in the web page. The default colour of link is blue.
<body text-"black" bgcolor="yellow" link="red">
The alink attribute is used to select the colour of link in the web page which is being clicked. The default colour of alink is red.
<body text-"black" bgcolor="yellow" alink-"orange">
The vlink attribute is used to select the colour of visited links in the web page. The default colour of vlink is purple.
<body text-"black" bgcolor yellow" vlink="green">
HORIZONTAL RULERS
Horizontal rulers can be shown in web pages to identify some portion of the text in a particular way. For drawing horizontal ruler, <hr> tag is used. The tag <hr> is an empty tag and it does not require any closing tag.
The following illustration shows the use of <hr> tag.
Example:
<html>
<body>
<hr> This is a Horizontal Ruler
</body>
</html>
Attributes of <hr> tag:
The attributes can be used with <hr> tag are:
(1) size
(2) width
(3) noshade
Size
The attribute size is used to determine the thickness of horizontal ruler.The default value is 2 pixels.
An illustration has been given to show the use of size attribute
Example:
<html>
<body>
<hr size= 4>
The thickness of this Horizontal ruler is 4 pixels.
</body>
</html>
Width
The attribute width is used to determine the horizontal width of horizontal ruler.
The default width-value of horizontal ruler is equal to the page-width An illustration has been given to show the use of width attribute
Example:.
<html>
<body>
<hr width = 60%>
Width of the Horizontal Ruler is 60% of the Page width.
<hr width = 70%>
Width of the Horizontal Ruler is 70% of the Page width.
</body>
</html>
In the above example, the width of the horizontal ruler is represented as percentage to the width of the page.
In the following illustration, the width is represented as pixels.
Example :
<html>
<body>
<hr width 60>
Width of the Horizontal Ruler is 60 pixels.
<hr width 80>
Width of the Horizontal Ruler is 80 pixels.
</body>
</html>
Noshade
The noshade attribute is used to produce a solid blank line without shade The following illustration has been given to show the use of noshade attribute..
Example:
<html>
<title>NOSHADE</title>
<h2>Noshade Ruler</h2>
<hr width 100 noshade>
</html>
COMMENTS
Comments are used for the purpose of explaining some tags/text in the html text documents. These comments however, are not displayed in web pages. Sometimes the text or commands written in HTML documents may be simple for the designer but difficult for others to understand doucment. The person other than designer can easily understand the purpose of tags, commands and text used in the documents
The comments are enclosed between
<!-.......<-> tag. No attribute is used for comment tag.
Rules for Writing Comments in the Documents
1 You can write as many comments in the documents as desired by you.
2. The comments are usually written to explain the purpose of some typical tags and explain technical layout of the document.
3. When you use colour codes instead of their names in the HTML document, it will be better to write the comment indicating the colour-code. The following illustration will show how to write comments in the documents.
Example:
<html>
<h2>COMMENT</h2>
<body>
<font face="verdana" color="#ff0000"
<!-The code #ff0000 is used for Red colour.
THIS MESSAGE WILL NOT BE DISPLAYED IN THE WEB PAGE >
EXAMPLE TO ILLUSTRATE COMMENT
</body>
</html>
TEXT FORMATS: WORKING WITH TEXT
Text can be shown in different styles and attractive looks in web pages HTML supports various text formatting elements. Let us study them.
<font> Tag Pair
Introducing the <font> tag and, of course, its sidekick, the </font> tag. You use this tag pair to control the look of your text. Be aware that some browsers don't recognize this tag pair, although the major ones do. To control the size, color and typeface of your text, type <font>......</font>.
<html>
<head>
<title>Font Tag</title>
</head>
<body>
<font> This is the use of Font Tag.
</font>
</body>
</html>
Size Attribute
You add attributes to the <font> tag in exactly the same way as you've added attributes to tags in earlier tasks..
<font size="value">
Absolute or Relative Size
You can specify an absolute or relative size for text. To specify an absolute size, type <font size="X">, where x is a number from 1 to 7. The default is 3, the size you'll get if you don't specify the size attribute. To specify a relative size, type <font size= "+ (or -) x">. Relative sizes are always based on the default size of 3, regardless of any absolute size you might have set earlier, so if you want a size of 2, type either <font size="2"> or <font size="-1">.
<html>
<head>
<title>Working with the Font Tag</title>
</head>
<body>
<font size="4">Use of size attribute
</font>
</body>
</html>
Base Font Size
The default size for text is 3. You can change that default with the <basefont> attribute. To specify a new default size, type <basefont size="X> where x is between 1 and 7. Now any relative sizes you specify in the <font> tag will be based on the size you specified in the<basefont> tag.
<html>
<head>
<title> Font Tag </title>
</head>
<body> <basefont size="4">
<font size="2"> Use of Base Font Size
</font>
</basefont>
</body>
</html>
Color Attribute
This attribute sets the colour of fonts.
Type <font color="value"> </font where value is specified using either the name of the colour or its hexadecimal value.
<html>
<head>
<title>Font Tag</title>
</head>
<body>
<font color="#3300ff">
The text will be in blue with a touch of red
</font>
</body>
</html>
Face Attribute
Another important attribute of the <font> tag is the face attribute Add it just as you add any other attribute Type <font face-?value?> where value is the desired typeface.
<html>
<head>
<title> Font Tag</title>
</head>
<body>
<font size="4" face="value"> Use of Face Attribute.
<font>
</body>
</html>
Naming the Font
You can specify the name of any font you desire in the face attribute For instance, to specify the typeface Comic Sans MS, type <font faces comic sans ms"> </font>
<html>
<head>
<title-Font Tag</title>
</head>
<body>
<font size="4" face='comic sans ms"> This text has been typed in comic sans ms font </font>
</body>
</html>
Font Alternatives
If you specify a different font, also specify alternatives for people who don't have that font on their computers To do so, separate the alternatives by a comma. Type <font face-"comic sans ms, arial, Trebuchet MS The browser first looks for Comic Sans MS; if it can't find that font, it looks for Arial and so on. If it can't find any of the fonts in the list, it uses the system default.
<html>
<head>
<title>Font Tag</title>
</head>
<body>
<font size="4" face='comic sans ms, arial, Trebuchet MS'>
Font Alternatives
</font>
</body>
</html>
Bold Text
You can create bold text on your page by specifying a bold-faced font in the face attribute of the <font> tag. For example, instead of choosing Trebuchet MS as your font, choose Trebuchet MS Bold. Another way is to use either the strong (<strong> </strong>) or bold (<b></b>) tag pairs. The strong tag is a logical tag; the bold tag is a physical tag.
<body>
<font size="2" face="arial, Trebuchet MS">
<b>BOLD TEXT</b> and
<strong>STRONG TEXT</strong>
</font>
</body>
Italic Text
To create italic text, use either the emphasis tag pair (logical) or the italic tag pair (physical) Type either <em></em> or <i></i> To create bold and italic text, you can type p </i></b>. Notice the proper nesting of these tags Because the italic tag is opened after the bold tag, it is closed before the bold tag.
<body>
<font size="2" face="arial, Trebuchet MS'>
<i>ITALIC TEXT</i>
<em> EMPHASIZED TEXT</em>
<b><i>BOLD AND ITALICS</i>. </b>
</font>
</body>
Underline and Strike through Text
To underline your text, use the underline tag Type <u>......</u>. To strike through (or cross out) your text, use the strike through tag Type <s>.........<s>.
<body>
<font size="2" face="arial, Trebuchet MS">
Here I use the underline tag to
<u>underline a few words</u>
and the strike through tag to
<s>cross a few words
out</s>
</font>
</body>
Create Superscript and Subscript Text
Superscript text is smaller than regular text and is raised off the baseline. In n², 2 is
written as superscript. To create superscript, use the superscript tag pair. Type <sup>......</sup>. Subscript text is smaller than regular text and is lowered below the baseline The n in X, is subscript. To create subscript, use the subscript tag pair Type <sub>....... </sub>
<body>
<font size="2" face="arial, Trebuchet MS"> <sup>4</sup>n<sub>4</sub>
</font>
</body>
PRESENTING AND ARRANGING TEXT
Line Break Tag
To create a line break, type <br /> (br, a space and a forward slash). The space and forward slash are the special closing portion of the line break tag Now type a few more
sentences.
<body>
<font size="2" face="arial, MS Hello Students! Welcome to Kurukshetra University.<br>
This is a top class University.</br>
</font>
</body>
PARAGRAHS
Paragraph tags ( <p> and </p>) are used to separate the text by leaving a space equivalent to one line between previous line and the next line. The break tag is used to start the text from the next new line. It does not leave a blank line space as the paragraph tag does.
Thanks for Visiting Our Website. If you Like Our Content then keep Visiting then keep Visiting Our Website "Quicky Tech"
0 Comments