Lab Manual Waqas Bhatti

Lab Manual
Name:
Waqas Bhatti
Roll No:
73
Submitted To:
Mam DurdanaRehman
MNS University of Engineering and
Technology Multan
Introduction:
What is HTML ?
HTML Stand for Hyper Text markup Language. HTML is the standard markup Language for
creating Web pag.HTML elements are the building blocks of HTML page.
Basic HTML tags
Structural Tags:-
<HTML>
These tags enclose the entire Web page document.
</html>
<head>
These tags enclose the Head part of the document.
</head>
<title>
These tags enclose the title of the document.
Sample Structure of a Web page
<html>
<head>
<title> Lab Manual</title>
</head>
<body>
This is Lab Manual
</body>
</html>
Header Tags:
HTML headings are titles or subtitles that you want to display on a webpage.
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
The HTML <p> element defines a paragraph&

tag HTML Paragraphs
Line break
Used whan the webmaster wants a carriage return but doesn,t want
a blank line to follow
Example:-
Text a
<p>text a</p>
Text b
<p>text b</p>
Text c
<p>text c</p><br>
<p>text d</p><br> Text d
This paragraph
contains a lot of lines
in the source code,
but the browser
ign<p>
ores it.
</p>
<br>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
This paragraph contains a lot of lines in the source code, but the browser ignores it.
This paragraph contains a lot of spaces in the source code, but the browser ignores it.
The number of lines in a paragraph depends on the size of the browser window. If you resize the
browser window, the number of lines in this paragraph will change.
Horizontal Rule:-
The <HR> tag puts a graphical line across the page.
<html>
<body>
<p>This is some text. This is some text. This is some text.</p>
This is some text. This is some text. This is some

text.
<hr style="width:50%;text-align:left;margin-left:0">
This is some text. This is some text. This is some

<p>This is some text. This is some text. This is some text.</p> text.
</body>
</html>
Text Formatting tags & element
Formatting elements were designed to display special types of text:
 <b> - Bold text

 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
HTML <b> tag
The HTML <b> element defines bold text, without any extra importance.
<p>This text is normal.</p> this text is normal
<p><b>This text is bold.</b></p> this text is normal
The HTML <strong> element defines text with strong importance. The content
inside is typically displayed in bold.
<p>This text is normal.</p> This text is normal.
<p><strong>This text is important!</strong></p> This text is important!
The <i> tag is often used to indicate a technical term, a phrase from another
language, a thought, a ship name, etc.
<p>This text is normal.</p> This text is normal.
This text is itali
<p><i>This text is italic.</i></p>
The HTML <em> element defines emphasized text. The content inside is
typically displayed in italic.
<p>This text is normal.</p?>This text is normal.
This text is emphasized.
<p><em>This text is emphasized.</em></p>
HTML <small> Element
The HTML <small> element defines smaller text:
<p>This is some normal text.</p>

<p><small>This is some smaller text.</small></p>
This is some normal text.
This is some smaller text.
HTML <mark> Element
The HTML <mark> element defines text that should be marked or highlighted:
<p>Do not forget to buy <mark>milk</mark> today.</p>
Do not forget to buy milk today.
HTML <del> Element
The HTML <del> element defines text that has been deleted from a document.
Browsers will usually strike a line through deleted text:
<p>My favorite color is <del>blue</del> red.</p>
My favorite color is blue red.
HTML <ins> Element
The HTML <ins> element defines a text that has been inserted into a
document. Browsers will usually underline inserted text:
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
My favorite color is blue red.
HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a
character below the normal line, and is sometimes rendered in a smaller
font. Subscript text can be used for chemical formulas, like H 2O:
<p>This is <sub>subscripted</sub> text.</p> This is subscripted text.
HTML <sup> Element
The HTML <sup> element defines superscript text. Superscript text appears
half a character above the normal line, and is sometimes rendered in a
smaller font. Superscript text can be used for footnotes, like WWW [1]:
<p>This is <sup>superscripted</sup> text.</p> This is superscripted text.
HTML Styles
The HTML style attribute is used to add styles to an element, such as color,
font, size, and more.
ody style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
This is a heading
</body> This is a paragraph.
</html>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

This is a heading
This is a paragraph.
HTML Quotation and Citation Elements
In this chapter we will go through the <blockquote>,<q>, <abbr>, <address>, <cite>,

and <bdo> HTML elements.
HTML <blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from another
source.
Browsers usually indent <blockquote> elements
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the
world's leading conservation organization, WWF works in nearly 100
countries. At every level, we collaborate with people around the world to
develop and deliver innovative solutions that protect communities, wildlife,
and the places in which they live.
</blockquote>
Here is a quote from WWF's website:
For 60 years, WWF has worked to help people and nature thrive. As the world's leading
conservation organization, WWF works in nearly 100 countries. At every level, we
collaborate with people around the world to develop and deliver innovative solutions that
protect communities, wildlife, and the places in which they live.
HTML <q> for Short Quotations
The HTML <q> tag defines a short quotation.
HTML <abbr> for Abbreviations
The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML",

"CSS", "Mr.", "Dr.", "ASAP", "ATM".
<p>The <abbr title="World Health Organization">WHO</abbr> was

founded in 1948.</p>
<p>Marking up abbreviations can give useful information to browsers,

translation systems and search-engines.</p>
The WHO was founded in 1948.
Marking up abbreviations can give useful information to browsers, translation systems and
search-engines.
HTML <address> for Contact Information
The HTML <address> tag defines the contact information for the author/owner
of a document or an article.
<p>The HTML address element defines contact information (author/owner)

of a document or article.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
The HTML address element defines contact information (author/owner) of a document or article.
Written by John Doe.

Visit us at:
Example.com
Box 564, Disneyland
USA
HTML <cite> for Work Title
The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem,
a song, a movie, a painting, a sculpture, etc.).
Note: A person's name is not the title of a work.
The text in the <cite> element usually renders in italic
<p>The HTML cite element defines the title of a work.</p>
<p>Browsers usually display cite elements in italic.</p>
<imgsrc="img_the_scream.jpg" width="220" height="277" alt="The

Scream">
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
The HTML cite element defines the title of a work.
Browsers usually display cite elements in italic.
The Scream by Edvard Munch.Painted in 1893.

HTML <bdo> for Bi-Directional Override
BDO stands for Bi-Directional Override.
The HTML <bdo> tag is used to override the current text direction:
<html>
<body>
<p>If your browser supports bi-directional override (bdo), the next line will
be written from right to left (rtl):</p>
<bdodir="rtl">This line will be written from right to left</bdo>
</body>
</html>
If your browser supports bi-directional override (bdo), the next line will be written from right to
left (rtl):
This line will be written from right to left.
HTML Comment Tag
You can add comments to your HTML source by using the following syntax:

<html>
<body>
<p>This is a paragraph.</p> This is a paragraph.
This is a paragraph to

<p>This is a paragraph too.</p>
</body>
</html>
HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX,
HSL, RGBA, or HSLA values.
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Loremipsumdolor sitamet, consectetueradipiscingelit,

seddiamnonummynibheuismodtinciduntutlaoreetdolore magna
aliquameratvolutpat.
Utwisienim ad minim veniam,

quisnostrudexercitationullamcorpersuscipitlobortisnislutaliquip ex
eacommodoconsequat.
</p>
</body>
</html>
Hello World
Loremipsumdolor sitamet, consectetueradipiscingelit,

seddiamnonummynibheuismodtinciduntutlaoreetdolore magna aliquameratvolutpat. Utwisienim
ad minim veniam, quisnostrudexercitationullamcorpersuscipitlobortisnislutaliquip ex
eacommodoconsequat.
What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out, what
background images or background colors are to be used, different displays
for different devices and screen sizes, and much more!
Using CSS
CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements
 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html> A Blue Heading
A red paragraph
Internal CSS
An internal CSS is used to define a style for a single HTML page
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
This is a heading
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each
HTML page:
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body> This is a heading

<h1>This is a heading</h1> This is a paragraph.
</body>
</html>
HTML Links
Links are found in nearly all web pages. Links allow users to click their way
from page to page.
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little
hand.
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
Example:-
<html>
<body>
<h1>HTML Links</h1>
<p><a href="https://www.w3schools.com/">Visit
W3Schools.com!</a></p>
</body>
</html> HTML Links
Visit W3Schools.com!
HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window.
To change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
 _self - Default. Opens the document in the same window/tab as it was

clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window
Example
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
The target Attribute
Visit W3Schools!
If target="_blank", the link will open in a new browser window or tab.
Absolute URLs vs. Relative URLs
Both examples above are using an absolute URL (a full web address) in
the href attribute.
A local link (a link to a page within the same website) is specified with
a relative URL (without the "https://www" part):
Example Absolute URLs

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
W3C
<p><a href="https://www.google.com/">Google</a></p>
Google
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p> Relative URLs
<p><a href="/css/default.asp">CSS Tutorial</a></p>
HTML Images
HTML Images
CSS Tutorial
Images can improve the design and the appearance of a web page.
Example
<img src="img_girl.jpg" alt="Girl in a jacket">
HTML Image
HTML Favicon
A favicon is a small image displayed next to the page title in the browser tab.
Example
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1> This is a Heading

This is a paragraph.
</body>
</html>
HTML Table
A table in HTML consists of table cells inside rows and columns.
<html>
<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>
<p>To understand the example better, we have added borders to

the table.</p>
</body>
</html>
A basic HTML table
Company Contact Country

Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
To understand the example better, we have added borders to the table.
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Unordered HTML List
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) by default:
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
An unordered HTML list

 Coffee
 Tea
 Milk
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
An ordered HTML list
1. Coffee
2. Tea
3. Milk
<htm>
<head>
<title>MNS UET FORM</title>
<body>
<center>
<h2><u>MNS UNIVERISITY OF ENGINEERING & TECHNOLOGY,MULTAN</u></h2>
<h3>Application Form For Job</h3
<h3>INSTRUCTIONS <h3>
</center>
<ol type="1">
<li>the Application form must be filled in and signed by the<br> applicant</li><br>
<li>Fill up the Application form in black latter<br></li>
<li>The Application must be accompanied with attested photocoies of allof the

relevant certificates/testimonials and<br>
three padport size photographs</li>
<li>the Application form complete in all respect should the office of the Resgister. Not
later then the due date.<br>
incomplete Application form or those recevid later the due date will not be
entertained<br></li>
<li>In service Application should submit their Application through proper

channel.otherwise his<br>Application may not be entertained.<br></li>
</ol>
<p style="float:right;"> <img src="pic" width="200" height="200"
title="PHOTOGRAPH" alt="PHOTOGRAPH"> </p>
<ol type="1">
<li>Application for the post

of....................................................................................................<br></li>
<li>Name of
applicant..............................................................................................................<br></
li>
<li>Date of brith(in figures and

word).............................................................................................<br>
.................................................................................................................................... <br
></li>
<li>Father,s
Name...................................................................................................................<br></
li>
<li>present
address..................................................................................................................<br></
li>
<li>Ph No:.......................................................mobile
no...........................................................<br></li>
<li>Permanent
address................................................................................................................<br></
li>
<li>ph no:........................................................mobile
no..........................................................<br></li>
<li>Computerized national identify card

no...........................................................................................<br><br><br></li>
<li>Academic Qualication:</li>
<table border="2">
<tr>
<th>Name of<br> Examination <br>passed</th>
<th>Your of<br> passed</th>
<th>institution <br>attended</th>
<th>grad/division <br>with<br> mark obtained</th>
<th>subject <br>student</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr><tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br><br>
<table border="1">
<li>Experience,including past Univerisity service,if,any:<br></li>
<tr>
<th>Name of <br>institution <br>service</th>
<th>Capacity in <br>which <br>service</th>
<th>Dates<br> Form:.....To</th>
<th>Basic scale <br>and last <br>pay drawn</th>
<th>Reasons for <br>leaving the <br>service</th>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br><br>
<table border="1">
<li>List of documents attached<br></li>
<tr>
<td width="100"> </td>
<td width="100"></td>
<td width="100"></td>
<td width="100" ></td>

</tr>
<tr>
The <div> element is used as a container for other HTML elements.
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<td > </td>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr>
<td> </td>
<td ></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td ></td>
<td ></td>
<td></td>
</tr>
<tr>
<td> </td>
<td ></td>
<td ></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td ></td>
<td></td>
</tr>
<tr>
<td> </td>
<td ></td>
<td ></td>
<td></td>
</tr>
</table>
</ol>
<p style="float:left;"><b>Declarationl</b></p>
<p style="float:left;">solemnly declare that the information given in the Form is correct. in
case,any part of date<br>
the given information in find wrong. i shall be liable to disciplinary actuion and dismissal<br>
form service.</p>
<p style="float:left;">Date.....................
<p>...................signature of applicant
</p>
</body> </html>
MNS UNIVERISITY OF ENGINEERING & TECHNOLOGY,MULTAN
Application Form For Job
INSTRUCTIONS
1. the Application form must be filled in and signed by the

applicant
2. Fill up the Application form in black latter

3. The Application must be accompanied with attested photocoies of allof the relevant
certificates/testimonials and
three padport size photographs
4. the Application form complete in all respect should the office of the Resgister. Not later
then the due date.
incomplete Application form or those recevid later the due date will not be entertained
5. In service Application should submit their Application through proper channel.otherwise
his
Application may not be entertained.
1. Application for the post of....................................................................................................
2. Name of applicant..............................................................................................................
3. Date of brith(in figures and
word).............................................................................................
....................................................................................................................................
4. Father,s Name...................................................................................................................
5. present address..................................................................................................................
6. Ph No:.......................................................mobile no...........................................................
7. Permanent address................................................................................................................
8. ph no:........................................................mobile no..........................................................
9. Computerized national identify card
no...........................................................................................
10. Academic Qualication:
Name of grad/division
Your of institution subject
Examination with
passed attended student
passed mark obtained
11. Experience,including past Univerisity service,if,any:
Name of Capacity in Basic scale Reasons for

Dates
institution which and last leaving the
Form:.....To
service service pay drawn service
12. List of documents attached
Declarationl
solemnly declare that the information given in the Form is correct. in case,any part of date
the given information in find wrong. i shall be liable to disciplinary actuion and dismissal
form service.
Date.....................
...................signature of applicant
HTML Div Element
<div>
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>
<div>
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million inhabitants.</p>
</div>
Output:-
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
HTML Forms
An HTML form is used to collect user input. The user input is most often sent
to a server for processing.
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.
The <input> Element
The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on
the type attribute.
Here are some examples:
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many

choices)
<input Displays a checkbox (for selecting zero or more of

type="checkbox"> many choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
Text Fields
The <input type="text"> defines a single-line input field for text input.
<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20 characters.</p>
</body>
</html>
Text input fields
First name:
J ohn
Last name:
Doe
Note that the form itself is not visible.
Also note that the default width of text input fields is 20 characters.
The <label> Element
Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focuses on the input
element.
The <label> element also helps users who have difficulty clicking on very small
regions (such as radio buttons or checkboxes) - because when the user clicks
the text within the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
<html>
<body>
<h2>Radio Buttons</h2>
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language"

value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
</body>
</html>
Radio Buttons
Choose your favorite Web language:
HTML
CSS
JavaScript
HTML Input Types
Here are the different input types you can use in HTML:
 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">
 <html>
 <body>

 <h2>Text field</h2>
 <p>The <strong>input type="text"</strong> defines a one-line text input
field:</p>

 <form action="/action_page.php">
 <label for="fname">First name:</label><br>
 <input type="text" id="fname" name="fname"><br>
 <label for="lname">Last name:</label><br>
 <input type="text" id="lname" name="lname"><br><br>
 <input type="submit" value="Submit">
 </form>

 <p>Note that the form itself is not visible.</p>
 <p>Also note that the default width of a text field is 20 characters.</p>

 </body>
 </html>
 Text field
 The input type="text" defines a one-line text input field:
 First name:
Last name:
Submit
 Note that the form itself is not visible.

 Also note that the default width of a text field is 20 characters.
<html>
<head>
<title text align="center">
Login Page
</title>
<style>
form{
background: green;
width: 370;
margin:auto;
border-radius: 30px;
padding-left: 40;
padding-botton: 10
.container{
margin-left: 10;
button{
width:49%;
border-radius: 25px;
</style>
</head>
<body bgcolor="PINK";>
<h3 style="text-align:center";>Login Page</h3>
<form action="text">
<br>
User Name<br><Input type="text"
Name="Username"placeholder="type
your user name" ></br></br>
Password<br><input type="Password"
name="password" placeholder="type
your password">
<br><br>
<button type="button"><a href="#" style="text-decoration: none;">log in here </a> </button>

<br>
<br>
<input type="checkbox" name="myclass" value ="value="remember me">Remember me
<br>
<br>
<a href="#" style="text-decoration:none;">Forget Password</a>
</body>
</html>
CSS Introduction:-
CSS is the language we use to style a Web page.

What is CSS?
 CSS stands for Cascading Style Sheets

 CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages
all at once
 External stylesheets are stored in CSS files
 CSS Syntax
Selecter Declaeaction
Declaeaction
h1
h1
{ Coloer:blue; fount-size:12px;}
property value property value
Example
In this example all <p> elements will be center-aligned, with a red text
color:
p{
color: red;
text-align: center; Hello World!
These paragraphs are styled with CSS.
}
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>

<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>
CSS background-color example!
This is a text inside a div element.
This paragraph has its own background color.
We are still in the div element.
p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Result:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A hidden border.
A mixed border.
CSS Margins
The CSS margin properties are used to create space around elements, outside
of any defined borders.
With CSS, you have full control over the margins. There are properties for
setting the margin for each side of an element (top, right, bottom, and left).
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element:
 margin-top
 margin-right
 margin-bottom
 margin-left
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
 padding-top
 padding-right
 padding-bottom
 padding-left
<html>
<head>
<style>
div {
border: 1px solid black;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of

30px, a bottom padding of 50px, and a left padding of 80px.</div>
</body>
</html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of

30px, a bottom padding of 50px, and a left padding of 80px.</div>
</body>
</html>
Using individual padding properties
This div element has a top padding of 50px, a right

padding of 30px, a bottom padding of 50px, and a
left padding of 80px.
Bottom of Form
<html>
<head>
<style>
p {outline-color:red;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>
<h2>The outline-style Property</h2>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>
</body>
</html>
CSS Fonts
Choosing the right font for your website is important!

1. Serif fonts have a small stroke at the edges of each letter. They create
a sense of formality and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They
create a modern and minimalistic look.
3. Monospace fonts - here all the letters have the same fixed width.
They create a mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.
CSS Icons
Icons can easily be added to your HTML page, by using an icon

library.
<h1>Font Awesome icon library</h1>
<p>Some Font Awesome icons:</p>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
CSS Links
With CSS, links can be styled in many different ways.
<html>
<head>
<style>
a{
Style a link with a color
color: hotpink;
This is a link
}
</style>
</head>
<body>
<h2>Style a link with a color</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a solid border for <table>, <th>, and <td>
elements:
Firstname Lastname
Peter Griffin
Lois Griffin
CSS Layout - The display Property
The display property is the most important CSS property for controlling layout.
The display Property
The display property is used to specify how an element is shown on a web

page.
Every HTML element has a default display value, depending on what type of
element it is. The default display value for most elements is block or inline.
The display property is used to change the default display behavior of HTML
elements.
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).
The <div> element is a block-level element.
Examples of block-level elements:
 <div>
 <h1> - <h6>
 <p>
 <form>
 <header>
 <footer>
 <section>
<html>
<head>
<style>
li {
display: inline;
</style>
</head>  HTML
<body>
<ul>  CSS
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>  JavaScript
<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>
CSS Layout - The position Property

he position property specifies the type of positioning method used for an
element (static, relative, fixed, absolute or sticky).
The position Property
The position property specifies the type of positioning method used for an
element.
There are five different position values:
 static
 relative
 fixed
 absolute
 sticky
<style>
div.static {
position: static;
position: static;
border: 3px solid #73AD21;
An element with position: static; is not positioned in any special
} way; it is always positioned according to the normal flow of the
page:
</style>
</head> This div element has position: static;
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way; it is always positioned
according to the normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21; }
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it
always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
</html>
CSS Layout - float and clear
The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the cleared
element and on which side.
The float Property

The float property is used for positioning and formatting content e.g. let an
image float left to the text in a container.
The float property can have one of the following values:
 left - The element floats to the left of its container

 right - The element floats to the right of its container
 none - The element does not float (will be displayed just where it
occurs in the text). This is default
 inherit - The element inherits the float value of its parent
<html>
<head>
<style>
img {
float: right;
</style>
</head>
<body>
<h2>Float Right</h2>
<p>In this example, the image will float to the right in the paragraph, and the text in the
paragraph will wrap around the image.</p>
<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-

left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum
interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl
est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus
interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim
ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida
venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>
CSS Pseudo-classes
What are Pseudo-classes?
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
 Style an element when a user mouses over it

 Style visited and unvisited links differently
 Style an element when it gets focus
 Syntax
 The syntax of pseudo-classes:
 selector:pseudo-class {
property: value;
}
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
/* visited link */
a:visited {
color: green;
/* mouse over link */
a:hover {
color: hotpink;
}
Styling a link depending on state
/* selected link */ This is a link
a:active { Note: a:hover MUST come after a:link and a:visited in the CSS definition in
order to be effective.
color: blue;
Note: a:active MUST come after a:hover in the CSS definition in order to be
}
effective.
</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>
</body>
</html>
CSS Pseudo-elements
What are Pseudo-Elements?
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
 Style the first letter, or line, of an element

 Insert content before, or after, the content of an element
Syntax
The syntax of pseudo-elements:
selector::pseudo-element {
property: value;
} You can use the ::first-line pseudo-element to add a special
<html> effect to the first line of a text. Some more text. And even more,
and more, and more, and more, and more, and more, and
<head>
more, and more, and more, and more, and more, and more.
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
</style>
</head>
<body>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text.
Some more text. And even more, and more, and more, and more, and more, and more, and
more, and more, and more, and more, and more, and more.</p>
</body>
</html>
Navigation Bars
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking
navigation bars.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li>
elements makes perfect sense:
Example
<html>
<body>
 Home
<ul>  News
 Contact
<li><a href="#home">Home</a></li>  About
<li><a href="#news">News</a></li>
Note: We use href="#" for test links. In a real web site
this would be URLs.
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>
CSS Vertical Navigation Bar

<html>
<head>
<style>
ul { Home
list-style-type: none; News
Contact
margin: 0;
About
padding: 0;
} A background color is added to the links to show the link area.
li a {
Notice that the whole link area is clickable, not just the text.
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
</ul>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>
CSS Horizontal Navigation Bar
Horizontal Navigation Bar
 Home
There are two ways to create a horizontal navigation bar.

Using inline or floating list items.
Inline List Items
One way to build a horizontal navigation bar is to specify the <li> elements
as inline, in addition to the "standard" code from the previous page:
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
Hohe News Contacts About
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
</ul>
</body>

Lab Manual Waqas Bhatti

Uploaded by

Copyright:

Available Formats

Lab Manual Waqas Bhatti

Uploaded by

Document Information

Original Title

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 Manual Waqas Bhatti

Uploaded by

Copyright:

Available Formats

Lab Manual

Basic HTML tags

These tags enclose the entire Web page document.

These tags enclose the Head part of the document.

These tags enclose the title of the document.

Sample Structure of a Web page

<title> Lab Manual</title>

This is Lab Manual

The HTML <p> element defines a paragraph&

The <HR> tag puts a graphical line across the page.

<p>This is some text. This is some text. This is some text.</p>

This is some text. This is some text. This is some

This is some text. This is some text. This is some

Text Formatting tags & element

Formatting elements were designed to display special types of text:

 <b> - Bold text

HTML <b> tag

<p>This text is normal.</p> this text is normal

<p><b>This text is bold.</b></p> this text is normal

<p>This text is normal.</p> This text is normal.

<p><strong>This text is important!</strong></p> This text is important!

This text is itali

<p><i>This text is italic.</i></p>

<p>This text is normal.</p?>This text is normal.

This text is emphasized.

<p><em>This text is emphasized.</em></p>

HTML <small> Element

The HTML <small> element defines smaller text:

<p>This is some normal text.</p>

This is some normal text.

This is some smaller text.

HTML <mark> Element

<p>Do not forget to buy <mark>milk</mark> today.</p>

Do not forget to buy milk today.

HTML <del> Element

<p>My favorite color is <del>blue</del> red.</p>

My favorite color is blue red.

HTML <ins> Element

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

My favorite color is blue red.

HTML <sub> Element

<p>This is <sub>subscripted</sub> text.</p> This is subscripted text.

HTML <sup> Element

<p>This is <sup>superscripted</sup> text.</p> This is superscripted text.

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

HTML Quotation and Citation Elements

In this chapter we will go through the <blockquote>,<q>, <abbr>, <address>, <cite>,

HTML <blockquote> for Quotations

Browsers usually indent <blockquote> elements

<p>Here is a quote from WWF's website:</p>

Here is a quote from WWF's website:

HTML <abbr> for Abbreviations

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML",

<p>The <abbr title="World Health Organization">WHO</abbr> was

<p>Marking up abbreviations can give useful information to browsers,

The WHO was founded in 1948.

HTML <address> for Contact Information

<p>The HTML address element defines contact information (author/owner)