|
List of the Different Lessons
|
Introduction · Body Setup · Creating Tables ·
Text · Images
Websites can be made on a Windows application called Notepad, a very simple
text program.
HTML is called HTML for a reason, web files are saved as .html files.
When saving your work, save it as a .html document.
Example: index.html
If you save your work with out the .html extention, the file will be saved as a
.txt file, if this is done, your document will not appear as a web page.
Every tag that is closed must be correspondant with the opening. At first, this may
seem somewhat pointless, but it will help in making a good webpage.
Example: this is what you should do
<table>
<tr>
<td>
</td>
</tr>
</table>
Example: this is what you should not do
<table>
<tr>
<td>
</table>
</tr>
</td>
The first example is translated into this: open a table, open a row, open a column, close
the column, close the row, and last close the table. This is very logical to open the table
first, and close it last.
The second example is translated into this: open a table, open a row, open a column,
close the table, close the row, and last close the column. This is not very logical, to
close the table first, and then close the row and column last.
At the very top of the document, the very first thing, the tag <html>
should be put. At the very end, the very last thing of the document must be,
</html>
This signifies the beginning and the end of a HTML document.
The body and head tags are the other two most essential parts of the document. three opening
and three closing tags are required two make a webpage:
<html>
<head>
</head>
<body>
</body>
</html>
All other tags must go in between the
<body> and </body>, or the
<head> and </head> tags.
The <body> tag establishes the color of the background or puts a background
image, text color, link color, active link color, and visited link color.
Before continuing, you should be taught how to make different colors using
hexadecimal numbers. It may sound complicated, but it really is not, it is just a matter of
getting the right colors mixed. When making colors, there are six characters you must use,
it must be from 0 to 9 then A to F, 0 being the lightest and F being the darkest of a shade.
Back to those six characters, ??????, the first two characters will determine the shade
red ??????, the second two will determine the shade of green
??????, and the last two
characters will determine the shade of blue
??????
Examples:
"#FFFFFF" = White
"#000000" = Black(black)
"#FF0000" = Red
"#00FF00" = Green
"#0000FF" = Blue
"#232199" = This shade of blue
"#FF9D43" = This shade of orange
This is a very simple concept, once it is understood, and you have a good sense of
what certain color combinations do. What may help is if you own the program Flash MX, the
colors that are chosen in that program also display their hexadecimal value.
To estable a background color, this command must be put into the <body>
tag, bgcolor=
Example:
<body bgcolor="#FF9D43">
This command will make the entire background the shade of orange from the earlier example.
For a background image, the command is background="name of image with extension"
Example:
<body background="test.bmp">
Important
If you do not put the extension of the image, it will not show up. Also, certain images
will not work because of their file type.
A link is a button that will take the browser to another page, a visited link is a link
that has already been visited, an active link is a link that has been clicked. However,
an active link stays a certain color until another part of the page is clicked, or another
link is clicked. These are the commands to setup the color properties for them:
Links = link=
visited links = vlink=
Active Links = alink=
Here is an example of this page, background color is black, text is white, links are red,
active links and visited links are red.
Example:
<body bgcolor="#000000" text="#FFFFFF" link="#FF0000" vlink="#FF0000" alink="#FF0000">
For an image, just replace the bgcolor= command with the one for the background
image.
The table tag has the ability to change the background color of the entire table,
a single row, a single column, or a single row. The command to change background color
is the same as the body's.
The tag to start a table is <table>
There are two ways to establish the width of a table: one is to make it by saying how
many pixels of the screen you want it to cover, two is to tell what percent of the screen
you want it to cover. The alignment of the table could either be left, center, or right.
Three things there are to know about cells: the border, the spacing, and the padding.
Cell Padding establishes the amount of distance from the objects in the cell to the border.
Cell Spacing establishes the distance from each cells.
The Border establishes the size of the border.
After the table tag has been put up, the first thing that goes after it is the row
tag which is <tr>
After the row tag is the column tag which is <td>
Extra commands can go into the row and column tag, such as: width, height, and background
color.
Example:
<table width=100% align=center border=1 cellspacing=0 cellpadding=0>
<tr bgcolor="#FF0000">
<td width=100% align=center>
Test
</td>
</tr>
</table>
Output:
Many controls are possible to do with text. Only these commands are going to be taught
in this lesson: alignment, color, and links. The remaining are in the table, it is basically
self explanitory.
First is alignment. There are three places where text can be aligned: left, center,
and right. to set alignment, this must be used
<div>
To set the alignment is very simple, just add align= into the <div> tag.
Example:
<div align=right>This is a test</div>
Output:
This is a test
Recall the Body lesson, where the color combinations was taught, this will be
useful right now. To change the color of text, you must change its <font>
color="#??????" must be put into the <font> tag.
Example:
<font color="#6ADE87">This is a test</font>
Output:
This is a test
If you are still confused about the color combinations, there is some good news.
There are a few single word colors that color be used instead of their hexcode.
Example:
<font color=maroon>This is a test</font>
<font color=yellow>This is a test</font>
Output:
This is a test
This is a test
Last thing for text are links. The three that you will be learning are: links to other
pages, links to a different section of the same page, and e-mail links.
This is the tag to make a link <a>
to make a link to a new page, use this <a href="url or directive">
Now there is something else, to go to a new page and open a new window, add this
command target=_blank
Example:
<a href="http://www.yahoo.com/" target=_blank>Open a new window to Yahoo</a>
Output:
Open a new window to Yahoo
The first thing to do to make a link to go to a different section is to give the section
a name. For example, The top most part of this page is called "home".
<a name="name of section">
Now, to make a link to go to that section, use this
<a href="#name of section">
Example:
(This went at the very top of this page) <a name="home">
(This can be placed anywhere on the page) <a href="#home">Back to Top</a>
Output:
Back to Top
Last, is the e-mail links. An e-mail link is a link that will set up a new document to
e-mail, usually including the subject. This is the basic format
<a href="mailto:ADDRESS?subject=A Subject">
Example:
<a
href="mailto:arcslo13@yahoo.com?subject=testing lessons">arcslo13@yahoo.com</a>
Output:
arcslo13@yahoo.com
An image is a one of the easiest concepts to grasp. To put an image, use this
command
<img src="source of the image along with the type of image">
Some image types will not appear on the page.
The following commands can be put into the tag:
To establish width = width=
To establish height = height=
To establish border = border=
To establish alignment = align=
Example:
<img src="animage.bmp" width=500 height=200 border=1 align=right>
Output:
 Example:
<img src="animage.bmp" align=left>this is a test this is a test this is a test
this is a test this is a test this is a test this is a test this is a test this is a test
this is a test this is a test this is a test this is a test this is a test this is a test
this is a test this is a test this is a test this is a test this is a test this is a test
this is a test this is a test this is a test this is a test this is a test this is a test
Output:
this is a test this is a test this is a test
this is a test this is a test this is a test this is a test this is a test this is a test
this is a test this is a test this is a test this is a test this is a test this is a test
this is a test this is a test this is a test this is a test this is a test this is a test
this is a test this is a test this is a test this is a test this is a test this is a test
It is also possible to have an image as a link
Example:
<a href="http://www.google.com/"><img src="animage.bmp"></a>
Output:
For some more tags, which are very self explanitory, go to
this page. The page has a table of many of the useful tags.
|
