|
How we’ll
do it:
These pages will show you step-by-step how to
build a simple web site. The only tools
we will use are:
- 1) Notepad - Go to Start -> Programs ->
Accessories -> Notepad.
- 2) Browser - double click on either Netscape
or Internet Explorer.
Keep both of these tools open because each time
you make a change to your new web site using Notepad, we will take
a look at it in the Browser.
Each of the pages in this handout has the code for the same web
site, but each page has a few more features added. The items that
are new on each page show in bold. We will build our sites by adding
new features one by one so you can see the affect of each change
on your page.
In the code, you will see [words in brackets
like this]. Don’t type the brackets or the words. Instead,
when you see the brackets, it means that you should put in your
own words. So think of a topic for your web site. Make it something
that is important in your life: your business, your family, or a
hobby.
The code that you are to type will be between lines like this:
<html>
<head>
<title>[Put the name for your page here.]</title>
</head>
<body>
</body>
</html>
Go ahead and type that part in a Notepad window.
Now Save your file: File -> Save Where: Desktop;
File Name: [yourname.html]. The .html at the end is very important.
If you save your file without it, your browser will put all the
code on the screen.
Note the < and >. These tell the browser not
to put that stuff on your page. Instead, they are instructions,
called “tags,” and are instructions to the browser to
make your page look the way you want it to.
The tags you have typed are the bones of a web site.
Each set of tags has an opening tag and a closing
tag. The closing tags have the form </>. That tells the browser
to stop doing whatever was in < >.
The first and last tags are <html> and </html>
because browsers can open other kinds of files, but you don’t
want your browser to put all those tags on the screen.
The information that goes inside the <head> and </head>
are mostly things that are information about your page. We will
only do the <title> </title> today.
Take a look at your site by Click on the browser button
at the bottom of your screen -> In your browser, go to File ->
Open -> Browse -> Where: Desktop -> File name [yourname.html].
You should just see a white screen with the title
of your site in the title bar. That is because we haven’t put
anything in the body yet.
<html>
<head>
<title>[Put the name for your page here.]</title>
</head>
<body>
[Type your title again.]
[Type a nice introduction for your page.}
</body>
</html>
Notice that I have indented some of the lines. When
you have a long page of code, it gets a bit difficult to find things.
We will be using spacing and indents to make the code easier for
you to read.
Now take another look at your page in your Browser.
When you open your Browser, you won’t see the changes right
away. Click on the Refresh button so that your Browser knows to
get the new information
Notice that all your text is on one line: the title and your introduction.
Two things to remember when you are doing html code:
- Your browser ignores all “white space”
between tags. Neither does it see the returns you put between
paragraphs.
- If you want your browswer to move something
down, you have to tell it too. There are two ways to move a line
down. The first is a <br> tag. It moves things down one
line. <p> puts a double space between things, but technically,
a <p> tag also needs a </p> tag. We will be using
the <br> and <p> </p> tags to separate other
things besides text.
<html>
<head>
<title>[Put the name for your page here.]</title>
</head>
<body>
<p>
[Type your title again.]
</p>
<p>
[Type a nice introduction for your page.]
</p>
</body>
</html>
The <p> </p> tags wrap around each paragraph.
We could have used two <br> tags for each <p> tag (<br>
tags don’t need a </br>.)
The more complicate the page becomes, the more important it becomes
to put spaces between the sections of code. Notice that I have double
spaced between the <head> and the <body>. Also notice
the new indents.
Now we will make the title of your page look more like a title.
First it should be bold and centered.
<html>
<head>
<title>[Put the name for your page here.]</title>
</head>
<body>
<p><b><center>
[Type your title again.]
</p></b></center>
<p>
[Type a nice introduction for your page.]
</p>
</body>
</html>
The <b> and <center> tags wrap around
your title. If you have forgotten to put the closing tags in (</b>
and </center>), all the words on your site will be bold and
centered.
That looks a little more like a title, but usually titles have a
larger font size. The way to tell the Browser to make the lettering
size bigger is with the tags: <h1>, <h2>, <h3>,
<h4>, <h5>, <h6>. <h1> is the largest font
size. Try a couple of sizes on your page to see which one looks
best to you.
The ending tags for everything having to do with fonts (size, bold,
etc) can be done with one tag: </font>. That way you don’t
have to do </b>, </h>.
If your block of text doesn’t have at least two sentences,
please add another sentence.
In most browsers, if you just put the text in loose, it will stretch
from one side of the screen to the other with no margins. There
are a couple of ways to change this. The first one is to put <blockquote>
</blockquote> around the text. If you want it to be indented
even more, you can put two or more sets of <blockquote> tags.
To save space on these pages, I will only show the body part of
the instructions.
<body>
<p><b><center><h2>
[Type your title again.]
</p></b></center></font>
<p><blockquote>
[Type a nice introduction for your page.]
</p></blockquote>
</body>
The layout of your page is now easy for the eye to
follow, but rather boring. One of the things that is missing is
color. It is very important to consider you audience when you choose
colors. Remember that there a are a lot of folk out there who have
vision problems. There are two places we will use color 1) the background,
2) the letters.
Use the color charts on the last pages to choose the colors you
would like to use on your page. The next piece of code has a place
for you to use both a background color and another color for the
text of your title. The rest of the words on your page will remain
black, so be careful not to choose a background color that is too
dark.
There are two kinds of codes to use for color: 1) the codes listed
on the color chart - be sure to use # with the numbers, 2) words
such as “blue” - be sure to use the “ “.
There is also a second way to show the font size. On the next piece
of code, the <H2> has been changed to <font size=6 ...
>. This allows all the font information to be together. With
this system the number is different: 6 is large.
<body bgcolor = #33cc99>
<p><b><center><font size=6 color=#330099>
[Type your title again.]
</p></b></center></font>
<hr>
<p><blockquote>
[Type a nice introduction for your page.]
</p></blockquote>
</body>
Another new piece of code is the <hr> tag. It
puts a line across the screen. If you put it inside the <blockquote>
tag, the line goes only to the margins. Otherwise it will go all
the way across the screen. Try both ways.
There are two more main topics to cover: 1) Graphics, 2) Linking.
(We will also touch on tables if we have time.)
Graphics
Graphics are shown on your web site from a file that is seperate
from the HTML file. The HTML file tells the browser to go find the
graphic file.
There are many places to get graphics for you web site. You can:
scan your own pictures, draw your own pictures in a drawing program,
buy clip art, use a graphic that is already on the web. If you do
the last one, be sure to check for copyrights. There are many sites
that have free clip art. Here’s ones:
http://www.aplusart.com/index.html
To use a graphic off the web, right click the graphic and choose
Save Picture As. Give the file a short name that you will remember.
You will have to be careful how you organize your files, so that
the html files know where to find the graphics. Make a folder for
your web site. Inside the folder make another folder called art.
Put your graphics in the art folder.
See the last sample for the code for graphics and links to other
sites.
|
