Download these slides
http://www.hsslive.in
Chapter 5
Web Designing using HTML
TCA Gafoor , AKM HSS KOTTOOR
Lists in HTML
Lists in HTML are used to display list of
information.There are three types of lists in
HTML,
1. Ordered list,
2. Unordered list
3. Definition list.
1.Ordered list
An ordered list marks items by numbers or alphabets.It is created using
the <OL> and </OL> tag.It is also called numbered list.
Example:
<HTML>
<HEAD>
<TITLE> Ordered list </TITLE>
</HEAD>
<BODY>
<OL>
<LI>INDIA</LI>
<LI>SRILANKA</LI>
<LI>NEPAL</NEPAL>
<LI>CHINA</LI>
</OL>
</BODY>
</HTML>
2. Unordered List
An unordered list used bullets instead of numbers.The <UL> and </UL>
tag is used to create an unordered list in HTML.
Example:
<HTML>
<HEAD>
<TITLE> Unordered list </TITLE>
</HEAD>
<BODY>
<UL>
<LI>INDIA</LI>
<LI>SRILANKA</LI>
<LI>NEPAL</NEPAL>
<LI>CHINA</LI>
</UL> </BODY></HTML>
3. Definition List
Definition list consists of a list of definitions and their descriptions.The <DL> and </DL>
tag is used to create a definition list in HTML.The definition term is specified by <DT>
and description by <DD>.
Example:
<HTML>
<HEAD><TITLE> Definition list </TITLE></HEAD>
<BODY>
<DL>
<DT>CPU
<DD>Central Processing Unit
<DT>BMP
<DD>Bitmap picture
</DL>
</BODY>
</HTML>
Nested list
A list placed inside another list is called a nested list .For example we can place
an ordered list inside an unordered list ,an unordered list inside an ordered
list and so on.
<BODY>
<OL type=I><LI>COUNTRY
<UL type=disc>
<LI>INDIA
<LI>USA
</UL>
<LI>CURRENCY
<UL type=square>
<LI>RUPEE
<LI>DOLLAR
</UL>
</OL></ol></BODY></HTML>
Nested list
<HTML><BODY>
<UL>
<LI>Hardware
<OL>
<LI>I/O Devices
<LI>RAM
<LI>Hard Disk & DVD Drive
</OL>
<LI>Software
<OL>
<LI>Operating System
<LI>Application Programs
</OL>
</UL></BODY></HTML>
Attributes of OL/UL Tag
Type: In Ordered List, Order type like numbers,roman
numbers,alphabets can be set using type.
Eg: Type=1 (default) >> for 1,2,3,4…. Etc
Type=“a” >> for a,b,c,d…. Etc
Type=A >> for A,B,C,D…. Etc
Type=I >> for I,II,III,IV…. Etc
Type=i >> for i,ii,iii,vi…. Etc
Start: In Ordered Starting Number/Alphabet can be set using Start
attribute.
Eg: <OL Type=A Start=12>
<li>Order 1
<li>Order 2
<li>Order 3
</ol>
Type: In Unordered List, Order type like disc,circle ,square can be
set using type.
Eg: <UL Type=“disc “>
Hyperlinks
Linking is an important feature of HTML.Clicking a link transfers the control to
another document or web page.Links in HTML are of two types,Internal link and
External link. The <A> tag is used to create a link in HTML. Href is the attribute
used to set the Url(Filename or Webpage Address)
Internal link
An internal link is a link which points to the different section of the same
Document.
External link
An external link points to another document or web page.
Absolute and Relative URL
URL stands for Uniform Resource Locator.It is also known as web .An absolute URL begins with a
Protocol (HTTP or HTTPS).It contins all the informations needed to identify files on the
internet.Arelative URL points to files in the same folder or on same server.A relative URL looks like a file
name. Example: http://www.dhsekerala.gov.in/result.html (Absolute URL).
<a href=”hello.html”>hello</a> (Relative URL).
Graphical & Email Hyperlinks
Creating graphical hyperlink
A graphical link can be created by placing an image inside the <A> tag using
<IMG> tag.
<a href="http://akmhsskottoor.webs.com"><IMG SRC=“akmlogo.jpg"></a>
Creating link to an e-mail
A link to an e-mail can be created using the <A Href> tag.The syntax is
<A Href=”mailto:email address”> Message for the browser </A>
Example:
<A Href=”mailto:
[email protected]”>Send your Comments </A>
Inserting Audio/Video
The <EMBED> tag is used to embed sound and video in a web page.The
main attribute of <EMBED> tag is Src which specifies the file name (URL)
of sound or video to be included.The Hidden attribute of <EMBED> tag is
used to control visibility of embedded components.It has two values True
(Default) or False.
Eg:
<embed src="C:\HSS\samsung.mp3"><br><br>
<embed src="D:\videos\Tom and Jerry.mp4">
Creating tables in HTML
Tables are used to structure data in a webpage. Table in HTML are created using the
<TABLE>and </TABLE>tags.
Attributes of <TABLE> Tag
1)Border:-It specifies the thickness of border lines around the table.The value 0 denotes no
border.
2)Bordercolor:-It is used to assign a colour to the border.
3)Align:-It specifies the position of table with respect to other document elements.
4)Bgcolor:-Assigns a background colour to the table.
5)Background:-It is used to specify a background for the table.
6)Cellspacing:-It is the space between cell border and table border.
7)Cellpadding:-It is the space between cell border and cell content.
8)Frame:-It is used to control the appearance of table border.
(Void-No border,Above-Border appaers on top only,Box-Border appears on all sides(Default
value) )
9)Rules:-It is used to control what rules(borders between cells) are displayed in a table.
10)Height and Width:-These attributes are used to specify both height and width for a table.
TR ,TD Tags
<TR> Tag
The <TR> tag is used to create the table row.
<TD> Tag
The <TD> tag is used to specify the table data.
<TH> Tag
The <TH> tag is used to specify the table heading.
Difference between <TH> and <TD> tag
The contents created using <TH> tag appears bold and as centered
where as the content created using <TD> tag does not appears as
bold and centered.The <TH> tag is used to specify the table
heading whereas <TD> tag is used to specify the table data.
Attributes of <TR> Tag
1)Align:-It specifies the horizontal alignment of the content within a cell.It can have
three values Left,right or center.
2)Valign:-It specifies the vertical alignment of the content in a cell.It can have values
top,middle,bottom or baseline..
3)Bgcolor:-It specifies the background colour of a row.
Attributes of <TD>,<TH> Tag
1)Align:-It specifies the horizontal alignment of content within a cell.The default value
for <TH> is center and for <TD> is left.
2)Valign:-It specifies the vertical alignment of content withiin a cell.It can have three
values top,bottom,middle or baseline.
3)Bgcolor:-Specifies a background colour for a cell.
4)Colspan:-Indicates the number of columns a cell should occupy.
5)Rowspan:-Indicates the number of rows a cell should occupy.The default value is
single .
Table Example
<html>
<head><title>Tables_in_HTML </title></head>
<body>
<table border="1" height="200" width="300">
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr> <th>4</th><th>5</th><th>6</th</tr>
<tr><th colspan="3">7</th></tr>
</table>
</body>
</html>
Table Example 2
<TABLE HEIGHT=200 WIDTH=300 BORDER="2" CELLPADDING="2“ CELLSPACING ="2">
<TR>
<TH ROWSPAN="2">Years</TH>
<TH COLSPAN="3">Total Number of</TH>
</TR><TR><TH>Cases</TH><TH>Persons Killed</TH><TH>Persons Injured</TH></TR>
<TR><TH>2012</TH><TD>36174</TD><TD>4286</TD><TD>41915</TD></TR>
<TR><TH>2013</TH><TD>35215</TD><TD>4258</TD><TD>40346</TD></TR>
<TR><TH>2014</TH><TD>36282</TD>
<TD>4049</TD><TD>41096</TD></TR>
</TABLE>
<CAPTION> Tag in TABLE
Table caption using <CAPTION> Tag
The caption tag <CAPTION> and </CAPTION> allows to create a caption for a
table.A caption is the text that appears
<TABLE BORDER="2" HEIGHT="200" WIDTH="200">
<CAPTION>MY SCHOOL</CAPTION>
<TR><TH COLSPAN="3“>MY_SCHOOL</TH></TR>
<TR>
<TH>Boys</TH>
<TH>Girls</TH>
<TH> 500</TH>
</TR>
</TABLE>
<FRAMESET> tag
The <FRAMESET> tag allows to view multiple web pages in a single window.Each
individual sections(Pages)in a frameset is called frame.It is a container tab which
begins with <FRAMESET> and </FRAMESET> tags.
Attributes of <FRAMESET> Tag
1)Cols:-It determines the dimension and number of vertical frames in the frameset.
2)Rows:-It determines the dimension and number of horizontal frames in the frameset.
3)Border:-It specifies the thickness of border.
4)Bordercolor:-It specify border colour.
Eg: <FRAMESET COLS=100,200,300> </FRAMESET>
This code will create three vertical frames.The first window with size 100,second of size
200 and third of size 300 pixels.
Example:-<FRAMESET ROWS=*,*></FRAMESET>
This code will create horizontal frames of equal size
The <FRAME> Tag
The <FRAME> tag defines the frames within a frameset.It is an empty tag.
Attributes of <FRAME> tag
1)Src:-It specifies the name of file to be loaded into a frame.
2)Scrolling:-Indicates whether scroll bar is to be shown in the frame,It takes
three values
YES,NO,AUTO.
3)Noresize:-Disables frames resizing capability.Normally frames can be
resized.
4)Marginwidth:-It specifies the space between sides of the frame.
5) Marginheight:-It specifies the space between top and bottom of the frame.
6)Name:-It specifies a name to the frame.
<NOFRAME> Tag
The <NOFRAME> tag specifies the content if the frames cannot be displayed
by the web browser.
Nesting of Framesets
A pair of <FRAMESET> tags enclosed within another <FRAMESET> pair is
called nesting of frameset.
Example:
<frameset rows="100,*">
<frame src="header.html">
<frameset cols="33%,33%,*">
<frame src="subframe1.html">
<frame src="subframe2.html">
<frame src="subframe3.html">
</frameset>
</frameset>
Forms
Forms are used to pass information from web page to web server.A
form has two elements, container and controls (textarea, buttons,
checkboxes etc).
<FORM> Tag
Forms in HTML are created by the <FORM> and </FORM> tag.
Attributes of <FORM> tag
1)Action:-It specifies the location(URL) of the server.
2)Method:-Indicates the method used by the web server to receive the form.The two
possible values are POST and GET(Default).
3)Target:-It specifies the frame where the result is to be displayed.
<INPUT> Tag
The <INPUT> tag is used to create a number of controls such as textbox,
passwordbox, checkbox, radio button etc.
Attributes of <INPUT> Tag
1)Type:- The type attribute specifies the type of control .The main values of type
attribute are,
a)Text:-Creates a textbox. Example: <INPUT Type=”Text”>
b)Password:-Creates a password box.Example: <INPUT Type=”Password”>
c)Checkbox:-Creates a checkbox.Example:<INPUT Type=”Checkbox”>
d)Radio:-Creates a radio button.Example: <INPUT Type=”Radio”>
e)Reset:- Creates a reset button.Example:- <INPUT Type=”Reset”>
f)Submit:-Creates a submit button.Example:- <INPUT Type=”Submit”>
g)button:- Creates a normal button. Example:- <INPUT Type=”Button” value=“OK”>
2)Name:-It is used to give a name to the control.
3)Value:-It is used to provide an initial value to the control.
4)Size:-It is applicable to Text and Password.It limits the number of characters.
5)Maxlength:-It is used to control the number of characters that can be typed.
<TEXTAREA> Tag
The textarea control allows multiple line text as input.The <TEXTAREA> and
</TEXTAREA> tags are used to create a textarea.
Attributes of <TEXTAREA> Tag
1)Name:-It is used to give a name to the control.
2)Rows:-It specify the height of textarea control.
3)Cols:-It specifies the width of textarea control.
<textarea rows=10 cols=30>
Enter Comments Here
</textarea>
<SELECT> tag
The <SELECT> tag is used to create a drop-down list.The <OPTION> tag inside the
<SELECT> tag defines the available options in the list.
Example:-<SELECT>
<OPTION>Science
<OPTION>Humanities
<OPTION>Commerce
</SELECT>
Attributes of <SELECT> Tag
1)Name:-It is used to give a name to the control.
2)Size:-It controls if select box is a drop down or list box.
3)Multiple:-It allows multiple selection.
Attributes of <OPTION> tag
1)Selected:-It is used to indicate default selection.
2)Value:-It is used to submit a value.
<FIELDSET> Tag
The <FIELDSET> tag is used to group related elements(Controls) in a
form.The <FIELDSET> tag draws a box around the related elements.
Example:
<form>
<fieldset>
General Information:
Name: <input type="text" size="30">
Email: <input type="text" size="30">
Date of birth:
<input type="text" size="10" >
</fieldset>
</form>
GET and POST
Form has 2 Methods:-Indicates the method
used by the web server to receive the form.The two
possible values are POST and GET(Default).
Difference between GET and POST Methods of Form
The POST method is used to send sensitive
informations such as password,creditcard number
etc.The GET method appends data along with the
URL.It is less secure than POST method.
Conclusion:
Forms are used to input data through web pages.
The three kinds of lists in HTML are ordered,unordered and definition lists.
The start attribute of <OL> Tag is used to change the beginning value of an
ordered list.
The <A> tag is also called anchor tag.
The NAME attribute of <A> tag is used to link to a particular section of the
same
document.
The <NOEMBED> tag displays the content if <EMBED> tag is not supported by
browser.
The default value of border attribute of table is zero.
The default alignment of tables in HTML is Left.
A row in HTML is a collection of cells.
HTML 5 enables the developers to create websites which are more faster,smarter
and secure.It was jointely developed by WHATWG(Web Hypertext Application
Technology Working Group) and W3C(World Wide Web Consortium ).
Thanks for Watching
PREPARED BY
TCA GAFOOR
HSST Computer Application
AKM HSS KOTTOOR
Download these slides
http://www.hsslive.in
