DG's HTML Tutorial
Home >> HTML Tutorial Back


HTML Tutorial
š ›
TEXT | PICTURES | LINKS | PICTURE LINKS | ANCHOURS | BODY TAG | FONT TAG
COLOUR | TABLES | LISTS | FRAMES

Text

<P> - Starts a knew paragraph
<BR> - Puts a breakpoint in the page

Notice the difference:

Paragraph:
This is paragraph that will be used<P>

a lot for demonstrations and such.

Breakpoint:
This is paragraph that will be used<BR>
a lot for demonstrations and such.

  • <B>Bold Text</B>
  • <U>Underlined Text</U>
  • <I>Italic Text</I>
  • <TT>Typewriter Text</TT>

There is also 6 heading sizes for text:

<H1>Heading 1</H1>

<H2>Heading 2</H2>

<H3>Heading 3</H3>

<H4>Heading 4</H4>

<H5>Heading 5</H5>
<H6>Heading 6</H6>

Back to top


Pictures

<IMG SRC="picture.gif"> (gif or jpg are the best to use)
This is just a normal picture like the code above. If you use the WIDTH= and HEIGHT= parametres you can stretch or shink the picture. The code for this picture is:
<IMG SRC="canflag.gif" WIDTH=100 HEIGHT=50>
Incase the picture link is wrong or since a lot of people turn images off in there browser for fast loading it's a good idea to use the ALT="" parametre.
<IMG SRC="canflag.gif" ALT="Canadian Flag">
Canadian Flag

Back to top


Links

<A HREF="link.com">Click Here</>

Go to DG's Game Page

Here's the code:
Go to <A HREF="www.oocities.org/Area51/Quadrant/7330">DG's Game Page</A>

You can also put Bond@MoneyPenny.com As a link.

Here's the code:
E-Mail me at <A HREF="MAILTO:bond@moneypenny.com">Bond@MoneyPenny.com</A>

Back to top


Picture Links

Picture Links are pretty much the same as normal links except you put a picture tag instead of text.

<A HREF="link.com"><IMG SRC="picture.gif"></A>

Here's what it looks like

As you can see there is a border around the image indicating it is a link. If you don't like it just use BORDER=0.

<A HREF="www.oocities.org/Area51/Quadrant/7330"><IMG SRC="canflag.gif" BORDER=0></A>

Back to top


Anchour

These are those special links that jump to a point in the same page. They are used throughout this page like the "Back to top" link below.

<A HREF="#anchour1">Click Anchour 1</A>

This is the "link" part that you click on.

<A NAME="#anchour1">

This you put on the point the link will jump to. It's not visible to the user. The name is not to important is best to use something that relates to the point your jumping to. You have to have the "#" though.

Back to top


Body Tag

The body tag lets you set the default colors and background of your page.

The layout for your page is this:

<HTML>
<HEAD>
<TITLE>The title that apears in the Blue Bar at the top goes here</TITLE>

</HEAD>

<BODY BGCOLOR="colour code here">
The page code goes right here

</BODY>
</HTML>

Here are some parameters that will make your page look cool.

BACKGROUND="picture.gif" - Use this in place of "BGCOLOR" to place an image as the background.

TEXT="colour code" - This is the colour of normal text.

LINK="colour code" - This is the colour of links.

VLINK="colour code" - This is the colour of a visited link.

ALINK="colour code" - This is the colour the link turns when the user clicks it.

Here it is all together.
<BODY BACKGROUND="pic.jpg" TEXT="FFFFFF" LINK="FF0000" VLINK="00FF00" ALINK="0000FF">

Back to top


Font Tag

The font tag lets you change the font anywhere in the page.

Here are the parameters you can use.

COLOR="colour code" - Changes font color.

SIZE="number" - Changes font size.

Size=1
Size=72

FACE="something from face menu" - Changes font face.

Face Menu
  • "arial" - This is arial font
  • "courier" - This is courier font
  • "desdemona" - This is desdemona font
  • "garamond" - This is garamond font
  • "modren" - This is modern font
  • "symbol" - This is symbol font
  • "wingdings" - This is wingdings font

Here it is all together.
<FONT COLOR="532431" SIZE=18 FACE="arial">

Hello

Back to top


Colour

Colour is made of hex codes six digits that represent a colour. Each digit ranges from 0-9 or A-F.
The background colour is black which is just "000000" white is "FFFFFF" the link colour is a dark blue which is "EEE8AA".

Red-"FF0000"
Green-"00FF00"
Blue-"0000FF"
Light Blue-"00FFFF"
Purple-"FF00FF"
Yellow-"FFFF00"
Gold-"FFD700"

Back to top


Tables

Tables are useful for organizing lots of information or even an entire page.

Here's the general format.
<TABLE BORDER=1>
<TR>
<TD>Info</TD>
<TD>Info</TD>
<TD>Info</TD>
</TR>
<TR>
<TD>Info</TD>
<TD>Info</TD>
<TD>Info</TD>
</TR>
</TABLE>
Here's the result.
InfoInfoInfo
InfoInfoInfo

TABLE /TABLE - Start a new table the BORDER="" parametre indicates the width of the table border in pixels.

TR - Is a new table row the one above has two.

TD - Is table data which is one cell the one above has six.

Here are some paramtres for TD.

  • WIDTH - Indicates the width in pixels or a percentage of the screen.
    • <TD WIDTH=200> - Width in pixels.
    • <TD WIDTH="20%"> - This cells width will be 20% of the screen width.

  • ALIGN - Aligns cell contents horizontally.
    • <TD ALIGN=LEFT> - Aligns left (default).
    • <TD ALIGN=CENTER> - Centers.
    • <TD ALIGN=RIGHT> - Aligns right.

  • VALIGN - Aligns cell contents vertically.
    • <TD VALIGN=TOP> - Aligns to the top.
    • <TD VALIGN=CENTER> - Centers (default).
    • <TD VALIGN=BOTTOM> - Aligns to the bottom.

Back to top


Lists

Lists are very useful things that let you organize a lot of information.

The Standard Bullet List:
<UL>
<LI>Apples
<LI>Oranges
<LI>Bananas
</UL>
This is the result.
  • Apples
  • Oranges
  • Bananas

Number List:
<OL>
<LI>Apples
<LI>Oranges
<LI>Bananas
</OL>
This is the result.
  1. Apples
  2. Oranges
  3. Bananas

Definition List:
<DL>
<DT>RAM
<DD>Random Access Memory
<DT>ROM
<DD>Read Only Memory
<DT>CD-ROM
<DD>Compact Disc Read Only Memory
</DL>
This is the result.
RAM
Random Access Memory
ROM
Read Only Memory
CD-ROM
Compact Disc Read Only Memory

You can also have something called nested list which is a list in a list.
<DL>
<DT>Starcraft
<DD><UL>
<LI>Strategy
<LI>Realtime
<LI>Space
<LI>Tarren
<LI>Zerg
<LI>Protoss
</UL>
<DT>Duke Nukem
<DD><UL>
<LI>Action
<LI>Shooter
<LI>Aliens
<LI>Guns
</UL>
</DL>
This is the result.
Starcraft
  • Strategy
  • Realtime
  • Space
  • Tarren
  • Zerg
  • Protoss
Duke Nukem
  • Action
  • Shooter
  • Aliens
  • Guns

Back to top


Frames

Frame commands have to placed in the HEAD and /HEAD tags for them to work.

<FRAMESET COLS="30%,70%" ROWS="15%">

  • COLS - Sets how many columes there are. Like tables they can be in pixels or a percentage of the screen.
  • ROWS - Sets how many rows there are. They can be in pixels or a percentage too.

<FRAME SRC="page.html" NAME="A"> - This tells the computer which html page to put in each frame. You need a frame src for every frame you make.

NAME - Assigns a name to a frame. If you click a link in one frame and another frame changes this is how it is done.

Here is the link code for putting a page in another frame.

<A HREF="page.html" TARGET="frame name">Frames</A>

Click Here to see what the frames look like. It will put this page in a 50/50 division (Check the source).

Back to top

Hope all this stuff helps. Everything here should help you build a really awesome page. The best thing to do is try different things.


© 2000 ~ E-Mail me at Firstelder_D@Yahoo.com