Practical No1-5

Practical No.
01
Objective: To understand HTML basics for developing web applications
Description: HTML stands for Hyper Text Markup Language.HTML is the standard markup language
for creating Web pages. HTML describes the structure of a Web page. It consists of a series of elements
which 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.
A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Example Explained
 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's title bar
or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph
Required Tools: Notepad Editor and Web Browser google chrome or Mozilla Firefox.
Methodology:
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
</body>
</html>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Links
HTML links are defined with the <a> tag:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href=" https://quest.edu.pk/ ">This is a link</a>
</body>
</html>
Task 1. Align Attribute Example Task 2. The title Attribute Example

<html> <html>
<head> <head>
<title>Align Attribute Example</title> <title>The title Attribute Example</title>
</head> </head>
<body> <body>
<p align="left">This is left aligned</p> <h3 title="Hello HTML!">Titled Heading Tag
<p align="center">This is center aligned</p> Example</h3>
<p align="right">This is right aligned</p> </body>
</body> </html>
</html>
Task 3. The style Attribute Task 4. Bold Text Example

<html> <html>
<head> <head>
<title>The style Attribute</title> <title>Bold Text Example</title>
</head> </head>
<body> <body>
<p style="font-family:arial; <p>The following word uses a <b>bold</b>
color:#FF0000;">Some text...</p> typeface.</p>
</body> </body>
</html> </html>
Task 5. Italic Text Example Task 6. Underlined Text Example

<html> <html>
<head> <head>
<title>Italic Text Example</title> <title>Underlined Text Example</title>
</head> </head>
<body> <body>
<p>The following word uses a <i>italicized</i> <p>The following word uses a
typeface.</p> <u>underlined</u> typeface.</p>
</body> </body>
</html> </html>
Task 8. Monospaced Font Example

Task 7. Strike Text Example <html>
<html> <head>
<head> <title>Monospaced Font Example</title>
<title>Strike Text Example</title> </head>
</head> <body>
<body> <p>The following word uses a
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
<strike>strikethrough</strike> typeface.</p> </body>
</body> </html>
</html>
Task 9. Superscript Text Example

<html> Task 10. Subscript Text Example
<head> <html>
<title>Superscript Text Example</title> <head>
</head> <title>Subscript Text Example</title>
<body> </head>
<p>The following word uses a <body>
<sup>superscript</sup> typeface.</p> <p>The following word uses a
</body> <sub>subscript</sub> typeface.</p>
</html> </body>
</html>
HTML Images
HTML images are defined with the <img> tag. The source file (src), alternative text (alt), width,
and height are provided as attributes:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="image1.jpg" alt="image.com" width="104" height="142">
</body>
</html>
Lab Tasks:
SN Task / Query / Question Student’s response
Write HTML code for this kind of display:
Write a HTML code to display a poem in its

standard format with different paragraph colors.
Exp:
2
Write a HTML code which display a animated
3 image.
Outcome / Summary:
Lab Rubrics
Course: Web Engineering Course Code: SW207

Student Name: Student Roll No.:
2nd
Semester, Year: Semester, 2nd t Year Date:
Level of Achievement
SN Components Proficient Acceptable Unacceptable Marks Achieved
0.25 0.15 0
Students have Student Student don’t
carefully read and understands understand
Problem
understood the problems and problem.
1 Understanding and
problem. Students analysis in an
Analysis
gives the idea to acceptable way
solve problem
Student Student
demonstrated an demonstrated
Student was familiar ability to use the little or no ability
with the software/hardware to perform
Ability to use software/hardware but required experiment and
2
software/hardware and required minimal assistance from required
help from the the instructor unreasonable
instructor to perform amount of
the experiment assistance from
instructor
The lab /tasks are The lab The lab in its
complete and completion is just current state is
Completeness and
3 accurate in the acceptable not
accuracy
context of implementable
implementation
Able to explain Able to explain Unable to
design/program/simul some explain
4 Q &A ation/fundamental design/program/si design/program/s
concepts correctly mulation/fundame imulation/funda
ntal concepts mental Concepts
Total (1)
Name & Signature of Teacher: ______________________________ Date:
_________________
Practical No. 02
Objective:
To become familiar with HTML Table elements.
Description:
HTML tables allow web developers to arrange data into rows and columns. HTML tables can have
borders of different styles and shapes. HTML tables can have different sizes for each column, row or the
entire table.
For example:
By using the style attribute with the width or height properties we can specify the size of a table, row or
column. HTML tables can adjust the padding inside the cells, and also the space between the cells.
Methodology:
HTML Table:
Table Cells
<table>
<tr> Each table cell is defined by a <td> and
<th>Company</th> a </td> tag. td stands for table data.
<th>Contact</th>
<th>Country</th> Everything between <td> and </td> are the
</tr>
<tr> content of the table cell.
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td> <table>
<td>Germany</td> <tr>
</tr> <td>Emil</td>
<tr> <td>Tobias</td>
<td>Centro comercial Moctezuma</td> <td>Linus</td>
<td>Francisco Chang</td> </tr>
<td>Mexico</td> </table>
</tr>
</table>
Table Rows Table Headers
Each table row starts with a <tr> and ends with Sometimes you want your cells to be table header
a </tr> tag. cells. In those cases use the <th> tag instead of
the <td> tag:
tr stands for table row
th stands for table header
<table>
<tr> <table>
<td>Emil</td> <tr>
<td>Tobias</td> <th>Person 1</th>
<td>Linus</td> <th>Person 2</th>
</tr> <th>Person 3</th>
<tr> </tr>
<td>16</td> <tr>
<td>14</td> <td>Emil</td>
<td>10</td> <td>Tobias</td>
</tr> <td>Linus</td>
</table> </tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
HTML Table Tags
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table

<caption> Defines a table caption
<colgroup> Specifies a group of one or more

columns in a table for formatting
<col> Specifies column properties for each

column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

table, th, td {
Add a Border border: 1px solid black;
}
When you add a border to a table, you also add
borders around each table cell:
table, th, td {
Style Table Borders border: 1px solid white;
border-collapse: collapse;
If you set a background color of each cell, and }
give the border a white color (the same as the th, td {
document background), you get the impression of background-color: #96D4D4;
an invisible border: }
table, th, td {
Round Table Borders border: 1px solid black;
border-radius: 10px;
With the border-radius property, the borders get }
rounded corners:
th, td {
Dotted Table Borders
border-style: dotted;
With the border-style property, you can set the }
appearance of the border.
th, td {
Border Color With the border-color property, border-color: #96D4D4;
you can set the color of the border. }
<table style="width:100%">
Table Width <tr>
<th>Firstname</th>
To set the width of a table, add the style attribute <th>Lastname</th>
to the <table> element: <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>
<table style="width:100%">
Table Column Width <tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
To set the size of a specific column, add <td>Jill</td>
the style attribute on a <th> or <td> element: <td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Lab Tasks:
1 Create a time table of your class via

combining different
style,effects,color,size and padding.
Create a table in HTML web page
2 with zebra strip color style. With
any border style.
Combine the styling from the two

vertical and horizontal zebra strips
effects every other row and every
3 other column.
Note: If you use a transparent color

you will get an overlapping effect.
Outcome / Summary:
Lab Rubrics

2nd
0.25 0.15 0
Problem
1 Understanding and
Analysis
solve problem
Student Student
2
instructor
Completeness and
accuracy
implementation
Total (1)
_________________
Practical No. 03
Objective: To become familiar with list in HTML
Description: HTML, we can list items either in an ordered or unordered fashion. An ordered list uses
numbers or some sort of notation that indicates a series of items. For example, an ordered list can start
with number 1, and continue through 2, 3, 4, and so on. Your ordered list can also start with the letter A
and go through B, C, D, and so on.
Methodology:
An Ordered List with HTML
In HTML, we can create an ordered list using the <ol> tag. The ol in the tag stands for an ordered list.
Inside each of the ordered list elements <ol> and <ol />, we have to define the list items. We can define
the list items using the <li> tag.
Here is the complete HTML structure for an ordered list:
HTML code The output of the ordered list is:
<ol>
1. Eat
<li>Eat</li> 2. Code
<li>Code</li> 3. Sleep
<li>Sleep</li>
</ol>
So, we have the list of elements ordered with a number starting with 1 and incremented to 2 and 3.
Types of Ordered Lists in HTML: To order using the alphabet like A, B, C or a,b,c. You can do these
by specifying the value of the type attribute of the <ol> tag.
You can order the list using A, B, C letters by passing A as the type value.
<ol type="A">
The output looks like this:
<li>Eat</li>
A. Eat
<li>Code</li>
<li>Sleep</li> B. Code
</ol>
C. Sleep
Similarly, you can use lower case letters like a as the type value to list the elements with a, b, c, and so
on.
<ol type="a">
Here's the output:
<li>Eat</li>
a. Eat
<li>Code</li>
b. Code
<li>Sleep</li> c. Sleep
</ol>
If you want to use Roman numerals, use the value I for an ordered list with Roman numerals:
<ol type="I">
Here's the output:
<li>Eat</li>
I. Eat
<li>Code</li>
II. Code
<li>Sleep</li> III. Sleep
</ol>
An Unordered List in HTML

We use the <ul> tag to create an unordered list. As usual, we need to use the <li> tags
within <ul> and <ul/> to create the list items. The list items (li) inside the unordered list (ul) come with
the default style of bullet points – so each of the list items is preceded by a black dot
<ul style="list-style-type:disc;" >

Here's the output:
<li>Eat</li>
 Eat
<li>Code</li>
 Code
<li>Sleep</li>  Sleep
</ol>
HTML 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:
<dl> Here's the output:
<dt>Coffee</dt>
Coffee
<dd>- black hot drink</dd>
<dt>Milk</dt> - black hot drink
<dd>- white cold drink</dd> Milk
- white cold drink
</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
Lab Tasks:
Create a Webpage in HTML

for hotel/tuck shop/ food stall
1
by using order, unorder and
description list.
Outcome / Summary:
Lab Rubrics

2nd
0.25 0.15 0
Problem
1 Understanding and
Analysis
solve problem
Student Student
2
instructor
Completeness and
accuracy
implementation
Total (1)
_________________
Practical No. 04
Objective: To become familiar with block and inline elements
Description:
Block Elements
Block elements appear on the screen as if they have a line break before and after them. For example, the
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and
<address> elements are all block level elements. They all start on their own new line, and anything that
follows them appears on its own new line.
Inline Elements
Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line
of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>,
<code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements.
Grouping HTML Elements
There are two important tags which we use very frequently to group various other HTML tags (i) <div>
tag and (ii) <span> tag
I. The <div> tag
This is the very important block level tag which plays a big role in grouping various other HTML tags
and applying CSS on group of elements. Even now <div> tag can be used to create webpage layout where
we define different parts (Left, Right, Top etc.) of the page using <div> tag. This tag does not provide any
visual change on the block but this has more meaning when it is used with CSS.
II. The <span> tag
The HTML <span> is an inline element and it can be used to group inline-elements in an HTML
document. This tag also does not provide any visual change on the block but has more meaning when it is
used with CSS.
The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline
elements whereas the <div> tag is used with block-level elements.
The diagram below shows the difference between a block flow with 3 blocks and an inline flow with 3
inlines.
Required Tools: Notepad Editor and Web Browser like Internet Explorer or Mozilla Firefox.
Methodology:
Following is a simple example of <div> tag. We will learn Cascading Style Sheet (CSS) in a separate
chapter but we used it here to show the usage of <div> tag
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>

<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>


<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>
Example
Following is a simple example of <span> tag. We will learn Cascading Style Sheet (CSS) in a separate
chapter but we used it here to show the usage of <span> tag −
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>
</html>
Lab Tasks:
Create the following output by using the knowledge of this

1 lab.
Create a webpage with any contents in the following style.
Outcome / Summary:
Lab Rubrics

2nd
0.25 0.15 0
Problem
1 Understanding and
Analysis
solve problem
Student Student
2
instructor
Completeness and
accuracy
implementation
Total (1)
_________________
Practical No. 05
Objective: To Become familiar with HTML5 semantic and multimedia elements
Description:
Semantic Elements in HTML
A semantic element clearly describes its meaning to both the browser and the developer. Examples
of non-semantic elements: <div> and <span> Tells nothing about its content. Example of
semantic elements: <form>, <table>, and <article> - Clearly defines its content. A semantic Web allows
data to be shared and reused across applications, enterprises, and communities." Many web sites contain
HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header,
and footer.
In HTML there are some semantic elements that can be used to define different parts of a web page:
 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <summary>
 <time>
HTML - Embed Multimedia

Sometimes you need to add music or video into your web page. The easiest way to add video or sound to
your web site is to include the special HTML tag called <embed>. This tag causes the browser itself to
include controls for the multimedia automatically provided browser supports <embed> tag and given
media type.
You can also include a <noembed> tag for the browsers which don't recognize the <embed> tag. You
could, for example, use <embed> to display a movie of your choice, and <noembed> to display a single
JPG image if browser does not support <embed> tag.
Required Tools: Notepad Editor and Web Browser like Internet Explorer or Mozilla Firefox.
Methodology:
HTML <section> Element: The <section> element defines a section in a document. "A section is a
thematic grouping of content, typically with a heading."
Examples of where a <section> element can be used:
 Chapters
 Introduction
 News items
 Contact information
A web page could normally be split into sections for introduction, content, and contact information.
<section> Out put:

<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is WWF
an international organization working on issues
regarding the conservation, research and The World Wide Fund for Nature (WWF) is an
restoration of the environment, formerly named international organization working on issues
the World Wildlife Fund. WWF was founded in regarding the conservation, research and
1961.</p> restoration of the environment, formerly named
</section> the World Wildlife Fund. WWF was founded in
1961.
<section>
<h1>WWF's Panda symbol</h1> WWF's Panda symbol
<p>The Panda has become the symbol of WWF.
The well-known panda logo of WWF originated
from a panda named Chi Chi that was transferred The Panda has become the symbol of WWF. The
from the Beijing Zoo to the London Zoo in the well-known panda logo of WWF originated from a
same year of the establishment of WWF.</p> panda named Chi Chi that was transferred from
</section> the Beijing Zoo to the London Zoo in the same
year of the establishment of WWF.
HTML <article> Element
The <article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to distribute it independently from the
rest of the web site.
Examples of where the <article> element can be used:
 Forum posts
 Blog posts
 User comments
 Product cards
 Newspaper articles
The article element

<article>
<h2>Google Chrome</h2> Google Chrome
<p>Google Chrome is a web browser developed
by Google, released in 2008. Chrome is the Google Chrome is a web browser developed by
world's most popular web browser today!</p> Google, released in 2008. Chrome is the world's
</article> most popular web browser today!
<article> Mozilla Firefox

<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web Mozilla Firefox is an open-source web browser
browser developed by Mozilla. Firefox has been developed by Mozilla. Firefox has been the
the second most popular web browser since second most popular web browser since January,
January, 2018.</p> 2018.
</article>
Microsoft Edge
<article>
<h2>Microsoft Edge</h2>
Microsoft Edge is a web browser developed by
<p>Microsoft Edge is a web browser developed
Microsoft, released in 2015. Microsoft Edge
by Microsoft, released in 2015. Microsoft Edge
replaced Internet Explorer.
replaced Internet Explorer.</p>
</article>
HTML <header> Element
The <header> element represents a container for introductory content or a set of navigational links.
A <header> element typically contains:
 one or more heading elements (<h1> - <h6>)

 logo or icon
 authorship information
Note: You can have several <header> elements in one HTML document. However, <header> cannot be
placed within a <footer>, <address> or another <header> element.
What Does WWF Do?

<article>
<header> WWF's mission:
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p> WWF's mission is to stop the degradation of our
</header> planet's natural environment, and build a future in
<p>WWF's mission is to stop the degradation of which humans live in harmony with nature.
our planet's natural environment,
and build a future in which humans live in
harmony with nature.</p>
</article>
Semantic Elements in HTML
Below is a list of some of the semantic elements in HTML.
Tag Description
<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or

hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations,

diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
HTML Video
Just like the <img> tag, <video> takes an src attribute with which you need to specify the source of the
video.
<video src="weekend.mp4"></video> By default, it is displayed like an image in the browser:
The HTML <video> Element
To show a video in HTML, use the <video> element:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always
include width and height attributes. If height and width are not set, the page might flicker while the video
loads. The <source> element allows you to specify alternative video files which the browser may choose
from. The browser will use the first recognized format. The text between the <video> and </video> tags
will only be displayed in browsers that do not support the <video> element.
HTML <video> Autoplay
To start a video automatically, use the autoplay attribute:
<video width="320" height="240" autoplay>

</video>
Add muted after autoplay to let your video start playing automatically (but muted):
Example
<video width="320" height="240" autoplay muted>
</video>
The HTML <audio> Element
To play an audio file in HTML, use the <audio> element:
Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
The controls attribute adds audio controls, like play, pause, and volume. The <source> element allows
you to specify alternative audio files which the browser may choose from. The browser will use the first
recognized format. The text between the <audio> and </audio> tags will only be displayed in browsers
that do not support the <audio> element.
HTML <audio> Autoplay
To start an audio file automatically, use the autoplay attribute:
Example
<audio controls autoplay>
</audio>
Example
<audio controls autoplay muted>
</audio>
HTML YouTube Videos
Playing a YouTube Video in HTML
 Upload the video to YouTube

 Take a note of the video id
 Define an <iframe> element in your web page
 Let the src attribute point to the video URL
 Use the width and height attributes to specify the dimension of the player
 Add any other parameters to the URL (see below)
Example
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
YouTube Autoplay + Mute
You can let your video start playing automatically when a user visits the page, by adding autoplay=1 to
the YouTube URL. However, automatically starting a video is annoying for your visitors!
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always
allowed.
Add mute=1 after autoplay=1 to let your video start playing automatically (but muted).
YouTube - Autoplay + Muted

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
Background Audio
You can use HTML <bgsound> tag to play a soundtrack in the background of your webpage. This tag is
supported by Internet Explorer only and most of the other browsers ignore this tag. It downloads and
plays an audio file when the host document is first downloaded by the user and displayed. The
background sound file also will replay whenever the user refreshes the browser.
Note − The bgsound tag is deprecated and it is supposed to be removed in a future version of HTML. So
they should not be used rather, it's suggested to use HTML5 tag audio for adding sound. But still for
learning purpose, this chapter will explain bgsound tag in detail.
This tag is having only two attributes loop and src. Both these attributes have same meaning as explained
above.
Here is a simple example to play a small midi file −
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<bgsound src = "/html/yourfile.mid">
<noembed><img src = "yourimage.gif" ></noembed>
</bgsound>
</body>
</html>
This will produce the blank screen. This tag does not display any component and remains hidden.
Internet Explorer can also handle only three different sound format files − wav, the native format for PCs;
au, the native format for most Unix workstations; and MIDI, a universal music-encoding scheme.
Lab Tasks:
Create a webpage for nursery

kids
 using sematic elements
1 and insert educational

material.
 Add background audio
 Add different videos
Outcome / Summary:
Lab Rubrics

2nd
0.25 0.15 0
Problem
1 Understanding and
Analysis
solve problem
Student Student
2
instructor
Completeness and
accuracy
implementation
Total (1)
_________________

Practical No1-5

Uploaded by

Document Information

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

Practical No1-5

Uploaded by

Copyright:

Available Formats

Practical No.

A Simple HTML Document

<h1>My First Heading</h1>

<a href=" https://quest.edu.pk/ ">This is a link</a>

Task 1. Align Attribute Example Task 2. The title Attribute Example

Task 3. The style Attribute Task 4. Bold Text Example

Task 5. Italic Text Example Task 6. Underlined Text Example

Task 8. Monospaced Font Example

Task 9. Superscript Text Example

SN Task / Query / Question Student’s response

Write HTML code for this kind of display:

Write a HTML code to display a poem in its

Course: Web Engineering Course Code: SW207

HTML Table Tags

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<colgroup> Specifies a group of one or more

<col> Specifies column properties for each

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

SN Task / Query / Question Student’s response

1 Create a time table of your class via

Combine the styling from the two

Note: If you use a transparent color

Course: Web Engineering Course Code: SW207

HTML code The output of the ordered list is:

An Unordered List in HTML

<ul style="list-style-type:disc;" >

HTML Description Lists

<dl> Here's the output:

HTML List Tags

<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

SN Task / Query / Question Student’s response

Create a Webpage in HTML

Course: Web Engineering Course Code: SW207

SN Task / Query / Question Student’s response

Create the following output by using the knowledge of this

Course: Web Engineering Course Code: SW207

HTML - Embed Multimedia

Examples of where a <section> element can be used:

<section> Out put:

HTML <article> Element

The <article> element specifies independent, self-contained content.

The article element

<article> Mozilla Firefox

HTML <header> Element

 one or more heading elements (<h1> - <h6>)

What Does WWF Do?

Semantic Elements in HTML

Below is a list of some of the semantic elements in HTML.

<article> Defines independent, self-contained content

<aside> Defines content aside from the page content

<details> Defines additional details that the user can view or

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content, like illustrations,