Home Page
Apple Links
Art & Museums
Career Links
Car Links
College Links
Cyber Stuff
Economic Links
Education Links
Entertainment Links
Faculty Pages
Games Online
Geography & Maps Links
Government Links
Health Links
History Links
Hobby Links
Homework Helper
Kids Only Links
Lesson Plans All Subjects
Literature Links
Magazine Links
Math Links
Mr. Brown's Classes
Mr. Brown's Expectations Rules
Mr. Brown's Personal Page
Mr. Brown's Web Guide
Music Links
News Links
People Finders & Locators
References & Research
Riverview School's School Board
Science Links
Science Fiction Links
Seitz Clubs
Seitz Information & MEAP
Seitz Sports
Service & Companies
Social Studies Links
Social Studies Lesson Plans
Sports Links
Student Grades For Mr. Brown
Student Homework For Mr. Brown
Television Links
Travel Links
Weather Links
Webmaster@studyweb.com wrote: "Your website, has been selected as a
featured site in Lightspan's StudyWeb as one of the best educational resources on
the Web by our researchers. You will be able to view it in our Professional
Development: Teaching Resources: Lesson Plans: Technology: Programming section.
StudyWeb is one of the Internet's premier sites for educational resources
for students and teachers. Since 1996, our expert reviewers have scoured the
Internet to select only the finest sites to be included in StudyWeb's listing of
educational links. Each site in StudyWeb includes a detailed review describing
its editorial and visual merits."
1. OPEN NOTEPAD (for Windows) or SIMPLETEXT (for Macs)!
You have many options with this first step. You could use a web editor, Microsoft
Word, Appleworks, BB Edit, or even Netscape Communicator's HTML editor. At seitz
we will use Notepad.
To Categories
2. TYPE:
<HTML>
<HEAD>
<TITLE>My Fantastic Web Page</TITLE>
Substitute your own name for "My Fantastic Web Page Page." This tag gives your
page a title that can only be seen at the top of the web page when the browser is
opened. This is not your main title of your Web page!
To Categories
3. SAVE AS:
index.html - to your files on the school's server - H
drive. One may also save it on your hard drive as just index.html if you are
saving this on your own computer.
To Categories
4. OPEN BROWSER!
Select My Computer from your desktop and get to your
files in your H drive. Look for index.html. Double click on
index.html. This will then open up the default browser and you can see the
beginnings of your web page. If you are not using the computers at Seitz -
type in the location field: index.html. You should see at the very top of your
screen "Your Web Page Title" - but nothing else, yet. Minimize Netscape and open
up notepad. Always, minimize and or maximize when you shuffle between Notepad and
your Browser.
To Categories 5. META TAGS:
Enter your Meta Tags.
Meta tags are necessary so that Search Engines and Directories like Google, Alta
Vista, and Yahoo may find your page on the Internet. You cannot see the Meta Tags
on your page! Without these tags search engines cannot find your page on
the Internet. You must place all Meta Tags between <HEAD> & </HEAD> at
the top of the page. Never duplicate any word with your Meta Tags. The
following Meta Tags are from Mr. Brown's Web Page. You must use your own
appropriate Meta Tags!
<META NAME="description" CONTENT="Mr. Brown's Cyber School is a great,
safe educational web page that is designed to help students, educators, and
parents, find information for homework as well as fun.">
<META NAME="keywords" CONTENT="education, middle school, teaching,
learning, teachers, students, schools, riverview, michigan, research, HTML">
So now your page looks like:
<HTML>
<HEAD>
<TITLE>Making a Web Page</TITLE>
<META NAME="description" CONTENT="...........">
<META NAME="keywords"
CONTENT=".............">
</HEAD>
To Categories 6. BACKGROUNDS:
Place your
background after </HEAD> There are all types of backgrounds. Many
different textures, colors, and pictures may be used. Important: If you
choose a dark background you then are more limited with pictures, gifs,
jpgs and text. One's text will either have to be white or yellow so it can
show up. If you choose a light background you have more choices.
Browsers can load an image and use it as a background when displaying a page.
Some people like background images and some don't. &nbps; Many prefer
just to use plain colors such as white, black, or light, neutral colors. If you
use a plain color instead of a tiled gif or jpg, you must use the following Tag:
<body bgcolor="blue"> Some browsers will not display color in this
matter, so it's best to use the six number/letter combination from a Hex Color
Chart. Example: FFFOOO. In general, if you want to include a background, make
sure your text can be read easily when displayed on top of the background image.
Black letters on a Dark background cannot be read and likewise white
letters on a light background also cannot be easily read. Open notepad and
type in your background: <BODY BACKGROUND="cute.gif"> Backgrounds
could also end as: .jpg. To use a background from a favorite page on the Internet,
just go to that web page that has your choice of a background, right click on the
mouse and use the "save as" option. Example: nameofbackground.jpg Saving a
tiled background: Choose a background - right click and choose "save as". Type
a simple name for a background followed either by a .gif or a .jpg. Example:
ltblue.gif.
Placing a tiled background in notepad/simpletext: <BODY
BACKGROUND="ltblue.gif">.
Using just a plain color for your background:
If you only want to use a plain color and not a tiled image you can use
either of the following two examples: <body bgcolor="blue"> or <body
bgcolor="000fff">. The "000fff" defines a special color from the Hex Table!
See Category 14 or try Hexadecimal Color
Codes
If you would like to have your background stay fixed while the text
moves up and down with the scroll bar you simply need to add bgproperties=fixed.
Example <BODY BACKGROUND=cute.gif" bgproperties=fixed"> . This can only be
seen by people using Internet Explorer and not Netscape.
To Categories
7. NESTED TAGS:
Be very careful how you place HTML tags! Some
Browsers may not be able to read your tags because of improper placement.
Wrong Way:
<CENTER><H2><U><B>Nested</CENTER></H></U>
;</B>
Correct Way:
<CENTER><H2><U><B>Nested</B></U></H>
</ CENTER>
To Categories
8. MAKING YOUR OWN "TITLE" - with a table border around it:
Open
notepad and type: This will give you your page title within a border.
Keep your title short. Do not use more than a Ten words! Make sure the title
describes the page. 8th Graders may make a professional title. See 9.
<CENTER><TABLE BORDER="6" CELLSPACING="0" CELLPADDING="20">
<TR><TD><FONT COLOR="RED">
<H2><B>MR. BROWN'S
CYBER SCHOOL</B></H2></FONT>
</TD></TABLE></CENTER><P> <P> starts a new
paragraph
To Categories 9. ADDING A PROFESSIONAL TITLE:
You
can ALSO use a TEXT EDITOR from our School's Web Page instead of the
basic title within borders. Choose my Cyber
Stuff page or go directly to CoolText or
Flaming Text. In my opinion
Flaming Text offers the easiest and best site to not only create titles for one's
web page but also many other items such as banners and buttons. These Web
sites can create a professional 3D Title or spinning title! You save the
professional title either as a gif or a jpg. <IMG SRC="title.jpg">. If you
use a professional 3D or animated title, you do not need a border around your
title.
To Categories
10. ONE'S PURPOSE OR EXPLANATION
PARAGRAPH:
You must have 1-3 paragraphs that explains the purpose of
your Web page. This is just an example! Welcome to Mr. Brown's Cyber
School's. This page was created for two primary reasons. To be used as
an educational tool for my history and computer classes, and so my students would
have a safe place on the Internet to explore for their educational needs as well
as entertainment purposes.
To Categories 11. BODY ATTRIBUTES FOR LINKS AND VISITED
LINKS:
<font color="?"> Sets the text color, using name of color or hex value. The
default color is black. <body link="?"> Sets the color of links, using
name of color or hex value. The default color is blue.
<body vlink="?">
Sets the color of followed links, using name of color or hex value. The default
color is purple
<body alink="?"> Sets the color of links on click. The
default color is red.
To Categories 12. FONT/TEXT TAGS:
To Categories 13. FONT FACE or STYLE:
To Categories 14. HEXADECIMAL COLOR CODES:
To Categories
15. FORMATTING TAGS:
<p> Creates a new paragraph.
<p align="?"> Aligns a paragraph to
the left, right, or center.
<br> Inserts a line break.
<a>
Anchor Tag. This is placed before and after the URL.
<center> Centers a
word or image.
<basefont> Default font size.
<blockquote></Blockquote> Indents text from both sides.
<d1></d1> Creates a definition list.
<dt> Precedes each
definition term.
<dd> Precedes each definition.
<ol></ol> Creates a numbered list <1, 2, 3, etc.>.
<li> Precedes each list item, and adds the bullet
To Categories
16. ADDING LINKS:
<a href="url"></a> a word becomes
hyperlink.<a href="www.aol.com">AOL</a>
<a
href="mailto:email"></a> Creates a mailto link.
<a
href="url"><img src="name"></a>. Creates a picture that is
hyperlinked.
To Categories
17. ADDING HYPERLINKS WITHIN THE BODY OF TEXT:
Check out <A
HREF="http://www.cyberbee.com">Cyberbee</a> </li>which is a great
link to educational material. You must include at least one example of this type
of link on your Web page: This type of link allows the person to click on the
blue, underlined words <Go Blue> which will immediately go to the new web
page. <A> are anchor tags. You must have a space between the A and HREF. By
the way, <A HREF="http://www.umich.edu/~mgoblue/Football"><B>GO
BLUE!!</B></A>
You must have a space between the A and HREF By the way,
GO BLUE!!
If you
want to be able to Hyperlink (navigate up or down) on a Web Page, see number
18 To 18.
To Categories
18. HYPERLINKING WITHIN A PAGE:
One may hyperlink (navigate up or
down) anywhere on any page. For example, you may want a person to go to the
middle of the page or maybe you want a person to go to the top of you page when
they are at the bottom. You can hyperlink to any place you like. On
this page I have added many "To Top" or "To Category" Links. The following
tag is placed at the top of your page, somewhere after </head> and just
before the place you want to go.
<a name="top">
The following is the tag needed to be placed in
the page so that a person may click on it and this will then take them to the top
of your page.
<a href="#top"> To Top </a>
If you want somebody to go to the middle of your page do this:
<a
href="#middle"> To Middle </a>
But you need also to mark the
place in the middle with something like this:
<a
name="middle">
To Categories
19. MAKING YOUR FAVORITES LIST AS HYPERLINKS:
You need at least seven
links in this section on your Web page! <H3><B><FONT
COLOR="RED">MY FAVORITE LINKS</FONT></B></H3>
The following creates a list of hyperlink web pages that one may immediately go to
by clicking on it
<li> <a href="http://www.bluemountain.com">Blue Mountain
Cards</a> </li><br> <li> <a
href="http://www.comedycentral.com">Comedy Central</a>
</li><br> <li> <a
href="http://www.garfield.com">Garfield</a> </li>
<li>
<a href="http://home.netcom.com/~tbrown6">Seitz</a>
</li><br> <li> <a href="http://www.aol.com">AOL</a>
</li>
<li> <a href="http://www.whitehouse.org">White
House</a> </li><br> <li> <a
href="http://www.nsync.com">N'Sync</a> </li>
MY FAVORITE LINKS
- Blue Mountain Cards
- Comedy Central
- Garfield
- Seitz Middle School
- AOL
- White House
- N'Sync
To Categories
20. ADDING PICTURES, IMAGES, or PHOTOS:
<gifs, jpgs, or animated
gifs>: <IMG SRC="starry2.jpg"> OR <IMG SRC="pirate.gif"> to
get an image, jpg, jpeg, gif, animation gif: click on right button and use save
option. Save the same way as saving a background <right click and save as>
pirate.gif
To Categories
21. GRAPHICAL ELEMENTS:
<img src="name"> Adds an image
<img src="name" align="?"> Aligns an image left, right, center, bottom,
top, or middle.
<img src="name" border="?"> Sets size of border around
an image.
To Categories
22. HOW TO MAKE AN IMAGE HYPERLINKED <CLICKABLE> WITH A BLUE
BORDER:
<A HREF="http://www.nameofsite.com"> <IMG
SRC="nameofimage.gif"></A> There is always a space between IMG SRC. See
how I have made the two Stanley Cups in number 22 have a blue border. When one
places the cursor (arrow) over the image the arrow changes to a pointed finger.
This means that the GIF is hyperlinked and you will now go to a new web page if
one clicks on the hyperlinked image.
To Categories
23. PLACING IMAGES OR TEXT LEFT OR RIGHT:
<img src="stanley_cup.gif" align="left"> Aligns image left.
<img
src="stanley_cup.gif" align="right"> Aligns image right.
To Categories
24. CENTERING IMAGES
To Categories
25. WIDTH & HEIGHT TAGS <ALT TAGS> FOR IMAGES:
Specifies the
height and width of the image <gif, jpg, etc.>. <IMG SRC="icondepo.gif"
WIDTH="155" HEIGHT="175"> 
Here I'm using 70 for height and 50 for width.
Here I'm
using 190 for height and 140 for width.
To Categories
26. HORIZONTAL RULE or LINE: <HR>:
To place a line
<depressed> onto page. To make a horizontal rule with a solid black line
use the following: <HR>Width=60% SIZE-8 NOSHADE> The size of thickness
can vary from 0 to as thick as you want it. <hr> Inserts a depressed,
horizontal rule.
<hr size="?"> Sets size <height or thickness> of
rule.
<hr width="?"> Sets width of rule in percentage or absolute
value.
<hr noshade> Creates a rule without a shadow.
Four examples of
horizontal rule: The first example is just using the default rule <hr>. The
second example I set the size to 9, the third is an example with noshade at size
4, and the fourth is a copied animated gif. There are hundreds of different types
of animated lines available online!
To Categories
27. SPECIAL CHARACTERS FOR HTML. PUNCTUATION MARKS
HTML has special
character and number codes. Go to Special
Characters.<a
href="http://mywebpages.comcast.com/tbrown117735MI/characters
.html">
To Categories
28. EXTRA SPACES BETWEEN WORDS OR LINES:
To get an extra space
or spaces between words you have to use a special code -
To Categories
29. EMAIL ADDRESS TAGS:
The following Tags will create your Email
address or you can put in your regular street address and telephone number in this
area if you don't have an Email address: Be careful about putting information
on the Web! EMAIL OR ADDRESS INSERT:
<CENTER><li><b>Email:<a
HREF="mailto:seitzteacher@yahoo.com">SeitzTeacher</a></b>
</center>
Using a Java Script Code
<CENTER><TABLE BORDER="1"
bgcolor="YELLOW" WIDTH="160" HEIGHT="15"> <TR><TD>Created
by:</TR><TD><A
HREF="mailto:seitzteacher@yahoo.com"onMouseOver="self.status='Hello I am Mr.
Brown. If you like my Web page send me an Email.';return true">
<STRONG>Mr.
Brown</STRONG></A></TD></TABLE></CENTER>
If you don't have an Email address: Remember your page isn't really
on the Web!
Student Name<BR>
Address<BR>
City, State, Zip
Code<BR>
Phone Number
To Categories
30. MULTI COLUMN TEXT:
This feature allows a person to split their
text into columns - like a newspaper. See our Midi Page as an example. Simply
surround the text with:
<MULTICOL COLS="3" GUTTER="25">Text goes here</MULTICOL>
The COLS is the number of columns and the GUTTER is the space
between columns. The larger the GUTTER NUMBER the greater distance between
the columns. In this example above, I'm choosing to divide a list into three
columns with about one inch of space between columns.
To Categories
31. COUNTERS:
One may get a counter by going back into Yahoo
and typing out the word counters and then hitting enter. Choose from dozens of
different URL's or check out THE DROP DOWN MENU from the school's
Web Page and choose one of the several URL's for counters.
Visitors since April 12, 2001
To Categories
32. GUEST BOOKS:
Use either one of the following URL's to find great
and free Guest Books. It is very easy to add a Guest Book to one's Web page.
Simply copy the script of the free online guest book services and paste it
into your Web page. Since your pages are not really on the Web you don't
need to register.
- Guest Page
The service provides users with editing their own guest questions and blocks rude
words and emails you when you get new guest book entries. - Guest World
Free Guest Book
Creations!
To Categories
33. MIDI, WAV, EMPEG, and MP3:
Midi's (musical songs), - can be
found using search engines or going to the Seitz Web Page. You can have the midi
controller visible or invisible, have the music playing continuously (Loop) or
only one time, and Save a midi file: z:/nameofsong.mid
<CENTER><EMBED SRC="nameofsong.mid" WIDTH="60"
HEIGHT="44" AUTOSTART=TRUE LOOP=TRUE></EMBED></CENTER>
If you do not want the CD player to show, you need to include HIDDEN=TRUE
Wav (real music with people singing), EMPEG (movies), and MP3 (the best sound
reproduction). You do it the same way as a MIDI except replace .mid with either
.wav, .empeg, or .mp3.
To Categories 34. LINKS:
<a></a> Anchor tag.
<applet></applet> Java
<param></param> Applet parameters
<object></object>
Insert object
<script></script> Insert script
To Categories
35. FOOTER:
You should always end a Web page with the last date
that you have made any changes to you page: This is called the footer! This page
was last updated on: <FONT COLOR="BLUE"><I><B> Sun Apr 02
2000</B></I> </FONT><B><FONT COLOR="RED">
This page was last updated on Sun Apr 02
2000
To
Categories
36. ENDING TAG:
The last tag on one's Web page:
</HTML>
To Categories
37. USING FRAMES:
Most people no longer use frames on their
web page. This page will eventually be your final page, if you are creating a
web page that uses frames. You may label it as DONE . This page will actually use
two other pages simultaneously; the index.html page and the cat.html page.
<html>
<head><title>Seitz Middle School's Web
Page</title>
<META NAME="description" CONTENT="Seitz
Middle School is a great and safe educational page that is designed as a teaching
tool to help students, educators, and parents find, create, and use information on
the Internet. "><p>
<META NAME="keywords" CONTENT="children, colleges, curriculum,
education, homework, HTML, kids, learning, principals, reference, research,
schools, seitz, teachers, teaching, universities,"><br>
</head><p>
<META NAME ="revisit" CONTENT="15 days"><br>
<FRAMESET ROWS="100&"><br>
<frameset
cols="23&,*"><br>
<FRAME NAME="cat"
SRC="cat.htm"
SCROLLING="Auto" BORDER=0><p>
<FRAME NAME="index" SRC="index.htm"
SCROLLING="Auto" Border=0><br>
</frameset><br>
</FRAMESET><br>
</html><p>
To Categories
38. CATEGORY PAGE
This is the third page you. This is an
example of only one category - you need at least ten categories. THIS PAGE WILL
SHOW UP ON THE LEFT SIDE OF YOUR FINISHED PAGE AS SCROLLABLE LINKS!
<html> <head><Title>cat.htm</title></head>
<body bgcolor="blue">
<form><input
type="button" value="Yahoo"
onclick="window.open
('http://www.yahoo.com
')"></form><p>
To Categories
39. TABLES:
If you used the email tag than you've unknowingly
placed a simple table on your web page. <table></table> Creates a
table.
<caption></caption> Creates a table caption.
<th></th> Creates column head
<colgroup></colgroup>
Creates column grouping
<col></col> Creates a column
<tr></tr> Sets off each row in a table.
<td></td>
Sets off each cell in a row.
<th></th> Sets off the table header
<a normal cell with bold, centered text>.
To Categories To Top
40. QUICK REFERENCE GUIDE
