The Islamia University of Bahawalpur

Faculty of Engineering

Department of Computer Systems Engineering

Web Engineering

Session(2017-2021)

LAB 3

NAME: Roll no.

Class: Instructor:

Objective:

To learn and implement : Lists, Tables, links, Classes and Iframes in HTML.

PreLab:
Define an HTML Table

The  <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with a <th>  tag. Each
table data/cell is defined with a <td> tag.

By default, the text in <th>  elements are bold and centered.

By default, the text in <td>  elements are regular and left-aligned.

Example
A simple HTML table:
<table  style="width:100%">
   <tr>
     <th>Firstname</th>
     <th>Lastname</th>
     <th>Age</th>
   </tr>
   <tr>
    <td>Jill</td>
     <td>Smith</td>
     <td>50</td>
   </tr>
   <tr>
     <td>Eve</td>
     <td>Jackson</td>
     <td>94</td>
   </tr>
</table>

Add a Border to table

To add a border to a table, use the CSS  border property:

Example
table, th, td {
   border: 1px solid black;
}

HTML Table - Collapsed Borders

To let the borders collapse into one border, add the CSS border-collapse property:

Example
table, th, td {
   border: 1px solid black;
  border-collapse: collapse;
}

SHOW OUTPUT HERE:

HTML Table - Collapsed Borders

To let the borders collapse into one border, add the CSS border-collapse property:

Example
table, th, td {
   border: 1px solid black;
  border-collapse: collapse;
}

SHOW OUTPUT HERE:

HTML Table - Add Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS  padding property:

Example
th, td {
  padding:  15px;
}

HTML Table –
Cell that Spans Many Columns

To make a cell span more than one column, use the colspan attribute:

Example
<table  style="width:100%">
   <tr>
     <th>Name</th>
     <th colspan="2">Telephone</th>
   </tr>
   <tr>
     <td>Bill Gates</td>
     <td>55577854</td>
     <td>55577855</td>
   </tr>
</table>

SHOW OUTPUT HERE

   Cell that Spans Many Rows

To make a cell span more than one row, use the rowspan attribute:

Example
<table  style="width:100%">
   <tr>
     <th>Name:</th>
     <td>Bill Gates</td>
   </tr>
   <tr>
     <th rowspan="2">Telephone:</th>
     <td>55577854</td>
   </tr>
   <tr>
     <td>55577855</td>
   </tr>
</table>

HTML Table –
Add a Caption

To add a caption to a table, use the <caption> tag:

Example
<table  style="width:100%">
   <caption>Monthly savings</caption>
   <tr>
     <th>Month</th>
     <th>Savings</th>
   </tr>
   <tr>
     <td>January</td>
     <td>$100</td>
   </tr>
   <tr>
     <td>February</td>
     <td>$50</td>
   </tr>
</table>

  Special Style for One Table

To define a special style for one particular table, add an id attribute to the table:

Example
<table  id="t01">
   <tr>
     <th>Firstname</th>
     <th>Lastname</th>
     <th>Age</th>
   </tr>
   <tr>
     <td>Eve</td>
     <td>Jackson</td>
     <td>94</td>
   </tr>
</table>

you can define a special style for this table:

#t01 {
   width: 100%;
   background-color: #f1f1c1;
}

adding more styles:

#t01 tr:nth-child(even) {
   background-color: #eee;
}
#t01 tr:nth-child(odd) {
   background-color: #fff;
}
#t01 th {
   color: white;
   background-color: black;
}
 Unordered HTML List

An unordered list starts with the  <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>

Ordered HTML List

An ordered list starts with the  <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example
<ol>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The  <dl>  tag defines the description list, the <dt> tag defines the term (name), and
the <dd>  tag describes each term:

Example
<dl>
   <dt>Coffee</dt>
   <dd>- hot drink</dd>
   <dt>Milk</dt>
   <dd>- cold drink</dd>
</dl>

HTML List Tags

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

Unordered HTML List

An unordered list starts with the  <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>

Unordered HTML List - Choose List Item Marker

The CSS  list-style-type property is used to define the style of the list item marker. It can have
one of the following values:

Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

Example - Disc
<ul style="list-style-type:disc;">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>

Example - Circle
<ul style="list-style-type:circle;">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>

Example - Square
<ul style="list-style-type:square;">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>

Nested HTML Lists

Lists can be nested (list inside list):

Example
<ul>
   <li>Coffee</li>
   <li>Tea
    <ul>
        <li>Black tea</li>
        <li>Green tea</li>
     </ul>
   </li>
   <li>Milk</li>
</ul>

Horizontal List with CSS

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:

Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding:  0;
   overflow: hidden;
   background-color: #333333;
}

li {
   float: left;
}

li a {
   display: block;
   color: white;
   text-align: center;
   padding: 16px;
  text-decoration: none;
}

li a:hover  {
   background-color: #111111;
}
</style>
</head>
<body>

<ul>
   <li><a href="#home">Home</a></li>
   <li><a href="#news">News</a></li>
   <li><a href="#contact">Contact</a></li>
   <li><a href="#about">About</a></li>
</ul>

</body>
</html>

HTML List Tags

Tag Description
 <ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

Ordered HTML List - The Type Attribute

The  type attribute of the  <ol> tag, defines the type of the list item marker:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

 type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a
specified number, you can use the  start attribute:

Example
<ol start="50">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>

Using The class Attribute

The  class attribute is often used to point to a class name in a style sheet. It can also be used by a
JavaScript to access and manipulate elements with the specific class name.

In the following example we have three <div> elements with a class attribute with the value of
"city". All of the three <div> elements will be styled equally according to the .city style
definition in the head section:

Example
<!DOCTYPE html>
<html>
<head>
<style>
.city {
   background-color: tomato;
  color:  white;
  border: 2px solid black;
  margin: 20px;
  padding:  20px;
}
</style>
</head>
<body>

<div class="city">
   <h2>London</h2>
   <p>London is the capital of England.</p>
</div>

<div class="city">
   <h2>Paris</h2>
   <p>Paris is the capital of France.</p>
</div>

<div class="city">
   <h2>Tokyo</h2>
   <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

In the following example we have two  <span>  elements with a class attribute with the value of
"note". Both <span> elements will be styled equally according to the  .note style definition in
the head section:

Example
<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
   color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

The Syntax For Class

To create a class; write a period (.) character, followed by a class name. Then, define the CSS
properties within curly braces {}:

Example

Create a class named "city":

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color:  white;
  padding:  10px;
}
</style>
</head>
<body>

<h2  class="city">London</h2>
<p>London is the capital of England.</p>

<h2  class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2  class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

Multiple Classes

HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. <div class="city main">.
The element will be styled according to all the classes specified.

In the following example, the first <h2>  element belongs to both the city class and also to
the main class, and will get the CSS styles from both of the classes: 

Example
<h2  class="city main">London</h2>
<h2  class="city">Paris</h2>
<h2  class="city">Tokyo</h2>

Different Elements Can Share Same Class

Different HTML elements can point to the same class name.

In the following example, both <h2> and  <p> points to the "city" class and will share the same
style:

Example
<h2  class="city">Paris</h2>
<p  class="city">Paris is the capital of France</p>

Use of The class Attribute in JavaScript

The class name can also be used by JavaScript to perform certain tasks for specific elements.

JavaScript can access elements with a specific class name with

the getElementsByClassName() method:

Example

Click on a button to hide all elements with the class name "city":

<script>
function myFunction() {
   var x =  document.getElementsByClassName("city");
   for (var i = 0; i < x.length; i++) {
     x[i].style.display  = "none";
 }
}
</script>

TASK 1:

Add a color property with the value "blue" inside the "special" class.

<!DOCTYPE html>
<html>
<head>
<style>
 
   ;

</style>
</head>
<body>

<p class="special">My paragraph</p>

</body>
</html>

The id Attribute

The  id  attribute specifies a unique id for an HTML element. The value of the id attribute must
be unique within the HTML document.
The  id  attribute is used to point to a specific style declaration in a style sheet. It is also used by
JavaScript to access and manipulate the element with the specific id.

The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS
properties within curly braces {}.

In the following example we have an <h1>  element that points to the id name "myHeader".
This  <h1> element will be styled according to the #myHeader style definition in the head
section:

Example
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader  {
  background-color: lightblue;
  color:  black;
  padding:  40px;
  text-align: center;
}
</style>
</head>
<body>

<h1  id="myHeader">My Header</h1>

</body>
</html>

Note: The id name is case sensitive!

Note: The id name must contain at least one character, and must not contain whitespaces
(spaces, tabs, etc.).

Difference Between Class and ID

A class name can be used by multiple HTML elements, while an id name must only be used by
one HTML element within the page:
 Example
<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color:  black;
   padding: 40px;
   text-align: center;
}

/* Style all elements with the class name "city" */

.city {
  background-color: tomato;
   color: white;
   padding: 10px;
}
</style>

<!-- An element with a unique id -->

<h1  id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->

<h2  class="city">London</h2>
<p>London is the capital of England.</p>

<h2  class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2  class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

TASK 2: Write down the above code in VS Code and paste the output here.
 Bookmarks with ID and Links

HTML bookmarks are used to allow readers to jump to specific parts of a webpage.

Bookmarks can be useful if your page is very long.

To use a bookmark, you must first create it, and then add a link to it.

Then, when the link is clicked, the page will scroll to the location with the bookmark.

Example

First, create a bookmark with the  id  attribute:

<h2  id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

Example
<a  href="#C4">Jump to Chapter 4</a>

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

<a  href="html_demo.html#C4">Jump to Chapter 4</a>

Using The id Attribute in JavaScript

The  id  attribute can also be used by JavaScript to perform some tasks for that specific element.

JavaScript can access an element with a specific id with the getElementById() method:

Example
Use the  id attribute to manipulate text with JavaScript:
<script>
function displayResult() {
   document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Task 3:

Add the correct HTML attribute to make the H1 element red.

<!DOCTYPE html>
<html>
<head>
<style>
#myheader {color:red;}
</style>
</head>
<body>

<h1  >My Home Page</h1>

</body>
</html>
Iframe Syntax

The HTML  <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Syntax
<iframe src="url" title="description">

Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by
screen readers to read out what the content of the iframe is.

Iframe
- Set Height and Width

Use the height and  width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Example
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe
Example"></iframe>

Or you can add the style attribute and use the CSS height and width properties:

Example
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe
Example"></iframe>

Iframe - Remove the Border

By default, an iframe has a border around it.

To remove the border, add the style  attribute and use the CSS border property:

Example
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

With CSS, you can also change the size, style and color of the iframe's border:

Example
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe
Example"></iframe>

Iframe –
Target for a Link

An iframe can be used as the target frame for a link.

The  target attribute of the link must refer to the name attribute of the iframe:

Example:
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

TASK 4:
Create an iframe with a URL address that goes to https://www.google.com

TASK 5:

Draw the website in the given style. Use above mentioned tags and attributes where required.

Write the name of your website in WEBSITE NAME box, Write some content in Content
area. Show some Menu in Menu’s space .
TASK 6:
Draw the following web page in VS code

TASK 7: Draw the following table in VS code.

TASK 8: Make the table on a webpage in the given format.