Basic HTML Tags


This page will demonstrate simple HTML tags and attributes.

On-Line HTML Tutorial Menu

Begin HTML Bold Text Italic Text Underlined Text Font Size Font Color Font Name Horizontal Rule
Break Line Pre Format Text Display Images Center Text & Images Link to section on same page Link to another file Link to a web site Headings
Lists Tables Comments Background Color Background Image Including an Email Link Spacing Alt Attribute

Bold Tag

To make text bold, place the < B> tag at the beginning and < /B> tag at the end of the text.

Example:
< B> This text is bold. < /B> This text is not bold.

Output :
This text is bold. This text is not bold.

[Menu]


Italic Tag

To make text Italic, place the < I> tag at the beginning and < /I> tag at the end of the text.

Example:
< I> This text is Italic. < /I> This text is not italic.

Output :
This text is Italic. This text is not Italic.

[Menu]


Underline Tag

To Underline text, place the < U> tag at the beginning and < /U> tag at the end of the text.

Example:
< U> This text is underlined. < /U> This text is not underlined.

Output :
This text is underlined. This text is not underlined.

[Menu]


FONT Tag/SIZE Attribute

Control the size of your text by using the FONT tag in conjunction with the SIZE attribute. Size values range from 1 to 7 inclusively.

Example:
< FONT SIZE="7"> Example with Size = 7 < /FONT>
< FONT SIZE="1"> Example with Size = 1 < /FONT>

Output :
Example with Size = 7
Example with Size = 1

[Menu]


FONT Tag/COLOR Attribute

Control the color of your text by using the FONT tag in conjunction with the COLOR attribute. Here is a
Color Code Table.

Example:
< FONT COLOR="RED"> Example with Color = Red < /FONT>
< FONT COLOR="GREEN"> Example with Color = Green < /FONT>
< FONT COLOR="810541"> Example with coded Color = Maroon < /FONT>

Output :
Example with Color = Red
Example with Color = Green
Example with coded Color = Marron

[Menu]


FONT Tag/FACE Attribute

Control the font nane by using the FONT tag in conjunction with the FACE attribute. Here are different
font names.

Examples:
< FONT FACE="Comic Sans MS"> This font is called Comic Sans MS< /FONT>
< FONT FACE="Blimpo"> This font is called Blimpo< /FONT>
< FONT FACE="OldEnglish"> This font is called OldEnglish< /FONT>

Output :
This font is called Comic Sans MS
This font is called Blimpo
This font is called OldEnglish

[Menu]


Horizontal Rule

Place a horizontal rule by using the < HR> tag.

Example:
< HR>

Output :


[Menu]


Headings

The Heading Tag is use to identify headings and subheadings. Heading values range from 1 to 6 inclusively.

Example:
< H1> Heading 1 < /H1>
< H6> Heading 6 < /H6>

Output :

Heading 1

Heading 6

[Menu]


Break Line Tag

The < BR> tag breaks a line of text at the point where it appears.


Example:
This is a line of text.
This is a second line of text.
< BR>
This is a third line of text.
Output :
This is a line of text. This is a second line of text.
This is a third line of text.

[Menu]


PRE Tag

To preformat your text, place the < PRE> tag at the beginning and < /PRE> tag at the end of the text.

Example:
< PRE>
This is a line of text.
     This line is below the previous.
                                     
                                     This is a third line of text. 
< /PRE>
Output :
This is a line of text.
     This line is below the previous.
                                     
                                     This is a third line of text. 

[Menu]


IMG Tag

To insert an image, use the < IMG> tag in conjunction with the SRC and ALIGN attribute.
The image must be in .jpg or .gif format. This example will output fred1.gif.

Example ALIGN = RIGHT:
< IMG ALIGN="RIGHT" SRC="fred1.gif">

Output :

Example ALIGN = LEFT:
< IMG ALIGN="LEFT" SRC="fred1.gif">

Output :

[Menu]


ALT Attribute

To use an alternative for an image use the ALT attribute in conjuction with the IMG tag. Place your mouse over the image to see the alternative. The image must be in .jpg or .gif format.

Example
< IMG SRC="fred1.gif" ALT="Downloaded Image" >

Output :
Downloaded Image

[Menu]


CENTER Tag

To center an image or text, place the < CENTER> tag at the beginning and < /CENTER> tag at the end of the image or text. The image must be in .jpg or .gif format. This example will output fred1.gif.

Example center text:
< CENTER> This text is centered. < /CENTER>

Output center text:

This text is centered.

Example center image:
< CENTER> < IMG SRC="fred1.gif"> < /CENTER>

Output center image:


[Menu]


Intrapage Link

Use the < A> tag twice to create a link to a specific part of a page.
Use it once to create the link, and a second time to create the links destination.

Example:
< A HREF="#GoHere">Go to the destination. < /A>

< A name="GoHere">
This is the destination.

Output :
Go to the destination.

This is the destination.

[Menu]


Interpage Link

Use the < A> tag to create a link to another page or file. This example will pull up a file called interpage.html. This file is located in the same directory(folder) of the page you see now. The name of this particular page is called htmlbasics.html.

Example:
Let's see the < A HREF="interpage.html">interpage link < /A> and then return to this page.
Output :
Let's see the
interpage link and then return to this page.

[Menu]


External Link

Use the < A> tag to create a link to a another web site. This example will pull up the Yahoo search engine at http://www.yahoo.com. It is important to include the http:// part of the URL. Otherwise the browser will think you want to pull up a file in the current directory(folder).

Example:
Go to < A HREF="http://www.yahoo.com">Yahoo < /A>. To return, press the BACK button.
Output :
Go to
Yahoo. To return, press the BACK button.

[Menu]


Lists

Example:
My favorite teams
< UL>
< LI> Northridge Raiders
< LI> St. Louis Cardinals
< LI> Notre Dame Football
< /UL>
Output :
My favorite teams

[Menu]


The following example creates a 2 by 3 table with headings called : Artist & Song. The BORDER attribute and < CAPTION> tag are optional.

Tables

Example:
< TABLE BORDER>
< CAPTION> Some Favorite Songs < CAPTION>
< TR>
< TH> Artist
< TH> Song
< /TR>
< TR>
< TH> Eric Clapton
< TH> My Father's eyes
< /TR>
< TR>
< TH> Crosby, Stills, & Nash
< TH> Helplessly Hoping
< /TR>
< /TABLE>

Output :
Some Favorite Songs
Artist Song
Eric Clapton My Father's eyes
Crosby, Stills, & Nash Helplessly Hoping

[Menu]


Comments in an HTML documents

Write comments in your HTML document to make it more legible. With the use of comments, readers of your document can better understand what you are attempting to convey in your work. The example below can be written at the top of this HTML document to tell the reader the purpose of this page. There is no output for comments.

Example:
< !-- This document explains HTML Basics -->

[Menu]


Background Color

You can control the background color of your document by using the BGCOLOR attribute in conjunction with < BODY> tag. This particular document does not use this feature.

Example:
< BODY BGCOLOR="BLACK">

[Menu]


Background Image

You can place an image as your background by using the BACKGROUND attribute in conjunction with < BODY> tag. The image must be in .gif or .jpg format. The example below will load marble.gif as it's background. This very document you are looking at now does not use this feature. Although you can copy any background from any website,
some background images can be found
here.

Example:
< BODY BACKGROUND="marble.gif">

[Menu]


Skeleton

HTML documents begin with the following tags. Most of all the other tags which make up your documents will be placeed between the < BODY> and < /BODY> tags.
< HTML>
< HEAD>
< TITLE> My Web Page</TITLE> 
< /HEAD>
< BODY>



< /BODY>
< /HTML>

[Menu]

Including an Email Link

This will provide a link to my email address.

Example:
< A HREF="mailto:spowell@iusb.edu"> spowell@iusb.edu < /A>
Output :
spowell@iusb.edu

[Menu]


Spacing

To include spaces, place a &nbsp; at each location you would like to have a space.

Example:
This is text.&nbsp;&nbsp;&nbsp;This text is three spaces over.

Output :
This is text.   This text is three spaces over.

[Menu]


|W200 |Syllabus |Back to Sam Powell's Homepage |