Indian Institute of Technology Kharagpur HTML Part III Prof. Indranil Sen Gupta Dept. of Computer Science & Engg. I.I.T. Kharagpur, INDIA Lecture 15: HTML Part III On completion, the student will be able to: 1. Explain the various tags and attributes required to specify a table. 2. Demonstrate the creation of tables with varied degrees of complexity. 3. Explain and demonstrate how frames can be used to make a web page look more attractive. 4. CSS 1
HTML Tables Introduction Tables are made up of cells, arranged into rows. Use tags <TABLE>, <TR>, <TD>. An example: <table> <tr> <td> Good </td> <td> Bad </td> </tr> <tr> <td> Cute </td> <td> Ugly </td> </tr> </table> 2
Good Bad Cute Ugly The Table Tags <TABLE> </TABLE> Defines the beginning and the end of a table. Can have several attributes: bgcolor = #rrggbb or color name rules = all cols rows none border = number height = number, percentage 3
<TR>.. </TR> Defines a row of cells within a table. Can have several attributes: bgcolor = #rrggbb or color name align = left center right justify <CAPTION>.. </CAPTION> Provides a caption for the table. Must immediately follow the table tag, and precede all other tags. <TD>.. </TD> Defines a table data cell. A table cell can contain any content, like an image, or even another table. Can have several attributes: bgcolor = #rrggbb or color name colspan = number == > specifies the number of columns the currect cell should span (default is 1). rowspan = number == > similar 4
<TH>.. </TH> Defines a table header cell. Browsers generally display the contents of the header cells in bold, and centered. Same attributes as the <TD> tag. Table Example 1 <table> <tr> <td colspan=2> Hello </td> </tr> <tr> <td> Good </td> <td> Day </td> </tr> </table> Hello Good Day 5
Table Example 2 <table> <tr> <td rowspan=2> Hello </td> <td> Good </td> </tr> <tr> <td> Day </td> </tr> </table> Hello Good Day Table Example 3 <table border=1> <caption> My Table </caption> <tr> <th> Name </th> <th> Marks </th> </tr> <tr> <td> Anil </td> <td> 72 </td> </tr> <tr> <td> Kamal </td> <td> 58 </td> </tr> </table> Name Anil Kamal Marks 72 58 6
HTML Frames Introduction What are frames? A method for dividing the browser window into smaller subwindows. Each subwindow displaying a different HTML document. How does a page with frame look like? NEXT SLIDE 7
A Web Page that use Frames Merits and Demerits Merits: Allow parts of the page to remain stationary while other parts scroll. They can unify resources that reside on separate web servers. There is a <noframe> tag, using which it is possible to add alternative content for browsers that do not support frames. 8
Demerits: All browsers do not support frames. Documents nested in a frame is more difficult to bookmark. Load on the server can be significantly increased, if there are a large number of frames in the page. Frames are very difficult to handle for search engines. The Frame Tags <FRAMESET>.. </FRAMESET> Defines a collection of frames or other framesets. Attributes: cols = list of lengths (number, %, or *) rows = list of lengths (number, %, or *) Establishes the number and sizes of columns (vertical frames) or rows (horizontal frames) in a frameset. In number of pixels, percentage of total area, or relative values (*) based on available space. 9
<FRAME> Defines a single frame within a frameset. Attributes: frameborder = 1 0 src = url scrolling = yes no auto marginwidth = number marginheight = number name = text <NOFRAMES> </NOFRAMES> Specifies the contents to be displayed by browsers that cannot display frames. Ignored by browsers that support frames. 10
Frame Example 1 <html> <head><title> A document with frames </title> </head> <frameset cols = *,* > <frame src = left.htm > <frame src = right.htm > </frameset> <noframes> Browser does not support frames. </noframes> </html> Frame Example 2 <html> <head><title> Another one with frames </title> </head> <frameset cols = 100,2*,* > <frame src = left.htm > <frame src = right.htm > </frameset> <noframes> Browser does not support frames. </noframes> </html> 11
Frame Example 3 <html> <head> <title> Nested frames </title> </head> <frameset cols = 25%, * <frame src = one.htm > <frameset rows = 100,150,100 > <frame src = two.htm > <frame src = three.htm > <frameset cols = *,* > <frame src = four.htm > <frame src = five.htm > </frameset> </frameset> </frameset> </html> Linking to a Framed Document When a hyperlink is clicked, by default, the new page is loaded into the same frame. We can load the linked page into a new frame also. M E N U 12
Assign a name to the targeted frame. <frame src = somepage.htm name = abc > Specify this frame in a hyperlink as follows: <a href = newpage.htm target= abc > </a> The document newpage.htm will load into the frame names abc. Cascaded Style Sheets (CSS) 13
Introduction Style sheets in HTML allows us to specify typography styles and spacing instructions for elements on a page. Key concept: How to define rules? How to attach those rules to one or more HTML documents? How to specify a rule? Some examples: H2 {color: blue} P {font-size: 12pt; font-family: Verdana, sans-serif; } 14
Inline Styles <H2 style = color: blue > This will appear as blue. </H2> <P style = font-size: 12pt; font-family: Verdana, sans-serif > This paragraph will be set as per the specified Style. </P> Embedded Style Sheets <html><head> <style type = text/css > <! - - H2 {color: blue} P {font-size: 12pt; font-family: Verdana, sans-serif; } --> </style> 15
<title> Example of using style sheets </title> </head>.. </html> External Style Sheets The most powerful way. Collect all styles in a separate text document. Creates links to that document. <head> <link rel = STYLESHEET href = /pathname/mystyle.css type = text/css > </head> 16
There is more. We have just given a brief introduction to CSS. There are many different ways to specify properties. To resolve conflicts in style definitions, cascading rules are defined. Specify which definition is to be given priority. 17
SOLUTIONS TO QUIZ QUESTIONS ON LECTURE 14 Quiz Solutions on Lecture 14 1. What are the tags used for unnumbered lists? <UL> </UL>, and <LI> 2. What are the tags used for ordered lists? <OL> </OL>, and <LI> 3. How can you change the bullet style in an unnumbered list? By specifying an attribute along with the <UL> or <LI> tags. The possible values are disc, circle, and square. 18
Quiz Solutions on Lecture 14 4. Show hyperlink definitions that provide link to a pdf file, and a jpeg image. <a HREF =./slides/new/chap5.pdf > Ch5 </a> <a HREF = images/rose.jpg > Green Rose </a> 5. Can relative URL s be used to provide link to a different web site? No. When referring to a document located on some other server, the name of the server must be specified. In other words, absolute URL must be given. Quiz Solutions on Lecture 14 6. How can you provide a hyperlink to a section in the same document? Step 1: Specify a named section in the document. <a name= tennis > <h2>about tennis</h2> </a> Step 2: Provide link to the named section. <a href= #tennis > Information on Tennis </a> 19
Quiz Solutions on Lecture 14 7. How can you provide a hyperlink to a section in a document located on some other web server? Provide a link to the named section using an absolute URL. <a href= http://www.sunny.com/xyz.html #tennis > Information on Tennis </a> Quiz Solutions on Lecture 14 8. What do the HEIGHT and WIDTH attributes in the IMG tag specify? They specify the height and width of the image (in pixels) in the browser window. The browser can resize the image using these values. 9. How can you provide an image hyperlink? An example is shown below: <a HREF = india.html > <img src =./images/ india.gif > </a> 20
QUIZ QUESTIONS ON LECTURE 15 Quiz Questions on Lecture 15 1. What are the HTML tags associated with table definitions? 2. How do you specify table entries spanning multiple columns? 3. What is the purpose of the <FRAMESET> tag> 4. What is the purpose of the <NOFRAMES> tag? 5. What does * signify when specifying the width/height of a frame? 6. What does % signify when specifying the width/height of a frame? 21
Quiz Questions on Lecture 15 7. What is inline style for specifying style sheets? Give an example. 8. What is external style for specifying style sheets? 22