HTMl Basics
Site hosted by Angelfire.com: Build your free website today!

HTML Basics

This tutoria presents examples of some HTML code that you may want to use in your home page.
These are basic web page features but allow you to create a wide and interesting variety of web formats. Further information is available through links at the end.
These codes may be used: anywhere between the <body> and </body> tags of the Editor. The top part of each section is what the code should look like in your document. The lower part of each section is what it will look like on your home page.
Big Hint! Cut and Paste the top part of each sample right into your page. It's easy. Try it!


The head element identifies the first part of your HTML-coded document that contains the title. The title is shown as part of your browser's window.

The title element contains your document title and identifies its content in a global context. The title is displayed somewhere on the browser window (usually at the top), but not within the text area. The title is also what is displayed on someone's hotlist or bookmark list, so choose something descriptive, unique, and relatively short. A title is also used during a WAIS search of a server.

<html> <header> <titleYour Title Here> </header>

Neither the Head nor the Title show on the text area


The second--and largest--part of your HTML document is the body, which contains the content of your document (displayed within the text area of your browser window).

Start with the colors you want. <body bgcolor="#ffffff" text="#0000ff " link="#ff0000" vlink="#ff18ff">

This page has a white (ffffff, or all colors) background ("bg"), blue(0000ff) text, a red link highlight and a green (00ff00) highlight for visited links (vlink). You can see the pattern here for mixing colors. (Note that "f" is hexadecimal for 16 and "ff" is 256) You can also just call out colors as you will see later.


<center>
This will center a region of text or images, etc.
</center>
This will center a region of text or images, etc.

<b> This will make a region of text bold </b>
This will make a region of text bold
<hr> draws a horizontal line
<br> carriage return
<i> italic letters </i>
italic letters
<p> new paragraph


<h1> Heading size 1 </h1>

Heading size 1


<h2> Heading size 2 </h2>

Heading size 2


<h3> Heading size 3 </h3>

Heading size 3


<h4> Heading size 4 </h4>

Heading size 4


<h5> Heading size 5 </h5>
Heading size 5

<h6> Heading size 6 </h6>
Heading size 6

<font size="1">Font size 1 </font>
Font size 1
<font size="2">Font size 2 </font>
Font size 2
<font size="3">Font size 3 </font>
Font size 3
<font size="4">Font size 4 </font>
Font size 4
<font size="5">Font size 5 </font>
Font size 5
<font color="blue">Blue Text </font>
Blue Text
<font color="red">Red Text </font>
Red Text
<font color="yellow">Yellow Text </font>
Yellow Text
<font color="green">Green Text </font>
Green Text

These font codes will work with Netscape 3.0 and Internet Explorer 3.0 or greater.

<font face="Helvetica">Helvetica font </font>
Helvetica font
<font face="New Century Schoolbook">New Century Schoolbook font </font>
New Century Schoolbook font
<font face="Lucida">Lucida font </font>
Lucida font


<img src="http://www.angelfire.lycos.com/doc/images/animate/bookani2.gif" align=center> load an image with this text centered vertically to the middle of the image
load an image with this text centered vertically to the middle of the image


In the advanced editor, you can place the HTML code
anywhere.
Usually graphics are in a
directory called /images.  For example, to put the animated book on a 
page you would put:
<img src="/images/bookani2.gif">
To use any other image just replace the bookani2.gif with the name of the image you want. It can be a gif or jpg image.

To put your uploaded grahics on your page do the following:

<img src="xx/yyy/images/zzzz.ttt">
        where:   xx   web name
                 yyy   is your directory name
                 zzzz  is the image filename
                 .ttt  is the .gif or .jpg filename extension

How do I make graphics smaller?

Use the HEIGHT and WIDTH options in the IMG SRC tag:

<img src="xx/yyy/images/zzzz.ttt" height=30 width=20>
        where:   xx   web name
                 yyy   is your directory name
                 zzzz  is the image filename
                 .ttt  is the .gif or .jpg filename extension
                 30    is a height of 30 pixels.
                 20    is a width of 20 pixels.

Some World Wide Web browsers--primarily those that run on VT100 terminals--cannot display images. Some users turn off image loading even if their software can display images (especially if they are using a modem or have a slow connection). HTML provides a mechanism to tell readers what they are missing on your pages. The ALT attribute lets you specify text to be displayed instead of an image. For example: </IMG SRC=" zzzz.ttt " ALT="Up"> where zzzz.ttt is the picture file name and extension (gif or .jpg).
<a href="/doc/faq.html"> create a link to another page on the same server</a>
create a link to another page on the same server
<a href="http://werbach.com/barebones/barebone.html"> create a link to another page on another server</a>
create a link to another page on another server

<blink> make text blink </blink>
make text blink
<pre>
turn
on fixed
width font with preformatted text
</pre>
turn
    on fixed
  width font with preformatted text

Unnumbered list
<ul>
<li> list item 1
<li> list item 2
</ul>

Numbered list
<ol>
<li> pc
<li> mac
</ol>
  1. pc
  2. mac

Nested list
<ul>
<li>list
<ul>
<li>nested
<ul>
<li>twice
</ul>
</ul>
</ul>

<blockquote>
This will quote a block of text as a separated paragraph like this, indented on both the left and right sides. You may also put other codes inside the blockquote as well, such as this bold, italicized link to point you to
<b><i><a href="/doc/teach.shtml"> other HTML resources which you haven't found here.</a></i></b>
</blockquote>
This will quote a block of text as a separated paragraph like this, indented on both the left and right sides. You may also put other codes inside the blockquote as well, such as this bold, italicized link to point you to other HTML resources which you haven't found here.


General Table Format

The general format of a table looks like this:
 
<TABLE>  
   start of table definition 
 
<CAPTION> caption contents </CAPTION>      
  caption definition 
 
<TR>     
  start of first row definition 
<TH> header contents 01</TH>      
  first cell in row 1 (a head) 

<TH> header contents 02</TH> last cell in row 1 (a head) </TR> end of first row definition <TR> start of second row definition <TD> cell contents </TD> first cell in row 2

<TD> cell contents </TD> last cell in row 2 </TR> end of second row definition

<TR> start of last row definition <TD> cell contents </TD> first cell in last row ... <TD> cell contents </TD> last cell in last row </TR> end of last row definition </TABLE> end of table definition

The <TABLE> and </TABLE> tags must surround the entire table definition.

This table looks like this:

caption contents
header contents 01 header contents 02
cell contents 11 cell contents 12
cell contents 21 cell contents 22

Now you know basic web page features that allow you to create a wide and interesting variety of web formats. Further information is available through links below.

Making a HTML Table using WORD Word Processing Software
Links on Web Authoring
Color Basics

Email: sumhow@iname.com

© HW Summers, 1997