|
HTML (hyper text
markup language) is one of what are now several markup languages
(XML, DHTML are others) that browsers such as Netscape or Internet
Explorer use to display information.
Whether you are using notepad or a HTML editor
such as Frontpage 2000 it would be beneficial to understand the
basics of the language.
HTML "tags"
are constantly being innovated and implemented by developers, thus
keeping up with the latest trends is a must for any web
developers.
Below I describe the very basics
of HTML, how tags are used within a page and tags in
general.
1. Basics
2. Forms
3. Frames
4. Tables
1.
BASICS
HTML is a rather simple programming language that can be picked
up very easily.
Here's an
example of an HTML webpage:
You'll see that there are words 'wrapped'
in the < and > signs. These are called tags and are the basis
of HTML. Each tag has a beginning tag and an ending tag (The one with a
/ in it). As you could guess the title will go inside the title tag.
This will appear at the top of the browser's window. The part where
you'll make your page is called the body. All your information will
go between the two body tags.
Now with that out of the way
it's time to learn some of the basic tags. HTML is extremely simple
and after learning the basic tags you'll be able to make your own
page! However you'll want to learn more to enhance your page and
make it really sparkle.
LEARN THE CODE <BR> -
'Break'. It stops the current line and starts a new
one.
<FONT> - This
tag as you guess it is for text/font. Use the following inside the
font tag. Also remember that you'll need a ending tag for 'font'.
Put all the text that you wish to alter between the start and end
tags.
<FONT COLOR="#000000" > - This
option lets you change the text color.
<FONT
SIZE="-/+" > - Change the size of
you text. Sizes can be listed by numbers 1 through 7 (1 being the
smallest) or by placing between -7 and +7 (- being
smaller).
<FONT FACE="font_name" > - Change the font
that is displayed. A important thing to remember is that when using
this option is the visitor to your site has to have the font on
his/her computer, thus you should keep it a widely used
font.
<B> - Bold
tag. Makes the text bold that is between the start and end tags.
<I> - Italic tag.
Makes the text Italic that is between the start and end
tags.
<U> Underline
tag. Makes the text Underlined that is between the start and end
tags.
<P align="left/right"> - Aligns the
text/picture to the left or right. It will need the ending tag of
</P>.
<CENTER>
- Centers text/picture.
<HR> - Horizontal Rule. It creates a
'line' across the screen. A separator for information. You can use
the following things inside the hr tag: COLOR, SIZE, WIDTH and
NOSHADE. Color explains itself but what about size? Size is the
'thickness' of the hr. Default is 1. Width is again simple and is
just how wide it is. You can put a number in and it would be the
same no matter what the browser. Normal width for a webpage is
somewhere about 650, or you could put a number and a % sign after
it. It just makes it a percentage of the page. Noshade which
actually means ' No Shade', just takes away the 3D look and makes it
one color.
<IMG
SRC="pic_name"> - This is the image tag. You put the
name (url/address) of the picture in the equal to asset. You can
make it picture a height and width by using the HEIGHT and WIDTH
assets inside of the img tag.
<A
HREF="address_of_page"> - Link tag. Very important,
you don't want only one page. Have multiple pages by linking them
together or link to another site. Remember to put the (http://) for
outside links!
2. FORMS
Forms have lots of uses one of which is
to get feedback as a webmaster. This is very important in order to
find out what your visitors like about your site. Your site should
serve to their needs and likes and this is the easiest way to do it.
Anybody who has been on the web has seen them
<FORM
METHOD="POST" ACTION="url_or_email_address"> - This is the main form tag,
it also requires the ending form tag. The action asset is extremely
important this is how you will receive your form results. There are
two steps to getting the information to you. First you need to make
a form. Secondly, you will have to have a CGI mail script set up
(some hosts will not let you use CGI scripts, we do if you host your
site at Get Free Internet .)
<INPUT> - This is the tag for
all the information you'll receive. Here's all the types:
OTHER FORM TOOLS...
<SELECT><OPTION>1<OPTION>2</SELECT>
-
Options box. --> |
|
<SELECT SIZE="5"><OPTION>Pick
#1
<OPTION>Pick #2</SELECT> - Select menu. -->
|
| <TEXTAREA> - This is most easily
described as a comment box, even though it may be used for many
other things. It is a are that the visitor can type freely into to
give you feedback on you chosen topic. Remember that it needs the
end tag. What you type between the beginning and ending tag will be
placed into the box as default.
SOME ASSETS TO THIS TAG
ARE:
<TEXTAREA ROWS="***"
COLS="***"> - Let's you make it a certain height and width (Rows
are vertical and Cols are horizontal).
<TEXTAREA
NAME="***"> - Textarea also lets you name the box. You should
name it comments or whatever else it is for.
<TEXTAREA
WRAP="***"> - This is for the text inside. You can put in the
following [off,virtual,physical]
3. FRAMES
Frames are a page that let you view other
pages inside of them. So you'll acually have your PARENT page and
the pages inside of them which are sometimes refered to as CHILDREN.
See below for an example.
LEARN THE
CODE
<FRAMESET>
- This is the main tag of frames.
<FRAME>- This is
the singe frame tag that will be placed inside of the
&frameset> tag. You will have one of these for each frame
that you have. Some of the properties of the frame tag are: Name,
Url and Target. This is very important, what this does is if you put
links on your left frame the page will show up on the
right frame and not the left. The url tag is self explanatory if you
have knowledge of HTML and making links. You put the address of the
page that you would like to show up. HOW TO MAKE
FRAMES/PROPERTIES OF THE FRAMESET TAGFrames can be either up and down
(called COLS) or left and right (called ROWS). When you make the
spaces for your frames you will start from your left or top
(depending on whether it's rows or cols) Here's a example
.
<FRAMESET
COLS="160"> Makes 2 frames, a 160 pixel
frame on the left <FRAME
NAME="left"> and
a frame on the right that will fill the rest of <FRAME
NAME="right"> the
screen.
If you would like to make the width a
percentage use a % sign in front of the number.
NOTE: YOU MUST ALSO PUT IN SRC= IN BOTH FRAME
TAGS IN ORDER FOR THIS TO REALLY WORK
<FRAME
MARGINWIDTH="">
- As you could guess it, it controls the margin width.
<FRAME
MARGINHEIGHT="">
- As you could guess it (again), it controls the margin height.
<FRAME
SCROLLING="yes/no/auto"> - Makes the frame able
to scroll or not. Auto is the default.
<FRAME SRC="the_url"> - Put the
address to the page to show up in the frame in this tag.
<FRAME NORESIZE> -
This option takes away the ability of the visiter to move the frame
border around. (No Resize)
What if you don't want a frame
border?
Use all of the following. Explorer and Netscape work a
bit differently so by putting all of these in it will make sure that
there is no border on both.
<FRAMESET
BORDERSIZE="0" FRAMEBORDER="0" BORDER="0" FRAMESPACING="0" >
<FRAMESET
BORDERCOLOR="#"> - If you want a border you can make
it any color by doing this.
<NOFRAMES > - This tag is not
required but is something nice and recommended. This should be
placed inside the body tag. You can put something like "Sorry you
need frames to view this page." or whatever. It's just what shows up
if they can't see frames.
A page with frames should look something like this...
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<FRAMESET
BORDER="NO" BORDERSIZE="0" COLS="20%,80%">
<FRAME
SRC="left.htm" NAME="LEFT">
<FRAME SRC="right.htm"
NAME="RIGHT">
</FRAMESET>
<NOFRAMES>
<BODY>
<FONT SIZE="+2">
<CENTER>Sorry
you need frames for my page!</CENTER>
</FONT>
</BODY>
</NOFRAMES>
</HTML>
<TABLE> - Main table
tag. Don't forget the ending tag. <TABLE BORDER> - Do you want the 'lines' to be
seen? If so you can put in 1 or greater, depending on how thick you
want it to be. Below is a example of a border.
<TABLE CELLPADDING> - Pads each cell of
the table with space all around the table. More on cells are below.
<TABLE CELLSPACING> - Makes the space
between each cell larger/smaller. In order to see a good example of
this you need to get a few cells in a table.
<TABLE BGCOLOR> -
Changes background color .
<TABLE BACKGROUND> - Put a background on
the table the same as you would do for a page.
Nice picture
in the
background.
| <TABLE
ALIGN="right/center/left"> (aligns the table
on the page) <TABLE
WIDTH="300">
Allows you to set a
width for the table in pixels. You may also set it by % of the page
width just y putting a '%' after your number. Inside of
the table tags will go:<tr> - Each horizontal row
<td> - Each cell of the row Look below
:
<table width=200
border=1>
<tr>
<td>Cell
1</td>
<td>Cell
2</td>
</tr>
</table>
Now
if that was all you could do with tables they would be of much good.
You can also have cells span over multiple columns or rows.
<table
border=1>
<tr>
<td>1
</td>
<td>2
</td>
</tr>
<tr>
<td
colspan=2>3
</td>
</tr>
</table>
<table
border=1>
<tr>
<td>1
</td>
<td rowspan=2>2
</td>
</tr>
<tr>
<td>3
</td>
</tr>
</table>
Options of the TR and TD tags:
- Width
- bgcolor
- background
- align
(In each cell [left, center, right])
- valign
(Vertical align [top, center, bottom])
|
