Leslie's HTML Guide
www.html4u.cjb.net
This guide is for the beginning or advanced webmaster. Here you will be able to find basic HTML and cool HTML tricks. Now, where would you like to begin?
Leslie's Basic HTML Guide
Leslie's Advanced HTML Guide
Contents of Leslie's Basic HTML Guide
The Basic HTML Page
<html> and </html>
<title> and </title>
<head> and </head>
<body> and </body>
Adding a Background Color or Image
Adding a background color
Adding a background image
What I recommend for backgrounds
The Body of your HTML page
Adding text
Aligning text
Different
Fonts and Colors
Linking text
Adding images
Adding a
caption to your image
Centering
images
Linking images
How to get rid of the ugly blue border around linked image
An example of a page with a title, background, text, links, images, and linked images
I. The Basic HTML Page.
<HTML>
<title>Your title</title>
<head>
</head>
<body>
</body>
</HTML>
<HTML> marks the beginning of your HTML page. </HTML> marks the end of your HTML page.
The title of your page should be put between <title>and </title>. <title> and </title> should be placed in between <html> and<head>.This title will appear at the top of your browser's window. For example, on this page, the title is Leslie's HTML Guide. This should appear at the top of your browser's window. Check it out!
<head> and </head> goes between the title and the body. What goes between <head> and </head>? That's a simple answer. You can put a lot of things there. You can put roll-over text links, the "No right-click script", meta tags, or JavaScripts.
<body> and </body> goes between </head> and </html>. Between <body> and </body> is the actual page that can be seen. You can put text, images, etc.
2. Adding a background color or image.
bgcolor="the background color you want"
Replace what's in red with the basic color names (red, blue, aqua, lime, yellow, orange, hotpink, etc.) or with hex values for custom colors (#800080, #A8D3FF, #FF0000, #8000FF).
Here's an example of a page with a blue background.
<HTML>
<title>Your title</title>
<head>
</head>
<body bgcolor="blue">
</body>
</HTML>
To add a background image, put this code between <body and >:
background="yourimage.gif"
Replace what's in red with the URL of your image.
Here's an example of a page with one of my backgrounds from my site:
<HTML>
<title>Your title</title>
<head>
</head>
<body background="http://members.aol.com/lezly24/LinkBack.gif">
</body>
</HTML>
When adding a background image, you need to consider that sometimes, your server might not be able to open your background image. When this occurs, your background will become the default color of a person's browser. The default color is usually white or gray. To stay on the safe side when adding a background image, I recommend putting a background color and a background image so that if your server cannot open your background image, it will at least show the background color of your choice. Here's an example of a page with a background image and color:
<HTML>
<title>Your title</title>
<head>
</head>
<body bgcolor="blue"background="http://members.aol.com/lezly24/LinkBack.gif">
</body>
</HTML>
3. Making the body of your page.
To add text, all you really need to do is type. BUT (yup there's always a "but") to align your text, you need another code.
To align your text to the left, add this code:
<p align="left">Your text here.</p>
To center your text:
<center>Your text here.</center>
To put different fonts and colors, put this code.
<font face="Your font here" color="desired color">Your text here.</font>
To link your text, put this code.
<a href="URL to go to">Your text here.</a>
To link your text AND put a different font and color, use this code.
<a href="URL to go to"><font face="Your font here" color="desired color">Your text here.</font></a>
A page is
not complete with only text, links, and a background. You need graphics to enhance your
site.
<img src="yourimage.gif">
Adding a caption to the image means this: When the visitor puts his/her mouse over the image, a caption will pop up. Webmasters normally put something like, "Click here!" or "Hi and welcome to my page!". To add a caption to your image, put this.
<img src="yourimage.gif" alt="Click here to go to my site!">
To center your image, use this.
<center><img src="yourimage.gif" alt="Click here!"></center>
To link an image, put this.
<a href="URL to go to"><img src="yourimage.gif" alt="Click here!"></a>
To get rid of that ugly blue border, use this code.
<a href="URL to go to"><img src="yourimage.gif" alt="Click here!" border="0"></a>
Here's an example of a page with a title, background, text, links, images, and linked images.
<html>
<head>
<title>Leslie's HTML Guide</title>
</head>
<body bgcolor="#A8D3FF"
background="http://members.aol.com/lezly24/LinkBack.gif">
<font face=" Comic Sans MS" color="red" size="4">
<p align="center"><img
src="http://members.aol.com/lezly24/logo.gif">
Hi and welcome to my page!<br>
<a href="http://www.beaniebabycrazy.com">Click here to go Beanie Baby
Crazy.</a></font>
<a href="http://www.beaniebabycrazy.com"><img
src="http://www.beaniebabycrazy.com/banner.gif" alt="Click here to go to
Beanie Baby Crazy!" border="0" width="468"
height="60"></a></p>
</body>
</html>
Now you've got the HTML basics! You are ready to go on to Leslie's Advanced HTML Guide.
Leslie's Advanced HTML Guide
Contents of Leslie's Advanced HTML Guide
Roll-over text
links
No right-click Java Script
Frames
Using AOL Press for Frames
Using Microsoft FrontPage for Frames
1. Roll-over text links.
Notice that when you put your mouse over those two links, they turn pink and are underlined. When you click on them, they turn blue, italicized, and bold. This code only works in Microsoft Internet Explorer. Here is the code I used on this particular page. Put this code between the <head> and </head> of your HTML document.
<style><!--
A:link {color: purple; text-decoration: none}
A:visited {color: purple; text-decoration: none}
A:hover {color: hotpink; text-decoration: underline}
A:active {color: blue; text-decoration: underline; font-weight: bold; font-style: italic}
--></style>
You can modify this code by changing the colors and adding things. When you add things, make sure you have a semicolon (;) in between. Things you can add are:
font-style: italic
font-weight: bold
background-color: blue
text-decoration: underline
text-decoration: overline
You can experiment and modify this code to fit your site.
2. The "no right-click
JavaScript".
<script
language="JavaScript"> <!--
// No rightclick script v.2.5
// (c) 1998 barts1000
// barts1000@aol.com
// Don't delete this header!
var message="Put your message here."; // Message for the alert box
// Don't edit below!
function click(e) {
if (document.all) {
if (event.button == 2) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// --> </script>
Put your message in the space indicated. To make a linebreak, or <br>, just put \n. Here's an example:
<script
language="JavaScript"> <!--
// No rightclick script v.2.5
// (c) 1998 barts1000
// barts1000@aol.com
// Don't delete this header!
var message="Please don't copy!\nThanks and have a great day!"; // Message for the alert box
// Don't edit below!
function click(e) {
if (document.all) {
if (event.button == 2) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// --> </script>
3. Frames
<base target="main">
Now you are ready to make your frames page.
<html>
<head>
<title>Your title here</title>
</head>
<frameset cols="150,*">
<frame name="contents" target="main" src="menu.html">
<frame name="main" src="main.html">
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>
Using AOLPress to create
a frames page.
Here are some problems that I encountered that can be solved in just a few easy steps: 1. The links on my menu don't open in the right frame. I have two frames. A menu and a main frame. I want the link on my menu to open in my main frame, not in the menu frame or a whole new window. What do I do? Well, first you need to right click on an empty spot in your main frame, the frame where you want the page to show. Or you can go to Format>Frames>Frames Info. You will get a new window named Frames Info. In the Name field, type: main. Then click OK. On the menu frame, highlight the words that you want to link. Click the Link button (a chain under Element and next to Insert Image). A window named Link will appear. Under link to page, type the page that you want it to go to. Under Target Frame, type main. You are typing main because that's the frame where you want the links to show and that's what you named that frame.
Using Microsoft FrontPage to create
a frames page.
1. Open FrontPage.
2. Create a new web.
3. Open Microsoft FrontPage Editor or go to File>New>Page and double click the new page.
4. Go to File>New.
5. Click the Frames tab.
6. Select the frames page style you want.
7. Then, create your pages!
8. To save, click on the disk icon between Open and Print. Save each page and the frames page. You should be able to determine which page you are saving because there is a picture on the side. Whichever frame is highlighted green is the frame that is now being saved.
9. To publish to AOL, make sure to sign on
under the screen name you are publishing to. Then, go to FrontPage Explorer (the place
that shows all your files and pages) and go to File>Publish FrontPage Web...
Then, a new window should open, entitled Publish. Click More
Webs...
Then type http://members.aol.com/yourAOLscreenname in the space provided. Click OK. Another window will open,
entitled Microsoft Web Publishing Wizard. Under FTP Server Name, type members.aol.com. Leave the Directory Path blank. Then click Next. Type anonymous as the User Name and type yourAOLscreenname@aol.com for the password. Then
click Finish.
Wait for it to publish and then check out your site!
When you update your pages, update them and save them. Then to
publish, all you need to do now, since you already set up your Publishing Wizard, is press
the Publish button, located next to the New Page button and the Open button.
That's all for Leslie's HTML Guide! If you have any HTML-related questions, e-mail me at Leslie@beaniebabycrazy.com or webmaster@beaniebabycrazy.com. I will either answer it here or through e-mail, so check this site often for more codes and HTML help!
Click here to go to my main page, Beanie Baby Crazy at www.beaniebabycrazy.com!
