Basic HTML


Here is what you need to write HTML:
  • Word processor (such as Word, WordPerfect), text tool (Notepad on the PC, TeachText on the Mac)
  • or an HTML editor--there are many different ones--like Front Page Express or Composer in Netscape
  • with FTP tool (File Transfer Protocol) such asWSFTP_LE you can upload and download your

    HTML and Images to your Web Site account.
    On the PC or on the Mac you can also move your files from your computer to your server.

    click to DOWNLOAD WSFTP_LE another ftp program SmartFTP is available in 19 languages.
    or Fetch for Apple Macintosh

  • Free Website Space at  Tripod.com
  •                                     Geocities.com
  • also your Server gives you a certain amount of MB Free Web Space.
    Once you are ready to make a great Web Page without all the Advertisement on top from those Free Websites a Great place to sign up is at: http://www.namesecure.com

  • You need to have a copy of these notes so you can follow the step-by-step instructions.
  • To do this, you can:
  • Select the Print button on your browser and use a printed copy of these notes.
  • OR Have this page open but shrink the window down so you can see these notes and your HTML editor
    (or word processor) at the same time. You can rightclick on your Taskbar and Align Windows vertical or horizontal.
    This way you have both side by side for viewing.
  • You might also want to click on Basic Internet Info
  • What is theWWW

It is easy to create a Web Page

To create this Page, just use Windows Notepad, or any Word Processor.
When finished, save it as whatever.html
{ the first page is usually index.html--but you can Name it anything you desire }
to a Folder in which you keep all your Images and this newly created Web Page
for viewing and later to upload to your Server or wherever you have created a Web Space account.
I create my Web Pages on Notepad
Please Notice: html and htm---Win3.x users save it as htm

Whip open Notepad, and type the following

<HTML>
<HEAD>
<TITLE>My Personal Web Page!</TITLE>
<BODY>
(Type:) Wow I am learning how to create beautiful Web Pages.
</BODY>
</HTML>

Now save it as index.html in your Folder and double click to see what you have created.


The Basics.


HTML stands for HyperText Markup Language. HTML is simply a set of standardized tags
that web browsers read and then interpret for displaying the Web page.
If you ever have used the older desktop publishing programs,
the HTML tags work in the same way.

All HTML tags start and end with the lesser than and greater than keys used as brackets,
for example:
<HTML>
or
<BODY>
Most HTML tags use a beginning and ending tag, for example:
<TITLE>This is a HTML Lesson</TITLE>
or
<H2>Headline Size 2</H2>
The best Learning exerience is by doing it--lets have fun!

STEP ONE

At the top of your text page enter the following on separate lines:

<HTML>
<HEAD>
<TITLE> My Personal Homepage </TITLE>
</HEAD>

Here is the explanation of what you have just accomplished:
<HTML> identifies the page as an HTML document;
<HEAD>tells the browser that the header information will be appearing;
<TITLE>tells the browser what to show in the title bar of the browser
(it's the top bar of the browser);
"My Personal Homepage"
will appear in the top bar of the browser;
</TITLE>ends the title entry;
</HEAD>ends the header entry.

It is best if you use all capital letters as it is much easier to read thru your HTML
for any mistakes or changes you would like to make later.
It will show up correct in smaller lettering also but use capital letters--you will not regret it.


STEP TWO

Now enter the following on the next line:
<BODY>
<H1> Welcome to My Web Site! </H1>

Recap:
<BODY>tells the browser that the body of the page or document is next;
<H1> tells the browser that the headline size 1 is to be used;
"Welcome to my Web Site!"will appear in large text;
</H1> ends the headline entry.

There are six levels of headlines, 1 being the largest and 6 the smallest.
You can use the different sizes to indicate subtopics for your page if you have a lot of text.
As a design issue, it is recommended that you only use the headlines for dividing up pages
and to keep the headlines fairly brief. Headings Info click on me


STEP THREE

In your <BODY> tag, it is also determined what color background or maybe a background image,
and which Font Color you use for your Text.
Also the Links going to different URLs or one of your other Pages you wrote.

{LINK = This Attribute will let you define the color that ALL of your Links are displayed as}
{VLINK =[Visited Link] defines the color that ALL the Visited Links appear in.
If you click on a Link and go to a page, and then come back to the original page,
the Link you just clicked on is now another color. You can define that color using VLINK}
{ALINK =[Active Link] sets the color the Links will turn as you click on them.}
To learn more about URL's click on URL

STEP Four

Hit the ENTER key and write this on your next line:

<P>
Welcome to my Homepage. It is in the beginning stages.
Soon I will add information about my interests, hobbies, or business.
And also add pictures and other images.

Recap:
<P> tells the browser there is a new paragraph and immediately enters the text following it;
"Welcome to my Homepage ..."will continue as a single paragraph.

You can enter in more text if you would like.
Be sure to use <P> to separate your paragraphs.
The text from a paragraph will continue as one block of text until the
browser encounters another <P> or headline tag.

It is important to note that browsers ignore what is called "non-blank spaces" or "white space".
In other words, if you are typing along and you hit the return key for a paragraph break,
if you don't insert the <P> into your web page, the browser will run the two paragraphs together
as if they were one. The browser will also ignore the double spaces between sentences.
There is also<BR> which is a break in your Text.
I use it if I want to read my info more clearly. Here is a sample:
"I am home now and hope you are ready with supper."
Now add a <BR> in between hope and you and this is what you get.
I am home now and hope
you are ready with supper.

This <BR> tag is especially nice when you write Poems to break the lines.


STEP FIVE

Now you enter this last information into your HTML on your next line:

</BODY>
</HTML>

Final Recap:
</BODY>closes the body of the page;
</HTML>closes the HTML.

now save it as index.html or index.htm


This is what you should see now in your HTML

Sample:

Welcome to My Web Site!

Welcome to my Homepage. It is in the beginning stages.
Soon I will add information about my interests, hobbies, or business.
And also add pictures and other images. VIEW IT

You see how it is hanging to the left.
The Browser will by Default align it to the left unless you enter
the <CENTER> tag and close it after your Text with </CENTER>.
So lets do the same thing again with adding the tag <CENTER>.

Type again:

<HTML>
<HEAD>
<TITLE> My Personal Homepage </TITLE>
</HEAD>
<BODY>
<CENTER><H1> Welcome to My Web Site! </H1></CENTER>
<P>
<CENTER>Welcome to my Homepage. It is in the beginning stages.
Soon I will add information about my interests, hobbies,
or business. And also add pictures and other images.</CENTER>
</BODY>
</HTML>

Now save it as index2.html or index2.htm VIEW IT


Ok let's add a link. A link is connection to another Web Site called URL (Uniform Resource Locator)
or to another Page that you have created and want to link with.
  • {LINK=This Attribute will let you define the color that ALL of your Links are displayed as}
  • {VLINK =[Visited Link] defines the color that ALL the Visited Links appear in. If you click on a Link and go to a page, and then come back to the original page, the Link you just clicked on is now another color. You can define that color using VLINK}
  • {ALINK=[Active Link] sets the color the Links will turn as you click on them.}
so you want to write a different color to each LINK--the color choice is up to you
I will show you an example further down our study.
Now lets center this one right away unless you want it on the left hand side of your page.
And you will add into your BODY Tag: Type:

<HTML>
<HEAD>
<TITLE> My Personal Homepage </TITLE>
</HEAD>
<BODY>
<CENTER><H2>Welcome to My Web Site!</H2></CENTER>
hit the enter key for your next line and type:
<P>
hit the enter key for your next line and type:
<CENTER><A HREF="http://www.tripod.com/">Tripod.com.</A></CENTER>
hit the enter key for your next line and type:
</BODY>
hit the enter key for your next line and type:
</HTML>

Now save this as index3.htm or index3.html VIEW IT

Now let's add an Image to the Link. So instead seeing the writing of the Web Site
we will add the Image thats shows you the Site on it.

Type:

<HTML>
<HEAD>
<TITLE> My Personal Homepage </TITLE>
</HEAD>
<BODY>
<CENTER><H2>Welcome to My Web Site!</H2></CENTER>
<P>
now watch where the image is written

<CENTER><A HREF="http://reah.freeservers.com/">
<IMG SRC="adnamar.gif" WIDTH="88" HEIGHT="31" BORDER="0"></A></CENTER>
</BODY>
</HTML>

now save it as index4.html or index4.htm VIEW IT

Recap:

Now remember: the first Page you write is always index.html or index.htm
but the other pages you can name anything you would like for instance pictures.html and so on.

Also Note when you add a Image it is very Important to add the WIDTH and the HEIGHT
(Pages load much faster) and the Border="0", so your Image does not have a border around like this:
Image with Border Adnamars Place

Image without a BorderAdnamars Place

On some Images you just don't want a Border around the Image especially if the Image is odd shaped.
Another thing to write into your Image is:
<CENTER><A HREF="http://reah.freeservers.com/">
<IMG SRC="adnamar.gif" WIDTH="88" HEIGHT="31" BORDER="0" ALT="come visit Adnamars Place"> </A></CENTER>

the Alt="come visit Adnamars Place" looks like this on your Image.
Hold your mouse arrow over the Button to see
come visit Adnamars Place

This is for People that have the Images turned off in their Browser
otherwise they wont know there is a URL to go to or where it leads to.

Adding a Background Image or Color to your Page

One of the things to learn is how to add a background
color or a background image to a web page.
You will notice notice an html tag labeled <Body> in your HTML right after the </Head>.
From within the Body tag, we can set the background color
or a background image to use for your web page.

To use a background color of white for our page, we'd add the following to our<Body> tag
<BODY BGCOLOR="#FFFFFF">

You can use all different colors besides white.
You can find the color List right here*click on COLOR CHART

To use a background image instead of a color, we'd add the following to the <BODY> tag:
<BODY BACKGROUND="filename.gif">

Just, substitute filename.gif with the name of your image file.
Don't forget, that when you use a image file for a background,
you'll need to upload that image file to your web site separately from,
and in addition to your html file.

Adding Graphics To Your Page

Adding images to your web page is lots of fun!
Choose an image that you want to add to your page. In this example here,
I've included an image called heart.gif

To add the image heart.gif to my web page,
I'd use the following html:<IMG SRC="heart.gif">

There are other attributes for images as shown below.

<IMG SRC="heart.gif" HEIGHT="90" WIDTH="90" BORDER="0" ALT="Welcome to my Home Page">
the height and width of the image are specified in pixels.
Using the height and width tags, speeds loading of the image in the web browser.
The border=0 attribute specifies that there is to be no border around this image.
The alt= specifies alternate text that will display in browsers that have the graphics turned off.

And here is the Image--right click on it
a window will open and you can save as
to a folder in your Computer--enjoy!

RECAP:

Graphics in subdirectories

Using subdirectories, things can get a little complicated when you tell
your page where to find all the graphics files it needs. Here are three
different cases you might have:
  1. If your graphics file is in the same directory as the HTML file for your page,
    simply give the graphic filename as part of your IMG SRC tag.
    For example, if your graphic is named "mygraphic.gif":
    <IMG SRC="mygraphic.gif">
  2. If your graphics file is in a subdirectory and your HTML file is in
    your main Tripod Member Directory, you'll need to include the name of the
    subdirectory in your IMG SRC tag. For example, if your graphics file is
    named "mypicture.gif," and it is in your "images" subdirectory, specify
    the pathname:
    <IMG SRC="images/mypicture.gif">
  3. HINT: Notice that there is no "/" character before the name of the
    subdirectory. That's because if you put a "/" in front, the server
    will try to find a top_level member directory with that name, instead of
    one of your subdirectories. We recommend that you play it safe by always
    including the full path.
  4. If your HTML file is in a subdirectory and your graphics file is in
    another directory, you'll need to include the name of your main directory
    in addition to the location of the graphic. For example, if your member
    name is TriMember, your graphic "mygraphic.gif" is located an "images"
    subdirectory, and the HTML file is located in another subdirectory, the
    image reference would be:
    <IMG SRC="/TriMember/images/mypicture.gif">
  5. In general, it may be safer to always specify the whole path as in the
    above example so you don't have to worry about where the graphic is in
    relation to where the HTML file is located.

Another thing for you to pay attention to are the Images.
If they have to many KB (KiloBytes) and you add too many with a large amount of KB (KiloBytes),
your Web Page will load very slow and some people will get impatient
and not stick around to view your Site
(sure would be a shame after all that work you put into your beautiful Site).
So watch out for those KB in Images, Midis and Wave files.

Bit
Byte
Kilobyte (K or KB)
Megabyte (MB)
Gigabyte (GB)
Terabyte (TB)		 A binary digit; 0 or 1
8 bits, or 1 character
1,024 bytes
1,024,000 bytes
1,024,000,000 bytes
1,024,000,000,000 bytes

Learn about Fonts for your Pages

you'll learn how to use the Font Face, Font Size, and Font Color tags.

The Font Face you specify, must be installed on the computer of the visitor to your site,
in order for them to see the font you've specified.
If the visitor to your site doesn't have the font installed,
most likely they will see your text with the default font face for their web browser.

Font Face:

To use the Font Face tag on your web page, enter the following tag into your HTML:

<FONT FACE="arial">This text is shown with the Arial Font.</FONT>

You can get many Fonts from http://www.microsoft.com/truetype

Font Size:

To use the Font Size tag on your web page, enter the following tag into your HTML:

<FONT SIZE="5">This is font size 5</FONT>

There are seven Font sizes for you to choose from,
ranging from Font Size 1 (the smallest) to Font Size 7 (the largest)
Try changing the 5 in the line of html above to a 1 and see what happens
when you view your page.

Now the Font Color:

The Font Color tag does exactly what it says... it changes the color of your fonts.

To use the Font Color tag on your web page, enter the following tag into your HTML:

<FONT COLOR="blue">This Font is shown using the color Blue.</FONT>

If you want to see a listing of the html codes for various colors,
use the

If you want to use color and size at the same time, enter this tag into your HTML:

<FONT SIZE="3" FACE="Arial" COLOR="#0000FF">

This is FONT SIZE="3" and the COLOR="#0000FF" and FONT FACE="Arial"

Add Bold, Italic or Underlined Text

Adding emphasis to a web page can be done in many ways,
including use of the Bold, Italic and Underline tags.

To create BOLD text within html,
use the following tag around your text like this: <b>This text is Bold</b>

To create Italicised text, use the following around your text:
<i>This text is in italics</i>

To create Underlined Text,
use the following around your text: <u>This is underlined text</u>

If you choose to use these tags, keep in mind
that you'll want to use them sparingly to create emphasis.
If you use them too much on one web page, the emphasis will be lost or diminished.

Add Lists To Your Web Page

Looking for an orderly method to present your information?
If so, you'll want to use this tutorial to learn about creating lists for your web page.

HTML supports several types of lists. Three of the most popular forms of lists are shown below:

<DL> ... </DL> - Definition list.
<OL> ... </OL> - Ordered list
<UL> ... </UL> - Unordered list

The Definition list is simply a list of terms, and their definitions.
Here is an example of how you would add the html to your page for a definition list:

<DL>
<DT>Term<DD>This is the definition of the first term.
<DT>Term<DD>This is the definition of the second term.
</DL>

The Ordered list is used to present a numbered list.
Here is an example of how you can create an ordered list:

<OL>
<LI>These are the Tags
<LI>to use just copy and paste
<LI>Got more Qustions write to Reah.
</OL>

  1. and this is hopefully
  2. how it should
  3. look to you

The Unordered list is typically used to separate items with bullets.
Here is an example of an Unordered list:

<UL>
<LI>First list item
<LI>Second list item
<LI>Third list item
</UL>

  • and this sample
  • should ** have
  • Bullets ** yeah

Lets write an E-Mail Link into your Web Page

One of the most widely used HTML tags is the "mailto" Tag.
Using the mailto tag, allows visitors to your site to send you E-mail by simply clicking on your "mailto" link.
<A HREF="mailto:webmaster@renate-designs.com">E-Mail</A>

write your email Name after mailto: and instead of just writing E-Mail
you can write anything you would like into it (Sample--Write to Reah)

Add A Link To Other Pages

Soon, you'll want to add more web pages to your Server,
and once you do, you'll want to create a link from your home page to the additional pages.
So if your index.html file is your home page,
and the new page you want to create a link to is called welcome.html
And to create a link from index.html to welcome.html you'd enter the following html
on the index.html page.
<A HREF="welcome.html">Click here to view the welcome page</A>

If you're file named welcome.html
was in a different directory on your server, you'd have to name the directory also as follows:

<A HREF="http://www.tripod.com/username/directory/welcome.html">
Click here to view the welcome page</A>

Of course, substitute your username at Tripod with username,
and the directory with the name of the directory you created on the server.

Now you are ready to upload your first Web page and then
come back and learn some more HTML Lessons.It is very important to remember
that web file names are case-sensitive.
So for instance if you wrote a Image into your HTML and named it "picture.jpg" or "gif"
make sure you also upload it as such and not(Sample--"PICTURE.jpg" or "gif").
Watch for lower case or upper case lettering.

And also most web servers accept the file name "index.htm" or "index.html"
as the default home page.

Now you can go through the steps to upload your file to the web server.

To transfer the file to the server, we use an FTP tool.
FTP stands for "File Transfer Protocol".
With the FTP tool you copy files from your hard drive to the server or from the server
to your hard drive.

So lets pretend you have a Web Account at Tripod,
open your WS_FTPLE and enter the following information

  • Profile Name: www.tripod.com
  • Host Name: ftp.tripod.com
  • Host Type: Automatic Detect
  • User ID: Insert your TRIPOD MemberName here.
  • Password: Insert your TRIPOD password here.

Once you have logged into the TRIPOD server, you will be in your home directory.
Simply select your file from the harddrive,
click on the -> arrow key in WS_FTPLE and your file will be uploaded to the Tripodserver.

The same applies for all Web Site accounts


Now that the file is uploaded to the server,
you can view your web page live and online!

All you need to do is double click on your browser to open it up
and enter in your URL (Uniform Resource Locator) in
the Address bar in Microsoft Internet Explorer or Location bar in Netscape Navigator.
Your URL is your web address.

Your URL (Web Page at Tripod would be: "http://members.tripod.com/yourMemberName/"
Remember, your Screen Name is case-sensitive too.
If your Member Name is reah, all in lowercase, then your URL will be http://members.tripod.com/reah/.
However, if your screen name is REAH, with the capital "REAH",
then your URL will be "http://members.tripod.com/REAH/".

Should you encounter any problems, be sure to send email to me
and I will help you wherever I can . My E-Mail is: reah@renate-designs.com

Add Horizontal Rules !

Learn how to create a horizontal rule (page divider)!
Throughout your web travels, you'll see lots of horizontal rules.
A horizontal rule looks like this:

To create the above example, simply type <HR>

Now let's learn how to customize our horizontal rules

The following attributes will allow you to choose how your horizontal rule will appear:
  • Size
  • Width
  • Align
  • NoShade
  • Color

To demonstrate, lets create a horizontal rule with a size of 4 and a widthh of 50% and set the align attribute to the left.

The html for the above horizontal rule would look like this:

<HR Size=4 width=50% Align="left"> Of course, you can also create a horizontal rule using an image file.

Now lets create one in color:

your Tag would look like this:


<HR ALIGN="CENTER" WIDTH="75%" SIZE="5" noshade COLOR="green">

 

*******************

 

Meta Tags Examples

<TITLE> Tags The <TITLE>
tag is the first thing that a user sees when your site is returned by a search query.
You only have a split second to grab your targets attention.
Place keywords that are most pertinent to your business in the title tag.

Effective title tags include only relevant keyword or keyword phrases.
Avoid non-indexing filler words, such as a, an, the, welcome and home page.

Example:

<TITLE>Dog Groomers Salon: Professional Dog Grooming Tips, Pet Care and more</TITLE>

<META> tags
<META>
tags are HTML code that enable the search engines to determine
what keywords are relevant to this specific site.

The META "description" tag will contain a description of your site.
Make sure your description contains some of your relevant keywords.

The META "keywords" tag will contain a listing of your keywords and keyword phrases
that are relevant to your site and enable a search engine to find you.

Example:

<META name="DESCRIPTION" content="Dog Grooming Tips From Top Professional Pet Groomers">

<META name="KEYWORDS" content="dog grooming, pet care, animal groomers, Dog Grooming, Pet Care,
Animal Groomers, DOG GROOMING, PET CARE, ANIMAL GROOMERS">

*******************

What is a Virus

A Neat Color Cube

Network Etiquette

Check out this Color Cube 2