Lab 10n11 Manual

Labs10,11| Dr.
Muhammad Umar
Javed
University of Wah
Labs 10 & 11 Manual

Applications of Information and Communication
Technologies
Course Instructor Dr. Muhammad Umar Javed
Lab Instructor(s) Dr. Muhammad Umar Javed
Semester Fall 2023
1|Page
Table of Contents
Task List....................................................................................................................................................................
Task-1 Introduction .......................................................................................................................................... 3
Task-2 Activity Time-boxing ........................................................................................................................... 3
Task-3 Objectives............................................................................................................................................. 4
Task-4 Concept Map ........................................................................................................................................ 4
Task-5 Practice from Home ........................................................................................................................... 11
Task-6 Procedure and Tools .......................................................................................................................... 11
Task-7 Practice Tasks .................................................................................................................................... 12
Task-8 Evaluation Task.................................................................................................................................. 13
2|Page
Week-14
Labs 10&11: Web Designing in HTML
1. Introduction
Web designing is the process of planning, conceptualizing, and implementing the plan for designing a website in a
way that is functional and offers a good user experience. User experience is central to the web designing process.
Websites have an array of elements presented in ways that make them easy to navigate.
Web designing essentially involves working on every attribute of the website that people interact with, so that the
website is simple and efficient, allows users to quickly find the information they need, and looks visually pleasing.
All these factors, when combined, decide how well the website is designed.
HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup
Language. A markup language is a set of markup tags. HTML documents are described by HTML tags. Each HTML
tag describes different document content. HTML document is saved with .htm or .html extension.
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link",
etc.
Example:
A small HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
2. Activity Time-boxing
Table 1-Activity Time-boxing
Task No. Activity Name Activity Time Total Time

5.1 Solution Modelling 20 mins 20 mins
6.2 Setting up Browser 5 mins 5 mins
6.3 Walkthrough Task 35 mins 35 mins
7 Practice Tasks 10+20+10+35 (mins) 40 mins
8 Evaluation Task 80 mins for all tasks 80 mins
3|Page
Total Time 180 mins
3. Objective(s) of the Experiment

After performing this lab, students shall be able to understand what are:
 Get familiar with HTML
 HTML Tags including Paragraph, heading, font,
 HTML links, text alignment and formatting
 HTML comment Tags, color values, HTML Tables
 Ordered and unordered lists
 HTML images
 Block level elements
4. Concept Map
4.1. HTML Headings:

HTML headings are defined with the <h1> to <h6> tags:
Example
<h1>This is a heading</h1>
4.2. HTML Paragraphs:

HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
4.3. HTML Links:

HTML links are defined with the <a> tag:
Example
<a href="http://www.w3schools.com">This is a link</a>
4.4. HTML Styling:

Every HTML element has a default style (background color is white and text color is black).
Changing the default style of an HTML element can be done with the style attribute.
This example changes the default background color from white to light grey:
4|Page
Example
<body style="background-color:lightgrey">
</body>
4.5. HTML Text Color:

The color property defines the text color to be used for an HTML element:
Example
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
4.6. HTML Fonts:

The font-family property defines the font to be used for an HTML element:
Example
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
4.7. HTML Text Size:

The font-size property defines the text size to be used for an HTML element:
Example
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
4.8. HTML Text Alignment:

The text-align property defines the horizontal text alignment for an HTML element:
Example
<h1 style="text-align:center">Centered Heading</h1>
4.9. HTML Bold and Strong Formatting:

The HTML <b> element defines bold text, without any extra importance.
Example
<p>This text is normal.</p>
<p><b>This text is bold</b>.</p>
5|Page
The HTML <strong> element defines strong text, with added semantic "strong" importance.
Example
<p>This text is normal.</p>
<p><strong>This text is strong</strong>.</p>
4.10. HTML Marked Formatting:

The HTML <mark> element defines marked or highlighted text:
Example
<h2>HTML <mark>Marked</mark> Formatting</h2>
4.11. HTML Subscript Formatting:

The HTML <sub> element defines subscripted text.
Example
4.12. HTML Comment Tags:

You can add comments to your HTML source by using the following syntax:

Example


4.13. HTML Color Values:

Colors in HTML can be specified by the following methods:
a) Hexadecimal colors
b) RGB colors
c) Color names
Example
Black #000000
Open the link to see color codes.
http://www.color-hex.com
4.14. HTML Tables:

 Tables are defined with the <table> tag.
 Tables are divided into table rows with the <tr> tag.
 Table rows are divided into table data with the <td> tag.
 A table row can also be divided into table headings with the <th> tag.
 Table data <td> are the data containers of the table.
 They can contain all sorts of HTML elements like text, images, lists, other tables, etc.
 An HTML Table with a Border Attribute. If you do not specify a border for the table, it will be displayed
without borders. A border can be added using the border attribute:
Example
6|Page
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
4.14.1. HTML Table Headings:

Table headings are defined with the <th> tag.
By default, all major browsers display table headings as bold and centered:
Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
4.14.2. Table Cells that Span Many Columns:

To make a cell span more than one column, use the colspan attribute:
Example
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
4.14.3. Table Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:
Example
<tr>
<th>Name:</th>
7|Page
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
4.14.5. An HTML Table with a Caption

To add a caption to a table, use the <caption> tag:
Example
<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>
4.14.6. An HTML Table with Cell Spacing

Example
<table style="width:30%" border=”1” cellspacing=”10px”>
<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>
4.15. Unordered HTML Lists

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):
Example
8|Page
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
A style attribute can be added to an unordered list, to define the style of the marker:
Style Description
 list-style-type:disc The list items will be marked with bullets (default) list-style-type:circle The list items
will be marked with circles list-style-type:square The list items will be marked with squares
 list-style-type:none The list items will not be marked
Disc:
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
4.16. Ordered HTML Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with
numbers:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
A type attribute can be added to an ordered list, to define the type of the 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
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
4.17. 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:
9|Page
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
4.18. Nested HTML Lists

List can be nested (lists inside lists).
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
4.19. HTML Images

In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
<img src="url" alt="some_text">
Image Size = Width and Height
You can use the style attribute to specify the width and height of an image. The values are specified in pixels (use
px after the value).
Example-1
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Alternatively, you can use width and height attributes. Here, the values are specified in pixels by default.
Example-2
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> Using an Image as a Link
To use an image as a link, simply nest the <img> tag inside the <a> tag.
Example -3
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"> </a>
4.20. Image Floating

Use the CSS float property to let the image float.
The image can float to the right or to the left of a text:
Example
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> The image will float to the
right of the text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> The image will float to the left
of the text.
</p>
10 | P a g e
4.21. Block-level Elements
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and
right as far as it can).
Examples of block-level elements:
∙ <div>
∙ <h1> - <h6>
∙ <p>
∙ <form>
4.21.1. The <div> Element

The <div> element is a block-level element that is often used as a container for other HTML elements. The <div>
element has no required attributes, but style and class are common.
Example
<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan
area of over 13 million inhabitants.</p>
</div>
4.21.2. Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements:
∙ <span>
∙ <a>
∙ <img>
The <span> Element
The <span> element is an inline element that is often used as a container for some text.
The <span> element has no required attributes, but style and class are common.
When used together with CSS, the <span> element can be used to style parts of the text:
Example
<h1>My <span style="color:red">Important</span> Heading</h1>
5. Practice from Home
5.2.1. Task 1
Find out the difference between HTML <div> element and HTML <span> element.
5.2.2. Task 2
Write HTML code for the following:
Don’t forget to complete your homework before lab.
6. Procedure and Tools
6.1. Tool(s)
Notepad and Google Chrome
11 | P a g e
6.2. Setting up Tool
Set up both the tools and save a notepad file named “yourNmae_lab12”.
6.3. Walkthrough Task

Create the following table along with all the formatting.
7. Practice Tasks
This section will provide more practice exercises which you need to finish during the lab. You need to
finish the tasks in the required time.
7.1 Practice Task 1

Write HTML code for the following:
7.2 Practice Task 2

Modify the above tasks and add a link to the text: “This is a link”.
Link: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_link
7.3 Practice Task 3

Write HTML code to display the following in browser:
7.4 Practice Task 4

Write code in HTML for the following:
Don’t forget to complete your homework labwork in lab.
12 | P a g e
7.5 Practice Task 5
Write code in HTML to design the following and add link on the attached image.
7.6 Practice Task 6

Create the following ordered and unordered list:
1. Coffee
2. Tea
 Black tea
 Green tea
3. Milk
Table 2-Confirmation of Practice Tasks
Practice Tasks Confirmation Comments

T1
T2
T3
T4
T5
T6
8. Evaluation Task (Unseen)

8.1. Design a page to display the courses offered in BSCS in different semesters by using List tag.
8.2. Create a page that contains a table corresponding to your class Timetable.
8.3.1. Create a page that contains an unordered grocery list.

8.3.2. Underline the most important items that you need to get.
8.4. Display an image that when clicked will link to a search engine of your choice.
8.5. Display a table like given below.
9. Evaluation Criteria
The evaluation criteria for this lab are based on the completion of the following tasks. Each task is assigned the
marks percentage which will be evaluated by the instructor in the lab whether the student has finished the
13 | P a g e
complete/partial task(s).
Table 3- Evaluation of the Lab
No. Task No. Description Marks

1 5.2 Practice from Home 20
2 6 Procedure and tools 5
3 7.1 Practice Task 1 10
6 8 Evaluation Task (unseen) 45
Total Marks 100
10. Further Readings
10.1 Books
Livesley, Robert Kenneth. An introduction to automatic digital computers. Cambridge University Press, 2017.
10.2 Slides
The slides and reading material can be accessed from the google classroom.
14 | P a g e

Lab 10n11 Manual

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab 10n11 Manual

Uploaded by

Copyright:

Available Formats

Labs10,11| Dr.

Labs 10 & 11 Manual

Course Instructor Dr. Muhammad Umar Javed

Lab Instructor(s) Dr. Muhammad Umar Javed

Semester Fall 2023

Task No. Activity Name Activity Time Total Time

3. Objective(s) of the Experiment

4.1. HTML Headings:

4.2. HTML Paragraphs:

4.3. HTML Links:

4.4. HTML Styling:

4.5. HTML Text Color:

4.6. HTML Fonts:

4.7. HTML Text Size:

4.8. HTML Text Alignment:

4.9. HTML Bold and Strong Formatting:

4.10. HTML Marked Formatting:

4.11. HTML Subscript Formatting:

4.12. HTML Comment Tags:

4.13. HTML Color Values:

4.14. HTML Tables:

4.14.1. HTML Table Headings:

4.14.2. Table Cells that Span Many Columns:

4.14.3. Table Cells that Span Many Rows

4.14.5. An HTML Table with a Caption

4.14.6. An HTML Table with Cell Spacing

4.15. Unordered HTML Lists

4.16. Ordered HTML Lists

4.17. HTML Description Lists

4.18. Nested HTML Lists

4.19. HTML Images

4.20. Image Floating

4.21.1. The <div> Element

4.21.2. Inline Elements

5. Practice from Home

6. Procedure and Tools

6.3. Walkthrough Task

7.1 Practice Task 1

7.2 Practice Task 2

7.3 Practice Task 3

7.4 Practice Task 4

7.6 Practice Task 6

Table 2-Confirmation of Practice Tasks

Practice Tasks Confirmation Comments

8. Evaluation Task (Unseen)

8.3.1. Create a page that contains an unordered grocery list.

Table 3- Evaluation of the Lab

No. Task No. Description Marks

10. Further Readings

You might also like