Basic HTML Tutorials

Simple Codes Make a Big Difference

Pictures and Links

How to Make a Picture Show Up

First, your picture has to be hosted on the internet. Here is how you can do it easily and free:
1. Go to www.tinypic.com and upload a picture from your computer.
2. Once uploaded you will see a small preview of your picture and a few different ways to get the URL. Pick the one that says "Direct Link for Layouts".
3. Highlight and copy the URL into an image tag as shown below.

<img src="URL OF PIC">

Example of a picture I uploaded:

<img src="http://i5.tinypic.com/871tcbd.jpg">
Here is what happens:
How to Post a pic

How to Make a Text Link

This is how you can make your text or picture a clickable link to another webpage. The URL is what you see in the address bar of your internet browser when you visit a website.

Post text link:
<a href="URL OF WEBSITE">Text you want linked</a>

Post image link:
<a href="URL OF WEBSITE"><img src="URL OF PIC YOU WANT LINKED"></a>

Post link to open in new window:
<a href="URL OF WEBSITE" target="_blank">Text or image you want linked</a>

[Free] Image, Music, and Video Hosting

Videos:
YOU TUBE
Music, Video, Pics:
FILE DEN
Pics:
PHOTOBUCKET
IMAGE SHACK
TINYPIC

Header Tags

[A header is used to title a section, column or paragraph.]

<H1>HEADER</H1>

<H2>HEADER</H2>

<H3>HEADER</H3>

<H4>HEADER</H4>

<H5>HEADER</H5>

<H6>HEADER</H6>

Font Tags

[A font tag is how you change the way your text looks]

SIZE:

Color/Face:

<font color="red" face="courier">Courier</font>
<font color="orange" face="impact">Impact</font>
<font color="green" face="times new roman">Times New Roman</font>
<font color="blue" face="arial">Arial</font>
<font color="indigo" face="comic sans ms">Comic Sans MS</font>

You can also use hexadecimal colors like this:

<font color="FF00FF">Text Text Text</font> ***[CLICK HERE for Color Chart]***

Combine them all example:

More Text Formatting!

Text Decoration

<i>Itallic</i>
<b>BOLD</b>
<u>underline</u>
<s>~~STRIKEOUT~~</s>
<tt>Teletype Text</tt>

Text Alignmnet

<p align="left">aligns text to the left</p>

<p align="center">aligns your text to center</p>

<p align="right">aligns your text right</p>

Line Breaks

<br> is a line break. It goes to the next line.

example:

Here is some text.
Here is some text after the line break.

Paragraph's

<p> is a new paragraph. It skips a line.

example:

Here is some text.

Here is some text after the new paragraph.

Horizontal Lines

<hr> is a horizontal line.

example:

<HR width="50%">

Think You're Getting Good? Here's MORE!

Image Size

Explanation:
You can change the height and width of an image. If you only adjust the height, it will automatically adjust the width accordingly and vice versa.

EXAMPLES:

BORDERS

Add a border:

Explanation:
Red: This number is how wide the border is.
Green: This is the border style. It can be:
solid, outset, inset, dotted, dashed, double, ridge, or groove.
Orange: This is the border color. You can use regular colors like red, blue, etc. or hexadecimal colors. Click Here for the color chart.

EXAMPLES:

Make text wrap around an image

text text text text text text text text text text text <img src="url to image" align="left" margin="5"> text text text text text text text text text

Explanation:
Align: can be left or right

Margin: is the amount of space between the picture and your text. You can change that number to suit your needs. I recommend keeping the number below 5.

Examples:

Pic aligned left.
text text text text text text text

text text text text text text text text text text text text text text text text text text text
Pic aligned right.
text text text text text text text

text text text text text text text text text text text text text text text text text text text