Let's make your first web in three step-by-step lessons. This
web will be completely on your laptop. Later, we'll put in on Ricci Street.
You might want to review basic skills such as copying and
pasting between software programs and opening multiple instances of the same
software program such as a text editor or web browser. Also, the step-by-step
instructions on this page are very similar to the information on the HTML page.
Lesson One
1. Make a folder
Right click on your desktop.
Select New | Folder.
Give it your last name -- all lowercase, all one word, that is,
no caps no spaces.
I will refer to this as your lastname folder and sometimes refer
to it as your lastname/ folder.
If it is on your desktop, which I recommend, the path to
it on your hard drive will be C:\WINDOWS\Desktop\lastname
Everything in your web will go into this folder.
2. Make an HTML file
Open Notepad. Resize it so that it shares the screen with the
new folder.
Type or copy/paste these tags:
<html>
<head>
</head>
<body>
</body>
</html>
I'm using color and indentation here to help you learn to read
HTML. In Notepad, your text will all be black on white, all flush left.
Note the three pairs of tags: html,
head, and body. Note how the html pair contains the other two pairs. Note
how the head and body pairs don't contain anything yet. Note the angle brackets
and the forward slash that distinguishes the ending or closing tag, from the
beginning or opening tag.
Pull down Notepad's File menu, select Save As ..
Save the file as index.html -- no caps, no spaces -- into the
lastname folder on your desktop.
Tip | Whenever you're naming files or folders, always
follow that rule: no caps, no spaces. It's not required by Windows, but
your web will be on a different operating system called Linux, which is case
sensitive and doesn't deal with spaces gracefully.
3. Title your page
In Notepad, type:
<title> and </title> between the pair of head tags.
Between the title tags, type:
Welcome to yourname's web
Save the file.
Note how the pair of head tags contains the pair of title tags.
The pair of body tags is still empty.
4. View your page
Open Microsoft's browser and resize it so that it shares the
screen with Notepad and the lastname folder.
Drag the index.html file onto the browser. The page as it
displays in your browser is a blank white screen. Note the title at the very top
of the browser. Note also its address in the browser's address box. It should
now begin either:
C:\WINDOWS\Desktop
or
file:\\\C:\WINDOWS\Desktop
and end:
\Desktop\lastname\index.html
Shortcut - F8
There is shortcut for opening your browser and dragging your
index.html file onto it. F8
With your cursor still in the Notepad text document, press your
keyboard's F8 key. That will open the text file in the browser.
5. Review
You now have two views of the same page. The text view of
the HTML plain ASCII file in Notepad. The preview view of how the browser
renders the text file. We commonly, though misleadingly, call that a
"page".
To switch back and forth to see the effects of your text
editing, here's the routine:
Make changes to index.html in the text editor.
Save index.html, making sure you save it to the desktop/lastname folder so that
it replaces the previous version of index.html.
Select Refresh or Reload from the browser's toolbar. The changed page should
display.
Try it once to make sure you understand the sequence: edit,
save, refresh.
Lesson Two
6. Add text
Between the pair of body tags, type:
<p>Welcome to my home page.</p>
Underneath it, type:
<p>Check out my resume.</p>
Save in Notepad; refresh in the browser.
In the browser, you are seeing the p tag's
default attributes: white background, small
black text in the Times New Roman font, flush left with a very narrow margin.
7. Add an attribute
Let's change the background color from the default white to
something else. To add an attribute, expand the opening body tag.
<body>
Put a space between the y in body and the closing angle bracket.
Then type:
bgcolor="#ffcccc"
The expanded body tag will now look like this:
<body bgcolor="#ffcccc">
Yours will be in black and white in Notepad. To help you learn
to read HTML, I use color here. The tag is in purple, the attribute
is in red, and the variable is in blue. Spelling and spacing matter; case
does not matter. Technically, case does not matter now. However, it will matter
in the future, so I recommend getting used to all lower case.
Between the quotation marks, you need six characters from among
the ten numbers, zero to nine, and the first six letters of the alphabet, a to
f. Any combination will do.
Save in Notepad; refresh in the browser. If you have a dark
background, you may not be able to read the text.
8. Add another attribute
Let's change the color of the text by expanding the body tag
further. Type
<body bgcolor="#666633" text="#ffcccc">
Again, spelling and spacing matter; case doesn't. Nor does the
order of the attributes. You could specify text color before background color.
Again, any six characters from 0 to 9 and a to f in any order.
Save in Notepad; refresh in the browser. If there is not
sufficient contrast between the two colors, change one or both. Save in Notepad
and refresh in the browser until you have a color combination that you're happy
with.
9. Make a second page
All the pages you make will use HTML and they all will end up in
your web online, so they will benefit from a common look and feel. Thus, a
second page will have much in common with the first.
Thus, you can use the first page as a template for the
second page. I use this method for every new page on Ricci Street, so I
recommend that you get used to it now.
To make any new page in a web, start with a current page, save
it with the new page's filename, then make the changes.
Tonight, to make your second page, open index.html in Notepad.
Pull down the File menu and select Save As ..
Name the file resume.htm -- no caps, no spaces -- and save it
into the lastname folder on your desktop. That folder should now have two files,
index.html and resume.htm.
Change the title tag and the two body color attributes of
resume.htm. Type:
yourname's resume
between the pair of title tags on resume.htm (to replace the
"Welcome to yourname's web" title carried over from the Save As ..).
Still on resume.htm, type:
Resume of yourname
between the first pair of p tags (to replace "Welcome to my
home page." carried over from the Save As ..). Type:
back to home
between the second pair of p tags.
Save the second page.
10. Review
Your two Notepad pages in your lastname folder should now look
like this, substituting your name for mine and your colors for mine.
Please note the rigid similarity between the files. Everything
is the same except only the things that must be different. The similarity will
give the web its look and feel. Already, yours will look very different from
everyone else's because of the color combinations.
Lesson Three
11. Link the two pages
We're going to use a new tag pair, the a or anchor tag. <a> and </a>. It
will have one attribute, the filename of the page you want anchored to the
word(s) between the a tags. In this case, we are going to make the word
"resume" hot, that is, clickable.
To summarize, on your index page, the word resume will be linked
to your resume page.
With index.html open in Notepad, type:
<a href="resume.htm"> and </a>
on either side of the word resume. The whole line will look like
this:
<p>Check
out my <a href="resume.htm">resume</a>.</p>
Next, with resume.htm open in Notepad, type:
<a href="index.html"> and </a>
on either side of the word home. The whole line will look like
this:
<p>Back
to <a href="index.html">home</a>.</p>
Again, spelling, case, and spacing matter. No caps, no spaces.
Save in Notepad; refresh in the browser.
12. Change the link colors
As you can see, the default link is blue and underlined.
Depending on your background and text colors, the links may not have sufficient
contrast to be readable.
In Notepad, add attributes to the body tag of both files. Right
now, you have specified only the background color and the text color. You should
have:
<body bgcolor="#666633" text="#ffcccc">
Type:
link="#990000" vlink="#990000"
You should then have:
<body bgcolor="#666633" text="#ffcccc" link="#990000" vlink="#990000">
Again, spelling, case, and spacing matter. Attribute order
don't matter. What you see in blue above is always in groups of six characters
between 0 and 9, a and f.
Save in Notepad; refresh in the browser.
13. Design the page
You have now encountered your first major design problem. It's
as though you have two adjoining rooms in your house and you have to coordinate
the wall colors and furniture colors. For each web page you have made tonight,
you can adjust the color of the background, the text, unvisited links and
visited links. What should stay the same? What should vary? How can you meet
those requirements as well as provide sufficient contrast for readability?
How did I answer those questions when I designed Ricci Street?
On top of all that, how can you make the pages look good and
make them look like yours?
Don't forget to have fun!
ColorMixers
Joe Barta's
ColorPicker
Color schemes generator
Color Combo
5 B's: bullets, buttons, bars, banners, and backgrounds
IconBazaar
Ender Design's Realm Graphics
14. Embed an image
On any Ricci Street page, right click on one of the images.
There's always one on the top left of the page.
Save the image to the yourname folder on your desktop. You can
rename the image if you want to, but the extension should be .gif. Let's say
it's logowares.gif.
Many images have .jpg extensions. These two, .gif and .jpg --
pronounced hard-g giff as in gift and jay-peg -- are the two image formats that
all browsers will display.
In Notepad, open either index.html or resume.htm. Somewhere
between the pair of body tags, type
<img src="logowares.gif" alt="logo" border="0">
Save in Notepad; refresh in the browser. The image should be
displayed somewhere on the page. In the browser, hover over the image and pause.
The word "logo" should pop up in a moment.
Back in Notepad, play with the attribute values to see what they
do. Change the word logo to something else. Change the 0 border to 5 or 10.
Save in Notepad; refresh in the browser. Hover over the image
and pause.
You can make the image hot by wrapping the pair of a tags around
the un-paired img tag. For example, let's say you want to make the image an
anchor for the Ricci Street home page. It would look like this:
<a href="resume.htm"><img src="http://RicciStret.net" alt="go to Ricci Street
home page" border="0"></a>
Save in Notepad; refresh in the browser. Hover over the image
and pause. The words "go to Ricci Street home page" should pop up in a
moment.
Tip | With HTML, an embedded image is a separate file
and remains a separate file, unlike Word, where a copy is incorporated into the
.doc file and the original stays where you found it.
15. Review
You now know how to make web pages, link them together, and
embed images. That's your basic unit on the World Wide Web.
Quantitatively, everything else is just more of the same.
Qualitatively, you are now literate and your hard job has begun: design.
Information design: What text and images will you put on
your pages?
Visual design: What will they look like?
Navigation design: How will you provide the information
for users to find their way in your web?
In my experience with several dozen MBA 504 students, ninety
percent of the things that go wrong with your web pages are covered above. Most
of the rest have to do with file management, specifically, where files are and
moving them around.
16. Learn more
At this Toolkit webmaking section, learn more about basic HTML and web page anatomy.
Hand-coding
