To make a web site you are going to need to learn some HTML. It is the the
language that makes a web page, if you right click on any web page and choose
'view source' you will see the HTML that made that page.
This page is a crash course in HTML and tells you the basics that you need
to know in order to build web pages and a whole web site. If you want a more
complete guide then the best idea is to buy a book and we have listed lots
of HTML books on the right from Amazon.
So, the most basic thing to understand about HTML is that it is a structured
language that is made up of several tags. The tags are enclosed in the directional
brackets and there is usually an opening and a closing tag with the main
tag is the HTML tag. So the most basic, empty HTML page would have the following
code:
<HTML>
</HTML>
As you can see the closing tag always has a forward slash (/) before the
name of the tag, this tells the browser or whatever is reading the HTML page
that the tag has closed. This is very important for distinguishing between
different parts of an HTML page as you will see later.
There are then two main parts of an HTML page: the head and the body. The
head contains information that is not visible on the actual web page and
the body tag contains all of the information that is visible on the web page
(such as this text). The head tag always comes first with the body tag directly
afterwards, remember that you have to close a tag before another starts unless
you want the tag to be inside of another tag. So are web page now looks like:
<HTML>
<Head> </Head>
<Body> </Body>
</HTML>
Note that it does not matter how you lay the HTML code out, you can put each
tag on a new line or have them all on one line and the web page will still
display in exactly the same way. It is the order of the tags and code that
is important and if you make even a small error here it can cause serious
problems. Generally speaking things that are higher up in the HTML code will
come first on the web page.
The head of an HTML page contains information that is not displayed on the
web page, it is information that is hidden but necessary. The most important
tag that lives in the head of an HTML document is the title, this is a short
phrase and tells people what the page is about. It is displayed in the bar
at the very top of the browser window and is also what search engines such
as Google use to describe web pages in their search results and so the title
tag is very important. The title tag's HTML code looks like
the following:
<Title>A Guide To Camping In Outer Mongolia</Title>
There are also two other descriptive tags that you can place in the head of
your HTML page but these are far less important than the title (and if you
view the source of this page you will see that I do not bother with them).
They are the description and keywords tags with the description being a sentence
that describes what the page offers while the keywords lists individual words
that are related to the subject of the page. They are laid out like the following:
<meta name="Description" content="A guide to camping in Outer
Mongolia with pictures and information from people who have camped in Outer
Mongolia" />
<meta name="Keywords" content="camping, outer, mongolia" />
Notice that instead of having a separate closing tag these are enclosed in
just the one tag and have the closing '/' at the end of the tag, this tells
the browser that the tag has ended and therefore does not need a separate closing
tag. This applies to quite a few types of tag but not all of them, it is generally
tags that do not have any content inbetween the opening and closing tag.
The other main tag that is placed in the head is the CSS tag, this tells the
browser the location of your CSS file and we'll cover that on the CSS page.
There are also lots of other tags that can be placed in the head tag but we
are only covering the absolute basics here.
The body tag contains all that is visible on a web page. The layout of the
body used to be controlled using tables but they are rather obsolete these
days and so we do not see any point in covering them, these days we use CSS
to lay our pages out. There are several reasons for this including that the
code produced using tables is very bloated and so there is allot of code
compared to the CSS layouts and the CSS also loads much faster.
We have a separate page for CSS but we will cover the basics here. The fundamentals
of CSS is that a separate CSS file controls the layout and appearance of the
web page whereas in the old days web pages would use tables and other tags
to control the appearance of the web page in the actual HTML code of the web
page.
The main tag used with CSS web pages is the DIV tag and you should place content
for different parts of a web page in it's own DIV tag. For example on this
page we have a DIV for the logo area at the top of the page, the menu on the
left, this middle area for the main content and the area on the right that
lists HTML books. You can also place DIV tags inside of other DIV tags and
so if you want separate sections inside one of your DIV tags then this is perfectly
possible. The code for laying out a DIV tag is as follows:
<DIV id="content">Some content about whatever your page is about.</DIV>
The ID part is very important as you state in your CSS file how you would like
that DIV to be displayed and it is the ID part that tells the browser which
part is which. In your CSS file you simply list all of your DIVS and how you
would like them to be displayed, we will cover this in more detail in the CSS
section of the web site.
There are lots of tags that can go in the body of an HTML document that do
not control the layout or appearance of the HTML document (which would be covered
in the CSS file). The main tag would be a link (apart from plain text which
does not need any tag to display) and all web pages need links, the link tag
uses the 'a' tag and in the 'a' tag you have to include the URL to the page
that you wish to link to and the word that you wish to be used with the link.
An example would be:
<a href="html.htm">HTML</a>
That would link to this very page if the link were located on any pages on
this web site and use the text HTML as the link, it would look like this if
used in the actual HTML code:
HTML
Notice that the link has the same colour as the other links on this web site
and this is because the colour of the links is stated in our CSS file. This
is why CSS is so good; instead of having to set the colour of each link individually
you can set the colour of all of your links with one very simple line of code
in your CSS file. Also note that the URL can be used in several ways, you can
include the full domain name like http://www.earnonline.org.uk/html.htm and
you would have to do that if you were linking to a different web site as if
you only include the page name then the browser will assume that the link is
on that same web site. If your web site uses folders (and this is wise if you
have allot of pages) then you will have to link to the folder that the page
is located in, to do this you use forward slashes to show the directories like
'foldername/pagename.htm'. If you have to go back a folder then you use '../'
as the folder name and this will look for the page in the folder below the
location of the current page that the link is on.
The next most important tag of the body is the image tag, a web site would
be very plain and boring without any images and so you will need the image
tag to insert images into your HTML pages. In the image tag you have to state
the URL of the image and also the dimensions of the image, you can leave the
dimensions out but that can make the page load slower and also mess up your
layout while the page loads. You also have to state some alternative text so
that users who have images turned off in their browsers will see that text
that describes what the image should have been and it is also very wise to
state that you do not wish to have a border around the image as these look
terrible if done in basic HTML. An example of an image tag is as follows:
<img src="images/imagename.jpg" alt="Image Name " width="100" height="120" border="0" />
Notice that you have no closing tag as there is no need with no content that
is outside of the tag and you also have to state the full name of the image including
the file extension which tells the browser what kind of image it is. We have
other sections of this web site about creating and finding images for use on
your web site and so this is just the basic code to insert an image into your
HTML code.
There are then formatting tags that can surround text to change it's appearance.
These include bold, italic and heading tags, to bold a word you would surround
it with <b>word</b> and to make a word italic you would surround it with <i>word</i>.
There are several different headings such and they are numbered, the main heading
tag is the H1 tag and you simply surround you title with <H1>Title</H1> to produce
the heading effect. The H1 tag produces some very big text and the following
numbers make the text gradually smaller, you can change the appearance of these
tags with CSS and you can learn about that on the CSS page.
And so they are the extreme basics of creating an HTML document, we cover
areas in more detail in other parts of the web site and so we suggest that
you keep reading if you would like to learn how to make a living online.
You can create the web page in a text editor such as Notepad which comes
free with Windows (don't use Microsoft Word as this will add unwanted code
and probably break your code) by simply typing the HTML code as you need
it. This is a very laborious task though and luckily there are much easier
options in the form of web software and so see that section for information
on software that makes your web page creation an absolute doddle.
The HTML file needs to be saved as HTML and it is the file extension that
does this. You need to save your page with the extension of '.html' or '.htm'
and not '.txt' or any other extension as the browser will
not know that it is an HTML page unless the correct extension is used. Have
a look at the source code of this page for a general example and you should
be able to look at that and understand the basics after reading this page,
you will of course need the more detailed information that is found on our
other pages for a full understanding of how HTML works. You should be able
to open your HTML file from the folder that you have saved in on your computer
and it should open in your web browser so that you can see what it looks
like in the browser.
© Earn Online.org.uk 2007.
