Scribd
Upload
51 views

Howto - To Guides For HTML

This document provides instructions for 12 projects to create a basic web page using HTML. Project #1 explains how to write a message on the page. Project #2 describes how to change the background and text colors. Project #3 adds an image. Later projects introduce tables, adjusting image placement and size, adding rows and borders, and wrapping text around images. The final projects provide directions for links, special characters, and other HTML elements.

Uploaded by

Leon Verde
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
51 views

Howto - To Guides For HTML

This document provides instructions for 12 projects to create a basic web page using HTML. Project #1 explains how to write a message on the page. Project #2 describes how to change the background and text colors. Project #3 adds an image. Later projects introduce tables, adjusting image placement and size, adding rows and borders, and wrapping text around images. The final projects provide directions for links, special characters, and other HTML elements.

Uploaded by

Leon Verde
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

How-To Guides for

Creating a Web Page using HTML




Project #1: Write a message.

Project #2: Change colors of background & text.

Project #3: Add a picture.

Project #4: Turn a picture into a fancy background.

Project #5: Using tables in your web page.

Project #6: Move pictures in your table.

Project #7: Changing the size of your table.

Project #8: Adding rows & a border to your table.

Project #9: Adding columns to your table.

Project #10: Wrapping text around a picture.

Project #11: Adjusting the size of your pictures.

Making the Web Page for your Alaskan Research Report

Making Links from your Web Page to Other Web Pages

Directions for Special Characters in HTML

More HTML Tips: Finishing Touches
Created by Caryn Camp Page 1 Spring, 2001
Instructions for Making a Practice Web Page
using HTML computer language:

Project #1:

1. On the Finder (desktop), go to File New Folder.
Name your folder.

2. Open Simple Text

3. Type:

<html>

<body>

Write a message here.

</body>

</html>

4. Save as: name.html (save it in the folder you
created on the desktop)

5. Open Netscape. Go to: File Open Page in
Navigator. Select Desktop, then your folder, then
your file.html



Created by Caryn Camp Page 2 Spring, 2001
Project #2:

Does your message show up? If so, now you are ready to
change the background color. To find your background
color, you may just choose to write red or yellow, or you
may go to this web site and write down the number for the
color you want:

http://hotwired.lycos.com/webmonkey/kids/tools/color_codes.html

Now go back to your document in Simple Text and make
these changes:

<html>
<body>

<body bgcolor=yellow>

Your message here.

</body>
</html>

If you have a number for a color, you may write:
<body bgcolor=#336699>

If you chose a color that black text wont show up on, then
choose a different color for the text. For white text, put this
command after your background color command:

<body text=#FFFFFF>

Save it again. Go back to look at it in Netscape: In
Netscape, go to: File Open Page in Navigator. Select
Desktop, then your folder, then your file.html

Do you see the new background color?
Now for something really cool:
Go to View Page Source to see the HTML commands
you wrote.
Created by Caryn Camp Page 3 Spring, 2001
Project #3:

If you have time, try saving a picture into your folder,
and putting it on your web page.

Here is what you do:

1. In Netscape, go to one of these web sites to find a
picture. (Try to find a picture quickly so that you can
practice putting it on your web page.)

http://pec.jun.alaska.edu/sj/pages/alaska/index.htm

If you want to find a picture of an animated state
flag, go to this web site and click on state flags:
http://www.fg-a.com/


2. When you find a picture, click on it and hold your finger
down on the mouse until a window pops up. Keep your
finger down and drag the arrow down to where it says
Save this image as Then release the mouse.
Navigate to your folder on the desktop. Before saving
the picture into your folder, type an easy name to
remember, and then add .jpg or .gif on the end of it (look
to see which one it uses). For example, a flag may be
alaska.gif and a picture of a whale may be whale.jpg
Make sure you include the ending part.

3. Now go to Simple Text and open up your name.html file.
After your background and text commands, and
somewhere before you close the body (before </body>),
type:

<img src=picturename.jpg> (or picturename.gif)

Then save, and look in Netscape again.


Created by Caryn Camp Page 4 Spring, 2001
Project #4:

Now, if you still have time

You can try making a fancy background using a picture. You
may either use the picture you already saved, or you may go
to http://www.google.com/ and search for free downloads
+background. Or, you can also find some at the web site:
http://www.fg-a.com/

When you find a background you like, save it the same way
you did the picture.

Then go to Simple Text.

Delete your command for a background color (the one that
says: <body bgcolor=>

Type in:
<body background=picturename.gif>

Save. Go to Netscape, and check it out. Take another look
at View Page Source.


Here are some other commands you can try adding to
your html page:

Put <H1> before your text, and </H1> after your text, and the
words will be much bigger. You can try H2 or H3 etc. also.

If you want new paragraphs, put <p> at the beginning of
each new paragraph.

If you want a certain word to be in BOLD, put <b> right
before the word, and </b> right after the word.
Created by Caryn Camp Page 5 Spring, 2001
Project #5: Using Tables in our Web page

Type this in: This is why:
<html>
Hello Mr. Computerwake up. Im going to start
speaking to you in your language because I want
to make a web page so START LISTENING!
<body>
Telling computer that youre starting the body of
your web page.
<body bgcolor=#6699CC>
Or, use a picture for a background pattern:
<body background=picture.jpg>
<body text=#FFFFFF>
You can skip this and the text will be black.
<H1>My table is coming next.</H1> These words are not in the table. They are
before it.
<table width=420 border=3
cellspacing=3 bgcolor=#993366>
Telling the computer that youre starting a table.
Within the table tags (< >), you are saying you
want your table to be 420 pixels across (a full
screen is usually 640 pixels across), and that you
want to see the border of the table. You want the
border to be 3 pixels wide. The border is like a
frame. And you want the background inside the
table to have a different color.
<TR> TR= table row. This will be the first row of the
table.
<TD> TD= table data. Telling the computer that you
are about to tell it what you want to go in the first
row of the table.
<img src=clanname.jpg align=left> Type the name of your clan instead of
clanname. For example, type eagle.jpg I put
a clan picture in your alaska_webpage folder.
<H1>Type a few sentences here
about anything and put the H1 tag
before it and after it just so the words
are bigger.</H1>

</TD> Telling the computer that youre done putting
stuff in this row of the table.
</TR> Now you have to tell the computer that the row is
finished.
</table> We only wanted one row in this table, and so
were done. Telling the computer that the table is
finished.
<H1>Lets see what happens if we
type here.</H1>

</body> Telling computer youre done with the body of the
web page.
</html> Telling computer that you are no longer talking to
it because the web page is finished, so it can
stop listening.

Created by Caryn Camp Page 6 Spring, 2001
Project #6

1. Open up the simple text document that you just made in Project
#5, and go to where you have the tag for <img src=>

2. Instead of align left, type in right. Save and reload in
Netscape.

3. Then go back to Simple Text and change it to center. Save
and reload in Netscape.

4. Then change it back to left.











Project #7

Open up the simple text document that you made in Project #5, and
go to where you open the table:

<table width=420 border=3 cellspacing=3 bgcolor=#993366>

1. Change the width to another number from 50 to 640. Save
and reload in Netscape.

2. Back in Simple Text, change the border to another number
from 0-10. Save and reload in Netscape.

3. Back in Simple Text, change the cellspacing to another
number from 0-10. Save and reload in Netscape.

Created by Caryn Camp Page 7 Spring, 2001

Project #8

In this project, you will make two rows in your table, and each one will
have a different color. There will be a border around your table.

<html>
<body>
<body bgcolor=#CCCCFF>

<table width=640 border=2 cellpadding=2 bgcolor=FFFF99>
<TR bgcolor=#666699>
<TD>This is my first row.
</TD>
</TR>

<TR bgcolor=#CCFF99>
<TD> This is my second row.
</TD>
</TR>

</table>
</body>
</html>









Created by Caryn Camp Page 8 Spring, 2001
Project #9
In this project, you will add columns to your table. There will be two
rows and two columns. In each row, you will have to use <TD> twice.
That is because you have to tell the computer what to put in each
cell of the row. (A cell is the space in a row for one column only.
If there are no columns, then the whole row is a cell. When
someone says cell 2,1 they mean the space in the second row, first
column.)
<html>
<body>
<body bgcolor=#CCCCFF>

<table width=640 border=2
cellpadding=2 bgcolor=FFFF99>
Starting the Table
<TR>
Starting first row of table
<TD bgcolor=#666699>
Starting first column. New color.
This cell is my first row, first
column.
What youre putting in the first column
of the first row. This could be a picture.
</TD>
Ending the first column (of 1
st
row)

<TD bgcolor=99CCFF>
Starting second column. New color.
This cell is my first row,
second column.
What youre putting in the second
column of the first row.
</TD>
Ending the second column (of 1
st
row)
</TR>
Ending the first row of the table.

<TR>
Starting a new row (2
nd
row).
<TD bgcolor=#CCFF99>
Starting first column (new color).
This cell is my second row,
first column.
What youre putting in the first column
of the 2nd row. This could be a picture.
</TD>
Ending the first column (of 2
nd
row)

<TD bgcolor=FFCC99>
Starting the 2
nd
column (new color)
This cell is my second row,
second column.
What youre putting in the 2
nd
column of
the 2
nd
row. This could be a picture.
</TD>
Ending the 2
nd
column (of 2
nd
row)
</TR>
Ending the row.

</table>
Ending the table
</body>
Ending the body.
</html>
Ending the web page.
Created by Caryn Camp Page 9 Spring, 2001
Project #10

This project can be used for making your Alaska Project web page.
The text will wrap-around two pictures. The pictures will be on the
left side of the page.

Before you start, go into your Student Area and open your Alaska
Report. (DO NOT WORRY if it is messed up, or not finished, or
needs work. This is just for practice.)
1. Go to EDIT and then SELECT ALL.
2. Now go to EDIT and click on COPY.

Now you can go into Simple Text.

Type in this: This is why:
<html>
<body>
<body bgcolor=#xxxxxx>
You pick the color. Or, you can type in
<body background=picture.jpg> with
the name of the picture or background
image you want on your background.
<body text=#xxxxxx>
You dont need to do this if you want
the text to be black.
<H1> The Title of your Report</H1>
The H1 makes the text bigger.
<P>
The P makes a new paragraph skips
a line.
<H4>by Name </H4>
The H4 makes a medium size text.
<BR>
The BR (break) skips a line.
<BR>



<table width =640 border=0
cellpadding=2 cellspacing=0>
Starting the table. It will cover the
whole width of the screen.
<TR>
Starting first row in table
<TD>
Getting ready to put stuff into first row.
<img src=picture.jpg align=left>
Choose a picture that is in your folder.
<P>
Now go to EDIT and then PASTE.
Your Alaska Report should appear.
Dont worry if it looks a mess. This is
just for practice.
<P>
Go through your Alaska Report, and
put <P> before the first word of every
new paragraph.
Created by Caryn Camp Page 10 Spring, 2001
Before continuing, decide where you want to put your second picture.
About half-way through your report, pick a place between two
paragraphs, and click on the line before a new paragraph starts
(before a <P>). To put a picture here, you will end the first row and
start a second row. Now type this:

</TD>
Ending the information for the first row.
</TR>
Ending the first row.
<TR>
Starting second row.
<TD>
Getting ready to put stuff in 2nd row.
<img src=picture.jpg align=left>
Pick another picture from your folder,
or use the same one again.
<P>
This is the beginning of a new
paragraph for the rest of your report .

At the end of your report, you will close the data, the row, the table,
the body, and the html:

</TD>
</TR>
</table>
</body>
</html>

















Created by Caryn Camp Page 11 Spring, 2001
Project #11
This project will let you put two pictures side by side. It will also show
you what to do if your pictures are too big to fit side by side on the
screen.

<html>
<body>
<body bgcolor=#339966>
Or <body background=pic.gif>
<body text=#xxxxxx
This is optional only if you want the
text to be a different color than black.
<H1>The title of your report </H1>

<P>

<H4>by Name </H4>
Experiment with H2, H6, H3 etc.
<BR>

<BR>

<table width=640 border=0
cellpadding=2 cellspacing=0>

<TR>

<TD>

<img src=pic1.jpg width=310>
This will force the first picture to be a
little less than half the width of the
page. The computer will automatically
adjust the height to be proportionally
correct. Do not make the width greater
than the original picture or it will get
distorted.
<img src=pic2.jpg width=310>
This will put the second picture right
next to the first one.
<P>

Write stuff.

</TD>

</TR>

</table>

</body>

</html>


Helpful web sites:
http://werbach.com/barebones/barebones.html
http://hotwired.lycos.com/webmonkey/kids/tools/color_codes.html
http://www.WebPageBackground.com/
http://grsites.com/textures/comp001.shtml
Created by Caryn Camp Page 12 Spring, 2001
Making The Web Page for Your Alaskan Research Report

1. Use Project #10 as your guide. You will follow these instructions to
make your page. (Project 10 is re-inserted after this page.)

2. When following the steps of Project #10, leave your background and text
colors until last. Before choosing your colors for background and text, do
the following:
The Title of Your Report (make up your own title, but make sure it
includes the name of your region). Use <H1>
The Author (thats you): by Kaya (first names only). Use <H4>

Your report (copy and paste it from the file in your Alaska_Web
folder that is called webreport). Put <P> at beginning of each
paragraph.

Two pictures.

3. SAVE AS: your name.html (hannah.html) (azure.html) (corey.html)
etc. Do NOT use capital letters. No spaces. You MUST have .html at
the end. Save in your Alaska_Web folder. Any pictures or background
images that you use must also be in that same folder.

4. Choose your background and text colors. Here are some choices:
http://hotwired.lycos.com/webmonkey/kids/tools/color_codes.html
http://www.WebPageBackground.com (for textured backgrounds)
Make your own: Draw one and have it scanned.
Ask a friend for one of theirs.

5. When you have completed the steps of Project #10, Make a Header:
Between <html> and <body>, type this to make a header:
<html>
<head>
<title>
Erics Report (or Brads Report, or Sydneys Report)
</title>
</head>

<body>

6. When you are all done, make sure that your HTML file (zach.html) and all
the pictures (.jpg, .gif) that you use in your web page are in your
Alaska_Web folder. If there is anything else in that folder that you are not
using, move them out to the trashcan.

Created by Caryn Camp Page 13 Spring, 2001
Repeating Project 10 for Alaskan Research Report Web Page

This project (#10) can be used for making your Alaska Project web page.
The text will wrap-around two pictures. The pictures will be on the left
side of the page.

Before you start, go into your Student Area and then into the folder
Alaska_Web. Double-click on(or open) the file that says webreport.
1. Go to EDIT and then SELECT ALL.
2. Now go to EDIT and click on COPY.

Now you can go into Simple Text.

Type in this: This is why:
<html>
<body>
<body bgcolor=#xxxxxx>
You pick the color. Or, you can type in
<body background=picture.jpg> with
the name of the picture or background
image you want on your background.
<body text=#xxxxxx>
You dont need to do this if you want
the text to be black.
<H1> The Title of your Report</H1>
The H1 makes the text bigger.
<P>
The P makes a new paragraph skips
a line.
<H4>by Name </H4>
The H4 makes a medium size text.
<BR>
The BR (break) skips a line.
<BR>



<table width =640 border=0
cellpadding=2 cellspacing=0>
Starting the table. It will cover the
whole width of the screen.
<TR>
Starting first row in table
<TD>
Getting ready to put stuff into first row.
<img src=picture.jpg align=left>
Choose a picture that is in your folder.
<P>
Now go to EDIT and then PASTE.
Your Alaska Report should appear.
Dont worry if it looks a mess. This is
just for practice.
<P>
Go through your Alaska Report, and
put <P> before the first word of every
new paragraph.


Created by Caryn Camp Page 14 Spring, 2001
Before continuing, decide where you want to put your second picture.
About half-way through your report, pick a place between two paragraphs,
and click on the line before a new paragraph starts (before a <P>). To put
a picture here, you will end the first row and start a second row. Now type
this:

</TD>
Ending the information for the first row.
</TR>
Ending the first row.
<TR>
Starting second row.
<TD>
Getting ready to put stuff in 2nd row.
<img src=picture.jpg align=left>
Pick another picture from your folder,
or use the same one again.
<P>
This is the beginning of a new
paragraph for the rest of your report .

At the end of your report, you will close the data, the row, the table, the
body, and the html:

</TD>
</TR>
</table>
</body>
</html>



Do you remember how to save a picture from the Internet? You did it in
Project 3:

When you find a picture, click on it and hold your finger down on the
mouse until a window pops up. Keep your finger down and drag the
arrow down to where it says Save this image as Then release
the mouse. Navigate to your Alaska_Web folder. Before saving the
picture into your folder, type an easy name to remember, and then
add .jpg or .gif on the end of it (look to see which one it uses). For
example, a flag may be alaska.gif and a picture of a whale may be
whale.jpg Make sure you include the ending part.

Here are some other web sites that you have used:
http://pec.jun.alaska.edu/sj/pages/alaska/index.htm
http://www.fg-a.com/ (for Alaska flag)
Created by Caryn Camp Page 15 Spring, 2001
Making Links from Your Web Page to other Web Pages

1. Make the links after you close the table, but before you close the
body:

</table>

make your links here

</body>
</html>

2. You may make any of these links:
to go back to the previous page (the page for everyone in your region)
to go home (the main classroom page)
to go to your clan web page
to go to the page that lists the Venn Diagrams (created by your region)
to go to the page that lists the Maps (created by your clan)

3. The simplest way to make a LINK is to just write words like Click here to go
back to the Far North Region page. All you have to do is type these
commands to the computer: (Make sure you substitute your clan name in the
link. The clans are: clan_raven, clan_killerwhale, clan_eagle, clan_coho,
clan_frog)

<P><A HREF="../">Click here to go back to the Far North Region Page</A></P>

<P><A HREF="../../../">Click here to go to the Classroom Home Page</A></P>

<P><A HREF="../../clan_raven/">Click here to go to my Clan Page</A></P>

<P><A HREF="../../venns/">Click here to see my groups Venn Diagram</A></P>

<P><A HREF= "../../graphs/">Click here to go to see my clans Map of Animals in
Alaska</A></P>
or, clans Map of Daylight Hours in Alaska
or, clans Map of Snowfall Amounts in Alaska
or, clans Map of Prices for Bread, Gas, and Milk in Alaska
or, clans Map of Population in Alaska
Created by Caryn Camp Page 16 Spring, 2001


4. Your link may also be clicking on a picture. To do that, you may download a
button from the Internet (try http://www.fg-a.com/) or from using a picture in your
alaska_webpage folder. If you use a picture, make sure you set the width to
no more than 50 pixels (width=50). If you use a picture, add some words so
the person will know where they are going. The image MUST be stored in
your alaska_webpage folder.


Example: To go back to previous page:


<P><A HREF="../"><img src="eskimo.jpg" width="50">Go back</A</P>


The only difference is that the HTML code for the picture was added:
<img src="eskimo.jpg" width="50">


You may want to use your little clan picture as a link to your classroom clan page.
For example,


<P><A HREF="../../clan_raven/"><img src=raven.jpg
width=50>Click here to go to my Clan Page</A></P>











Created by Caryn Camp Page 17 Spring, 2001
Special Characters:

Directions for Apostrophes in HTML

1. In Simple Text, type this:
&#39;

2. Highlight it using your mouse. Got to EDIT, then COPY.

3. On your html page in Simple Text, read through your report and
look for apostrophes. Every time you see an apostrophe, click to
the right of it. Hit Delete so it disappears. Then go to EDIT, and
PASTE.

The word dont would look like this: don&#39;t


Note: If you have any parentheses ( ) in your report, there is special
HTML language for that too:
Left ( &#40;
Right ) &#41;

More special characters at:
http://hotwired.lycos.com/webmonkey/reference/special_characters/









Created by Caryn Camp Page 18 Spring, 2001
More HTML Tips: Finishing Touches

For those of you who are finished with your web site, and want to
add a few design touches, here are some more HTML commands
that you can play with if you want:



1. Background Color in Table:

If you want the background color of your table to be different than
the background color outside the table, then stick a new bgcolor
(or background image) inside the tags for the table. Example:

<table width=640 border=0 bgcolor=#336699>

This is a good choice for someone who has a background that
they want to use but it is hard to see the words on. Put that
background outside of the table (in the BODY tags), and put a
different background inside the TABLE tags one that is easier to
see words on.



2. Changing text color in the table:

If you want to change the color of the words inside the table, there
is a different command to use. You dont use text= You use:
<font color=#FFFFFF> or whatever color you want. You have to
close this command like so: </font color> This command is used
Created by Caryn Camp Page 19 Spring, 2001
Created by Caryn Camp Page 20 Spring, 2001
after you open TD, and before you close TD. If you open TD
again, you have to use this command again.

Example:
<table width=640 border=0 cellpadding=2
cellspacing=0

<TR>
<TD>
<font color=#FFFFFF>

I could also put a picture here if I wantedusing <img src>
as well as my words that will be this new color. Im done now
so Im going to close the text color.

</font color>
</TD>
</TR>
</table>

3. If there is something you want to center on your page, you
can type the <center> command before it, and close it
</center> after it.

You might also like