HTML is written in the form of labels (known as tags). An HTML file is a text file containing small markup tags, The markup tags tell the Web browser how to display the page, this file must have an htm or html file extension, the file
can be created using a simple text editor & can be executed on an Internet Browser.
Accordingly following are some of the widely used HTML tags, for a quick reference :
- <HTML>.....</HTML>:
Encloses the entire HTML document - <HEAD>.....</HEAD>: Encloses the head of the document.
- < BODY attribute1="..." attribute2="...">.....< /BODY >:
Encloses the main body of the document.
Attributes:
ALINK="..."--Specifies the color of the activated links in the page.
BACKGROUND="..."--Specifies an image to be tiled as background.
BGCOLOR="..."--Specifies the background color.
LINK="..."--Specifies the color of the links in the page.
TEXT="..."--Specifies the color of the text in the page.
VLINK="..."--Specifies the color of the followed links in the page. - <BASE href="http://some.network/file.html"> :
Specifies the base URL of the document. This is used when dereferencing relative URLs in the page. - <BASE href="http://some.net/file.html" TARGET="..." >: Also specifies the base target frame that all links will default to. See the LINK tag for possible values used in TARGET.
TARGET VALUES: "_BLANK, "_SELF, "_PARENT", "_TOP" - <META attribut1 attribute2 >: This element can be used to specify name/value pairs describing various
properties of the document. - <META HTTP-EQUIV="Keywords" CONTENT="keyword1, keyword2, ..."> : To specify keywords for certain search services to use
- <META HTTP-EQUIV="Description" CONTENT="Describe your site here....">: To specify a description of your page for certain search services.
- <LINK attribute=" HREF="..." > : Currently this tag is not widely supported, however in the future
browsers will use a list of these tags to generate a navigation bar for the site. Without browser support, this tag can still be useful for site maintenance.
Attributes:
REL="..."--Specifies the type of relationship of the link to this page. Possible values are: "home", "toc" (table of contents), "index", "glossary", "copyright", "bookmark", "up", "next", "previous", and "help".
REV="..."--Used instead of REL, this specifies a reverse relationship from this page to the link. Possible values are: "made" (author, set HREF=email address) and all the ones used in REL.
HREF="..."--Specifies the address of the link.
TITLE="..."--Specifies a title for the link - <Hn>...< /Hn> :
Makes the enclosed text a heading of various sizes where n is any number ranging from 1 to 6, and 1 creates the biggest heading while 6 creates the smallest. - <IMG attribute1 attribute2> : Places an inline image into the document.
Attributes:
SRC="..."--Specifies the URL of the image.
USEMAP="#map1" --Tells the browser that the image is a client-side clickable image map defined under the name "map1".
ALT="..."--Specifies a text string to be displayed on browsers that do not support inline images.
BORDER="..."--Specifies the width of the border drawn around the image. If BORDER is set to "0", there will be no border even around pictures that are links.
ALIGN="..."--Specifies the alignment of the image.
VSPACE="..."--Specifies the space left between the edge of the image and the items above or below it.
HSPACE="..."--Specifies the space left between the edge of the image and the items to the left or right of it.
WIDTH="..."--Specifies the width of the image. If the width is not the actual width, the image is scaled to fit.
HEIGHT="..."--Same as above ,except it specifies the height of the image. - <MAP attribute>...< /MAP> : Specifies a collection of hot spots that define a client-side image map. The AREA tag can be used inside to define the hot spots.
Attributes:
NAME="..."--Specifies the name of the map so that it can be referred to later. - <AREA attribute1 attribute2>...< /AREA>: Specifies the shape and size of a hot spot to be used in the definition of a client-side image map. Used inside the MAP tag.
Attributes:
SHAPE="..."--Specifies the shape of the hot spot. Possible values are RECT, RECTANGLE, CIRC, CIRCLE, POLY, or POLYGON.
COORDS="..."--Specifies the coordinates that define the hot spot's position. Two pairs of coordinates are needed for RECT, three or more pairs for POLY, and one pair of coordinates and a radius for CIRC.
HREF="..."--Specifies the URL that this hot spot points to.
NOHREF--Indicates that this hot spot points to nothing.
TARGET="..."--Specifies which window the link will be loaded into. - Places a scrolling text marquee into the document.
Attributes:
ALIGN="..."-- Possible values of "TOP", "MIDDLE", or "BOTTOM". Specifies the alignment of the text around the marquee with respect to the marquee.
BEHAVIOR="..."--Possible values of "SCROLL" (default), "SLIDE", or "ALTERNATE". Specifies the behavior of the marquee text. "SCROLL" is the default, "SLIDE" makes the text start from off the screen and then stick, "ALTERNATE" makes the text alternate back and forth repeatedly.
BGCOLOR="..."--Specifies the background color of the marquee.
DIRECTION="..."--Possible values are "LEFT" (default) or "RIGHT". Specifies the direction for the text to scroll.
HEIGHT="..."--Specifies the height of the marquee in number of pixels or % of screen.
HSPACE="n"--Specifies the left and right margins of the outside of the marquee in pixels.
LOOP="n"--Specifies the number of times the marquee will loop. Values of "-1" or "INFINITE" make the marquee loop indefinitely. - <SCRIPT attribute> ...script statements... < /SCRIPT> : Encloses scripting language statements to be executed by the browser.
Attributes:
LANGUAGE="..."--Specifies which language is being used in the script such as "VBScript" or "JavaScript".
SRC="..."--Specifies the location of a file containing the script. This can be used if you don't want the code to be on the same HTML file. - <NOSCRIPT> ... < /NOSCRIPT> : Encloses anything you want displayed by browsers that do not support inline scripts. These go inside the SCRIPT tags.
- <A attribute="...">...< /A> : When used with the HREF attribute, the enclosed text and/or graphic
becomes a link to another document or anchor. When used with the NAME attribute, the enclosed text and/or graphic becomes an anchor.
Attributes:
HREF="..."--Specifies the URL of the document to be linked to.
NAME="..."--Specifies the name of the anchor you are creating.
onClick="--Specifies a script to be activated when the mouse is clicked.
onMouseOver="--Specifies a script to be activated when the mouse is moved over the link.
REL="..."--Specifies a relative relationship.
TARGET="..."--Specifies which window the link will be loaded into. The target can be a name of a frame that you specified in the FRAME tag or one of the following:
Values:
"_blank"--Loads the link into a new blank window.
"_parent"--Loads the link into the immediate parent of the document the link is in.
"_self"--Loads the link into the same window. (default)
"_top"--Loads the link into the full body of the current window.
TITLE="..."--Specifies the title that appears when the link is selected, but not yet clicked. - Creates a table that can include any number of rows.
Attributes:
BORDER="..."--Specifies the width of the border around the table. If set to 0, there will be no border.
BACKGROUND="..."--Specifies the address of an image to be tiled as background.(IE)
BGCOLOR="..."--Specifies the background color of the table.
BORDERCOLOR="..."--Specifies the border color of the table.
BORDERCOLORLIGHT="..."--Specifies the lighter color used in creating the 3D borders independently.(IE)
BORDERCOLORDARK="..."--Specifies the darker color used in creating the 3D borders independently.(IE)
WIDTH="..."--Specifies the width of the table on the page.
CELLSPACING="..."--Specifies the amount of space between the cells in the table.
CELLPADDING="..."--Specifies the amount of space between the edges of the cell and the text inside.- <TR attribute1="..." attribute2="...">...< /TR> : Specifies a table row. It can enclose the table heading and table data.
Attributes:
ALIGN="..."--Specifies the horizontal alignment of the row contents. Possible values are LEFT, RIGHT, and CENTER.
BGCOLOR="..."--Specifies the background color for the row.
BORDERCOLOR="..."--Specifies the border color of the row.
BORDERCOLORLIGHT="..."--Specifies the lighter color used in creating the 3D borders independently.(IE)
BORDERCOLORDARK="..."--Specifies the darker color used in creating the 3D borders independently.(IE)
VALIGN="..."--Specifies the vertical alignment of the row
contents. Possible values are TOP, MIDDLE, BOTTOM, and BASELINE.
HEIGHT="..."--Specifies the height of the cell. - <TH attribute1="..." attribute2="...">...< /TH>: Makes the cell a table heading.
Attributes:
ALIGN="..."--Specifies the horizontal alignment of the cell contents. Possible values are LEFT, RIGHT, and CENTER.
NOWRAP--Prevents word wrapping within the cell
BGCOLOR="..."--Specifies the background color for the cell.
BACKGROUND="..."--Specifies the address of an image to be tiled as background.(IE)
BORDERCOLOR="..."--Specifies the border color of the cell.
VALIGN="..."--Specifies the vertical alignment of the cell contents. Possible values are TOP, MIDDLE, BOTTOM, and BASELINE.
ROWSPAN="..."--Specifies the number of rows the cell will span.
COLSPAN="..."--Specifies the number of columns the cell will span.
WIDTH="..."--Specifies the width of the cell.
HEIGHT="..."--Specifies the height of the cell. - <TD attribute1="..." attribute2="..."> : These go inside the TR tags and they define the data in a cell. End tag may be used.
Attributes:
BACKGROUND="..."--Specifies the address of an image to be tiled as background. (IE)
BGCOLOR="..."--Specifies the background color for the individual cell.
BORDERCOLOR="..."--Specifies the border color of the cell.
ALIGN="..."--Specifies the horizontal alignment of the cell contents. Possible values are LEFT, RIGHT, and CENTER.
NOWRAP--Prevents word wrapping within the cell
VALIGN="..."--Specifies the vertical alignment of the cell contents. Possible values are TOP, MIDDLE, BOTTOM, and BASELINE.
ROWSPAN="..."--Specifies the number of rows the cell will span.
COLSPAN="..."--Specifies the number of columns the cell will span.
WIDTH="..."--Specifies the width of the cell.
HEIGHT="..."--Specifies the height of the cell.
- <TR attribute1="..." attribute2="...">...< /TR> : Specifies a table row. It can enclose the table heading and table data.
- <FORM attribute1="..." attribute2="...">.....< /FORM>: Specifies a form. Forms can be used to send user input to the server in the form of NAME/VALUE pairs.
Attributes:
ACTION="..."--Specifies the address to be used in carrying out the action of the form. Usually the address of the CGI file. You can also specify a mailto address to have the contents of the form emailed to you instead of getting passed to the server. (in future browsers)
METHOD="..."--Specifies the method used by the server in sending the form information. Possible values are POST or GET. When GET is used, the server simply appends the arguments to the end of the action address. With POST, the information is sent as an HTTP post transaction.
TARGET="..."--Specifies which window the result of the form will be loaded into. The target can be a name of a frame that you specified in the FRAME tag or one of the following:
Values:
"_blank"--Loads the result into a new blank window.
"_parent"--Loads the result into the immediate parent of the document the form is in.
"_self"--Loads the result into the same window. (default)
"_top"--Loads the result into the full body of the current window.
ENCTYPE="..."--For future browser. Specifies the type of encoding to use on the form information.- <INPUT attribute1="..." attribute2="...">: Specifies a control or input area for a form, from which a NAME/VALUE pair will be returned to the server.
Attributes:
ALIGN="..."--If the TYPE is IMAGE, then this specifies the alignment of the surrounding text with the image. Possible values are TOP, MIDDLE, BOTTOM, LEFT, or RIGHT.
CHECKED--Use this attribute in a RADIO or CHECKBOX type, and it will be pre-selected when the form loads.
MAXLENGTH="..."--Specifies the maximum number of characters that can be entered in a text input.
NAME="..."--Specifies the name of the control or input area. (Part of the NAME/VALUE pair)
SIZE="..."--Specifies the size of the text entry area that is displayed by the browser.
SRC="..."--If the TYPE is IMAGE, then this specifies the address of the image to be used.
VALUE="..."--Specifies the value to be submitted along with the corresponding name(Part of the NAME/VALUE pair). Specifies the default text string for TEXT. For RESET and SUBMIT, this specifies
the text string to be displayed on the 3-D button.
TYPE="..."--Specifies the type of control being used.
Possible types:
CHECKBOX--Creates a checkbox. If the user checks it, the corresponding name/value pair is sent to the server.
HIDDEN--Nothing is displayed by the browser, but the information is still sent to the server.
IMAGE--Like the SUBMIT type, you can have the form sent immediately when the user clicks on an image. Along with the normal information, when a from is submitted by clicking on an image, the
coordinates of the clicked point (measured in pixels from the upper-left corner of the image) are also sent.
PASSWORD--Creates a single line entry text box just like the TEXT type, however, user input is not echoed on the screen.
RADIO--Creates a radio list of alternatives of which only one can be selected. Each alternative must have the same name, but different values can be assigned to each.
RESET--Creates a 3-D button that clears the entire form to original values when clicked. You can give the button a name by using the VALUE attribute.
SUBMIT--Creates a 3-D button that submits the form when clicked. You can give the button a name by using the VALUE attribute.
TEXT--Creates a single line text entry box. You can specify the size of the text box by using the SIZE attribute. - <SELECT attribute1="..." attribute2="...">< /SELECT>: Creates a drop-down list of items. The list items are defined by the OPTION tags placed inside the opening and closing SELECT tag.
Attributes:
MULTIPLE--Specifies that multiple items may be selected.
NAME="..."--Specifies the name of the list(Part of the NAME/VALUE pair).
SIZE="..."--Specifies how many items should be visible. - <OPTION value="...">item Specifies an item in the drop down list. Placed within the opening
and closing SELECT tags. Any text following the OPTION tag is what the user will see in the list.
VALUE="..."--Specifies the value to be returned (Part of the NAME/VALUE pair).
SELECTED--This item will already be highlighted when the page loads. - < TEXTAREA attribute1="..." attribute2="...">...< /TEXTAREA> :
Creates a multi-lined text entry box. Any text placed in between the tags is used as the default text string that is displayed when the page is loaded.
Attributes:
COLS="..."--Specifies how wide the text box will be.
ROWS="..."--Specifies how high the text box will be.
NAME="..."--Specifies the name of the text box for use by the program that is processing the form.
WRAP="..."--Specifies how text will wrap. Possible values are "HARD", "SOFT", or "NONE".
- <INPUT attribute1="..." attribute2="...">: Specifies a control or input area for a form, from which a NAME/VALUE pair will be returned to the server.
- <B>...< /B>: Boldfaces the enclosed text.
- <BLOCKQUOTE >.....< /BLOCKQUOTE>: Encloses a long quote. Both the left and right margins are indented.
- <BR> : Inserts a line break.
- <CENTER >.....< /CENTER> : Centers the enclosed elements. This tag will center everything including images, text, tables, forms, etc.
- <DIV ALIGN=" >...< /DIV> :Specifies the alignment of the enclosed elements. Can be used to divide a document into sections that are aligned differently. In future browsers, more attributes will probably be supported.
Attributes:
ALIGN="..."--Sets the alignment of the division. Possible values are "center", "right", or "left". - <EM>...< /EM>: Emphasis on the enclosed text (Italics).
- <FONT attribute=" >...< /FONT>: Sets the font properties for the enclosed text.
Attributes:
SIZE="..."--Sets the size of the font to any number between 1 and 7 with 3 being default. relative sizes also work, e.g. SIZE=+2 .
COLOR="..."--Specifies the color of the font.
FACE="..."--Specifies the face of the font. A list can be defined (separated by commas) and the browser will use the first one available on that computer. - <HR> :Inserts a horizontal line.
Attributes:
SIZE="..."--Specifies the thickness of the line.
COLOR="..."--Specifies the color of the line.(IE)
WIDTH="..."--Specifies the length of the line as a percentage of the screen.
ALIGN="..."--Specifies the alignment of the line: RIGHT, LEFT, or CENTER.
NOSHADE--The line is drawn solid. - <I>...< /I>:
The enclosed text is italics. - <P attribute>...< /P>: Designates the enclosed text as a plain paragraph. The end tag is
optional.
Attributes:
ALIGN="..."--Specifies the alignment for the paragraph. Possible values are "center", "left", or "right". - <STRONG>...< /STRONG>:
Stronger emphasis on the enclosed text (bold). - <SUB>...< /SUB>:
Renders the enclosed text in subscript. - <SUP>...< /SUP>: Renders the enclosed text in superscript.
- <U>...< /U>: The enclosed text in underlined. Try to avoid this since underlined text
usually indicates a link
Mentioned above were frequently used HTML Tags for designing HTML based web pages. Visit http://html-reference.blogspot.com/ for a brief introduction about HTML.
No comments:
Post a Comment