Logo

 

Images

The <IMG> tag is used to display an image on the page. This tag has the following attributes:

SRC The location of the image you want to display.
ALT The alternate text for the image before it loads.
HSPACE The number of pixels away from the location of the image horizontally.
VSPACE The number of pixels away from location of the image vertically.
HEIGHT The size of the image in pixels, vertically.
WIDTH The size of the image in pixels, horizontally.
BORDER The number of pixels you want for an imaginary border around the image.

  

Example:
<IMG SRC="../media/graphic.gif" BORDER="0" ALT="picture">

Use the text box below to practice (don't forget the HTML, BODY, and TITLE tags). The file graphic.gif is located on the server at ../media/graphic.gif. You may want to use it for practice.


Links

The anchor tag is used to put links on your site. The available attributes are listed below:

HREF The location of the link you want to display.
NAME The location within the current page you want to jump to.


Syntax:
<A HREF="link.htm">Text you want displayed for the link</A>

Practice below by linking to pages such as pub.html, html.html, pub2.html, type.html, etc. These are located on this server in the current directory, so you are allowed to type the file name alone. If you want to link to another web site, such as Yahoo!, type the full URL. (ie. http://www.yahoo.com)


Links can also be made to email addresses. This is done with mailto:username@domain.com.


Example:
<A HREF="mailto:j_smith@coolisp.org">Send email to John Smith</A>

Send email to John Smith


Headings

Headings are used to label different parts of your page. The text above reading "Headings" is a level 1 heading. There are seven different levels of headings, one being the largest, most general, and seven being the smallest, most specific.

Example:
<H1>Headings</H1>

This is what the code would be for the heading above.


Horizontal Rules

Horizontal rules are lines used to separate a page into similar sets of information. An example of one is below.



Horizontal rules are very easy to put on a page and they require no closing tag. <HR> accepts the following attributes:

align Where you want the horizontal rule aligned (ie. center, left, right).
width The size of the horizontal rule. It can be in pixels (px), percentages (%), inches (in), or centimeters (cm).

Example:
<HR align="center" width="300">

This is what the code would be for the horizontal rule above.


Text

To begin a new paragraph of text in HTML, use the <P> and </P> tags. Using the paragraph tags will create a blank line of text underneath the paragraph. <P> accepts the following attribute:

align How you want the paragraph aligned (ie. center, left, right).


The <FONT> and </FONT> tags are used to change the appearance of the text. The following attributes may be used:

color The color of the font. You may use either the color name (ie. red, blue, green) or the hexadecimal code for the color (ie. #ff0000 for red).
size The size of the font (ie. +1, +2, +3, etc.).
face The font type. (ie. Times New Roman, New Zurica, etc.)

The restriction with using the face option is that the font must be installed on the user's computer for the text to appear in that font type.

Example:
<FONT SIZE=+1 COLOR="Red">This text will appear +1 and red.</FONT>

Result:This text will appear +1 and red


Other Text tags

<I></I>Italicize the text
<B></B>Make the text bold
<U></U>Underline the text (Won't work on all browsers)

Center

The center tag is used to center just about anything on a page (Text and images). It is used by putting whatever you want centered within the <CENTER> and </CENTER> tags.



Example:
<CENTER><IMG SRC="../media/recycled.gif"></CENTER>

Result: