A special guide for learning more about html than just the basics. Here are a few things that you will be learning in this Special Guide: Including fonts, how to make a text area box, how to make thumbnails and how to make thumbnails that load faster using the image provider like Majhost, Photobucket, and more. There will be more things to learn than just that too :D The newest lessons are at the top and the bottom are the old ones.

Getting Rid of Borders
Do you know the square line that goes around your image when your linking your image to a page? Well, I sure do as I was starting html. That square line is in fact a border but there's an easy way to do this with this code: border="0" The zero is to show you that you don't want a border. Here is an image without the code:

and here's an image with the code:

See the difference? To use the code with an image just do this: <a href="http://melon48.webs.com/-special-html.htm"><img src="http://www.majhost.com/gallery/Melon88/Html/mps_button_2.png" border="0">

Site Title Name
Example

Is a title that shows up in browsers that look like the example where the orange bored is around at. Which will appear with this code: <title>Site Title Name Here</title> Where it says "Site Title Name Here" is where you put the title of your site at. Easy, right? That code should be under the <head code of your site.

Shortcut Icon
Example

This is a small icon like image beside your site title on the browser. Like the example (the shortcut icon are circled). The image must be 16x16 or else it won't work. I do have a 19x16 one but that's probably as far as you would go to the size limit. When your shortcut icon is uploaded to your site files or an image host put the image code into: <link rel="shortcut icon" href="shortcut icon code here"> Under the <head> code of your site, below where it has the site title.

Affiliate Hover
Example

<script>
<!--
if (document.images) {

button001= new Image
button01 = new Image
button02 = new Image
button03 = new Image
button04 = new Image

button001.src ="hover button code here"
button01.src ="site button code here"
button02.src ="site button code here"
button03.src ="site button code here"
button04.src ="site button code here"
}// --></script>

This is the code that is great when a site owner has a lot of affiliates and doesn't want to show a whole bunch of affiliate buttons on their site. I used this code cause of the same thing. First you need to put the code at the top before <style>. You don't have to make much changes just where it says: button001.src ="hover button code here" Is the hover button, which will change when one of the text links at the button are hovered. "button01.src ="site button code here" and "button02.src ="site button code here" and so on is where you would place your affiliate site buttons. I left four for you, you can remove as many as you want and you can even add more like if you wanted to add a fifth site button you would do this: "button05.src ="site button code here" As you do is change the number with the same code to add more :)

<img src="hover button code here" vspace="1" border="0" width="88" height="31" name="affies"><br>
<a class="nav" onmouseover="document.affies.src=button01.src" onmouseout="document.affies.src=button001.src" target="_blank" href="site link here">Site Title Here</a>
<a class="nav" onmouseover="document.affies.src=button02.src" onmouseout="document.affies.src=button001.src" target="_blank" href="site link here">Site Title Here</a>
<a class="nav" onmouseover="document.affies.src=button03.src" onmouseout="document.affies.src=button001.src" target="_blank" href="site link here">Site Title Here</a>
<a class="nav" onmouseover="document.affies.src=button04.src" onmouseout="document.affies.src=button001.src" target="_blank" href="site link here">Site Title Here</a>

Then we move on to the next step. At the very top where it says: <img src="hover button code here" you put in the top button code again. You don't have to any changing to the other codes unless your button is bigger or smaller than width: 88 and height: 31 then you have to do a few changes. Make sure the image isn't too big. And if you want to change <br> to <p> to make more space between the hover button and the links you may. Make sure where it says onmouseover="document.affies.src="button01.src" as the top part of the code you can remove or add as many as you want just change the number to how many your going to use. Where it says: href="site link here"> you put the affiliated site/s link there and change "Site Title Here" to the site title that you put in the same row where the site link is. And your done :D

Navigation Block
Example

a.nav {
border: 1px solid #FF7F00;
background-color: #FF4500;
color: #CC0000;
text-align: center;
font-size: 12px;
text-decoration: none;
display: block;
}

a.nav:hover {
border: 1px solid #FF7F00;
color: #8B0000;
display: block;
background-color: #;
background-image: url("background image link here");
text-decoration: none;
text-align: center;
}

Here is the code to make your navigation links into a block (which is what nav means) with the text link inside. This code should be in the middle of <style> and </style>.The one on the left is how your links would look without the link being hovered. The one on the right shows how to will look with the link hovered. There's probably more displays than a block format but that's all I know. By the way, you put those codes in the style section. To make the links block, you need to put this code: <a class="nav" which should look like this when you use it: <a href="nav" href="page.htm">Page

Iframe

<iframe src="page to be in Iframe link here"
name="page name here (optional)"
id="page"
width="width here (example: 300)"
height="height here (example: 200)"
marginwidth="0"
marginheight="0"
frameborder="0"></iframe>

This lesson puts your text and images in a box that has a scroll-bar when the web page in the box becomes bigger. I think you can put any web page in a iframe (only if the image in the web page is small enough to be placed in a iframe box, you don't want the image being bigger than your iframe). To put a web page in an iframe you use this code: <iframe src="iframe-preview.htm" to put your web page address where it says: "iframe-preview" you put your web page address there. The name, marginwidth, and marginheight isn't something you need to put. But the id is important, I think it's to know if it's a page or something else. You will need to leave that alone since it's already done for you. The width is the width of your iframe and the height is the height of it. If the number is high, the height and/or width will be big. If the number is low, the height and/or width will be small. The frame border is if you want a border around your iframe or not. You put this code in the content of your site.

Marquee Text
text goes here

Is a code that makes your text move from the right to the left of a web page. A few sites that I have seen use it. I even used to use it on my Spat and Harmony Heartbreak layout.
Here is the code: <marquee>text goes here</marquee>

Fonts
Not really a lesson but helpful information on using more fonts.

Arial, Arial Black, Arial Narrow, Autumn, Balthazar, Batang, Bell Gothic Std Black, Bell Gothic Std Light, Brickham Script Pro Regular, Birch Std, Blackadder ITC, Blackoak Std, Bradley Hand ITC, Browallia New, Tahoma, Verdana, and more. You can find a lot more fonts on any graphic program like: Microsoft Paint (ms paint), Paint.Net, Gimp, Adobe Photoshop and more. Just go to the font section of the graphic program that your using.

Making Fast Loading Thumbnails
Ever hated how your thumbnails would load really slow? Well, I have always used to. I would use this code for all of my images: <a href="link here"><img src="image url here" weight="80px" height="80px" border="0">

And my thumbnails would load really slow.. but I have figured out the reason. It's because the image in the "<img src" code is making a big image small which makes it load slow. Especially when you have lots of images using that same code.

This is what you do: you go to your image provider (an image hosting site where you can load your images at) and left click the mouse/pad (it depends if you own a desktop computer or a laptop). Then click where it says "properties". Under "Image Properties" it says "Location:". Beside it, is where the thumbnail link is and you put that in the "img src" code. If the thumbnail is still too big do this:
<a href="link here"><img src="thumbnail link here" weight="80px" height="80px" border="0">The weight and height code is how much the width of the image is and the height is how high the image is. You can use this code with as many images you want.

Text Area

Code: <textarea>text here</textarea>

Where it says "text area" should be changed to "textarea" when using this code. This can be for showing html codes without having to use them since if you didn't have a html code in a text area. The code would be used.