resources image

Module 1 - HTML Basics

HTML Tags


Web Design

HTML Tags

A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z


1. !: Comment Tag
Syntax
Purpose
<!--Form Starts Here-->
The ! tag provides the programmer with the ability to place comments with the document for troubleshooting purposes. The ! is not recognized by the browsers; therefore, it is ignored.
2. A: Anchor Tag
Syntax
Purpose
<A HREF="http://www.heald.edu">
The anchor tag is used to identify a hypertext link. This link can be to another web site, another place on the existing page, or used to open an object such as a video clip or music file. The actual link can be made up of text, an image, or a combination of both. The A tag must have either the HREF or Name attribute used in the syntax.
Attributes HREF:
<A HREF="http://www.heald.edu">
The HREF attribute refers to one of the following: an internal or external bookmark within a document, an internal or external URL, or an image file.

NAME:
<A NAME="#Anchor">
The NAME attribute refers to bookmark (hotlink) within the current document.

3. B: Bold
Syntax
Purpose
<B>Welcome To My Web Page</B>
The B tag allows you to bold whatever text is placed in between the open and closed tags.
4. BGSOUND SRC: Background Sound Source
Syntax
Purpose
<BGSOUND SRC="sounds/celebrate.mid">
The BGSOUND SRC tag allows the programmer to specify a background sound (usually a midi or wave file) file location to be played in the current html document.

This tag is only recognized by the Internet Explorer browser.

Attributes LOOP:
<BGSOUND SRC="sounds/celebrate.mid" LOOP=INFINITE>
The LOOP attribute allows the programmer to determine the number of times the sound file will rewind and play. The value for this attribute can either be a number (e.g. 5 for loop five times) or the word INFINITE to play the file continuously as long as the document is open.
5. BLINK
Syntax
Purpose
<BLINK>Welcome To My Home Page</BLINK>
The BLINK tag causes specified text to blink.

This tag is only recognized by the Internet Explorer browser.

6. BLOCKQUOTE
Syntax
Purpose
<BLOCKQUOTE>Indent this text on both sides</BLOCKQUOTE>
The BLOCKQYOTE tag indents specified text on both sides to make it stand out.
7. BODY
Syntax
Purpose
<BODY>Place your HTML document here</BODY>
Everything you wish to be visible by the user goes between the BODY tags. The programmer also uses the BODY tag to specify desired document attributes such as text color, link colors, background color/image, and margins.
Attributes ALINK: Active Link
<BODY ALINK="BLUE">
This attribute determines the color of a link when it is activated (mouse button is pressed, but not released).

BACKGROUND: Background Image
<BODY BACKGROUND="images/mountains.jpg">
This attributes specifies the location of the file that the programmers wishes to uses as the background. Only jpg or gif files may be used with this attribute.

BGCOLOR: Background Color
<BODY BGCOLOR="RED"> or <BODY BGCOLOR = #ff000000">
This attribute determines the color of the document's background. The programmer can either use the color's proper name, the hex value preceded by the # sign, or the RGB value also preceded by the # sign.

BGPROPERTIES: Background Properties
<BODY BACKGROUND="images/mountains.jp" BGPROPERTIES="FIXED">
This attribute causes the background image not to scroll with the rest of the document.

LEFTMARGIN:
<BODY LEFTMARGIN="0">
This attribute causes the browser to set the left margin. The margin is measured in pixels.

LINK: Non-Visited Link
<BODY LINK="RED">
This attribute determines the color of the links that have not yet been visited.

TEXT:
<BODY TEXT="WHITE">
This attribute determines the color of the text.

TOPMARGIN:
<BODY TOPMARGIN="2">
This attribute causes the browser to set the top margin. The margin is measured in pixels.

VLINK: Visited Link
<BODY VLINK="GREEN">
This attribute determines the color of the links that have been visited.

8. BR: Break
Syntax
Purpose
<BR>Short Sentence or Paragraph</BR>
The BR tag inserts a line break to help separate text and graphics.
Attributes CLEAR:
<BR CLEAR=LEFT>
The CLEAR attribute inserts a break clear of any graphics or text that may be in its path. Value can be Left, Right, All, or None.
9. CAPTION
Syntax
Purpose
<CAPTION>Place Title For Your Table Here</CAPTION>
The CAPTION tag is used to title a table.
Attributes VALIGN: Alignment
<CAPTION ALIGN=TOP>
The VALIGN attribute aligns the Caption to either the top or bottom of the table.
10. CENTER
Syntax
Purpose
<CENTER>Welcome To My Web Page</CENTER>
The CENTER tag allows you to center whatever text is placed in between the open and closed tags.
11. DL: Definition List
Syntax
Purpose
<DL>Place Terms and Definitions Here</DL>
The DL tag allows the programmer to develop lists where the initial text is left aligned and the relative definition is indented.
Attributes COMPACT
<DL COMPACT>
Lists the terms in compact form
Sub Tags DD: Description
<DD>Description I
Indents the description from the Term

DFN: Defining Instance
<DFN>Description I</DFN>
Indents the definition of term and used for multiple definitions.

DT: Definition Term
<DT>Definition Term I
Places the term to define on the left edge

Example: <DL>
<DT>Happy
<DD>To Be Filled with Joy
<DT>SAD
<DD>To Be Filled with Feelings of Depression
</DL>
12. FONT
Syntax
Purpose
<FONT FACE="Times New Roman" COLOR="BLUE" SIZE=1>
Allows the programmer to determine the font, font color, and font size..
Attributes COLOR:
<FONT COLOR="RED"> or <FONT COLOR="#ff0000">
This attribute changes the font color. Colors can be entered either by their proper name or by enter the HEX or RGB color code.

FACE
<FONT FACE="CG TIME,New Times Roman,Times">
This attribute changes the font viewed within the browser. Most browsers allow you to identify three possible font types in case the computer viewing your document doesn't have the first font specified. If this is true, it will automatically move to the second font specified, etc. If none of the fonts specified in the FACE attribute are recognized, the browser will display your text in its default font style.

SIZE:
<FONT SIZE=3>
This attribute changes the font size. You may use a number between 1 and 7, both positive and negative.

13. FRAME
Syntax
Purpose
<FRAME NAME="TOP">
The FRAME tag allows the programmer to develop frames as a way to help divide screen information. This tag is used in conjunction with the FRAMESET tag.
Attributes FRAMEBORDER
<FRAME FRAMEBORDER="YES">
Determines whether or not the frame will have a border or not.

FRAMESPACING
<FRAME FRAMESPACING="5">
Determines the number of spaces between frames.

MARGINHEIGHT
<FRAME MARGINHEIGHT="2">
Determines the amount of space, in pixels, that text will be separated by the top and bottom frame edges.

MARGINWIDTH
<FRAME MARGINWIDTH="2">
Determines the amount of space, in pixels, that text will be separated by the left and right frame edges.

NAME
<FRAME NAME="TOP">
Allows the user to define the name of each frame so it may be targeted by hyperlinks.

NORESIZE
<FRAME NORESIZE>
Allows the programmer to set the frame so that it may not be resized by the viewer.

SRC: Source
<FRAME SRC="menu.htm">
Specifies what html document will be placed in that frame.

14. FRAMESET
Syntax
Purpose
<FRAMESET><FRAME>FRAME CONTENT</FRAME></FRAMESET>
The FRAMESET tag is used to define the columns and rows used in the frame development. It replaces the body tag if the html document's only purpose is to develop the frames.
Attributes COLS
<FRAMESET COLS="25%,25%,50%">
Sets each frame's height by either using the number of pixels, a percentage, or the wildcard (*).

ROWS
<FRAMESET ROWS="25%,25%,50%">
Sets each frame's width by either using the number of pixels, a percentage, or the wildcard (*).

15. H1, H2, H3, H4, H5, H6
Syntax
Purpose
<H1>Welcome</H1>
H stands for heading. It determines the size of text. H1 is the largest size
Attributes ALIGN
<H1 ALIGN="CENTER">
Sets the alignment to the specified object wishing to format using the heading. Values can be either left, center, or right.
16. HR: Horizontal Ruler
Syntax
Purpose
<HR>
The HR tag inserts a horizontal line to help separate text and graphics.
Attributes ALIGN: Alignment
<HR ALIGN=LEFT>
The ALIGN attribute aligns the break to either the left, right or center.

COLOR
<HR COLOR=BLUE>
Used to change the color or the line.

NOSHADE
<HR NOSHADE>
Does not include the 3D shade with the ruler.

SIZE
<HR SIZE="5">
The SIZE attribute determines the height of the line in pixels.

WIDTH
<HR WIDTH="90%">
The WIDTH attribute determines how wide the line break will be. It can be enter in either percentage or pixels.

17. IMG SRC: Image Source
Syntax
Purpose
<IMG SRC="images/logo.htm">
The IMG SRC tag is used to tell the browser the specific location of a desired graphic.
Attributes ALIGN
<IMG SRC="images/logo.htm" ALIGN="CENTER">
Determines alignment of image. Values can be ABSMIDDLE, ABSBOTTOM, BASELINE, BOTTOM, CENTER, MIDDLE, LEFT, RIGHT, TEXTTOP, TOP.

ALT
<IMG SRC="images/logo.htm" ALT="Heald Logo">
Determines text that is displayed in the case of a browser's inability to display the actual graphic.

BORDER
<IMG SRC="images/logo.htm" BORDER="3">
Determines the size of the border that is around the graphic's edge. The size of the border is determined in pixels. For no border, simply enter 0.

HEIGHT
<IMG SRC="images/logo.htm" HEIGHT="153">
Determines how tall the image will be measured in pixels.

HSPACE
<IMG SRC="images/logo.htm" HSPACE="10">
Determines how much space, in pixels, will be in between the right and left sides of the image.

VSPACE
<IMG SRC="images/logo.htm" VSPACE="5">
Determines how much space, in pixels, will be in between the top and bottom of the image.

WIDTH
<IMG SRC="images/logo.htm" WIDTH="153">
Determines how wide the image will be measured in pixels.

18. MARQUEE
Syntax
Purpose
<MARQUEE>This text will scroll</MARQUEE>
Scrolls text across a designated area in the viewer. This tag only works in the Internet Explorer browser.
Attributes ALIGN
<MARQUEE ALIGN=TOP>This text will scroll</MARQUEE>
Aligns the text to the top, bottom, or middle of the marquee.

BEHAVIOR
<MARQUEE BEHAVIOR=SLIDE>This text will scroll</MARQUEE>
Determines the direction in which the text will scroll.

BGCOLOR
<MARQUEE BGCOLOR="BLACK">This text will scroll</MARQUEE>
Determines the background color of the marquee.

DIRECTION
<MARQUEE DIRECTION=LEFT>This text will scroll</MARQUEE>
Determines the direction of the scrolling text. This can be either right or left.

HEIGHT
<MARQUEE HEIGHT=10%>This text will scroll</MARQUEE>
Determines the height of the marquee box. This can be entered in pixels or percentage.

HSPACE
<MARQUEE HSPACE=15>This text will scroll</MARQUEE>
Determines the amount of space on the left and right of the marquee box from the rest of the document. This number is entered in pixels.

LOOP
<MARQUEE LOOP=INFINITE>This text will scroll</MARQUEE>
Determines the number of times the text will. Possible values can be either a number or the word INFINITE.

SCROLLAMOUNT
<MARQUEE SCROLLAMOUNT=10>This text will scroll</MARQUEE>
Determines the amount of space, in pixels, between scrolls.

SCROLLDELAY
<MARQUEE SCROLLDELAY=5>This text will scroll</MARQUEE>
Determines the amount of time between scrolling text.

VSPACE
<MARQUEE VSPACE=5>This text will scroll</MARQUEE>
Identifies how much space, in pixels, there will be between the top and the bottom of the marquee.

WIDTH
<MARQUEE WIDTH=75%>This text will scroll</MARQUEE>
Determines the width of the marquee box in either pixels or percentage.

19. OL: Ordered List
Syntax
Purpose

<OL>
The OL tag establishes the beginning and end of a Ordered List.

Attributes TYPE
<OL TYPE=A>
The TYPE attribute determines the type of characters that will be used in the ordered list. Expectable values include:
A - Uppercase Letters
a - Lowercase Letters
I - Uppercase Roman Numerals
i - Lowercase Roman Numerals
1 - Digits
Sub Tag LI: LIST Item
<LI>Item One
The LI tag identifies a list item.
Example <OL TYPE=A>
<LI>Item One
<LI>Item Two
<LI>Item Three
</OL>

20. P: Paragraph Break
Syntax
Purpose
<P>Paragraph</P>
The P tag places a line break with an additional space between the two lines of text.
Attributes ALIGN
<P ALIGN=LEFT>
Determines the alignment of designated paragraph.
21. S: Strike-Through Text
Syntax
Purpose
<S>This Text Will Have A Line Through The Middle of It.</S>
Place a line through the middle of the specified text.
22. SUB: SUBSCRIPT
Syntax
Purpose
<SUB>This Text Will Display In Subscript Form.</SUB>
Displays text in subscript form.
23. SUP: SUPERSCRIPT
Syntax
Purpose
<SUP>This Text Will Display In Superscript Form.</SUP>
Displays text in Superscript form.
24. TABLE
Syntax
Purpose
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>

Creates a table.
Attribute ALIGN
<TABLE ALIGN=LEFT>
Determines the alignment of designated table. Values include: Center, Left, or Right.

BACKGROUND
<TABLE BACKGROUND="images/backgrnd.jpg">
Determines the table's background image.

BGCOLOR
<TABLE BGCOLOR="GREEN">
Determines the table's background color. This can be entered using the color's proper name or the HEX or RGB code.

BORDER
<TABLE BORDER="5">
Determines the size of the table's border using pixels.

BORDERCOLOR
<TABLE BORDERCOLOR="GREEN">
Determines the color of the table's border.

BORDERCOLORDARK
<TABLE BORDERCOLORDARK="BLUE">
Determines the color of the table's 3D border.

BORDERCOLORLIGHT
<TABLE BORDERCOLORLIGHT="GREEN">
Determines the color of the table's 3D border that is not shaded.

CELLPADDING
<TABLE CELLPADDING="2">
Determines the thickness of the table's wall.

CELLSPACING
<TABLE CELLSPACING="8">
Determines the number of spaces between cells in pixels.

WIDTH
<TABLE WIDTH="100%">
Determines how wide the table is going to be compared to the screen. The width can be entered using either percentage or pixels.

Sub Tags TR: Table Row
<TR HALIGN="LEFT" VALIGN="MIDDLE">Row Information</TR>
Used to indicate where a row begins and ends. Horizontal Alignment can be either left or right, and Vertical Alignment can either be bottom, middle, or top.

TD: Table Data
<TD>Text to be put into a single cell</TD>
Text between these tags will be displayed in a single cell..

Example

This will make a two column table with my likes and dislikes.

<TABLE BORDER=2 BORDERCOLOR="BLUE" WIDTH="75%">
<TR>
<TD>I Like</TD><TD>I Dislike</TD>
</TR>
<TR>
<TD>Likes: <UL><LI>Teaching <LI>Computers</UL></TD>
<TD>Dislikes: <UL><LI>Exercising <LI>Hiking</UL></TD>
</TR>
</TABLE>
25. U: Underline
Syntax
Purpose
<U>This Text Will Be Underlined.</U>
Displays underlined text.
26. UL: Unordered List
Syntax
Purpose
<OL>
The OL tag establishes the beginning and end of a Ordered List.
Attribute TYPE
<OL TYPE=A>
The TYPE attribute determines the type of characters that will be used in the ordered list. Expectable values include: Circle, Disk, Square
Sub Tag LI: LIST Item
<LI>Item One
The LI tag identifies a list item.
Example <UL TYPE=DISK>
<LI>Item One
<LI>Item Two
<LI>Item Three
</UL>