CREATING A WEB PAGE
Web pages are nothing more than information that is enclosed in <tags> for every opening tag there is a corresponding closing tag:
<tag> </tag>.

All web pages have two main parts. There is a head and a body. These parts are enclosed by the opening and closing tags <html> </html>.

The head of the page contains the title. The title is what shows up at the top of a web page when viewed with a browser. It looks like this <title>my page</title>


The head should look like this:
<head>
<title>my page</title>
</head>

The next part of the web page is the body, it is enclosed by the tags: <body> </body>. All of your text images and hyperlinks go in here.
Text tags look like this <p> write your message in here</p>
Web browsers do not have a paragraph return. When you need a new paragraph you need to type in <p> this stands for new paragraph or <br> this stands for new line.
Image tags look like this <img src= “car.gif”>
To change your background color on you web page you have to place this tag in the opening body tag bgcolor=#00ff00 the tag will look like this:
<body bgcolor=#00ff00>.
Tags
.
ALL WEB PAGES USE TAGS.

Tags are the instructions that the browser uses to recognize the web page and its contents.




Web pages can contain text, images, animations tables, links to other pages, and email address links.





Colors on the web are hexadecimals.
This means that there are six (hex) numbers (decimals) that make a color. they are made up of the screen colors.
try this chart from Joe Burns at Html Goodies

 ... The tags for the beginnng and ending tag of a web page are:
<html>....</html>
Tags for text are paragraph tags:
<p>...</p>
Tags for images are image source tags:
<img src=“picture.gif”>
or
<img src=“picture.jpg”>
Tags that link to other web pages are called anchor tags:
<a href= “anotherpage.html”>next</a>

RGB
for RED GREEN BLUE:
R G B
ff 00 00
00 ff 00
00 00 ff
All web pages are written in
HyperText Markup Language.
. Step One
  • Follow the example in the opposite column or the handout EXACTLY
  • Where it says “my animation.gif” write in the name of your animation
  • Important - key in this line exactly with the proper spacing and animation name or it will not work when viewed in your web browser!
  • if the name of your animation is car.gif this line bust be keyed as:
    <img src= “car.gif”>
    make sure that there is a space after the = sign before you key in the quotation mark or it will key in the quotation mark backwards.
..... <html>
<head>
<title>Student Animations</title>
</head>

<body bgcolor=#00ff00>
<center>
<img src= "your animation.gif">
</center>
<p><font color=#800080>place all your text <br> in this tag</font></p>
</body>
</html>

Formating Tags
There are formatting tags that allow you to:
.
Choose background colors:

As well as the color of your font:

Background colors for the page:

or Background images:

Place images in web pages:

Add animations:

Soud or music:

Quicktime movies:



Change the font color:

Change the paragraph background color:

 ..... bgcolor=#0000ff

font color=#00ff00

<body bgcolor=#0000ff>

<body background= “mypic.gif”>

<img src="yourpic.jpg">

<img src="your anmation.gif">

<embed src="gr8.wav" width="140" height="60" controller= “false” autostart="true" loop="true" border="0"></embed>

<embed src="movie.mov" width="320" height="256" autplay="false" controller="true" cache="true">

<font color= blue>Everything you write here will be blue</font>

<P style="background-color: FEE333">place text here</P>

Using the information above you now have a page that looks like the example below:
<html>
<head>
<title>Student Animations</title>
</head>

<body bgcolor=#00ff00>
<center>
<img src= "your animation.gif">
</center>
<p><font color=#800080>place all your text <br> in this tag</font></p>
</body>
</html>

When you are done keying in your page it needs to be saved in a simpletext document. It has to be named with the extension- .html as in my page.html

Using the handouts and following the criteria, create a web page about yourself and what you a have been doing here at school. Include a career goal and pictures of activities that you are involved in. Your web page must have:


At least one link to a new animation that is made specifically for this page
- it must relate to the subject of the page
A background color that is selected by you other than the default background color
Four pictures or images that relate to the topics on the page
Correct use of the basic html tags pg 31 of handout and the following tags
<p> xxxx </p> all of your text goes in this tag
<br> this is a page return to start a new line
The anchor tag for linking to another page you have made
<a href= “next page.html”> next </a>
A bullet list

Important: when you start your page use ClarisWorks so you can spell check the document, then copy the information into a simpletext document and save this document as your page name.html

handout page html instructions streaming movie sample
Op Art 1 Gold Tessilation Color Wheel