| No | Tag | Attrib | Explanation | Example | |
| 1 | HTML | Mark the very start and very end of a html file. | |||
| 2 | HEAD | Mark the first part of the html file which contains the title. | <HEAD> <TITLE> My Homepage </TITLE> </HEAD> | ||
| 3 | TITLE | Title of the whole html page, displayed in the title bar of the web browser | <HEAD> <TITLE> My Homepage </TITLE> </HEAD> | ||
| 4 | BODY | Body of the html file, which contains all other tags and contents. | |||
| 5 | BODY | BACKGROUND = | Set the background image | <BODY BACKGROUND="image1.jpg"> | |
| 6 | BODY | BGCOLOR = | Set the background color | <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC"> | |
| 7 | BODY | TEXT = | Set the text color | <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC"> | |
| 8 | BODY | LINK = | Set the link color | <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC"> | |
| 9 | Hn | HTML has six headings, numbered 1 through 6, with 1 being the largest. Typically displayed in larger and/or bolder fonts. | <H1> Chapter 1. Introduction </H1> <H2> 1.1 What is html? </H2> | ||
| 10 | P | Mark one paragraph. </P> can be omitted if following is a paragraph too. | <P>Paragraph 1.</P> <P>Paragraph 2.</P> | ||
| 11 | P | ALIGN = | Align the paragraph | <P ALIGN="CENTER">Centered paragraph</P> | |
| 12 | ALIGN= | Can be LEFT, CENTER, RIGHT. Can be put into paragraph tag, heading tag, caption tag, etc. | <P ALIGN="CENTER">Centered paragraph</P> <H2 ALIGN="CENTER">Centered heading 2</H2> | ||
| 13 | UL | Mark the beginning and end of a unnumbered list | <UL> <LI>Item 1</LI> <LI>Item 2</LI> <LI>Item 3</LI> </UL> | ||
| 14 | LI | Each list item. No end tag is needed. | <UL> <LI>Item 1 <LI>Item 2 <LI>Item 3 </UL> | ||
| 15 | OL | Mark the beginning and end of a numbered list | <OL> <LI>Item 1 <LI>Item 2 <LI>Item 3 </OL> | ||
| 16 | DL | Mark the beginning and end of a definition list, which is used list terms and their descriptions. | <DL> <DT> Term 1 <DD>Description 1 <DT>Term 2 <DD>Description 2 </DL> | ||
| 17 | DT | Definition term | <DL> <DT> Term 1 <DD>Description 1 <DT>Term 2 <DD>Description 2 </DL> | ||
| 18 | DD | Definition description | <DL> <DT> Term 1 <DD>Description 1 <DT>Term 2 <DD>Description 2 </DL> | ||
| 19 | PRE | Enclose any paragraphs of text which is displayed exactly as it is typed -- normally spaces is ignored in html files. | <PRE> This is several lines of preformatted text. </PRE> | ||
| 20 | BLOCKQUOTE | Enclose any paragraphs of quoted text, which will be indented. | <BLOCKQUOTE> <P>Paragraph 1 <P>Paragraph 2 </BLOCKQUOTE> | ||
| 21 | BR | Put it at where you want a line break. There is no extra space between these lines as between paragraphs. | <P> Where do I begin<BR>to tell the story<BR>of how great love can be</P> | ||
| 22 | HR | Horizontal line as separator | <HR SIZE=4 WIDTH="50%"> | ||
| 23 | HR | SIZE | The thickness of the horizontal line | <HR SIZE=4 WIDTH="50%"> | |
| 24 | HR | WIDTH | The width of the horizontal line | <HR SIZE=4 WIDTH="50%"> | |
| 25 | DFN | For a word being defined. Typically displayed in italics. | <DFN>Characters to be defined</DFN> | ||
| 26 | EM | For emphasis. Typically displayed in italics. | <EM>Characters to be emphasized</EM> | ||
| 27 | CITE | For titles of books, films, etc. Typically displayed in italics. | <CITE>Name of the book</CITE> | ||
| 28 | CODE | For computer code. Displayed in a fixed-width font. | <CODE>Computer codes</CODE> | ||
| 29 | KBD | For user keyboard entry. Typically displayed in plain fixed-width font. | <KBD>Some characters</KBD> | ||
| 30 | SAMP | For a sequence of literal characters. Displayed in a fixed-width font. | <SAMP>Compiler error message</SAMP> | ||
| 31 | STRONG | For strong emphasis. Typically displayed in bold. | <STRONG>ATTENTION!</STRONG> | ||
| 32 | VAR | For a variable which will be replaced in real use by specific information. Typically displayed in italics. | Java souce code file looks like <VAR>filename</VAR>.java. | ||
| 33 | FONT | SIZE | <font size=?></font> | ||
| 34 | FONT | COLOR | |||
| 35 | |||||
| 36 | B | Bold type font | <B>ATTENTION!</B> | ||
| 37 | I | italic type font | <I>To be or not to be, that is the question.</I> | ||
| 38 | TT | typewriter type font. Fixed-width. | <T>Some characters</T> | ||
| 39 | < | Escape sequence for <. Case sensitive! | |||
| 40 | > | Escape sequence for >. Case sensitive! | |||
| 41 | & | Escape sequence for &. Case sensitive! | |||
| 42 | A | A link can be pointing to a html, image, animation or sound file. Format is <A HREF= "location"> displayed text> </A> | Refer to <A HREF= "http://java.sun.com/docs/books/ tutorial/">Java tutorial</A> for details. <A HREF="ani1.mov">See the movie…</A> <A HREF="sound1.wav">the music…</A> | ||
| 43 | A | HREF = | Mark the location of the target file. Could be a relative location or an URL. | Refer to <A HREF="http://java.sun.com/docs/books/tutorial/">Java tutorial</A> for details. | |
| 44 | A | NAME = | Insert a bookmark in a file, so that others can jump to here. | This is the end of our love story.<A NAME="Bottom"> | |
| 45 | A | # | A hyperlink which can jump to a specific bookmark in the same or another file | <A HREF="lovesto1.htm#Bottom">My love story… </A> | |
| 46 | A | MAILTO: | A hyperlink which can send email | <A HREF="MAILTO: frank_liu_silan@hotmail.com"> Contact me… </A> | |
| 47 | A | An image which can be used as hyperlink. Just replace the displayed text of a normal hyperlink with a normal image tag. | <A HREF="http://www.monash.edu.au"><IMG SRC= "monashlogo.jpg" WIDTH="100" HEIGHT="25" ALT="Monash Logo"></A> | ||
| 48 | IMG | SRC = | An in-line image | <IMG SRC="frank1.jpg"> | |
| 49 | IMG | WIDTH = | Width of the in-line image | <IMG SRC="frank1.jpg" WIDTH="30" HEIGHT="50"> | |
| 50 | IMG | HEIGHT = | Height of the in-line image | <IMG SRC="frank1.jpg" WIDTH="30" HEIGHT="50"> | |
| 51 | IMG | ALIGN = | Align the text with the image, can be "TOP", "CENTER", "BOTTOM". | <IMG SRC="frank1.jpg" WIDTH="30" HEIGHT="50" ALIGN="CENTER"> | |
| 52 | IMG | ALT = | Text substitute of the image | <IMG SRC="frank1.jpg" WIDTH="30" HEIGHT="50" ALT="Logo of Monash"> | |
| 53 | IMG | BORDER = | Define the thickness of the black image border | <IMG SRC="frank1.jpg" WIDTH="30" HEIGHT="50" ALT="Logo of Monash" BORDER="5"> | |
| 54 | IMG | An image which can be used as hyperlink. Just replace the displayed text of a normal hyperlink with a normal image tag. | <A HREF="http://www.monash.edu.au"><IMG SRC= "monashlogo.jpg" WIDTH="100" HEIGHT="25" ALT="Monash Logo"></A> | ||
| 55 | TABLE | Mark the start and end of a table | <TABLE>………</TABLE> | ||
| 56 | TABLE | BORDER = | Border thickness of a table | <TABLE BORDER="3">…..</TABLE> | |
| 57 | TABLE | WIDTH = | Width of a table cell. Supresses the width of cells on top of it. | ||
| 58 | TABLE | HEIGHT = | Height of a table cell. Supresses the height of cells on its left side. | ||
| 59 | TABLE | ALIGN = | Horizontal alignment of a cell. Can be LEFT, CENTER, RIGHT. | <TD ALIGN="CENTER">….</TD> | |
| 60 | TABLE | VALIGN = | Vertical alignment of a cell. Can be TOP, CENTER, BOTTOM. | <TD VALIGN="BOTTOM">…</TD> | |
| 61 | TABLE | COLSPAN = | Number of columns a cell spans | <TD COLSPAN="2">….</TD> | |
| 62 | TABLE | ROWSPAN = | Number of rows a cell spans | <TD ROWSPAN="3">….</TD> | |
| 63 | TABLE | NOWRAP | Turn off the word wrapping in a cell | <TD NOWRAP>….</TD> | |
| 64 | TABLE | CELLSPACING = | Sets amount of space between table cells | <table cellspacing = "5">…..</table> | |
| 65 | TABLE | CELLPADDING = | Sets amount of space between a cell's border and its contents | <table cellpadding = "5">….</table> | |
| 66 | TABLE | ||||
| 67 | CAPTION | The caption or title of the table. | <CAPTION ALIGN="CENTER">Employee Information Form</CAPTION> | ||
| 68 | TR | One row of a table | <TR>…….</TR> | ||
| 69 | TH | One header cell of a table. By default bold and centered. | <TH>……</TH> | ||
| 70 | TD | One data cell of a table. | <TD>….</TD> | ||
| 71 | FORM | Declaring a form | <FORM METHOD = post action = "http://localhost/servlet/Test">….</FORM> | ||
| 72 | INPUT | TYPE = TEXT | A text field. "Address" will be the name of the parameter sent back to the server, and the value will be user input. Default value will be "25 Grand Av.". | <INPUT TYPE=TEXT NAME=Address VALUE="25 Grand Av." SIZE="20" MAXLENGTH="20"> | |
| 73 | INPUT | TYPE = PASSWORD | Same as text. User input will be displayed as "*". | <INPUT TYPE=PASSWORD NAME=password VALUE="123ABC"> | |
| 74 | INPUT | TYPE = FILE | Display a text field and a “Browse” button, which will bring out a OS dialog to browse a file. The full path of this selected file will be sent as the parameter value, e.g. “c:\my documents \index.Html” | <INPUT TYPE=FILE NAME=FileLocation ACCEPT=image/*> | |
| 75 | INPUT | TYPE = RADIO | All radio controls with the same name ("Animal") belongs to the same group. | <INPUT TYPE=RADIO NAME=Animal VALUE=dog> | |
| 76 | INPUT | TYPE = CHECKBOX | If the checkbox is checked, the posted parameter will have a value of “on”. If it is not checked, the posted parameter list will simply not include this parameter. | <INPUT TYPE=CHECKBOX NAME=Horse> | |
| 77 | INPUT | TYPE = HIDDEN | This control is hidden on the html page and may be used for session tracking | <INPUT TYPE=HIDDEN NAME=HiddenParameter VALUE="Hidden value"> | |
| 78 | INPUT | TYPE = SUBMIT | Submit parameters of all controls in the form | <INPUT TYPE=SUBMIT NAME=Submit1 VALUE=Submit1> | |
| 79 | INPUT | TYPE = IMAGE | Use image as submit button. The (x, y) coordinate of the click point on the image will also be posted. | <INPUT TYPE=IMAGE NAME=ImageSubmit SRC="car.jpg" BORDER="0"> | |
| 80 | INPUT | TYPE = RESET | Reset controls in the form | <INPUT TYPE=RESET VALUE=Reset> | |
| 81 | TEXTAREA | Text area. | <TEXTAREA NAME=Name COLS=40 ROWS=10 WRAP=SOFT>Comment…</TEXTAREA> | ||
| 82 | SELECT | Without SIZE, it is a drop-down select. With SIZE, it is a scrolling select, and SIZE defines the number of items shown. When it is a scrolling select, you can also put MULTIPLE to allow multiple selection. | <SELECT NAME=Dept SIZE=2 MULTIPLE> <OPTION VALUE=Value1>Displayed1</OPTION> <OPTION VALUE=Value2>Displayed2</OPTION> <OPTION VALUE=Value3>Displayed3</OPTION> </SELECT> by :http://progtutorials.tripod.com |
0 comments:
Post a Comment