Quick Introduction to Basic HTML Tags

Mandatory Tags

You must have the following tags in any HTML document, otherwise the browser will not display it. Refer to the page template handout to see the order in which they must be used.

<HTML> </HTML> - starts and ends the HTML file
<TITLE> </TITLE> - contains the title that displays on the top bar of the browser page
<HEAD> </HEAD> - contains the information that tells the browser basic attributes of page
<BODY> </BODY> - contains the content of the web page

Optional Tags for Formatting Text

Note that the text affected by the formatting goes between the paired tags.

 bold  or sometimes the "strong" tag is used for bold: 
 italic 
 red text  You can use color names or hexadecimal color codes, if you know them.

Note: you can combine these tags.
 bold italicized green text

  or Break.
Use this tag to "break" a line. It's similar to using the Return/Enter key on your keyboard. Two tags in a row create a blank line. Note: there is no tag.

  Paragraph
Use this pair of tags for a paragraph. The text goes between the two. This will insert a blank line between paragraphs.

Text Formatting with a Table

If you have a lot of text, especially multiple paragraphs of text, insert your text in a centered table with a single "cell", meaning 1 Row x 1 Column. For example, all of the text of this page is in a single-cell table with a white background (see tags below). <TR> - starts table row. <TD> - starts table cell

<TABLE width="650" align="center" cellpadding="5"><TR><TD bgcolor="#FFFFFF">
text...text...text...text.
</TD></TR></TABLE>

Using more advanced Tables (with multiple rows and columns) is an easy way to organize web pages into sections. You can also put Tables within Tables, but we recommend using web editing software for this.

Tags & Links to Insert Things

<HR> will insert a horizontal line across your page. There is no </HR> tag.

<IMG SRC="NAMEofIMAGE"> will insert an image into your page. There is no closing tag.

<A HREF="URL"> web page </A> will insert a link to another web site, activated when the reader of the page clicks on the text (in this case, the word “link”). [Example: UCLA home page]

<A HREF="MAILTO:emailaddress@ucla.edu"> e-mail me! </A> will open a window to send e-mail to the specified address when the reader clicks on the link (in this case, the words “e-mail me!”).

<A HREF="filename.htm"> another html page </A> will insert a link to another web site, activated when the reader of the page clicks on the text (in this case, the word “link”). [Example: Go to web project training page.]

Links to Media Files

Linking to sound files on the internet can be a complex topics. For the most basic use of sound files in web projects, we recommend using MP3 files for sound (you can convert to ".mp3" format in iTunes) or Quicktime (.mov format) for video. If you use the basic link tag and put the name of the file in the tag, it will open and play in a new window.

<A HREF="URL or filename.mp3 "> soundfilename.mp3 </A>

<A HREF="URL or filename.mov "> videofilename.mov </A>