Web Engineering Hyperlinks Tables Frames Lecture 04 1
Web Engineering Hyperlinks, Tables, Frames Lecture 04 1
URL • URL stands for Uniform Resource Locator. http: //www. bw. org: 80/object? query#location Scheme Host Port Path Query Fragment String Identifier • Scheme: specifies the protocol being used most URL for web pages will be either http or https. • Host: is the IP address of the host server.
Relative URL and Absolute URL • Filename. html • This is called Relative URL. In this case web browser will search for this page in the same directory. • Relative URLs are URL, don’t specify a complete host name path. Relative URL are great way to refer objects we use in same file space. • http: //www. mywebsite. com/myfile. html • This is called Absolute URL, as it contains domain name with it and complete path.
Hyper Link • In HTML, you create a hyper link with Anchor tag. • Example: <body> <p> Here is a link to <a href=“http: //www. uol. edu. pk/” target=“_blank”>my home page</a>. </p> </body>
USING IMAGE AS LINK • It is very common to use images as links. • Example: <p> Here is a link to <a href=“http: //sites. google. com/site/cs 1113 web prog/”><img src=“images/paper. png” border=“ 0” /></a>. </p> 5
<head> <title></title> <style> a img { border-style: none; } </style> </head> <body> <p> Here is a link to <a href=“http: //sites. google. com/site/cs 1113 webprog/”> <img src=“images/paper. png” /></a>. </p> </body> 6
Table <TABLE> (made up of rows) Row <TR> (made up of data cells) Heading Data Cell <TH> (Can contain paragraphs, images, lists, forms, tables) Data Cell <TD> (Can contain paragraphs, images, lists, forms, tables) 7
TABLES • Tables are very useful feature in HTML. • Example: <h 1>HTML Tables</h 1> <table> <caption>My Favorite Albums</caption> <tr> <th> Title </th> <th> Artist </th> <th> Comment </th> </tr> <td> Electric Lady Land </td> <td> Jimi Hendrix </td> <td> Revolutionary </td> </tr> </table> 8
<tbody> <tr> <td></td> … </tr> </tbody> </table> 9
TABLE Attributes • CELLPADING – Determines the distance between the border of a cell and the contents of the cell – Example: <TABLE CELLPADDING = “ 3”> • CELLSPACING – Determines the empty spacing between the borders of two adjacent cells – Example: <TABLE CELLSPACING = “ 1”> 10
<TH> & <TD> Attributes • COLSPAN – No. of rows the current cell should extend itself downward – Example: <TD COLSPAN = “ 2”> • ROWSPAN – The number of columns the current cell should extend itself – Example: <TD ROWSPAN = “ 5”> 11
Expenses Year Quarter Quetta Dubai 1 1, 900 8, 650 2 2, 230 8, 650 2001 3 4, 000 8, 650 4 2, 200 8, 650 1 7, 780 8, 650 2 8, 670 8, 650 2002 3 9, 870 8, 650 4 9, 900 8, 650 Income Quetta Dubai 9, 000 7, 780 8, 500 8, 670 9, 900 9, 870 9, 800 9, 900 7, 780 9, 000 8, 670 8, 500 9, 870 9, 900 9, 800 12
FRAME and i. FRAME Frame is a HTML tag that is used to divide the web page into various frames/windows. Iframe as <iframe> is also a tag used in HTML but it specifies an inline frame which means it is used to embed some other document within the current HTML document. 13
FRAME src <FRAMESET cols=“*, 75%” frameborder=“ 0” > <FRAME src=“left. html” scrolling=“No” name=“left. Frame” > 14
EXAMPLE OF A FRAME 15
Code for Frame <FRAMESET cols="*, 75%"> <FRAME src="frames/f 1. html" /> <FRAMESET rows="100, *"> <FRAME src="frames/f 2. html" /> <FRAME src="frames/f 3. html" /> </FRAMESET> 16
i. FRAME <i. FRAME id=“frame 1” name=“frame 1” src=“page. html” width=“ 330” height=“ 370” border=“ 2” ></i. FRAME> 17
- Slides: 17