|
| |
HTML is an easy language to learn. It is so close to English that I don’t consider it a programming language (Except on a resume). The only bad thing about HTML is that anyone can view your coding without a second thought. HTML is also not case sensitive and ignores white space (spaces and new lines). Since the language does this you have an advantage, you can make the page in any format you want so it is easy for you to read. Also you don’t need any special programs, to write
HTML, just windows notepad and an Internet Browser to test the results on.
In the HTML language every command is called a tag. Every Tag is in <> brackets. Now the first tag in all HTML documents is the HTML tag. The tag is <HTML> and then at the bottom of the page </HTML> which ends the page. Next you put the head tag. Inside the head tag is where you put all of the information about the page. The head tags has an opening tag <head> and a closing tag </head>, just like the HTML tag. Inside of the head tag you should include comments likewho designed the page, the date it was last modified, etc… To include a comment you must use the comment tag which is <!-- to start the comment section and --!> to end it. Another thing that is nice to have in between the head tags is the title tag. Anything you put in between the <title>…</title> tags will be displayed on the top of the Internet Browser.
After the header section comes the body. The body of the page is like the body of a letter--that's where everything goes. You start the body the way you probably already guessed, with the <body> tag. Can you guess how you end it?---With the </body> tag. See why HTML is so easy. Now we are going to add something new, inside the body tag you can add different settings. One setting is the bgcolor setting that changes the background color. You would use it like so:
<body bgcolor=”white”>
Now you can use any normal color found on a color chart, something like fire engine red isn’t going to work, but red will. Also you can add the background setting that allows you to define a background image.
<body background=”background.gif”>
You can also set the text to a default color using the text setting the same way you used the bgcolor. From the body you can also setup the default hypertext link colors.
Now you are ready to actually start making the page. The first thing you are going to want to do is put the title on the page. To make the title stick out you might want to make the text of the page larger, you can do this through the font tag. You use the font tag as follows:
<font size=”+6” color=”green”>This text is going to be six points larger then the default and green.</font>
You can use the number range of –6 through +6 as the font size, and the colors are the same colors as the bgcolor statement. You might want to center this on the page also you can do this with the center tag. Also you can embed the font tag into the p tag. The p tag is the paragraph tag, it is used to setup paragraphs. You can also underline using the u tag and make text bold using the b tag.
Now since HTML doesn’t recognize white space to go to a new line you have to use the br tag (NOTE: If you use the p tag it will automatically go to the new line after the </p> tag). You may also want to separate the title from the rest of the document by adding a horizontal line to the page using the hr tag. Now you can type in some text inside the p tags. Now that you have reached a part of the page where you want to write down an E-mail address, of a weblink. You can do this using the <a>…</a> (I have no idea why a was choosen). Let me show you an example. Say you want to create a link to yahoo, you would do it like this:
<a href=”http://www.yahoo.com”>Link to Yahoo</a>
Now the say you want to put an E-mail address on the page for people to contact you, you do that almost the same way, except you use mailto and then the address like below:
<a href=”mailto:djlactose@goodshepherdonline”>My Email address</a>
Graphics are what makes a site look more interesting, but also cut back on your load time. You want to be careful using graphics, you use them the with the img tag. What is cool about the image tag is that you can setup alternate text for people who can’t see your graphic or before it loads. Here is an example of the image tag:
<img src=”logo.gif” alt=”Here is our Logo”>
Now that is a basic layout of the HTML language.
Basic HTML Cheat Sheet
|
Tag
|
Options
|
Description
|
|
<html>…</hmtl>
|
|
These
tags are used to tell the Internet Browser that the following document is
HTML.
|
|
<head>…</head>
|
|
Identifies
the header (where all of the information about the page goes) to the
Internet Browser
|
|
<body>…</body>
|
bgcolor=”white”
background=”background.gif”
text=”black”
link=”blue”
vlink=”red”
|
Identifies
the body of the HTML document to the Internet Browser.
|
|
<!--
…--!>
|
|
Used
to Comment out a line of Coding (So it is not visible to viewers of the
page).
|
|
<center>…</center>
|
|
Used
to center something on the page.
|
|
<font>…</font>
|
size=”1”
(-6 - +6)
color=”black”
|
Used
to change the font settings.
|
|
<img>
|
src=”thumbimage.gif”
alt=”This
is a pic of”
href=”image.gif”
|
Used
to put an image on the page.
|
|
<a>…</a>
|
href=”index.html”
|
Used
to create a hyper-link
|
|
<u>…</u>
|
|
Used
to underline text
|
|
<p>…</p>
|
|
Used
to define a paragraph
|
|
<b>…</b>
|
|
Used
to make text bold
|
|
<br>
|
|
Used
to have the Internet Browser go to the next line
|
|
<hr>
|
|
Used
to draw horizontal line across the screen
|
|
<table>…</table>
|
|
Used
to define a table
|
|
<tr>…</tr>
|
|
Used
to define a row
|
|
<td>…</td>
|
|
Used
to define a column
|
Back
to the Main Page
|
