HTML links and Table
HTML Table
To familiarize the students with
- Internal links
- External links
- In-page references
- use of tables in a web page
After this lab the students should be able to add linking information and tables in web pages.
Introduction
The crux of HTML is its capability to reference countless other pieces of information easily on the
internet. When you link to another page in your own web site, the link is known as an internal link. When you link to a different site, it is known as an external link. Similarly, we can link different section with in a page.
The element <a> is used to link another document. Anything between the opening <a> tag and the closing </a> tag becomes part of the link that users can click in a browser. To link another page, href attribute of opening tag of <a> is used. The value of the href attribute is the name of the file you are linking to.
Internal Link
An internal link can be created as
<a href=”page_path”> Text to click </a> Example: <a href=“abc.html”> Click here </a> External Link
An external link can be created as
<a href=”full web address of the page”> Text to click </a> Example: <a href=”https://www.google.com.pk“> Click here </a> In-page reference:
Can be created in two steps
Step 1: Mark locations
<a name=„‟LOCATION1”>
Step 2: link
<a href=“#LOCATION1”>……</a>
4. Example
Internal link:
<html>
<head>
<title> Internal Linking </title>
</head>
<body>
It is the first page. To go to the next page, please
<a href=”second.html”> click here</a>
</body>
</html>
External link:
<html>
<head>
<title> External Linking </title>
</head>
<body>
This is the home page. To go to the google page, please
<a href=”https://www.google.com.pk“> click here</a>
</body>
</html>
HTML TABLES:
HTML tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for “table data,” and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables,etc. In tables, different attributes can also be used like table border, cell padding, cell spacing etc. cell spacing is the pixel width between the individual data cells in the TABLE. (The thickness of the lines making the TABLE grid). The default is zero. If the BORDER is set at 0, the cell spacing lines will be invisible. Cell padding is the pixel space between the cell contents and the cell border.
Examples Simple Table:
<table border=”1″>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Table Border:
<table border=”1″>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Cell spacing
<table border=”1″ cellspacing=”5″>
<tr>
<td>some text</td>
<td>some text</td>
</tr><tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>
Cell Padding
<table border=”1″ cellpadding=”10″>
<tr>
<td>some text</td>
<td>some text</td>
</tr><tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>
Lab Activities:
Activity 1
Use the page you created in the first lab and add the following linking information
- Create links to home, departments, admission and exams pages of CIIT Islamabad campus
Solution:
<html>
<head>
<title>Home</title>
</head>
<body bgcolor=”#98E0F0″>
<h1><font color=”#1322D6″> COMSATS Institute of Information Technology </font>
</h1>
<hr width=”100%” color=”#030303″ size=”4″ />
<a href=”home.html”> click here</a>
<a href=”departments.html”> click here</a>
<a href=”admissions.html”> click here</a>
<a href=”exam page.html”> click here</a>
<Center><p><h2><b><pre> Home Department Admissions Academics Exams</pre></b></h2> </p> </center>
<hr width=”100%” color=”#030303″ size=”4″ />
<br />
<p> <h2><font color=”#1322D6″> Historic Perspective:</font> </h2> </p>
<a href=”lol.html”> click here </a><!– Write your comments here –>
<p>WWF’s goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body>
</html>
Home Activities:
Activity 2:
- Create in-page reference to the list created in the body and marks the locations accordingly
- Add tables to department and admission
Use tables to create make a page layout as given below
