Department of Computer ScienceCS118-Web Engineering (D, E ) 2019 Sir Syed University of

Engineering & Technology

LAB SESSION 2

Object: To study html links, images and tables.

Links in HTML (Hyperlinks):By clicking the links you will jump from one document to another.

o Anchor <a> tag is used to define the link.o href attribute specifies the destination address (https://www.google.com) of the

link.o When linking to an external document, it is essential to provide http:// otherwise

the link will not work.Syntax:

<a href="url"> Content </a>Example:

<a href="http://www.ssuet.edu.pk">Sir Syed University of Engineering & Technology Website </a>

Attribute DescriptionHref Specifies the destination of a link.

Title Allows an advisory title that explains the resource in more detail.

Target Attribute:

Attribute Description_blank Opens the linked document in a new window or tab

_self Opens the linked document in the same window/tab as it was clicked (this is default)

_top Opens the linked document in the full body of the window

_parent Opens the linked document in the parent frame

Syntax:<a href="url" target="">Content</a>

Prepared by ramsha sohail 1

Department of Computer ScienceCS118-Web Engineering (D, E ) 2019 Sir Syed University of

Engineering & Technology

Images in HTML:We can insert any image in web page by <img> tag.The <img> tag is an empty tag and it has no closing tag.Syntax:

<img src="URL " alt="name”>o The SRC acts like a pointer. It shows the IMG tag where to find the image for

display. If the image is located in a sub-directory (or sub-folder), the path MUST be stated in the reference field before the image name.

o Any word in an SRC path that ends with a forward slash / is considered a sub-directory or sub-folder of the current directory where the HTML file is located. When the SRC gets to the end word (no forward slash after it), it knows this is a file to display.

Attributes with <img> tag:

Following attributes can be used with <img> tag.Attribute Description

Src The only required attribute. It specifies the URL of the graphic file you want to display. As with any URL, the path must be relative to the HTML file.

Alt Displays an alternate string of text instead of an image.

Title A string of text that provides information about the imageWidth Specifies the width of image in pixels.

Height Specifies the height of image in pixels.

Types of Path:There are two types of link:

1. Absolute Path

Absolute paths always include the complete path name of the file present in any sub-folder.For example:

o http://www.mysite.como http://www.mysite.com/graphics/image.png

Prepared by ramsha sohail 2

Department of Computer ScienceCS118-Web Engineering (D, E ) 2019 Sir Syed University of

Engineering & Technology

o http://www.mysite.com/help/articles/how-do-i-set-up-a-webpage.html

2. Relative Path

When a user clicks a relative link, the browser takes them to that location on the current site. For that reason, you can only use relative links when linking to pages or files within your site, and you must use absolute links if you're linking to a location on another website.

o images\images.jpgo index.htmlo /graphics/image.pngo /help/articles/how-do-i-set-up-a-webpage.html

Setting image with Alternative text:This attribute is used to describe the external description of an image.

<img src="URL" alt="name">

Setting image height and width:o The WIDTH and HEIGHT properties can be adjusted to change the size of the

image on the page, but it is NOT recommended. o If the WIDTH and HEIGHT properties are not declared, the default will

determine the correct settings and use them. Here we can use attribute “style” if you want to set image width and height using style attribute.

Prepared by ramsha sohail 3

Department of Computer ScienceCS118-Web Engineering (D, E ) 2019 Sir Syed University of

Engineering & Technology

<img src="URL" alt="name" style="width:128px;height:128px;">

There is another way you can use individually width and height attributes.<img src="URL" alt="name" width="128" height="128">

Images in another folder:

If a jpg image named Web-Engeneering, placed in inside a folder named images in desktop.<img src="C:\Users\gulraiz\Desktop\images\Web-Engeneering.jpg" alt="Web-Engeneering">

Or <img src="images\Web-Engeneering.jpg" alt="Web-Engeneering">

Images in same folder as where HTML file exist:

For example, if your image is called Web-Engeneering.jpg, and it sat in the same directory as your HTML page, you could embed the image like so:Syntax:

<img src="Web-Engeneering.jpg" alt="Web-Engeneering">

Setting image as a Background:Images can be used for the “BACKGROUND” property. This setting is found in the <BODY> tag. For Example: If an image is placed inside an images folder.Syntax:

<body background="images\images.jpg">

Images placed in another server (computer):

You could embed the image using its absolute URL, for example:<img src=” https://www.example.com/images/dinosaur.jpg ” >

Images Format:

The images format can be as: .gif .png .jpeg or jpg .bmp

HTML Table:

Prepared by ramsha sohail 4

Department of Computer ScienceCS118-Web Engineering (D, E ) 2019 Sir Syed University of

Engineering & Technology

The HTML <table> tag represents tabular data — that is, information expressed via a two-dimensional data table.

Creating basic Tables:

The basic structure of an HTML table consists of the following tags:

Table tags: <TABLE></TABLE> Row tags: <TR></TR> Cell tags: <TD></TD>

o Constructing an HTML table consists of describing the table between the beginning table tag, <TABLE>, and the ending table table tag, </TABLE>.

o Between these tags, you then construct each row and each cell in the row.o To create a table:

you would first start the row with the beginning row tag, <TR> and then build the row by creating each cell with the beginning cell tag,

<TD> adding the data for that cell, and then closing the cell with the ending

cell tag, </TD>. When you finish all of the cells for a row, you would then close the row

with the ending row tag, </TR>. Then, for each new row, you would repeat the process of beginning the

row, building each cell in the row, and closing the row.

HTML Table Tags:

Table Tags Description<table> Defines a table.

<th> It gives heading to a table.<tr> It basically create a horizontal row for the table.<td> It feeds the data into the row for the cell.

width Width of the TABLE in pixels or percentage.border Thickness of the TABLE borders in pixels.align Align table to left, right, center.

Syntax:

Prepared by ramsha sohail 5

Department of Computer ScienceCS118-Web Engineering (D, E ) 2019 Sir Syed University of

Engineering & Technology

HTML table header:It will give headings that you want to give to your table.Syntax:

<table><tr>

<th>heading1 </th><th>heading2</th>

</tr></table>

HTML table border:It will give a specified border that you want to create a border across table.Syntax:

<table border="1">Output after giving the border attribute is:

To make the table which includes whether the table borders are collapsed into a single border.Syntax:

Prepared by ramsha sohail 6

<!DOCTYPE html><html><head>

<title>Table Basic Structure</title></head><body>

<table><tr>

<td>row1, cell1</td><td>row1, cell2 </td>

</tr><tr>

<td> row2, cell1</td><td> row2, cell2</td>

</tr></table>

</body></html>

Department of Computer ScienceCS118-Web Engineering (D, E ) 2019 Sir Syed University of

Engineering & Technology

<style> table {

border-collapse: collapse; }

</style>

Property used for table under style tag:To mSyntax:<style>table, th, td { border: 5px solid black; border-collapse: collapse;

}</style>

Width in HTML Table:It specifies how far across the TABLE is going to be. The number for this property can be specified as a number (in pixels) or a percentage of the screen width. If the WIDTH property is not specified, the TABLE automatically adjusts itself to be as long as the information contained within it. Syntax:

<table width="100%">Or

<table width="100px">Or

<table style="width:100%">

Setting Border color, background color and background in HTML table:To set border color of table, its background color and its background use the following syntax:

<table bordercolor = "black" bgcolor = "green" background="images/images.jpg">

Alignment in HTML Table:Through this property we can adjust the text alignment of heading, and cell content and also it shifts the alignment of position of table depending upon the situation you are going to use.

o Shifting Table Position in HTML:By using this, we can easily shift table position either in left, right, center.

Prepared by ramsha sohail 7

Department of Computer ScienceCS118-Web Engineering (D, E ) 2019 Sir Syed University of

Engineering & Technology

Syntax:<table align="right">

o Text Alignment in HTML:By using this, we can easily align text of heading, content inside the cell.Syntax:

th, td { text-align: center;

}HTML table header, Body and Footer:Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.

<thead> − to create a separate table header. <tbody> − to indicate the main body of the table. <tfoot> − to create a separate table footer.

Syntax:<thead>

<tr> <td colspan = "4">This is the head of the table</td> </tr> </thead>

<tfoot> <tr> <td colspan = "4">This is the foot of the table</td> </tr> </tfoot>

<tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody>

HTML table Cell padding and Cell spacing Attributes:

The cell padding and cell spacing are used to adjust the white space in table cells. Cell spacing:

Cell spacing is used to set space between cells.

Prepared by ramsha sohail 8

Department of Computer ScienceCS118-Web Engineering (D, E ) 2019 Sir Syed University of

Engineering & Technology

Cell padding:Represents the distance between cell borders and the content within a cell.

Syntax:<table cellpadding="10px" cellspacing="10px">

Or

Colspan & Rowspan in HTML Table:

o Colspan:If you want to

merge two or more columns into a single column.Cells that Span Many

Columns.Syntax:<table style="width:100%" border=2> <tr align=center> <th>Name</th> <th colspan="2">Cell #</th> </tr> <tr align=center> <td>Ms Ramsha Sohail</td> <td>0300*******</td> <td>0313*******</td> </tr></table>

o Rowspan:If you want to merge two or more rows into a single row. Make a cell span more than one rowSyntax:

Prepared by ramsha sohail 9

For Cell Padding:<style>th, td {padding: 25px;}</style>

For Cell Spacing:<style>table { border-spacing: 125px;}</style>

Department of Computer ScienceCS118-Web Engineering (D, E ) 2019 Sir Syed University of

Engineering & Technology

<table style="width:100%" border=1> <tr> <th>Name:</th> <td>Ms. Ramsha Sohail</td> </tr><tr> <th rowspan="2">Telephone:</th> <td>0300*******</td> </tr><tr> <td>0313*******</td> </tr></table>

EXERCISE

Note: Every CODE & Output should contain your ROLL Number for copyright.

1- Create some links to various search engines (google, yahoo).2- Display an image that has a border of size 2, a width of 200, and a height of 200.3- Create a page which displays following table

4- Create a page which displays following table.

Prepared by ramsha sohail 10