Scribd
Upload
2 views

MODULE_2 HTML&CSS

The document provides an introduction to HTML, explaining its purpose as a markup language for creating web pages and its platform independence. It details basic HTML tags, their structure, attributes, and formatting options, along with examples of how to use them. Additionally, it covers different types of lists and their customization in HTML.

Uploaded by

varsha311005
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

MODULE_2 HTML&CSS

The document provides an introduction to HTML, explaining its purpose as a markup language for creating web pages and its platform independence. It details basic HTML tags, their structure, attributes, and formatting options, along with examples of how to use them. Additionally, it covers different types of lists and their customization in HTML.

Uploaded by

varsha311005
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 55

WEB TECHNOLOGIES

UNIT I
INTRODUCTION TO HTML
INTRODUCTION:
HTML stands for Hypertext Markup Language. It is a Language used to createWeb Pages
or Hypertext document. A Markup Language is a set of instructions often called TAGS which
can be addedto text files. HTML is only a formatting language are not a programming language.
The idea behind hypertext is that instead of reading text in a right linear structure we can easily
jump from one point to another point.HTML is all about specifying the structure and format of
our webpage i.e, it is mainly used for describing the structure document.
HTML is platform independent i.e, for example if we can access internet, we can access
WORLD WIDE WEB (WWW) irrespective of client OS and OS of the webserver are accessing.
So, we can view one download HTML files on www throughbrowser.
Elements of a web document are labelled through the usage of HTML tags. It is the tags
that describe the document. Anything that is not a tag will bedisplayed in the document itself.
HTML does not describe any page layout i.e, for example, word for windows havedifferent styles
for headings, font size etc. But HTML doesn’t have all these. Based on the Platforms, appearance
of any element will change. The formatted text will appear differently on different machines /
Platforms. By separating the Structure of the document and appearance, a Program that reads and
Understands HTML can make formatting decision based on capabilities of individual Platform.
Web Browsers are best examples of HTML formatters.
Advantages of HTML:-
• A HTML document is small and hence easy to send over the net. It is smallbecause it
doesn’t include format information.
• HTML documents are cross platform compatible and device independent.We need a
HTML readable browser to view them.

Basic HTML tags:-


(1) <!doctype> :
This tag formally starts an HTML document and it also indicates theversion of HTML
used.

RGMCET CSE DEPT 2


WEB TECHNOLOGIES

<!doctype HTML PUBLIC “//w3c//DTDHTML Q.o//EN”>


(2) <HTML>:
Every HTML document starts with a <html> tag and it is always the firsttag in a html
page and indicates that the document is a HTML document.The end tag <html> is
</html>.
Example:
<html>……..</html>
(3) <head>:
It contains the head of an html document, which holds about the document such as title.
Each property defined html page should have a head which we create with <head> tag.
It has header information and it isdisplayed at the top of the browser. Each tag for
<head> is </head>.
<head>…….</head>
(4) <title>:
It contains the title of the html document which includes the content thatwill actually
appear in the web browser. The entire content of the web page is placed in the pages
<body> tag. The end tag <body> is </body>
<title>…….</title>
(5) <body>:
It contains the body of the HTML Document , which includes the contentthat will
actuall appear in the web browser. The entire content of the webpage will be placed in
the pages <body> tag. The end tag of the
<body> tag will be </body>.
<body>………</body>
STRUCTURE OF THE HTML PROGRAM:-
The HTML Program is generally divided into two sections i.e head and body. Weuse
<head> and <body> tags to indicate these two sections. <head> section holds the header
information of a webpage document indicated by a title that is provided by using <title> tag in
the <head>. The title helps us to referto the webpage. <body> section contains the content which

RGMCET CSE DEPT 3


WEB TECHNOLOGIES

we want to display which the webpage.Anything that is not a tag will be displayed within the
webpage.
Example:
<html>
<head>
<title>First Webpage</title>

</head>
<body>
This is my first page
</body>
</html>
Output:

Attribute:
An Attribute is a Keyword we use in an opening tag to give more information tothe web
browser. HTML tags tell the web browsers how to format and organizeour webpages. But we
can customize tags using attributes. The Format of an attribute is:
<tagname Attribute=value>
Attributes of the <body> tag:
(1) Background:

RGMCET CSE DEPT 4


WEB TECHNOLOGIES

The URL or a graphic file to be used in the filling the browser’sBackground.


(2) Bgcolor:
The color of the browser’s background.
(3) Bgproperties:
It Indicates if the background should scroll when text does. If we set it to“FIXED”,
the background will not scroll when the text does.
(4) Bottommargin:
Specifies the bottom margin ,the empty space at the bottom of the documentin pixels.

(5) Id:
It is a unique alphanumeric identifier for the tag which we can use to refer toit.
(6) Language:
Scripting language used for the tag.
(7) Leftmargin:
Specifies the left margin, the empty space at the left of the document.
(8) Marginheight:
Gives the height of the margin at the top and bottom of the page in pixels.
(9) MarginWidth:
Gives the width of the left and right margins of the page in pixels.
(10) Rightmargin:
It specifies the right margin, the empty space to the right margin of thedocument in pixels.
(11) Scroll:
It specifies whether a vertical scrollbar appears to the right of the documentcan be yes
(or) no.
(12) Style:
Inline style indicating how to render the element.

(13) Text:
Color of the in the document.

RGMCET CSE DEPT 5


WEB TECHNOLOGIES

(14) Topmargin:
It specifies the top margin the space at the top of the document in pixels.
(15) Link:
It specifies the color of hyperlinks that have not yet been visited.
(16) Alink:
It specifies the color of hyperlinks as they are being clicked.
(17) Vlink:
It specifies the color of hyperlinks as they have been visited.
(18)<!-- --> Comment tag:
Annotates a web page with a comment. In the HTML that we can by lookingat the HTML
but it will not be displayed in the web browser.
<! ------ This is a comment --------- >
Formatting with HTML tags:
To set the actual style of text as displayed in a web page we can text style tags. There are a
number of ways to apply styles to text.
(1) <b>:
It creates a bold text i.e, sets the text style to bold.
Attributes:
a. Id:
It is a unique alphanumeric identifier for the tag which we can use to refer toit.
b. Style:
The Inline style indicating how to render the element.
Example:
<html>
<head>
<title>Using Bold Tag </title>
</head>
<body bgcolor=”pink”>
Here is some text displayed as <b> Bold Text </b>

RGMCET CSE DEPT 6


WEB TECHNOLOGIES

</body>
</html>
Output:

(2) <I>:
It displays text in Italics.(3)
<U>:
It displays text in Underlined text. (4)
<P>:
It displays the Paragraph text.
Example:
<html>
<head>
<title> Using Styles </title>
</head>
<body bgcolor=”pink”>
<p> This is a paragraph <br>
Here is some text that is <i> Displayed in Italics </i>
<br>Here is some <u> Underlined text </u>
</body>
</html>

RGMCET CSE DEPT 7


WEB TECHNOLOGIES

Output:

(5) <s> and <strike>:


It Displays text in smile through style. The <s> and <style> tags are used forthe same
effect. HTML 2 used <strike> , HTML 3 called it <s>, HTML 3.2 caused it <strike> again.
(6) <big>:
Renders text in a bigger font than the current default.
(7) <small>:
Renders text in a smaller font than the current default.
Example:
<html>
<head>
<title> Using Big and small tags </title>
</head>
<body>
Here is some text that is <big> Bigger than the normal </big> <br>and here is
some text that is <small> smaller than normal </small>
</body>
</html>

RGMCET CSE DEPT 8


WEB TECHNOLOGIES

Output:

(8) <sub>: It Styles the text as a subscript.


(9) <sup>: It Styles the text as a superscript.
(10)<strong>: Emphasizes text strongly, usually rendered in bold.
Example:
<html>
<head>
<title>Using Styles </title>
</head>
<body bgcolor=”pink”>
H <sub> 2 </sub> SO <sub> 4 </sub> H
<sub> 2 </sub> O
<br>
<b>Here is some text that appears as a <sup> Super </sup> Script <br>Here is some
<strong> strong </strong> text.
</body>
</html>
Output:

RGMCET CSE DEPT 9


WEB TECHNOLOGIES

(11)Headings:
<h1>,<h2>,<h3>,<h4>,<h5> & <h6>
The heading element tags are <h1>,<h2>,<h3>,<h4>,<h5><h6>. These elements create
the headings in our web pages by displaying bold text in avariety of sizes <h1> being
larger <h6> being smaller.
Example:
<html>
<head>
<title> Heading tags </title>
</head>
<body bgcolor=”pink”>
<center>
<h1> Using Heading Tags</h1><br>
<h1> RGMCET </h1><br>
<h2> RGMCET </h2><br>
<h3> RGMCET </h3><br>
<h4> RGMCET </h4><br>
<h5> RGMCET </h5><br>

RGMCET CSE DEPT 10


WEB TECHNOLOGIES

<h6> RGMCET </h6><br>


</center>
</body>
</html>
Output

(12)<font>:
This tag will give us an option to select text size, color and face.
Attributes:
a. color: Color of the text.
b. Size: Size of the text in points
c. Face: The font face can be a list of names separated by commas.
d. Id: Unique alphanumeric identifier for a tag, which we can use to refer to it.
Example:

RGMCET CSE DEPT 11


WEB TECHNOLOGIES

<html>
<head>
<title> Using Font Styles </title>
</head>
<body bgcolor=”pink”>
<center>
<font size=”1” color=”red”> The Font Size is 1 </font> <br>
<font size=”10” color=”yellow”> The Font Size is 10 </font> <br>
<font size=”20” color=”orange”> The Font Size is 20</font> <br>
<font size=”30” color=”aqua”> The Font Size is 30 </font> <br>
</center>
</body>
</html>
Output

(13)<marquee> tag:
Displays scrolling text in a marquee style.
Attributes:
a. Align:
Sets the alignment of the text relative to marquee.Set to:

RGMCET CSE DEPT 12


WEB TECHNOLOGIES

Top(default), middle (or) bottom.


b. behavior:
Sets how the text in the marquee should move can be scroll (default), slide(text enters
from one side and stops at the other side), alternate (text seemsto bounce from one side
to the other).
c. bgcolor:
It sets the background color for the marquee box.
d. Direction:
Sets the direction the text should scroll can be left, right, down or up.
e. Height:
It specifies the height of the marquee.
f. Loop:
Sets how many times we want the marquee to cycle. Is set to positive integeror -1 for
continuous cycling.
g. Scrolldelay:
Sets the number of the milliseconds between each successive display text.
Example:
<html>
<head>
<title> Marquee tag </title>
</head>
<body bgcolor=”pink”>
<marquee align=”top” loop=”infinite” behavior=”scroll” bgcolor=”red”
direction=”right”> <h3> The Text Scrolls </h3></marquee>
<marquee align=”middle” loop=”infinite” behavior=”slide” bgcolor=”blue”
direction=”left”> <h3> The Text Scrolls </h3></marquee>
</body>
</html>
Output

RGMCET CSE DEPT 13


WEB TECHNOLOGIES

(14) <pre> tag(preformatted text):


<pre> marks the text as preformatted text i.e, all the spaces and carriage returns as
rendered exactly as you type them.
Example:
<html>
<head>
<title> Pre Tag </title>
</head>
<body bgcolor=”pink”>
<center>
<h4> Example of preformatted text </h4> <br> <br>
<pre>

SNo Name Designation


1. aaaa Manager
2. bbbb Project Lead
3. cccc Team Lead
4. dddd S/w Engineer
</pre>

RGMCET CSE DEPT 14


WEB TECHNOLOGIES

</center>
</body>
</html>
Output:

Lists:
Lists lets us display information in a compact, right format. There are three kindsof lists:
1. Unordered List
2. Ordered List
3. Definition List
Unordered List:
An Unordered list is a list of items that are marked with burden. The Unordered list is
created by using <ul>tag are the list items in the list are createdby </ul> tag and the list items in
the list are created by <li> tag.
<ul>
<li>List Item 1 </li>
<li>List Item 2 </li>
</ul>
Example:
<html>

RGMCET CSE DEPT 15


WEB TECHNOLOGIES

<head>
<title> Creating Unorder List </title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”> Creating Unorder List</h1>
<h1 align=”center”>List of Colleges in Kurnool</h1>
<ul>
<li>GPREC</li>
<li>RGMCET</li>
<li>GPCET</li>
</ul>
</body>
</html>
Output

Creating Customized Unordered Lists:


We customized unordered lists by setting the “Type” attribute to three different values. DISC
(default), SQUARE and CIRCLE which sets the type of bullet thatappears before the list item.

RGMCET CSE DEPT 16


WEB TECHNOLOGIES

Example:
<html>
<head>
<title> Creating Unorder List </title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”> Creating Unorder List</h1>
<h1 align=”center”>List of Colleges in Kurnool</h1>
<ul type=”square”>
<li>GPREC</li>
<li>RGMCET</li>
<li>GPCET</li>
</ul>
</body>
</html>
Output

Ordered List:
While the unordered lists display simple bullet before each list item. Ordered lists use a number
system / lettering scheme to indicate that the items are ordered in some ways, ordered lists are

RGMCET CSE DEPT 17


WEB TECHNOLOGIES

created by <ol> tag and the list items are created using
<li> tag.
Example:
<html>
<head>
<title> Creating Order List </title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”> Creating Order List</h1>
<h1 align=”center”>List of branches in RGMCET</h1>
<ol>
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
<li>EEE</li>
<li>CIVIL</li>
<li>ME</li>
</ol>
</body>
</html>
Output

RGMCET CSE DEPT 18


WEB TECHNOLOGIES

Creating Customized Ordered Lists:-


We can customize the numbering system used in ordered lists by using the TYPEattribute, which
we can set to these values:
1. Default numbering system (1, 2, 3, ….)
A. Uppercase Letters (A, B, C, …..)
a. Lowercase Letters (a, b, c, …)
I. Large Roman Numerals (I, II , III, ….)
i. Small Roman Numerals (i, ii, iii, …..)
Example:
<html>
<head>
<title> Creating Order List </title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”> Creating Order List</h1>
<h1 align=”center”>List of branches in RGMCET</h1>

RGMCET CSE DEPT 19


WEB TECHNOLOGIES

<ol type=”A”>
<li>CSE</li>
<li>IT</li>
<li>ECE</li>
<li>EEE</li>
<li>CIVIL</li>
<li>ME</li>
</ol>
</body>
</html>
Output

Definition List:-
These lists include both definition terms as well as their definition. To create the definition lists
we use <dl> tag. For creating definition terms we use <dt> tag andfor data definitions we use
<dd> tag.
Example:
<html>
<head>
<title>Creating Definition List</title>

RGMCET CSE DEPT 20


WEB TECHNOLOGIES

</head>
<body bgcolo=”pink”>
<h1 align=”center”>Definition List</h1>
<dl>
<dt>CSE<dd>Computer Science & Engineering
<dt>ECE<dd>Electronics & Communication Engineering
<dt>IT<dd>Information Technology
<dt>EEE<dd>Electrical & Electronics Engineering
<dt>CE<dd>Civil Engineering
</dl>
</body>
</html>
Output

Nesting Lists:-

RGMCET CSE DEPT 21


WEB TECHNOLOGIES

We have the capability of nesting lists inside other lists.


Example:
<html>
<head>
<title>Nested Lists</title>
</head>
<body bgcolor=”pink”>
<h1 align=”center”>List of Colleges in Kurnool</h1>
<ol>
<li>Kurnool</li>
<ul>
<li>GPREC</li>
<li>BITS</li>
<li>GPCET</li>
</ul>
<li>Nandyala</li>
<ul>
<li>RGMCET</li>
<li>SREC</li>
</ul>
</ol>
</body>
</html>
Output

RGMCET CSE DEPT 22


WEB TECHNOLOGIES

Creating Hyperlinks:
What makes the web so effective is the ability to define links from one page to another. In web
terms, a “hyperlinks” is a reference on the web. Hyperlinks can point to any resources on the
web. An anchor is a term used to define a hyperlinkdestination inside a document. Format of
anchor tag is:
<a href=”address”> Line Text </a>
The <a> anchor tag has the following attributes.
1. href: It holds the target URL of the hyperlink.
2. Id: A unique alphanumeric identifier for the tag, which we can use to refer toit.
3. name: It specifies an anchor name, the name we want to use when referringto enclose
items.
4. Target: This attribute defines where the linked document will be opened.
Example:
<html>
<head>
<title>Creating Hyper Links</title>

RGMCET CSE DEPT 23


WEB TECHNOLOGIES

</head>
<body bgcolor="pink">
<center><h1>This is page 1</h1>
<a href=”page2.html”>Click here</a>to goto page2
</center>
</body>
</html>
Output

RGMCET CSE DEPT 24


WEB TECHNOLOGIES

Setting hyperlink colors:


The default color of hyperlinks in a page is blue. Hyperlink that we have already visited are
displayed in violet and when we click a hyperlink,it turns red when themouse button is down.We
can set these colos in <body> tag attributes link,vlink(visited link),alink(active link).
Example
<html>
<head>
<title>Setting Hyperlink colors</title>
</head>
<body bgcolor="pink" link=”green” vlink=”blue” alink=”red”>
<center><h1>Setting Hyperlink colors</h1>
<a href=”login.html”>Click here</a>to goto login page
</body>
</html>
Output

RGMCET CSE DEPT 25


WEB TECHNOLOGIES

Providing navigation with in the page:


<html>
<head>
<title>Nested Lists</title>
</head>
<body bgcolor="pink">
<center><h1>Linking to a section in a page</h1>
<a name=”top”>This is the top of the page</a>
Click here to goto the <a target=”#bottom”>bottom</a>of the page
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br>
<a name=”bottom”>This is the bottom of the page</a> Click here to
goto <a target=”#top”>top</a>of the page
</center>
</body>
</html>
Output

RGMCET CSE DEPT 26


WEB TECHNOLOGIES

Creating HML tables:


A HTML table arranges data/information in terms of rows and columns.Tables are defined in
HTML using <table> tag.A table is divided into rows and each row each divided into data
cells(columns).The rows of table are created using <tr> tag and data cells are created by <td> tag.
<tr> - Table row
<td> - Table data
Format
<table>
<tr>
<td>row1,col1</td>
<td>row1,col2</td>
</tr>
<tr>
<td>row2,col1</td>
<td>row2,col2</td>
</tr>
</table>
• Heading in a table are defined with <th> tag
Format
<table>
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>
Attributes of <table> tag:

RGMCET CSE DEPT 27


WEB TECHNOLOGIES

• align : specifies the horizontal alignment of the table in the browserwindow,set


to ”left,center,right”.
• background : specifies the URL of a background image to be used asbackground
for the table.
• bgcolor : sets the background color of the table cells.
• border : sets the border width.
• bordercolor : sets the external border color of the entire table.
• cellpadding : sets the spacing between cell walls and content.
• cellspacing : sets the spacing between table cells.
• height : sets the height of the whole table.
• width : sets the width of the table.
Attributes of <tr> tag:
• align : specifies the horizontal alignment content in the table cells set to
“left,center,right”.
• bgcolor : sets the background color of the table cells.
• bordercolor : sets the external border color of the entire table.
• Valign : sets the vertical alignment of data,set to top,middle,bottom.
Alignment of <td> tag
• align : specifies the horizontal alignment content in the table cells set to
“left,center,right”.
• bgcolor : sets the background color of the table cells.
• bordercolor : sets the external border color of the entire table.
• colspan : indicates the how many cell columns of the table this cell shouldspan.
• rowspan : indicates the how many cell rows of the table this cell shouldspan.
Example
<html>
<head>

RGMCET CSE DEPT 28


WEB TECHNOLOGIES

<title>Creating Tables</title>
</head>
<body bgcolor="pink">
<center><h1>Creating tables</h1>
<table border=”1” cellpadding=”3” cellspacing=”3”>
<tr>
<th colspa=”2”>Websites</th>
</tr>
<tr>
<td>Mail sites</td>
<td>Job sites</td>
</tr>
<tr>
<td>Gmail.com</td>
<td>Frushersworld.com</td>
</tr>
<tr>
<td>Yahoo.com</td>
<td>Nauted.com</td>
</tr>
</center>
</table> </body></html>

RGMCET CSE DEPT 29


WEB TECHNOLOGIES

Output

Advanced Table elements :


• <caption> : the element is an ptional element and it used to provide a string which
describes,the contern of the table ,it must follow the table element.
• <thead> : The rows in a table can bc groudated one are more time we cancreate a table
by using this <thead>.
• <tbody> : creates a table body when grouping rows.
• <tfoot> : Creates a table foot when groupin rows
Example:
<html>
<head>
<title>Advance Table Elements</title>
</head>
<body bgcolor="pink">
<h1 align="center">Contents of Web Technologies</h1>
<center>
<table border="2">

RGMCET CSE DEPT 30


WEB TECHNOLOGIES

<caption>Subject Description</caption>
<thead>
<tr> <td colspan="2">Advance Java Programming</td>
</thead>
<tbody>
<tr> <td>Units</td>
<td>Contents</td>
</tr>
<tr> <td>I</td>
<td>HTML & CSS</td>
</tr>
<tr> <td>II</td>
<td>JavaScript</td>
</tr>
<tr> <td>III</td>
<td>XML</td>
</tr>
</tbody>
<tfoot align="center">
<tr>
<td colspan="2">The table foot</td>
</tr>
</tfoot>
</table>
</center>
</body>
</html>
Output

RGMCET CSE DEPT 31


WEB TECHNOLOGIES

Nesting of Tables:
<html>
<head>
<title>Nesting of Tables</title>
</head>
<body bgcolor="pink">
<center><h1>Nested tables</h1>
<table border="1" cellpadding="3" cellspacing="3">
<tr>
<td>
<table border="2">
<tr>
<th>Mail sites</th>
<th>Job sites</th>
</tr>

RGMCET CSE DEPT 32


WEB TECHNOLOGIES

<tr>
<td>Gmail.com</td>
<td>Frushersworld.com</td>
</tr>
<tr>
<td>Yahoo.com</td>
<td>Nauted.com</td>
</tr>
</table>
</td>
<td>
<table border="2">
<tr>
<th>Number</th>
<th>Words</th>
</tr>
<tr>
<th>1</th>
<th>One</th>
</tr>
<tr>
<th>2</th>
<th>Two</th>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>

RGMCET CSE DEPT 33


WEB TECHNOLOGIES

</html>
Output

Images in HMTL:
In HTML we have the capability of displaying images in a webpage.This imagesmust be in a
format that the web browser can handle , such as Graphics Interchange Format(GIF) , Joint
Photograph Expert Group(JPEG) , and for some browser Portable Network Graphics(PNG)
formats.
Displaying images in webpage is done by using <img> tag
Format
<img src=”URL of image source”>
Attributes of <img> tag:
• alt : this attribute is used to specify text to be displayed in place of image forbrowser that
cannot handle graphics.
• src : specifies the URL of the image to display.
• border : sets the border for the image.
• height : indicates the height of the image.
• width : indicates the width of the image.

RGMCET CSE DEPT 34


WEB TECHNOLOGIES

• hspace : sets the horizontal space around the image.


• vspace : sets the vertical space around the image.
Example
<html>
<head>
<title>Images</title>
</head>
<body bgcolor="pink">
<center>
<h1>Images Example</h1>
<h3>Here is an image</h3>
<img src="one.jpg" alt="here is an image" width="300" height="150">
</center>
</body>
</html>
Output

RGMCET CSE DEPT 35


WEB TECHNOLOGIES

Adding borders and spaces around image:


<html>
<head>
<title>Borders & Spaces</title>
</head>
<body bgcolor="pink">
<center>
<h1>Adding border & spacing image</h1>
<h3>Here is an image</h3>
<img src="one.jpg" alt="here is an image" width="100" height="100"
hspace="50" vspace="50" border="8">
<img src="two.png" alt="here is an image" width="100" height="100"
hspace="50" vspace="50" border="8">
<img src="three.png" alt="here is an image" width="100" height="100"
hspace="50" vspace="50" border="8">
</center>
</body>
</html>
Output:

RGMCET CSE DEPT 36


WEB TECHNOLOGIES

Creating HTML Forms:


Form is a collection of various HTML control files , buttons ,checkboxes , radio buttons ,text
fields et., and they use to send the data to the server. There are severalform elements.
• Button : <input type=”button”> :- are the standard clickable buttons.
• Checkbox : <input type=”checkbox”> :- displayed usually as a small boxwith a check
mark in it. The use can toggle the checkbox on or off by checking the checkbox
• Customizable Buttons : <button> :- display images one other HMTL insideitself.
• File uploading controls : <input type=”file”> :- allow the user to upload filesto the server.
• Hidden controls : store data that is not visible to users unless they view theweb page
source code.
• Image controls : <input type=”image”> :- are like submit buttons except that they are
images the user can click.
• Password controls : <input type=”password”> :- are like text fields , buteach typed
character displaying by an asterisk or instead any character.

RGMCET CSE DEPT 37


WEB TECHNOLOGIES

• Radio buttons : <input type=”radio”> :- displaying usually as a circle whichwhen selected


displayed a dot in the middle. These controls are much like checkboxes except that they
work int mutually exclusive at a time.
• Reset button : <input type=”reset”> : - allow the user to clear all the data they has
entered.When the user click reset button all controls in the form are removed to that
original state displaying the data they had when they first appeared.
• Selection : Works much like drop down list boxes also called select controlsFormat is:
<select>
<option>Item1</option>
<option>Item1</option>
<option>Item1</option>
</select>
• Submit button : when we click the button all the data in the form will be sentto web server
for processing.
• Text area : are two dimensional text fields allowing user to enter more thanone line of
text.
Format is: <textarea>
• Text fields : allow the user to enter one line of text also called a textboxFormat is :
<input type=”text”>
In order to create form we use <form> tagFormat
is :
<form>
|
|
</form>
Attributes of <form> tag:
• name : gives the name of the form so that we can return it in code . Set to analphanumeric
string.
• target : indicates a named frame for browser to display the form results.

RGMCET CSE DEPT 38


WEB TECHNOLOGIES

• method : indicates a method or protocol for sending data to the target actionURL.
• action : gives the URL that that will handle the form data.
Example
Registration.html
<html>
<head>
<title>HTML Form</title>
</head>
<body bgcolor="pink">
<center>
<form name="form1">
<table border="0" cellpadding="4" cellspacing="4">
<caption>Registration form</caption>
<tr>
<th>Name</th>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password"/></td>
</tr>
<tr>
<th>Enter your address</th>
<td><textarea rows="5" cols="10"></textarea></td>
</tr>
<tr>
<th>Enter your email</th>
<td><input type="email"/></td>
</tr>
<tr>

RGMCET CSE DEPT 39


WEB TECHNOLOGIES

<th>Enter your mobile</th>


<td><input type="number"/></td>
</tr>
<tr>
<th>Select your gender</th>
<td>
male<input type="radio" name="g" value="m"/>
female<input type="radio" name="g" value="f"/>
</td>
</tr>
<tr>
<th>Language prference</th>
<td>
English<input type="checkbox" value=" "/>
Telugu<input type="checkbox" value=" "/>
Hindi<input type="checkbox" value=" "/>
</td>
</tr>
<tr>
<th>Select your DOB</th>
<td><input type="date"/></td>
</tr>
<tr>
<td ><input type="submit" value="Register"/></td>
<td><input type="reset" value="Cancel"/></td>
</td>
</tr>
</table>
</form>
</body>

RGMCET CSE DEPT 40


WEB TECHNOLOGIES

</html>
Output

Working with Frames:


HMTL frames allow user to present documents in multiple views which may beindependent
windows or sub windows. To divide a webpage into multiple parts and load different pages in a
single web page we use the concept of frames. To dothis we use “<frameset>” tag which indicates
the browser that the webpage window has a frame. We can divide it into rows and columns by
using attributes such as ‘rows’ & ‘cols’. In order to provide definition or each frame we use
“<frame>” tag.
Format is :
<frameset rows=”30%,70%”>
<frame src=”source page URL” name=”frame name”>
<frame src=”source page URL” name=”frame name”>
</frameset>
• <frameset> element actually takes place of <body> tag.

RGMCET CSE DEPT 41


WEB TECHNOLOGIES

Attributes of <frameset> tag:


• border : used in the outermost <frameset> tag to set the border thickness forframes.
• bordercolor : set the color of the borders for all frames in the frameset.
• frameborder : set whether or not border for all frames in the frameset.Can be set
to ‘yes’ or ‘no’ or ‘1’ or ‘0’.
• framespacing : set the pixel spacing between frames. set to the positiveintegers.
• cols : set the number of columns in the frameset. Separate the values assigned to this
attribute with comma(,) each value represents width of acolumn. Can be set to pixel
values,percentages.
• Rows : set the number of rows in the frameset. Separate the values assigned to this attribute
with comma(,) each value represents width of a column. Can be set to pixel
values,percentages.
Attributes of <frame> tag:
• bordercolor : set the color used for the frmae border. This setting overridesthe color
specified in the surrounding <frameset> element.
• frameborder : sets whether or not border surround the frame. Can be set to‘yes’ or ‘no’
or ‘1’ or ‘0’.
• name : sets the name of the frame we can use named frames as target for <a>tag.
• scrolling : determines scrolling possible values are : auto,yes or no.
• src : specifies the URL of the frame document. If we don’t specify a URLthe frame
will appear blank.
Creating vertical frames:
In order to display vertical frame we have use of ‘cols’ attribute.
Example
<html>
<head>
<title>Vertical Frames</title>
</head>

RGMCET CSE DEPT 42


WEB TECHNOLOGIES

<frameset cols="30%,70%">
<frame src=frame1.html>
<frame src=frame2.html>
</frameset>
</html>
Frame1.html
<html>
<head>
<title>page1</title>
</head>
<body>
<h1>Web Technologies</h1>
</body>
</html>
Frame2.html
<html>
<head>
<title>page2</title>
</head>
<body>
<h1>Web Technologies</h1>
</body>
</html>

Output

RGMCET CSE DEPT 43


WEB TECHNOLOGIES

Creating horizontal frames:


In order to display horizontal frame we have use of ‘cols’ attribute.
Example
<html>
<head>
<title>Horizontal Frames</title>
</head>
<frameset cols="50%,50%">
<frame src=page1.html>

RGMCET CSE DEPT 44


WEB TECHNOLOGIES

<frame src=page2.html>
</frameset>
</html>
page1.html
<html>
<head>
<title>page1</title>
</head>
<body>
<h1 align=”center”>This is page1</h1>
</body>
</html>
page2.html
<html>
<head>
<title>page2</title>
</head>
<body>
<h1 align=”center”>This is page2</h1>
</body>
</html>
Output

RGMCET CSE DEPT 45


WEB TECHNOLOGIES

Creating horizontal & vertical frames :


<html>
<head>
<title>Horizontal Frames</title>
</head>
<frameset cols="30%,70%">
<frameset cols="25%,50%,25%">
<frame src=page1.html>
<frame src=page2.html>
<frame src=page3.html>
</frameset>
<frameset cols="25%,50%,25%">
<frame src=frame1.html>
<frame src=frame2.html>
<frame src=frame3.html>
</frameset>
</frameset> </html>

RGMCET CSE DEPT 46


WEB TECHNOLOGIES

Output

<noframes> tag:
When the browser does not support frameset use <noframes> element to indicateto users that
the browser doesnot support frames.The <noframes> element is ignored that handle frames.
Example
<html>
<head>
<title>Vertical Frames</title>
</head>
<frameset cols="30%,70%">
<noframes>Your browser does not support frames...</noframes>
<frame src=on.html>
<frame src=two.html>
</frameset>

RGMCET CSE DEPT 47


WEB TECHNOLOGIES

</html>
Output

Named frames:
One important aspect of working with frames is using named frames. When wegive frmae a
name , we can use as a target to load new page into the frame.
Example
<html>
<head>
<title>Vertical Frames</title>
</head>
<frameset cols="40%,60%">
<frame src=menu.html>
<frame src=default.html name="display">
</frameset>
</html>

RGMCET CSE DEPT 48


WEB TECHNOLOGIES

menu.html
<html>
<head>
<title>Menu</title>
</head>
<body bgcolor="green">
<center><b>Click on below link</b>
<br><a href="page1.html" target="display">Page1
<br><a href="page2.html" target="display">Page2
</center>
</body>
</html>
Defual.html
<html>
<head>
<title>Vertical Frames</title>
</head>
<frameset cols="40%,60%">
<frame src=menu.html>
<frame src=default.html name="display">
</frameset>
</html>
Output

RGMCET CSE DEPT 49


WEB TECHNOLOGIES

RGMCET CSE DEPT 50


WEB TECHNOLOGIES

Cascading Style Sheets:


Style sheets represent the World Wide Web consortium‟s effort to improve on the tag
andattribute based style of formatting. Style sheets provide a way of customizing whole pages
all at once and in much richer detail than the simple use of tags and attributes. The format of
style sheet will be:
<style type=”text/css”>
selector{property:value;property:value;}
selector{property:value;property:value;}
</style>
Every line in <style> tag is called as a „Rule‟ and a style rule has two parts:
a. Selector.
b. Set of declarations.
A selector is used to create a link between the rule and the HTML tag. The declaration has two parts
again:
a. Property.
b. Value.
A property specifies additional information and value specifies property value. For example:
<style type=”text/css”>
body {background-color: #d0e4fe;}
h1 {
color: orange;
text-align: center;
}
p{
font-family: "Times New Roman";
font-size: 20px;
}
</style>
If we add above code in the <head> element of web page , entire web page will be displayed in

RGMCET CSE DEPT 51


WEB TECHNOLOGIES

various styles given in style element.


Style sheets are implemented with cascading style sheets specification. Conventionally styles are
cascaded i.e., we don‟t have to use just a single set of styles inside a document, but we can import
as many styles as we like. There are three mechanisms by which we can apply styles to our HTML
documents:
1. Inline Style sheets.
2. Embedded Style sheets.
3. External Style sheets.
Inline Style Sheets:
Inline style sheets mix content with presentation. To use inline styles we use style
attribute in the relevant tag.
Example:
<html>
<head>
<title>HTML Tables</table>
</head>
<body bgcolor=‟pink‟>
<center>
<h1>Creating HTML Tables</h1><br>
<table border=”2” cellpadding=”4” cellspacing=”4”>
<tr>
<th colspan=”2” style=”background-color:red”> WebSites</th>
</tr>
<tr>
<th style=”background-color:blue”>MailSites</th>
<th style=”background-color:green”>JobSites</th>
</tr>
<tr>
<td style=”background-color:grey”>Gmail</td>
<td style=”background-color:aqua”>Naukri</td>

RGMCET CSE DEPT 52


WEB TECHNOLOGIES

</tr>
<tr>
<td style=”background-color:yellow”>Yahoo</td>
<td style=”background-color:purple”>JobStreet</td>
</tr>
</table>
</center>
</body>
</html>
Output:

Embedded Style sheets:


An embedded style sheet is used when a single document has a unique style. We
define internal styles in the head section of a HTML page by using „<style>‟ tag. The styles
defined using embedded style sheets are applied throughout the page and we put the
styles into oneplace.

RGMCET CSE DEPT 53


WEB TECHNOLOGIES

Example:
<html>
<head>
<title>Embedded Style sheets</title>
<style type=”text/css”>
body{background-color:
pink;}
h1 {
color:orang
e;
text-align:
center;
}
p{
font-family: "Times New
Roman";
font-size: 20px;
}
</style>
</head>
<body>
<h1>Embedded Style Sheets</h1><br>
<p>This is a paragraph
</body>
</html>
Output:

RGMCET CSE DEPT 54


WEB TECHNOLOGIES

External Style Sheets:


External style sheets are just that the style sheets are stored separately from our web
page.These are useful especially if we are setting the styles for an entire website. When we
change the styles in external style sheet we change the styles of all pages. We use „<link>‟
element to access the style sheet file defined into our web page. The format of <link> element
is:
<link rel=”stylesheet” type=”text/css” href=”extstylesheet.css”>
Example:
extern.css:
body {background-color: #d0e4fe;}
h1 {
color: orange; text-align: center;
}
p{
font-family: "Times New Roman"; font-size: 20px;
}
extern.html:
<html>
<head>
<title>External Style Sheets</title>

RGMCET CSE DEPT 55


WEB TECHNOLOGIES

<link rel=”stylesheet” type=”text/css” href=”extern.css”>


</head>
<body>
<h1>External Style Sheets</h1><br>
<p>This is a paragraph
</body>
</html>
Output:

RGMCET CSE DEPT 56

You might also like