Wonder

Html

Shortcuts coming soon^^

How to make an Image appear

Many people who first start out learning how to do html do not know how to make an image appear.
1. First you need to make and image. Example this little square I made. Isn't it cute? XD

2.Second of all find an image hosting site that will allow you to upload pictures.
3. Next you need to upload the image onto the space provided for you to use.
4. Need the code? Ok, let me explain it.
this-->is my image url:http://wonder.kloud-nine.com/html.jpg
and this-->is your code:

5. Now if you put your url code where it says to, your results will make you a happy camper and look more like this

Making a Link

Now, some people do not know what a link is. A link is the process of clicking on a text or image that will take you to a different page. Now, first of all you need to have the page url that you want to link. For example, I am going to link to my main page
http://wonder.kloud-nine.com/main.html
<----This is the url
Now I will need my code

When I put the link into the "url here" space, and change the "Text Here" to "Charlene," My link will look like this
---->Charlene<----

You may also want to create an image link. To do this you will need your url code,and the Image url you would like to use.
url---->http://wonder.kloud-nine.com
Image Url---->"http://wonder.kloud-nine.com/html.jpg
Now to make this happen, you will need this code

If you put your link where it says "url here", your image url where it says "image url here" then your results will become like this
----><----
I suggest you keep the border at zero if you don't have a css stylesheet attached to your web page or you will have an icky purple border around it^^.

The Alt Tag


The alt tag is a simple code that allows you to see text when you scroll over an image. The code is especially apprciated when you have trick image links that some people can't read, or if they want to know what the image or link is about. All you need is your image url code.

When you put everything in place you come up with this:(make sure you put your curser over the image)
----><----

Body Background

Many sites look plain without this code. This code inables you to display a background on your page
Say I wanted my background to be white. Since My color code of white is #FFFFFF, it will be the color code I will place in the background code

This is what it will look like:

#FFFFFF
#000000
Now to add a picture background to that, you would use this code:

Font

There are many ways to display your font. Here I am going to show you a number of ways.
First I am going to introduce the header format
These are shortcuts to how you want your font to be.

The H1 tag___<h1>text here</h1>___Example:

Wonder


The H2 tag___<h2>text here</h2>___Example:

Wonder


The H3 tag___<h3>text here</h3>___Example:

Wonder


The H4 tag___<h4>text here</h4>___Example:

Wonder


The H5 tag___<h5>text here</h5>___Example:
Wonder

The H6 tag___<h1>text here</h1>___Example:
Wonder

Here are also some cool font codes that you may use.

The Strike out Code

html:<strike>text here</strike>
Example: Wonder is a wonderful site.

The Small Code

html:<small>text here</small>
Example:Wonder is a wonderful site.

The Strong Code

Html:<strong>text here</strong>
Example:Wonder is a wonderful site.

The Sub Code

Html:<sub>text here</sub>
Example:Wonder is a wonderful site.

The Sup Code

Html:<sup>text here</sup> Example:Wonder is a wonderful site.

The TT Code

html:<tt>text here</tt>
Example:Wonder is a wonderful site

The Blink Code

Html:<blink>text here</blink><br> Example:<blink>Wonder</blink> is a wonderful site.<p> <p class="header">Marquee's</p> To make just a plain marquee you need this code<br> html:<marquee>text here</marquee><br> Example:<marquee>Wonder is a wonderful site</marquee><p> If you would like your marquee to go from side to side you will need this code<br> Html:<marquee behavior="alternate">text here</marquee><br> Example:<marquee behavior="alternate">Wonder is a wonderful site.</marquee><p> </div> <div id="Nav." style="position:absolute; left:6px; top:200px; width:125px; overflow:no"> <!--start the menu2--> <b><p class="header">Sitely</p></b> <a href="main.html">Main</a><br> <a href="staff.html">Staff</a><br> <a href="terms.html">Terms</a><br> <a href="credits.html">Credits</a><br> <a href="affy.html">Affys/Apply</a><p> <b><p class="header">Stuff</p></b> <a href="tutorial.html">Tutorials</a><br> <a href="tagboard.html">Tagboard</a><br> <a href="link.html">Link to Me</a><br> <a href="out.html">Link Out</a><br> <b><p class="header">Hosted By</p></b> <a href="http://kloud-nine.com" target="_new"><img src="/linkme7.gif" border="0" alt="Kloud-Nine"></a><br> <a href="http://pub18.bravenet.com/guestbook/1481272782/" target="_new">Sign Guestbook</a> <style>A:link { text-decoration: none; color:#FFFFFF; } A:visited { text-decoration: none; color:#FFFFFF; } A:active { text-decoration: none; color:#FFFFFF; } A:hover { text-decoration: none; color:#FFFFFF; </styel> <!--end the Nav--> </div> </table> </html>