Download Putting It on the Web

Designing Your Site
Why do we make web pages? People make them for all sorts of reasons. Some make
sites about their favorite bands, their hobbies, or to sell merchandise or ideas. Web sites
can take the form of anything you can think of. Just like the people in your family, some
Web pages are neat, some are weird, some are boring, and some are interesting.
Before you start creating a Web site, first think about why you're making it. Knowing the
purpose of your site will help when you get ready to design it.
For example, let's say you really like staplers. Staplers are terrific, you say to yourself.
They're useful and neat looking and just all-around great pieces of modern technology.
They deserve their own Web site! OK, so now you know the purpose of your site: to tell
people all about staplers and how wonderful they are. So you'll want to have a few
pictures of staplers and some text describing what they do and why you like them. Then
maybe you'll want to add some links to other stapler-related sites so your visitors can
easily find more information. Great! You already have more ideas for content than a lot
of Web sites out there right now.
Now you can sit down and sketch what you want your page to look like. Sketch it out
with using pencil and paper. Forget about the computer for a few minutes and just draw
it. Where should the picture of the staplers go on the page? Where should your writing
go? What about those poems you wrote about staplers? What about your links? Where
can they go?
If it looks too crowded with everything on one page, think about having a second page
and then linking them together. Also plan out what color you want everything to be.
Should all the writing be green? Should there be a pattern in the background? Don't
worry about how you're going to do all that stuff, just think about how you want it to
look, and figure out the details later on.
You want lots of people to come visit your site. Make it easy for your visitors to get
around and find what they want. If you're making a page about staplers, don't have a
bunch of pictures of your pet and then all the stapler information squeezed down at the
bottom of the page. People get impatient really quickly when looking at Web sites there are always other places to go. Think about what you don’t like in a site. So make
sure your site does what it's supposed to do. If it's supposed to tell people about
staplers, then it should do that quickly and easily. KISS – keep it simple stupid, but
interesting enough to draw the audience.
There's a lot of planning involved with making a Web site, but all this thinking means
less work for you down the road. You'd be surprised how many people skip the planning
part and jump right into making the site. It'll take longer to finish.
So now you know what you want your site to look like. How do you get that cute little
sketch onto a computer?
Looking Behind the Scenes
Source Code and Using Templates
One of the great things about the Web is how easy it is to look at someone else's HTML
code. You can peek at the code for any site you visit by going there and choosing
Source or Page Source from your browser's View menu depending on the browser.
This is a great way to learn the finer points of HTML. You may want to look at the HTML
to learn some new tricks and see what's going on behind the scenes. Remember
copyrights. Don't steal someone else’s coding and use it for as your own. Some people
just swipe the code and use it themselves. Of course, they have to go in there and
change it around a little so the text is about staplers (or whatever) instead of Lucky
Charms (or whatever), but it's still a lot less work than making a whole Web site yourself
from scratch.
This is, of course, a bad thing to do since you're stealing someone else's work. But!
Some people make HTML files that they want you to steal and change around and use
for your own site. These are called templates, and they fill in a lot of the basic HTML
code for you so you don't have to worry about it. Then you can add your text or pictures
or whatever to make it your own.
HTML Tags
Once you know how you want your Web site to look, you have to convert it somehow so
that your Web browser will display it. To do this, you need to use HTML.
An HTML file is just a page of text like a word processor document. In fact, you can use
a word processor to write HTML code. You can use anything that allows you to type
something in and save it as a text document. Web browsers want only text, that's it.
They can't deal with anything else.
An HTML file contains all the writing that will appear on your page, plus instructions to
the browser about where that writing should go and how it should look. If you have any
pictures, animations, or sounds you want to include, the HTML file will tell the browser
where to find them, how to display them and where to put them on your page. HTML
does this by using things called tags.
Tags are letters or words between two brackets, like this: <tag>. There are many tags.
Learning HTML means learning all the various tags. Each tag does a different thing. For
example, there's one that will make your text bigger, another that will center it on the
page, and another that will create a link. So you need to define the tag you want to use,
place it right in front and behind the word that you want to change. This tells the
browser that it's supposed to do something where the tags exist.
If you want the word "staplers" to be boldfaced, that is emphasize the word, you
need to tell the Web browser the word "staplers" will be bold. Use the bold tag, which
looks like this: <b>. "B" stands for "bold." Most tags use abbreviations like this, making
them pretty easy to remember. So the tag is telling the browser to start bolding
everything after the bracket or tag.
The problem is that the browser doesn't know when to stop - it'll put every single word
after that tag into boldface. To keep this from happening, you need to tell the browser
when to stop the bold. That's why HTML has closing tags. Closing tags are just like the
regular tags (sometimes called "opening tags"), except there's a slash in there before
the letter. The closing tag for boldfacing, then, looks like this: </b>. This tag tells the
browser to stop the boldface. So if you just want the word "staplers" put into boldface,
you stick the regular tag in front of "staplers" and the closing tag after it:
<b>staplers</b>.
These tags can be placed anywhere on your page. The Web browser knows not to
display these tags on your page, but just to read them and obey their instructions. So
let's say you have your poem about staplers and you want to put some of the words into
boldface. You'd type it out like this:
There is nothing that I love more
Than my beautiful <b>stapler</b>,
I got it at the grocery store
And nothing rhymes with <b>stapler</b>.
When the Web browser looks at this code, it will display it like this:
There is nothing that I love more Than my beautiful stapler,I got it at the grocery store
And nothing rhymes with stapler.
Just like that, you're writing HTML code. If you can handle the idea of opening and
closing tags and you can learn the various tags you’re on your way to learning HTML.
Starting HTML
All you need to write an HTML file is a text editor. If you're on a Macintosh, you
probably have something called SimpleText, which will do just fine. If you're using
Windows, you should have a program called Notepad. Open the program and create a
new file. Now you need to type in some HTML code.
Every HTML file has to start and end with the same tags. Just like the <b> tag that tells
the browser to make text bold, you need some tags to tell the browser that it's about to
read an HTML file. So the first tag you have to use is the <html> tag. It has to be the
first thing on the page, and its closing tag, </html>, has to be the last thing.
Place the <body> tags inside the <html> tags. This tells the browser where to look for
all the actual page content. The <html> and <body> tags are really the only tags you
have to use. There are others that you should use, but you can get away with just those
two. So if you type something inside the <body> tags, you'll have a Web page.
Type this into your text editor, either SimpleText or Notepad.
<html>
<body>
This is my Web page about staplers. I think it's pretty great so far. I'm an HTML master
and everyone should worship me.
</body>
</html>
Now save the file. Give it whatever name you want, but be sure to add the .html
extension so the Web browser will recognize it as something it knows how to read. Let's
call this one staplers.html.
You created a Web page that simple. To see what it looks like in a Web browser open
up your browser (Netscape Navigator, Internet Explorer). Open your new file. Go to the
File menu and choose Open Page or Open File depending on what browser you're using,
and then find staplers.html. The browser will open up your file and display it. It should
look like an empty page except for your text in the upper-left-hand corner.
If it doesn't look like that, then you may have forgotten to type in one of the tags or
skipped a slash or bracket or something. This is always happening and becomes the
most frustrating part of writing HTML. It's really easy to forget one little thing, and you'll
know that something is wrong with your page, but it takes a while to figure out what
you missed.
As you can see, the browser didn’t print the tags onto the page - it just wrote out your
text. Now if you wanted to make the word "staplers" bold, as we did before, you would
just return to your file and add the <b> tags around that word.
You'd save the file again, then return to your browser and press the Reload button at
the top of the screen. Reload tells the browser to find the same file (staplers.html) and
display it again with any updates. So this time around, you'll see your change: The word
"staplers" should now be in boldface.
That's pretty much how people design Web sites. They create a basic HTML file, then
keep adding new stuff to it, trying out different things, then they look at the results in
their browsers. It is best to regularly save your updates in the text file, then refresh or
reload the page so that you are not stuck with troubleshooting numerous coding errors.
Working with Text
Paragraphs
The tag <p> begins a paragraph. Paragraph tags are the most common and userfriendly of all the HTML tags. Inserted at the beginning of each paragraph, the <p> tag
skips a line before each block of text. There's no need to close off the <p> tag with a
</p>.
The HTML for two plain-old paragraphs will look something like this:
<p> Did it ever occur to you that if every student in your whole school decided not to
show up one day, there's really nothing the school could do about it?
<p> I mean, if <i>everybody</i> stayed home, they wouldn't be able to punish any
particular student too harshly - it would probably take them all day just to try to call
everyone's parents.
They'll appear like this:
Did it ever occur to you that if every student in your whole school decided not to show
up one day, there's really nothing the school could do about it?
I mean, if everybody stayed home, they wouldn't be able to punish any particular
student too harshly - it would take them all day just to try to call everyone's parents.
To end a paragraph, you must place an end paragraph tag </p>, else all your text will
be placed in one big paragraph.
Aligning Text
<p align=left> aligns a paragraph to the left
<p align=right> aligns a paragraph to the right
<p align=center> centers a paragraph
Remember when you learned about the <p> tag? Not only does the <p> tag make the
text skip down a line, but you can put align inside the tag to make the text of a
paragraph scoot over to the left or right or stay in the center.
So if you were to write this in your HTML doc:
<p align=left>I like to watch spiders spin their webs. Spider webs are really neat.
<p align=center>On the other hand, if I see a spider on the floor, I like to step on it
and squish it.
<p align=right>I worry sometimes that maybe it's bad karma to squish spiders,
especially if they're not trying to bite you or anything.
Then your page will appear like this:
I like to watch spiders spin their webs. Spider webs are really neat.
On the other hand, if I see a spider on the floor, I like to step on it and squish it.
I worry sometimes that maybe it's bad karma to squish spiders, especially if they're not
trying to bite you or anything.
Bold Text
The tag <b> creates bold text and </b> closes bold text. To create bold text, just
sandwich the word(s) you want to appear in bold between the tags <b> and </b>.
For example, you might want to say something like:
<b>Help!</b> There's a <b>Webmonkey</b> in my house!
Which will look like this:
Help! There's a Webmonkey in my house!
Italic Text
The tag <i> creates italic text and </i> closes italic text. To create italics, just sandwich
the words you want to appear in italics between the tags <i> and </i>.
For example, you could say:
<b>Help!</b> There's a <b>Webmonkey</b> in my house, and I <i>really</i> don't
like it!
Which will look like this:
Help! There's a Webmonkey in my house, and I really don't like it!
Line Breaks
The simple tag <br> inserts a line break. In most cases, the paragraph tag, <p>, is the
best way to divide up your text. But sometimes you want to end a line of text and start
a new one without skipping a line in between. In these cases, it's usually best to insert a
line break, using the <br> tag.
The HTML for a poem using line breaks might look like this:
<p>I really love the Internet.<br>
I could surf all day!<br>
My bosses haven't caught me yet,<br>
If they do, they'll dock my pay!
And will read very much the same:
I really love the Internet.
I could surf all day!
My bosses haven't caught me yet,
If they do, they'll dock my pay!
To make double space, use two <br> tags, for triple use three.
Comment
<!-- --> tag creates a space for comments within the tags. The comment tag creates a
space in your HTML document for content that won't appear on the page itself. Since
everything inside the comment tag remains hidden, you can use it for personal
reminders, notes to friends or documentation to describe aspects of your HTML code.
But be careful since comment tags are visible to anyone who views your source code. If
you hide your deepest, darkest secrets there, someone's likely to see it.
Comment tags look like this:
<!-- Eric, keep your comments to yourself. -->
We'd show you what it looks like, but it's hidden. You'll have to take our word for it.
Links
<a href="?"> creates a link and </a> closes a link. Without links, the Web would be
useless. After all, links are what make the Web a web. You can add links that connect
your page to other sites on the Net.
Before you make a link, you need the URL of the page you're linking to. The URL is the
syntax "http://www.whatever.com" that makes up Web addresses. Then decide which
word (or words) on your page will act as the link. The link will be the hot spot, where
people can click if they want to go somewhere else. Links are generally underlined and
appear on the browser in a different color than the rest of the text; they usually show
up as blue unless you make them another color.
To create a link, you should sandwich your selected words between the "anchor" tags
(<a href="?"> and </a>), replacing the "?" with the correct URL.
The HTML for a link looks like this:
<a href="http://www.hits.org/">Check out this site!</a>!
And would appear in a browser like this:
Check out this site!
Working with Images
Images
<img src="?"> places an image within a page. While <img align="?"> aligns an image
with the text.
Before you can put an image on a Web page, you need to know the name of the image
file and where it's stored on your computer or the web server. This way you can tell the
browser where to get the image it needs. The easiest place to save the image is in the
same folder or directory as your HTML file, which is where the browser will automatically
look for it.
We have an image called books.gif , and it's in a folder called "stuff," which is in the
same folder on our server as this HTML file.
The HTML for my monkey image will read like this:
<img src="/webmonkey/kids/lessons/stuff/books.gif">
The picture looks like this:
Aligning Images
Using the image align tag, you can also choose where the image is placed on the page.
For instance, it can be right aligned.
<img align=right src="/webmonkey/kids/lessons/stuff/books.gif">
Which aligns the image with the right margin.
Centering an image is a little trickier, because <img align=center> doesn't work on
every browser. Instead, you'll have to first center the paragraph, with <p
align=center>, and then place the image.
So, to center our books, the code will look like this:
<p align=center><img src="/webmonkey/kids/lessons/stuff/books.gif"> </p>
And it will appear like this:
Image Borders
<img border=#> sets the border size of an image
The image border is the line that appears around the edge of a picture placed on a Web
page. Normally, this border will appear only if you use the image as a link. You can,
however, create a border of any size around your image by using the <img border=#>
tag, and replacing the # with a border size, from 0 to 99.
Perhaps more important, you can prevent a border from appearing around a linked
image by setting the border size to zero (<img border=0>).
To add a border to our books, type this:
<img border=5 src="/webmonkey/kids/lessons/stuff/books.gif">
Wrapping Text Around an Image
<img align=left> aligns an image to the left side of the page
<img align=right> aligns an image to the right side of the page
<img align=middle> aligns text to the middle of an image
Pictures are nice but you'll want to have some words with them on your Web page.
There are several ways to wrap text around pictures, and they're controlled through the
<img align> tags. For starters, you can align an image down the left or right side of a
page and let the text flow around it.
Here's how you can lead a paragraph off with an image:
<p><img align=left src="/webmonkey/kids/lessons/stuff/books.gif"> These books are
dusty and need to be read. It will make kids happy and perky. Who will read the
books?</p>
The text will begin at the top of the image and flow down its right-hand side:
These books are dusty and need to be read. It will make kids
happy and perky. Who will read the books?
If you want the text to begin above the image and wrap around it you can stick the
image into the paragraph:
<p> These books are dusty and need to be read. <img align=left
src="/webmonkey/kids/lessons/stuff/books.gif"> . It will make kids happy and perky.
Who will read the books?
The image will appear on the left-hand side, beginning at the first line after it was
inserted. The text will wrap around it:
These books are dusty and need to be read.
It will make kids happy and perky. Who will read the books?
Adding Changes to Your Page
Background Color
The tag <body bgcolor="?"> sets the background color for your web page. Why make
your Web page on a boring white background when there's a world of color out there?
You can choose a page's background color inside the <body> tag at the beginning of
your document. So, if you write this in your HTML document:
<body bgcolor=yellow> your background will be yellow. Not every color name will
work, but then you can always refer to the hex code for your color. For a more complete
list, check various books or web sites on HTML.
Font Color
The tag <body text=?> sets the font color, while <body link="?"> sets the color of
links. Another nice feature <body vlink="?"> sets the color of links that you have clicked
on before, that is after they have been activated. Using the tag <body alink="?"> sets
the color of links right when you're clicking on them.
Simply using the tag <font color="?"> changes the font color. Using </font> returns
font to the color it was before the last <font color=?> tag.
Fonts are the kinds of letter styles you can use on your Web page. Examples include
"Helvetica" and "Times New Roman." To color the words on your whole page, put the
font colors inside the HTML page's <body> tag.
<body text=lime link=red vlink=black alink=violet>
You will get a really hard to read, but nicely colored page, with lime green text and red
links that turn black when you click on them, and violet after you've followed them.
You can color a single word. The following HTML code “<font color=red>Green</font>
with envy.” will display as follows.
Green with envy.
You may also use hex codes to represent various colors.
Font Size
The tag <font size=#> adjusts font size while </font> returns font to default size. Want
to make your words really big or really small? Or somewhere in between? That's what
the <font size> tag lets you do.
The default font size is 3, but you can alter it by inserting a number, such as <font
size=5>, or a relative value (using the plus or minus sign), which changes the size in
relation to the size that's already there: <font size=+2> or <font size=-1>, for
example.
So if you write this:
<font size=6>I am a big person.</font>
You'll get:
I am a big person.
The <font size> tag even lets you combine different sized words on the same line, so
you can stride across the page like a GIANT!
Headlines
Headings add emphasis to pages for sections by using <h1> a page will display a large
headline, </h1> turns off large headlines. The tag <h3> turns on medium-sized
headlines and </h3> turns off medium-sized headlines. The tag <h6> turns on small
headlines and </h6> turns off small headlines. Headlines are easy, and you can make
them big, small, or in between. They get switched on with a tag such as <h1> and
switched off with a corresponding </h1>.
Write in your HTML file:
<h1> EXTRA! COW SITS ON FARMER. DELL IS SHOCKED. </h1>
to display the following.
EXTRA! COW SITS ON FARMER. DELL IS SHOCKED.
Putting It on the Web
It's great and all to have a snazzy Web page that you can look at on your computer, but
how do you get the rest of the world to see it? How do you get it onto the Web?
To get to any site, your computer had to call your ISP, Internet service provider, the
service that gives you access to the Internet. Since your ISP has a bunch of computers
that are linked up to the Internet, what you need to do is send your HTML file to your
ISP so it can store your file on one of its computers. That way other web surfers around
the world will be able to access it.
Most ISPs will give their users some storage space on their computers so people can
create Web sites and put them there. But many people sign up with a free Web page
provider, like Tripod, GeoCities, or Angelfire. All you do is go to one of these sites and
set up an account, then you'll have a home for your site.
Tripod, though you can use whatever provider you want - they're all basically the same,
has its sign-up page, and soon enough you'll have an account with your own member
name. This means you'll have space on Tripod's computer to store your files, and your
site will have an address that others can use to visit your homepage. Your URL will look
something like:
http://members.tripod.com/~YourMemberName/
Tripod also has some nifty tools that can make your life easier. It has templates so you
don't have to worry about HTML, and a library of pictures and sounds that you can add
to your site. More important, Tripod makes it simple for you to send files from your
computer to the Internet. This process is called file transfer protocol (FTP), which
sounds tricky but these days is just a matter of pressing a button or two. You send all of
your HTML files from your computer to your Tripod account, "uploading."
Use the File Manager to send a copy of that file from your hard drive to Tripod's
computer. Since Tripod's computer is connected directly to the Internet, people who
know the address of your page can go to it and view it on their browsers. The address
might look something like this:
http://members.tripod.com/~YourMemberName/staplers.html
"Downloading" works the opposite way. Instead of sending a file from your computer to
another computer, you're receiving it. Therefore, when you go look at a Web site, what
you're actually doing is downloading a bunch of HTML files and pictures and sounds to
your computer.
You can also use your own program to upload and download things. Two of the best
FTP programs are Fetch (for the Mac) and CuteFTP (for Windows). Once you upload
your files, they are there on the Internet, available to whomever wants to look at them.