Download presentation
Presentation is loading. Please wait.
1
Web Engineering Hyperlinks, Tables, Frames Lecture 04
2
URL URL stands for Uniform Resource Locator.
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. Scheme Host Port Path Query String Fragment Identifier
3
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. This is called Absolute URL, as it contains domain name with it and complete path.
4
Hyper Link In HTML, you create a hyper link with Anchor tag. Example:
<body> <p> Here is a link to <a href=“ target=“_blank”>my home page</a>. </p> </body>
5
USING IMAGE AS LINK It is very common to use images as links. Example:
Here is a link to <a href=“ src=“images/paper.png” border=“0” /></a>. </p>
6
<head> <title></title> <style> a img { border-style: none; } </style> </head> <body> <p> Here is a link to <a href=“ <img src=“images/paper.png” /></a>. </p> </body>
7
(Can contain paragraphs, images, lists, forms, tables)
(made up of rows) <TR> Row (made up of data cells) <TH> Heading Data Cell (Can contain paragraphs, images, lists, forms, tables) <TD> Data Cell
8
TABLES Tables are very useful feature in HTML. Example:
<h1>HTML Tables</h1> <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> </table>
9
<tbody> <tr> <td></td> … </tr> </tbody> </table>
10
TABLE Attributes CELLPADING CELLSPACING
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”>
11
<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”>
12
Year Quarter Expenses Income Quetta Dubai 2001 1 1,900 8,650 9,000 7,780 2 2,230 8,500 8,670 3 4,000 9,900 9,870 4 2,200 9,800 2002
13
FRAME and iFRAME 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.
14
FRAME src <FRAMESET cols=“*,75%” frameborder=“0” >
<FRAME src=“left.html” scrolling=“No” name=“leftFrame” >
15
EXAMPLE OF A FRAME
16
Code for Frame <FRAMESET cols="*, 75%">
<FRAME src="frames/f1.html" /> <FRAMESET rows="100, *"> <FRAME src="frames/f2.html" /> <FRAME src="frames/f3.html" /> </FRAMESET>
17
iFRAME <iFRAME id=“frame1” name=“frame1” src=“page.html”
width=“330” height=“370” border=“2” ></iFRAME>
Similar presentations
![>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.](/24/7400148/big_thumb.jpg ">> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.>")
