This is the basics of HTML.

As a general overview before looking at some of the actual mark-up tags(commands) you should know a little about what you are getting into. HTML stands for Hypertext Markup Language, it is basically a tag language. Meaning when you do a command (<command>) you need to terminate that command when you want it to end so you need a (</command>). The / indicates the end of the command that is stated. These bracketed commands are called tags. HTML is very easy "language" to use and keeps expanding, so let's get on with it.

Another quick point is that when you are doing references to files / directories, if you are on a UNIX machine be sure you pay special attention to case sensitivity. Windows machines do not care about this but UNIX does so you can break a lot of links and things that use to work if you are moving to a real machi...I mean UNIX machine.

Also beware microsoft webservers are prone to a lot of viruses so you may want to look into an alternate webserver if you are seriously considering a webpage on the public internet.

Text Manipulation

Text Manipulation is something that you will want to do to make a flashy page to catch peoples eyes. There are many basic things that you can do such as fonts, bold, underline, colors..... Here are a few of the common ones.

There are several ways to change the Alphanumeric characters with font:

Text font face

<Font Face= arial> will be look like this Font Face= arial for the same command

Text Color

<Font color= hex number according to RGB or name > Called this Red
hex numbers are 0-F (A=10 in decimal numbers) the first 2 digits are for R(Red in RGB), second 2 are G(Green), and then Blue. So here are some examples using hex RGB colors.

red: FF0000
green: 00FF00
blue: 0000FF
black: 000000
white: FFFFFF
grey: 888888
yellow: FFFF00
cyan: 00FFFF

Bold / Underline / Italic ...others

There are also the ever famous ones:
<b> - Makes letters bold
<i> - Makes letters italic
<u> - Underlines Letters
<strike> - ~~strike through~~ Letters
<sub> - Subscript₂ the 2
<sup> - Superscript² the 2
<blink> - Blink Does not work a lot so do not depend on this.
<PRE> -

This     will keep your   preformatted text, starting on a new line.

Enhancers / Format

Centering items

<h2><Center>This will a centered header</Center></h2>
This is centered with the above command

New lines/paragraphs

If you would like to start a new paragraph or just a good seperator:

<p>This will separate your paragraphs

Another of the most common is the start of a new line:

<br>This starts the next line without seperation

Comments

< !-- You can add comments here that will not be displayed on the webpage -->

Horizontal line

<hr> will create a horizontal ruled line across the page, will show up like

<hr width= % or number> will create a ruled line depending on the width you define, most likely want to use the percentage to be browser friendly to not not wrap so can adjust to something like

Definition List

You can create a definition list, <dt>, real quick which will typically indent the term <dt> is the definition term, <dd> is the definition for the term.
<dl>
<dt>red</dt>
<dd>FF0000 </dd>
<dt>green</dt>
<dd>00FF00 </dd>
</dl>

The above would produce the below:

red: FF0000
green: 00FF00

OR you can make it compact, meaning that if the definition is small enough it will put it on the same line as the term. Just add the word compact to the dl.

<dl compact>
<dt>red</dt>
<dd>FF0000 </dd>
<dt>green</dt>
<dd>00FF00 </dd>
</dl>

The above would produce the below:

red: FF0000
green: 00FF00

Viewable tag Symbols on the page like <>

< = <

> = >

& = &

" = "

Tables

<CAPTION> Table Title </CAPTION>

<TR>

<TH> Column1 Row1 Subtitle </TH>

<TH> Column2 Row1 Subtitle </TH>

<TH> Column3 Row1 Subtitle </TH>

<TH> Column4 Row1 Subtitle </TH>

</TR>

<TR>

<TD> Column1 Row2 Item </TD>

<TD> Column2 Row2 Item </TD>

<TD> Column3 Row2 Item </TD>

<TD> Column4 Row2 Item </TD>

</TR>

</TABLE>

The above will produce a table like below:

This is a table example

<TH> Column1 Row1 Subtitle </TH>

<TH> Column2 Row1 Subtitle </TH>

<TH> Column3 Row1 Subtitle </TH>

<TH> Column4 Row1 Subtitle </TH>

<TD> Column1 Row2 Item </TD>

<TD> Column2 Row2 Item </TD>

<TD> Column3 Row2 Item </TD>

<TD> Column4 Row2 Item </TD>

*Be sure you have the the closing for each of the TABLE tags or you can get some very whacky results including the table not being shown at all. Or other text disappearing all together.

Linkage

Different page/URL

This is how you link to another page:

<a href="http://www.whatever_page.html"> Clickable Keyword(s) here or img *see below.</a>
So if you want to go to http://www.yahoo.com use this <a href="http://www.yahoo.com">Yahoo</a>

Same page just somewhere else

This is how you can use a link to move down in the page.

On this example Category is the keyword to click on to move down the page.

<a href="#links">Category</a></dt>

body of the web page......

Hot link Pics

you can also use <a href="..."> for attaching links on pictures. Just put the img src=".." in the keyword postion.

Backgrounds and Graphics

Where do you put it? Well right here up top for background.

This is the actual top of this page.

<HEAD>

<TITLE>Mark's Homepage</TITLE>

</HEAD>

<BODY><body background="GRAPHICS/87.gif" BGPROPERTIES=FIXED

text=#ffffff

link=#d9d919

vlink=#00ffff

bgcolor=#588072>

<h3>This is the basics of HTML.</h3>

</Center>

Under body background I have GRAPHICS/87.gif. This is my background pattern. So you would not want to type that in unless you copied my background and named it the same thing(87.gif) and had it in a directory named GRAPHICS like I do.

The best thing for this is to go to other sites and copy them. May sound like stealing but most people do not care and have copied them from others anyway. As far as simple colors here is a GREAT site to do your referencing. All you need to do is click the color that you are interested in and it will decode all the numbers you need.

To add background color to a table cell use bgcolor as shown below: <tr><td bgcolor="yellow">Whatever in the cell </td><tr>

Whatever in the cell

Adding images

First thing you want to do is to find the image you want to have on your page and save it to your directory.

Note: if you are going to do a lot of webpages or someting you will probably want a separate images directory just to keep your directory neat and organized.

Say the picture you save is demon.gif

Then just simply add the text below

This says that demon.gif is in the same directory as this html file so place it here on my webpage.

Optional commands with img src

You can also add or alter the image with some of the following commands (these are all optional):

align=(left,right,middle,top,bottom); stands for alignment, will align input where you define on the page(or cell in a table) you want it. Allows you to be able to align text around the image.

border = # ;(depending on the number you put will be the border size, 0 is most frequent for no border).

Height = # ;Change the Vertical size of an image depending on the number you input.

Width = # ;Change the Horizontal size of an image depending on the number you input.

Alt = text ;Text is the text to be displayed from a browser that can not display images.

VSpace = # ;Is the number of pixel spaces to leave above and below an image.

HSpace = # ;Is the number of pixel spaces to leave to the left and right of an image.

BE ADVISED: UNIX is case sensitive meaning if you save the file and it is demon.GIF, the above will not find this file you will have to specify demon.GIF.

Basic Format

This is a basic page you could produce. So you may want to copy this just as an outline.

    <html>
    <head>
    <TITLE>This is my page</TITLE>
    </head>
    <body>
    <P>This is the huge body of my page</P>
    </body>
    </html>

<HEAD> is where you usually describe the document so you would most likely only have the <TITLE> tag here.

Of course you will want to do more than that or it will be a boring page...

Troubleshooting

1 - I can not see an image I defined or expect and only see

Check that image is in the directory you defined.

Check case sensitivity

Try to open image by itself through browser, just double click image to verify it is not corrupt

Check the file size if it is really low then something may have happened in the transfer of the file.

2 - I put a table in and now I am missing text or the page does not appear.
Check that you have all the closing table tags you need.

3 - I am trying to get the symbol < using Netscape but I just get &lt.
You need to add a semicolon to the end.

General Notes

This is just a quick reference help guide. If there is something that you would like to click to a Good referal page.

Here is a link for some other HTML tags

Return Home