CSC101 Introduction to Computing Lab 05
LAB 05 – HTML BASICS
Objective:
After this lab the students should be able to understand the use of “Hypertext Markup
Language” (HTML) and its basic tags. Add linking information, creating multiple pages, and
navigating in a website and add tables in web pages.
Activity Outcomes:
The activities provide hands-on practice with the following topics
• Design basic web page using HTML Tags
• Add text formatting tags
• Add lists to web pages
• Add images and videos to the web pages
• Internal links
• External links
• In-page references
• Use of tables in a web page
Instructor Note:
As pre-lab activity, read Chapter 1, 2 and 3 from the textbook “Web Design Playground:
HTML & CSS the Interactive Way”, 1st Edition, April 2019 by Paul McFedries.
Useful Concepts
TAG Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<head> Contains metadata/information for the document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
<!--...--> Defines a comment
<img src=”abc.jpg”> Inserts an image
<video
Inserts Video
src=”abc.mp4”>
<ol></ol> Order list
<li> </li> Adding list items
<ul> Unoredered list
<dl> tag defines a description list.
<dt> defines terms/names
COMSATS University Islamabad 1
CSC101 Introduction to Computing Lab 05
<dd> describes each term/name
An inline frame is used to embed another document within the current
<iframe>
HTML document.
<a> The <a> tag defines a hyperlink, which is used to link from one page to
another
href The href attribute specifies the URL of the page the link goes to
<table> HTML tables allow web developers to arrange data into rows and
columns
<tr> The <tr> HTML element defines a row of cells in a table
<th> The <th> tag defines a header cell in an HTML table.
<td> The <td> tag defines a standard data cell in an HTML table.
<thead> The <thead> tag is used to group header content in an HTML table
<tbody> The <tbody> tag is used to group the body content in
an HTML table
<tfoot> The <tfoot> tag is used to group footer content in an HTML table.
HTML Basic Structure
<!DOCTYPE html>
<html>
<head>
<title> Page Title Goes Here </title>
</head>
<body>
<h1> Main Page Heading </h1>
Page content goes here
<h2> Adding Image </h2>
<img src="CUIlogo.jpg">
</body>
</html>
How To Create basic web page
1. Open Notepad
2. Click on File -> Save as…
3. In the File name pull-down box, type in webpage.html
4. Click on Save
5. Type in content for your file
6. Once you finished the content, click on File -> Save
Solved Lab Activities
S. No. Allocated Time Level of Complexity CLO Mapping
Lab Activity 1 15 Minutes Low CLO-6
Lab Activity 2 15 Minutes Low CLO-6
Lab Activity 3 15 Minutes Low CLO-6
COMSATS University Islamabad 2
CSC101 Introduction to Computing Lab 05
Lab Activity 4 15 Minutes Low CLO-6
Lab Activity 5 15 Minutes Low CLO-6
Lab Activity 1
• Create a basic page of COMSATS University as given below
• Add text about COMSATS and apply text formatting
Solution
<!-- Lab Activity 01 -->
<!DOCTYPE html>
<html>
<head>
<title>Lab Activity 01</title>
</head>
<body bgcolor="#98E0F0">
<h1><font color="#1322D6"> COMSATS University Islamabad</font>
</h1>
<hr width="100%" color="#030303" size="4" />
<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="https://www.comsats.edu.pk/AboutCIIT/history.aspx"> 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>
COMSATS University Islamabad 3
CSC101 Introduction to Computing Lab 05
Output:
Lab Activity 2:
• Add list of topics, images and videos to your website
Solution
<!-- Lab Activity 02 -->
<!DOCTYPE html>
<html>
<head>
<title>Lab Activity 02</title>
</head>
<body bgcolor="#98E0F0">
<h1><font color="#1322D6"> COMSATS University Islamabad </font>
</h1>
<hr width="100%" color="#030303" size="4" />
<Center><p><h2><b><pre> Home Department Admissions Academics
Exams</pre></b></h2> </p> </center>
<hr width="100%" color="#030303" size="4" />
<ol type="I" start="4">
<li> computer </li>
<li> mouse </li>
<li> keyboard </li>
</ol>
<br />
COMSATS University Islamabad 4
CSC101 Introduction to Computing Lab 05
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<img src="CUIlogo.jpg" alt="Mountain View farrrr" style="width:200px;height:200px;">
<iframe width="956" height="538" src="https://www.youtube.com/embed/uDytOHFVw2Q"
title="Surat An-Nasr (The Divine Support) | Mishary Rashid Alafasy | | مشاري بن راشد العفاسي
"سورة النصرframeborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-
media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
Output
Lab Activity 3:
• Create links to home, departments, admission and exams pages of CUI Islamabad
campus
Solution:
<!-- Lab Activity 03 -->
<!DOCTYPE html>
<html>
<head>
COMSATS University Islamabad 5
CSC101 Introduction to Computing Lab 05
<title>Lab Activity 03</title>
</head>
<body bgcolor="#98E0F0">
<h1><font color="#1322D6"> COMSATS University Islamabad </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>
Output
Lab Activity 4:
• Create a table to add the add basic html table including the details of Company,
Contact, and Country.
COMSATS University Islamabad 6
CSC101 Introduction to Computing Lab 05
Solution:
<!-- Lab Activity 04 -->
<!DOCTYPE html>
<html>
<head>
<title>Lab Activity 04</title>
</head>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</body>
</html>
COMSATS University Islamabad 7
CSC101 Introduction to Computing Lab 05
Output
Lab Activity 5:
• Create a table as shown in the figure given below:
Solution:
<!-- Lab Activity 05 -->
<!DOCTYPE html>
<html>
<head>
<title>Lab Activity 05</title>
</head>
<table>
<thead>
<tr>
<th colspan="2">October</th>
<th colspan="2">November</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sales</td>
COMSATS University Islamabad 8
CSC101 Introduction to Computing Lab 05
<td>Profit</td>
<td>Sales</td>
<td>Profit</td>
</tr>
<tr>
<td>$200,00</td>
<td>$50,00</td>
<td>$300,000</td>
<td>$70,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan= "4">November was more produstive</th>
</tr>
</tfoot>
</table>
</html>
Output
Graded Lab Tasks
Note: The instructor can design graded lab activities according to the level of difficult and
complexity of the solved lab activities. The lab tasks assigned by the instructor should be
evaluated in the same lab.
Lab Task 1
• Learn and try different tags and formatting options on your webpage of Comsats.
COMSATS University Islamabad 9
CSC101 Introduction to Computing Lab 05
Lab Task 2
• Create a webpage for Comsats library. Add lists and apply text formatting to your
page. use videos and images of the library and then add them to your page.
Lab Task 3
• Use inline styling to make the webpage created in lab task 2, more aesthetic.
Lab Task 4
• Create in-page reference to the list created in the body and marks the locations
accordingly.
• Add tables to department and admission pages.
Lab Task 5
• Use tables to create a page layout given below that displays your profile (Personal
homepage)
COMSATS University Islamabad 10
