Scribd
Upload
49 views

HTML Tags

The document provides examples of HTML tags and their functions. Some key tags covered include headings, paragraphs, lists, links, images, tables, and forms. For each tag, the name, code example, and browser view are given to demonstrate how the tag will be formatted.

Uploaded by

Eliza Joy Gases
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
49 views

HTML Tags

The document provides examples of HTML tags and their functions. Some key tags covered include headings, paragraphs, lists, links, images, tables, and forms. For each tag, the name, code example, and browser view are given to demonstrate how the tag will be formatted.

Uploaded by

Eliza Joy Gases
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML Tag Chart Tag <!

-<A <B> <BIG> <BODY> <BR> <CENTER> Name comment anchor bold big (text) body of document line break center Code Example <!--This can be viewed in the HTML part of a document--> <A HREF="http://www.yourdomain.com/">Visit Our Site</A> <B>Example</B> <BIG>Example</BIG> <BODY>The content of your page</BODY> The contents of your page<BR>The contents of your page <CENTER>This will center your contents</CENTER> <DL> <DT>Definition Term <DD>Definition of the term <DT>Definition Term <DD>Definition of the term </DL> Nothing will show Visit Our Site Example Example Contents of your webpage The contents of your page The contents of your page This will center your contents Definition Term Definition of the term Definition Term Definition of the term Browser View

<DD>

definition description

<DL>

<DL> <DT>Definition Term <DD>Definition of the term definition list <DT>Definition Term <DD>Definition of the term </DL> <DL> <DT>Definition Term <DD>Definition of the term <DT>Definition Term <DD>Definition of the term </DL> This is an <EM>Example</EM> of using the emphasis tag <EMBED src="yourfile.mid" width="100%" height="60" align="center">

Definition Term Definition of the term Definition Term Definition of the term

<DT>

definition term

Definition Term Definition of the term Definition Term Definition of the term This is an Example of using the emphasis tag

<EM> <EMBED>

emphasis embed object embed object font font font

<EMBED>

<EMBED src="yourfile.mid" autostart="true" hidden="false" loop="false"> Music will begin playing when your page is loaded <noembed><bgsound src="yourfile.mid" loop="1"></noembed> and will only play one time. A control panel will be displayed to enable your visitors to stop the music. <FONT FACE="Times New Roman">Example</FONT> <FONT FACE="Times New Roman" SIZE="4">Example</FONT> <FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000">Example</FONT> <FORM action="mailto:[email protected]"> Name: <INPUT name="Name" value="" size="10"><BR> Email: <INPUT name="Email" value="" size="10"><BR> <CENTER><INPUT type="submit"></CENTER> </FORM> <H1>Heading 1 Example</H1> <H2>Heading 2 Example</H2> <H3>Heading 3 Example</H3> <H4>Heading 4 Example</H4> <H5>Heading 5 Example</H5> Example (Tip) Example (Tip) Example

<FONT> <FONT> <FONT>

Name: Email:

<FORM>

form

Submit Query
Heading 1 Example Heading 2 Example Heading 3 Example Heading 4 Example Heading 5 Example

<H1> <H2> <H3> <H4> <H5>

heading 1 heading 2 heading 3 heading 4 heading 5

<H6> <HEAD>

heading 6 heading of document horizontal rule horizontal rule horizontal rule horizontal rule horizontal rule hypertext markup language italic image

<H6>Heading 6 Example</H6> <HEAD>Contains elements describing the document</HEAD>

Heading 6 Example Nothing will show Contents of your webpage (Tip) Contents of your webpage Contents of your webpage Contents of your webpage Contents of your webpage Contents of your webpage Contents of your webpage Contents of your webpage Contents of your webpage Contents of your webpage Contents of your webpage Example

<HR>

<HR>

<HR> <HR> <HR> (Internet Explorer) <HR> (Internet Explorer) <HTML> <I> <IMG>

<HR WIDTH="50%" SIZE="3"> <HR WIDTH="50%" SIZE="3" NOSHADE>

<HR WIDTH="75%" COLOR="#FF0000" SIZE="4">

<HR WIDTH="25%" COLOR="#6699FF"SIZE="6"> <HTML><HEAD><META><TITLE>Title of your webpage</TITLE></HEAD><BODY>Webpage contents</BODY></HTML> <I>Example</I> <IMG SRC="Earth.gif" WIDTH="41" HEIGHT="41" BORDER="0" ALT="a sentence about your site"> Example 1:

Example 1: (Tip)

<INPUT>

input field

<FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <INPUT type="text" size="10" maxlength="30"> <INPUT type="Submit" VALUE="Submit"> </FORM> Example 2:

Submit

<INPUT> (Internet Explorer)

input field

<FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <INPUT type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;" size="10" maxlength="30"> <INPUT type="Submit" VALUE="Submit"> </FORM> Example 4: <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> Enter Your Comments:<BR> <TEXTAREA wrap="virtual" name="Comments" rows=3 cols=20 MAXLENGTH=100></TEXTAREA><BR> <INPUT type="Submit" VALUE="Submit"> <INPUT type="Reset" VALUE="Clear"> </FORM> Example 5: <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <CENTER> Select an option: <SELECT> <OPTION >option 1 <OPTION SELECTED>option 2 <OPTION>option 3 <OPTION>option 4 <OPTION>option 5 <OPTION>option 6 </SELECT><BR>

Example 2: (Tip)

Submit

Example 4: (Tip)

<INPUT>

input field

Submit

Clear

<INPUT>

input field

Example 5: (Tip) Select an option:

Submit

<INPUT type="Submit" VALUE="Submit"></CENTER> </FORM> Example 6: (Tip) Example 6: <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> Select an option:<BR> <INPUT type="radio" name="option"> Option 1 <INPUT type="radio" name="option" CHECKED> Option 2 <INPUT type="radio" name="option"> Option 3 <BR> <BR> Select an option:<BR> <INPUT type="checkbox" name="selection"> Selection 1 <INPUT type="checkbox" name="selection" CHECKED> Selection 2 <INPUT type="checkbox" name="selection">Selection 3 <INPUT type="Submit" VALUE="Submit"> </FORM> Select an option: Option 1 Option 2 Option 3 Select an option: Selection 1 Selection 2 Selection 3

<INPUT>

input field

Submit
Example 1: (Tip) Example 1: <MENU> <LI type="disc">List item 1 <LI type="circle">List item 2 <LI type="square">List item 3 </MENU> <LI> list item Example 2: <OL type="i"> <LI>List item 1 <LI>List item 2 <LI>List item 3 <LI>List item 4 </OL> Example 2: i. ii. iii. iv. <LINK> link List item 1 List item 2 List item 3 List item 4

List item 1 List item 2 List item 3

Visit our <A HREF="http://www.yourdomain.com/">site</A> Visit our site (Tip)

<MARQUEE> <MARQUEE bgcolor="#CCCCCC" loop="-1" scrollamount="2" (Internet scrolling text width="100%">Example Marquee</MARQUEE> Explorer) <MENU> <LI type="disc">List item 1 <LI type="circle">List item 2 <LI type="square">List item 3 </MENU>

List item 1 List item 2 List item 3

<MENU>

menu

<META> <META> <META> <META> <META> <META>

meta meta meta meta meta meta

<META name="Description" content="Description of your site"> <META name="keywords" content="keywords describing your Nothing will show site"> <META HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/"> <META http-equiv="Pragma" content="no-cache"> <META name="rating" content="General"> <META name="ROBOTS" content="ALL"> <META NAME="ROBOTS" content="NOINDEX,FOLLOW"> Nothing will show Nothing will show (Tip) Nothing will show (Tip) Nothing will show (Tip) Nothing will show (Tip)

Example 1: <OL> <LI>List item 1 <LI>List item 2 <LI>List item 3 <LI>List item 4 </OL> <OL> ordered list Example 2: <OL type="a"> <LI>List item 1 <LI>List item 2 <LI>List item 3 <LI>List item 4 </OL> <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> <CENTER> Select an option: <SELECT> <OPTION>option 1 <OPTION SELECTED>option 2 listbox option <OPTION>option 3 <OPTION>option 4 <OPTION>option 5 <OPTION>option 6 </SELECT><BR> </CENTER> </FORM>

Example 1: 1. 2. 3. 4. List item 1 List item 2 List item 3 List item 4

Example 2: a. b. c. d. List item 1 List item 2 List item 3 List item 4

Select an option: (Tip)

<OPTION>

This is an example displaying the use of the This is an example displaying the use of the paragraph tag. <P> paragraph tag. This will create a line break and a space between lines. Attributes: Example 1:<BR> <BR> <P align="left"> This is an example<BR> displaying the use<BR> of the paragraph tag.<BR> <BR> Example 2:<BR> <BR> <P align="right"> This is an example<BR> displaying the use<BR> of the paragraph tag.<BR> <BR> Example 3:<BR> <BR> <P align="center"> This is an example<BR> displaying the use<BR> of the paragraph tag. <SMALL>Example</SMALL> <STRONG>Example</STRONG> Example 1: <TABLE> table <TABLE BORDER="4" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD>Column 1</TD> Example 1: Column 1 Column 2 This will create a line break and a space between lines. Attributes: Example 1: This is an example displaying the use of the paragraph tag. Example 2: This is an example displaying the use of the paragraph tag. Example 3: This is an example displaying the use of the paragraph tag. Example Example

<P>

paragraph

<SMALL> <STRONG>

small (text) strong emphasis

<TD>Column 2</TD> </TR> </TABLE> Example 2: (Internet Explorer) <TABLE BORDER="2" BORDERCOLOR="#336699" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE> Example 3: <TABLE CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD BGCOLOR="#CCCCCC">Column 1</TD> <TD BGCOLOR="#CCCCCC">Column 2</TD> </TR> <TR> <TD>Row 2</TD> <TD>Row 2</TD> </TR> </TABLE> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE> Example 3: Column 1 Row 2 Column 2 Row 2

Example 2: Column 1 Column 2

<TD>

table data

Column 1

Column 2

<TH>

<DIV align="center"><TABLE> <TR> <TH>Column 1</TH> <TH>Column 2</TH> <TH>Column 3</TH> </TR> <TR> <TD>Row 2</TD> <TD>Row 2</TD> <TD>Row 2</TD> </TR> table header <TR> <TD>Row 3</TD> <TD>Row 3</TD> <TD>Row 3</TD> </TR> <TR> <TD>Row 4</TD> <TD>Row 4</TD> <TD>Row 4</TD> </TR> </TABLE> </DIV> document title <TITLE>Title of your webpage</TITLE> <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> <TR> <TD>Column 1</TD> <TD>Column 2</TD> </TR> </TABLE>

Column 1 Row 2 Row 3 Row 4

Column 2 Column 3 Row 2 Row 2 Row 3 Row 3 Row 4 Row 4

<TITLE>

Title of your webpage will be viewable in the title bar.

<TR>

table row

Column 1

Column 2

<TT> <U>

teletype underline

<TT>Example</TT> <U>Example</U> Example 1:<BR> <BR> <UL> <LI>List item 1 <LI>List item 2 </UL> <BR> Example 2:<BR> <UL type="disc"> <LI>List item 1 <LI>List item 2 <UL type="circle"> <LI>List item 3 <LI>List item 4 </UL> </UL>

Example Example Example 1:

List item 1 List item 2

<UL>

unordered list

Example 2:

List item 1 List item 2 o List item 3

List item 4

You might also like