|
|
Introduction
Beginning html is not too hard, even if you have no previous experience programming. So to get started, I need to explain one of the words I'll be using. First word is "Tag", a tag is a command inside two brackets like this (note, do NOT put the parentheses in your code, these are just to tell you where the commands begin and end) "<tag>". These commands in brackets tell the computer what you want it to do. Remember, you have to end what you start, and so every command has an ending. After you have put what you need to after the tag, simply copy the tab and put a "/" in front, like this, "</tag>". Now that I have that cleared up, we can continue to the lesson.
Step One - Html, Head, and Title tags
The first thing you will be
using on any website is the html command. This command tells the
computer that it needs to view the page as html. This command is
very simply "<html>".
The next command is the "<head>" command..hehe,
he said head...actually this commands job is to tell the computer
information it needs to display the page. Since this is your
first time making a page in html, these tags need only one thing
between them, another tag. This is the title tag, which looks
like this "<title>". You put the name of your
page in between the title tags. This name will be displayed on
top of the window. Now, after the title tags, remember, you have
to end your head tags with "</head>".
This is what your code should look like so far-
----------------------
<html>
<head>
<title>Example</title>
</head>
---------------------
Step Two - Body, Background Color, and Font Color Tags
Ok, now you are starting to
understand some of the basics, now comes one of the most
important parts, the body tag. The body tag looks like this
"<body>". Ok, so what does it do? Well, in
between the body tags you put the text of your website, links,
and pictures, which I will discuss later. Now, if you want a
colored background, the first body tag should look like this
"<body bgcolor="color">". Replace the
word "color" with whatever color you like, and in this
case you can just type in the name of the color, like Red, or
Black. So, you have your nice colored background but your text is
still black, well to change this, you need to use this command
"<font color="color">". Once again,
just replace the color in parentheses with whatever color you
like.
Ok, now, to type in the words
that you want on your site, you do NOT need to use any tags, but
if you are using text color tags, your text needs to be between
those tags. Now that you are done with your super cool site, you
need to end the body tag and the html tag.
So far your site should look like this-
-------
<html>
<head>
<title>Example</title>
</head>
<body bgcolor="black">
<font color="blue">
Hello, this is a sample font for this sample page. Stinky Stink
Stank. Etc.
</font color>
</body>
</html>
------------
Step Three - Links and Images
Now you have text! Well, as
you have noticed, most sites have links and images. Well, the
first thing I am going to cover is the link command. Now this one
is a little trickier, but still pretty easy. It looks like this-
"<A
HREF="http://www.whateversiteyouwant.com">Click Here
To Go To This Sample Link </a>"
Replace the sample website address with whatever site you want to
link to, and you can replace the phrase "Click Here To Go To
This Sample Link" with whatever phrase you want the person
to click on. The end tag can be shortened to simply
"</a>".
Your site is coming along nicely, but now you need to learn how
to place pictures on your page. Now, first of all you need a
picture that is online, this example, I will be using the Panic
Bombing Logo bar, which is titled "topbar.gif". But you
need to find your own picture somewhere online, a picture that
you want to use for your website. This is where it starts to get
complicated to a new html programmer. You need to save this
picture onto your computer, and this can be done by simply right
clicking on the image and hitting "Save Target As".
Save it somewhere easy to remember because you'll need to know
where it is to complete putting this picture on your site. Now,
depending on which web page service you are using (like
angelfire, or geocities) there should be an option like
"Upload File". Now once you get to this option it will
want to know what file you want to upload. This is why you need
to remember where you put the image. Select that image and hit
the button that continues with the upload. Now, this may take a
second depending on the size of the picture, so be patient. Now
that you have the picture on your web service, you need to know
the url of the image, usually the web page service will have a
file manager in which you can view the image and what the web
address is. My example pictures address is
"http://panicbombing.50megs.com/topbar.gif". Now that
it is online and you know the web address of the picture, time
for the command that will put it on your website.
This one is-
"<img
src="http://www.samplesite.com/example.gif">"
Now, replace the sample picture web address with the one you
uploaded, and presto, you have a command to put that picture you
wanted on your website. Now, lets look at what I have tought you
so far.
-------
<html>
<head>
<title> Example </title>
</head>
<body bgcolor="black">
<Font Color="blue>
This is my sample Text and whatnot.
<a href="www.samplewebsite.com"> Click Here To Go
To An Example Website!!!
</a>
Here is an example picture
<img
src="http://www.samplewebsite.com/samplepicture.gif">
</body>
</html>
-------
Other Commands and Hints
Ok, so now you have the
coolest website on the block, and you made it with your own code
by yourself! So now, here are some more commands and hints to
help your site on it's way.
Commands for font styles:
Put these commands before and after what word or sentence you
want to change. The text in the middle is just an example.
<b>BOLD</b>
<i>italics</i>
<U>Underlined</u>
The Break Command -
You need a blank line on a website? This is how you do it, and
this command doesn't need an end tag, just put it wherever you
need a blank line:
<br>
Spacing Commands:
These are for text and image placement, just put them where you
need and item centered, right aligned, or left aligned.
<p align="center"> Centered Text </p>
<p align="right"> Right Alignment </p>
<p align="left"> Left Alignment </p>
A few hints:
*The Link and Image commands can be connected to create a linked
image, this is done simply by putting the image command
in-between the link tags.
A few hints -
*All website don't have to
have a colored background, only use it if you think it adds
something to your page.
*Don't get angry if your page doesn't work right the first time,
just look over your code for the smallest detail, and try again.
If you have any questions, or need help, I can be reached through
the About section. I will try to help you to the best of my
ability, but after all I can only do so much just typing though.