|
In this lesson we will add more to our sample web page. Since most people
want to put a pic on their first web page. I have included a pic in this sample web page.
Copy the following code, and save it like you did in the previous lessson.
<html>
<head>
<title>Sample Pic Page</title>
</head>
<body bgcolor="ffffff" text="000000" link="blue" alink="green"
vlink="red">
<img src="bookpic.jpg" align="left" width="160" height="219" border="3"
alt="Property of Scott C. Endsley. All rights reserved.">
<center><h1>Scott's Web Site</h1></center>
<p>
<font color="black" face="arial">My friend, Scott Endsley, has a web site
that features free e-novels and songs he has written. The pic on the left
is his personal portrait. You can visit his site by clicking
<a href="http://scott.endsley.com">here</a>.
</p>
<p>
If you visit his webpage, please don't email him, and tell him that
I put his pic online. He might be upset, because he's kinda shy. If
you think that the pic resembles you, or any of your kin, I want to
assure you that it's not your pic. I would also like to say, well...
er...... God bless you!
</p>
<p>
Anyway! Scott has a really cool web site. You can even listen to songs
he wrote. On his Crazy Clyde page you can sign up for a free
Crazy Clyde email account. I got one for all my junk mail. His web site
is full of crazy gags, and a lot of fun. Don't let the buttons fool you.
He doesn't have porn on his site. Just another one of his pranks.</font>
</p>
</body>
</html>
Now, right click on the image below, and save it to the same directory you
saved your web page in. If you are using Explorer, right click on the image
and click "Save picture as". If you are using Netscape, right click on the
image and click "Save image as". Be sure you save the code, and the image to
the same directory. Make sure the image file is named, "bookpic.jpg".
Let's examine the code. The first change I made is to the opening <body> tag.
"Link" defines the color of the hyperlinks on the page. When you view the page, the
link to scott's page is blue. "Alink" defines the color of the link when you align
your mouse over it. In this case it will turn green. "Vlink" is the color of the links
you have already visited. Once you click on this link once, it will stay red after
that.
The next snippet of code shows how to wrap text around an image. When you want to
wrap text around an image, you always align the image first. "Img src" stands for
image source. The source file in this case is bookpic.jpg. Remember we saved this
with the html file in the same directory. In this case I chose to "align" the image
on the left side of the page. This means the text will wrap around the right side of
the image. You can also use "align=right".
Notice, I still have the heading on the page centered with the <center> & </center>
tags. But this time I used the heading tags <h1> & </h1>, instead of the font tags.
You can specify h1, h2, h3, h4, h5, or h6; h1 being the smallest. The <p> & </p> tags
are used to break for a new paragraph.
Now, we come to the hyperlink. Links are important for navigation from one page to the next,
or to go anywhere on the web. The first part of the link above is the destination:
<a href="http://scott.endsley.com">. This part designates what will happen when you click
on the link. The second part of the link above is the label. This is the visible part you
click on to reach the destination. The label above is the word, "here". The label is nested
between the opening and closing (</a>) link tags.
You can use upper or lowercase letters for your code, but it is a good idea to use one or the other.
I prefer using lowercase for everything, including filenames. When you start modifying and writing
your own html, you will have to debug your code. Simple sytax ommissions can cause major problems
in the display of your page. For instance, if you forget a closing tag, your page will often be
invisible in the Netscape browser. Don't get discouraged if something doesn't work at first.
Unfortunately, debugging code is part of programming. In the next lesson we will be using
the Web Page Maker. It is simple to use, and it does all this
stuff for you. If you need help with this lesson, or making a free web page, contact me via
the Help Page. Click the next link
below to move to the next lesson.
|