|
Hello and welcome to Amazing HTML's Guide to HTML, before going to a
particular section, we recommend that you read this entire document,
in order to help you better understand this language. Also, please note
that this page is designed to show you how to build a web page, in simple steps,
to learn the language of HTML, these steps must be practiced and reviewed often.
Enjoy the guide....
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 Mailto 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 forwards, and although
there are complex things that can be done with it, basic functions are easy to
learn and can make great web pages......
To the Top
Starting A Web Page
Starting 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 begging 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 begins a place for the title and the
</TITLE> ends it. As for the </HEAD>, it ends the head.
The <BODY> tag is where the browser is told what the page will look like, what
the background will be, the text colors, ect.... 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. HTML </BODY> including
</HTML> tags that finish up the web page and close it.
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 what the link color, what the background color is,
what the background image is, and what the text color is. 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 IE only.
Page content
</BODY....>
To the Top
Fonts sizes, styles and more...
In order to even have a simple web page, you have to know how to use the 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 is simple to use, involves only opening and
closing the tag, but is very basic. The Font tag on the other hand uses size=+ or -
to specify font size, in numbers 1 - 4. It also allows you to change the font color
by adding the tag color="" inside the font tag, and lastly it allows the user to use
different styles of fonts by adding the tag face="" also inside 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, and the tag P creates a
whole new paragraph, with black space in between it and the previous paragraph.
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
- color="" font color
- size=+/- the size, -4 through +4
- face="" the style of the font
</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
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
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.
To the Top
External, Internal and Mailto 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 rel="nofollow" href="http://www.pagename.com"> page name </a> makes a link to a page outside of yours.
<a href="filename.php"> 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.
Place this
where you want the internal link to appear.
<a href="#anchorname"> anchor name </a> makes a link to the anchor.
Place where you want the link to send the user to.
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>
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)
Table cell information
- </td> ends the cell
- </tr> ends the table line
</table> ends the table
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
To the Top
|
