2 HTML

Hiren Joshi

HTML provides many Physical Character Styles tag. These style tags include Bold, Italic, Underline, Subscript, Superscript etc. To make a content bold <b> tag is used.

<i> is used to make content italic. The content between <u> and </u> are underlined. To make a character subscript <sub> tag is used. <sup> tag is used for superscript. The closing tag is required for all the physical character style tags.

<html>

<body>

This is <b><i>bold.</i></b> exmaple.

<br>

This is <i>italic.</i> example.

This is <u>Underline</u> example.

<hr>

<p> This is paragraph.

<p><p><p> Does it make three line blank?

</body>

</html>

Like physical character style there is logical style also. The logical style character set includes keyboard text, emphasized character etc.

<HTML>

<BODY>

<STRONG>Strong</STRONG><BR>

<KBD>Keyboard</KBD><BR>

<CITE>Citation</CITE><BR>

<EM><CODE>Emphasized Code</CODE></EM><BR>

</BODY>

</HTML>

Strong

Keyboard

Citation

Emphasized Code

IMG

<img> (read as image) is used to display image in browser. The mandatory attribute in <img> is src (read as source). There are other option attributes also with images. These option attributes are width, height, align etc. Width is used to determine the width of image either in pixel or in percentage. In the same manner, height is used to determine the height of an image. Align attribute is used to determine the alignment of text after image attribute.

<html>

<body>

<h1> Image Example </h1>

</body>

</html>

You can provide path of the image in src attribute.

<html>

<body>

<h1> Image Example </h1>

</body>

</html>

Width and Height attributes in <img> tag.

<html>

<body>

<h1> Image Example </h1>

</body>

</html>

By providing percentage (relative) value of width, height the image can be displayed.

<html>

<body>

<h1> Image Example </h1>

</body>

</html>

Align attribute is used to align the text with image.

<html>

<body>

<img src=”Garden.jpg” align=”left” width=”150″ height=”150″ alt=”Garden”> This is a beautiful garden on the left!<br> This is a beautiful garden on the left!<br>

This is a beautiful garden on the left!<br>

You can see text wrap around it<br>

</body>

</html>

Below are the image of alignment of right and center.

The alt (read as alert) attribute is used to display text in case image is not visible in browser.

It is strongly recommended to use alt attribute when img is used.

<html>

<body>

<img src=”Gaden.jpg” align=”center” width=”150″ height=”150″ alt=”Garden”> This is a beautiful garden on the left!<br> This is a beautiful garden on the left!<br>

This is a beautiful garden on the left!<br>

You can see text wrap around it<br>

</body>

</html>

Anchor (Hyperlinks)

HTML provides hyperlinks to move from one page to another page. To use hyperlink <a> [read as anchor] tag is used. </a> is mandatory to close <a>. Href [read as Hyperlink reference] is a compulsory attribute for <a>.

<html>

<body>

<h1> This is hyperlink example.</h1>

click here to go to <a href=”page2.html”>Page 2</a>.

</body>

</html>

There is a page 2 exist. It has also provide hyperlink to move from page 2 to page 1.

<html>

<body>

click here to go to <a href=”page1.html”>Page 1</a>

</body>

</html>

As the mouse moves over Page 1, the cursor symbol has changed as finger up hand.

By default, color of hyperlink is blue. To change the color of hyperlink, <body> has link attribu. <body> has link, alink (for active link) and vlink (for visited link) attributes. Three different colors can be choose for each link. Active link is link when user press the mouse button, visited link display color when a particular page of hyperlink page is visited.

<html>

<h1> This is example for shows different colors for hyperlink.</h1> click here to go to <a href=”page2.html”>Page 2</a> </body>

</html>

An image can also be used as hyperlink.

<html>

<body>

<h1>Image as Hyperlink</h1>

This is text <a href=”page2.html”>Hyperlink</a>.

<br>

</body>

</html>

Title attribute is used as tool tip text.

BOOKMARK

Bookmark is an important concept in hyperlink. It works similar as manual bookmark works. It is known that bookmark help us to remember on which page we are when we reading the book. In the same way, bookmark in HTML allows user to navigate at within the same page or another page to particular location. In the below example there are 2 files to demonstrate the bookmark example. The file bookmarkmain has following code.

<html>

<head>

<title>Book Mark Example</title>

</head>

<body>

<a href=”Chapter1.html#topic2″>Chapter 1 Topic 2</a>

</body>

</html>

When user click on the link, he redirected to the file bookmred’s topic 2. The user does not required to scroll to move to topic to. As the user clicks the link, he redirects to the link.

On the bookmarked page, there is internal link is provided by name. So user can move to any particular section when he clicks a particular link.

TABLE

Table is used to show data in tabular format. The tabular format is necessary to improve the readability of data. For example, Time-table is look good when it is displayed in tabular format.

To create a table following tags are used.

<TABLE> for creating a table (start tag)

<CAPTION> for providing caption (title) to the table. It is optional tag.

<TR> for creating a table row

<TH> for creating a column header of a table

<TD> table data element

Let’ us create a table.

<HTML>

<BODY>

<TABLE>

<CAPTION>TABLE – 1</CAPTION>

<TR>

<TH>Heading1</TH>

<TH>Heading2</TH>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

The output of the table will be below.

Table tag has attributes. These attributes are Align, Border, CellSpacing, Cellpadding and Width.

Align attribute is used to provide alignment of the table. The values can be any one of the left, centre or right.

Border attribute is used to provide boarder width in pixels. The default border width is 0.

Cellspacing is used to set the space between adjacent cells.

Cellpadding is used to set the space of text within the cell and cell-border.

Width is used to set table width. Table width can be in pixel or in percentage of page.

To create a table with border add the border attributes within table tag.

<HTML>

<BODY>

<CAPTION>TABLE – 1</CAPTION>

<TR>

<TH>Heading1</TH>

<TH>Heading2</TH>

</TR>

<TR>

<TD>Row1 Col2</TD>\

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

<HTML>

<BODY>

<CAPTION>TABLE – 1</CAPTION>

<TR>

<TH>Heading1</TH>

<TH>Heading2</TH>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

<HTML>

<BODY>

<CAPTION>TABLE – 1</CAPTION>

<TR>

<TH>Heading1</TH>

<TH>Heading2</TH>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

<HTML>

<BODY>

<TABLE border=”2″ align=”center” width=”70%”> <CAPTION>TABLE – 1</CAPTION>

<TR>

<TH>Heading1</TH>

<TH>Heading2</TH>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

You can apply formatting attributes bgcolor with table also.

TR tag has align, valign anf bgcolor attaributes. Following example demonstrates

<HTML>

<BODY>

<TD>Apple</TD>

</TR>

</TR>

<TR ALIGN=”right” VALIGN=”bottom” BGCOLOR=”red”> <TD>Elephant</TD>

</TR>

</TABLE>

</BODY>

</HTML>

TD tag has colspan and rowspan attributes. The colspan attribute describe how many columns a cell occupies. In the same way, the rowspan column attribute describe how many rows a cell occupies.

<html>

<body>

<tr>

<th colspan=”2″>Admin</th>

</tr>

<tr>

<td>Anand</td>

<tr>

<td>Dhaval</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

In the same you can define row span.

<html>

<body>

<tr>

<th>Month</th>

<th>Points</th>

<th>Difference for two months</th>

</tr>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</table>

</body>

</html>

You can define rowspan and colspan simultaneously also.

you can view video on HTML

References:

Ivan Bayross, Web Enabled Commercial Application Development Using HTML/Javascript/DHTML/PHP , BPB Publications.
Steven Holzner, HTML Black book, Kogent Learning Solutions Inc.
Deidre Hayes, Sams teach yourself HTML 4 in 10 minutes,.
Ed Tittel , Mary Burmeister, HTML4 for Dummies, Wiley
Robert Sebesta, Programming the World Wide Web, Pearson Education Inc.
Deitel, Internet and World Wide Web How to Program, Pearson
Anne Boehm, Murach’s HTML, XHTML and CSS, Murachs
Elisabeth Robson, Eric Freeman, “Head First HTML and CSS “, O’Reilly
Thomas Powell, HTML and CSS The Complete Reference, McGrawHill Education India
John Duckett, Beginning HTML, XHTML, CSS and Java Script, Willy India
http://www.php.net
http://www.w3schools.com/
http://www.tutorialspoint.com/