HTML – Advance
List in HTML
List are useful for communicating complicated information in a succinct, structured
way. There are three based type of HTML Lists . There are :
Unordered List
The bulleted list is called an Unordered List. An Unordered List start with tag
<UL> and end with </UL>. Each item start with tag <LI> (List Item).
The attributes that can be specified with <LI> are :
Type - DISC will give a solid round black bullet
Type – CIRCLE will give a hollow circle bullet
Type – SQUARE will give a solid round black bullet.
Q1 Create a web page to display Unordered Lists .
<HTML>
<HEAD>
<TITLE> UNORDERED LISTS </TITLE>
</HEAD>
<BODY>
<H1> FRUTTS
<UL>
<LI> APPLE
<LI> BANANA
<LI> GRAPES
<LI> MANGO
<LI> PEACH
</UL>
VEGUTABLE
<UL>
<LI> ONION
<LI> CARROT
<LI> POTATOES
<LI> RADISH
<LI> PEAS
</UL>
</H1>
</BODY>
</HTML>
Q2 Create a web page to display various bullet type.
<HTML>
<HEAD>
<TITLE> BULLET STYLES </TITLE>
</HEAD>
<BODY>
<H1> FRUTTS
<UL TYPE = CIRCLE>
<LI> APPLE
<LI> BANANA
<LI> GRAPES
<LI> MANGO
<LI> PEACH
</UL>
<UL TYPE = DISC>
<LI> ONION
<LI> CARROT
<LI> POTATOES
<LI> RADISH
<LI> PEAS
</UL>
</H1>
</BODY>
</HTML>
ORDER LIST
Order Lists are numbered in some fashion. An ordered list starts with the tag <OL>
and end with </OL>. Each list items start tag <LI>. The attributes that can be
specified with <LI> are.
Example
<OL>
<LI> APPLE
<LI> BANANA
<LI> GRAPES
<LI> MANGO
<LI> PEACH
</OL>
DEFINITION LIST
A Definition List (<DL>) consists of alternating a definition term (<DT>) and a
definition description (<DD>) Definition List with start <DL> and ends with </DL>.
The <DT> tag goes in front of each term to be defined, with a <DD> tag in front of
each definition.
Example :
<DL>
<DT> Keyboard
<DD> An Input Device
<DT> Printer
<DD> An Output Device
</DL>
`
INSERTING IMAGE
HTML allows placing of static and/or animated image in an HTML page, accepts
two picture file formats .gif and .jpg . The <IMG> tag takes the following attributes:
ALIGN Controls alignment of the text following the image.
ALIGN = TOP Indicates the text after the image to be written at the
top. Next to image
ALIGN = MIDDLE Indicates the text after the image to be written at
the Middle. Next to image
ALIGN = BOTTEM Indicates the text after the image to be written at
the Bottom. Next to image
CONTROL ALIGNMENT OF THEM IMAGE WITH RESPECT TO VDU
SCREEN
ALIGN = LEFT Indicates the image is aligned to the left with respect to
the screen
ALIGN = CENTER Indicates the image is aligned to the Center with
respect to the screen
ALIGN = RIGHT Indicates the image is aligned to the Right with
respect to the screen
BORDER Specific the size of border to place around the image
WIDTH Specific the width of the image pixels
HEIGHT Specific the height of the image pixels
For Example : Create a web page to add an Image to a page and display border
attributes.
<HTML>
<HEAD>
<TITLE> WIRKING WITH IMAGE </TITLE>
</HEAD>
<BODY>
<H1><CENTER> CONTROLLINGH IMAGE BORDER</CENTER></H1>
<H2><CENTER>
<I> IMAGE WITHOUT A BORDER </I><BR><BR>
<IMG SRC = “BABY.GIF”<<BR><BR>
<I> IMAGE WITH BORDER=6</I><BR><BR>
<IMG BORDER= 6 SRC = “BABY.GIF”><BR>
</CENTER>
</H2>
</BODY>
</HTML>
USING THE WIDTH AND HEIGHT ATTRIBUTE
For Example : Create a web page to add an Image to a page and display width
and height attributes.
<HTML>
<HEAD>
<TITLE> WIRKING WITH IMAGE </TITLE>
</HEAD>
<BODY>
<H1><CENTER> CONTROLLINGH IMAGE SIZE</CENTER></H1>
<H2><CENTER>
<I> NORMAL IMAGE SIZE </I><BR><BR>
<IMG SRC = “BABY.GIF” HEIGHT=”150” WIDTH = “150” ALIGN=”RIGHT”>
</CENTER>
</H2>
</BODY>
</HTML>
Linking
1. External Hyperlink
HTML allows linking to other documents as well as image. Clicking on a section of
text or an image in one web page will open an entire webpage or image. The text or
an image that provides such as linkages is called Hypertext or Hyperlink.
Links are created in a webpage by using the <A> </A> tags. The document to be
navigated need to specified . By using the HREF attribute of the <A> tag the next
navigable web page or image can be specified.
Syntax
<A HREF = “Filename.html”>
For Example:
<A HREF=”Detail.html”> Visit my Home Page </A>
2. Internal Hyperlink
Sometimes, a jump is required to different location in the same document. Since the
jump has to be targeted to a specific location, the same two steps need to be
performed as before i.e. identify a location with a name and then jump to that
location using the name. The only difference is that the filename.html now will be
the current filename.html.
Syntax
<A Name = “location_name”>
<A Href = “#location_name”> …………….. </A>
Example
<A Name = “Point1”>
<A href = “#Point1”> Visit My Home Page </A>
Superscript SUP and Subscript SUB
The subscript element (<SUB>) and (</SUB>) renders the enclosed text in
Subscript (a bit lower than the regular text). This element is useful for mathematical
calculations.
We all need H<SUB> 2 </SUB> O
\Will produce the output : H2O
The Superscript element (<SUP>) and (</SUP>) renders the enclosed text in
Superscript (a bit higher than the regular text). This element is useful for
mathematical calculations.
We all need XY<SUP> 2 </SUP>
Will produce the output : XY2
Tables
Tables are used when you need to show “tabular data” i.e information that is
logically presented in rows and column.
Table are defined with the <table> tag. A table is divided into rows ( with the <tr>
tag), and each row is divided into data cell ( with the <td> tag). The letters td stand
for “table data” which is the content of a data cell. A data cell can contain text,
image, lists, paragraphs, forms, horizontal rules tables etc. There are three primary
tags for use with a table :
<table> ------------- </table> - This tag define the table
< tr > ------------------ </tr> - This tag define a row in the table
< td > ------------------ </td> - This tag define a column in the table
Example 1 :
Create a table in HTML with three Rows and three Column :
<HTML>
<HEAD>
<TITLE> Creating Tables </TITLE>
</HEAD>
<BODY>
<H1> TABLE WITH THREE ROWS AND THREE COLUMNS </H1>
<TABLE BORDER = “1”>
<TR>
<TD> ROW 1, CELL 1 </TD>
<TD> ROW 1, CELL 2 </TD>
<TD> ROW 1, CELL 3 </TD>
</TR>
<TR>
<TD> ROW 2, CELL 1 </TD>
<TD> ROW 2, CELL 2 </TD>
<TD> ROW 2, CELL 3 </TD>
</TR>
<TR>
<TD> ROW 3, CELL 1 </TD>
<TD> ROW 3, CELL 2 </TD>
<TD> ROW 3, CELL 3 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
The attributes specified with <TABLE> tag are as follows
WIDTH Specifies the width of the table as a number of pixels or as a
percentage of the available horizontal space.
BORDER Specifies the width in pixels of the border around a table.
CELLSPECING Defines the amount of space between cells in the table. The
value may be given as a number of pixels or as percentage.
The default value is 2.
CELLPADDING The amount of space between the edges of the cell and the
contents . The default value is 2.
ALIGN Horizontal alignment of the table . Possible values are left, right
and center.
BGCOLOR Background color of the table.
BACKGROUND Background image to tile within all cells in the table.
Adding Table Borders
The Border attribute defines how wide the table’s border will be. There are two
ways to use the BORDER attribute.
<TABLE BORDER >
<TABLE BORDER = “NUMBER”>
Example :
<HTML>
<HEAD>
<TITLE> TABLES BORDERS </TITLE>
</HEAD>
<BODY>
<H1> TABLE WITH BORDER SIZE 10 </H1>
<TABLE BORDER = “10”>
<TR>
<TD> ROW 1, CELL 1 </TD>
<TD> ROW 1, CELL 2 </TD>
<TD> ROW 1, CELL 3 </TD>
</TR>
<TR>
<TD> ROW 2, CELL 1 </TD>
<TD> ROW 2, CELL 2 </TD>
<TD> ROW 2, CELL 3 </TD>
</TR>
<TR>
<TD> ROW 3, CELL 1 </TD>
<TD> ROW 3, CELL 2 </TD>
<TD> ROW 3, CELL 3 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
HEADING IN TABLE
Headings in a table are defined with the <TH> tag.
<TABLE BORDER = “1”>
<TR>
<TH> HEADING 1</TH>
<TH> HEADING 2</TH>
</TR>
<TR>
<TD> ROW 1, CELL 1 </TD>
<TD> ROW 1, CELL 2 </TD>
</TR>
<TR>
<TD> ROW 2, CELL 1 </TD>
<TD> ROW 2, CELL 2 </TD>
</TR>
</TABLE>
ROWSPAN and COLSPAN
The COLSPAN attribute can be used in a cell to make cell’s
contents merge with another cell. You can use COLSPAN in either a
table data cell or table-heading cell.
<TD COLSPAN = “NUMBER”>
To span two columns, specify COLSPAN = “2”
ROWSPAN attribute can be used to merge two rows in a table.
<TD ROWSPAN = “NUMBER”>
Example :
Create a table in HTML to merge rows and columns.
<HTML>
<HEAD>
<TITLE> ARMY PUBLIC SCHOOL BABINA</TITLE>
</HEAD>
<BODY>
<H1><CENTER> TABLE WITH ROWSPAN AND COLSPAN</CENTER></H1>
<TABLE BORDER=”9” ALIGN=”CENTER” CELLPADDING =”10”>
<TR>
<TH>COLUMN 1</TH>
<TH>COLUMN 2</TH>
<TH>COLUMN 3</TH>
</TR>
<TR><TD ROWSPAN= ”2”>ROW 1 CELL 1</TD>
<TD>ROW 1 CELL 2</TD> <TD>ROW 1 CELL 3</TD></TR>
<TR><TD>ROW 2 CELL 2</TD><TD> ROW 2 CELL 3</TD></TR>
<TR><TD COLSPAN= ”3”> ROW 3 CELL 1 </TD></TR>
</TABLE>
</BODY>
</HTML>
LAB ACTIVITY
