Basic HTML Guide
Basic HTML Guide
Web Design Pros basic HTML guide provides an easy way to create a basic Web sites yourself. Just read through these simple and helpful instructions for a Web site will help you get a basic website online.
What is HTML?
Build a
Foundation
Set up your page
(coding and titling)
Choosing colors for your
page, text, and links
Text Me Up
Put some text on
your page
Headlines and titles
Making paragraphs and
separate lines
Bolding and italicizing
your text
Centering your text
Preformatted text
(placing text in fixed positions)
Make a List
Unordered lists
(with bullets)
Ordered lists (with
numbers)
Definition lists (term
on one line, definition indented on the next)
Images Are
Everything
Uploading images
(getting them from computer to Web site)
Placing images on your
page
Links, Links,
Links
Link text to
another page
Link text to another Web site
Link text to a specific section
Get Some Mail
Posting your
e-mail address
More
Information (Online Resources, Books and More)
HTML stands for Hyper Text Markup Language. And despite
the scary name, it’s nothing more than a way for your page to communicate with Web
browsers (such as Netscape or Internet Explorer). In essence, think of HTML as a postal
carrier that delivers the contents of your page to the screens of computers everywhere -
but without the postage.
Basically, HTML consists of "tags," which are words combined with brackets
(<>) and slashes (/) . Tags instruct the browser on how to display your page. There
are a few important things you need to know about tags:
 |
Tags are always surrounded by brackets. Ex: <HTML> or <B>. |
| |
Almost all tags come in pairs -- one starting the action and the other ending the action. The first tag that starts the action is just in brackets (<>) while the second tag that ends the action needs a forward slash with brackets (</>). Ex: <B> tells the browser to show the text that follows in bold type while </B> tells the browser to stop bolding the text. |
| |
Tags must be in a specific order. When you start an action and place another action in it (such as <HTML> to start your page and then <HEAD> to start a heading) you must close the second action before closing the first (such as </HEAD> then </HTML>). So, <HTML> <HEAD> </HTML></HEAD> will not work - it must be <HTML> <HEAD> </HEAD> </HTML>. |
| |
Tags are not case sensitive. <HEAD> is equivalent to <head> or <HeaD>. (We’re just capitalizing for instructional purposes.) |
| |
Tags will actually make sense to you when you finish reading our guide and try out examples for yourself. (We promise). |
The best way to learn how to use HTML is to use it. Try
it out as you go through this guide and get to know it. You can even "borrow"
HTML from pre-made pages, such as this one. You can see this page’s HTML by viewing
the "code source" in your browser. For example, if using Netscape, go to VIEW
and then SOURCE. You can see the code for this page with all the tags, etc. Feel free to
copy the tags and place them in your own document to see what each tag does.
Remember, you won’t crash your computer or release a new strain of the plague by
making HTML errors or trying out new tags. So just have fun.
Set up your page (coding and
titling)
In essence, here are the tags you need on every
page:
| |
Every page starts with <HTML> and ends with </HTML>. Your entire page happens between these two tags - they tell Web browsers that this page is a Web page. |
| |
Next, you need to place <HEAD> - this contains information about the document and goes right below <HTML>. |
| |
Now place <TITLE> below <HEAD>. Title is the title of this specific page and will appear in the browser’s title bar. Title your page and make sure to close the title and head - </TITLE> </HEAD>. |
| |
Finally, you need a <BODY> - everything that will appear on your Web page (text, images, etc.) will be placed between the body tags. Don’t forget to close the body - </BODY>. |
OK, these are the necessary tags you need for a page. Here’s what a sample page using the tags and sample text would like:
<HTML> <HEAD> <TITLE> This is my Web site title </TITLE> </HEAD> <BODY> Here is the text that I want to include on my Web site </BODY> </HTML>
Now, before you go and code your page, make sure you think your page out first. Make a sketch on a piece of paper of where you want your text, images, and anything else with what you want to display. It can save a lot of time and will make an easy blueprint to follow.
Choosing colors for your page,
text, and links
When you first create a page, the default page color settings are white background, black
text, and blue links. If this suits you, fine. If not, you can change it with a few
strokes of the keyboard.
In HTML, colors need to be converted to hexadecimal codes that represent each color. We
have a few listed below and you can find your own by going to Doug Jacobsen’s RGB Hex Triplet Color Chart.
| |
White = FFFFFF |
| |
Black = 000000 |
| |
Red = FF0000 |
| |
Blue = 0000FF |
| |
Green = 00FF00 |
| |
Yellow = FFFF66 |
| |
Purple = CC33FF |
| |
Grey = CC9999 |
Once you have a color code, you can insert it onto your Web page by using the <Body> tag. To control your:
| |
Page Color, the tag is written like this: <BODY BGCOLOR = "#XXXXXX"> - substitute the x’s with your color code. (ex: to make the background blue, you would enter <BODY BGCOLOR = "#0000FF">) |
| |
Text Color, the tag is written like this: <BODY TEXT = "#XXXXXX"> |
| |
Link Color, the tag is written like this: <BODY LINK = "#XXXXXX"> |
| |
And for all three, just write the tag like this: <BODY BGCOLOR = "#XXXXXX" TEXT = "#XXXXXX" LINK = "#XXXXXX"> Note: you can also list them separately - it makes no difference. |
Put some text on your page
Time for your two cents. Text is one of the easiest features of building Web pages and one
of the most fun. Here you can say whatever you want, however you want.
Text is critical since search engines use the words on your site to rank the
relevancy of your website when some one searches. Therefore, your text
should include keywords and key phrases that individuals might use to search for
a topic. Also, it is advisable to make pages topic specific.
Text is placed between the BODY TAGS <BODY> </BODY>.
Typing:
<BODY>This is the text that I want to appear on my page. It is intriguingly interesting and will alter people’s lives in weird and unusual ways. Soon, it will be illegal because it is so good.</BODY>
Will result in:
This is the text that I want to appear on my page. It is intriguingly interesting and will
alter people’s lives in weird and unusual ways. Soon, it will be illegal because it
is so good.
Note that the text will be displayed continuously with no paragraphs or line breaks, even
though one was entered. You will need to learn how to create paragraphs and separate lines
(as mentioned below) if you wish your text to display that way.
Headlines and titles
Sometimes, you just need to say something loud. Use a HEADER TAG. The header tag creates
titles and headlines on your page. They’re a great tool to help organize and direct
the flow of your page.
Header tags are written as <H1> </H1> to <H6> </H6>. 1 is the
largest font and 6 is the smallest. The size you choose is determined by you and your
needs.
Typing:
<H3> Web Design Pros.NET </H3>
Will result in:
To Center this Header:
<center><H3> Web Design Pros.NET </H3></center>
Will result in:
Remember to always close your header tags right after the text you want included. And
don’t mix the header sizes - ex: never put <H1> </H4> - in order to work,
they must be the same size - <H1></H1>.
Making paragraphs and separate lines
Browsers ignore any paragraphs or blank lines that you type in your source text. You will
need to tell the browser where you want your paragraphs and line spaces.
To create a paragraph, simply use the PARAGRAPH TAG <P>. This will cause the current
line to end (if any), a blank line to be inserted, and a new line to start.
Note: you will not need to close the paragraph tag using </P> - it will do it
for you.
Typing:
<P> This is sample text that you cannot look away from. It is riveting and hypnotic.
You will do anything to keep reading this text.<P> This is my new paragraph- it will
automatically add a line and indentation without me having to put in anything else.
Will result in:
This is sample text that you cannot look away from. It is riveting and hypnotic. You will
do anything to keep reading this text.
This is my new paragraph- it will automatically add a line and indentation without me
having to put in anything else.
You can also create a line break. Using the BREAK TAG <BR> will cause the current
line to end and a new one to start. You might use this if you do not wish to start a whole
new paragraph, but don’t want all the lines to run together.
Typing:
This the text line that I am writing and want to stop. <BR> Here is my new line that
will now be separated from the line above.
Will result in:
This the text line that I am writing and want to stop.
Here is my new line that will now be separated from the line above.
Bolding and italicizing text
Make some points and give your text some life by bolding and italicizing it. (Just keep a
rein on it - too much can become confusing and busy.)
To bold your text, use the BOLD TAGS <B> </B>.
Typing:
<B> make this bold </B>
Will result in:
make this bold
To italicize text, use the ITALICIZE TAGS <I> </I>.
Typing:
<I> make this italicized </I>
Will result in:
make this italicized
Centering your text
You can center a headline, word, paragraphs, or your entire document. Just use the CENTER
TAGS <CENTER> </CENTER>.
Typing:
<CENTER> This text will now be centered.</CENTER>
Will result in:
This text will now be centered.
Note: if more than one line of text is enclosed in the tags, all enclosed lines will be centered (even if they include tags themselves - such as headlines).
Return to topPreformatted text (placing text in fixed positions)
Sometimes, you want the text to appear just the way you typed it in. That’s when you
use the PREFORMAT TAGS <PRE> </PRE>. This will tell the browser to leave the
text just the way you typed it. (Just be careful, depending on the browser and screen
settings, the text may run off the page.) And you should avoid using other HTML tags
within the <PRE> tags.
Typing:
<PRE>This is how the text will appear. just as it is typed in here leaving the tabs, spaces and all</PRE>
Will result in:
This is how the text will appear. just as it is typed in here leaving the tabs, spaces and all
Return to top
Have a lot of information? Want to make a point -- or lots of them? Lists are great
ways to organize and layout your Web pages. (Just try not to use too many - it can get
difficult to follow.)
Unordered lists (with bullets)
The unordered, or bulleted, list is one of the simplest and most common. This will place a
bullet before each item and starts with a <UL> tag and then uses an <LI> tag
for each item.
Typing:
<UL>My favorite things are: <LI> my left shoelace<LI>small pieces of lint<LI>nifty looking bullets</UL>
(Note that you don’t have to close <LI> with a </LI> - it is not
needed. But make sure you close the </UL> tag)
Will result in:
My favorite things are:
| |
my left shoelace |
| |
small pieces of lint |
| |
nifty looking bullets |
Ordered lists (with numbers)
The ordered list will place numbers in front of your items and starts with a <OL>
tag with <LI> tags placed in front of each item.
Typing:
My Web site is better than yours because:<OL><LI> of the transitive property (I am better, therefore, it is better)<LI> You are currently at my web site instead of yours<LI> It has nifty numbers</OL>
(Note that you don’t have to close <LI> with a </LI> - it is not
needed. Just make sure you close the </OL> tag)
Will result in:
My homepage is better than yours because:
Definition lists (term on one line, definition indented on
the next)
Definition lists will create a list that resembles that of a glossary; an item on one
line, with a line of text indented below the item. It starts with a <DL> tag with a
<DT> tag for the item (definition term) and a <DD> tag for the line below it
(definition description).
Typing:
<DL><DT> Free Web Site Promotion<DD> What you will receive from Web Design Pros just visiting.<DT> Friends<DD> What you will when you get all that traffic?</DL>
(Note that you don’t have to close <DT> or <DD> with a </DT> or
</DD> - it is not needed. Just make sure to close the </DL> tag)
Will result in:
Uploading images (getting them from computer to web site)
First things first. You need some images. These can be images you make, pre-made clip art,
photographs, etc. You just need to make sure that they are in a .gif or .jpg (or .jpeg)
electronic format -- ex. image.gif. (Programs like PhotoShop can change the format for
you.)
Once you have your images in the right format, upload the file to your directory. It is now ready to be
placed on your site.
Placing images on your page
To place an image on your Web page, you will need to enter an image tag:
Ex: <IMG SRC="image.gif">.
In our example, substitute the "image.gif" with your specific image file name
such as "logo.gif" or "mydog.jpg". If you store your
images in an image folder or some other folder rather than the main directory,
you will need to add the complete URl address or a short hand version.
When you place an image into your directory, the image tag will instruct the browser to
find and display the image automatically. The image tag can be placed anywhere on the page
where you want an image to appear - just keep in mind that even the smallest images may
take some time to load (appear) on your browser -causing the person viewing your page to
wait. So you may want to use images sparingly.
You can also change an image’s appearance by using HEIGHT and WIDTH TAGS as in the
following example:
<IMG SRC="image.gif" Width="100" Height="50">
You may make the width and height whatever you want - just be careful that you don’t
distort your image.
In addition, you can tell the browser where to place your image by using ALIGN TAGS as in
the following example:
<IMG SRC="image.gif" Width="43" Height="75"
ALIGN="LEFT" Border="0">.
You can place an image to the LEFT, RIGHT, or CENTER by placing one of these words after
ALIGN= .
Is your page all dressed up but with nowhere to go? Well, that’s what links are
for. By linking your text, you can create words and phrases that your visitors can click
on to be taken to another page or section of your site, or even another site altogether.
Link text to another page
To link to another of your Web sites pages, you will need to create a Hypertext Reference
(HREF) by using the ANCHOR TAG <A> </A>.
You will need to place the name of the page you are linking to (ex. mybrother.htm) and the
text that you want to use to link to that page (ex. read about my brother) in the anchor
tag. The tag should look like:
<A HREF="mybrother.htm">read about my brother</A>
Note: the text that you are linking (read about my brother), only needs to be typed once -
you will not have to type it in your paragraph and in the anchor tags.
Typing:
<P>And I hate my little brother. You can <A HREF="mybrother.htm">read about my brother</A>and get to know exactly why he bothers me.
Will result in:
And I hate my little brother. You can read about my brother
and get to know exactly why he bothers me.
Note: "read about my brother" is underlined and in a different color to
let your visitors know that they can click on those words to go to a different page.
Link text to another site
You can always link your text to another Web site, such as The Traffic Blaster (hint, hint). You
will need the ANCHOR TAGS <A> </A>, the full URL (Web site address) of the
site you wish to link to and a keyword or marketing phrase you wish to link the site from.
Typing:
<A HREF="http://www.webdesignpros.net/urlorder.htm">2000 URL
Submission: The Traffic Blaster</A>
Will result in:
2000 URL
Submission: The Traffic Blaster
Link text to a specific section
Sometimes, you don’t want to link people to a whole other page, but rather, a
different section on the page they are currently on (such as links used on long pages like
FAQs - Frequently Asked Questions - where questions are listed at top with the answers
linked at the bottom of the page).
To use a section link, you will need the NAME attribute. This is a word or phrase that
will be the destination that you wish to "jump" to on your document - such as
"my answer".
To enter this type of link, go to the section you want to be the destination of the
"jump to" link (for example, you want users to go to the words "my
answer") and type in the tag:
<A NAME="answer">my answer</A>
Now, you just have to create the link that will take you there - for example
"question". Go to the place on your page where you want to "jump from"
and type the tag:
<A HREF="samepage.htm#answer">my question</A>
NOTE: replace "samepage.htm" with the file name of the page you are
jumping to. ex: if the page I am jumping to is named webdesign.htm, then the tag would be
<A HREF="webdesign.htm#answer">my question</A>
So now, you have a "my question" underlined that when clicked on will take you
to the section of your document where "my answer" is located.
Link your images
You aren’t just limited to linking text - Images can be a great way to get a message
across to your visits. Also, many websites offer great referral programs
that you can put their images on your site and earn an extra income- Check out
a Few at Referral Partners
or Spree Online Shopping Mall.
For example, you have a product, titled "mystuff.gif" that you want to link
to a page with your bio information, titled "bio.htm". To link this picture to
the bio page you would use the following tag:
<A HREF="product.htm"><IMG SRC="mystuff.gif"></A>
As you can see, the page/section/site you wish to link to is placed first (just as a
regular text link) followed by the image that you wish to display. One suggestion- I like
to store my images in an image folder and I tend to like to write out the code. It
takes more time to write, but I find it alot easier to find and fix problems.
Therefore, the code I would use would be:
<A HREF="http://www.webdesignpros.net/product.htm"><IMG
SRC="http://www.webdesignpros.net/images/mystuff.gif"></A>
This will produce a blue line around your image on the Web page- telling you that it is
now indeed linked. To remove the blue line, you can remove it by adding
BORDER="0" in your tag, like so:
<A HREF="http://www.webdesignpros.net/product.htm"><IMG
SRC="http://www.webdesignpros.net/images/mystuff.gif" BORDER="0"></A>
To establish a size for the image- even if it is the actual image size is highly recommended and makes it easier for browsers to move through your website. If I wanted the image to be 40*400 (Typical banner ad) then I would do the following. Also, to increase hits by search engines I used the alt to describe my service or product.
<A HREF="http://www.webdesignpros.net/product.htm"><IMG
SRC="http://www.webdesignpros.net/images/mystuff.gif" BORDER="0"
width="400" height="40" alt="web design, hosting,
promotion"></A>
Posting your e-mail address
Want to talk to your visitors? Post your e-mail address on your Web site. If you have a
functioning e-mail address and a can make a few strokes of the keyboard, you can start
receiving feedback.
E-mail is placed between the ANCHOR TAGS <A> </A>, like so:
<A HREF="mailto:sales2@webdesignpros.net">Drop me a line</A>
Will result in:
Drop me a line
(when clicked, this link will bring up an e-mail box from your browser to submit an
e-mail- Note that you will find I wrote the code to put a special note in the subject- How
did I do that?)
The Answer-<A
HREF="mailto:sales2@webdesignpros.net?subject=Goodluck">Drop me a
line</A>
OK, now you know how to create a Web site and HTML doesn’t scare you anymore. But, of course, there are more tags and programs out there in HTML land that you can learn to improve your site. And since you’re reading this, you most likely want to learn and use all of them (my aren’t we tenacious). Well, who are we to stand in the way of progress. Here’s a list of some other great and more in-depth HTML guides out on the Web.
| |
NCSA’s Beginner’s Guide to HTML |
| |
Yale Web Style Guide |
| |
Case Western Reserve University’s HTML Guide |
| |
Hotsource HTML Help |
| |
The HTML Quick Reference Guide |
Advanced Programming
The
Advanced Html Companion
ASP
2.0 Programmer's Reference
Building
Better Web Pages
Cutting
Edge Web Design : The Next Generation
Javascript
Bible, 3rd Edition
Using
Visual Interdev 6
Professional
ADO RDS Programming with
ASP (Web
Databases)
Graphics
Animation
on the Web
3D
and Web Masters : The Latest Artwork
&
Techniques from the World's Top Digital Artists
Astonishing
Web Graphics
With Kai's Powertools And Plug-Ins
Create
Web Animations with Microsoft
Liquid Motion In a
Weekend
Developing
Web Pages for Tv-Html
Editors
Frontpage
98 Bible
Mastering
Microsoft Frontpage 98
The
Adobe Pagemill 2.0 : Classroom in a Book
Adobe
PageMill 3 F/X and Design
Adobe
Seminars : Web Page Design
BBEdit
4 for Macintosh (Visual Quickstart Guide
Series)
Audio & Video
Audio
on the Web: The Official IUMA Guide
Cutting
Edge Web Audio
Web
Developer.Com Guide to Streaming
Multimedia
Website Submission and Ecommerce
Software
| Home | Business | Promotion | Services |
| Contact Us| | Resources |
Design Copyright © 1998,1999,2000 Web Design Pros
All Rights Reserved.