HTML Refresher

STEP 1 - HTML STRUCTURE

What are HTML Tags?

HTML Tags tell a web browser how to display the text, images, links, and other information you wish to share via your web page. That is, HTML tags tell the web browser to center the text, show an image, make a link, change the font, etc. Almost every tag has an opening tag -- e.g., tell the browser where to start centering the text -- and a closing tag, which tells the browser where to stop centering the text.

ALL HTML TAGS are surrounded by brackets. For example: <HTML>

ALL CLOSING HTML TAGS look just the same as the opening tag, except there is a '/' in front of the tag name.
(For example: </HTML>.)

The HTML, HEAD, TITLE, and BODY tags

The HTML, HEAD, TITLE, and BODY tags are essential to every web page that you create. These three tags are the basic foundation for every web page. Below is the code for a very basic web page:

  • <HTML> - This tag must be placed on the very first line of each web page you create. Its closing tag is also the last line on every web page.
  • <HEAD> - The HEAD tag is generally the second tag in a web page. The HEAD tag is where a lot of information about the page itself is placed, including the TITLE tag.
  • <TITLE> - The TITLE tag is placed between the opening and closing HEAD tags. This tag displays the web page title in the title bar of your web browser.

<HTML>
<HEAD>
<TITLE>Very Simple Web Page</TITLE>
</HEAD>
<BODY>

All of your information and data will go here, between the body tags.

</BODY>
</HTML>

STEP 2 - BASIC FORMATTING

Headings

Headings are text sizes. There are six different heading sizes to choose from (<h1> (the biggest) through <h6> (the smallest)).

Paragraphs

Paragraphs are set off by the <P> tag. What this tag does is insert two line breaks into the document. For example:

<P> The paragraph starts after the opening P tag. The closing tag, is completely unnecessary in this case. In other words, the </P> is not needed to end the paragraph. It will end when another paragraph is started.

Line Breaks

Line breaks are caused by the <BR> tag.

Horizontal Rules

A horizontal rule is a thin bar used to make pages more visually appealing.

STEP 3 - LINKING  

Creating links to other web pages

Linking is what the World Wide Web is all about. That is why it is called a "web".

Some sample code for a hyperlink:

<a href="http://www.webpagesthatsuck.com/home.html"> http://www.webpagesthatsuck.com/home.html</a> - An amusing guide on how NOT to design your web pages.

Creating links to send e-mail from web pages

E-mail (a.k.a. MAILTO:) links are very useful for things such as site feedback or information. They allow the user to click the link and send the recipient an e-mail right from their browser

STEP 4 - ADDING IMAGES TO YOUR WEB PAGES

Images are one of the best parts of the web.  Adding images is very easy. Typically, images must be in either .JPG or .GIF format.

STEP 5 - HOW'D THEY DO THAT?  

Learning from other people's web pages

Perhaps the best way to learn HTML is to look at somebody else's.  When you visit a website and see something that appeals to you, use the browser's [VIEW, SOURCE] option to view the HTML code. You can even copy and paste code from one page into another.  Be aware of copyright restrictions.  If you use someone else's images - or significant bits of HTML code - be sure to cite/ask permission.

Several useful tutorials are:  

http://www.lesn.appstate.edu/htmlonline/

http://all-html.com/