|
Before
you begin to create a web site, you must first know a little about
HTML, the language of the Internet. This page is designed to
show you how to build a web page in simple steps. To become a webmaster,
these steps must be practiced and reviewed often. Good luck!
Table of Contents
- About
Hyper Text Markup Language
- History
of HTML
- Web
History
- Versions
of HTML
- How
To Start A Web Page
- <HTML>
- <HEAD>
- <TITLE>
- <BODY>
- The
Body Tag
- BACKGROUND=""
- BGCOLOR=""
- LINK=""
- ALINK=""
- VLINK=""
- Fonts,
sizes, styles and Writing
- Font
- size=
- color=""
- face
- h1
- h6
- Paragraph
- horizontal
Rule
- New
Line
- Colors
- Item
Alignment
- P
ALIGN=""
- ALIGN=
- CENTER
- LEFT
- RIGHT
- Links
and Email Links
- External
Link
- Internal
Link
- Same
Page Link
- Mailto
Link
- Images
- Tables
- Table
- bgcolor
- BORDER
- CELLPADDING=
- CELLSPACE=
- width=""
- align=
- td
- tr
- Forms
- Form
- Method=""
- ACTION=""
- INPUT..
- MAXLENGTH=
- CHECKED
- NAME=""
- SIZE=""
- VALUE=""
- OPTION
- SELECTED
- TEXTAREA
- COLS=
- NAME=""
- ROWS=
About
HTML
HTML
or Hyper Text Markup Language is the basic language in which all
web pages, or internet based documents are created in. HTML has
quite a long history to it, which we will only briefly talk about.
HTML and the internet was made for Military for communications,
then Universities started using it. At present, the current version
on HTML is 4.0. The language is not very complex, it basically consists
of starting a command in between <command> and then ending
the command with </command>. In addition, the language is
straight forward, and although there are complex things that can
be done with it, basic functions are easy to learn and can make
great web pages...
Back
to the Top
Creating
a Webpage
Building
a web page is rather simple, to make a page, simply enter the following
commands into a new text file.
<HTML>
<HEAD>
<TITLE>
Your Title Here
</TITLE>
</HEAD>
<BODY...> (see below for more about the body command)
Page Content
</BODY>
</HTML>
That's
al there is to it! Basically the <HTML> tag at the beginning
tells the web browser that this is an HTML document and to read
it as one. The <HEAD> tag tells the Browser that information
about the page, like the page's title can be found here. The <TITLE>
tag signals the beginning of the title and the </TITLE>
ends it. Next comes the </HEAD>, which ends the
head of the document.
The <BODY> tag is where the browser is told what the page
will look like, what the background will be, the text colors, etc...
It also marks the start of the web page's main body. In the start
and the </BODY> and </HTML> tags are where the rest
of the web page goes, this includes the text, links, images, and
whatever else might be put into the web page. The </BODY>
tag ends the body of the page. Finally, the </HTML> tag
ends the entire HTML document.
Back
to the Top
The
Body Tag
Next
up, we will tell you how to add commands to the <BODY> tag,
in the <BODY> tag is where the web browser is told everything
it will need to know about the structure of the web page. It tells
the browser what color links will be, what color the background
will have, what background image should show, and what color the
text should be. It is also a major place for errors, so make sure
you do this part right. Inside the <BODY> tag, the following
commands may be placed (note all these tags are optional):
<BODY....>
- BACKGROUND="backgroundname.gif"
The File name of your background.
- BGCOLOR=""
The Color in the background.
- TEXT=""
The Text Color.
- LINK=""
Unvisited Link Color.
- VLINK=""
Visited Link Color.
- ALINK=""
Active Link Color.
- BGPROPERTIES="fixed|
none" Background properties (scrolling or fixed), works with Microsoft
Internet Explorer only.
Page
content
</BODY....>
Back
to the Top
Fonts
and Sizes
In
order to have a simple web page, you have to know how to choose
the right fonts, and this is also pretty simple. To change
a font size, there are two different tags that can be used, the
h tag, where h1-h6 all produce text of different sizes, with one
being the biggest. This tag involves only opening and closing
of the h tag. The second way to choose a font is with
the Font tag. This method uses size=+ or - to specify font
size, in numbers 1 - 4. It allows you to change the font color by
adding the tag color="" inside the font tag, and it allows the user
to use different styles of fonts by adding the tag face="" within
the font tag. This tag requires and open and close tag, but the
color, size and style need to be specified in the opening part of
the tag only.
As
for Breaks in Lines, the tag BR starts a new line while the tag
P creates a whole new paragraph(which includes two line breaks).
Lastly, the Tag HR makes a Horizontal Line across the page, the
size of this can be changed using size=+ or - and any number. Here
is a list of the tags:
<font..>
the basic font tag
</font>
end the tag
-
<h1>
- <h6> Preset font sizes, one being the biggest
-
</h1>
- </h6 end the tag
-
<hr..>
horizontal rule
size=+/- the size of the rule, any number
-
<p>
new paragraph
-
<br>
new line
Back
to the Top
Colors
In HTML,
there are two ways to write color names, the first is literally
color="green" color="blue" color="white" and so forth... The other
way is use the hexadecimal numbers. The color command can be used
in many tags such as the font tag and when bg is added on it can
be used in the body tag and table tags and more.
color="FFFFFF" color is black
color="black" color is black
color="000000" color is white
color="white" color is white
Back
to the Top
Item
Alignment
The next
part of our guide, focuses on alignment of images, text, tables,
ect... Aligning things is rather easy, as long as it's done right,
and often is done wrong. To align a picture, or table, with in the
tag add the tag align= (center, left or right). This can be used
in tables, pictures, image maps, and other things of that nature.
Below are some alignment tags for other items, but that may also
work with images, tables, ect...
center This tag centers the item or text
<p align="right | left | center"> aligns the item on the page.
You can also use tables to align images, text and other things on
your page.
Back
to the Top
External,
Internal, and Email Links
In
order to make a web site with multiple pages, or to link to other
sites, you must know how to make a link. Links are rather simple
when they reach internal or exterior pages, but when they are in
the same page, they become harder. There is also mailto links, that
allow people to send you mail by clicking on the link.
-
<a
href="mailto:your@email.com> email me </a> sends an
email to you, through a link.
-
<a
href="http://www.pagename.com"> page name </a> makes
a link to a page outside of yours.
<a href="filename.html"> page name </a> makes a
link to a page inside your domain.
-
<a
name="anchorname"> page name </a> makes an anchor to
a part of your page.< /DIV>
<a
href="#anchorname"> anchor name </a> makes a link
to the anchor.< /DIV>
Back
to the Top
Images
Images
are actually rather simple to add to your web page. Basically all
you have to do is call them up to your web page, just like you would
call up a link. But, unlike a link, they appear instantly.
<img...> adds and image to your page
-
src="image.name"
specifies the image (must be included)
-
align="center
| left | right" aligns the image horizontally
-
valign="right
| top | left" aligns the image vertically
-
border=""
decides the border for the image (use o with linked images)
-
alt="[image
name]" makes text in case the image doesn't load
</img>
Back
to the Top
Tables
Now
for the harder stuff; Tables. Tables are useful in organizing information
into specific columns. As long as you do the correct code, at all
times for tables, they are relatively easy to master. But note,
that each section of a table needs it's own code, and it never hurts
to use more than one table, if you want a space in between rows.
<Table..> Begins a table
-
align=
aligns the table
-
BGCOLOR=""
background color for the table
-
BORDER=
border thickness, sometimes large borders look nice too
-
CELLPADDING=
space between the border and contents of the table
-
CELLSPACING=
space between parts of the table
-
WIDTH=
table width
-
<tr..>
create one line on a table
-
BGCOLOR=""
the background color of the part
-
VALIGN=
aligns the info. within the part
-
ALIGN=
aligns the content in the cell
-
<td>
starts a cell (individual part of the table, for data/ pictures)
Back
to the Top
Forms
Forms are probably the most difficult thing in HTML, that this guide
covers. However, they are simple, one you get the jist of them.
Just make sure that you use the correct method and post, or your
form won't do anything...
<FORM....> Starts a form
- ACTION=""
what happens to the form, when submitted (usually mailto:your@email)
- METHOD="post
or get" tells the form how to process (post will work fine mostly).
- <INPUT...>
makes a input form
- NAME=""
field name (useful when reading the form)
- SIZE=
size of the form field
- MAXLENGTH=
the maximum amount of characters that can be entered
- TYPE="text,
password, check box, radio, submit or rest" indicates the
type of box
- CHECKED
indicates that the check box is checked
- <Select>
indicates a select list
- <OPTION..>
A drop down list of items (use one for every item)
- SELECTED
indicates that this item is selected by default
- SIZE=
the size of the box
- </SELECT>
ends select list
- <TEXTAREA..>
starts ad large text field
- COLS=
number of columns
- ROWS=
number of rows
- NAME=""
indicates the name
- WRAP="physical"
makes code automatically go to the next line at the end of
the textbox
- </TEXTAREA>
Ends the TEXTAREA
</FORM>
Ends the form
Back
to the Top
|