Scribd
Upload
6 views

html notes

The document provides an overview of HTML, explaining its purpose as a markup language for creating web pages and detailing its structure, including essential tags like <html>, <head>, <title>, and <body>. It also discusses the advantages of HTML, such as its small size and cross-platform compatibility, and introduces various formatting tags and attributes for customizing text presentation. Additionally, the document covers list types, including unordered and ordered lists, with examples of their implementation.

Uploaded by

anandmkattimani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

html notes

The document provides an overview of HTML, explaining its purpose as a markup language for creating web pages and detailing its structure, including essential tags like <html>, <head>, <title>, and <body>. It also discusses the advantages of HTML, such as its small size and cross-platform compatibility, and introduces various formatting tags and attributes for customizing text presentation. Additionally, the document covers list types, including unordered and ordered lists, with examples of their implementation.

Uploaded by

anandmkattimani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 39

WEB TECHNOLOGIES

HTML stands for Hypertext Markup Language. It is a Language used to create Web Pages or
Hypertext document. A Markup Language is a set of instructions often called TAGS which can be
added to text files. HTML is only a formatting language is 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 through browser.
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 be displayed in the document itself. HTML does not
describe any page layout i.e, for example, word for windows have different 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 small because it doesn’t
include format information.
• HTML documents are cross platform compatible and device independent. We need a HTML
readable browser to view them.

• A HTML document is small and hence easy to send over the net. It is small because it
doesn’t include format information.
• HTML documents are cross platform compatible and device independent .We need a HTML
readable browser to view them.

RGMCET CSE DEPT 1


WEB TECHNOLOGIES

Basic HTML tags:-


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

<!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>

RGMCET CSE DEPT 2


WEB TECHNOLOGIES

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

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>

RGMCET CSE DEPT 3


WEB TECHNOLOGIES

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

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

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

RGMCET CSE DEPT 5


WEB TECHNOLOGIES

(11) Topmargin:
It specifies the top margin the space at the top of the document in pixels.
(12) Link:
It specifies the color of hyperlinks that have not yet been visited.
(13) Alink:
It specifies the color of hyperlinks as they are being clicked.
(14) Vlink:
It specifies the color of hyperlinks as they have been visited.
(15) <!--------> 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 carriagereturns as rendered
exactly as you type them.
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 14


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 15


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 16


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 17


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 18


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 19


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

RGMCET CSE DEPT 20


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 21


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 22


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 23


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:
• align : specifies the horizontal alignment of the table in the browserwindow,set to

RGMCET CSE DEPT 24


WEB TECHNOLOGIES

”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.

Images in HMTL:

RGMCET CSE DEPT 25


WEB TECHNOLOGIES

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 somebrowser 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 26


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 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 stringwhich


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

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 thatthey 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 32


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 areremoved 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 33


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 34


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 35


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 36


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 37


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 38


WEB TECHNOLOGIES

RGMCET CSE DEPT 39

You might also like