Making a Website
by James Adrian
This tutorial is intended to disclose and illustrate
the HTML (HyperText Markup Language) that you need to put up a website. There are many styles and methods of doing this that all do the same thing.
Each of them can make your website look like anything you want. The method used here is the simplest I have found. When you understand the HTML
used in this tutorial, you will be able to modify the examples to fit any layout and include any scenery you like. By using actual HTML and not a
proprietary system for modifying templates, you will have real control over every aspect of your website's functionality; and you won't be locked into
any particular service. You are welcome to view and copy the HTML code of any page of this website and adapt it for your own purposes. I recommend
as a browser, Gimp
as a picture editor and
as an HTML editor. They're all free.
Please notice that most paragraphs in this text are
indented. If you hover your mouse over the indented area, it will indicate a link. This link is to Google. If there is a word or phrase in the text that you
don't know enough about, you can copy it and click on the indented area to search for answers in Google. When you come back, you will not have lost
When somebody uses their browser to reach
your website, each page they see is rendered for them by their browser by interpreting a file. If they go to the front page of your website, a file called
index.html is the file that they reach. That's what you should name your front-page file. All of the other pages of your website written in HTML that
they see should be given names ending in .htm instead of .html. There is one other special file that has yet another ending. It is called a Cascading
Style Sheet. At futurebeacon.com, fb0.css is the name of this cascading style sheet. It's purpose is to specify some of the features of the visible pages
of the site. The .css file is not intended as a website page, but you can see it here
as a text file. The
HTML web page files are text files and so are cascading style sheet files. Your browser renders the meaning of the HTML files ( .htm and .html) but
simply displays the .css files as the text files they are.
Your index.html file together with several uniquely
named .htm files and your .css file (initially a copy of fb0.css named for now as z.css) should be located on your computer in a folder perhaps called
(or something similar). When you open your website folder and click on any web page file, your default browser will render it. The
off-line path (the file path on your computer) will be shown in the web address window in the browser. Because each web page file will mention your
.css file and because that file is in the same folder as the web page file, the page will be rendered just as it would be on line. When the site does what
you need it to do (at least to begin with) you are ready to pick a domain name and hire a hosting service. A very well-known, economical and capable
hosting service is GoDaddy.com
. I recommend it. Its technical support is absolutely first rate.
If you right click on an empty space on a web page,
a list of options comes up, one of which is View Page Source
. The term source
means source code
. Small pieces of this HTML
source code will be displayed on this site in text areas like this:
Here is what this code renders:
by James Adrian
The code calls for a font size that is 16 pixels high
with a line spacing of 20 pixels. In addition, the rendered text is centered on the page.
of the element
. The tag that begins with a slash is called an end tag
Some elements do not have an end tag, such as
which instructs the browser to begin any following text or other material on a new line. It is a new-line
code or carriage return. Another famous single-tag element is the "extra" space. You need to know that all browsers ignore all but the first in any string
of spaces written into an HTML file unless an element for that purpose is used. If you insist on writing more than one space in a line, you must use the
space element. It will be illustrated shortly.
If the center element were to be removed, the text
would begin on the left of the page by default. For every center
there is a /center
and for every div
there is a /div
elements that come in such pairs modify the material between their tags.
Here is a link to a
minimal HTML page
Here is the code for that page:
There are a few things to notice in this code. The
element has an end tag that must be the last thing written into the file. The html start tag must be the first thing in the file. That is what
makes it an HTML file. The head
element also has an end tag and its end tag must appear in the file before the body
element. The body
element also has an end tag. All of the material that you want to be visible on the page must be encoded between the two tags of the body element. The
vast majority of elements that you write will be in the body of the file.
The head element contains the title element and a
few other things. For now, it is important to know that the cascading file sheet will not influence the rendering of the page unless
appears between the head element tags. Notice that z.css (the cascading style sheet) is referenced at the end of this line.
Now consider this somewhat
less minimal version
of the minimal HTML page. You will notice that the background has changed from white to a
background created in Gimp, the open-source image processing software. The background changed because body element's start tag includes an
additional specification: class = "bgG"
. Background letter G is defined by z.css and you can change gbG to bg5 or to anything from 0 to 9
or A through G. The cascading style sheet provides 17 backgrounds called bg0 through bgG. The hexadecimal numerals (used for colors) are 0, 1, 2,
3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F; but the css file is not restricted to any particular set of characters for naming backgrounds.
A second thing to notice about this less minimal
version is that the sentence at the top of the page has multiple spaces between some of its words. To see how this is accomplished, view the codes and
see how an element beginning with "&" is used as extra spaces. This element does not need an end tag to help enclose something. It is a simple sign to
the browser indicating the additional placement of a space.
The third and last item I would like you to notice
about this file is the method used in HTML to make a comment that you can write and read but the browser does not render on the web page.
None of the characters in the text area box above
are visible unless you view codes.
Now, for a simple text
Having clicked on the link just above, it's time to
look at hyperlinks:
The file name of A Simple Text File is z2.htm.
Only the file name is needed in this link because the file is in this directory (the same directory that this file you are reading is in). If the link is to a
more remote location, something more is needed. Do you remember this sentence?
In both cases, you can write any words you like
. Whatever you write between these tags will be
underlined. That is the indication to the reader that what you write is a link. If the text you write is a string of pace elements, the link will look like this:
There is another class of link that I use that does
not underline the words between the tags. This kind of link is used as indentation areas at the start of most paragraphs on this website. In those links,
the word between the tags is a string of space elements. That's why they look like indentations. The elimination of the underlining is accomplished by
using another class of link defined by the cascading style sheet. By viewing the codes you will see that class="m1"
is added to the code near
The forgoing information (which includes a couple
of other files that this file has linked to) is what you must have to put up a text website. The functions that remain include pictures, the placement of text
and pictures in absolute positions (as opposed to placing them in the next place to the right or the next paragraph down), the inclusion of pictures that are
themselves links, the inclusion of videos and a few miscellaneous matters like the following:
Most of the still-picture files on the Internet have
names that end in .jpg or .gif but all of the still pictures used in this tutorial have names that end in .png because the .png format is not owned by anybody
who might ask you for a royalty when your company is large. You can forget about all of those financial and legal issues (even if your cameras do not
produce .png pictures) by converting them to .png files in Gimp, the photo processing software I mentioned earlier. Here is your basic image display
Here is how it is displayed:
If, for any reason, the picture is not displayed, the
word "Flag" is displayed instead. That is the function of the specification alt="Flag"
Here is a slightly more elaborate picture display
that provides a black border around the picture:
Here is how it is displayed:
Here is web page where text areas have a variety of
The page you just returned from has the color of the
outside area specified in the body element with this code:
body bgcolor ="#8CCC88
The inside color was specified in a div style this
There is a pattern to the color codes. #FF0000 is red.
#00FF00 is greeen. #0000FF is blue. Each primary color (red, green and blue) can take on any one of 256 hexadecimal values between 00 and FF.
#000000 is black. #FFFFFF is white. Any code that has the same number for each of the primary colors is some shade of grey, like #9A9A9A. Google
offers many links to color charts so that you can get the official HTML color code for Teal
, for instance.
Now let's take a look at a picture that is a link.
Please click on this picture of a plane:
Below, the text area shows the code that makes this possible:
This code may seem complicated at first glance, but
it is merely a link with a picture display element written where you would normally expect a text description of the link.
The layouts so far have been simple. If things get
complicated, you need absolute positioning