Sie sind auf Seite 1von 15

1

PRACTICAL HAND-BOOK HTML


BHARAT RAJ

HTML HYPER TEXT MARKUP LANGUAGE STRUCTURE OF HTML : <HTML> TAG TELLS THE BROWSER THAT THE MATTER BETWEEN THESE TWO TAGS IS AN HTML DOCUMENT. <html> Html Source Code </html>

<HEAD > TAG CONTAINS TITLE OF PAGE CONTAINS <META> TAG <html> <head> Title tag </head> </html>

<TITLE> TAG REPRESENT TITLE OF THE PAGE TITLE OF PAGE IS A VITAL KEYWORD TO SEARCH IT. <html> <head><title>This is title</title></head> </html>

<META TAG> PROVIDES EXTRA INFORMATION ABOUT DOCUMENT PROVIDES KEYWORDS FOR PAGE SEARCH <head> <meta http-equiv=Author content=RAJ> <meta name=document-type content=HTML Document> </head>

<BODY> TAG

MAIN BODY OF THE PAGE ATTRIBUTE VALUES BACKGROUND VLINK ALINK LINK TOPMARGIN LEFTMARGIN BGCOLOR PATH OF IMAGE FILE COLOR HEX CODE COLOR HEX CODE COLOR HEX CODE PIXELS / % PIXEL / %

UTILITY PROVIDES BACKGROUND IMAGE VISITED LINKS COLOR COLOR ON CLICK NORMAL LINK COLOR MARGIN FOR BODY MARGIN FOR BODY BACKGROUND COLOR SETS BACKGROUND PICTURE STILL

COLOR HEX CODE BGPROPERTIES FIXED

<html> <head><title>My Page</title></head> <body> This is Body of Page </body> </html>

HEADING FOR WEBPAGE ATTRIBUTE VALUES ALIGN RIGHT, LEFT, CENTER

UTILITY ALIGNMENT OF HEADING

<html> <head><title>Headings</title></head> <body> <h1> Heading Size 1</h1> <h2>Heading Size 2</h2> <h3> Heading Size 3</h3> <h4> Heading Size 4</h4> <h5> Heading Size 5</h5> <h6> Heading Size 6</h6> </body> </html>

<P> TAG PARAGRAPH TAG STARTS A PARAGRAPH AND ENDS ATTRIBUTE VALUES UTILITY ALIGN RIGHT, LEFT, CENTER ALIGNMENT

<html> <head><title>Examples</title></head> <body> <p align=center> This is a Centered Paragraph.</p> </body> </html>

<HR> TAG HORIZONTAL LINE ATTRIBUTE ALIGN COLOR WIDTH SIZE NOSHADE VALUES RIGHT, LEFT, CENTER COLOR CODE PIXELS OR % PIXELS OR % UTILITY ALIGNMENT OF HEADING COLOR OF LINE LINE WIDTH LINE HEIGHT OR THICKNESS OF LINE IT IS A KEYWORD ADDING IT TO TAG WILL CONVERT A SOLID LINE

<html> <head><title>Examples</title></head> <body> Line Starts from here... <hr color=red width=100% noshade> </body> </html>

SOME TEXT FORMATTING TAGS TAG UTILITY <B>TEXT</B> <I>TEXT</I> <U>TEXT</U> <SUB>TEXT</SUB> <SUP>TEXT</SUP> BOLD ITALIC UNDER LINE SUBSCRIPT SUPERSCRIPT

<STRONG>TEXT</STRONG> LIKE BOLD <BIG>TEXT</BIG> <SMALL>TEXT</SMALL> <CENTER></CENTER> <STRIKE></STRIKE> FONT SIZE + FONT SIZE CENTERS ANY HTML ELEMENT STRIKE THROUGH TEXT

<FONT> TAG CHANGES FONT PROPERTIES ATTRIBUTE FACE COLOR SIZE VALUES FONT NAME COLOR CODE PIXEL UTILITY NAME OF FONT COLOR OF FONT SIZE OF FONT

<BASEFONT> TAG SETS DEFAULT FONT SETTING. ATTRIBUTE FACE COLOR SIZE VALUES FONT NAME COLOR CODE PIXEL UTILITY NAME OF FONT COLOR OF FONT SIZE OF FONT

<html> <head><title>Examples</title></head> <body> <basefont color=blue size=4 face=Tahoma> It is Default Setting Font <font size=2 color=red face=arial> Font settings Changed </font> It is Default Settings Font </body> </html>

SPECIAL CHARACTER CODE DISPLAYS &LT; &GT; &NBSP; &AMP; < > SPACE &

LISTS UNORDERED LIST( BULLETS) <UL> TAG ATTRIBUTE VALUES TYPE DISC, SQUARE, CIRCLE ORDERED LIST( NUMBERINGS) <OL> TAG ATTRIBUTE VALUES TYPE START

UTILITY SHAPE OF BULLETS

UTILITY TYPE OF NUMBERINGS STARTING NUMBER OF LIST

A, A, I, I, 1 ANY NUMBER

<html> <head><title>Examples</title></head> <body> Unordered List <ul type=square> <li>one <li>two <li type=circle>type changed </ul> </body> </html> ORDERED LIST <OL> TAG <html> <head><title>Examples</title></head> <body> Ordered List <ol start=2 type=A> <li>one <li>two <li >three </ol> </body> </html>

<DL> TAG DEFINITION LIST <html> <head><title>Examples</title></head> <body> <dl> <dt>Term 1 <dd>Definition <dt>Term 2 <dd>Definition </dl> </body> </html>

HYPER LINKS <A> TAG HYPER LINKS TWO TYPES INTERNAL: LINK TO SAME PAGE SECTION EXTERNAL: LINK TO ANOTHER PAGE <A> TAG ATTRIBUTE HREF NAME TARGET TITLE

VALUES PATH OR URL OF PAGE NAME FRAME NAME OR _BLANK TEXT STRING

UTILITY PATH OF PAGE TO LINK NAME OF SECTIONS(IF SPECIFIC POSITION IS REQUIRED) TARGET WINDOW OF PAGE TOOL TIP OF LINK

NOTE : TITLE ATTRIBUTE CAN BE USED WITH MANY CONTAINER HTML ELEMENTS(PAIRED ELEMENTS) <html> <head><title>Examples</title></head> <body> External Linking <a href=http://www.gmail.com target=_blank>Sign in to Gmail</a> <br> <hr> Internal Linking<br> <a href=#defin>Define it</a> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br>

<a name=defin>Definition : This is a Defintion.<a><br> External Link to a Specific Position of Page: <a href=http://en.wikipedia.org/wiki/Global_warming#Greenhouse_gases><br> Green House Gases</a> </body> </html>

URL : UNIFORM RESOURCE LOCATOR FORMAT OF URL (PROTOCOL://WEBSITE/PAGE#SEGMENT)

TABLES <TABLE> TAG CREATES TABLE ATTRIBUTE BORDER CELLPADDING CELLSPACING BORDERCOLOR BORDERCOLORDARK

VALUES PIXEL PIXEL PIXEL COLOR CODE COLOR CODE

UTILITY BORDER THICKNESS CELLSIZE GAPE BETWEEN TWO CELLS BORDER COLOR SHADOW BORDER COLOR

BORDERCOLORLIGHT COLOR CODE ALIGN WIDTH HEIGHT

UPPER SIDE BORDER COLOR

CENTER,RIGHT,LEFT ALIGNMENT PIXEL, % PIXEL, % WIDTH OF TABLE HEIGHT OF TABLE

<html> <head><title>Examples</title></head> <body> <table> <caption aling=bottom> Annual Report </caption> <th>table heading </th><th>table heading 2</th> <tr> <td>0,0</td> <td>0,1</td> </tr> <tr> <td>1,0</td> <td>1,1</td> </tr> <\table> </body> </html>

<CAPTION> TAG DEFINE THE CAPTION OF TABLE ATTRIBUTE VALUES ALIGN RIGHT, CENTER, LEFT, BOTTOM,TOP

UTILITY ALIGNMENT FOR CAPTION

<TD> TAG THESE ATTRIBUTES SETS INDIVIDUAL SETTINGS FOR A CELL CAN BE USED WITH <TH> AND <TR> ATTRIBUTE VALUES UTILITY BORDER BORDERCOLOR BORDERCOLORDARK PIXEL COLOR CODE COLOR CODE BORDER THICKNESS BORDER COLOR SHADOW BORDER COLOR UPPER SIDE BORDER COLOR

BORDERCOLORLIGHT COLOR CODE ALIGN

CENTER,RIGHT,LEFT ALIGNMENT

WIDTH HEIGHT ROWSAPN COLSPAN BGCOLOR BACKGROUND VALIGN

PIXEL, % PIXEL, % NUMBER NUMBER COLOR CODE PATH OF IMAGE RIGHT ,CENTER,LEFT

WIDTH OF TABLE HEIGHT OF TABLE ROW MERGED COLOUMN MERGED BACKGROUND COLOR BACKGROUND PICTURE VERTICAL ALIGNMENT

<IMAGE> TAG <IMG> TAG ATTRIBUTE BORDER SRC WIDTH HEIGHT ALIGN HSAPCE VSPACE ALT USEMAP VALUES SIZE PATH OF IMAGE FILE PIXEL ,% PIXEL, % RIGHT,CENTER, LEFT PIXEL PIXEL TEXT STRING #MAPNAME UTILITY SIZE OF BORDER OF IMAGE IMAGE FILE PATH OR URL WIDTH OF IMAGE HEIGHT OF IMAGE ALIGNMENT OF IMAGE FILE HORIZONTAL SPACE VERTICAL SPACE ALTERNATIVE TEXT FOR IMAGE IF FILE IS MISSING MAPE NAME

IMAGE MAPS IS A AREA OF IMAGE WHICH IS HYPERLINKED NOT FULL IMAGE SHAPES USED TO MAP A IMAGE KEYWORD RECT CIRCLE POLY VALUES X,Y,X,Y X,Y,RADIUS X,Y,X,Y,N,N

IMAGE MAP <MAP> TAG ATTRIBUTE: NAME =NAME OF MAP CREATES MAPS <MAP> </MAP> TAG CREATES ALL LINKS FOR IMAGE DIFFERENT SHAPES CAN BE INCLUDED FOR A MAP SYNTAX: <html> <head><title>Examples</title></head> <body> <map name=mymap > <area href=http://www.gmail.com border=2> </map> shape=rect coords= 20,20,100,100

<img src= alt=this is a image width=400 height=400 usemap=#mymap> </body> </html>

ATTRIBUTES OF <AREA> TAG ATTRIBUTE HREF SHAPE ALT COORDS VALUES LINK URL UTILITY URL

RECT,CIRCLE,POLY DEFINES AREA SHAPE TEXT STRING X,Y,CORDINATES ALTERNATIVE TOOLTIP COORDINATES ACCORDING SHAPE

FRAMES FRAMES IN WEBPAGE <FRAMESET> TAG SETS FRAMES FOR PAGE NOTE : <BODY> TAG IS NOT USED IN <FRAMESET> SOURCE CODE FILE ATTRIBUTES: ATTRIBUTE VALUES UTILITY ROWS SPILT WINDOW IN ROWS PIXEL,PIXEL,%,* COLS SPILT WINDOW IN COLS PIXEL,PIXEL,%,* (*) IS USED TO DEFINE REMINDER PART OF WINDOW FRAMESET CAN BE NESTED <html> <head><title>Examples</title></head> <frameset cols=20%,*> <frame src=> <frame src=> </frameset> </html> <FRAME> TAG SETTINGS FOR EACH FRAME ATTRIBUTE VALUES SRC NAME SCROLLING NORESIZE MARGINWIDTH PIXEL, % URL TEXTSTRING YES,NO

UTILITY URL OF PAGE WHICH WILL BE LOADED NAME OF FRAME SETS THAT LOADED PAGE CAN BE SCROLLED OR NOT KEYWORD: CREATES FIXED FRAME MARGIN BETWEEN VERTICAL BORDERS OF THAT FRAME MARGIN BETWEEN HORIZONTAL BORDERS FRAME BORDER SETTING(DISPLAY OR NOT) COLOR OF BORDER

MARGINHEIGHT PIXEL, % FRAMEBORDER BORDERCOLOR 1,0 COLOR CODE

NESTING THE FRAMES HINT 1 : FIRST DIVIDE THAN LOAD

HINT 2 : TO DETERMINE WHICH WILL BE DIVIDED FIRST( ROW OR COLOUMN) DETERMINE WHICH IS LIKE A COMPLETE LINE JOINING BOTH ENDS OF WINDOW PAGE1 PAGE2 Row line is complete line so first PAGE3 divide rows

<html> <head><title>Examples</title></head> <frameset rows=50%,50%> <frameset cols=50%,50%> <frame src= name=page1> <frame src= name=page2> </frameset> <frame src= name=page3> </frameset> </html>

PAGE1

PAGE2 PAGE3

Column line is a complete line so first divide in columns

<html> <head><title>Examples</title></head> <frameset cols=50%,50%> <frame src= name=page3> <frameset rows=50%,50%> <frame src= name=page1> <frame src= name=page2> </frameset> </frameset> </html>

<IFRAME> TAG CREATES INLINE FRAMES (SECTION OF PAGE WHERE ANOTHER PAGE OR IMAGE CAN BE LOADED ATTRIBUTE VALUES UTILITY SRC NAME SCROLLING MARGINWIDTH URL TEXTSTRING YES,NO PIXEL, % URL OF PAGE WHICH WILL BE LOADED NAME OF FRAME SETS THAT LOADED PAGE CAN BE SCROLLED OR NOT MARGIN BETWEEN VERTICAL BORDERS OF THAT FRAME MARGIN BETWEEN HORIZONTAL BORDERS FRAME BORDER SETTING(DISPLAY OR NOT) COLOR OF BORDER

MARGINHEIGHT PIXEL, % FRAMEBORDER BORDERCOLOR ALIGN 1,0 COLOR CODE

CENTER,RIGHT,LEFT ALIGNMENT OF FRAME

Das könnte Ihnen auch gefallen