Assignment 1: TO STUDY HTML, HTML5 & CSS

You should read following topics before starting this exercise

1. Internet and web

2. Web browsers and web servers
3. HTML tags

Internet and the Web

The internet is a collection of connected computers that communicate with each other. The Web is a
collection of protocols (rules) and software’s that support such communication.
In most situations when two computers communicate, one acts as a server and the other as a client,
known as client-server configuration.
Browsers running on client machines request documents provided by servers. Browsers are so
called because they allow the user to browse through the documents available on the webservers. A
browser initiates the communication with a server, requesting for a document. The server that is
continuously waiting for a request, locates the requested document and sends it to the browser,
which displays it to the user.
The most common protocol on the web is Hyper Text Transfer protocol (HTTP)
The most commonly used browsers are Microsoft Internet Explorer (IE).Netscape browser and
Mozilla. The most commonly used web servers are Apache and Microsoft Internet Information
server (IIS).

HTML Basics

Hyper Text Markup Language is a simple markup language used to create platform- independent
hypertext documents on the World Wide Web. Most hypertext documents on theweb are written in
HTML.

You will need a simple text editor to write html codes. For example you can use notepad in
windows and Vi editor in Linux operating system. You will need a browser to view thehtml code,
you can use IE on windows and Mozilla on Linux operating system.

HTML tags are somewhat like commands in programming languages. Tags are not
themselvesdisplayed, but tell the browser how to display the document’s contents.
Every HTML tag is made up of a tag name, sometimes followed by an optional list of attributes, all
of which appears between angle brackets < >. Nothing within the brackets will bedisplayed in the
browser. The tag name is generally an abbreviation of the tag’s function.

1
Attributes are properties that extend or refine the tag’s function. The name and attributes within
a tag are not case sensitive. Tag attributes, if any, belong after the tag name, each separated by
one or more spaces. Their order of appearance is not important. Most attributestake values,
which follow an equal sign (=) after the attribute’s name. Values are limited to 1024 characters
in length and may be case sensitive. Sometimesthe value needs to appear in quotation marks
(double or single).
Most HTML tags are containers, meaning they have a beginning start tag and an end tag. Anend
tag contains the same name as the start tag, but it is preceded by a slash (/). Few tags do not
have end tags.

HTML5

HTML5 will be the new standard for HTML.

HTML5 is still a work in progress. However, the major browsers support many of the new HTML5
elements and APIs.

HTML5 - New Features

New features of HTML5 are based on HTML, CSS, DOM, and JavaScript. To better handle today's
internet use, HTML5 also includes new elements for drawing graphics, adding media content,
better page structure, better form handling, and several APIs to drag/drop elements, find
Geolocation, include web storage, application cache, web workers, etc. Some of the most
interesting new features in HTML5 are:

● The <canvas> element for 2D drawing

● The <video> and <audio> elements for media playback
● Support for local storage
● New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
● New form controls, like calendar, date, time, email, url, search

Browser Support forHTML5

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5
features and Internet Explorer 9.0 will also have support for some HTML5 functionality.
The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent
support for HTML5.

The HTML5 <!DOCTYPE>

In HTML5 there is only one <!doctype> declaration, and it is very simple:

<!DOCTYPE html>

2
The <!DOCTYPE> declaration helps the browser to display a web page correctly. There are many
different documents on the web, and a browser can only display an HTML page 100%correctly if it
knows the HTML type and version used.

Header and Footer:

The <header> tag specifies a header for a document or section. The <header> element shouldbe
used as a container for introductory content or set of navigational links.You can have several
<header> elements in one document.

Note: A <header> tag cannot be placed within a <footer>, <address> or another

<header>element.

The <footer> tag defines a footer for a document or section. A <footer> element should contain
information about its containing element. A footer typically contains the author of thedocument,
copyright information, links to terms of use, contact information, etc.

You can have several <footer> elements in one document.

Some HTML tags required to design simple web pages are given below

Tag Description
<!DOCTYPE> Defines the document type

<!--...--> Allows one to insert a line of browser-invisible comments

In the document
<HTML> <HTML>tagtellsthebrowserthatthisisstartoftheHTMLand</HTML>marksits end.
</HTML>
<HEAD> Every html page must have a header.
</HEAD> < Head> tag defines the Head Segment of an html document

<TITLE> One of the most important parts of a header is title. Title is the small text that
</TITLE> appears in title bar of viewer's browser.

<BODY> Every web page needs a body in which one can enter web page content
</BODY>
<BR> A single tag used to break lines

<p> A single tag used to break text. Breaking text with the<p>tag adds vertical spacing

<B></B> To make text appear bold

<U></U> To make text appear underlined

<I></I> To make text appear italic

3
 <CENTER> Centers enclosed text
</CENTER>
<BIG></BIG> Sets the type one font size larger than the surrounding text

<SMALL> Sets the type one font size smaller than the surrounding text
</SMALL>
<SUB></SUB> Formats enclosed text as subscript.

<SUP></SUP> Formats enclosed text as superscript.

<MARQUEE> Creates a scrolling-text marquee area.

</MARQUEE>
<IMG> Loads an inline image

<Header> The <header> tag specifies a header for a document or section. The
<header> element should be used as a container for introductory content or set of
navigational links.
You can have several <header>elements in one document. Note:A<header>
tag cannot be placed within a <footer>, <address>or another
<header>element
<footer> The<footer>tag defines footer for a document or section.
A<footer>element should contain information about its containing
element.

A footer typically contains the author of the document,copy right information,

links to terms of use, contact information, etc.

You can have several<footer>elements in one document.

An HTML document is divided into two major portions: the head and the body. The head contains
information about the document, such as its title and “meta” information describingthe contents.
The body contains the actual contents of the document (the part that is displayed in the browser
window).

A sample HTML document is given below

<!---MyfirstProgramme--!>
<!DOCTYPE html>
<html>
<body>
66

</body><h1>My First Heading</h1>

</html>

4
A sample HTML5 document is given below

<!—Starting my first web page assignment--!>

<!DOCTYPE html>

<HTML>

<HEAD>

<TITLE>MyWebpage</TITLE>

</HEAD>

<BODY BACKGROUND=”myimage.jpg”text=”#FF0000”>

The<FONTsize=6>Fontsize</FONT>canbechanged<Br>aswellas<FONTcolor=”#00

Example of All basic HTML Tags

<!DOCTYPE html>

<html>
<body>
<b>Bold Text</b><br>
<i>Italic Text</i><br>
^{superscripted Text}<br>
_{subscripted Text}<br>
<big> Big Text><br>
<strong> String Text</strong><br>
<u>Underlined Text</u>
<font face="Arial" size="10" color="blue">Formatted Text</font>
</body></html>

Lists: Lists are a great way to provide information in a structured and easy to read format.

There are two types of lists:

1] Numbered List(Ordered List)

An ordered list is used when sequence of list items is important.

2] Bulleted List(Unordered List)

An unordered list is a collection of related items that have no special order or sequence.

5
Tags used to create lists are given in the following table.

Tag Description Attributes Example

<LI> Specify the list
item.
</ The<OL>tag Type=a/A/i/I/1 <!DOCTYPEhtml>
OL> formats Sets the numbering style to <html>
the a,A,i,I,1default1 <body
contents of start=“A” bgcolor="pink">
an Specifies the number or <font
ordered list letter with which the list
with should start. face="Arial”
numbers. size="6"color="green
The "
numbering starts at >
1.It is incremented <u>
by one for each
List of Cities....
successive ordered
</u>
list item tagged
</font>
with
<ol
<LI>
type="A"
start="A">
<li>Mumbai
<li>Pune
<li>Nashik
<li>Nagpur
</ol>
</body>
</html>
<UL> <UL> tag defines Type =
</ the unordered list disc/square/circle <!DOCTYPEhtml>
UL> of items Specifies the bullet type. <html>
<body bg color= "sky
blue" text=”yellow”>
<font

face="Arial” size="6"
color="orange">
<i><u><b>
List of
Fruits
</i></u></b>
<ul type="square">
<li>Apple
<li>Pinapple
<li>Mango
<li>Guava
</ul>

6
 </body>
</html>

7
Tables: A table is a two dimensional matrix, consisting of rows and columns. HTML tables are
intended for displaying data in columns on a web page. Tables contains information such as text,
images, forms, hyperlinks etc.
Tags used to create table are given in the following table.

Tag Descriptio Attributes

n
<TABLE Create Border=number
> a Draws an outline around the table rows and cells of width
</ Table equal to number. By default table have no borders number
TABLE> =0.Width=number Defines width of the table.
Cell spacing=number Sets the amount of cell space
between table cells. Default value is 2
Cell padding=number Sets the amount of cell space, in
number of pixels between the cell border and its contents.
Default is 2 Bgcolor=” #rrggbb” sets background color of
the table Bordercolor=” #rrggbb” sets border color of the
table align=left|right|center
Aligns the table. The default alignment is left
frame=void|above|below|hsides|lhs|rhs|vsides|box|border
Tells the browser where to draw borders around the table
<TR> Creates a
</TR> row in the
table
<TH> Cells are
</TH> inserted in
a row of
the table
for
heading
<TD> Data
</TD>
cells are
inserted
in a row
of The
table

8
A sample HTML document for creating table is given below

<!DOCTYPEhtml>

<html>

<head>

</head>

<body>

<table border=2cellspacing=4cellpadding=4 border color dark="red" border color light="blue"

align="center">

<caption>List of Books</caption>

<tr>

<th row span=2align="center">ItemNo</th>

<th row span=2align="center">ItemName</th>

<th align="center"colspan=2>Price</th>

</tr>

<tr>

<th align="center">Rs.</th>

<th align="center">Paise</th>

Frames : Using frames, one can divide the screen into multiple scrolling sections, each of which
can display a different web page in to it. It allows multiple HTML documents to be seen
concurrently
Inline frames: It is a new frame tag introduced in HTML5. It is having same properties and attribute
options as in<FRAME>tag. An<iframe>tag is used to display a web page within a web page. Inline
frames can be included within the text block in HTML5 document.

Syntax of inline frame is:

<iframesrc="URL"></iframe>

9
Tags used to add frames are given in the following table

Tag Description Attributes Example

<FRAMESET Splits Rows=number helps <frameset
> browser in rows=“20%,30%,*”>
</FRAMESET screen into dividing the browser screen
> frames. into horizontal sections or
Frameset is frames. Cols=number divides
deprecated the screen into vertical
in html5, sections or frames. The
but it still number written in the rows
works! and cols attribute can be given
as absolute numbers or
percentage value or an
asterisk can be used to
indicate
the remaining space.
<FRAME> used to name=text <html>
</FRAME> define a single Assigns a name to the <frameset rows="50%,
frame in a frame. No resize *">
<frameset> Prevents users from resizing <frameset cols="50%,
the frame. *">
src=url <frame
Specifies the location of the src="success.html"
initial HTML file to be name="frm1">
displayed
By the frame . <frame
Border color=”#rrggbb” or src="welcome.html">
color name </frameset>
Sets the color for frame’s <frame
borders src="failure.html">
</frameset>
</html>

10
<IFRAME> <iframe> Iframe Attribute 1. <iframesrc="C:\
</IFRAME> Docum
Tag is used Attribute Specifications to entsandSettings\
to specify an Adjust Appearance and Desktop\
inline frame. Behavior a7.html"width="150"h
eig
An inline o src="(URL ht="150"></iframe>
frame of initial
Allows iframe
you to content)" 2. <iframename="inli
embed o name="(name of neframe"src="float
another frame ,required .h
document for targeting)" tml"frameborder="
within the o long desc="(link 0"
current to long scrolling="auto"wi
HTML description)" dt
document. o width=(frame h="500"height="1
The width,% or 80
HTML5 pixels) "marginwidth="5"
Specificatio o height=(frame ma rginheight="5"
n refers to height,%or ></iframe>
this as pixels)
a"nested o align=[top|middle|
browsing bott om|left| right|
context". center
](frame alignment, pick two,
use comma)
o frame border=[1|
0](frame border,
default is1)
o margin
width=(margi
n width, in
pixels)
o margin
height=(margi
n height, in
pixels)
o scrolling=[yes|no|auto
](ability to scroll)

11
What is CSS?

CSS is an acronym for Cascading Style Sheets.CSS is a style language that defines layout
ofHTML documents. For example, CSS covers fonts, colours, margins, lines, height, width,
background images, advanced positions and many other things. Just wait and see!

HTML can be (mis-)used to add layout to websites. But CSS offers more options and is
moreaccurate and sophisticated. CSS is supported by all browsers today.

Difference between CSS and HTML:

HTML is used to structure content. CSS is used for formatting structured content. The language
HTML was only used to add structure to text. An author could mark his text by stating "this is a
headline" or "this is a paragraph" using HTML tags such as <h1> and <p>.

As the Web gained popularity, designers started looking for possibilities to add layout to
onlinedocuments. To meet this demand, the browser producers (at that time Netscape and
Microsoft) invented new HTML tags such as for example <font> which differed from the original
HTML tags by defining layout - and not structure.

This also led to a situation where original structure tags such as <table> were increasingly being
misused to layout pages instead of adding structure to text. Many new layout tags such as
<blink> were only supported by one type of browser. "You need browser X to view this page"
became a common disclaimer on web sites. CSS was invented to remedy this situation by
providing web designers with sophisticated layout opportunities supported by all browsers.At
the same time, separation of the presentation style of documents from the content of documents,
makes site maintenance a lot easier.

Advantages of CSS: CSS was a revolution in the world of web design. The concrete benefitsof
CSS include:

● control layout of many documents from one single style sheet;

● more precise control of layout;
● Apply different layout to different media-types (screen, print, etc.);
● Numerous advanced and sophisticated techniques.

12
How does CSS work?

In this assignment you will learn how to make your first style sheet. You will get to know about
the basic CSS model and which codes are necessary to use CSS in an HTML document.

Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML.Thus, if
you are used to use HTML for layout, you will most likely recognize many of the codes. Let us
look at a concrete example.

The basic CSS syntax

Let's say we want a nice red color as the background of a

webpage:Using HTML we could have done it like this:

<body bgcolor="#FF0000">

With CSS the same result can be achieved like this: body

{background-color: #FF0000;}

With CSS the same result can be achieved like this:

body{background-color:#FF0000;}

As you will note, the codes are more or less identical for HTML and CSS. The above examplealso
shows you the fundamental CSS model:
rule=selector + declaration

13
But where do you put the CSS code? This is exactly what we will go over now.

Applying CSS to an HTML document

There are three ways you can apply CSS to an HTML

document.These methods are all outlined below.

1. In-Line Method(the attribute style).

2. Internal Method(the tag style).
3. External Method(link to a style sheet).

Method 1: In-line (the attribute style)

One way to apply CSS to HTML is by using the HTML attribute style. Building on the
aboveexample with the red background color, it can be applied like this:
:

<html>
<head>
<title>Example</title>
</head>
<body style="background-color:#FF0000;">

<p>This is a red page</p>

</body>
</html>

Method 2: Internal (the tag style)

Another way is to include the CSS codes using the HTML tag <style>. For example like this:

<html>
<head>
<title>Example</title>
<style type="text/css">
{background-color:#FF0000;}

14
</style>

15
</head>
<body>
<p>This is a red page</p>
</body>
</html>

Samplecode1:

<!DOCTYPEhtml>

<html>

<head>

<style>bod y
{

background-color:#d0e4fe;

h1

color:orange; text
align:center;
}
p

font- family:"TimesNewRoman";font
-size:20px;

</style>

</head>

<body>

<h1>CSSexample!</h1>

16
<p>This is a paragraph.</p>

</body>

</html>

Method 3
External style sheets are separate files full of CSS instructions (with the file extension .css). When any web
page includes an external style sheet, its look and feel will be controlled by this CSS file (unless you decide
to override a style using one of these next two types). This is how you change a whole website at once. And
that's perfect if you want to keep up with the latest fashion in web pages without rewriting every page!

Sample program of External Style:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>

Code for mystyle.css

body {
background-color: light blue;
}
h1 {
color: navy; margin-left: 20px;
}

Creation of forms

You should read following topics before starting this exercise

1. Forms and different types of Input element details

Forms: HTML5 provides better & more extensive support for collecting user inputs throughforms.
A form can be placed anywhere inside the body of an HTML document.

17
You can have more than one form in the document.

Tags used to add input forms are given in the following table.

Tag Description Attributes Example

<FORM> Creates action="URL" Gives the <!doctype html>
</FORM> a form URL of the application that <head>..
is to receive & process the </head>
forms data. <body>
method="get" or "post" Sets <form action=”url”
the method by which the method=”post/get”>
browser sends the forms data </form>
to the server for processing. </body>
</html>

<INPUT> It is Name=text It is used to name <label for>enter your

</INPUT> used for the field. name</label>
managin Maxlength=number <input
g the type=”text”
input The maximum number of name=”nm”
controls input characters allowed in width=20>
that will the input control.
be Placed Size=number The width of <input
within the the input control in pixels. type=”radio”
tag. type="(checkbox/hidden/radi name=”gender”
o value=”male”
/reset/submit/text/image)" checked>Male
value="default value (for text
or hidden widget); <input type=”radio”
Value to be submitted with name=”gender”
the form(for a check box or value=”Female”>Female
radio button);
Or label(for Reset or Submit <input type="check
buttons)" box" name="chess"
src="source file for an value="chess">Ches
image",\ checked indicates s
that checkbox <input
or radio button is type="checkbox"
checked align="(text name="Poker"
top/abs middle value="Poker">Poker
/baseline/bottom,)"

<SELECT> Defines <br>

18
 </SELECT> and Age Between:
displays name="(name to be passed <select
to the script as part of name=”age”
a name/value pair)" size=1>
set rows="no. of </select>
rows"
of cols="(no. of
cols.)"
optional
list items
fro
m
which

the user
can select
one or
more items.
<TEXTAREA> Multi name=name of data <textarea
</ field rows=10columns=40>
line
TEXTAREA> size=#of item s to display </textarea>
text
multiple allows multiple
entry selections
widget
<OPTION> indicates <select
a possible selected=default selection name=”age”
item value="data submitted if this size=1>
within option is selected" <option selected>21-30
a <option>31-40
select </select>
widge
t

New input types in HTML5

HTML5 introduces 13 new input types. When viewed in a browser that doesn't support them, these
input types fall back to text input.

Input types Description Attribute

Example
Label Define a <form>
Label for <label for>enter
<input>ele your
ment name</label>
<input

19
 type=”text”></form>
Legend Define <form>
∙ <legend>create
a new
Caption for acount</legend>
field </form>
set
eleme
nt

Number For ● value: The initial

numeric value. If omitted, <input
al input the field is initially type="number
blank, but the "min="0"
internal value is not max="20"step="2"
consistent across value="10"name="so
browsers. me-name"/>
● step: How much to
change the value
when you click on
the up or down
arrows of the
control. The default
is 1.
● min, max:
The smallest
And largest values that can
be selected with the
up/down
arrows.
Range For ● value: The initial
numerical value. The default <input type="range"
input, but is half way between name="some-
unlike the min and the name"/>
number, max.
the actual ● step: How much to
is not change the value
important. when you click on
the up or down
arrows of the
control. The default
is1.
● min, max: The
smallest and
largest values that
can be selected.
The default form in

20
 is 0, and the the
default for max
is100
Date For ● value: The initial
entering a value. The format <input type="date"
date with is "yyyy-mm-dd". name="some-
no time ● step: The step size name"/>
zone. in days. The
default is1.
● min,max: The
smallest and largest
dates that can be
selected, formatted
as date strings of
the
form "yyyy-mm-dd".

Time For
entering a <input type="time"/>
time value
with hour,
minute,
seconds,
and
fractional
seconds,
but no time
zone.
Datetime-local For
entering <input type="datetime-
a date local"/>
and
Time
with no
time
zone.
Color For ● value: The initial <input type="datetime-
choosing value. The intention local"/>
color is that if a browser
through pops up a color chooser,
the initial
a

21
 Color Selection will match the
well current value.
control

Email For
entering a ● value: The initial <input type="email"
value(a legal name="some-
single mail email address). name"/>
address or ● list: The id of a <input
a list of separate" data list" type="email"
email element that defines list="email-
addresses. a list of email choices"
addresses for the name="some
user to choose - name"/>
among <datalist
id="email
-
choices">
<option

label="Marty Hall"
value="hall@coreservlet
s
.com">
<option
label="Somebody Else"
value=
"someone@example
.com">
<option
label="ThirdPerson"
value="other@example.c
om">
...
</data list>
URL For ● value: The initial <input type="url"
entering a value, as an name="some-name"/>
single absolute URL. <input type="url"
URL. ● list: The id of a list="url-choices
separate "data list" "name="some-
element that defines name"/>
a list of URLs for <data list
the user to choose id="url-
among. choices"
>
</datalist>

22
Tel For ● value: The initial <input type="tel"
entering value as a phone number name="some-name"/>
A
telephone
number.

Placeholde Gives the ● Place holder: A Input type="text(or

r user a hint small hint. This other)"placeholder="so
about what differs from the me text" name="some-
sort of "value" attribute in name"/>
data they two ways. First, it
should will usually be
enter. rendered differently
(e.g., light gray).
Second, it will
automatically
disappear when you
click in the text
field.
● value: The
initial value. If
you have both
placeholder and value,

23
 The value wins, and place
holder is ignored.

Autofocus Focuses <input id="last

the input ● value: The initial name"
on the value type="text"
element TRUE/FALSE autofocus="true"
when the
Page
is
loade
d.
autocomple For <input id="password
t e specifying confirmation"
that a field type="password"
should not ● value: The name="Password
autocompl initial value confirmation"
e te or be ON/OFF autocomplete="off">
pre-filled
by the
browser
based on
a
user's
past
entries.
List/data list Represents ● list: The id of a <input type="text
a set of separate "data list" (or
Option element that defines other)"list="some
elements a list of choices for - id"
that can be the user to choose name="some-
used in among. name"/>
combinati <data list
o n with ● The option id="email
the new element(insi -
list de "data choices">
attribute list") <option label="Display
for input Val1
to make ● label: Extra "value="InsertVal1">
dropdown information that <option label="Display
menus. may be displayed in Val2"value="InsertVal2"
the autocomplete >
list. Browsers might <option label="Display
show this label or a Val3"value="InsertVal3"
combination of the >
label and the value. ...
The label is never </datalist>
part of the value
that is inserted in to

24
 the text field when
the entry is
selected.
● value: The value
that should be
inserted into the
text field when the
entry
is selected.

25
Try this Code
<!DOCTYPE html>
<html>
<body>
<form>
<h3>Registration Form</h3>
Enter your Name <input type="text" name="t1"> Your
Email Address<input type="email" name="t2"> Your
Phone Number<input type="text" name="t3"> Your City
<select name=t4>
<option>Nashik</option>
<option>Pune</option>
<option> Mumbai</option>
</select>
Gender
Male <input type=radio name=r1>
Female<input type=radio name=r1>
<input type=submit value="display">
</form>
</body>
</html>

BOX Model in CSS

Every element that can be displayed on a web page is comprised of one or more rectangular boxes. CSS
box model typically describes how these rectangular boxes are laid out on a web page. These boxes can
have different properties and can interact with each other in different ways, but every box has a content
area and optional surrounding padding, border, and margin areas.

The following diagram demonstrates how the width, height, padding, border, and margin CSS
properties determines how much space an element can take on a web page.

26
The specific area that an element box may occupy on a web page is measured as follows-

Size of Properties of CSS

the box

Height height + padding-top + padding-bottom + border-top + border-bottom +

margin-top + margin-bottom

Width width + padding-left + padding-right + border-left + border-right +

margin- left + margin-right
example

div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

CSS Navigation Bar

A Navigation bar or navigation system comes under GUI that helps the visitors in accessing
information. It is the UI element on a webpage that includes links for the other sections of the
website.

A navigation bar is mostly displayed on the top of the page in the form of a horizontal list of links.

<html>
<head>
<style> #ul-
nb {
list-style: none;
margin:2px;
padding:3px;
}
#ul-nb li { float:left;
padding:10px;
background:orange; text-
align: center; margin-
left:5px;
}
#ul-nbli:hover
{ background:red;
opacity:0.8; color:white;
}
</style> 29
</head>
<body>
<ul id="ul-nb">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Careers</a></li>
</ul>
</body>
</html>

Set-A
Q1) Create a HTML document to display the following screen.

Q 2. Write a HTML code, which generate the following output

List of Books

Price
Item No Item Name
Rs. Paise

1 Programming in Python 500 50

2 Programming in Java 345 00

30
Q3. Write a HTML script to design the following screen

SET B
Q 1. Write the HTML code for generating the form as shown below.
Apply the internal CSS to following form change the font size of the heading to 6pt and change the color to
red and also change the background color yellow

Q 2. Write HTML 5 code which generates the following output and display each element of list in
different size, color & font. Use external CSS to format the list

31
Q 3. Create HTML5 page with following specifications
i) Title should be about your City.
ii) Color the background by Pink color.
iii) Place your city name at the top of page in large text and in blue color. iv) Add names
of the landmarks in your city, each in different color, style and font
v) Add scrolling text about your City.
vi) Add any image at the bottom. (Use inline CSS to format the web page)

Set C.
Q 1. Design HTML 5 Page Using CSS which display the following Box ( use
Box Model Property in CSS)

32
Q 2Design HTML 5 Page Using CSS Which Display the following Navigation Bar

33