format c:_

Site: Home • Gallery • Copyright and Disclaimer
Hobbies: Gadgets • iPod • LEGO • Robots • Flash • Tutorials • Downloads
Contact: Polls • Linking • Guestbook • Contact info

You are here:
format c:_
→ Tutorials
→ HTML Reference
 · HTML Reference

HTML Tutorial

HTML Reference

Here's all you need to know to create your website, in one place.
Basic structure - Colors - HTML tags - Special characters
Basic structure
Following is the basic structure of any web page.
<HTML>
<HEAD>
<TITLE>Page title</TITLE>
</HEAD>
<BODY>
Page content
</BODY>
</HTML>
The tags you can use are listed here.
Colors
There are two main ways to specify colors in HTML.
Predefined colors
There are 140 colors you can write just by using their names, in any tag that supports a color attribute.
<TAG COLOR="COLORNAME">
These colors include:
Red
Yellow
Green
Blue
Fuchsia
Olive
Lime
Aqua
Maroon
Gray
Silver
Purple
Teal
Navy
Black
White

Try some other color and see if if works! Or look here (See right column for help with hex codes). If you need more specific colors, see the right column.

Hexadecimal codes
The hexadecimal system allows you to specify one out of 16.7 million colors with great accuracy:
<TAG COLOR="#RRGGBB">
RR stands for Red, GG for green and BB for blue. By giving each of these colors a value and combinig all three values, you get the color. Supported values range from 0 (hex: 00) to 255 (hex: FF). Just like the decimal system works with numbers from 0 to 9, the hexadecimal one works with 0 to 9 and A to F, like this:
#0000FF: 0 Red, 0 Green, FF (=255 decimal) Blue: result
#FF9933: FF (=255) Red, 99 (=153) Green, 33 (=51 decimal) Blue: result

You can see a lot of color codes in hexadecimal format at html-color-codes.com. (link opens in a new window)
If your browser supports it, you can use the program below to calculate a color code:

Enter a value (0-255) in each box and press Go!
You can also enter a value in the hex code field.
Red Green Blue  
Hex code:
Color:  
 © Daniel Rojas 2005 - formatc.co.nr
HTML tags
Formatting
<BODY BGCOLOR="x" BACKGROUND="file" TEXT="x" LINK="x" VLINK="x" ALINK="x">
Insert into BODY tag to change background color (BGCOLOR), background image (BACKGROUND), text color (TEXT) or link color (normal, visited, active; LINK, VLINK, ALINK)

<b> | <i> | <u> | <s>
Changes text to bold, italics, underlined or strike-through. It's a wrapping tag.

<SMALL> | <BIG>
Decreases or increases font size slightly. Wrapping tag.

<FONT COLOR="x" SIZE="#" FACE="x">
Changes font color, size (numbers from 1 to 7) or face (e.g. "Times New Roman"). Selected face must be installed on the computer that's viewing the page. Wrapping tag.

<H# ALIGN="x">
Creades a header. # can be a number from 1 (big) to 6 (small). ALIGN can be set to "LEFT", "CENTER" or "RIGHT". Wrapping tag.

Images
<IMG SRC="file" HEIGHT="#" WIDTH="#" BORDER="#" ALT="x">
Displays the image (SRC must be a valid file), sets its dimensions (HEIGHT, WIDTH; set only one to preserve proportions), creates a BORDER and an ALTernative text (displayed on some browsers while hovering over the image or while being read by a screenreader)
Hyperlinks
<A HREF="file" TARGET="?">
Inserts a hyperlink to the desired location (HREF) in the selected frame or window (TARGET).
HREF can be:
  • Another file (HTML file, image, any other file)
  • An anchor inside the same page using # sign. (see below)

    For same-page anchors:
    <A HREF="#gohere">Source hyperlink</A>
    <A NAME="gohere">Target anchor</A>

    Target anchor does not need # sign. Wrapping tag.
    For frame usage, see below.

    TARGET can be:

  • A frame's name (see below)
  • _BLANK: opens in a new window
  • _PARENT: opens in the containing frameset of the current frame
  • _TOP: opens in the topmost frameset
    • Tables
    <TABLE BORDER="#" BORDERCOLOR="x" BGCOLOR="x" BACKGROUND="x" WIDTH="#" HEIGHT="#" CELLPADDING="#" CELLSPACING="#">
    Initiates a new table with eligible border and background properties (similar to BODY tag), dimensions (leave out to adjust automatically) and spacings (CELLPADDING: space between cell border and cell text; CELLSPACING: space between two cells). Wrapping tag that contains TR, TD and TH tags.

    <TR>
    Starts a new table row. Wrapping tag that contains TD and TH tags.

    <TD COLSPAN="#" ROWSPAN="#">
    New table data (table cell). COLSPAN and ROWSPAN set desired stretching across multiple COLumns or ROWs (optional). Supports the same attributes as TABLE tag. Wrapping tag.

    <TH>
    New table header cell. Similar to TD, but with highlighting or special formatting for titles or headers of a table.

    Frames
    <FRAMESET COLS="x" ROWS="x">
    Replaces BODY tag, builds a frame page with any number or COLumns or ROWs (leave out attribute that does not apply). Format for COLS/ROWS: width/height of each frame, separated by commas. * occupies the remaining space.
    EXAMPLE
    <FRAMESET COLS="200,30%,*">
    Three COLumns; 1st one: 200px wide, 2nd one: occupies 30% of the screen, 3rd one uses the remaining window space available. Wrapping tag that contains several FRAME tags. Can contain more FRAMESETs to create advanced combinations.

    <FRAME SRC="file" NAME="x">
    One frame inside a FRAMESET. SRC is the name of the page to be displayed, NAME is used primarily for hyperlinks:
    <A HREF="file" TARGET="where">Open file</A>
    Loads the file of HREF attribute inside a frame called "where": <FRAME SRC="file" NAME="where">
    The hyperlink can be located inside on a page loaded inside any other FRAME of the same FRAMESET.

    © Daniel Rojas 2005
    HTML Tutorial

    PAGE STATUS: Red: Page should be operational but is no longer being maintained. © Daniel Rojas 2002-2006 Top ↑

    ← navigation ↑ home · stuff ↓

    E-mail:

    Visitor map:
    Add yourself to the visitor map!

    SITE STATUS: Red
    Site should be operational but is no longer being maintained.

    Free Domain Name - www.YOU.co.nr!
    Get Firefox!