|
<html>
<head><title>Web Page Language - NP's Web Page Construction Helper</a>
</title><meta name="Microsoft Border" content="tb, default">
</head>
<body bgcolor="#ffffff" background="rainbow.jpg"><!--msnavigation--><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td>
<table border="0" width="724" height="20">
<tr>
<td height="166" width="186">
<p align="center"><a HREF="../default.htm" TARGET><IMG SRC="../_borders/bhsman4.gif" ALT="Return to Nancy Powell's Math Home Page" WIDTH="160" HEIGHT="101" BORDER="0"></a><A HREF="http://www.bhs87.org/math.html" TARGET=""><br>
</A><font face="Comic Sans MS" size="2"><span style="background-color: #FFFF00">Nancy
Powell's Web Pages<br>
for Students, Parents, and Teachers!</span></font></td>
<td align="center" height="166" width="569">
<p align="center"><img border="0" src="../_borders/bulletlogo.gif" width="416" height="165"><p align="center">
</td>
</tr>
</table>
</td></tr><!--msnavigation--></table><!--msnavigation--><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><!--msnavigation--><td valign="top">
<ul>
<tr><img src="Headline.gif" width="342" height="115">
<center><font size=7 color="#ff0000">Web Page Tutor</font><br></center>
<br>
<br><br>
<ul><img src="newa3.gif" align=left width="38" height="39"><font size=4>Expanded and adapted from "The Anatomy of a Web Page" <BR>by <b>Nancy Powell</b> in the <a href="http://www.teachnet.org/docs/tgtc.htm">
<i><b>Teachers Guide to Cyberspace
</b></i></a></font></center>
<p>Here's a sample page for you to use when writing a Web page.
It has different types of print, an image, a background, links,
lists, and lots of resources. Now, to see what the HTML
(HyperText Markup Language) code looks like choose View from the
menu on your browser and choose VIEW SOURCE. If you want to
print out the HTML, choose FILE, SAVE (or SAVE AS) and then bring
up the file in either your Notepad program (found in the
Accessories folder on the PC) or Simple Text (on the Mac) and
then you can choose PRINT from there! Once it is printed,
compare what you see in the code with what you see on the screen
and you'll uncover the mysteries of HTML!
</p>
<hr>
Below is Bloomington High School's logo (I taught there).
I scanned it in using Storm Software's
<a href="http://www.lanmag.com/innov/ezfoto.html"> Easy Photo
Reader</a>
(now way under $100 where I live) and saved it is a .jpg file,
then used a program called
<a href="http://www.jasc.com/product.html"> PaintShop Pro </a>
(you can try it before you buy it for $99) and saved it in .gif format
with a transparent background.
<center>
<img align=middle width=100 height=100 src="bhslogo.gif">
</center>
<p>HTML codes are always enclosed in the <i>less than sign <font color="#ff0000"><</font> </i> and the <i>greater than sign <font color="#ff0000">></font></i>. The original <i>background color (bgcolor)</i> was a lime green until a file called "waves.jpg" was loaded on top of it to make what is know as the <i>background</i>, the text is black, the new links (link) are blue, the visited
links (vlink) are purple, and the links turn green for a very short time when you click on them to show that you have accessed the link (alink). The code for setting up this page with links and colors is found in the body command as found below - remember the <i>less than sign</i> and the <i>greater than sign</i> around the command. <br><br>
<center><i><font color="#ff0000"><body bgcolor="#38B0DE" text="#000000" link="#0000ff" vlink="#ff00ff" alink="#00ff00"></font></i></center><br>
A very nice site to visit to get the full effect of colors on a web page is the <a href="backgr.html">Web Page Backgrounds and Colors Page</a>. You can preview the colors, get the codes, and learn how the different browsers use color. You can get textures to use for backgrounds--they will take a while to load but these sites might contain just the right background that your page needs and the directions on how to copy the file and apply it to your page right there on the site for you. If you don't want to create a background from scratch or want to customize one that you've made or found, then a visit to one of these sites may prove useful.
<HR>Text and Headlines...
<center>
<h1> Bloomington High School </h1> </center>
<HR size=8 width=450 ><p>Notice that I've changed the width
and the size of the 2nd horizontal rule <HR> from the first one.<br><br>
<center><font color="#ff0000"><i><HR size=8 width=450></i></font></center><br><br>
<center>
I've turned the centering on here...using the <H1>
(see "Bloomington High School" above for <H1> sample) - <H6> commands,
a line break <BR> doesn't seem necessary.
<H2>This is header size <H2>. </H2>
<H3>This is header size <H3>. </H3>
<H4>This is header size <H4>. </H4>
<H5>This is header size <H5>. </H5>
<H6>This is header size <H6>. </H6>
</center>
<HR>
I've used the unordered list <UL> command to indent these lines.
<ul> This is <b>BOLD </b> print.
<BR> <ul>This is <I>ITALICS. </i>
<BR> <ul>This is <b><i>BOLD ITALICS. </i> </b>
</ul></ul></ul>
<HR>
<img src="penght.gif" align=left border=3 alt="penguin w/border" width="109" height="466">
<p> Notice the
picture on the left and the next one further down on the right.
The penguin picture has not been saved with a transparent background and a
border has been added to it. The HTML code reveals that the first is
to be aligned along the left side <br><br>
<center> <font color="#ff0000"><i> <img src="penght.gif" align=left border=3 alt="penguin w/border"></i></font></center><br>
and the second animated picture is aligned on the
right <br><br>
<center><font color="#ff0000"><i><img src="bunny.gif" align=right alt="animated bunny"></i></font></center><br>
The words get wrapped around them without you telling it to! The way I remember how to put a graphic on the screen is to think image (img) file name or source (src) of the graphic and then to tell it where to align it--left or right, and then you can tell the browser to resize it with the height or width commands (using both will speed up the loading of the image), and then you can put a text name up (alt) in case a person chooses not to load graphics when they look at your page.
</i>
<p>Look what happens when you click on the links in the <b>Electronic Links to Great Web Sites</b> below.
Each set of links takes you to the new site, but you must click on
"Back" at the top of your browser to return to my web page
construction helper. Also note that these selections have bullets in front of them. I've used a command to make an unordered list <ul> to make the selections indent and know to put bullets wherever I put the bullet command <li>. To link to another site you must place the following command in front of the text. <P>
<I><center><font color="#ff0000"><a href="http://www.webhelp.html"></font></center><br></I>To end the link text, put this after the text:
<I><center><font color="#ff0000"></a></font><br></center><P></I>
So, if you wanted to the end user to go to www. webhelp.html (a fictional address, by the way), and you wanted the phrase, "click here" to be the link, the whole tag would look like:<P>
<I><center><font color="#ff0000"><a href="http://www.webhelp.html"><FONT COLOR="#0000FF">click here</FONT></a> </font></center><P></I>You can make an image a link by surrounding it with these tags also. Here is an example of the code for a graphic called image.gif that is to be linked to the URL www.webhelp.html.<P>
<center><I><font color="#ff0000"> <a href="http://www.webhelp.html"> <img src="image.gif" border=0 ></font></I></center><p>
Border = 0 makes sure that a rectangular border is not going to show. This is an option if you are using transparent gifs. To end the link text, put this after the image:
<I><center><font color="#ff0000"> </a ></font><br></center></I>
Try these.
</p>
<h2> Electronic Links to Great Web Sites </h2><ul>
<li><a href="writing.html">Writing Great Web Pages</a> - help from all over the Web
<li><a href="graphics.html">Graphics for the Web</a> - where to get the greatest graphics the Web has to offer web page authors
<li><a href="http://www.teachnet.org">TeachNet</a> - the best resource for teachers on the Web
<li><a href="http://www.bhs-ms.org/mathlink.htm">Nancy Powell's Math Links</a> - resources for math for grades K-12.
</ul>
<img src="bunny.gif" align=right alt="animated bunny" width="135" height="129">
<p>Notice the numbers in the list below ....these are the result of
ordered lists <ol> and the <li> command.
<ol><li><a href="http://www.teachnet.org/blueplate/jjones/critcorn.htm">Critter Corner</a> - a place to learn about all types of living organisms
<li><a href="http://www.teachnet.org/blueplate/homework/hh1a.html">Technology 101</a> Schools in the Information Age: A Planning Workhop
<li><a href="http://www.teachnet.org/blueplate/homework/newteach11.htm">Technology and the New Teacher</a> - learn about technology ranging from TV's and VCR's through LAN's and WAN's!
</ol>
<P>To make music play while people visit your site, write a midi file or find a freeware one and then attach the following code:<br><br>
<center><font color="#ff0000"><i> <bgsound src="filename.mid"
embed src="filename.mid" height=0 width=2 autostart=true>
</i></center></font>
<br>I sometimes put these two commands at the end of my page so that people have the information and graphics to look at while the music is loading!
<hr>
<p><strong>Are you ready to try to write a Web Page?</strong> If so,
save this page (or any page that has a format similar to one you'd like to use) on
your disk by choosing file and save. Then just edit it in Notepad or SimpleText! Have fun!
</p>
<bgsound src="despera.mid"><embed src="despera.mid" height=0 width=2 autostart=true>
<hr>
<center><a href="index.html">Back to the Web Page Construction Tutor</a></center><hr>
<br>
<center>
For more information or questions, send email to:<br>
<a href="mailto: npowell@bhs-ms.org">
<img align=middle src="mailbox.gif" border="0" width="94" height="94">Nancy Powell</a>
<br>
npowell@bhs-ms.org<br>
<p> This page was last updated on December 21, 1998
</center><br><br>
<!--msnavigation--></td></tr><!--msnavigation--></table><!--msnavigation--><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td>
<div align="center">
<center>
<table border="0" width="102%">
<tr>
<td width="26%"><a href="http://www.district87.org/staff/powelln"><IMG SRC="../images/bhsman4.gif" ALT="BHS" WIDTH="79" ALIGN="LEFT" BORDER="0"></a><a href="../default.htm"><FONT FACE="Arial" SIZE="-1">Return to<BR>
BHS Math<br>HomePage</FONT> </a>
<P><FONT SIZE="-2">This Page was Updated:<BR>
Tuesday July 10, 2001</FONT></P></td>
<td width="14%"><a HREF="mailto:powelln@district87.org" TARGET><IMG SRC="../images/mailbox.gif" ALT="Email BHS" WIDTH="68" HEIGHT="94" BORDER="0" ALIGN="LEFT"></a></td>
<td width="37%">
<p align="left"><B><FONT COLOR="#400000" SIZE="-1"> <BR>Additions,
Corrections, <BR>Suggestions?<BR>Send me your thoughts!</FONT><BR><a HREF="mailto:powelln@district87.org" TARGET>Nancy Powell</a><br>BHS Lead Teacher - Math
</B></td>
<td width="23%"><FONT SIZE="-2" FACE="MS Sans Serif" COLOR="#000000">©
Copyright, 2002 BHS <br>
</FONT> <FONT SIZE="-2" FACE="MS Sans Serif" COLOR="#000000"> Mathematics Department</FONT></td>
</tr>
</table>
</center>
</div>
</td></tr><!--msnavigation--></table></body>
</html>
|
