This is a tutorial on basic HTML. You won't
learn anything fancy here, but you will, if you read and understand
this page, be able to write the code for a very basic webpage, and look
at a webpage that won't come out right or won't do what you want, and
be able to check the code and fix basic errors. I personally use
Netscape Composer and Arachnophilia, both free WSIWYG programs, that
will let you make webpages without knowing any code, and haven't had
any problems. But I know basic HTML,
so when I need to, I can go in and fix problems. Netscape Composer is
part
of the Netscape browsers package, it can be found in
Netscape
7 by clicking on the Window tab at the top of the browser, and
Arachnophilia can be downloaded for free many places on the web. But if
you want to write your own HTML code, all you need is a basic program,
like Notepad, and these codes.
Understanding HTML
The actual HTML language is very easy to learn once you know the
basics. HTML is made up of a tag. A tag is a piece of text contained in
<> and looks
something like this:
<tag>
There are two types of tag. Opening and closing tags. Closing tags are
only different as they have a / before
them:
</tag>
Tags appear in pairs like this:
<tag></tag>
You are probably not really understanding this so I will explain
further. Anything between two tags will have those tags applied to
them. A good example of this is using the <center>
tag to
center align text:
<center>Text in
here is centered</center>
Nearly all tags have a closing tag but a few do not. What you must
remember is:
<Tag>Text</Tag>
Declaring HTML
If you use a program, when you do a "view source" on a page, you will
see something similar to what is below there already, but if you write
your
own, you should begin by entering the following.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
</body>
</html>
I will explain what all this means below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
This tells the browser what language is being used for the page. It is
not entirely necessary but it is good to add it in.
<html>
Tells the browser that this is the beginning of an HTML document.
<head>
This is the beginning of the header section. The header section
contains the configuration options for the page (like title).
<title>Untitled</title>
This tells the browser what to display as the title of the page. This
appears in the title bar at the top of the browser. Enter the name of
your
page between the <title> tags.
</head>
End of the header section.
<body>
</body>
Everything between these is in the body of the page. This is where all
text, images etc. are. This is the most important part of the page.
</html>
Shows the end of the HTML document.
You must always remember that whatever is between a starting tag
<tag> and an ending tag </tag> will have the tag applied to
it. You have
now learned how to set the page's title and declare an HTML document
Part 2
In part 2,.I will show you how to add text to your page and format it.
Here is what you should have already:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
</body>
</html>
For this section of the tutorial I will show you how to create a simple
homepage. The first thing you will want to do is change the title of
the page
from Untitled to what you want the title of your page to be. For
purposes
of this tutorial, we will use:
My Homepage
To do this change the tag:
<title>Untitled</title>
to
<title>My
Homepage</title>
The <font> Tag
The <font></font> tag set are the most common and one of
the most versatile tags found in HTML. Using the tags in the basic form
they
will show text on the page (but they can be changed). To start off we
will
just display the text:
Welcome To My Homepage
on the screen. To do this you need to add:
<font>Welcome To My
Homepage</font>
between the <body> and the </body> tags. This will display the text
in a standard font size, black, in Times New Roman. Not the most
interesting thing for your homepage.
Size, Color and Face
These are the three things you can set for a piece of text. These are
the first tag attributes you have come across. We will start with the
Face
attribute. Instead of having a new tag for font face (the font it will
be
displayed in) you add it to the font tag like this:
<font face="Arial">Welcome To My Homepage</font>
As you can see you enclose the name of the font in quotation marks ""
after an equals sign. You do not need to include this in the end tag.
More than one attribute can be added to a tag so it is easy to display
this in a different size. The only thing you must remember is that
sizes in
HTML are not the same as normal font sizes (measured in point sizes
(pt). They are a single number which relate to a standard font size in
the following way:
HTML Font Size Standard Font Size
1 8 pt
2 10 pt
3 12 pt
4 14 pt
5 18 pt
6 24 pt
7 36 pt
You can make a nice large title by changing the tag to the following:
<font face="Arial"
size="7">Welcome To My Homepage</font>
As you can see, once you know a tag it is easy to add extra options to
it. The final one you will learn is the color tag. You must make sure
that you must use the American spelling for this. Color is a little
different than
the other attributes. It can be changed using an HTML Color Word (a
standard
color name) but only some color names work with this. You can also use
HEX
codes. HEX codes are in the format #000000 (# followed by six numbers).
The
first 2 numbers are the amount of Red, the second 2 are Green and the
last
2 are blue. To make this text red you could either use:
<font face="Arial" size="7"
color="red">Welcome To My Homepage</font>
or
<font face="Arial" size="7"
color="#FF0000">Welcome To My Homepage</font>
Centering The Text
Finally you will want to center the text so that it looks like a real
title. To do this you can use the <center>
tag. To do this simply enclose everything you want centered in the <center> tags like this:
<center>
<font face="Arial" size="7" color="red">Welcome To My
Homepage</font>
</center>
Which would display text like this:
Welcome To
My Homepage
This is the code you should now have for your website.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<center>
<font face="Arial" size="7" color="red">Welcome To My
Homepage</font>
</center>
</body>
</html>
Part 3
In this part I am going to show you how to position text (or anything
else) on your page. I will also show you some other useful HTML tags.
The <p> Tag
The <p> tag is extremely important
and useful.. P stands for Paragraph. It is used to break up text into
paragraphs. To define a paragraph you just include the text inside the <p> and </p>
tags. This will then group the text together and leave a space after it
(like the paragraphs on this page.
The <p> tag has an attribute which
can be added to it. This is the align option. You can specify three
types
of alignment (like in a word processor) - left, center and right. For
example
to align the text right you use:
<p
align="right">Text</p>
It is up to you to decide whether to use the <center>
tag or the <p align="center"> tag.
I
usually use the <center> tag as it
is
shorter which will reduce loading times. It is hardly ever necessary to
use
the align="left" attribute as nearly all browsers automatically align
text
to the left.
The <br> Tag
Sometimes you will not want to leave a space after your paragraphs. To
do this you should use the <Br>
(break) tag. This tag is very useful as, wherever you insert it, it
will start a new
line. To create a new line without a space you use the <Br> tag and to create a line break you
use <Br><Br>. There is
no end tag for the <Br>
tag.
For example:
This text is on a line
This text is on the next line
This is text after a line break
This is text after 3 <Br> tags.
The <hr> Tag
The <hr> tag is another very
useful way of breaking up your page. It will insert a horizontal line
like this:
--------------------------------------------------------------------------------
As you can see this is an extremely simple to use tag. It has no
closing tag. There are a few attributes for them but they are rarely
used. You can change the height (in pixels) the width (in % of window
or pixels) and the color (Internet Explorer only). Here is an example
of how to create a line 30 pixels high, 50% of the window in blue (you
will see it in gray if you are not using Internet Explorer:
<hr width="50%" size="30"
color="#0000FF">
--------------------------------------------------------------------------------
Comment Tags
Comment tags are useful if you want to put notes into your HTML code
which will not show up on the page. They can be used for copyright
notices, little notes to tell you what each section of code is about,
notes to people reading your code or anything else you want to use them
for. Some web hosts use
them so that their servers will know where to insert banners (they look
for a specific comment which you must add). These comments take the
form:
<!-- Your comment -->
The browser will ignore anything in a <!--
--> tag.
Part 4
In this section you will learn how to add hyperlinks and bookmarks to
your page.
You should know how what a hyperlink is and what it is used for. If you
do not, a hyperlink is a piece of text you click to be taken to another
page. A bookmark is a way of bookmarking a point on your page so that
you can
hyperlink to it.
The <a> Tag
The <a> tag is used when creating hyperlinks and bookmarks. It
stands for anchor. The functions are explained more fully below.
<a href>
To create a hyperlink you need to use the href variable of the
<a> tag. Href stands for Hyperlink REFerence. To make a piece of
text or an
image into a hyperlink you contain it in:
<a
href="pageurlhere">Text Goes In Here</a>
Hyperlinks can specify several things:
Function Example Code
Web Page or Site <a
href="http://www.webaddress.com/folder/page">
Local Page <a href="pagename.html">
Local Page In A Folder Level Below <a
href="foldername/pagename.html">
Local Page In A Folder Level Above <a
href="../pagename.html">
Open E-mail Program With E-mail Addressed <a
href="mailto:yourname@yourname.com">
Bookmarked Section <a href="#bookmarkname">
Bookmarked Section In Another Page <a
href="pagelocation.htm#bookmarkname">
Bookmarks
Bookmarks on a page are very easy to make as they also use the
<a> tag. Instead of changing the href variable you use the name
variable. For example:
<a name="top">The First Text In The Page</a>
Will create a bookmark called top in the text which the tag surrounds.
An image can also be contained in this tag. You can then link to this
using a standard hyperlink:
<a href="#top">Back
To Top</a>
You can name bookmarks anything you like. Bookmarks are very useful on
pages which are very long as they can be used to quickly go to another
part of the page.
Part 5
In the final part of this tutorial you will learn to add images to your
page and how to set background colors and images.
images are a very important part of an HTML page. They make it
different from an e-mail or just a printed page. They can be used as a
design element to make pages look better and can be used as the
background to make the
page more interesting.
Images are added to pages very easily. All you need to do is use an <img> tag. You must use some variables
with it, though, or it will show:
Which is not very helpful. You must use the src=
variable to choose the image to insert. Like a hyperlink this can
either
be a relative reference or a direct reference including the site's url.
For
example:
<img src="http://www.starrbrite.com/images/starrbrite.jpg">
If you include an image in a hyperlink it will, by default, display a
blue border round the image. To turn this off you should use the:
border="0"
variable for the image.
Resizing Images
You can resize images inside the browser using two other image
variables - width and height. Even if you do not want to resize the
image it is useful to specify its size using these variables as it will
put a placeholder in the browser and the page will not change much when
the image is loaded.
These tags can also be use to make an image bigger or smaller. All
measurements are in pixels. Here is an example:
<img src="http://www.starrbrite.com/images/starrbrite.jpg" border="0" width="80" height="30">
or
<img src="http://www.starrbrite.com/images/starrbrite.jpg" border="0" width="10" height="10">
It is good to remember that it is probably better to resize an image in
an image editing program if you are making it smaller. This is because
the smaller image will have a smaller file size and will load quicker.
This would not be the case if you resized it in the browser.
Alt
The final variable of an image is the alt variable. This tells the
browser what the alternative text for an image should be if the browser
has images turned off. It is used like this:
<img src="http://www.starrbrite.com/images/starrbrite.jpg" alt="The Starrbrite Logo">
NOTE: You should remember to use gif or
jpeg images as the file sizes are much smaller.
Background Colors
You can change the background color of the page using the bgcolor
variable of the <body> tag. It is
used like this:
<body bgcolor="#0000FF">
which would set the background color as blue. You could also use an
HTML color word.
This is a very simple tag to use as there is really no more to it. You
should always remember to ONLY use a light color text on a dark
background or a light color text on a dark background. NEVER use blue
on red or red on
blue. It is generally thought that a white background with black text
is
best.
Background Images
Background images can be placed on a web page. A background image is an
image which is tiled behind the text. It is done using another variable
of the <body> tag. It is background
and it is used like this:
<body background="myimage.gif">
You must add a command after the word BODY. So,
you just have to go to the end of the word BODY, skip a space, and type
the following:
background=" "
Now your body tag should look something like
this
<BODY background=" ">
Now, we have to tell the browser which image we
want to use. We need to place the url (the place your image is stored
online) of the image inside the quotation marks. So, if the image I
want to use is at http://www.anysite.com/image1.gif, I would insert
this into the command, like this:
<BODY
background="http://www.anysite.com/image1.gif">
Your just have to know the name of the file you
want to use, including the file extension (gif, bmp, jpg etc), and the
url of the location it is stored.
Now, if your image file is located in the same
directory as your html
file, you can just
type the filename of the image rather than the full url. So, if we want
image2.gif to be the background image, and it is in the same directory
as the page we are editing, we can type the command this way:
<BODY background="image2.gif">
Even though you don't have to type in the whole
url, and can just type in the name of the image, I prefer to type the
whole thing, just in case. So, if I wanted to use an image
from my server as a background image for a page, it would look like
this:
<BODY
background="http://www.starrbrite.com/Animation41.gif">
Now, if I put an html file in my "images"
directory, I could use the image by typing in just the filename, like
this:
<BODY background="next.jpg">
Okay, now you can use your own image as a
background....so put a picture of yourself as a background. That's
always kind of fun......
That is the end of this tutorial. You have learned how to create an
HTML page with formatted text split into paragraphs, insert images,
link between pages and link to different parts of your page.
|
