|
We know what we have so far on our simple webpage - and it's not
much! Let's continue to add to our webpage. Let's start with the
first line of text or the Title of our webpage in the <BODY>
section. We can make it bigger by simply adding <H1> or HEADING
(size 1) to our tag:
<BODY BGCOLOR="white">
<CENTER><H1>My Simple Webpage</H1></CENTER>
My Simple Webpage
Now that's how a Title should look! Now - do we want our webpage background
white? To change colors - obviously you would change "white"
to another color. But maybe we want to use a background gif instead.
The first step - we would take out our <BODY BGCOLOR> tag. Then
- to use a background gif or jpg, our tag would look like this:
<BODY BACKGROUND="blueback.gif">
<CENTER><H1>My Simple Webpage</H1></CENTER>
NOTE: To use this as our background on our webpage, we would need
to save it and/or upload it in the same directory where the web page
exists. Simply place your cursor over the image above and right-mouse
click once. Choose "Save Picture As..." and place in the
proper location..
How about adding a banner to your webpage. I just happen to have one
we can use for an example. To use this on your webpage - you would
have to save it to your hard drive. Again, you would do this by right-clicking
over the image, and after the menu pops up, Choose "Save Picture
As..." and place in the proper location. Then you would upload
the banner to your webhost, just like you do with your simple.html
file.
The name of this banner is "somctbanner2.gif"
We can put the banner anywhere we want but let's put the banner at
the very top of our webpage - directly above our webpage title. To
add this banner to our simple webpage - our tag would look like this:
<CENTER><IMG SRC="somctbanner2.gif"></CENTER>
<BR>
<CENTER><H1>My Simple Webpage</H1></CENTER>
Now let's add the link to site the banner represents, which just happens
to be mine. *smile* Remember how we did our links before - <a href="http://www.linkaddress.com">Link
Name</a>. So - instead of the link name (for a text link), we
would insert our <IMG SRC="somctbanner2.gif"> tag
(so our banner is linked).
<CENTER><a href="http://www.som.yale.edu">
<IMG SRC="somctbanner2.gif"></a></CENTER>
<BR>
<CENTER><H1>My Simple Webpage</H1></CENTER>
So far - so good. If you did add my banner with a link on your webpage
- Thank you!
But what's a webpage without a email link to you? Let's put that at
the bottom of our webpage - under our other links. This will allow
visitors to write to you, just by clicking on the email link you've
provided.
<a href="http://www.yale.edu">Yale University</a>
<BR>
<CENTER><a href="mailto:[your email address]">Contact
Me!</a></CENTER>
</BODY>
</HTML>
NOTE: [your email address] is whichever email address you
wish to receive mail to for this tutorial.
As you can see - it's just your email address between <a href=
and </a>. Be sure to include mailto: before your email address.
Now visitors can drop a line to the author of this webpage - that's
you!
If you have followed along, you should be able to look at the coding
to the right and understand it! Of course you can add as much as you
want to your webpage, there's no rules or limits. Be creative! Don't
forget we would re-upload the simple.html file after making our updates.
You should have the general idea of how to build a webpage, and as
you can see, it's not that difficult. It just takes a little patience
and some imagination.
If you need to..go back to Step One: The
Simple Web Page |
mba.yale.edu
