Scribd
Upload
0 views

HTML - Lab Manual

The document is a lab manual for a course titled 'Web Systems & Technologies' by Dr. Zeeshan Bhatti, aimed at teaching web application design and implementation. It includes course objectives, a detailed weekly lecture plan, and a comprehensive list of HTML tags along with their descriptions. Additionally, it outlines various HTML lab tasks for students to practice and submit as part of their coursework.

Uploaded by

RANA MUHAMMAD ABDULLAH Zahid
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

HTML - Lab Manual

The document is a lab manual for a course titled 'Web Systems & Technologies' by Dr. Zeeshan Bhatti, aimed at teaching web application design and implementation. It includes course objectives, a detailed weekly lecture plan, and a comprehensive list of HTML tags along with their descriptions. Additionally, it outlines various HTML lab tasks for students to practice and submit as part of their coursework.

Uploaded by

RANA MUHAMMAD ABDULLAH Zahid
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

Web Engineering Tasks

WEB SYSTEM &


TECHNOLOGY
HTML - LAB MANUAL
By: DR. ZEESHAN BHATTI
For Video Lecture Visit
https://www.youtube.com/@ZeeshanAcademy
“Code with Zeeshan Academy”
https://www.youtube.com/@CodeWithZeeshanAcademy
By: Dr. Zeeshan Bhatti
1
Web Engineering Tasks

COURSE SPECIFICATION OF INFORMATION TECHNOLOGY

Course Title: Web Systems & Technologies


Course Code: ITEC-518-520
Degree Program: BS(Information Technology) P-III (1st semester)
Course rating: 3 credit hours (Theory)
Pre-requisites:

Course Objectives:
This course aims to provide the skills of Designing and implementation of web based applications. It includes
Basic and advanced Internet programming and their implementation in html, Java scripts and VB scripts & active
server pages, design & implementation of commercial web pages, design & management of electronic commerce
related objectives, PHP technology basics and intermediate level, frameworks using PHP or any other
technology.
Course Outline:
Introduction to Internet Programming: Client Server model, Web Browsers, HTTP
Basic HTML: headers, body, basic html tags, tables, Unordered and Ordered Lists
HTML Form Processing: Building a form, Text fields and value, size, maxlength, html buttons, radio,
checkboxes, prechecked, Selection lists Action and Method - GET and POST.
Client Side Scripting Languages: Basics of JavaScript and VBScript
Web Servers: Introduction to some popular Web Servers (Apache, IIS, etc)
CGI: Introduction to CGI scripting, html form interface with CGI scripts, automating processing such as info forms
and email, Programming CGI interfacing via forms.
Server Side Scripting Engines: Introduction to Active Server Pages and Java Server Pages
Servlets: Introduction to Java Servlets API
PHP intro, forms, database connectivity etc and framework like joomla, drompal etc
File and Database Connectivity

Learning Material/References:

1. Internet & World Wide Web How to Program 3rd Edition) by Harvey M. Deitel, Paul J. Deitel and Andrew
B. Goldberg.
2. Web enabled Commercial Application Development Using…HTML, DHTML,

By: Dr. Zeeshan Bhatti


2
Web Engineering Tasks

Weekly Lecture Plan


Week 1 Introduction to the Course, What is Web Development, Tools
and Technology for Web development
Week 2 Introduction to HTML, HTML Tags and Basic Elements,
HTML Attributes, Heading, Paragraph, Styles.
Week 3 HTML Formatting Tags, Comments, Tables, Lists, Bullets,
Links, Images. Classes.
Week 4 HTML Project, Website Development
Week 5 Introduction to CSS. What is CSS, Uses Purpose Advantages, 3
Types of CSS , Class
Week 6 CSS Classes, External CSS, Boarders, Margins, Layouts,
Week 7 CSS Menu, Page Layouts, Tables, Positions,
Week 8 CSS Project, CSS based Website Development.
Week 9 Assignment, CSS , Introduction to JavaScript
Week 10 JavaScript, Bootstrap
Week 11 PHP Introduction, Installing and Configuring Server, PHP
variables,
Week 12 PHP Loops, Conditional Operators, Web Forms, MySQL,
Sessions
Week 13 Functions, Submitting Form and Reading Data from MsSQL
Database.
Week 14 Form Validation, Cookies, Creating Shopping Application
Week 15 Creating Dynamic Website, Sending Email, Ajax, Cookies,
Sessions.,
Week 16 Web Project,

By: Dr. Zeeshan Bhatti


3
Web Engineering Tasks

WEB
Systems [ BSIT P-III First Semester ]

and LIST of ALL


HTML TAGS
Technology
(ITEC-528)
[Institute of Information and Communication Technology [By:
University of Sindh, Jamshoro.] Dr. Zeeshan Bhatti]

By: Dr. Zeeshan Bhatti


4
Web Engineering Tasks

LIST OF ALL HTML TAGS

By: Dr. Zeeshan Bhatti


5
Web Engineering Tasks

First level tags


First level tags are the main tags used to structure an HTML page. They are
essential to producing the "minimum code" for a web page.

Tag Description

<html> Main tag

<head> Page header

<body> Page body


Minimum code for an HTML page:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
</head>

<body>

</body>
</html>

Header tags
These tags are all located in the web page header, in other words
between <head> and </head>:

Tag Description

<link /> Link with a style sheet

<meta /> Web page metadata (charset, keywords, etc.).

<script> JavaScript code

<style> CSS code

<title> Page title

By: Dr. Zeeshan Bhatti


6
Web Engineering Tasks

Text structuring tags

Tag Description

<abbr> Abbreviation

<blockquote> Quotation (long)

<cite> Quote the title of a work or an event

<q> Quotation (short)

<sup> Exponent

<sub> Index

<strong> Strong highlighting

<em> Normal highlighting

<mark> Visual highlighting

<h1> Level 1 title

<h2> Level 2 title

<h3> Level 3 title

<h4> Level 4 title

<h5> Level 5 title

<h6> Level 6 title

<img /> Image

<figure> Figure (image, code, etc.)

<figcaption> Figure description

<audio> Sound

<video> Video

<source> Source format for tags <audio> and <video>

By: Dr. Zeeshan Bhatti


7
Web Engineering Tasks

Tag Description

<a> Hypertext link

<br /> Line feed

<p> Paragraph

<hr /> Horizontal separation line

<address> Contact address

<del> Deleted text

<ins> Inserted text

<dfn> Definition

<kbd> Keyboard entry

<pre> Formatted display (for source codes)

<progress> Progress bar

<time> Date or time

List tags
This section lists all the HTML tags used to create lists (bulleted lists, numbered lists,
definition lists, etc.)

Tag Description

<ul> Unordered bullet lists

<ol> Numbered List

<li> Bulleted list item

<dl> List of definitions

<dt> Term to be defined

<dd> Term definition

By: Dr. Zeeshan Bhatti


8
Web Engineering Tasks

Table tags

Tag Description

<table> Table

<caption> Table title

<tr> Table row

<th> Header cell

<td> Cell

<thead> Table header section

<tbody> Table body section

<tfoot> Table footer section

Form tags

Tag Description

<form> Form

<fieldset> Field group

<legend> Field group title

<label> Field description

<input /> Form field (text, password, checkbox, button, etc.).

<textarea> Multi-line entry field

<select> Drop-down list

<option> Drop-down list item

<optgroup> Item group in a drop-down box

By: Dr. Zeeshan Bhatti


9
Web Engineering Tasks

Section tags
These tags are used to build the outline of our website.

Tag Description

<header> Header

<nav> Main browsing links

<footer> Page footer

<section> Page section

<article> Article (independent content)

<aside> Additional information

Generic tags
Generic tags are tags that have no semantic meaning.

Indeed, all other HTML tags have a meaning: <p> means "Paragraph", <h2> means
"Subtitle", etc.
You sometimes need to use generic tags (also called general purpose tags) as
none of the other tags are appropriate. You most often use generic tags to build
your design.

There are two generic tags: inline and block.

Tag Description

<span> Inline generic tag

<div> Block generic tag

These tags are only useful if you associate them with a class, id or style attribute:

• class: specifies the name of the CSS class to be used.


• id: gives the tag a name. This name must be unique throughout the page as
it identifies the tag. You can use the ID for many things, for example to create
a link to an anchor, for an ID type CSS style, for operations in JavaScript, etc.

By: Dr. Zeeshan Bhatti


10
Web Engineering Tasks

• style:
this attribute allows you to directly specify the CSS code to be applied.
You're not required to have a separate style sheet, you can include the CSS
attributes directly. Note that it's preferable to use an external style sheet
rather than this attribute as it makes your website easier to update later on.
These three attributes are not restricted to generic tags: you can use them with no
problem in most other tags.

By: Dr. Zeeshan Bhatti


11
Web Engineering Tasks

HTML LAB TASKS

Submission Guidelines:
All Students are required to complete the following tasks and then take the Screenshot of
the output form the browser submit. Create a Word File and Paste output of each task on
Word file in sequence.

Practice 1:
1. Print your name in green.
<html>
<body>
<font color="green">John</font>
</body>
</html>
2. Print a paragraph that is a description of a book, include the title of the book as well as its
author. Names and titles should be underlined, adjectives should be italicized and bolded.
<html>
<head> <title> Paragraph Task </title></head>
<body>
<p>
One particular book which is recommended reading is <u>The Street Lawyer</u> by
<u>John Grisham</u>. This book is about a lawyer who begins re-evaluating his
priorities in life when a bad
incident occurs within his law firm. Consequently, he becomes acquainted with the inner
city streets, and realizes the harsh existence of the homeless, and vows to give them a
chance in the courts. <u>The Street Lawyer</u> is a <b><i>great</i></b>
book. It is <b><i>well written</i></b> and <b><i>interesting</i></b>. Other books by
<u>John Grisham</u> include <u>The Firm</u>, <u>The Pelican Brief</u>, and
<u>The Client</u>.
</p>
</body>
</html>
3. Print your name to the screen with every letter being a different heading size
<html>
<head> <title> Name Heading Task </title></head>

<body>
<h4>J</h4>
<h3>o</h3>
<h2>h</h2>
<h1>n</h1>
</body>
</html>

By: Dr. Zeeshan Bhatti


12
Web Engineering Tasks

4. Create some links to various search engines (google, yahoo, altavista, lycos, etc). Now Use
Image Icons for each link along with Text
<html>
<body>
<a href="http://www.google.com">
Search the web with Google!
</a>

<br /><br />

<a href="http://www.yahoo.com">
Search the web with Yahoo!
</a>

<br /><br />

<a href="http://www.bing.com">
Search the web with Bing!
</a>

<br /><br />

<a href="http://www.altavista.com">
Search the web with Altavista!
</a>

<br /><br />

<a href="http://www.lycos.com">
Search the web with Lycos!
</a>
</body>
</html>
5. Create links to five different pages on five different websites that should all open in a new
window
6. Create a page with a link at the top of it that when clicked will jump all the way to the bottom of
the page.
7. Display an image that has a border of size 2, a width of 200, and a height of 200
8. Display an image that when clicked will link to a search engine of your choice (should be opened
in a new window).
9. Display an image that when clicked will link to itself and will display the image in the browser
by itself.
<html>
<body>
<a href="/images/apple.jpg" target="_top">
<img src="/images/apple.jpg" alt="Apple" />

By: Dr. Zeeshan Bhatti


13
Web Engineering Tasks

</a>
<p>
Click on the image to see it in the browser by itself.
</p>
</body>
</html>

10. Display five different images. Skip two lines between each image. Each image should have a
title.
11. Below is a simple table, and the HTML source that created it. Note that tables are normally
colorless unless otherwise specified.

<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data cell 1</td>
<td>Data cell 2</td>
</tr>
<tr>
<td>Data cell 3</td>
<td>Data cell 4</td>
</tr>
</table>
12. Now that you see how a table is built, try making one that looks like the image below. (Note that
the first line is the table's caption.)

By: Dr. Zeeshan Bhatti


14
Web Engineering Tasks

13. This exercise will focus on just a few of the more useful properties. In particular, it uses the
colspan, rowspan, height, and width attributes. It also makes use of the bgcolor attribute. The
following example demonstrates the use of these tools.

<table border="1">
<tr>
<td colspan="2" bgcolor="pink">Pink cell</td>
</tr>
<tr>
<td bgcolor="red">Red cell</td>
<td width="100" bgcolor="yellow">Yellow cell</td>
</tr>
</table>
14. Now use the colspan and rowspan attributes to create the table structure as shown in image
below

15 : Here is a sample table created to display a schedule: Notice that it uses many of the attributes,
especially ROWSPAN and COLSPAN. The HTML code that created this table is listed below. If you examine
this code closely, you'll notice that the fourth row (11:00) seems to be missing a few cells. This is because
the third row has two cells with ROWSPAN=2, which means they each automatically take up a cell in the
fourth row as well.

By: Dr. Zeeshan Bhatti


15
Web Engineering Tasks

Task 16: create a simple two Colum layout website using Tables. Each link is properly active and
properly managed with content like a website. Sample for two column layout is shown in figure.

Task 17: Create a simple two Colum layout website using Div Tag. Each link is properly active and
properly managed with content like a website. Sample for two column layout is shown in figure

By: Dr. Zeeshan Bhatti


16
Web Engineering Tasks

Task 18: Create a Simple HTML5 Form as shown below

Solution:
<form action="">
<table cellpadding="10">
<tr><td>Color: </td><td><input type="color" name="color" /></td></tr>

By: Dr. Zeeshan Bhatti


17
Web Engineering Tasks

<tr><td>Date: </td><td><input type="date" name="date" /></td></tr>


<tr><td>Month: </td><td><input type="month" name="month" /></td></tr>
<tr><td>Week: </td><td><input type="week" name="week" /></td></tr>
<tr><td>Number: </td><td><input type="number" name="num" /></td></tr>
<tr><td>Number (between 1 and 10): </td><td><input type="number" name="num"
min="1" max="10"/><
<tr><td>Email: </td><td><input type="email" name="email" /></td></tr>
<tr><td>File: </td><td><input type="file" name="file" /></td></tr>
<tr><td><input type="submit" value="Submit"/></td><td></td></tr>
</table>
</form>

Task 19: Create a Simple Website using HTML only as shown in Figure Below.

Task 20:
Create a list of items using ul and li tags .
• Each list item must have Alternative colors for the backgrounds.
• There is space between each item.

By: Dr. Zeeshan Bhatti


18
Web Engineering Tasks

Task 21:
Write a program to print a paragraph with different font and color.
Description: Create a webpage to print a paragraph with 4 – 5 sentences. Each sentence should be in a different
font and color.

Hint: Put the paragraph content inside the body tag and paragraph should be enclosed in <p> tag.

<html>
<body>
<p>
<font face="Arial" color="red"> Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s. </font>

<font face="Times New Roman" color="green">It is the core Lorem


Ipsum is simply dummy text of the printing and typesetting industry.
</font>

<font face="Verdana" color="blue"> It has survived not only five


centuries. </font>

<font face="Helvetica" color="yellow"> It is a long established fact


that a reader will be distracted by the readable content of a page
when looking at its layout. </font>
</p>
</body>
</html>

Website Project 1:
Create a Web Programming assignment submission Website. With links to each tasks . You can add
colors, images etc.

Web Systems and Technology


HTML Lab Task Assignment
Name: Student Name
Roll Number:
Task 1 | Task 2 | Task 3 | Task 4 | Task 5 | Task 6 | Task 7 | Task 8 | Task 9 | Task 10 | ….

By: Dr. Zeeshan Bhatti


19
Task 1: Write Task/Question here
Web Engineering Tasks

Task 2: Create a Web page with HTML having following structure and Data. Use Images of your
choice.

Website Project 3:
Create your personal Portfolio/CV website with minimum 6 pages (Home, Biography,
Education, Specialization, Expertise, Hobbies and MyWork). All Pages are Must. Choose any
title for your website but all navigation links should work properly with tabular form galle ries
and user all form tags in contact us for best practice.

By: Dr. Zeeshan Bhatti


20
Web Engineering Tasks

By: Dr. Zeeshan Bhatti


21

You might also like