HTML CODES
Web Designing using HTML
Lists in HTML
Lists in HTML are used to display list of information. There are three types of lists,
Unordered List , Ordered List , Definition List
Unordered List (Bulleted list)
Unordered list displaying bulleted or other graphic in front of each item in the list.
The <UL> and </UL> tag is used to create an unordered list. The <LI> and </LI> tag
is used to list each item in an unordered list.
The list item will be marked with bullets (small black circle)
eg:-
<UL>
<LI> Tea </LI>
<LI> Coffee </LI>
<LI> Milk </LI>
</UL>
Attributes:
Type – used to customize unordered list .
its values are Disc, square, circle
(default – Disc)
eg:-
< UL Type=“square” >
<LI> Tea </LI>
<LI> Coffee </LI>
<LI> Milk </LI>
</UL>
Ordered List (numbered List): An ordered list marks item by numbers or alphabets.
It is created using the <OL> and </OL> tag. It is also called numbered list.
eg:-
<OL>
<LI> Registers</LI>
<LI> Cache</LI>
<LI> RAM</LI>
<LI> Hard Disk</LI> </OL>
Attributes:Type – used to customize ordered list .
its values are 1, A, a, I ,I
1 – default (1,2,3..........).....A- Uppercase letters (A, B, C........)
a- Lowercase letters (a, b, c......)....I- Large roman numerals (I, III, III....)
i- Small roman numerals(i, ii, iii......)
Start – to set the starting value of the item( it
eg:-
should be an integer)
<OL Type =“I” Start=“5” >
( list will start at Roman V )
eg:- <OL Type=“I” Start=“5”>
<LI> Registers</LI>
<LI> Cache</LI>
<LI> RAM</LI>
<LI> Hard Disk</LI>
</OL>
Definition List
A definition list is a list of terms and the corresponding definitions.
The tag pair <DL> and </DL> enclose the definition list. Each term in the list is
created using the <DT> and </DT> .The <DD> and </DD> tags supplies the
definition of the term.
eg:-
<DL>
<DT> Coffee</DT>
<DD> Black hot drink </DD>
<DT> Milk</DT>
<DD> White cold drink </DD>
</DL>
Nested List
Lists can be nested (list inside list).
This is possible in many ways.
An unordered list into another unordered list..An unordered list inside an ordered list.
An ordered list inside an unordered list...An ordered list into another ordered list.<UL>
<LI> Input Devices </LI>
<LI>
<OL>
<LI> Keyboard </LI>
<LI> Mouse </LI>
</OL>
</LI>
<LI> Out Put Devices </LI>
<LI>
<OL>
<LI> Printers </LI>
<LI> Monitors </LI>
</OL>
</LI>
</UL>
Links In HTML (Hyperlink)
Linking is an important feature of HTML.
A hyperlink is a text or an image , you can click on it and jump to another document or
another section of the same document.
Hyperlink allows visitors to navigate between websites.
In html <A > and </A> used to create hyperlinks.
This tag is called anchor tag ,they are container tag.
The content between <A> and </A> is called link text. User can view and click on that
part to reach linked document.
Link Text :
it a visible part . It can be text or image.
Attributes :
Href (Hyper Reference) – it is the main
tag.
its value is URL of the document.
eg:-
<A Href=“http://www.w3schools.com/html”>
HTML Tutorials</A>
Links in HTML are of two types
Internal Link , External Link
Internal Link :
attribute of
anchorit is used to refer a section of same document. You can create a link to a
particular section of a given web page by using name attribute . (Name = “ ”)
This is two step process:First create a link to the place where you want to reach
within the web page.
<A Name = “Introduction” > Introduction </A>
<A Name = “Air” > Air Pollution </A>
Second step is to create a hyperlink to link the document and place where you want to
reach using - # sign.
<A Href= “#Introduction” > Go to Introduction </A>
<A Href= “#Air” >
Go to Air Pollution </A>
External Linking :
An external link points to another document or web page.
URL :
Uniform resource locator (Web Address)
Two types of URL
Absolute URL (Full Path)
<A Href=“http://www.w3schools.com/html”>
HTML Tutorials</A>
Relative URL (Relative Path)
<A Href=“sample.html”> HTML Tutorials</A>
Graphical Hyperlinks
it can be created by placing an image inside the <A> tag using <IMG> tag.
eg:-
<A Href=“http://www.wikipedia.org” > <IMG Src=“sample.jpg”
Width=“100px” Height=“50px” Border=“2px”> </A>
On Mouse over on the image the mouse pointer will change to the hand symbol.
This means the image is hyperlink.
E-mail linking ( mailto :)
we can create a e-mail hyperlink to web page using hyperlink protocol mailto :
eg:-
<A Href = mailto : “ shajithvk@gmail.com” > mail to
me </A>
If you click on the link text (mail to me ) you can send me a hotmail.
Inserting Music and Videos
<EMBED> - used to add music and videos into a web page. This tag automatically
provides multimedia controls to a web page.eg:-
<EMBED Src=“Kulukithakka.mp3” ></EMBED>
<NOEMBED>
If the browser does not support <EMBED> we can use this tag. The content
with in the tag pair will be displayed if the <EMBED> tag is not supported by the
browser.
eg:-
<NOEMBED Src=“sample.jpg” Alt=“sorry for
inconvenience” >
</NOEMBED>
Attributes:
Src – URL of the object (video & music)to be embedded.
Align—left , right, center
Autostart—true , false.
Loop—true, +ve number, false (infinite)
Playcount – specifying no of times (for IE browser )
Hidden- specifies if the multimedia object should be
shown on
the page (true, false)
Volume- control the volume of the sound(0 - of, 100 - full)
Width – to set the width of the media control in pixel
Height – to set the height of the media control in
pixel
<BGSOUND>
To play a sound track in the background of web page. This tag is supported by IE
browser only.
It downloads and plays an audio file when the host document is first downloaded by
the user and displayed.
The background sound also will replay when ever the user refresh the browser.
Attribute :
Src- used to embed URL of audio.
Loop- used to specifies no of times to be played .
its values (true, false, +ve number)
eg:- <BGSOUND Src=“song.mp3” Loop=“false”>
Tables in HTML
Tables are used to structure data in a web page . Table in HTML are
create using the <TABLE> and
</TABLE> tags.
Syntax :<TABLE>
<TR>
<TH> Heading-1 </TH>
<TH> Heading-2 </TH>
</TR>
<TR>
<TD> First Column </TD>
<TD> Second Column </TD>
</TR>
</TABLE>
eg:- <TABLE>
<TR>
<TH> Rollno </TH>
<TH> Name </TH>
</TR>
<TR>
<TD> 101 </TD>
<TD> Raju </TD>
</TR>
<TR>
<TD> 102 </TD>
<TD> Radha </TD>
</TR>
</TABLE>
<TABLE>-
It is a container tag. The whole content of
enclosed within the
the table should be
tag pair <TABLE></TABLE>.
Attribute:
Border – specify the thickness of the borderline
its values is non zero in pixels.
A border with value 0 denotes no border.
Bordercolor – to set the color to the table border.
Align – position of the table inside the browser window.
its values left(default), right, center
around the table.Bgcolor –to set the background color of the table.
Background – to set the background image for
table.
Cellspacing –to set the space between cells.
its values in pixels.
Cellpadding –to set the space between cell
border and content
(table data) .
Width & Height –to set table width and height.
Rules –to control what rules (borders between cells)
are displayed in the
table.
its values are :
none- no rules
cols- rules between columns only.
rows-rules between rows only.
group –rules between row groups and col
all –Rules will appear between all rows and
groups only.
columns.
Frames – to set how table borders are displayed.
its values are :
void – no borders
above –top border only
below – bottom border only
Hside – borders on horizontal sides (top, bottom)
LHS or RHS –border on left or right side.
Vsides –borders on vertical sides (right and left)
Box/Border –borders on all sides of the table.
(it is the default value).
<TABLE Border=“2” Frames=“above” Bgcolor=“red” >
<TR> - used to create rows in a table. Its container
tag. <TR></TR>
Attributes :
Align –to specify the horizontal alignment of the
content in a particular row.
its values left(default), right, center(default for <TH>).Valign –to specify the vertical alignment of the
content in a particular
cell. (top, middle, bottom)
Bgcolor –to specify background color of particular
row
<TR Bgcolor=“aqua” Align=“right” Valign=“middle” >
<TH>
Used to define heading of a column. It is a container tag <TH></TH>.The
heading cells are displayed in bold and in centered form. <TH>always come
inside the <TR>.
<TD>
It is similar to <TH>.Used to display data in cells. It is a container tag
<TD></TD>.<TD> always placed with in <TR> tag.
Attributes of <TH> and <TD> tags.
Align –horizontal alignment of content within a cell.
its values left(default-TD, right, center(default - TH)
Valign –vertical alignment of the content with in a cell.
its values top, middle, bottom
Bgcolor –to set background of a particular cell.
Colspan –used to merge two or more column to single
column. <TD
Colspan=“4” >
Rowspan –used to merge two or more rows into single
row .<TD
Rowspan=“3” >
<TABLE
Border="2"
Width="300"
Height="200">
<TR>
<TH Colspan="3">
No. of Registered Students
</TR>
<TR>
<TH Rowspan="2"> Year </TH>
<TD Align="center"> 2014 </TH>
<TD Align="center"> 75 </TH>
</TR>
<TR>
<TD Align="center"> 2015 </TD>
<TD Align="center"> 88 </TD>
</TR>
</TABLE>
</TH><CAPTION> –it allows to create a caption for a table. A caption is the text that
appears before or after the table.
eg:-
<TABLE>
<CAPTION> Student List</CAPTION>
<TR>
<TD> Rollno</TD>
</TR>
</TABLE>
Dividing the browser window
The browser window can be divided into two or more sections to accommodate
two or more web page .
Each individual section created by a frame set is called a frame.
It is used to include more than one web page inside a single browser window.
<FRAMESET>
It is a container tag for partitioning the browser window into different frame
sections.
<FRAMESET></FRAMESET>
Attributes :
Cols –to determine the no. of vertical frame in the frameset page and its dimensions.
its values in pixels or percentage (%).
Row –to determine the no of horizontal frames.
Border –to set the thickness of the border
Bordercolor –to specify the border color.
eg:-
<FRAMESET Cols=“30%, 500, * ” ></FRAMESET>
<FRAME> -it is an empty tag. Used to define frames inside the <FRAMESET>.
Attributes:
Src –used to specify URL of the document to be
loaded in the frame.
eg:- <FRAME Src=“sample.html” >
Scrolling –to set the scroll bar.
Its values yes, no/auto(default)
Noresize –to prevent users from resizing the border
dragging on it.
eg:- <FRAME Src=“sample.html” noresize>
of specific frame byMarginwidth and Marginheight – to set horizontal
and vertical margins.
Name –it gives a name to a frame. This particular
frame can be referenced
using this name.
eg:- <FRAME Src=“sample.html” Name=“FirstName” Noresize >
-----------------------------------------------------------------------------
<FRAMESET Rows=“100, 200,300”>
<FRAME Src=“sample1.html”>
<FRAME Src=“sample2.html”>
<FRAME Src=“sample3.html”>
</FRAMESET>
Targeting Frames
One of the most popular use of frames is to place navigation bars in one frames
and then load the main pages into separate frames.
By assigning name to a frame via the Name attribute, authors can refer to it as
the target of link defined by other elements.
The target attribute may be set for elements that create links.
Sample.html
<FRAMESET Row=“20%, 30%, 50% ” >
<FRAME Src=“main.html” Name=“leftFrame”>
<FRAME Src=“main.html” Name=“rightFrame”>
</FRAMESET>
main.html
<BODY>
<A Href=“http://www.google.com” Target=“rightframe” >
</A><BR>
<A Href=“http://www.facebook.com” Target=“leftframe”>
</A>
</BODY>
Nesting of frameset It the process of inserting frameset within another frameset.
eg:-
<FRAMESET Rows=“80,*” >
<FRAME Src=“sample1.html” >
<FRAMESET Cols=“200,*” >
<FRAME Src=“sample2.html”><FRAME Src=“sample3.html” >
</FRAMESET>
</FRAMESET>
<NOFRAME> - it specifies the content if the frames cannot be displayed by the web
browser.
<NOFRAME></NOFRAME>
eg:-
<NOFRAME>
<P> Your browser does not support frames</p></NOFRAME>
Forms in HTML
Forms are used to pass information from web page to web server. A form has two
elements, container and controls.
There are various form controls :
Text Field , Text Area , Drop Down menu , Radio Button
Check Box , Submit Button & Reset Buttons
<FORM>
It is a container tag for creating forms in html. A web browser can only
gather information through forms. We must provide some backend application to
handle the data collected(CGI, PHP, ASP, etc).
All of the input elements associated with a single form are processed by
the same form handler. A form handler is a program on the web server that
manages the data sent through the form. The form handler is specified as the
value for the action attribute of form tag.
<FORM Action=“login.php” Method =“get”> </FORM>
<FORM>
Forms in HTML are created by <FORM> </FORM>tag.
eg :-
<FORM Action =“login.php” Method=“post” >
Name : <INPUT Type=“text” Name=“username”/>
Password : <INPUT Type=“password” Name=“passwd”/>
<INPUT Type=“submit” Value=“Login” />
<INPUT Type=“reset” Value=“Cancel” />
</FORM>
Attributes of <FORM> tag :
Action –it specify the URL of the form handler which is ready to process the received
data.
Method –indicate the method used by the web server to receive the form. Its values
POST and GET(default)
eg:-<FORM Action=“login.php” Method=“get” >
</FORM>
Target :- it specify the target window or frame where the result of the script will be
displayed
its values :
_blank : opens the linked document in new tab.
_self : opens the linked doc in the same frameset.
_parent : opens the linked doc in the parent.
_top : opens the linked doc in the main browser window replacing any frame
present.
name : Open the linked document in the window with specified
name.
eg:-
<FORM Action=“login.php” Method=“get”
Target=“_blank” >
</FORM>
Form Controls
There are different types of form controls that we can use to collect data
using html form.
The form controls are :
Text Box , Password , Check Box , Radio Button
Select Box , Submit and Rest
<INPUT> - it is an empty tag used to create different
as textbox,
type of controls such
password, check box, etc.
<INPUT Type=“text” Name=“firstname” Size=“30”
Maxlength=“25” />
Attributes:
Type – This attribute determines the control type created by the <INPUT> tag.
its values are :
text – create text box.
password – same as text box. But here characters
by coded symbols
such as asterisk (*) etc.
checkbox – create a checkbox. When more than
required to be selected
are represented
[check/uncheck].
one option isradio- create a radio buttons. It is used to select a
group of values. User
single value from a
can select only one button.
reset-create a button that automatically reset
the form controls to their
initial value.
submit – create a button that automatically
submit form.
button – create slandered graphical button on
used to trigger a client
the form. It is
side script when the user clicks that
button (used for function call)
Name- used to give a name to input control. When
values are
the form is submitted the data
passed to the server along with the
corresponding name of the control.
Value- to set default (initial) value inside the control.
Size- to set the width of the text in terms of
characters. It is applicable only in
the text field and password.
Maxlength-it can limit no of characters that the user
field. It is applicable
can type into the
only in text and password.
eg:-
<INPUT Type=“text” Name=“firstname” Value=“YourName”
Size=“30” Maxlength=“25” />
<BODY>
<FORM Action="login.php" Mehtod="post" >
<p>Name : <INPUT Type="text" Name="firstname"
Size="30" Maxlength="25" /></p>
<p>Password : <INPUT Type="password" Name="paw"
Size="30" Maxlength="25" /></p>
<INPUT Type="submit" Value="Login" />
<INPUT Type="reset" Value="Cancel" />
</FORM>
</BODY>
<FORM Action="login.php" Method="post" >
<P>Name : <INPUT Type="text" Name="firstname" Size="30"
Maxlength="25"
/></P><P>Password : <INPUT Type="password" Name="passwd" Size="30"
Maxlength="25"
<P>Sex
/></p>
: <INPUT Type="radio" Name="gender" Value="M" /> Male<INPUT
Type="radio" Name="gender" Value="F" /> Female </P>
<P>Hobbies
:
<INPUT Type="checkbox" Name="hobby"
Value="Games" />
Playing Games<INPUT Type="checkbox"
Name="hobby"
Value="Watching TV" />
Watching TV
<INPUT Type="checkbox" Name="hobby"
Value="Swimming"
/>Swimming
</P>
<INPUT Type="submit" Value="Login" />
<INPUT Type="reset" Value="Cancel" />
</FORM>
<TEXTAREA>
it is a container tag used to create text area (multiple line of text)
Attributes:
Name – it is used to give name to control.
Rows- it specifies the no of rows in a text area.
Cols-it indicate the no of columns in a text area
(no of characters in a line).
eg:-
<FORM Action=“sample.php” Method=“post”>
<TEXTAREA Rows=“10” cols=“30” Name=“Address”> Enter Your
Address</TEXTAREA>
</FORM>
<SELECT>
It is also called drop down box, provides a list items in the form. In the
form drop down list , from where a user can select one or more options. Select
box is helpful when a number of option are to be displayed in a limited space.
The options in list are specified using <option> which will be contained
in<select> pair
Attributes:
Name - it gives a name to the control which sent to
recognized and to get value.
Size –this can be used to present a scrolling list box.
the server to beIts values will decide whether the select box
or list box . If the
should be a dropdown list
value is 1, we get drop down list or combo box.
Multiple – if set to multiple then allows a user to
select multiple
item from the menu.
<OPTION>
it is an empty tag placed inside the <SELECT></SELECT>tag pair. It list
out the option provided in the select box.
Attributes:
Selected – used to indicate default selection.
Value-value that will be used if an option in the selected box is selected.
<FORM Action="login.php" Method="post" >
<p>
Nationality :
<select Name="nationality" Size="1">
<option Value=“indian" Selected >Indian</option>
<option Value=“british" > British</option>
<option Value=“german" > German</option>
</select>
</p>
</form>
<FIELDSET>
It is used to group controls in a form. The <FIELDSET> tag draw a
box around the related elements.
<LEGEND>
it is a container tag used to define caption for the <FIELDSET>.
<FIELDSET>
<LEGEND> Nationality :
</LEGEND>
</FIELDSET>
<FORM Action="login.php" Method="post" >
<p>
<FIELDSET>
<LEGEND> Nationality :
</LEGEND>
<select Name="nationality" Size="1">
<option Value=“indian" Selected >Indian</option>
<option Value=“british" > British</option>
<option Value=“german" > German</option></select>
Nativity :
<INPUT Type="text" Name=“state" Size="30" Maxlength="25"/>
District :
<INPUT Type="text" Name=“district" Size="30" Maxlength="25"/>
</FIELDSET>
</p>
</form>
Q ) Post method and Get method
HTML 5
HTML 5 enables the developers to create website which are more faster, smarter and
secure, it was jointly developed by WHATWG (Web Hypertext Application
Technology Working Group) and W3C(World Wide Web Consortium).
New HTML5 Elements
The most interesting new elements are:
New semantic elements like <header>, <footer>, <article> and <section>.
New form control attributes like number, date, time, calendar and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.
Lists in HTML
Lists in HTML are used to display list of information. There are three types of lists,
Unordered List , Ordered List , Definition List
Unordered List (Bulleted list)
Unordered list displaying bulleted or other graphic in front of each item in the list.
The <UL> and </UL> tag is used to create an unordered list. The <LI> and </LI> tag
is used to list each item in an unordered list.
The list item will be marked with bullets (small black circle)
eg:-
<UL>
<LI> Tea </LI>
<LI> Coffee </LI>
<LI> Milk </LI>
</UL>
Attributes:
Type – used to customize unordered list .
its values are Disc, square, circle
(default – Disc)
eg:-
< UL Type=“square” >
<LI> Tea </LI>
<LI> Coffee </LI>
<LI> Milk </LI>
</UL>
Ordered List (numbered List): An ordered list marks item by numbers or alphabets.
It is created using the <OL> and </OL> tag. It is also called numbered list.
eg:-
<OL>
<LI> Registers</LI>
<LI> Cache</LI>
<LI> RAM</LI>
<LI> Hard Disk</LI> </OL>
Attributes:Type – used to customize ordered list .
its values are 1, A, a, I ,I
1 – default (1,2,3..........).....A- Uppercase letters (A, B, C........)
a- Lowercase letters (a, b, c......)....I- Large roman numerals (I, III, III....)
i- Small roman numerals(i, ii, iii......)
Start – to set the starting value of the item( it
eg:-
should be an integer)
<OL Type =“I” Start=“5” >
( list will start at Roman V )
eg:- <OL Type=“I” Start=“5”>
<LI> Registers</LI>
<LI> Cache</LI>
<LI> RAM</LI>
<LI> Hard Disk</LI>
</OL>
Definition List
A definition list is a list of terms and the corresponding definitions.
The tag pair <DL> and </DL> enclose the definition list. Each term in the list is
created using the <DT> and </DT> .The <DD> and </DD> tags supplies the
definition of the term.
eg:-
<DL>
<DT> Coffee</DT>
<DD> Black hot drink </DD>
<DT> Milk</DT>
<DD> White cold drink </DD>
</DL>
Nested List
Lists can be nested (list inside list).
This is possible in many ways.
An unordered list into another unordered list..An unordered list inside an ordered list.
An ordered list inside an unordered list...An ordered list into another ordered list.<UL>
<LI> Input Devices </LI>
<LI>
<OL>
<LI> Keyboard </LI>
<LI> Mouse </LI>
</OL>
</LI>
<LI> Out Put Devices </LI>
<LI>
<OL>
<LI> Printers </LI>
<LI> Monitors </LI>
</OL>
</LI>
</UL>
Links In HTML (Hyperlink)
Linking is an important feature of HTML.
A hyperlink is a text or an image , you can click on it and jump to another document or
another section of the same document.
Hyperlink allows visitors to navigate between websites.
In html <A > and </A> used to create hyperlinks.
This tag is called anchor tag ,they are container tag.
The content between <A> and </A> is called link text. User can view and click on that
part to reach linked document.
Link Text :
it a visible part . It can be text or image.
Attributes :
Href (Hyper Reference) – it is the main
tag.
its value is URL of the document.
eg:-
<A Href=“http://www.w3schools.com/html”>
HTML Tutorials</A>
Links in HTML are of two types
Internal Link , External Link
Internal Link :
attribute of
anchorit is used to refer a section of same document. You can create a link to a
particular section of a given web page by using name attribute . (Name = “ ”)
This is two step process:First create a link to the place where you want to reach
within the web page.
<A Name = “Introduction” > Introduction </A>
<A Name = “Air” > Air Pollution </A>
Second step is to create a hyperlink to link the document and place where you want to
reach using - # sign.
<A Href= “#Introduction” > Go to Introduction </A>
<A Href= “#Air” >
Go to Air Pollution </A>
External Linking :
An external link points to another document or web page.
URL :
Uniform resource locator (Web Address)
Two types of URL
Absolute URL (Full Path)
<A Href=“http://www.w3schools.com/html”>
HTML Tutorials</A>
Relative URL (Relative Path)
<A Href=“sample.html”> HTML Tutorials</A>
Graphical Hyperlinks
it can be created by placing an image inside the <A> tag using <IMG> tag.
eg:-
<A Href=“http://www.wikipedia.org” > <IMG Src=“sample.jpg”
Width=“100px” Height=“50px” Border=“2px”> </A>
On Mouse over on the image the mouse pointer will change to the hand symbol.
This means the image is hyperlink.
E-mail linking ( mailto :)
we can create a e-mail hyperlink to web page using hyperlink protocol mailto :
eg:-
<A Href = mailto : “ shajithvk@gmail.com” > mail to
me </A>
If you click on the link text (mail to me ) you can send me a hotmail.
Inserting Music and Videos
<EMBED> - used to add music and videos into a web page. This tag automatically
provides multimedia controls to a web page.eg:-
<EMBED Src=“Kulukithakka.mp3” ></EMBED>
<NOEMBED>
If the browser does not support <EMBED> we can use this tag. The content
with in the tag pair will be displayed if the <EMBED> tag is not supported by the
browser.
eg:-
<NOEMBED Src=“sample.jpg” Alt=“sorry for
inconvenience” >
</NOEMBED>
Attributes:
Src – URL of the object (video & music)to be embedded.
Align—left , right, center
Autostart—true , false.
Loop—true, +ve number, false (infinite)
Playcount – specifying no of times (for IE browser )
Hidden- specifies if the multimedia object should be
shown on
the page (true, false)
Volume- control the volume of the sound(0 - of, 100 - full)
Width – to set the width of the media control in pixel
Height – to set the height of the media control in
pixel
<BGSOUND>
To play a sound track in the background of web page. This tag is supported by IE
browser only.
It downloads and plays an audio file when the host document is first downloaded by
the user and displayed.
The background sound also will replay when ever the user refresh the browser.
Attribute :
Src- used to embed URL of audio.
Loop- used to specifies no of times to be played .
its values (true, false, +ve number)
eg:- <BGSOUND Src=“song.mp3” Loop=“false”>
Tables in HTML
Tables are used to structure data in a web page . Table in HTML are
create using the <TABLE> and
</TABLE> tags.
Syntax :<TABLE>
<TR>
<TH> Heading-1 </TH>
<TH> Heading-2 </TH>
</TR>
<TR>
<TD> First Column </TD>
<TD> Second Column </TD>
</TR>
</TABLE>
eg:- <TABLE>
<TR>
<TH> Rollno </TH>
<TH> Name </TH>
</TR>
<TR>
<TD> 101 </TD>
<TD> Raju </TD>
</TR>
<TR>
<TD> 102 </TD>
<TD> Radha </TD>
</TR>
</TABLE>
<TABLE>-
It is a container tag. The whole content of
enclosed within the
the table should be
tag pair <TABLE></TABLE>.
Attribute:
Border – specify the thickness of the borderline
its values is non zero in pixels.
A border with value 0 denotes no border.
Bordercolor – to set the color to the table border.
Align – position of the table inside the browser window.
its values left(default), right, center
around the table.Bgcolor –to set the background color of the table.
Background – to set the background image for
table.
Cellspacing –to set the space between cells.
its values in pixels.
Cellpadding –to set the space between cell
border and content
(table data) .
Width & Height –to set table width and height.
Rules –to control what rules (borders between cells)
are displayed in the
table.
its values are :
none- no rules
cols- rules between columns only.
rows-rules between rows only.
group –rules between row groups and col
all –Rules will appear between all rows and
groups only.
columns.
Frames – to set how table borders are displayed.
its values are :
void – no borders
above –top border only
below – bottom border only
Hside – borders on horizontal sides (top, bottom)
LHS or RHS –border on left or right side.
Vsides –borders on vertical sides (right and left)
Box/Border –borders on all sides of the table.
(it is the default value).
<TABLE Border=“2” Frames=“above” Bgcolor=“red” >
<TR> - used to create rows in a table. Its container
tag. <TR></TR>
Attributes :
Align –to specify the horizontal alignment of the
content in a particular row.
its values left(default), right, center(default for <TH>).Valign –to specify the vertical alignment of the
content in a particular
cell. (top, middle, bottom)
Bgcolor –to specify background color of particular
row
<TR Bgcolor=“aqua” Align=“right” Valign=“middle” >
<TH>
Used to define heading of a column. It is a container tag <TH></TH>.The
heading cells are displayed in bold and in centered form. <TH>always come
inside the <TR>.
<TD>
It is similar to <TH>.Used to display data in cells. It is a container tag
<TD></TD>.<TD> always placed with in <TR> tag.
Attributes of <TH> and <TD> tags.
Align –horizontal alignment of content within a cell.
its values left(default-TD, right, center(default - TH)
Valign –vertical alignment of the content with in a cell.
its values top, middle, bottom
Bgcolor –to set background of a particular cell.
Colspan –used to merge two or more column to single
column. <TD
Colspan=“4” >
Rowspan –used to merge two or more rows into single
row .<TD
Rowspan=“3” >
<TABLE
Border="2"
Width="300"
Height="200">
<TR>
<TH Colspan="3">
No. of Registered Students
</TR>
<TR>
<TH Rowspan="2"> Year </TH>
<TD Align="center"> 2014 </TH>
<TD Align="center"> 75 </TH>
</TR>
<TR>
<TD Align="center"> 2015 </TD>
<TD Align="center"> 88 </TD>
</TR>
</TABLE>
</TH><CAPTION> –it allows to create a caption for a table. A caption is the text that
appears before or after the table.
eg:-
<TABLE>
<CAPTION> Student List</CAPTION>
<TR>
<TD> Rollno</TD>
</TR>
</TABLE>
Dividing the browser window
The browser window can be divided into two or more sections to accommodate
two or more web page .
Each individual section created by a frame set is called a frame.
It is used to include more than one web page inside a single browser window.
<FRAMESET>
It is a container tag for partitioning the browser window into different frame
sections.
<FRAMESET></FRAMESET>
Attributes :
Cols –to determine the no. of vertical frame in the frameset page and its dimensions.
its values in pixels or percentage (%).
Row –to determine the no of horizontal frames.
Border –to set the thickness of the border
Bordercolor –to specify the border color.
eg:-
<FRAMESET Cols=“30%, 500, * ” ></FRAMESET>
<FRAME> -it is an empty tag. Used to define frames inside the <FRAMESET>.
Attributes:
Src –used to specify URL of the document to be
loaded in the frame.
eg:- <FRAME Src=“sample.html” >
Scrolling –to set the scroll bar.
Its values yes, no/auto(default)
Noresize –to prevent users from resizing the border
dragging on it.
eg:- <FRAME Src=“sample.html” noresize>
of specific frame byMarginwidth and Marginheight – to set horizontal
and vertical margins.
Name –it gives a name to a frame. This particular
frame can be referenced
using this name.
eg:- <FRAME Src=“sample.html” Name=“FirstName” Noresize >
-----------------------------------------------------------------------------
<FRAMESET Rows=“100, 200,300”>
<FRAME Src=“sample1.html”>
<FRAME Src=“sample2.html”>
<FRAME Src=“sample3.html”>
</FRAMESET>
Targeting Frames
One of the most popular use of frames is to place navigation bars in one frames
and then load the main pages into separate frames.
By assigning name to a frame via the Name attribute, authors can refer to it as
the target of link defined by other elements.
The target attribute may be set for elements that create links.
Sample.html
<FRAMESET Row=“20%, 30%, 50% ” >
<FRAME Src=“main.html” Name=“leftFrame”>
<FRAME Src=“main.html” Name=“rightFrame”>
</FRAMESET>
main.html
<BODY>
<A Href=“http://www.google.com” Target=“rightframe” >
</A><BR>
<A Href=“http://www.facebook.com” Target=“leftframe”>
</A>
</BODY>
Nesting of frameset It the process of inserting frameset within another frameset.
eg:-
<FRAMESET Rows=“80,*” >
<FRAME Src=“sample1.html” >
<FRAMESET Cols=“200,*” >
<FRAME Src=“sample2.html”><FRAME Src=“sample3.html” >
</FRAMESET>
</FRAMESET>
<NOFRAME> - it specifies the content if the frames cannot be displayed by the web
browser.
<NOFRAME></NOFRAME>
eg:-
<NOFRAME>
<P> Your browser does not support frames</p></NOFRAME>
Forms in HTML
Forms are used to pass information from web page to web server. A form has two
elements, container and controls.
There are various form controls :
Text Field , Text Area , Drop Down menu , Radio Button
Check Box , Submit Button & Reset Buttons
<FORM>
It is a container tag for creating forms in html. A web browser can only
gather information through forms. We must provide some backend application to
handle the data collected(CGI, PHP, ASP, etc).
All of the input elements associated with a single form are processed by
the same form handler. A form handler is a program on the web server that
manages the data sent through the form. The form handler is specified as the
value for the action attribute of form tag.
<FORM Action=“login.php” Method =“get”> </FORM>
<FORM>
Forms in HTML are created by <FORM> </FORM>tag.
eg :-
<FORM Action =“login.php” Method=“post” >
Name : <INPUT Type=“text” Name=“username”/>
Password : <INPUT Type=“password” Name=“passwd”/>
<INPUT Type=“submit” Value=“Login” />
<INPUT Type=“reset” Value=“Cancel” />
</FORM>
Attributes of <FORM> tag :
Action –it specify the URL of the form handler which is ready to process the received
data.
Method –indicate the method used by the web server to receive the form. Its values
POST and GET(default)
eg:-<FORM Action=“login.php” Method=“get” >
</FORM>
Target :- it specify the target window or frame where the result of the script will be
displayed
its values :
_blank : opens the linked document in new tab.
_self : opens the linked doc in the same frameset.
_parent : opens the linked doc in the parent.
_top : opens the linked doc in the main browser window replacing any frame
present.
name : Open the linked document in the window with specified
name.
eg:-
<FORM Action=“login.php” Method=“get”
Target=“_blank” >
</FORM>
Form Controls
There are different types of form controls that we can use to collect data
using html form.
The form controls are :
Text Box , Password , Check Box , Radio Button
Select Box , Submit and Rest
<INPUT> - it is an empty tag used to create different
as textbox,
type of controls such
password, check box, etc.
<INPUT Type=“text” Name=“firstname” Size=“30”
Maxlength=“25” />
Attributes:
Type – This attribute determines the control type created by the <INPUT> tag.
its values are :
text – create text box.
password – same as text box. But here characters
by coded symbols
such as asterisk (*) etc.
checkbox – create a checkbox. When more than
required to be selected
are represented
[check/uncheck].
one option isradio- create a radio buttons. It is used to select a
group of values. User
single value from a
can select only one button.
reset-create a button that automatically reset
the form controls to their
initial value.
submit – create a button that automatically
submit form.
button – create slandered graphical button on
used to trigger a client
the form. It is
side script when the user clicks that
button (used for function call)
Name- used to give a name to input control. When
values are
the form is submitted the data
passed to the server along with the
corresponding name of the control.
Value- to set default (initial) value inside the control.
Size- to set the width of the text in terms of
characters. It is applicable only in
the text field and password.
Maxlength-it can limit no of characters that the user
field. It is applicable
can type into the
only in text and password.
eg:-
<INPUT Type=“text” Name=“firstname” Value=“YourName”
Size=“30” Maxlength=“25” />
<BODY>
<FORM Action="login.php" Mehtod="post" >
<p>Name : <INPUT Type="text" Name="firstname"
Size="30" Maxlength="25" /></p>
<p>Password : <INPUT Type="password" Name="paw"
Size="30" Maxlength="25" /></p>
<INPUT Type="submit" Value="Login" />
<INPUT Type="reset" Value="Cancel" />
</FORM>
</BODY>
<FORM Action="login.php" Method="post" >
<P>Name : <INPUT Type="text" Name="firstname" Size="30"
Maxlength="25"
/></P><P>Password : <INPUT Type="password" Name="passwd" Size="30"
Maxlength="25"
<P>Sex
/></p>
: <INPUT Type="radio" Name="gender" Value="M" /> Male<INPUT
Type="radio" Name="gender" Value="F" /> Female </P>
<P>Hobbies
:
<INPUT Type="checkbox" Name="hobby"
Value="Games" />
Playing Games<INPUT Type="checkbox"
Name="hobby"
Value="Watching TV" />
Watching TV
<INPUT Type="checkbox" Name="hobby"
Value="Swimming"
/>Swimming
</P>
<INPUT Type="submit" Value="Login" />
<INPUT Type="reset" Value="Cancel" />
</FORM>
<TEXTAREA>
it is a container tag used to create text area (multiple line of text)
Attributes:
Name – it is used to give name to control.
Rows- it specifies the no of rows in a text area.
Cols-it indicate the no of columns in a text area
(no of characters in a line).
eg:-
<FORM Action=“sample.php” Method=“post”>
<TEXTAREA Rows=“10” cols=“30” Name=“Address”> Enter Your
Address</TEXTAREA>
</FORM>
<SELECT>
It is also called drop down box, provides a list items in the form. In the
form drop down list , from where a user can select one or more options. Select
box is helpful when a number of option are to be displayed in a limited space.
The options in list are specified using <option> which will be contained
in<select> pair
Attributes:
Name - it gives a name to the control which sent to
recognized and to get value.
Size –this can be used to present a scrolling list box.
the server to beIts values will decide whether the select box
or list box . If the
should be a dropdown list
value is 1, we get drop down list or combo box.
Multiple – if set to multiple then allows a user to
select multiple
item from the menu.
<OPTION>
it is an empty tag placed inside the <SELECT></SELECT>tag pair. It list
out the option provided in the select box.
Attributes:
Selected – used to indicate default selection.
Value-value that will be used if an option in the selected box is selected.
<FORM Action="login.php" Method="post" >
<p>
Nationality :
<select Name="nationality" Size="1">
<option Value=“indian" Selected >Indian</option>
<option Value=“british" > British</option>
<option Value=“german" > German</option>
</select>
</p>
</form>
<FIELDSET>
It is used to group controls in a form. The <FIELDSET> tag draw a
box around the related elements.
<LEGEND>
it is a container tag used to define caption for the <FIELDSET>.
<FIELDSET>
<LEGEND> Nationality :
</LEGEND>
</FIELDSET>
<FORM Action="login.php" Method="post" >
<p>
<FIELDSET>
<LEGEND> Nationality :
</LEGEND>
<select Name="nationality" Size="1">
<option Value=“indian" Selected >Indian</option>
<option Value=“british" > British</option>
<option Value=“german" > German</option></select>
Nativity :
<INPUT Type="text" Name=“state" Size="30" Maxlength="25"/>
District :
<INPUT Type="text" Name=“district" Size="30" Maxlength="25"/>
</FIELDSET>
</p>
</form>
Q ) Post method and Get method
HTML 5
HTML 5 enables the developers to create website which are more faster, smarter and
secure, it was jointly developed by WHATWG (Web Hypertext Application
Technology Working Group) and W3C(World Wide Web Consortium).
New HTML5 Elements
The most interesting new elements are:
New semantic elements like <header>, <footer>, <article> and <section>.
New form control attributes like number, date, time, calendar and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.
Comments
Post a Comment