Scribd
Upload
45 views

Coding Manual

Uploaded by

mahnoor.aleem2005
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
45 views

Coding Manual

Uploaded by

mahnoor.aleem2005
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

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

You might also like