- Open Notebook (or any other program that edits text and has the ability
to save the file as plain text... you might have to use the "Save As..." feature)
- Type in the pair of HTML "Tags" that mark the beginning and end.
These tags tell the browser to expect more HTML code in between:
<HTML>
</HTML>
Most instructions, or "HTML tags" have beginnings and ends (though not all) and follow the
pattern that the end looks like the beginning except for the "/" character.
So in the above you typed <HTML> to start your page and </HTML> to end it..
kind of like you frame a story with the opening "Once upon a time" and
end it with "They lived happiliy ever after"
- In between the pair type another pair of tags that tell your browser where the
beginning and end of the body of your page reside.
Use the <BODY> and </BODY> pair. Now it should look like:
<HTML>
<BODY>
</BODY>
</HTML>
- Next try inserting text. What ever is not in a < > is considered printable text:
<HTML>
<BODY>
This is my first web page.
</BODY>
</HTML>
- To see if it worked, save the file with a name like "first.html" or "sample1.htm" (the only thing significant is the ".html" or the ".htm" which is the extension that means that this is a text file for web browsers)
Now go to Netscape and under the file menu, select "Open Page" . You should get the normal dialog box, and select your file "first.html" (or what ever name you named it...)
- Did it work? You can center the words in the page with the <CENTER> tag. Go back to the text editor, and and this to your page:
<HTML>
<BODY>
<CENTER>This is my first web page.</CENTER>
</BODY>
</HTML>
- Go back to the web browser and notice how it looks the same.
That's because the Browser will assume that what it read before when you first opened it
is still the same. Press the "reload" button, and it will read in the new version of your page.
If you remembered to save your file in the text editor, the text should now appear centered in the browser.
- You're doing great! Okay, back to the editor... now try useing "Headers"
<H1> is the biggest, and <H2> is the next biggests, and so on to <H4>, <H5>, etc.
<HTML>
<BODY>
<CENTER> <H1> This is my first web page. </H1> </CENTER>
</BODY>
</HTML>
- Save the page and check it in Netscape. Remember to press the "reload" button. Is the text HUGE now? Now you're getting the idea. Add something and see if it looks okay in the browser. Sometimes you forget a "<" or quote mark and it will show up when you view it in your browser.
Now you can add a link. the sytax it within an <A> </A> pair, but with something speciual inside, HREF (a hypertext reference). this is how to add a link to www.infolane.com/msjsisters/:
<HTML>
<BODY>
<CENTER> <H1> This is my first web page. </H1> </CENTER>
<A HREF="http://www.beafriar.com">Click here</A>
</BODY>
</HTML>
The viewer can't see the address, only the words "Click here" but these words are underlined and blue, and when clicked upon, will send the viewer to the msjsisters page.
- Try adding a link to your e-mail. THis will work if a person has set up their browswer to work with e-mail (so it won't work on most lab computers, but it will on most comptered that is set up to be used at home). Instead of presceding the link with "http://" (the Hyper Text Transfer Protocol), you preced your e-mail address with "mailto:"
<HTML>
<BODY>
<CENTER> <H1> This is my first web page. </H1> </CENTER>
<A HREF="http://www.beafriar.com">Click here</A>
<P>
<a HREF="mailto:my_name@hotmail.com"> Click here to send me e-mail</A>
</BODY>
</HTML>
Also note that I used a <P> to separate the two links. this stands for a new paragraph. If you don't tell it otherwise, it will put one bit of text after another. you can also use <BR> (stands for "break") to start a new line without any extra space.
- Color!!! remember how you put the HREF option in the <A> tag in step 9 and 10? there are other options to add to other parts of your page. the background color can be added using the BGCOLOR option in the <BODY> tag:
<HTML>
<BODY BGCOLOR="#00FF00">
<CENTER> <H1> This is my first web page. </H1> </CENTER>
<A HREF="http://www.beafriar.com">Click here</A>
<P>
<a HREF="mailto:my_name@hotmail.com"> Click here to send me e-mail</A>
</BODY>
</HTML>
The number is thrre pair of hex or hegadecimal (base 16) numbers. The first two numbers is how much red, the second it how much green (primary color of light) and the last pair is for blue. I selected no red or blue, but all green. You can have a lot of fun with mixing color if you feel artistic. Try "#AFEEEE" to make a nice turquoise.
- These color numbers can be used for text too... TEXT= for normal text, LINK= for a Hyper link, VLINK= (Visited Link) for a link that was clicked previously. So for a Dark Background, white letters and light blue and light red link colors, try:
<HTML>
<BODY BGCOLOR="#8B008B" TEXT="#000000" LINK="#AFEEEE" VLINK="#DB7093">
<CENTER> <H1> This is my first web page. </H1> </CENTER>
<A HREF="http://www.beafriar.com">Click here</A>
<P>
<a HREF="mailto:my_name@hotmail.com"> Click here to send me e-mail</A>
</BODY>
</HTML>
- IF this isn't enough of a start, one last topic: Pictures. If you like a picture you see on the internet, it is sent to you as a graphic file that ends either in ".jpg" or ".gif" First get a picture, by bowsing to a web site that has a nice picture. Right-click over the picture, and on of the things in the pop-up menu is "Save image as..." select this, and store the picture in the same folder as your "first.html" file. note the name of the picture... for my purposes here I'll pretend it's called "mypic.jpg"
To have it in your page, you need a <IMG> (for image) tag, with an option telling the name of the images' file... in out example:
<HTML>
<BODY BGCOLOR="#8B008B" TEXT="#000000" LINK="#AFEEEE" VLINK="#DB7093">
<CENTER> <H1> This is my first web page. </H1> </CENTER>
<A HREF="http://www.beafriar.com">Click here</A>
<P>
<IMG SRC="mypic.jpg">
<P>
<HR>
<a HREF="mailto:my_name@hotmail.com"> Click here to send me e-mail</A>
</BODY>
</HTML>
Notice too, I put a horizontal row <HR>. These things are easy to add and look pretty to
separate parts of your page.