The Basic HTML structure, wraps the document. It has opening and closing tags. All other tags have to be given inserted in between these basic tags.
This is the basic HTML structure: <HTML>
<HEAD>
<TITLE>Your pages title has to go here, then you have to close the tag with</TITLE>
</HEAD> <BODY>The Body tag will be explained later.
</BODY>
</HTML>
and it has to hold information of the pages, text, and link color, or images.
Lets say you would like the background color of your page to be black, your link color to be pink, and your text color to be white.
This is the command:
<BODY BGCOLOR=#000000 TEXT=#EEEEEE LINK=#FF33CC>
Or you want to insert an Image as a background (lets say its filename is="image.gif") and you want the text to be black and the link to be blue. This is the command:
<BODY BACKGROUND="image.gif" TEXT=#000000 LINK=#0000EE>
Note how these command are inserted into the whole opening Body tag.
The Body tag has to be closed like this:
</BODY> after all your text and images have been added.
Basic color codes:
white
black
blue
red
yellow
green
brown
orange
Back to the top
The paragraph tag is used just as if you want to make a paragraph in your document. Just hitting "enter" on your keyboard won't do. It is: <P>
You don't have to close this tag.
You can use different Rulers or breaks to separate different sections of your page. None of these tags have to be closed:
<BR> The Break Tag, you can insert this tag after a sentence, and it will have the effect of hitting enter on your keyboard.
<HR> The Horizontal Ruler, it will insert a horizontal Line on your page. Before and after using it, use the <P> tag. This will allow a nice space in-between.
Here are some Attributes you can use:
WIDTH- changes the width in percentage
ALIGN- aligns the ruler; left, right or center (which is the default)
SIZE-in pixels, the thickness of the ruler
Here are some examples:
<HR WIDTH=200>
Looks like this:
As you may have noticed, I like using lists, to separate points. I am using the unordered list in all my documents.
Here is the command:
<UL> The start command for a unordered list
<LI> Your first listed Item
<LI> your second.. and so on and so on.
</LI> Closes the list
This is how it will look:
Your first listed Item
your second...and so on and so on.
Here are the numbered lists commands:
<OL>The start command for a numbered list
<LI>The first listed item
</LI>Don't forget to close it
</OL>And this, too
This is how it will look:
the first listed Item
You get the point!
Here are definitions lists commands:
<DL>
<DT>The first listed Item
<DD>Now this will be separated using the "<P<" tag.
<P>The second paragraph
<DT>The second listed Item
<DD>The item itself can be divided using the "<BR>"tag.
This is how it looks when its broken down
</DL>
Here's how it will looks:
the first listed Item
Now this will be separated using the"<P>" tag.
The second paragraph
The second listed Item
The item itself can be divided using the"<BR>"tag.
This is how it looks when its broken down
Here are nested list command:
<OL>
<LI>The Main List Item
<UL>
<LI>The first nested Item
<LI>The second nested Item
</UL>
<LI>The second Main Item
<UL>
<LI>And its first nested Item
<LI>and its second nested Item
</UL>
</OL>
This is how it will look:
Lets say your image is saved as:"imagefilename.gif" and you have uploaded it into your on-line service provider(in AOL its keyword "myplace"), then type this command into your page:
<IMG SRC="imagefilename.gif">
AOL Members that use PP, have to type into their "add HTML" section:
<IMG SRC="members.aol.com/yourscreenname/pizza.gif>
Click able Images, is a connection between a link and image here's the command:
<A HREF="http://web address you want to link to"><IMG SRC="imagefilename.gif"></A>
The image filename can be a jpeg too, of course. Note that the closing tag of the link wraps around the image tag!
Here is some more advise on sizing images inside the document: Get the normal size info about your image.. if you want it smaller, but don't have to program to manipulate it, add this in your image command:
<IMG SRC="imagefilename.gif" HEIGHT=*** WIDTH=***>
As you can see stars were entered instead of numbers. That will be up to you. Remember to have the right size (in pixels)and --very important--the right proportions!
Controlling the border around a Click able image, this is important- Have you noticed that the default border around your Click able image is pretty big? This is the default size=BORDER=5
You can change it to:
<IMG SRC="imagefilename.gif" BORDER=1>
This will make your border really nice and small. If you prefer you can add a big border too.
<IMG SRC="imagefilename.gif" BORDER=10>
Another command for the image is the spacing command: HSPACE which creates a horizontal space. The value is in pixels. Lets space an image about 20 pixels away from the text:
This will show up, too.<IMG SRC="imagefilename.gif" BORDER=1 HSPACE=20 ALIGN=MIDDLE>
You can align anything with the in the center with the center tag. Just put it before your other tag, (image, headline, link)and after that close it again. Here is the center tag:
<CENTER>Opens the tag
</CENTER>Closes the tag
If you want to align an image left, or right, put this in you image tag:
<IMG SRC="imagefilename.gif" ALIGN=LEFT> Aligns the image left
<IMG SRC="imagefilename.gif" ALIGN=RIGHT> Aligns the image right
Back to the top
You can make your text bold or italic.
You get the same effects using the STRONG and the EM Tags.
Here's how:
<B> Opens the bold text
</B> Closes the bold text
<I> Opens the italic text
</I> Closes the italics text
<STRONG>Opens the tag( displayed as BOLD )
</STRONG> Closes the tag
<EM> Opens the ( displayed as italic )tag
</EM> Closes the tag
The BIG and the SMALL Tag.
As you may have noticed, the word Big is bigger that the rest and the word Small is smaller then the rest.
The tags are:
<BIG> for opening and
</BIG>closing the tag.
<SMALL>for opening the tag
</SMALL>for closing again
You can also make a word or text jump up or down:
The SUB Tag or the SUP tag:
<SUB> opens the tag
</SUB>closes it
<SUP> opens the tag
</SUP> closes it again!
Or you can have your text underlined
<U> Opens the underlined text,
</U> Closes it again
Another tag; Typewriter:
<TT> opens the tag;
</TT>closed the tag
Size in the headline of your page use this:
<H1> Enter your Headline, you can go up to H7 .
</H1> Closes that command. Don't forget it!
Examples:
<H1>Heading 1</H1>
Looks like:
Heading 1
<H2>Heading 2<H2>
Looks like:
Heading 2
<H3>Heading 3</H3>
Looks like:
Heading 3
<H4>Heading 4</H4>
Looks like:
Heading 4
The headline command should be placed under the Body tag, on top of your document. It doesn't have to match your title.
You can also center the headline tag using the CENTER tag.
..You can also change the font of a text or just a special word . By adding the FONT tag. Here's an example: <FONT FACE="verdana">This is how it looks!</FONT>
this is how it will show on your page:
This is how it looks!
Here are some fonts :
Helvetica
Times Roman
Palatino
Fonts depend on the browser, so don't get worked up over it!
The problem with that is not everyone will see this font displayed, only the ones that have that font"verdana" on their computer. So if you want to get the attention of the viewer on a word or line.. what else can you do? Put it in color, without it being a link!
<Font COLOR=#008800>yucky green text</FONT>
This is how you will see it:
Yucky green text
Another thing you can do is change the size of your text....
Lets see:
<FONT SIZE=1>1</FONT>
<FONT SIZE=2>2</FONT>
<FONT SIZE=3>3</FONT>
<FONT SIZE=4>4</FONT>
<FONT SIZE=5>5</FONT>
<FONT SIZE=6>6</FONT>
<FONT SIZE=7>7</FONT>
And here's how it looks:
We start with the Hyper link command. Lets say you want to link your page to a web page, with the web address="http://www.example.link/sample.html"
Your link would be like this:
<A HREF="http://www.example.link/sample.html">now you type the link you want to show up, and now close it again</A>
Now lets continue with an e-mail link. Lets say your e-mail address is:someone@somewhere.com.
The link would be:
<A HREF="mailto:someone@somewhere.com">now type in the link you want to show up, and close it again</A>
Linking within a document. Which is what was used here. It is useful, if you have a long document, like this.
Lets say, you want to create a section called: "Sample Products". And you want to refer to this section on top of your page, so anyone can click on it, and will be brought to that section.
So on top of your page you have like me a table of content. You have to name a keyword for that section. We will use "product". It would look like this:
<UL> <LI><A HREF="#product">Sample Products</A>
</LI> </UL>
Then when you get to that section, and lets say you want it to show up in bold text, type:
<B>How <A NAME="product">to use my product</A></B> This will link your top, to your section in the document.
This will apply to forms such as a Guest book, order form, or a survey.
There are different ways in which you can get inputs to show up on your form.
The basic input would be a text row or field. That will let the viewer type in a response or a comment. You control which it should be by sizing the input field.
A typical way of doing that would be:
<INPUT NAME="whatever" TYPE=text MAXLENGT=20 SIZE=20>
Which will look like this:
(you won't be able do use this right now, this is just an example)
OR lets look at a text field:
<TEXTAREA NAME="comments" ROWS=3 COLS=50>
</TEXTAREA>
Which will look like this:
So there you have your basic two!
BUT there are other ways of creating an area for pulling information or renounces from the viewer, too.
The option select tag
A checkbox
Here's how a checkbox would appear:
<INPUT NAME="whatever" TYPE=checkbox>Check here for topic 1
Which will show up as:
check here for topic 1
Then there are "radio types", similar to check boxes:
<INPUT NAME="whatever" TYPE=radio>Check here for topic 2
And that will show up like this:
Check here for topic 2
A small difference but worth knowing it anyway...
The option tag has more to offer, you can give viewers already prepared choices of picks, they can select:
<SELECT NAME="learning">
<OPTION>HTML
<OPTION>WEBDESIGN
<OPTION>JAVA SCRIPT
<OPTION>BASICS
</SELECT>
Lets see what we have created
All of these form attributes need values, once they actually give your responses. This is called (surprise) VALUE. Lets say you want to know what gender your viewer is... You insert check boxes for female and male:
<INPUT NAME="gender" VALUE="female" TYPE=checkbox>female
<INPUT NAME="gender" VALUE="male" TYPE=checkbox>male
This will not change how it looks:
female
male It will only help you sort out the answer on your response page. The values are just keywords for the browser to put the responses in order.