In this lab, we add some spice to Web pages by focusing on links, color, images and tables.
The <a> tag is used to specify a hyperlink. A hyperlink is a graphic or a piece of text in a Web page that can connect a reader to another Web page. There are two things that you must specify in order to create a link:
The <a> tag is used to bracket the words that should come out underlined in blue. The source URL about the file being linked to is embedded inside the <a> tag .
<a href= "http://www.yahoo.com "> link to Yahoo! </a>
produces
There are 5 color elements of a Web page:
Any or all of the above can be changed in the <body> tag.
Example: <body bgcolor="yellow" text="red"
link="green" vlink="pink" alink="white">
See how the above looks in a webpage here.
In order to include a picture on a Web page, you first have to have a file containing a picture. The picture should be in .gif, .jpg (or .jpeg), or .png format only (the file extension may be in upper case letters, e.g. .GIF.) Other formats will not work with all browsers. For example, AOL supports .bmp and .art formats, but they may NOT work with other browsers.
There are two ways of including pictures on a Web page:
The image files must be in the same folder as the Web page or no image appears.
Sometimes a webpage needs information arranged formally into a table. HTML provides a way to do this organization by using the <table> and </table> tags. The individual rows of the table are designated by the <tr> and </tr> tags. The elements within the row are indicated using the <td> and </td> tags. Consider the example below listing courses in the WEBuilding:
<table> <tr> <td>CORC 1312 </td> <td>Room 129F </td></tr> <tr> <td>CISC 1050 </td> <td>Room 105F </td></tr> <tr> <td>CISC 1050 </td> <td>Room 106F </td></tr> <tr> <td>CISC 3110 </td> <td>Room 130F </td></tr> </table>When it is interpreted, it appears as shown here. The table has lined- up columns but no borders.
To create a table with a border, modify the <table> tag; for example, <table border="1">, adds lines around the table and between the rows. This example displays the changed table. The value "1" indicates the width of the line.
Images can be arranged in a table, too. However, you need to use the <img src="filename.gif"/> tag. Here are three images about BC shown in a one row table:
<table> <tr> <td><img src="txtbksavings_icon.jpg"/> </td> <td><img src="weare_growing.jpg"/> </td> <td><img src="sustainability.gif"/> </td> </tr> </table>This table displayed in a webpage looks like this.