JCL's Tutorial On HTML Basics
The HTML Header (Starting Your HTML Document)
The first task to be accomplished is to find a word processor like SimpleText.
After you have openeed a new document, type in <html> to tell the computer the language you are using. HTML stands for Hyper Text Markup Language.
Creating A Title For Your Page
After you have typed in <html>, press the Return key twice and type in <title>The title of your page</title>. You don't have to press Enter twice, it's just better style. For a complete tutorial on HTML Style, please click here. The <title> tag starts the title and the </title> ends it. You should obviously change "The title of your page" to your actual title.
The Body Tag And Its Functions
You can choose the color of your background, text, unvisited links, visited links , and clicked on links for your page by using the following commands in your <body> tag:
- bgcolor = "color"
- text color = "color"
- link color = "color"
- vlink color = "color"
- alink color = "color"
The first is used to specify the color of the background, the second is used to specify the color of the text, the third is used to specify the color of the the unvisited links, the fourth is used to specify the color of the visited links, and the last is used to specify the color of the links while they are being clicked. Replace color with the color or the color's hex (hexadecimal) code that you want. It is probably better to use the color's hex code because lower level browsers have trouble reading the actual color's name. If you want a color translated into hex and have a JavaScript Enabled browser, please click here. If you don't have a JavaScript Enabled browser and want a color translated into hex, please click here. It's wasn't made by me (I'm too lazy to make a color code of that size), so I'm sorry it takes awhile to load. Go have breakfast or something while you're waiting if you don't have an extremely fast modem. The reason I recommend this site for a color code reference is because there is not one color that I know of which is left out! The only required part of the <body> tag is <body> itself. If you don't set any of the colors, the background will be silver, the text will be black, the unvisited links will be blue, the visited links will be purple, and the clicked on links will be red. Those are the standard colors.
You can also use a GIF or JPEG image for your background by using background = "picture" in the <body> tag. Replace picture with the picture you want to use and you're all set. You can use any size picture because the picture keeps repeating itself to make a background. Try it out and you'll see what I mean. If you want to make a picture background over a specified color instead of silver, just put bgcolor = "color" and background = "picture" (where picture is the picture you want to use for your background) in the body tag. The picture background will go over the specified background color after the image has loaded. Below is an example of a body tag that uses all of the functions of the body tag:
<body bgcolor = "#000000" background = "html.gif" text = "#FFFFFF" vlink = "red" link = "yellow" alink = "orange">
Notice that I wrote some colors in hex and some in their actual color name. I did this to show you the difference between colors in hex code and the actual color names. The above example would give you a black background (#000000 = black in hex) which would become a background with the picture, html.gif when the image loads. The text would be white (#FFFFFF = white in hex), the visited links would be red, the unvisited links would be yellow, and the clicked on links would be orange. The text color can be changed in the document, but if it is not changed, the text color will be white.
Text Minipulation
To place text on your page, all you have to do is type it. To center the text, type in <center> before the text that you want centered and </center> after it. Another way to align text is to use the <ol> command. It indents the text. You can put a series of them, but remember to type in </ol> for each ol you used when you want the text to go back to the left margin.
To change the text size, place a <h1>, a <h2>, a <h3>, a <h4>, or a <h5> before the text that you want to change the size of, and use a </h1>, a </h2>, a </h3>, a </h4>, or a </h5> (depending on the h (heading) you picked - correspond the two - ex. - <h1> goes with </h1>) at the end of the text size change. The lower the number, the bigger the text.
If you want to put text in italics, use the <i> command to start the text that is going to be in italics and the </i> command to end the italicized text. To create underlined text and bold text, use the same commands that you used to make italicized text, but change the i's to u's for underlined text and i's to b's for bold text.
For more information on Text Minipulation, please click here.
Images
To place a GIF or JPEG image on your page, you have to type in <img src = "picture_name">. The image you use must be a GIF or JPEG. All pictures on the net are GIFS and JPEGS. If you want to make your own, you must use a program that can save the file as a GIF. This is very important. You'll become very frustrated if you see a torn square or a solid square with triangles and other shapes. Img stands for image, and src stands for source in case you were wondering. You can even type in an address to call your image like http://www.nowhere.com/image.gif, but I don't recommend doing this because most people don't like you calling an image from their page. To align an image, do one of the following:
- Type in align = "middle" in the <img> tag to make the text wrap around the middle of the images.
- Type in align = "left" in the <img> tag for the text to wrap around the image on the left margin.
- Type in align = "bottom" in the <img> tag to make the text wrap around the top of the image.
- Type in align = "right" in the <img> tag to make the text wrap around the image on the right margin.
- Type in align = "top" in the <img> tag to make the text wrap around the bottom of the image.
- Type in <center> to center the image and </center> to end the centering of the image.
Links
To place a link on your page, please do the following:
- Type in <a href = "url_address"> replacing url_address with the address you want the specified text or image to link to.
- Specify the text or image that you want to use for the link by typing in the words and/or image command after your <a href = "url_address"> tag.
- Type </a> at the end of the link.
When I say image command, I mean <img src = "picture">. If you use the <img> tag after an <a href> tag, the picture will become a clickable link. All text and images after the a href command and before the </a> tag will be links that your visitor can click on. When a person clicks on it, he/she will be taken to the address in the <a href< tag. The </a> tag ends the link.
Some Important Notes
- <br> - creates a new line
- <hr> - creates a line
- <hr width = "n%"> - creates a centered line with a length of n% of the users' browser length
- <hr width = "n"> - creates a centered line with a length of n pixels
- alt = "Text" - (goes inside the image tag) - gives text or text link in replacement for an image or image link if the image had a problem loading due to your visitor stopping the loading of your page in the middle, a link to a non - existant image, etc. (Replace Text with your message)
- border = 0 - (goes inside the image tag) - gets rid of the border of an image link (image used as a link)
Ending Your HTML Document
When you are all done with your HTML document, it is good style to end with </body> and </html>. If you haven't noticed by now, whenever you end something in an HTML document, you end it with a /. Try not to forget that, it's a useful tip.
Jason's HTML & JavaScript Tutorial
E-Mail Me