Basicwebdesign Lab New Syllabus

Course Code:15CS22P
Basic Web Design lab Manual

Developed as per 2015 OBE Scheme for the students of II nd Sem Diploma in Computer Science Branch
By Shabnam S Jahagirdar,
B.E(CS),MTECH(CS),Lecturer(CS),GPT HUBLI.
FOR ANY FEEDBACK PLEASE CONTACT AT : shabnam.jahagirdar@gmail.com
Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.
1. Introduction to HTML: Web site, Web Page, Types of Web Pages, Browsers and their
types, Client Server Model, Web Server, Working of different types of Web Pages,
General structure of a Web Page, Scripting languages, URL, Popular Search Engines,
WWW.
HTML Introduction:
HTML is a markup language for describing web documents (web pages).
HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
HTML documents are described by HTML tags
Each HTML tag describes different document content
Web site:
A website, also written as web site, or simply site, is a set of related web pages typically
served from a single web domain. A website is hosted on at least one web server,
accessible via a network such as the Internet or a private local area network through an
Internet address known as a uniform resource locator (URL).
Web Page:
A web page (or webpage) is a web document that is suitable for the World Wide Web and
the web browser.
Types of Web Pages:

Static Web-Page
A static web page (sometimes called a flat page/stationary page) is a web page that is
delivered to the user exactly as stored, in contrast to dynamic web pages which are
generated by a web application.
Department Of Computer Science ,Gpt Hubli
Figure 1 a. Static Web-Page delivered to user as stored
Dynamic Web-Page:
A server-side dynamic web page is a web page whose construction is controlled by an
application server processing server-side scripts. In server-side scripting, parameters
determine how the assembly of every new web page proceeds, including the setting up of
more client-side processing.
Figure 1 b. Dynamic Web-Page
Browsers and their types:

The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML
documents and display them. The browser does not display the HTML tags, but uses them to
determine how to display the document.
Client Server Model:

The clientserver model of computing is a distributed application structure that partitions
tasks or workloads between the providers of a resource or service, called servers, and service
requesters, called clients.[1] Often clients and servers communicate over a computer network on
separate hardware, but both client and server may reside in the same system. A server host runs
one or more server programs which share their resources with clients. A client does not share any
of its resources, but requests a server's content or service function. Clients therefore initiate
communication sessions with servers which await incoming requests.
3
Figure 1 c. Client-Server Model.
Web Server:
A web server is an information technology that processes requests via HTTP, the basic
network protocol used to distribute information on the World Wide Web. The term can
refer either to the entire computer system, an appliance, or specifically to the software that
accepts and supervises the HTTP requests.
General structure of a Web Page:

Below is a visualization of an HTML page structure:
Scripting languages:
A scripting language or script language is a programming language that supports
scripts, programs written for a special run-time environment that can interpret (rather than
compile) and automate the execution of tasks that could alternatively be executed one-byone by a human operator. Eg: JavaScript, Python, Perl, PHP etc
URL:
URL is an acronym for Uniform Resource Locator and is a reference (an address) to
a resource on the Internet. A URL has two main components: Protocol identifier: For
the URL http://example.com, the protocol identifier is http. Resource name: For
the URLhttp://example.com, the resource name is example.com.
Popular Search Engines:

Google
Bing
Yahoo search
Ask
Aol Search
Wow
Web crawler
MyWeb Search
Dogpile
WWW:
The World Wide Web (www) is an information space where documents and other web
resources are identified by URLs, interlinked by hypertext links, and can be accessed via
the Internet. It has become known simply as the Web.
UNIT-II
Theory:
1. Structure of HTML web page:
The HTML document itself begins with <html> and ends with </html> describes an HTML
document.
The visible part of the HTML document is between <body> and </body>.
The text between <head> and </head> provides information about the document.The HTML
<head> element contains meta data. Meta data are not displayed.
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph
HTML comments:
Comments are not displayed by the browser, but they can help document your HTML.
You can add comments to your HTML source by using the following syntax:

HTML Headings: HTML headings are defined with the <h1> to <h6> tags.<h1> defines the most
important heading. <h6> defines the least important heading.
Eg:
<html>
<body>
<h1>This is heading 1</h1>
</body>
</html
6
Result:
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
<div> tag: The <div> tag defines a division or a section in an HTML document.The <div> tag is
used to group block-elements to format them with CSS.The <div> element is often used as a
layout tool, because it can easily be positioned with CSS.
<br> tag: The <br> tag inserts a single line break.The <br> tag is an empty tag which means
that it has no end tag.
E.g: <html>
<body>
To break lines <br> in a text, <br> use the br element.
</body>
</html>
Result:
To break lines
in a text,
use the br element.
2. Basic HTML physical character tags:

<b> tag: The <b> tag specifies bold text.
<i> tag: The <i> tag specifies italic text.
<u> tag: The <u> tag is used to underline text.
< big> tag: Make text bigger than normal.
<small> tag: The <small> tag defines smaller text
<sup> tag: The <sup> tag defines superscript text. Superscript text appears half a character
above the normal line, and is sometimes rendered in a smaller font.
<sub> tag: The <sub> tag 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 H2O
<strike> tag: The <strike> tag defines strikethrough text.
Eg:
<html>
<body>
<b> b tag specifies bold text. </b><br>
<i> i tag specifies italic text.</i><br>
<u>u is used to underline text. </u><br>
< big> Make text bigger than normal. </big><br>
<small> The small tag defines smaller text</small><br>
<sup> log</sup> <sub>a </sub><br>
<strike>striked text</strike> <br>
</body>
</html>
Result:
b tag specifies bold text.
i tag specifies italic text.
u is used to underline text.
< big> Make text bigger than normal.
The small tag defines smaller text
log
striked text
8
3. Logical character tags:

<em>: The <em> tag is a phrase tag. It renders as emphasized text.
<strong>: Defines important text
<del>: The <del> tag defines text that has been deleted from a document.
<cite>: The <cite> tag defines the title of a work (e.g. a book, a song, a movie, a TV show, a
painting, a sculpture, etc.).
<code>:defines a piece of code
<dfn>: The <dfn> tag represents the defining instance of a term in HTML.The defining instance
is often the first use of a term in a document.The nearest parent of the <dfn> tag must also
contain the definition/explanation for the term inside <dfn>.The term inside the <dfn> tag can be
any of the following:
1. The content of the <dfn> element (without a title attribute):
<html>
<body>
<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>
</body>
</html>
Result:
HTML is the standard markup language for creating web pages.
2. The title attribute of the <dfn> tag:
<html>
<body>
<p><dfn title="HyperText Markup Language">HTML</dfn> is the standard markup language
for creating web pages.</p>
</body>
</html>
3. The title attribute of an <abbr> tag inside the <dfn> element:
<html>
<body>
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the
standard markup language for creating web pages.</p>
</body></html>
Result:
HTML is the standard markup language for creating web pages.
9
<ins>: The <ins> tag defines a text that has been inserted into a document. Browsers will
normally strike a line through deleted text and underline inserted text.
<kbd>: The <kbd> tag is a phrase tag. It defines keyboard input.
<samp>: Defines sample output from a computer program.
Eg:
<html>
<body>
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<del>replaced blue</del> <ins>red </ins>
</body>
</html>
Result:
Emphasized text
Strong text
A piece of computer code
Sample output from a computer program
Keyboard input
red
10
4. Other HTML tags:

<p> tag:
The <p> tag defines a paragraph. Browsers automatically add some space (margin) before and
after each <p> element. The align attribute specifies the alignment of the text within a paragraph.
Attribute Values:
Value
Description
Left
Left-align text
Right
Right-align text
Center
Center-align text
Justify
Stretches the lines so that each line has equal width (like in newspapers and magazines)
E.g:
<html>
<body>
<p>By default paragraph is aligned to left without specifying alignment.</p>
<p align="center">This is center aligned paragraph.</p>
<p align="right">This is right aligned paragraph.</p>
<p align="right">This is left aligned paragraph.</p>
<p align="justify">This is paragraph with justification.</p>
</body>
</html>
11
Result:
By default paragraph is aligned to left without specifying alignment.

This is center aligned paragraph.
This is right aligned paragraph.
This is left aligned paragraph.
This is paragraph with justification.
<font> tag:
The <font> tag specifies the font face, font size, and color of text.
Optional Attributes
Attribute
Value
Description
color
rgb(x,x,x)
#xxxxxx
colorname
Specifies the color of text
face
font_family
Specifies the font of text
size
Number
Specifies the size of text
E.g:
<html>
<body>
<font size="3" color="red">This is some text!</font><br>
<font size="2" color="blue">This is some text!</font><br>
<font face="verdana" color="green">This is some text!</font><br></body></html>
12
Result:
This is some text!

This is some text!
This is some text!

<abbr> tag:
The <abbr> tag defines an abbreviation. Marking up abbreviations can give useful information to
browsers, translation systems and search-engines.
E.g:
<html>
<body>
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</body>
</html>
Result:
The WHO was founded in 1948.

<acronym> tag:
The <acronym> tag defines an acronym. An acronym must spell out another word. For
example: NASA, ASAP, GUI. Marking up acronyms can give useful information to browsers,
translation systems and search-engines.
E.g:
<html>
<body>
Can I get this <acronym title="as soon as possible">ASAP</acronym>?
</body>
</html>
Result:
Can I get this ASAP?

13
<address> tag:
The <address> tag defines the contact information for the author/owner of a document or
an article. If the <address> element is inside the <body> element, it represents contact
information for the document. If the <address> element is inside an <article> element, it
represents contact information for that article. The text in the <address> element usually renders
in italic. Most browsers will add a line break before and after the address element.
E.g:
<html>
<body>
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
Result:
Written by Jon Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA
<blockquote> tag:
The HTML <blockquote> tag is used for indicating long quotations (i.e. quotations that span
multiple lines). It should contain only block-level elements within it, and not just plain text.
E.g:
<html>
<head>
<title>HTML blockquote Tag</title></head>
14
<body>
<blockquote>Browsers generally render blockquote text as indented text. If your quoted text
needs to display within a non-quoted paragraph, you should use the HTML q tag. Most browsers
surround q text with quotation marks.</blockquote>
<q>Browsers generally render blockquote text as indented text. If your quoted text needs to
display within a non-quoted paragraph, you should use the HTML q tag. Most browsers surround
q text with quotation marks.</q>
</body></html>
Result:
Browsers generally render blockquote text as indented text. If your quoted text needs
to display within a non-quoted paragraph, you should use the HTML q tag. Most
browsers surround q text with quotation marks.
Browsers generally render blockquote text as indented text. If your quoted text needs to display
within a non-quoted paragraph, you should use the HTML q tag. Most browsers surround q text
with quotation marks.
<q> tag:
The <q> tag defines a short quotation. Browsers normally insert quotation marks around the
quotation.
E.g:
<html>
<body>
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
</body>
</html>
Result:
WWF's goal is to: Build a future where people live in harmony with nature. We hope
they succeed.
15
5. List tags:
Unordered HTML Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list items
will be marked with bullets (small black circles):
Unordered HTML Lists - The Style Attribute
A style attribute can be added to an unordered list, to define the style of the marker:
Style
Description
list-style-type:disc
The list items will be marked with bullets (default)
list-style-type:circle
The list items will be marked with circles
list-style-type:square
The list items will be marked with squares
list-style-type:none
The list items will not be marked
Ordered HTML Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items will
be marked with numbers:
Ordered HTML Lists - The Type Attribute
A type attribute can be added to an ordered list, to define the type of the marker:
16
Type
Description
type="1"
The list items will be numbered with numbers (default)
type="A"
The list items will be numbered with uppercase letters
type="a"
The list items will be numbered with lowercase letters
type="I"
The list items will be numbered with uppercase roman numbers
type="i"
The list items will be numbered with lowercase roman numbers
HTML Description Lists

HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:
17
6. Table tags.
Tables are defined with the <table> tag.Tables are divided into table rows with
the <tr> tag.Table rows are divided into table data with the <td> tag.A table row can also be
divided into table headings with the <th> tag.If you do not specify a border for the table, it will
be displayed without borders.A border can be added using the border attribute:
HTML Table Headings
Table headings are defined with the <th> tag. By default, all major browsers display table
headings as bold and centered.
E.g:
<html>
<head>
</head>
<body>
<table border=1>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
Result:
18
Table Cells that Span Many Rows: To make a cell span more than one row, use
the rowspan attribute.
E.g:
<html>
<head>
<table border=1>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
Result:
Table Cells that Span Many Columns: To make a cell span more than one column, use
the colspan attribute.
E.g:
<html>
<head>
</head>
19
<body>
<table border=1>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
</body>
</html>
Result:
Monthly Savings
An HTML Table With a Caption: To add a caption to a table, use the <caption> tag.
20
7. Hyper link tag

A link is a text or an image you can click on, and jump to another document (External
links) or a position within the document (Internal Links). It is defined By <a> anchor tag.
External Links:
Created using hyperlinks using href attribute of anchor tag as below:
<a href="url">link text</a>
Where url is the address of webpage you want to navigate when you click on link text.
E.g:
<html>
<body>
<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
</body>
</html>
Result:
The href attribute specifies the destination address

(http://www.w3schools.com/html/)
The link text is the visible part (Visit our HTML tutorial).
Internal Links
A Internal link is used to move to particular part of document within the same webpage.
It is created using name attributes and target of an anchor tag.
First, name the part of documents you want to create links with the name attribute:
<A name="a1" >...</A>
The target specifies where to open the linked document.
<a href="#a1">Click here to go to a1</a><br>
21
E.g:
<html>
<body>
<a href="#C1">Jump to Chapter 1</a></p>
<a name="C1">Chapter 1</h2>
<p>This chapter explains chapter 1</p>
</body>
</html>
Result:
HTML Links - Image as Link

It is common to use images as links. By nesting a image tag inside anchor tag in place of
hypertext.
E.g:
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href="https://www.google.co.in/">
<img src="smiley.gif" alt="HTML tutorial">
</a>
</body>
</html>
Result:
The image is a link. You can click on it.
------------------------------------------------------When you click on above image, it jumps to google.com

22
8. Working with Frame and Form tags.

Frames:
The <frame> tag defines one particular window (frame) within a <frameset>.Each <frame>
in a <frameset> can have different attributes, such as border, scrolling, the ability to resize, etc.
The <frameset> tag defines a frameset. The <frameset> element holds one or
more <frame> elements. Each <frame> element can hold a separate document. The <frameset>
element specifies HOW MANY columns or rows there will be in the frameset, and HOW
MUCH percentage/pixels of space will occupy each of them.
E.g:
<html>
<frameset cols="25%,*,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
Result:
23
HTML Forms:
HTML forms are used to collect user input.
The <form> element defines an HTML form:
<form>
.
form elements
.
</form>
HTML forms contain form elements.
Form elements are different types of input elements, checkboxes, radio buttons, submit buttons,
and more.
The <input> Element
The <input> element is the most important form element. The <input> element has many
variations, depending on the type attribute.
Here are the types used in this chapter:
Type
Description
Text
Defines normal text input
Radio
Defines radio button input (for selecting one of many choices)
Submit
Defines a submit button (for submitting the form)
24
Text Input
<input type="text"> defines a one-line input field for text input:
E.g:
<html>
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
Result:
Radio Button Input

<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
Result:
Male
Female
25
The Submit Button

<input type="submit"> defines a button for submitting a form to a form-handler. The formhandler is typically a server page with a script for processing input data. The form-handler is
specified in the form's action attribute:
E. g:
<html>
<body>
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</body></html>
Result:
First name:
Mickey
Last name:
Mouse
Submit
The Action Attribute

The action attribute defines the action to be performed when the form is submitted. The
common way to submit a form to a server, is by using a submit button. Normally, the form is
submitted to a web page on a web server. In the example above, a server-side script is specified
to handle the submitted form:
26
The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when
submitting the forms:
<form action="action_page.php" method="get">
or:
<form action="action_page.php" method="post">
When to Use GET?
You can use GET (the default method):
If the form submission is passive (like a search engine query), and without sensitive information.
When you use GET, the form data will be visible in the page address:
action_page.php?firstname=Mickey&lastname=Mouse
GET is best suited to short amounts of data. Size limitations are set in your browser.
When to Use POST?

You should use POST:
If the form is updating data, or includes sensitive information (password).
POST offers better security because the submitted data is not visible in the page address.
The <input> Element
The most important form element is the <input> element. The <input> element can vary
in many ways, depending on the type attribute.
27
The <select> Element (Drop-Down List):

The <select> element defines a drop-down list. The <option> elements defines the
options to select. The list will normally show the first item as selected.You can add a selected
attribute to define a predefined option.
E.g:
<html>
<body>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
Result:
Volvo
Submit
The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):
E.g:
<html>
<body>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<br><br>
28
</form></body></html>
Result:
The cat w as playing in the

garden.
Submit
The <button> Element

The <button> element defines a clickable button:
E.g:
<html>
<body>
<button type="button" onclick="alert('Hello World!')">Click Me!</button></body></html>
Result:
Click Me!
HTML Input Types

Input Type: text
<input type="text"> defines a one-line input field for text input:
Input Type: password
<input type="password"> defines a password field:
Input Type: submit
<input type="submit"> defines a button for submitting form input to a form-handler.
The form-handler is typically a server page with a script for processing input data.
29
The form-handler is specified in the form's action attribute:

Input Type: radio
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:
Input Type: checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Input Type: button
<input type="button"> defines a button:
E.g:
<html>
<body>
Username:<br>
<input type="text" name="firstname">
<br>
password:<br>
<input type="password" name="psw"> <br>
Gender:
<input type="radio" name="sex" value="male" checked> Male
<br>
<input type="radio" name="sex" value="female"> Female<br>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car <br>
<input type="button" onclick="alert('Hello World!')" value="Click Me!"><br>
</form>
</body>
</html>
30
Result:
Username:
password:
Gender:
Male
Female
I have a bike
I have a car
31
9.
Image tags & embedding a multimedia on to a web page(video, audio, zip)
Image tags
The <img> tag defines an image in an HTML page. The <img> tag has two required attributes:
src and alt. alt Specifies an alternate text for an image. Src specifies URL of an image.
E.g:
<html>
<body>
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
</body>
</html>
Result:
E.g:
<html>
<head>
<title> Image Tag </title>
</head>
<body>
<h3 align="center" color=red"> To illustrate image tags</h3> <hr>
<p>
<img src="flower.bmp" align="right" height="100" width="100"/>
This image is right aligned with the text
</p>
<br><br><br><br><hr>
<p>
<img src="flower.bmp" align="left" height="100" width="100"/>
This image is left aligned with the text
</p>
This image is center aligned with the text.
<img src="flower.bmp" align="middle" height="100" width="100"/>
</body>
</html>
32
Result:
Embedding a multimedia on to a web page(video, audio, zip)
Multimedia on the web is sound, music, videos, movies, and animations. Multimedia
comes in many different formats. It can be almost anything you can hear or see. Examples:
Pictures, music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats. Multimedia
files have their own formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv,
and .avi etc
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
sdisplay a movie of your choice, and <noembed> to display a single JPG image if browser does
not support <embed> tag.
Note: For further details on embedding multimedia and examples please refer below link:
http://www.tutorialspoint.com/html/html_embed_multimedia.htm
33
10. Working with CSS (Cascading Style Sheet).

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 is used to define
styles for your web pages, including the design, layout and variations in display for different
devices and screen sizes. CSS Saves a Lot of Work.The style definitions are normally saved in
external .css files.With an external stylesheet file, you can change the look of an entire website
by changing just one file!
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly
braces.
In the following example all <p> elements will be center-aligned, with a red text color:
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
34
Result:
Hello World!
This paragraph is styled with CSS
CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their element name,
id, class, attribute, and more.The element selector selects elements based on the element
name.You can select all <p> elements on a page like this (in this case, all <p> elements will be
center-aligned, with a red text color):
E.g:
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Result:
Every paragraph will be affected by the style.
Me too!
And me!
The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
An id should be unique within a page, so the id selector is used if you want to select a single,
unique element. To select an element with a specific id, write a hash (#) character, followed by
the id of the element.
35
The style rule below will be applied to the HTML element with id="para1":
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Result:
Hello World!
This paragraph is not affected by the style.
The class Selector
The class selector selects elements with a specific class attribute.To select elements with
a specific class, write a period (.) character, followed by the name of the class.
In the example below, all HTML elements with class="center" will be red and center-aligned:
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
36
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Result
Red and center-aligned heading
Red and center-aligned paragraph.
Grouping Selectors
You can group the selectors, to minimize the code.To group selectors, separate each selector
with a comma.
In the example below we have grouped the selectors from the code above:
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
37
Result:
Hello World!
Smaller heading!
This is a paragraph.
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External style sheet

Internal style sheet
Inline style
External Style Sheet

With an external style sheet, you can change the look of an entire website by changing just one
file!Each page must include a reference to the external style sheet file inside the <link> element.
The <link> element goes inside the <head> section:
E.g:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
Result:
38
An external style sheet can be written in any text editor. The file should not contain any html
tags. The style sheet file must be saved with a .css extension.Here is how the "myStyle.css"
looks:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.Internal styles are
defined within the <style> element, inside the <head> section of an HTML page:
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
39
Result:
Inline Styles
An inline style may be used to apply a unique style for a single element.To use inline
styles, add the style attribute to the relevant element. The style attribute can contain any CSS
property.The example below shows how to change the color and the left margin of a <h1>
element:
<html>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
</body>
</html>
Result:
This is a heading.
This is a paragraph.
40
Graded Exercises
1. Design a page having suitable background colour and text colour with title My First
Web Page using all the attributes of the Font tag.
<html>
<title> Font tag Example </title>
<body bgcolor="pink">
<font face="arial" size="1" color="blue"> WELCOME </font> <br>
<font size="2" color="cyan"> WELCOME </font> <br>
<font size="3" color="red"> WELCOME </font> <br>
<font size="4" color="yellow"> WELCOME </font> <br>
<font size="5" color="green"> WELCOME </font> <br>
<font size="6" color="brown"> WELCOME </font> <br>
<font size="7" color="pink"> WELCOME </font> <br>
<font size="20" color="gray"> WELCOME </font> <br>
</body>
</html>
Output:
41
2. Create a HTML document giving details of your [Name, Age], [Address, Phone] and
[Register Number, Class] aligned in proper order using alignment attributes of Paragraph
tag.
<html>
<head><title> Personal details</title>
</head>
<body>
<h1>Personal Details</h1>
<p> Name: abc
Age:18<p>
<p align=right> address: tx, texas,houston
Phone:9999999999</p>
<p align=center> Register number:2bv15cs075
Class:2nd sem
<p>
</body>
</html>
Output:
Personal Details
Name: abc
Age:18
address:tx, texas,houston
Phone:9999999999
Register number:2bv15cs075
Class:2nd sem
42
3. Write HTML code to design a page containing some text in a paragraph by giving
suitable heading style.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Paragraph tag illustration</h1>
<p>This is left aligned paragraph.</p>
<p align="right">This is right aligned paragraph.</p>
<p align="center">This is center aligned paragraph.</p>
<p align="justify">This paragraph is justified.</p>
</body>
</html>
Output:
Paragraph tag illustration

This is left aligned paragraph.
This is right aligned paragraph.
This is center aligned paragraph.
This paragraph is justified.
43
4. Create a page to show different character formatting (B, I, U, SUB, SUP) tags.
viz : log b m p = p logb m
<html>
<head>
<title>Logarithm rules</title>
</head>
<body>
<h1><u>Logarithm rules</u></h1>
<u>Logarithm
product
rule:</u><b>log</b><sub>b</sub>(x
y)
<b>log</b><sub>b</sub>(x) + <b>log</b><sub>b</sub>(y)<br>
<u>Rule
2:</u><b>log</b><sub>
b</sub>
m<sup>
log</b><sub>b</sub> m <br>
</body>
</html>
Output:
44
p</sup>
p<b>
5. Write HTML code to create a Web Page that contains an Image at its centre.
<html>
<body>
<h4>Image with align="middle":</h4>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"
align="middle"> This is some text.</p>
</body>
</html>
Output:
Image with align="middle":
This is some text.
45
This is some text.
6. Create a web page with an appropriate image towards the left hand side of the page, when
user clicks on the image another web page should open.
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href="img2.html">
<img src="smiley.gif" align="left" alt="alternate text">
</a>
</body>
</html>
img2.html:
<html>
<head>
</head>
<body> hello </body>
</html>
Output:
The image is a link. You can click on it.
After clicking on the above image we will go to img2.html file:
46
7. Create web Pages using Anchor tag with its attributes for external links.
Home.html
<html>
<head>
<title> Link Tag </title>
</head>
<body>
<a href="page1.html">Go to page1.html</a>
</body>
</html>
Page1.html
<html>
<head>
<title> Page1.html </title>
</head>
<body>
Hello!!! This is a page1. html
<a href="home.html"> Go to home </a>
</body>
</html>
47
Output:
48
8. Create a web page for internal links; when the user clicks on different links on the web
page it should go to the appropriate locations/sections in the same page.
<html>
<head><title> Internal Links </title></head>
<body>
<a name ="dynamicwebpage">A server-side dynamic web page is a web page whose
construction is controlled by an application server processing server-side scripts. In server-side
scripting, parameters determine how the assembly of every new web page proceeds, including
the setting up of more client-side processing.
A client-side dynamic web page processes the web page using HTML scripting running in
the browser as it loads. JavaScript and other scripting languages determine the way the
HTML in the received page is parsed into the Document Object Model, or DOM, that represents
the loaded web page. The same client-side techniques can then dynamically update or change the
DOM in the same way.</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><
br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br
/><br/>
<p align="center">If you want to make a link between pages on the same website, you do not
need to spell out the entire address (URL) for the document. </p>
<a name="staticwebpage">A static web page (sometimes called a oten/flat page/stationary page)
is a web page that is delivered to the user exactly as stored, in contrast to dynamic web pages
which are generated by a web application.
Consequently, a static web page displays the same information for all users, from all contexts,
subject to modern capabilities of a web server to negotiate content-type or language of the
document where such versions are available and the server is configured to do so.
Static web pages are often HTML documents stored as files in the file system and made available
by the web server over HTTP (nevertheless URLs ending with ".html" are not always static).
However, loose interpretations of the term could include web pages stored in a database, and
could even include pages formatted using a template and served through an application server, as
long as the page served is unchanging and presented essentially as stored.
</a>
<p>Text text text text</p>
<a href="#staticwebpage">Click here to know about Static Webpage</a><br>
<a href="#dynamicwebpage">Click here to know about Dynamic webpage </a>
</body>
</html>
49
Result:
50
9. Write a HTML code to create a web page with pink colour background and display
moving message in red colour.
<html>
<body bgcolor = "pink">
<marquee >
<font color="red">Moving text </font>
</marquee>
</body>
</html>
OUTPUT:
51
10. Create a web page, showing an ordered list of all second semester courses (Subjects).
<html>
<body>
<h1>Ordered List of CS Second Sem subjects</h1>
<ol>
<li>Engineering Mathemantics-II</li>
<li>English</li>
<li>DE & ICC</li>
<li>DE lab</li>
<li>Basic Web-design lab</li>
<li>Multimedia lab</li>
</ol>
</body>
</html>
Output:
Ordered List of CS Second Sem subjects

1.
2.
3.
4.
5.
6.
Engineering Mathemantics-II
English
DE & ICC
DE lab
Basic Web-design lab
Multimedia lab
52
11. Create a web page, showing an unordered list of names of all the Diploma Programmes
(Branches) in your institution.
<html>
<body>
<h2>Unordered List showing branches in our college</h2>
<ul style="list-style-type:square">
<li>Computer Science</li>
<li>Civil Engineering</li>
<li>Electronics & Communication</li>
<li>Mechanical Engineering</li>
</ul>
</body>
</html>
Output:
Unordered List showing branches in our college
Computer Science
Civil Engineering
Electronics & Communication
Mechanical Engineering
53
12. Create a HTML document containing a nested list showing a content page of any book.
<html>
<body>
<h1 align="center">Contents</h2>
<ul style="list-style-type:none">
<li>Fundamentals </li>
<ol type="i">
<li>A Brief Introduction to the Internet </li>
<li>The World Wide Web </li>
<li>Web Browsers </li>
<li>Uniform Resource Locators</li>
<li>The Hypertext Transfer Protocol</li>
</ul>
</li>
</ul>
<li>Introduction to XHTML</li>
<ol type="i">
<li>Origins and Evolution of HTML and XHTML </li>
<ol type="a">
<li>Origin </li>
<li>HTML </li>
<li>XHTML</li>
</ol>
<li>Images</li>
</ul>
</li>
</ul>
<li> Cascading Style Sheets </li>
<ol type="i">
<li>Introduction</li>
<li>Levels of Style Sheets</li>
<ul>
<li>Style Specification Formats</li>
<li> Selector Forms</li>
<li>Property Value Forms </li>
</ul>
<li> Font Properties</li>
</ol>
</ul>
s</body></html>
54
OUTPUT:
Contents
Fundamentals
i. A Brief Introduction to the Internet
ii. The World Wide Web
iii. Web Browsers
iv. Uniform Resource Locators
v. The Hypertext Transfer Protocol
Introduction to XHTML
i. Origins and Evolution of HTML and XHTML
a. Origin
b. HTML
c. XHTML
ii. Images
Cascading Style Sheets

i. Introduction
ii. Levels of Style Sheets
Style Specification Formats
Selector Forms
Property Value Forms
iii. Font Properties
55
13. Create the following table in HTML with Dummy Data:

Reg.
Student
Number Name
Year/Semester
Date
Admission
<html>
<body>
<table border="1">
<tr>
<th>Reg. Number</th>
<th>Student Name </th>
<th>Semester</th>
<th>Date of Admission</th>
</tr>
<tr>
<td>171CS150001</td>
<td>Smith</td>
<td>2</td>
<td>02-06-2015</td>
</tr>
<tr>
<td>171CS140003</td>
<td>JOY</td>
<td>4</td>
<td>02-06-2015</td>
</tr>
<tr>
<td>171CS110001</td>
<td>JANE</td>
<td>6</td>
<td>02-06-2015</td>
</tr>
</table>
</body>
</html>
OUTPUT:
Reg. Number Student Name Semester Date of Admission
171CS150001 Smith
2
02-06-2015
171CS140003 JOY
02-06-2015
171CS110001 JANE
02-06-2015
56
of
14. Create a web page which divides the page in two equal frames and place the audio and
video clips in frame-1 and frame-2 respectively.
FRAME-1
FRAME-2
<html>
<frameset cols="50%,50%">
<frame src="framea.html">
<frame src="frameb.html">
</frameset>
</html>
framea.html:
<html>
<body>
<audio controls>
<source src="Kalimba.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
frameb.html:
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
</body>
</html>
57
OUTPUT:
58
15. Create a web page which should generate following output:

FRAME-1
FRAME-2
FRAME-3
<html>
<frameset cols="50%,50%">
<frame src="framea.html">
<frameset rows="50%,50%">
<frame src="frameb.html">
<frame src="framec.html">
</frameset>
</frameset>
</html>
Framea.html
<html>
<body bgcolor=purple>
<h3>Frame A</h3>
<p><strong>Note:</strong> The frameset, frame, and no frames elements are not supported in
HTML5.</p>
</body>
</html>
Frameb.html
<html>
<body bgcolor=orange>
<h3>Frame B</h3>
</body>
</html>
Framec.html
<html>
<body bgcolor=yellow>
<h3>Frame C</h3>
</body>
</html>
59
Output:
60
16. Create a web page using Embedded CSS and multimedia

<html>
<head>
<title>HTML CSS</title>
<p style="color:green; font-size:24px;">CSS and Multimedia</p>
</head>
<body>
<object data="Wildlife.wmv" type="video/msvideo" height=200 width=200
hspace=200 vspace=200>
</object>
</body>
</html>
</body>
</html>
Result:
61

Basicwebdesign Lab New Syllabus

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Basicwebdesign Lab New Syllabus

Caricato da

Copyright:

Formati disponibili

Course Code:15CS22P

Basic Web Design lab Manual

FOR ANY FEEDBACK PLEASE CONTACT AT : shabnam.jahagirdar@gmail.com

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

HTML stands for Hyper Text Markup Language

A markup language is a set of markup tags

HTML documents are described by HTML tags

Each HTML tag describes different document content

Types of Web Pages:

Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

Figure 1 a. Static Web-Page delivered to user as stored

Figure 1 b. Dynamic Web-Page

Browsers and their types:

Client Server Model:

Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

Figure 1 c. Client-Server Model.

General structure of a Web Page:

Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

Popular Search Engines:

Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

2. Basic HTML physical character tags:

Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

3. Logical character tags:

Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

4. Other HTML tags:

Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

By default paragraph is aligned to left without specifying alignment.

Specifies the color of text

Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

This is some text!

This is some text!

The WHO was founded in 1948.

Can I get this ASAP?

Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

The list items will be marked with bullets (default)

The list items will be marked with circles

The list items will be marked with squares

The list items will not be marked

Ordered HTML Lists

Department Of Computer Science ,Gpt Hubli

Basic Web-Design Lab Manual By Shabnam S Jahagirdar, Lecturer, Gpt hubli.

The list items will be numbered with numbers (default)

The list items will be numbered with uppercase letters

The list items will be numbered with lowercase letters