Scribd
Upload
5 views19 pages

More On HTML

Uploaded by

anshumanpatra664
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views19 pages

More On HTML

Uploaded by

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

HTML-II

HTML LIST:-
HTML LIST APPEAR IN WEB BROWSERS AS BULLETED LINES OF TEXT.
THERE ARE ACTUALLY 3 DIFFERENT TYPES OF LIST INCLUDING ORDERED LIST,
UNORDERED LIST AND DEFINITION LIST.
EACH TYPE UTILIZES ITS OWN UNIQUE LIST TAG.

UNORDERED LIST:-
 AN UNORDERED LIST <UL> SIGNIFIES TO A WEB BROWSER THAT LL THE LIST
ITEMS CONTAINED INSIDE THE <UL> TAG SHOULD BE RENDERED WITH A
BULLET PROCEDING THE TEXT.
THE DEFAULT BULLET TYPE FOR MOST WEB BROWSER IS A FULL DISC (BLACK
CIRCLE). BUT THIS CAN BE ADJUSTED BY HTML ATTRIBUTE CALLED “TYPE”.
 EX:- <BODY> OUTPUT
<H4 ALIGN=“CENTER”> SHOPPING LIST </H4> Shopping list
<UL> •Milk
<LI> MILK</LI> •Toilet paper
<LI> TOILET PAPER</LI> •Bread
<LI> BREAD</LI>
</UL>
</BODY>
• TO RENDER A LIST WITH DIFFERENT BULLET TYPE, ADD A TYPE
ATTRIBUTE TO THE UNORDER LIST ELEMENT.
• <UL TYPE=“SQUARE”>
• <UL TYPE=“DISC”>
• <UL TYPE=“CIRCLE”>
 EX:- <BODY>
<H4 ALIGN=“CENTER”> </H4>
<UL TYPE= “SQUARE”>
<LI> MILK</LI>
OUTPUT:-
shopping
<LI> TOILET PAPER</LI>
list
<LI> BREAD</LI>  Milk
</UL>  Toilet
</BODY> Paper
 Bread
ORDER LIST:-
• AN ORDER LIST IS DEFINED USING THE <OL> TAG.
• LIST ITEM PLACED INSIDE OF AN ORDERED LIST ARE
PRECEDED WITH NO INSTEAD OF BULLETS.
• EX:- <BODY>
<H4 ALIGN=“CENTER”> GOAL</H4>
<OL>
<LI>DOCTOR</LI>
OUTPUT:-
<LI>SCIENTIST</LI>
Goal
<LI>TEACHER</LI>
1. Doctor
<OL> 2. Scientist
3. Teacher
</BODY>
• IF YOU WANT TO CREATE A ORDER LIST WITH
NUMBERING I,II,III…. FORMAT WE HAVE TO USE
ATTRIBUTE “TYPE”
• <OL TYPE=I>
• <OL TYPE=A>
• <OL TYPE=A>
• IF YOU WANT TO START THE NUMBERING FROM A
PARTICULAR NUMBER WE USE ATTRIBUTE “START”
• EX:- <OL TYPE=A START=5> O/P-E,F …
<OL TYPE=I START=4> O/P- IV,V,VI…
• DEFINITION LIST:-
• HTML DEFINATION LIST ARE LIST ELEMENT THAT HAVE A
UNIQUE ARRAY OF TAGS AND ELEMENTS.
• TAG USED FOR DEFINITION LIST
• <DL>:-OPENING CLAUSE THAT START OF THE LSIT
• <DT> :- LIST ITEM THAT DEFINES THE DEFINITION TERM
• <DD>:- DEFINITION OF LIST ITEM
• EX:- <BODY>
<DL>
<DT><B>US</B></DT> Output:-
US
<DD> UNITED STATE</DD>
<DT><B> UK</B></DT> United State
UK
<DD> UNITED KINGDOM</DD>
United
</DL>
Kingdom
</BODY>
INSERTING IMAGE TO HTML
PAGE
• HTML ALLOWS PLACING OF STATIC AND/OR ANIMATED IMAGES IN AN HTML
PAGES.
• HTML ACCEPTS 2 PICTURES FILE FORMATS .GIF AND .JPG.
• IMAGE CAN BE INSERTED TO HTML PAGE OR WEBPAGE USING THE TAG <IMG>,
WHICH TAKES THE NAME OF IMAGE FILE AS AN ATTRIBUTE. IN ADDITION,HTML
ALSO ALLOWS CONTROL OF THE HEIGHT,WIDTH,BORDER AND SO ON.
• SYNTAX FOR IMAGE TAG:-
<IMG SRC=“PATH OF IMAGE FILE NAME” ALT=“TEXT MEAAGE”
HEIGHT=“X” WIDTH=“Y” ALIGN=“VALUE”>
EX:- <IMG SRC=“D:\IMAGE\FIRST.JPG”, ALT=“FIRST PICTURE” HEIGHT=“50”
WIDTH=“100” ALIGN=“LEFT”>
• ATTRIBUTE OF IMG TAG:-
• SRC ATTRIBUTE:-
 TO DISPLAY AM IMAGE ON A WEBPAGE YOU NEED TO USE THE SRC ATTRIBUTE.
 SRC STAND FOR SOURCE
 THE VALUE OF SRC ATTRIBUTE IS THE URL OR THE LOCATION AND NAME OF
THE IMAGE FILE NAME.
 EX:- <IMG SRC=“D:\IMAGE.JPG”>
 HERE IMAGE.JPG IS AN AIMAGE FILE NAME WHICH IS PRESENT AT D: DRIVE OF
YOUR SYSTEM
• ALT ATTRIBUTE:-
THE ALT ATTRIBUTE IS USED TO AN ALTERNATE TEXT FOR AN IMAGE.
IT INDICATES THE TEXT TO BE DISPLAYED IN CASE THE BROWSER IS UNABLE TO
DISPLAY THE IMAGE SPECIFIES IN THE SRC ATTRIBUTE.
EX:- <IMG SRC=“D;\IMAGE.JPG” ALT=“IMAGE NOT SUITABLE”>
THE IMAGE IS NOT SUITABLE MESSAGE IS DISPLAYED WHEN THE BROWSER
WILL NOT SUPPORT OR NOT FOUND THE IMAGE.
WIDTH & HEIGHT:-
• THESE ATTRIBUTE ARE USED TO SPECIFY THE HEIGHT AND
WIDTH OF AN IMAGE.
• THE VALUE OF THIS ATTRIBUTE CAN BE GIVEN BY 2 WAY-
(1) FIXED POINT:-
• IN THIS WE HAVE TO SPECIFY SIZE IN PIXEL
MANNER.
• EX:- <IMG SRC=“IMAGE.JPG” HEIGHT=“70”
WIDTH=“80”>
(II)FLOATING POINT :-
• IN THIS WE HAVE TO SPECIFY THE SIZE AS
PERCENTAGE WHERE BROWSER HEIGHT AND WIDTH
ARE TAKEN AS 100%.
• EX:- <IMG SRC=“IMAGE.JPG” HEIGHT=“70%”
WIDTH=“80%”>
• ALLIGN ATTRIBUTE:-
• IT CONTROLS ALIGNMENT OF THE TEXT FOLLOWING THE
IMAGE.
• EX:-ALIGN =TOP =>INDICATES THE TEXT AFTER IMAGE
TO BE WRITTEN AT THE TOP, NEXT TO IMAGE.
• ALIGN=MIDDLE => INDICATES THE TEXT AFTER THE
IMAGE TO WRITTEN AT THE MIDDLE NEXT TO IMAGE.
• ALIGN=BOTTOM => INDICATES THE TEXT AFTER THE
IMAGE TO WRITTEN AT THE BOTTOM NEXT TO IMAGE.
• ALIGN=LEFT => INDICATES THE TEXT AFTER THE
IMAGE TO WRITTEN AT THE LEFT WITH RESPECT TO
SCREEN..
• ALIGN=RIGHT => INDICATES THE TEXT AFTER THE
IMAGE TO E WRITTEN AT THE RIGHT NEXT TO IMAGE.
• ALIGN=CENTER => INDICATES THE TEXT AFTER THE
IMAGE TO E WRITTEN AT THE CENTER NEXT TO IMAGE.
• HOW TO GIVE AN IMAGE AS BACKGROUND OF
HTML PAGE
 USING THE BACKGROUND ATTRIBUTE INSIDE
BODY TAG WE HAVE TO GIVE THE IMAGE AS A
BACKGROUND IMAGE.
THE VALUE OF BACKGROUND IS THE PATH OF THE
IMAGE FILE NAME AND THE IMAGE FILE NAME.
EX:-< BODY BACKGROUND=“D:\FIRST.JPG”>
TABLE
• A TABLE IS A TWO DIMENSIONAL MATRIX CONSIST OF ROWS AND
COLUMN. TABLES ARE INTENDED FOR DISPLAYING DATA IN COLUMN ON
WEB PAGE.
• ALL TABLE RELATED TAGS ARE INCLUDED BETWEEN THE
<TABLE>….</TABLE> TAGS. EACH ROWS OF A TABLE IS DESCRIBED BY
THE <TR>…</TR> TAGS. EACH COLUMN OF A TABLE IS DESCRIBED
BETWEEN THE <TD>….</TD>
• EX:- <TABLE>
<TR>
<TD>…..</TD>
<TD>…..</TD>
<TR>
<TR>
<TD>…..</TD>
<TD>…..</TD>
<TR>
</TABLE>
• TABLE BORDER:-
 IF WE DON’T SPECIFY THE BORDER
ATTRIBUTE ,THE TABLE IS DISPLAYED WITHOUT
ANY BORDER.
EX:-<TABLE BORDER=“1”>
<TR>
<TD>DAV PUBLIC SCHOOL</TD>
</TR>
<TR>
<TD>POKHARIPUT</TD>
</TR>
</TABLE>
IN ABOVE EXAMPLE THE ABOVE TABLE CREATED WITH BORDER 1 PIXEL.
O/P:-
DAV PUBLIC SCHOOL POKHARIPUT
• EMPTY CELL IN A TABLE:-
TABLE CELL WITH NO CONTENT ARE NOT
DISPLAYED VERY WELL IN MOST BROWSER.
SOMETIMES THE BORDER OUTSIDE THE EMPTY
CELL IS NOT DISPLAYED . SO TO MAKE THE
BORDER VISIBLE ADD A NON BREAKING
SPACE(&NBSP) TO EMPTY DATA CELL.
EX:- <TABLE BORDER=“1”>
<TR>
<TD> MY NAME IS</TD>
<TD> &NBSP</TD>
MY NAME IS

</TR>
</TABLE>
TABLE WITH CAPTION:-
 TABLE HEADING ARE CALLED CAPTION.
 CAPTION CAN BE PROVIDED TO A TABLE BY USING THE
<CAPTION>….</CAPTION>
 THIS PAIRED TAG APPEARS WITHIN THE <TABLE> TAG.
 THE TABLE CAPTION CAN BE MADE TO APPEAR ABOVE OR
BELOW THE TABLE STRUCTURE WITH THE HELP OF ATTRIBUTE
“ALIGN”
 ALIGN=“BOTTOM” => THE CAPTION PLACE IMMEDIATELY
BELOW THE TABLE.
 ALIGN=“TOP” => THE CAPTION PLACES IMMEDIATELY
ABOVE THE TABLE.
THE TABLE WITH HEADING:-
 <TH>…</TH> TAG IS USED TO SPECIFY THE HEADING OF
TABLE.
 THE CONTENT OF TABLE HEADER IS AUTOMATICALLY
CENTERED AND APPEARS IN BOLDFACE.
TABLE CELL THAT SPAN MORE THAN ONE ROWS/COLUMN
 IF YOU WANT TO MERGE 2 OR MORE CELLS OF A TABLE THEN WE HAVE TO
USE ROWSPAN AND COLSPAN ATTRIBUTE.
 THE VALUE OF THE ATTRIBUTE IS THE NO OF CELL YOU WANT TO MERGE TO
BECOME A SINGLE CELL.
ROWSPAN:-
 THE ROWSPAN ATTRIBUTE INSIDE<TH> OR <TD> TAG INSTRUCT THE
BROWSER TO MAKE THE CELL DEFINED BY THE TAG TO TAKE UP MORE THAN
ONE ROWS.
 EX =<TD ROWSPAN=3>
IT SPECIFIES 3 CELL MERGE IN ROW WISE

COLSPAN:-
 THIS COLSPAN ATTRIBUTE WORKS IN THE SAME WAY AS ROWSPAN
ATTRIBUTE EXCEPT THAT IT ALLOWS A CELL TO TAKE UP MORE THAN ONE
COLUMN. THE COLSPAN ATTRIBUTE CAN BE SET EQUAL TO THE NO OF
COLUMN THE CELL IS TO OCCUPY.
 THIS ATTRIBUTE IS USEFUL WHEN ONE ROWS OF THE TABLE NEED TO BE A
CERTAIN NO OF COLUMN WIDE
 EX=<TD COLSPAN=3>
IT SPECIFIES 3 CELL MERGE IN COLUMN WISE
ATTRIBUTE FOR TABLE TAG
• CELLPADDING:-
THIS ATTRIBUTE CONTROLS THE DISTANCE BETWEEN THE
DATA IN A CELL AND BOUNDARIES OF THE CELL. EX-CELL
PADDING=“2”
• CELLSPACING:-
THIS ATTRIBUTE CONTROLS THE SPACING BETWEEN 2
CELLS.
EX:-CELLSPACING=“2”
• ALIGN:-
HORIZONTAL ALIGNMENT OF CONTROLLED BY THE ALIGN
ATTRIBUTE. IT CAN BE SET TO LEFT, CENTER, RIGHT.
• WIDTH:-
SETS THE WIDTH TO A SPECIFIC NO OF PIXELS OR TO A
PERCENTAGE OF THE AVAILABLE SCREEN WIDTH. IF WIDTH
IS NOT MENTIONED THE DATA CELL ADJUSTED BASED ON
THE CELL DATA VALUE.
ADD A BACKGROUND COLOR OR A BACKGROUND IMAGE TO
A TABLE:-
TO ADD A BACKGROUND COLOR OF A TABLE USE THE
ATTRIBUTE “BGCOLOR” ATTRIBUTE IN <TABLE> TAG.
EX:-<TABLE BGCOLOR=“AQUAMARINE”>

HERE THE BACKGROUND COLOR OF TABLE IS


AQUAMARINE.
TO ADD AN IMAGE AS A BACKGROUND IMAGE THEN USE
THE ATTRIBUTE “BACKGROUND” ATTRIBUTE IN <TABLE>
TAG.
EX :- <TABLE BACKGROUND=“D\IMAGE.BMP”>

HERE THE IMAGE IMAGE.BMP WILL APPEAR AS THE


BACKGROUND IMAGE OF THE TABLE.
 SIMILARLY BY THE USE OF BGCOLOR AND BACKGROUND
ATTRIBUTE WE ADD A BACKGROUND COLOR AND IMAGE AS
BACKGROUND IMAGE TO ONE OR MORE TABLE CELLS.
• ALIGN THE CONTENT IN A TABLE CELL:-
• TO ALIGN THE CONTENT OF CELL WE HAVE TO
CELL THE ALIGN ATTRIBUTE
INSIDE<TD>…</TD>
• EX:- ALIGN=LEFT---CELL CONTENT ALIGN LEFT
SIDE
ALIGN=RIGHT--- --CELL CONTENT ALIGN
RIGHT SIDE OF CELL
ALIGN=CENTER--- --CELL CONTENT ALIGN
CENTER SIDE OF CELL

You might also like