Avanthi Degree & P.

G College
Narayanaguda Hyderabad

Department of Computer Science

Web Technologies
(Paper VI)

The expert Web

in anything was once a beginner
Technologies
1
Unit I
Introduction To XHTML Introduction, first HTML, Headings, Linking, Images, special
characters and horizontal rules, Lists, Tables, Frames, Forms, internal linking, meta
Elements.
CASCADING STYLE SHEETS Introduction, Inline Styles, Embedded Style Sheets, Conflicting
Styles, Linking external sheets, position Elements, box model and text flow, media types,
building a CSS drop-down menu, user style sheets, CSS3..
Unit II
Introduction To Java Scripting- Introduction, simple program, prompt dialog and alert
boxes, memory
statement, while, counter-
break and continue statements.
Functions Program modules in JavaScript, programmer defined functions, functions
definition, scope rules, global functions, Recursion.
Unit III
Arrays- Introduction, declaring and allocating arrays, references and reference parameters,
passing arrays to functions. Multidimensional arrays.
EVENTS registering event handling, event onload, onmouseover, onmouseout, onfocus,
onblur, onsubmit, onreset, event bubbling, more events.
JAVA SCRIPT OBJECTS introduction to object technology, Math Object, String Object, Date
Object, Boolean and Number Object, document and window Objects, using cookies.
Unit IV
XML - Introduction, XML Basics, Structuring Data, XML Namespaces, Document Type
Definitions (DTDs), W3C XML Schema Documents, XML Vocabularies, Extensible Style sheet
Language and XSL Transformations, Document Object Model (DOM).
Ajax-Enabled Rich Internet Applications: introduction, history of Ajax, traditional web
applications Vs Ajax Applications, RIAs with Ajax, Ajax example using XMLHttpRequest
object, XML and DOM, creating full scale Ajax-enabled application, Dojo Toolkit.

Text Book:
Internet & World Wide Web: HOW TO PROGRAM- H. M. Deitel, P.J. Deitel, -
Fourth Edition- Pearson edition

2
 Web Technoloies Lab
Practical 3 Hours/Week
1. Write a HTML program using basic text formatting tags, <p>, <br>, <pre>.
2. Write a HTML program by using text formatting tags.
3. Write a HTML program using presentational element tags <b>, <i>, <strike>, <sup> ,
<sub>, <big>, <small>, <hr>
4. Write a HTML program using phrase element tags <blockquote>, <cite>, <abbr>,
<acronym>, <kbd>, <address>
5. Write a HTML program using different list types.
6. Create a HTML page that displays ingredients and instructions to prepare a recipe.
7. Write a HTML program using grouping elements <div> and <span>.
8. Write a HTML Menu page for Example cafe site.
9. Write a HTML program using images, audios, videos.
10. Write a HTML program to create your time table.
11. Write a HTML program to create a form using text inputs, password inputs, multiple
line text input, buttons, check boxes, radio buttons, select boxes, file select boxes.
12. Write a HTML program to create frames and links between frames.
13. Write a HTML program to create different types of style sheets.
14. Write a HTML program to create CSS on links, lists, tables and generated content.
15. Write a HTML program to create your college web site using multi column layouts.
16. Write a HTML program to create your college web site using for mobile device.
17. Write a HTML program to create login form and verify username and password.
18. Write a JavaScript program to calculate area of rectangle using function.
19. Write a JavaScript program to wish good morning, good afternoon, good evening
depending on the current time.
20. Write a JavaScript program using switch case?
21. Write a JavaScript program to print multiplication table of given number using loop.
22. Write a JavaScript programs using any 5 events.
23. Write a JavaScript program using JavaScript built in objects.
24. Write a JavaScript program to create registration Form with Validations.
25.Write a XML Program to represent Student Data using DTD.
26.Write a XML Program to represent Data using XML Schema Definition.

3
 Chapter 1
1.1 Introducing HTML:
HTML stands for Hyper Text Markup Language
HTML is the predominant mark-up language for web pages. HTML elements are the
basic building-blocks of Webpages.
HTML is not programming language, it is a markup language
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements are represented by tags
Browsers do not display the HTML tags, but use them to render the content of
the page
Tim Berners-Lee is known as father of Html.

Hypertext: is text which contains links to other texts. The hypertext pages are

interconnected by hyperlinks, when mouse click on these link which brings you to a new

webpage

Markup language: Any tag based language known as markup language, for example gml,

sgml, html, xml etc.

Features for Html

Html is a static page.

Html is not a case sensitive.
Html is a error free language.
Html is simple and easy language.
It provides facilities to add audio, video, image on web pages.
Html is platform independent language, it can be run on any platform like window, linux,
Mac.
Html programs are executed by the interpreter of the browser software.
Html program save with .htm or .html extension.
The current version of Html is Html 5.0

4
Introducing XHTML:

XHTML stands for Extensible HyperText Markup Language. It is a cross between HTML and XML
language. XHTML is designed to replace HTML.

XHTML is almost identical to HTML but it is stricter than HTML. XHTML is HTML defined as an XML
application. It is supported by all major browsers.

Although XHTML is almost the same as HTML but It is more important to create your code
correctly, because XHTML is stricter than HTML in syntax and case sensitivity. XHTML documents
are well-formed and parsed using standard XML parsers, unlike HTML, which requires a lenient
HTML-specific parser.

1.2 HTML Tag

The two brackets and all of the characters between them are known as a tag .
HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags
are unclosed tags.
The closing tag is always slightly different from the opening tag (e.g. <html>) in that it has a forward
slash after the first angled bracket: (e.g. < /html >) .
A pair of tags and the content these include are known as an element.

end of a .
1.3 Structure of an HTML Document
<html>
<head>
<title> Document Title Goes Here </title>
...Head information describing the document ....
</head>

<body>
...Document content and markup go here....
</body>
</html>
5
The entire web page is surrounded by <html> software that it is now

(i.e. Document Head) (i.e. Document body) tags.

1.3.1 Document Head

The < head > element: Often referred to as the head of the page, this contains information about
the page (this is not the main content of the page).
The only tag that most authors insert in their head sections is the title.
<title>. . . </title>
All HTML documents have just one title which is displayed at the top of the browser window.

<head>
<title> Popular Websites: Google </title>
</head>
Between the opening < title > tag and the closing < /title > tag are the words Popular Websites:
Google , which is the title of this web page.

1.3.2 Document Body

The < body > element: Often referred to as the body of the page, this contains the
information you actually see in the main browser window. It consists of the opening <body> tag,
closing </body> tag, and everything in between.

Together, the < html > , < head > , and < body > elements make up the skeleton of an HTML
document they are the foundation upon which every web page is built.

1.4 Basic Text Formatting

1.4.1 Creating Headings Using < hn > Elements

HTML offers six levels of headings, which use the elements

< h1 > , < h2 > , < h3 > , < h4 > , < h5 > , and < h6 > .
Browsers display the < h1 > element as the largest of the six and < h6 > as the smallest .

<h1> Largest Heading </h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6> Smallest Heading </h6>
6
Example Program on Heading tags:
<html>
<head>
<title> Heading Tags </title>
</head>
<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>

The align Attribute

The align attribute indicates whether the heading appears to the left, center, or right of the page
(the default is the left).
section.

Value Meaning

left The heading is displayed to the left of the browser window (or other
containing element if it is nested within another element). This is the
default value if the align attribute is not used.
center The heading is displayed in the center of the browser window (or other
containing element if it is nested within another element).
right The heading is displayed to the right of the browser window (or other
containing element if it is nested within another element).

7
Example Program on align attribute

<html>
<head>
<title> The effect of the align attribute </title>
</head>
<body>
<h1 align="left"> Welcome </h1>
<h1 align="center"> To </h1>
<h1 align= "right"> Align Program </h1>
</body>
</html>

1.4.2 Creating Paragraphs Using the < p > Element

The < p > element offers another way to structure your text. Each paragraph of text should go in
between an opening < p > and closing < /p > tag .
Syntax :
<p /p>

< p > Here is a paragraph of text. < /p >

< p > Here is a second paragraph of text. < /p >
< p > Here is a third paragraph of text. < /p >

8
1.4.3 Creating Line Breaks Using the < br > Element

Whenever you use the < br > element, anything following it starts on the next line.
You could use multiple < br > elements to push text down several lines, and many designers use
two line breaks between paragraphs of text rather than using the < p > element to structure text,
as follows:

Syntax :
<br>

Paragraph one < br >

Paragraph two < br > < br >
Paragraph three < br > < br >

Example Program on br tag

<html>
<body>
<p>
To break lines<br>in a text,<br><br>use the br element.
</p>
</body>
</html>

1.4.4 Creating Preformatted Text Using the < pre > Element

The <pre> tag in HTML is used to define the block of preformatted text which preserves the text
spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers. Text
in the <pre> element is displayed in a fixed-width font. The <pre> tag requires a starting and end
tag.
Example program on <pre> tag
<html>
<head>
<title>pre tag</title>
</head>
<body>
<pre>
Avanthi Computer Science
</pre>
</body>
</html>
9
1.5 Presentational Elements

If you use a word processor, you will be familiar with the ability to make text bold, italic, or
underlined; these are just three of the ten options available to indicate how text can appear in
XHTML.
The full list is bold, italic, monospaced, underlined, strikethrough, teletype, larger, smaller,
superscripted, and subscripted text.

1.5.1 The < b > Element/ Bold Tag

Anything that appears in a <b
Syntax :

1.5.2 The < i > Element / Italic Tag

The content of an < i > element is displayed in
Syntax :
<i /i>

1.5.3 The < u > Element / Underlined Text

The content of a < u > element is underlined with a simple line.
Syntax :
<u /u>

1.5.4 The < s > and < strike > Elements / Strike Text
The content of an < s > or < strike > element is displayed with a strikethrough, which is a thin line
through the text ( < s > is just the abbreviated form of < strike > ).
Syntax :
<s /s>
1.5.5 The < tt > Element
The content of a < tt > element is written in monospaced font (like that of a teletype machine).
Syntax :
<tt /tt>

1.5.6 The <sup> Element / Superscript Text

The content of a <sup

above the other characters and is also often slightly smaller than the text surrounding it.
Syntax :
<sup /sup>

10
1.5.7 The <sub> Element / Subscript Text
The content of a < sub > element is written in subscript; it is displayed half a ch
beneath the other characters and is also often slightly smaller than the text surrounding it.
Syntax :
<sub /sub>
The <sub> element is particularly helpful to create footnotes.

1.5.8 The <big> Element / Larger Text

The contents of this element one font size larger than the rest of the text surrounding it .
Syntax :
<big /big>

1.5.8 The <small> Element / Smaller Text

The < small > element is the opposite of the < big > element, and its contents are displayed one
font size smaller than the rest of the text surrounding it. If the font is already the smallest,
Syntax :
<small /small>

1.5.9 The < hr > Element

The <hr> element creates a horizontal rule across the page. It is an empty element, rather like
the <br> element. This is frequently used to separate distinct sections of a page where a new
heading is not appropriate.

Syntax :
<hr>

11
Example program on Presentational element tag

<html>
<head>
<title>Presentational Elements</title>
</head>
<body>
<b>This will be in bold</b><br>
<i>This will be in italic</i><br>
<u>This will be underlined</u><br>
The scientific notation of Water is H₂O <br>
(a+b)² = a² + 2ab + b²<br>
<s>To show wrong text</s><br>
<tt>TT for Teletype</tt><br>
The following word should be <big> bigger </big> than those
around it. <hr>
The following word should be <small> smaller </small> than
Those around it
</body>
</html>

12
1.6 Phrase Elements

Phrase elements displayed in a manner similar to the Presentational Elements <b> , <i> , <pre> ,
and <tt> , but phrase elements are not just for presentational purposes; they also describe
something about their content.
1.6.1 The <em> Element / Emphasized Text
HTML <em> tag is used to stress emphasis the particular text within a sentence or phrase. It gives
semantic meaning to the text contained within it and renders in the italic form on the browser.
Syntax :
<em /em>

1.6.2 The <strong> Element / Strong Text

HTML <strong> tag is a phrase tag which is used to represent the important text of a document on
the browser. The text within <strong> tag renders in bold font on the browser by default
Syntax :
<strong /strong>
1.6.3 The < address > Element
The <address> tag in HTML indicates the contact information of a person or an organization. The
text inside the <address> tag will display in italic format.

Syntax :
<address /address>
1.6.4 The < abbr > Element / Text Abbreviation
You can abbreviate a text by placing it between opening < abbr > and closing < /abbr > tags.
using a title attribute whose value is the full version of the abbreviations
Syntax :
< /abbr>
1.6.5 The < acronym > Element / Acronym Element
It allows you to indicate that the text between opening < acronym > and closing
< /acronym > tags is an acronym.

Syntax :
< /abbr>

1.6.6 The < dfn > Element Is for Special Terms

HTML <dfn> tag also called as HTML definition tag. It is used to represent the term which is defined
within context of definition phrase or sentence in an HTML document.
Syntax :
<dfn /dfn>
13
1.6.7 The <blockquote> Element Is for Quoting Text

The HTML <blockquote> tag defines a long block quotation in the HTML document from another
source. Browsers traditionally render the text found within the <blockquote> tag as indented text.
This tag is also commonly referred to as the <blockquote> element.
Syntax :
<blockquote / blockquote >

1.6.8 The < q > Element / Short Quotations

The < q > element is intended to be used when you want to add a quote within a sentence.
Syntax :
<q /q>
1.6.9 The < cite > Element Is for Citations

HTML <cite> tag specifies a citation, it provides reference or title to a creative work, quoted
content, books, websites, a research paper, a blog-spot, painting, etc.

The main purpose of adding <cite> element is to provide or identify the source of the quote or any
content.

Syntax :
<cite>Cited Content.......</cite>

1.6.10 The <samp> Element Is for a Program Output

The < samp > element indicates sample output from a program, script, or the like. Again, it is mainly
used when documenting programming concepts.

Syntax :
<samp /samp>

Output displayed in monospaced font.

1.6.11 The <code> Element Is for Code

Usually the contents of the <code> element is presented in a monospaced font.

Syntax :
<code /code>

14
1.6.12 The <kbd> Element Is for Text Typed on a Keyboard

When you are talking about computers, you want to tell a reader to enter some text, you can
use the <kbd> element to indicate what should be typed in.

The content of a <kbd> element is usually represented in a monospaced font, rather like the
content of the <code> element.

Syntax :
<kbd /kbd>

1.6.13 The <var> Element

HTML <var> tag is a phrase tag which is used to define the variable for a mathematical equation,
or in the programming context.
The content within <var> tag renders in italic font in most of the browsers,

Syntax :
<var /var>

Example program on Phrase Element Tags

<html>
<head>
<title>Phrase Elements</title>
</head>
<body>
It will emphasis the <em>important text</em> of the sentence <br>
<strong>It may heavy rain today, so it will better to be in your
home</strong> <br>
<address>This Notes prepared by Santhosh <br>
Avanthi Degree & PG College </address> <br>
Mouse over the content and see the abbreviation <br> <abbr
title="HyperText Markup language">HTML</abbr> <br>
<acronym title="Osmania University">OU</acronym> <br>
<dfn>HTML</dfn> A markup language for Web designing <br>
<blockquote>
The only way to learn a new programming language is by writing programs
in it
</blockquote>
<cite>-Dennis Ritchie</cite><br>
15
HTML is the standard <q> markup language </q><br>
<pre>
<code> print("Web Technologies") </code>
</pre>
<samp>Web Technologies!</samp><br>
To copy text, you can use the keyboard shortcut:<br>

<kbd>Ctrl</kbd> + <kbd>c</kbd> <br>

<p>Solve the equation

<var>y</var>=<var>x</var>+4
</p>

1.7 Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list elements.
There are three different types of HTML lists:

Unordered lists , which are like lists of bullet points

Ordered lists , which use a sequence of numbers or letters instead of bullet points
Definition lists , which allow you to specify a term and its definition

1.7.1 Unorder List / Using the < ul > Element

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list
also. The Unordered list starts with <ul> tag (which stands for unordered list) .
16
Each bullet point or line you want to write should then be contained between opening
< li > tags and closing < /li > tags (the li stands for list item ).

<html>
<head>
<title>Unordered List </title>
</head>
<body>
<ul>
<li>oranges</li>
<li>apples</li>
<li>pears</li>
</ul>

</body>
</html>

To represent different unordered lists, there are 4 types of attributes in <ul> tag.

Type Description
type "disc" This is the default style. In this style, the list items are marked with bullets.
Ex: <ul> or

Type "circle" In this style, the list items are marked with circles.
Ex:

Type "square" In this style, the list items are marked with squares.
Ex:

Type "none" In this style, the list items are not marked.
Ex:

<html>
<head>
<title>Unordered List </title>
</head>

17
 <body>
<ul type="square">
<li>oranges</li>
<li>apples</li>
<li>pears</li>
</ul>
</body>
</html>

1.7.2 Order List / Using the < ol > Element

In an ordered list, rather than prefixing each point with a bullet point, you can use either numbers
(1, 2, 3), letters (A, B, C), or Roman numerals (i, ii, iii) to prefix the list item.

An ordered list is contained inside the <ol> element. Each item in the list should then be nested
inside the <ol> element and contained between opening <li> and closing </li> tags.

<html>
<head>
<title>Ordered List </title>
</head>
<body>
<ol>
<li>oranges</li>
<li>apples</li>
<li>pears</li>
</ol>
</body>
</html>

18
Using the type Attribute to Select Numbers, Letters, or Roman Numerals in Ordered Lists
By default, the list is ordered by numbers; however, you can change this by using the type attribute.

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type Description Examples

Type "1" This is the default type. In this 1, 2, 3, 4, 5 (Numeric Number)

Ex: <ol> or type, the list items are numbered
with numbers.

Type "I" In this type, the list items are I, II, III, IV, V (Large Roman
Ex: numbered with upper case roman numerals)
numbers.

Type "i" In this type, the list items are i, ii, iii, iv, v (Small Roman
Ex: numbered with lower case roman numerals)
<ol numbers.

Type "A" In this type, the list items are A, B, C, D, E (Capital letters)
Ex: numbered with upper case letters.

Type "a" In this type, the list items are a, b, c, d, e (Small letters)
Ex: numbered with lower case letters.

<html>
<head>
<title>Ordered List1 </title>
</head>
<body>
<ol type="A">
<li>oranges</li>
<li>apples</li>
<li>pears</li>
</ol>
</body>
</html>
19
Using the start Attribute to Change the Starting Number in Ordered Lists

If you want to specify the number that a numbered list should start at, you can use the start
attribute on the < ol > element. The value of this attribute should be the numeric representation
of that point in the list, so a D in a list that is ordered with capital letters would be represented by
the value 4.

<html>
<head>
<title>Ordered List2 </title>
</head>
<body>
<ol type="A" start="4">
<li>oranges</li>
<li>apples</li>
<li>pears</li>
</ol>
</body>
</html>

1.7.3 Definition Lists/ Using the < dl > Element

HTML Description List or Definition List displays elements in definition form like in dictionary. The
<dl>, <dt> and <dd> tags are used to define description list.

The 3 HTML description list tags are given below:

1. <dl> tag defines the description list.
2. <dt> tag defines data term.
3. <dd> tag defines data definition (description).

<html>
<head>
<title>Definition List </title>
</head>
<body>
<dl>
<dt> Unordered List </dt>
<dd> A list of bullet points. </dd>
<dt> Ordered List </dt>
<dd> An ordered list of points, such as a numbered set of steps. </dd>
20
 <dt> Definition List </dt>
<dd> A list of terms and definitions. </dd>
</dl>
</body>
</html>

1.7.4 Nesting Lists

Every list can be nested. A list can be placed inside another list.
<html>
<head>
<title> Nested List</title>
<body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
1.8 Comments :
You can put comments between any tags in your HTML documents. Comments use the following
syntax: < !-- comment goes here -- >

Anything after <! - - until the closing - - > will not be displayed. It can still be seen in the source
code for the document, but it is not shown onscreen.

21
1.9 The < font > Element
The <font> tag plays an important role in the web page to create an attractive and readable web
page. The font tag is used to change the color, size, and style of a text.
The font tag has basically three attributes which are given below:
Size
Face/Type
Color
font Size: This attribute is used to adjust the size of the text in the HTML document using font tag
with size attribute. The range of size of the font in HTML is from 1 to 7 and the default size is 3.
Font Type: Font type can be set by using face attribute with font tag in HTML document.
Font Color: Font color is used to set the text color using font tag with color attribute in HTML
document. Color can be specify either with its name or with its hex code.

Color Name Color Code Color Name Color Code

Red #FF0000 White #FFFFFF

Cyan #00FFFF Silver #C0C0C0
Blue #0000FF Gray or Grey #808080
DarkBlue #0000A0 Black #000000
LightBlue #ADD8E6 Orange #FFA500
Purple #800080 Brown #A52A2A
Yellow #FFFF00 Maroon #800000

Lime #00FF00 Green #008000

Magenta #FF00FF Olive #808000

Example Program on font tag

<html>
<head>
<title>HTML font tag</title>
</head>
<body>
<font face = "cambria" color = "Red" size = "6">
Web Technologies </font>
</body>
</html>

22
2.1 Basic Links
A link is specified using the <a> element. Anything between the opening <a> tag and the closing
</a> tag becomes part of the link that users can click in a browser.
2.1.1 Linking to Other Web Pages
To link to another web page, the opening < a > tag must carry an attribute called href ; the value
of the href attribute is the name of the file you are linking to.
Syntax :-
<a href="url">link text</a>

Example :-

http://www.avanthicollege.ac.in/ >
Example Program on Link :-

<html>
<head>
<title>Link example</title>
</head>
<body>
<a href="http://www.avanthicollege.ac.in/"> Avanthi College </a>
</body>
</html>

to the homepage of our(www.avanthicollege.ac.in)

website.

2.1.2 Linking to E - mail Addresses

HTML <a> tag provides you option to specify an email address to send an email. While using <a>
tag as an email tag, you will use mailto: email address along with href attribute.

To create a link to an e - mail address, you need to use the following syntax with the <a>
element:

Here, the value of the href attribute starts with the keyword mailto , followed by a colon, and then
the e - mail address you want the mail sent to.
<html>
23
 <head>
<title>Link example</title>
</head>
<body>
<a href="mailto:[email protected]">E-mail us</a>
</body>
</html>

Images, Audio, and Video

2.2 Images :
Images make a web page more attractive. Images are added to a site using the < img >
element.
Image tag carry at least two attributes:
The attribute, indicating the source of the image, attribute, which provides a
description of the image

2.2.1 The src Attribute

The src attribute tells the browser where to find the image, The value is a URL. src attribute loads
the image from the address specified using URL (Uniform Resource Locator). src stands for
"source".

24
2.2.2 The alt Attribute
The alt attribute must appear on every < img > element and its value should be a text description
of the image. If the browser cannot display the image, this text alternative will be shown instead

Syntax:

Example Program on img tag

<html>
<head>
<title>Image Tag</title>
</head>
<body>
<img src="C:\Users\Santhu-PC\Downloads\LOGO red 2.jpg" alt="Avanthi Logo">
</body>
</html>

Output:

2.2.3 The height and width Attributes

The height and width attributes specify the height and width of the image, and the values for these
attributes are almost always shown in pixels
Example Program:
<html>
<head>
25
 <title>Image Tag</title>
</head>
<body>
<img src="C:\Users\Santhu-PC\Downloads\LOGO red 2.jpg" alt="Avanthi Logo"
height="100" width="100">
</body>
</html>

2.2.4 The align Attribute

The align attribute was created to align an image within the page

<html>
<head>
<title>Image Tag</title>
</head>
<body>
<img src="C:\Users\Santhu-PC\Downloads\LOGO red 2.jpg" alt="Avanthi Logo"
height="200" width="200" align="right">
</body>
</html>

26
The align attribute was particularly used by authors who wanted text to flow around an image. The
align attribute can take one of the values in the table that follows

Value Purpose
Top The top of the image is aligned with top of the current line of text.
middle The middle of the image is aligned with the current text baseline.
bottom The bottom of the image is aligned with the baseline of the current line of
text (the default), which usually results in images rising above the text.
left The image is aligned to the left side of the containing window or element
and any text flows around it.
right The image is aligned to the right side of the containing window or element
and any text flows around it.

<html>
<head>
<title>Image Tag</title>
</head>
<body>
Hello <img src="C:\Users\ Santhu-PC\Downloads\LOGO red 2.jpg" alt="Avanthi Logo"
height="100" align="left"> Avanthi <br><br><hr>

Hello <img src="C:\Users\ Santhu-PC\Downloads\LOGO red 2.jpg" alt="Avanthi Logo"

height="100" align="middle"> Avanthi <br> <br><hr>

Hello <img src="C:\Users\ Santhu-PC\Downloads\LOGO red 2.jpg" alt="Avanthi Logo"

height="100" align="top"> Avanthi<br><br><hr>

Hello <img src="C:\Users\ Santhu-PC\Downloads\LOGO red 2.jpg" alt="Avanthi Logo"

height="100" align="bottom"> Avanthi<br><br><br><hr>

Hello <img src="C:\Users\ Santhu-PC\Downloads\LOGO red 2.jpg" alt="Avanthi Logo"

height="100" align="right"> Avanthi<br>

</body>
</html>

27
2.2.5 The border Attribute
border is a line that can appear around an image or other element. By default, images do not
have borders, The border attribute was created to specify the width of the border in pixels

2.2.6 The hspace and vspace Attributes

The hspace and vspace attributes can be used to control the amount of white space around an
image.

<html>
<head>
<title>Image Tag</title>
</head>
<body>
<img src="C:\Users\Santhu-PC\Downloads\LOGO red 2.jpg" alt="Avanthi Logo" height="100"
border="2" hspace="50" vspace="50">
</body>
</html>

28
2.3 Using Images as Links

<a> tag and

the closing </a> tag, you simply place an image inside these tags. Images are
often used to create graphical buttons or links to other pages.
(or)
To use an image as a link, put the <img> tag inside the <a> tag:
Syntax :

<a href =
<img src =
</a>
Example Program:

<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>click on following image</p>
<a href = "http://www.avanthicollege.ac.in/">
<img src = "C:\Users\Santhu-PC\Downloads\LOGO red 2.jpg" height="100"
width="100">
</a>
</body>
</html>

Output :

You can click on the image (Avanthi Logo) to reach to the home page of Avanthi college.

Browsers tend to support three common bitmap graphics formats, and most graphics programs
will save images in these formats:
GIF: Graphics Interchange Format (pronounced eith
JPEG:
PNG:

29
2.4 Adding Video and Audio to Your Web Pages

Adding Flash animations, video, and audio to your pages. Collectively, these are often referred to
as rich media .

In order to show rich media on your pages, you will need to learn a new element, the <object>
element.
<object> element can tell the browser several things, including:
The name of the file and where to find it
The format of the file
The type of plug - in used to play the file
Inside the <object> element, you can use the <param> element to pass extra information to the
player

<html>
<body>
<object width="600" height="400" data=="F:\Motivational.mp4">
</object>
</body>
</html>

30
Adding Flash to a Page Using < embed > Elements
The <embed> element is used to embed multimedia content into an HTML document.

<html>
<head>
<title>embed tag</title>
</head>
<body>
<embed src="F:\Motivational.mp4" height=600 width=800>
</body>
</html>

Adding Audio to Your Site

<html>
<head>
<title>audio tag</title>
<body>
<embed src="G:\01 - Baitikochi Chuste [NaaSong.in].mp3"> </embed>
</body>
</html>

31
4. Table
HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.

We can create a table to display data in tabular form, using <table> element, with the help of
<tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is
defined by <td> tags.

In order to create a table in a Web page, firstly the structure of the table is to be defined using
TABLE tag in HTML. The Beginning and end of a table are marked using <TABLE>and </TABLE>
tags.
Syntax: ............ </table>

When the structure of a table is created <TR> tag is used to add a row in the table. It marks the
beginning of a row.
Synatx:
<table>
<tr>

</tr>
</table>
There are two types of cell tags used in a table.
1. <th>: Marks a heading cell within a row. It is similar to the heading tag <HI. ... H6> on a web
page and is used to give a proper heading to the columns of the table. This tag is optional and
you can create tables without using <TH>tag.
2. <td>: It is a data cell tag and used for the body of the table.
Synatx:
<table>
<tr>

</tr>
</table>
32
 The bgcolor Attribute
The bgcolor attribute sets the background color for the table. The value of this attribute should
either be a color name or a six - digit code known as a hex code .
The syntax is as follows:

The border Attribute

If you use the border attribute, a border will be created around both the table and eachindividual
cell.
The syntax is as follows:

The cellpadding Attribute

The cellpadding attribute is used to create a gap between the edges of a cell and its contents. The
value for this attribute determines the amount of space or padding inside each wall of the cell,
specified either in pixels or as a percentage value
The syntax is as follows:

The cellspacing Attribute

The cellspacing attribute is used to create a space between the borders of each cell. The value
for this attribute can be either the amount of space you want to create between the cells, in
pixels, or a percentage value.

The syntax is as follows:

or
The rules Attribute
The rules attribute is used to indicate which inner borders of the table should be displayed.
The default value is none . The
syntax is as follows:

The following table shows the possible values for the rules attribute:

Value Purpose
none No inner borders (b default)
rows Displays horizontal borders between each row
cols Displays vertical borders between each column
all Displays horizontal and vertical borders between each row and column
33
Example Program on Table:

<html>
<head>
<title>Table Tag</title>
</head>
<body>
<table align="center" border="2" rules="all" height="200">
<caption> Student Table</caption>
<tr align="center" width="100">
<th>S.No</th>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>

<tr align="center" width="100">

<td>1</td>
<td>Raju</td>
<td>Web Technologies</td>
<td>70 </td>
</tr>

<tr align="center" width="100">

<td>2</td>
<td>Roja</td>
<td>Python</td>
<td>60 </td>
</tr>
</table>
</body>
</html>

34
Create Time Table using Table Tag
<html>
<head>
<title> Time Table</title>
</head>
<body>
<h1 align="center" style="color:red">Avanthi Degree & P.G College
</h1>
<h2 align="center" style="color:red"> B.Sc Physical Science Time
Table</h2>
<center>
<table border="2" bordercolor="red" rules="all" height="60%"
width="60%" style="font-size:17px">

<tr align="center">
<th >Group</th>
<th>9:00 to 9:45</th>
<th>9:45 to 10:30</th>
<th>10:30 to 11:15</th>
<th rowspan="4" style="writing-mode:vertical-rl">Break</th>
<th>11:25 to 12:10</th>
<th>12:10 to 01:00</th>
</tr>

<tr align="center" width="200">

<th>MECS</th>
<td>Electronics</td>
<td>Computer Science</td>
<td>English</td>
<td>Mathematics</td>
<td>Second Languages</td>
</tr>

<tr align="center" width="200">

<th>MPCS</th>
<td>Computer Science</td>
<td>Mathematics</td>
<td>Physics</td>
<td>English</td>
<td>Second Languages</td>
</tr>
35
<tr align="center" width="200">
<th>MSCS</th>
<td>Statistics</td>
<td>Mathematics</td>
<td>Computer Science</td>
<td>English</td>
<td>Second Languages</td>
</tr>
</table>
</center>
</body>
</html>

36
HTML Forms are required, when you want to collect some data from the site visitor. For example,
during user registration you would like to collect information such as name, email address,
creditcard, etc.
An HTML form is a section of a document which contains controls such as text fields, password
fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for processing
such as name, email address, password, phone number, etc.
Creating a Form with the <form> Element
The HTML <form> element provide a document section to take input from user. It provides
various interactive controls for submitting information to web server such as text field, text
area,password field, etc.
Syntax:
<form>

//Form elements

</form>

5.1 Form Controls

The different types of form controls that live inside the < form > element to collect data from a
visitor to your site.
Text input controls
Buttons
Checkboxes and radio buttons
Select boxes (sometimes referred to as drop - down menus and list boxes)
File select boxes
5.1.1 Text Inputs
Text input boxes are used on many web pages. Possibly the most famous text input box is
the one right in the middle of the Google homepage that allows you to enter what you are
searching for.
There are actually three types of text input used on forms:
5.1.1.1 Single - line text input controls: Used for items that require only one line of user input,
such as search boxes or e - mail addresses. They are created using the < input > element and
sometimesreferred to simply as

37
 Syntax : <form>

</form>

Attributes

Following is the list of attributes for <input> tag for creating text field.

Sr.No Attribute & Description

1 type
Indicates the type of input control and for text input control it will be set to text.

2 name
Used to give a name to the control which is sent to the server to be recognized and
get the value.

3 value
This can be used to provide an initial value inside the control.

4 size
Allows to specify the width of the text-input control in terms of characters.

5 maxlength
Allows to specify the maximum number of characters a user can enter into the text
box.

5.1.1.2 Password input controls

Password input controls are created almost identically to the single - line text input controls,
except that the type attribute on the <input> element is given a value of password .
Syntax : <form>

</form>

38
 5.1.1.3 Multi-line Text input controls
This is used when the user is required to give details that may be longer than a single sentence.
Multi-line input controls are created using HTML <textarea> tag.
Syntax : <form>

Content
</textarea

</form>
Attributes

Following is the list of attributes for <textarea> tag.

Sr.No Attribute & Description

1 name
Used to give a name to the control which is sent to the server to be recognized and
get the value.

2 rows
Indicates the number of rows of text area box.

3 cols
Indicates the number of columns of text area box

5.1.2 Checkbox Control

Checkboxes are used when more than one option is required to be selected. They are alsocreated
using HTML <input> tag but type attribute is set to checkbox.
5.1.3 Radio Button Control
Radio buttons are used when out of many options, just one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to radio.
Attributes
Following is the list of attributes for radio/Checkbox button.

Sr.No Attribute & Description

1 type
Indicates the type of input control and for checkbox/Radio input control it will be
set to radio.

39
 2 name
Used to give a name to the control which is sent to the server to be recognized and
get the value.

3 value
The value that will be used if the Checkbox / radio box is selected.

4 Checked Set to checked if you want to select it by default.

Syntax : <form>
>

</form>
5.1.4 Select Box Control
A select box, also called drop down box which providesoption to list down various options
in the form of drop down list, from where a user can select one or more options.
Syntax : <form>
<select>
<option> Option1
<option> Option2
</select>
</form>
Attributes

Following is the list of important attributes of <select> tag

Sr.No Attribute & Description

1 name
Used to give a name to the control which is sent to the server to be recognized and
get the value.

2 size
This can be used to present a scrolling list box.

3 multiple
If set to "multiple" then allows a user to select multiple items from the menu.

40
 5.1.5 File upload Box
If you want to allow a user to upload a file to your web site, you will need to use a file upload box,
also known as a file select box. This is also created using the <input> element but type attribute is
set to file

Following is the list of important attributes of file upload box

Sr.No Attribute & Description

1 name
Used to give a name to the control which is sent to the server to be recognized and
get the value.

2 accept
Specifies the types of files that the server accepts.

Syntax : <form>

</form>

5.1.6 Button Controls

There are various ways in HTML to create clickable buttons. You can also create a clickable
button using <input>tag by setting its type attribute to button. The type attribute can take
the following values

Sr.No Type & Description

1 submit
This creates a button that automatically submits a form.

2 reset
This creates a button that automatically resets form controls to their initial values.

3 image
This creates a clickable button but we can use an image as background of the
button.

41
 Syntax : <form>

</form>

5.1 The action Attribute

The action attribute indicates what happens to the data when the form is submitted.

Usually, the value of the action attribute is a page or program on a web server that will receive
the information.

Example Program on Form Controls

<html>
<head>
<title>FormControls</title>
</head>
<body >
<form action="https://www.osmania.ac.in/">
UserName:
<input type="text" name="uname"><br>
Password:
<input type="password" name="pwd"><br>
E-mail id:
<input type="text"><br>
Gender: <input type="radio" name="radiogroup1"> Male
<input type="radio" name="radiogroup1"> Female<br><br>
Contact Number: <input type="text" name="mobile">
<h3>Educational Qualification</h3>
Degree: <select>
<option selected>-- Select Group --</option>
<option>B.Com</option>
<option>B.Sc</option>
<option>BBA</option>
<option>B.A</option>
</select><br>
Hobbies: <br> <input type="checkbox">Playing chess
<input type="checkbox">Reading Books
<input type="checkbox">Watching Movies <br>
Address:<br>
<textarea cols="30" rows="5" >

42
Enter Address Here
</textarea><br>
<br>
Attach Resume: <input type="file"><br><br>
<input type="image" src="D:\Submit Button.jpg">
</body>
</html>

43
 Frames divide a browser window into two or more separate pieces or panes, with each pane
containing a separate web page. A collection of frames in the browser window is known
as aframeset.

A frameset divides the window into rows and columns (rather like a table). The simplest of
framesets might just divide the screen into two rows, whereas a complex frameset could use
several rows and columns.
6.1 The <frameset> Element
The <frameset> element replaces the <body> element in frameset documents. It is the attributes
of the <frameset> element that specify how the browser window will be divided up into rows
and columns.
These attributes are as follows:
cols specifies how many columns are in the frameset.
rows specifies how many rows are in the frameset.

The <frameset> element contains a <frame> element for each frame of the document (each cell
of the grid constructed by the <frameset> element) and a <noframes> element to indicate
whatshould be displayed if the user browser does not load frames.

The cols Attribute

The cols attribute specifies both the number of columns in the frameset and the width of each
column. you have to specify the width of each of the columns (separated by a comma).
For example, here are three values indicating that there are also three columns:
60%,
You can specify the width of each column in one of the four ways
Absolute values in pixels. For example, to create three vertical frames, use cols = "100, 500, 100".
A percentage of the browser window. For example, to create three vertical frames,
use cols = "10%, 80%, 10%".
Using a wildcard symbol. For example, to create three vertical frames, use cols = "10%, *,
10%".In this case wildcard takes remainder of the window.
As relative widths of the browser window. For example, to create three vertical frames, use cols
= "3*, 2*, 1*". This is an alternative to percentages.

44
The rows Attribute
The rows attribute works just like the cols attribute and can take the same values, but it is used
to specify the rows in the frameset.

The <frame> Element

The <frame> element indicates what goes in each frame of the frameset. It is always an empty
element, and therefore should not have any content.
Each <frame> element should always carry one attribute, src , to indicate the page that should
represent that frame.
The src Attribute
The src attribute indicates the file that should be used in the frame.
Example program using rows attribute
<html>
<head>
<title>Frames</title>
</head>
<frameset rows="50%,50%">
<frame src=" ">
<frame src=" ">
</frameset>
</html>

Example program using cols attribute

<frameset cols="50%,50%">

45
Example program using rows and cols attribute
<frameset cols="50%,50%"

The border Attribute

The border attribute specifies the width of the border of each frame in pixels.

The frameborder Attribute

The frameborder attribute specifies whether a border should be displayed between
frames. The following indicates that there should not be any borders.

The framespacing Attribute

The framespacing attribute only works in Internet Explorer; it specifies the amount of space
between frames in a frameset. The value should be given in pixels and the default value is 2
if not otherwise specified.

The scrolling Attribute

If the content of a frame does not fit in the space it has been allocated, the browser will likely
provide users with scrollbars so they can read the rest of the content for that frame.
You can control the appearance of the scrollbars that appear on the frame using the scrollbar
attribute:

This takes values either "yes", "no" or "auto". For example scrolling = "no" means it should not
have scroll bars.
46
 Auto means Indicates that the browser should include scrollbars when the content does not
fit in the frame, but otherwise should not show them.

The marginwidth and marginheight Attributes

The margin is the space between the three - dimensional border of a frame and its contents.
The marginwidth attribute enables you to specify the width of the space between the left and
right of the frame borders and the frame content. The value is given in pixels.
The marginheight attribute enables you to specify the height of the space between the top and
bottom of the borders and its contents. The value is given in pixels.

The <noframes> Element

If a user s browser does not support frames (which is very rare these days), the contents of
the <noframes> element should be displayed to the user.
You should place a <body> element inside the <noframes> element
because if a browser does not understand the <frameset> element, it should ignore the
<frameset> element and the <noframes> element, then display what is inside the <body>
element containedin the < noframes> element.

47
 <html>
<head>
<title>Frames</title>
</head>
<frameset cols="50%,50%" rows="50%,50%" frameborder="2" bordercolor="Red">
<frame src="Headings.html">
<frame src="Presentational.html">
<frame src="Phrasetags.html">
<frame src="Image.html">
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>

Creating Links Between Frames

One of the most popular uses of frames is to place navigation bars in one frame and then load
the pages with the content into a separate frame.
Each < frame > element can carry the name attribute to give each frame a name. This name is
used in the links to indicate which frame the new page should load into.

48
 <html>
<head>
<title>Frames</title>
</head>
<frameset cols="50%,50%" border="2" bordercolor="red">
<frame src="anchor.html" name="Frame1">
<frame src=" " name="Frame2">
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>

49
Meta elements :

The <meta> tag defines metadata about an HTML document. Metadata is data (information)
about data.

<meta> tags always go inside the <head> element, and are typically used to specify character
set, page description, keywords, author of the document, and viewport settings.

Metadata will not be displayed on the page, but is machine parsable.

Metadata is used by browsers (how to display content or reload page), search engines
(keywords), and other web services.

There is a method to let web designers take control over the viewport (the user's visible area
of a web page), through the <meta> tag (See "Setting The Viewport" example below).

Example Program on Meta Elements

<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML Notes">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Santhosh">
<meta name="viewport" content="width=device-width">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>

50
 Chapter-2
Cascading Style Sheets
Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various
attributes for the HTML tags. Using CSS, you can specify a number of style properties for a given
HTML element.
Each property has a name and a value, separated by a colon (:). Each property declaration is
separated by a semi-colon (;).
Syntax CSS Properties:
Selector Selector : It means any valid tag name
{ Propertyname: which property you want
Propertyname : value; apply on selector
Propertyname : value; Value: Which value is to be set to the
property.
Propertyname : value;

}
1.1 Types of CSS (Cascading Style Sheet) / Where you can Add CSS Rules

Cascading Style Sheet(CSS) is used to set the style in web pages which contain HTML elements.
It sets the background color, font-size, font-
pages.
There are three types of CSS which are given below:
Inline Style Sheet
Internal or Embedded Style Sheet
External Style Sheet
1.1.1 Inline CSS: If style attribute is used within the HTML tag then it is known as Inline Style
Sheet.
Syntax:
Example: <p style="color: red"> Inline Style Sheets </p>

and

Example Program:
<html>
<head>
<title>Inline Style Sheets</title>
</head>
<body>
<p style="color:red; background-color:cyan">
Welcome to Inline Style Sheets</p> </body></html>

51
1.1.2 Internal or Embedded Style Sheet
ad>) of an HTML document
then it is known as Internal or Embedded Style Sheet.
Syntax: <head>

selector
{
Propertyname : value;
Propertyname : value;

}
</style>
</head>

The type attribute defines the type of style being included (strictly the MIME type) .
The type value is text/css.
The curly brace-delimited text is called the declaration.

Example Program:
<html>
<head>
<title>Internal Style Sheets</title>
<style type="text/css">
p
{
color:red;
background-color:cyan;
}
</style>
</head>
<body>
<p> Welcome to Internal Style Sheets</p>
<b> Bold tag</b>
</body>
</html>

52
1.1.3 External Style Sheet:
Define style sheet rules in a separate .css file and then include that file in your HTML document
using HTML <link> tag.
An external style sheet is a separate file that can be re-used to apply the same style to
numerous documents.
Specified by a <link> element within the <head> element of a document.

Syntax:
<head>
...
<link rel="stylesheet" href="filename.css">
...
</head>

The rel attribute specifies the relationship between the document and the file referred.
note that the external style sheet can be located anywhere on the web
the syntax used in external style sheets is the same as for embedded style sheets
(without the style tags).

Styles.css
p
{
color:red;
background-color:cyan;
}

Externalstylesheet.html
<html>
<head>
<title>External Style Sheets</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Welcome to External Style Sheet </p>
<b>Bold
tag</b>
</body>
</html>

53
Conflicting Styles / CSS Specificity:
CSS stands for Cascading Style Sheets. The cascade is the algorithm used to determine how a
given element should look. Each element can have many different relevant CSS rules, and these
can often conflict with each other.
If there are two or more CSS rules that point to the same element, the selector with the highest
specificity value will "win" the less specific CSS rule, and its style declaration will be applied to
that HTML element.

Selectors have different values of importance (or specificity). Here is the short list (listed in
order of importance):

Inline styles - Example: <h1 style="color: pink;">

IDs - Example: #abc
Classes, pseudo-classes, attribute selectors - Example: .test, :hover
Elements and pseudo-elements - Example: h1, :before

Example Program :

<html>
<head>
<title>Conflictng Styles</title>
<style>
#abc
{
color: blue;
}
.xyz
{
color: green;
}
p
{
color: pink;
}
</style>
</head>
<body>
<p id="abc" class="xyz"
style="color: red;font- size:25pt">Conflciting Styles</p>
</body>
</html>

54
1.3 CSS Position:

The CSS position property is used to set position for an element. it is also used to place an
element behind another and also useful for scripted animation effect.

You can position an element using the top, bottom, left and right properties. These properties
can be used only after position property is set first.

A position element's computed position property is relative, absolute, fixed or sticky.

There are four types of positioning that can be used to place elements required positions. They
are as follows.

1. CSS Static Positioning

2. CSS Fixed Positioning
3. CSS Relative Positioning
4. CSS Absolute Positioning

1) CSS Static Positioning

position: static is the default value that an element will have. This means if you don't
declare position for an element in CSS, it will automatically be set to static.

It is not affected by the top, right, bottom, left properties.

2) CSS relative Positioning

position: relative is similar to static in that relatively positioned elements will
follow the normal flow of the webpage. But the main difference is that using relative will
now unlock the other CSS layout properties.
element can be affected by top, right, bottom, left

3) CSS Absolute Positioning

position: absolute that element is completely removed from the document's normal
flow.. In Absolute
position, the position is set through some combination of
top, right, bottom, left properties
4) CSS fixed Positioning
position: fixed element is positioned relative to the browser , element always stays in
the same place (relative to the browser) even if the page is scrolled.

element can be affected by top, right, bottom, left

55
 <html>
<head>
<title>Position Property</title>
</head>
<body>
<p style="position:static ; left:50px ;
background-color:red" > Static Position </p>
<p style="position:relative ;left:50px;
background-color:green"> Relative Position </p>
<p style="position:absoulute; left:50px;
background-color:purple"> Absolute Position </p>
<p style="position:fixed ; left:50px;
background-color:cyan"> Fixed Position </p>
</body>
</html>

1.4 . Grouping HTML tags / <Div> and <span> tags

There are two important tags which we use very frequently to group various other HTML tags.
i) <div> tag and ii) <span> tag
The <div> and <span> elements allow you to group several elements to create sections or
subsections of a page.

56
i) <div> tag:
The div tag is known as Division tag. The div tag is used in HTML to make divisions of content
in the web page like (text, images, header, footer, navigation bar, etc).
This is very important block level tag which plays a big role in grouping various other
HTML tags and applying CSS on group of elements.
The <div> tag can be used to create webpage layout where we define different parts (Left,
Right, Top etc.) of the page using <div> tag.
This tag does not provide any visual change on the block but this has more meaning when it is
used with CSS.

Syntax :

Example Program:
<html>
<head>
<title>Division Tag</title>
</head>
<body>
<div align="left">
<b> It is Bold Format </b> <br>
<i>It is Italic Formt</i>
</div>
<div align="center">
<b> It is Bold Format </b><br>
<i>It is Italic Formt</i>
</div>
<div align="right">
<b> It is Bold Format </b><br>
<i>It is Italic Formt</i>
</div>
</body>
</html>

57
Example Program on Div tag using style and CSS Properties
<html>
<head>
<title>Division tag</title>
</head>
<body>
<div style="background-color:#ff9900; width:100%;
line-height:120px;text-align: center;">
Top
</div>

<div align="center" style="background-color:#ffff00;

width:200px;line-height:400px;text-align:center ;
float:left;" >
Left
</div>
<div align="center" style="background-color:#ffff00;
width:200px;line-height:400px; float:right" >
Right
</div>
<div style="width:100%;line-height:400px;
text-align:center;" >
Center
</div>
<div style="background-color:#009900; width:100%;
line-height:120px;float:left;text-align:center;">
bottom
</div>
</body>
</html>

58
ii) <span> tag
The HTML <span> is an inline element and it can be used to group inline - elements in an HTML
document.
This tag also does not provide any visual change on the block but has more meaning when it is
used with CSS.
The difference between the <span> tag and the <div> tag is that the <span> tag is used with
inline elements whereas the <div> tag is used with block level elements.
Example Program:

<html>
<head>
<title>Span tag</title>
</head>
<body>
<p>
Welcome to <span style="color:red">Avanthi</span>
Degree <span style="color:blue">College</span>
</p>
</body>
</html>

1.4 . Box Model and Text Flow :

The box model is a very important concept in CSS because it determines how elements are
positioned within the browser window.
It gets its name because CSS treats every element as if it were in a box .
The CSS box model is a container that contains multiple properties including borders, margin,
padding, and the content itself. It is used to create the design and layout of web pages.

every box has three properties

59
1.4.1 The Border Properties
The border properties allow you to specify how the border of the box representing an element
should look.
There are three properties of a border you can change:
border - color to indicate the color a border should be
border - style to indicate whether a border should be a solid, dashed, or double line,
or one of the other possible values
border - width to indicate the width a border should be

The border - color Property

The border-color property allows you to change the color of the border surrounding a
box.
For example:
p
{
border-color:#ff0000;
}
The value can be a color name or a hex code for the color ,It can also be expressed as values
for red, green, and blue; between 0 and 255; or percentages of red, green, and blue. See the
table that follows for examples.

60
we can individually change the color of the bottom, left, top, and right sides of a

border-bottom-color
border-right-color
border-top-color
border-left-color
The border - style Property
The border - style property allows you to specify the line style of the border:
p
{
border-style:solid;
}
The default value for this property is none , so no border would be shown automatically.
The table that follows shows the possible values.

We can individually change the style of the bottom, left, top, and right borders of a box using
the following properties:
border-bottom-style
border-right-style
border-top-style
border-left-style

61
The border - width property allows you to set the width of your borders; usually the width is
specified in pixels.
p
{
border-style:solid;
border-width:4px;
}
The value of the border - width property cannot be given as a percentage, although you could
use any absolute unit or relative unit, or one of the following values:
thin
medium
thick
We can individually change the width of the bottom, top, left, and right borders of a box using
the following properties:
border-bottom-width
border-right-width
border-top-width
border-left-width
Expressing Border Properties Using Shorthand
The border property allows you to specify color, style, and width of lines in one property:
P
{
border: 4px solid red;
}
Example Program on border properties :
<html>
<head>
<title>Border Properties</title>
<style>
p
{
border-color:#ff0000;
border-style:solid;
border-width:4px;
}
</style>
</head>
<body>
<p> This is Paragraph tag with Border properties </p>
</body>
</html>

62
1.4.2 The padding Property
The padding property allows you to specify how much space should appear between the
content of an element and its border:
td
{
padding:5px;
}
The value of this property is most often specified in pixels.
You can specify different amounts of padding inside each side of a box using the following
properties:
padding-bottom
padding-top
padding-left
padding-right
The padding attribute is especially helpful in creating white space between the content of an
element and any border it has.

Example Program on Shorthand Border and Padding Property :

<html>
<head>
<title>Border and Padding Properties</title>
<style>
p
{
border: dotted 4px red;
padding : 5px;
}
</style>
</head>
<body>
<p> This is Paragraph shorthand Border and Padding
Properties </p>
</body>
</html>

63
3.3 The margin Property
The margin property controls the gap between boxes, and its value is either a length, a
percentage, or inherit , each of which has exactly the same meaning as it did for the padding
property you just saw.
p
{
margin:20px;
}
We can also set different values for the margin on each side of the box using the following
properties:
margin-bottom
margin-top
margin-left
margin-right
Example Program on Shorthand Border and Margin Property :

<html>
<head>
<title>Border and Padding Properties</title>
<style>
p,h1
{
border: dotted 4px red;
margin: 50px;
}
</style>
</head>
<body>
<h1> Heading 1</h1>
<p> This is Paragraph shorthand Border and Margin
Properties
</p>
</body>
</html>

64
Example Program using Border, Padding Margin and Text flow property
<html>
<head>
<title>Border Margin & Padding Properties</title>
<style>
p,h1
{
border: dotted 4px red;
margin: 50px;
padding : 5px;
text-align:center;
float:right;
}
</style>
</head>
<body>
<h1> Heading 1</h1>
<p> This is Paragraph shorthand Border and Margin
Properties
</p>
</body>
</html>

65
Dimensions of a Box
The following properties are allowing you to control the dimensions
of boxes.

66
1.5. User Style Sheets :
Users can define their own user style sheets to format pages based on their preferences.
User style sheets are external style sheets and are not linked to a document.; rather,

To add a user style sheet in Internet Explorer :

1. Open Internet Explorer
2. Click the Settings icon in the upper-right corner, or click the Tools menu.

3. Select Internet options from the drop down menu, you can then access
Internet Options immediately and Select the ' Accessibility ' button. The
Accessibility dialog box will appear.

4. Place a tick next to

5. Use the button to browse and select the custom style sheet .
67
.html file

<html>
<head>
<title>User Style Sheets</title>
</head>
<body>
<p> Applying user styles </p>
<p> In Internet Explorer </p>
</body>
</html>

Mystyle.css

*
{
background-color:cyan;
color:red;
font-size:20pt;
}

68
1.6 Building a CSS drop-down menu
Drop-down menus are a good way to provide navigation links on a website without
using a lot of screen space.
The :hover pseudo class is used to apply styles to an element when the mouse
cursor is over it.
The display property allows a programmer to decide if an element is displayed as
a block element, inline element , or is not rendered at all ( none )

Example program on CSS drop-down menu

<html>
<head>
<title>Css Drop-down Menu</title>
<style>
.abc
{
font-weight:bold;
text-align:center;
color:white;
width:10em;
background-color:blue
}
div.abc:hover a
{
color:black;
display:block;
background-color:white;
}
a
{
color:orange;
}
</style>
</head>
<body>
<div class="abc"> UG Course<br>
<a href="#">BSc</a>
<a href="#">BCom</a>
<a href="#">BBA</a>
<a href="#">BA</a>
</div>
</body>
</html>
69
1.7 CSS3

CSS3 is the latest version of the CSS specification. CSS3 adds several new styling features and
improvements to enhance the web presentation capabilities.

There are lot more things you can do with CSS.

You can easily apply same style rules on multiple elements.
You can control the presentation of multiple pages of a website with a single style sheet.
You can present the same page differently on different devices.
You can style dynamic states of elements such as hover, focus, etc. that isn't possible
otherwise.
You can change the position of an element on a web page without changing the markup.
You can alter the display of existing HTML elements.
You can transform elements like scale, rotate, skew, etc. in 2D or 3D space.
You can create animations and transitions effects without using any JavaScript.
You can create print friendly version of your web pages.

1.8 Media types

CSS media types allow a programmer to decide what a page should look like depending
on the kind of media being used to display the page.
The most common media type for a web page is the screen media type, which is a
standard computer screen.
A block of styles that applies to all media types is declared by @media all and
enclosed in curly braces. To create a block of styles that apply to a single media type
such as print, use @media print and enclose the style rules in curly braces.
Other media types in CSS 2 include handheld, braille, aural and print.
The handheld medium is designed for mobile Internet devices.
The braille is for machines that can read or print web pages in braille.
The aural styles allow the programmer to give a speech-synthesizing web browser
more information about the content of the web page.
The print .

70
<html>
<head>
<title>Mediatypes </title>
<style>
@media all
{
body { background-color:cyan }
p
{
font-size: 12pt; color: black;
}
h1
{
color:red;
}
} /* end @media all declaration. */
@media print
{
p
{
font-size: 14pt; color: lime;
}
h1
{
color:cyan;
}
} /* end @media all declaration. */
</style>
</head>
<body>
<h1> CSS Media Type Example </h1>
<p> This text will appear one font on the screen and a
different font on paper or in a print preview. To see
the difference in Internet Explorer, go to the Print menu
and select Print Preview. In Firefox, select Print
Preview from the File menu.</p>
</body>
</html>

71
 Unit-I Questions
1. Write about HTML & XHTML
2. Explain about presentational and Phrase elements
3. Write about headings and Images
4. Define list. What are the different types of lists in html? Explain how these lists are
created in HTML with suitable examples.
5. Explain in detail about Table with an example
6. What is Frame ? Explain working of the frames with examples.
7. Write about forms and explain about different types of form controls.
8. What is Cascading Style Sheets (CSS) ? Explain different types of Style sheets (Types
of CSS)
9. Explain about meta elements with an example
10. Write about Conflict Style sheets
11. Position elements
12. Explain about Box model and Text flow
13. Explain in detail about media types.
14. Discuss about building / Creating a CSS drop-down menu
15. Write about user style sheets and CSS3

72