{"id":50,"date":"2018-07-12T06:54:11","date_gmt":"2018-07-12T06:54:11","guid":{"rendered":"http:\/\/itp9.epgpbooks.inflibnet.ac.in\/?post_type=chapter&p=50"},"modified":"2018-12-07T09:08:01","modified_gmt":"2018-12-07T09:08:01","slug":"html","status":"publish","type":"chapter","link":"https:\/\/ebooks.inflibnet.ac.in\/itp9\/chapter\/html\/","title":{"rendered":"HTML"},"content":{"raw":"
\"epgp<\/a>\r\n<\/span><\/div>\r\n
\r\n\r\n \r\n\r\n \r\n\r\n \r\n

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.<\/p>\r\n \r\n

<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.<\/p>\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\nThis is <b><i>bold.<\/i><\/b> exmaple.\r\n\r\n<br>\r\n\r\nThis is <i>italic.<\/i> example.\r\n\r\n<br><br><br>\r\n\r\nThis is <u>Underline<\/u> example.\r\n\r\n<hr>\r\n\r\n<p> This is paragraph.\r\n\r\n<p><p><p> Does it make three line blank?\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n\r\n \r\n

Like physical character style there is logical style also. The logical style character set includes keyboard text, emphasized character etc.<\/p>\r\n \r\n\r\n<HTML>\r\n\r\n<BODY>\r\n\r\n<STRONG>Strong<\/STRONG><BR>\r\n\r\n<KBD>Keyboard<\/KBD><BR>\r\n\r\n<CITE>Citation<\/CITE><BR>\r\n\r\n<EM><CODE>Emphasized Code<\/CODE><\/EM><BR>\r\n\r\n<\/BODY>\r\n\r\n<\/HTML>\r\n\r\n \r\n\r\nStrong<\/strong>\r\n\r\nKeyboard\r\n\r\nCitation<\/em><\/strong>\r\n\r\nEmphasized Code<\/em>\r\n\r\n \r\n\r\nIMG<\/strong>\r\n\r\n \r\n\r\n<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.<\/span>\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 \u00a0 <html>\r\n\r\n<body>\r\n\r\n<h1> Image Example <\/h1>\r\n\r\n<img src=\"Garden.jpg\">\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n\r\nYou can provide path of the image in src attribute.\r\n\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<h1> Image Example <\/h1>\r\n\r\n<img src=\"Images\/Garden.jpg\">\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n<\/div>\r\n
\r\n\r\n\"\"\r\n\r\n \r\n\r\nWidth and Height attributes in <img> tag.\r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<h1> Image Example <\/h1>\r\n\r\n<img src=\"Garden.jpg\" width=\"100\" height=\"100\">\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n\r\nBy providing percentage (relative) value of width, height the image can be displayed.<\/span>\r\n\r\n<\/div>\r\n
\r\n\r\n\u00a0 \u00a0 <html>\r\n\r\n<body>\r\n\r\n<h1> Image Example <\/h1>\r\n\r\n<img src=\"Garden.jpg\" width=\"60%\" height=\"70%\">\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n\r\nAlign attribute is used to align the text with image.\r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<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>\r\n\r\nThis is a beautiful garden on the left!<br>\r\n\r\nThis is a beautiful garden on the left!<br>\r\n\r\nThis is a beautiful garden on the left!<br>\r\n\r\nThis is a beautiful garden on the left!<br>\r\n\r\nThis is a beautiful garden on the left!<br>\r\n\r\nThis is a beautiful garden on the left!<br>\r\n\r\nThis is a beautiful garden on the left!<br>\r\n\r\nThis is a beautiful garden on the left!<br>\r\n\r\nYou can see text wrap around it<br>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n<\/div>\r\n
\r\n\r\n\"\"\r\n

Below are the image of alignment of right and center.<\/p>\r\n \r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n\r\nThe alt (read as alert) attribute is used to display text in case image is not visible in browser.<\/span>\r\n\r\n \r\n\r\nIt is strongly recommended to use alt attribute when img is used.<\/span>\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 \u00a0<html>\r\n\r\n<body>\r\n\r\n<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>\r\n\r\nThis is a beautiful garden on the left!<br>\r\n\r\nThis is a beautiful garden on the left!<br>\r\n\r\nThis is a beautiful garden on the left!<br>\r\n\r\nThis is a beautiful garden on the left!<br>\r\n\r\nThis is a beautiful garden on the left!<br>\r\n\r\nThis is a beautiful garden on the left!<br>\r\n\r\nThis is a beautiful garden on the left!<br>\r\n\r\nThis is a beautiful garden on the left!<br>\r\n\r\nYou can see text wrap around it<br>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n\"\"\r\n\r\n<\/div>\r\n
\r\n\r\n \r\n\r\nAnchor (Hyperlinks)<\/strong>\r\n\r\n \r\n

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>.<\/p>\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<h1> This is hyperlink example.<\/h1>\r\n\r\nclick here to go to <a href=\"page2.html\">Page 2<\/a>.\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n\r\nThere is a page 2 exist. It has also provide hyperlink to move from page 2 to page 1.<\/span>\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 \u00a0 <html>\r\n\r\n<body>\r\n\r\n<h1>This is page 2<\/h1>\r\n\r\nclick here to go to <a href=\"page1.html\">Page 1<\/a>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n \r\n\r\n\"\"\r\n\r\n<\/div>\r\n \r\n
\r\n\r\n \r\n\r\nAs the mouse moves over Page 1, the cursor symbol has changed as finger up hand.\r\n\r\n \r\n

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.<\/p>\r\n \r\n\r\n<html>\r\n\r\n<body link=\"Red\" alink=\"Blue\" vlink=\"Green\">\r\n\r\n<h1> This is example for shows different colors for hyperlink.<\/h1> click here to go to <a href=\"page2.html\">Page 2<\/a> <\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n\r\nAn image can also be used as hyperlink.\r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<h1>Image as Hyperlink<\/h1>\r\n\r\nThis is text <a href=\"page2.html\">Hyperlink<\/a>.\r\n\r\n<br>\r\n\r\n<a href=\"page2.html\" alt=\"garden\" title=\"Click me to go to Page 2\"> <img src=\"Garden.jpg\" height=\"100\" width=\"100\"> <\/a>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\nTitle attribute is used as tool tip text.\r\n\r\n<\/div>\r\n\"\"\r\n

\r\n\r\n \r\n\r\nBOOKMARK<\/strong>\r\n\r\n \r\n

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.<\/p>\r\n \r\n\r\n<html>\r\n\r\n<head>\r\n\r\n<title>Book Mark Example<\/title>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<h1> Home <\/h1>\r\n\r\n<br><br>\r\n\r\n<a href=\"Chapter1.html#topic2\">Chapter 1 Topic 2<\/a>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n

When user click on the link, he redirected to the file bookmred\u2019s 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.<\/p>\r\n\"\"\r\n\r\nOn 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.<\/span>\r\n\r\n<\/div>\r\n

\r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n\r\n \r\n\r\nTABLE<\/strong>\r\n\r\n<\/div>\r\n
\r\n\r\n \r\n

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.<\/p>\r\n \r\n\r\nTo create a table following tags are used.\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 \u00a0 \u00a0<TABLE>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 for creating a table (start tag)\r\n\r\n<CAPTION>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0for providing caption (title) to the table. It is optional tag.\r\n\r\n<TR>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0for creating a table row\r\n\r\n<TH>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0for creating a column header of a table\r\n\r\n<TD>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0table data element\r\n\r\n \r\n\r\nLet\u2019 us create a table.<\/span>\r\n\r\n<\/div>\r\n
\r\n\r\n\u00a0 \u00a0 <HTML>\r\n\r\n<BODY>\r\n\r\n<TABLE>\r\n\r\n<CAPTION>TABLE - 1<\/CAPTION>\r\n\r\n<TR>\r\n\r\n<TH>Heading1<\/TH>\r\n\r\n<TH>Heading2<\/TH>\r\n\r\n<\/TR>\r\n\r\n<TR>\r\n\r\n<TD>Row1 Col1<\/TD>\r\n\r\n\u00a0<TD>Row1 Col2<\/TD><\/span>\r\n\r\n<\/TR><\/span>\r\n\r\n<TR><\/span>\r\n\r\n<TD>Row2 Col1<\/TD><\/span>\r\n\r\n<TD>Row2 Col2<\/TD><\/span>\r\n\r\n<\/TR><\/span>\r\n\r\n<TR><\/span>\r\n\r\n<TD>Row3 Col1<\/TD><\/span>\r\n\r\n<TD>Row3 Col2<\/TD><\/span>\r\n\r\n<\/TR><\/span>\r\n\r\n<\/TABLE><\/span>\r\n\r\n<\/BODY><\/span>\r\n\r\n<\/HTML><\/span>\r\n\r\n<\/div>\r\n
\r\n\r\nThe output of the table will be below.\r\n\r\n\"\"\r\n\r\n \r\n

Table tag has attributes. These attributes are Align, Border, CellSpacing, Cellpadding and Width.<\/p>\r\n \r\n

Align attribute is used to provide alignment of the table. The values can be any one of the left, centre or right.<\/p>\r\n \r\n\r\nBorder attribute is used to provide boarder width in pixels. The default border width is 0.\r\n\r\n \r\n\r\nCellspacing is used to set the space between adjacent cells.\r\n\r\n \r\n\r\nCellpadding is used to set the space of text within the cell and cell-border.\r\n\r\n \r\n\r\nWidth is used to set table width. Table width can be in pixel or in percentage of page.\r\n\r\n \r\n\r\nTo create a table with border add the border attributes within table tag.\r\n\r\n \r\n\r\n<HTML>\r\n\r\n<BODY>\r\n\r\n<TABLE border=\"2\">\r\n\r\n<CAPTION>TABLE - 1<\/CAPTION>\r\n\r\n<TR>\r\n\r\n<TH>Heading1<\/TH>\r\n\r\n<TH>Heading2<\/TH>\r\n\r\n<\/TR>\r\n\r\n<TR>\r\n\r\n<TD>Row1 Col1<\/TD>\r\n\r\n<TD>Row1 Col2<\/TD>\\\r\n\r\n<\/TR><\/span>\r\n\r\n<TR><\/span>\r\n\r\n<TD>Row2 Col1<\/TD><\/span>\r\n\r\n<TD>Row2 Col2<\/TD><\/span>\r\n\r\n<\/TR><\/span>\r\n\r\n<TR><\/span>\r\n\r\n<TD>Row3 Col1<\/TD><\/span>\r\n\r\n<TD>Row3 Col2<\/TD><\/span>\r\n\r\n<\/TR><\/span>\r\n\r\n<\/TABLE><\/span>\r\n\r\n<\/BODY><\/span>\r\n\r\n<\/HTML><\/span>\r\n\r\n<\/div>\r\n

\r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n\r\n \r\n\r\n<HTML>\r\n\r\n<BODY>\r\n\r\n<TABLE border=\"2\" cellspacing=\"5\">\r\n\r\n<CAPTION>TABLE - 1<\/CAPTION>\r\n\r\n<TR>\r\n\r\n<TH>Heading1<\/TH>\r\n\r\n<TH>Heading2<\/TH>\r\n\r\n<\/TR>\r\n\r\n<TR>\r\n\r\n<TD>Row1 Col1<\/TD>\r\n\r\n<TD>Row1 Col2<\/TD>\r\n\r\n<\/TR>\r\n\r\n<TR>\r\n\r\n<TD>Row2 Col1<\/TD>\r\n\r\n<TD>Row2 Col2<\/TD>\r\n\r\n<\/TR>\r\n\r\n<TR>\r\n\r\n<TD>Row3 Col1<\/TD>\r\n\r\n<TD>Row3 Col2<\/TD>\r\n\r\n<\/TR>\r\n\r\n<\/TABLE>\r\n\r\n<\/BODY>\r\n\r\n<\/HTML>\r\n\r\n \r\n\r\n<\/div>\r\n\"\"<\/strong>\r\n
\r\n\r\n \r\n\r\n<HTML>\r\n\r\n<BODY>\r\n\r\n<TABLE border=\"2\" cellpadding=\"5\">\r\n\r\n<CAPTION>TABLE - 1<\/CAPTION>\r\n\r\n<TR>\r\n\r\n<TH>Heading1<\/TH>\r\n\r\n<TH>Heading2<\/TH>\r\n\r\n<\/TR>\r\n\r\n<TR>\r\n\r\n<TD>Row1 Col1<\/TD>\r\n\r\n<TD>Row1 Col2<\/TD>\r\n\r\n<\/TR>\r\n\r\n<TR>\r\n\r\n<TD>Row2 Col1<\/TD>\r\n\r\n<TD>Row2 Col2<\/TD>\r\n\r\n<\/TR>\r\n\r\n<TR>\r\n\r\n<TD>Row3 Col1<\/TD>\r\n\r\n<TD>Row3 Col2<\/TD>\r\n\r\n<\/TR>\r\n\r\n<\/TABLE>\r\n\r\n<\/BODY>\r\n\r\n<\/HTML>\r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n\r\n<HTML>\r\n\r\n<BODY>\r\n\r\n<TABLE border=\"2\" align=\"center\" width=\"70%\"> <CAPTION>TABLE - 1<\/CAPTION>\r\n\r\n<TR>\r\n\r\n<TH>Heading1<\/TH><\/span>\r\n\r\n<TH>Heading2<\/TH><\/span>\r\n\r\n<\/TR><\/span>\r\n\r\n<TR><\/span>\r\n\r\n<TD>Row1 Col1<\/TD><\/span>\r\n\r\n<TD>Row1 Col2<\/TD><\/span>\r\n\r\n<\/TR><\/span>\r\n\r\n<TR><\/span>\r\n\r\n<TD>Row2 Col1<\/TD><\/span>\r\n\r\n<TD>Row2 Col2<\/TD><\/span>\r\n\r\n<\/TR><\/span>\r\n\r\n<TR><\/span>\r\n\r\n<TD>Row3 Col1<\/TD><\/span>\r\n\r\n<TD>Row3 Col2<\/TD><\/span>\r\n\r\n<\/TR><\/span>\r\n\r\n<\/TABLE><\/span>\r\n\r\n<\/BODY><\/span>\r\n\r\n<\/HTML><\/span>\r\n\r\n<\/div>\r\n
\r\n\r\n\"\"\r\n\r\n \r\n\r\nYou can apply formatting attributes bgcolor with table also.\r\n\r\nTR tag has align, valign anf bgcolor attaributes. Following example demonstrates\r\n\r\n \r\n\r\n<HTML>\r\n\r\n<BODY>\r\n\r\n<TABLE ALIGN=\"center\" WIDTH=\"400\" HEIGHT=\"300\"> <TR ALIGN=\"left\" VALIGN=\"top\" BGCOLOR=\"blue\">\r\n\r\n<TD>Apple<\/TD>\r\n\r\n<TD>Ball<\/TD>\r\n\r\n<\/TR>\r\n\r\n<TR ALIGN=\"center\" VALIGN=\"middle\" BGCOLOR=\"green\"> <TD>Cat<\/TD>\r\n\r\n<TD>Dog<\/TD>\r\n\r\n<\/TR>\r\n\r\n<TR ALIGN=\"right\" VALIGN=\"bottom\" BGCOLOR=\"red\"> <TD>Elephant<\/TD>\r\n\r\n<TD>Fan<\/TD>\r\n\r\n<\/TR>\r\n\r\n<\/TABLE>\r\n\r\n<\/BODY>\r\n\r\n<\/HTML>\r\n\r\n<\/div>\r\n\"\"\r\n
\r\n\r\n \r\n

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.<\/p>\r\n \r\n\r\n<html>\r\n\r\n<body>\r\n\r\n<table border=\"2\">\r\n\r\n<tr>\r\n\r\n<th colspan=\"2\">Admin<\/th>\r\n\r\n<\/tr>\r\n\r\n<tr>\r\n\r\n<td>Anand<\/td>\r\n\r\n<td>222<\/td>\r\n\r\n<tr>\r\n\r\n<td>Dhaval<\/td>\r\n\r\n<td>229<\/td>\r\n\r\n<\/tr>\r\n\r\n<tr>\r\n\r\n<\/tr>\r\n\r\n<\/table>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n\"\"\r\n\r\n \r\n\r\nIn the same you can define row span.\r\n\r\n<\/div>\r\n<html>\r\n\r\n<body>\r\n\r\n<table border=\"2\">\r\n\r\n<tr>\r\n\r\n<th>Month<\/th>\r\n\r\n<th>Points<\/th>\r\n\r\n<th>Difference for two months<\/th>\r\n\r\n<\/tr>\r\n\r\n<tr>\r\n\r\n<td>January<\/td>\r\n\r\n<td>45<\/td>\r\n\r\n<td rowspan=\"2\">15<\/td>\r\n\r\n<\/tr>\r\n\r\n<tr>\r\n\r\n<td>February<\/td>\r\n\r\n<td>60<\/td>\r\n\r\n<\/tr>\r\n\r\n<\/table>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n \r\n\r\n\"\"\r\n\r\n \r\n\r\nYou can define rowspan and colspan simultaneously also.\r\n\r\n\r\n\r\n\r\n
you can view video on HTML<\/strong><\/td>\r\n\"\"<\/a><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n
\u00a0 \u00a0 \u00a0References:<\/strong><\/div>\r\n
<\/div>\r\n