HTML Tutorial

**Marc** · by **Marc** on Fri Oct 16, 2009 4:05 pm

HTML Beginner's Guide :

>> Click Here To Be Re-Directed To This Tutorial

Navigation - List Of HTML Tutorials

**Marc** · by **Marc** on Tue Nov 03, 2009 8:30 pm

HTML Backgrounds

To add a background on your website, use this code between your HEAD tags. I've added a few more details in the code to help you out a little more, Wink

Code:: <style type="text/css"> body{ background-image:url('URL OF YOUR IMAGE'); background-repeat:no-repeat; background-attachment:fixed; background-position:center top; } </style>

**Marc** · by **Marc** on Tue Nov 03, 2009 8:31 pm

HTML Buttons

If you would like to create a button using html, then this code is for you.

Code:: <button type="button">Change Text</button>

**Marc** · by **Marc** on Tue Nov 03, 2009 8:36 pm

HTML Codes For Styling Text

Bold HTML Code :

Code:: <strong>Hello Darren,</strong> what are you doing?

Preview :
Hello Darren, what are you doing?

Or

Code:: <b>Hello Darren,</b> what are you doing?

Preview :
Hello Darren, what are you doing?

Italian HTML Code :

Code:: <em>Hello Darren,</em> what are you doing?

Preview :
Hello Darren, what are you doing?

Underline HTML Code :

Code:: <u>Hello Darren,</u> what are you doing?

Preview :
Hello Darren, what are you doing?

Big HTML Code :

Code:: <big>Hello Darren,</big> what are you doing?

=> Preview using 'big' html code

**Marc** · by **Marc** on Tue Nov 03, 2009 8:38 pm

HTML Drop Down Menu

You can create your own drop down menu by using this code.<br/><br/>

Code:: <form> <select> <option>First</option> <option>Second</option> <option>Third</option> <option>Fourth</option> <option>Fifth</option> <option>Sixth</option> </select> </form>

Preview :

=> Click here

And if you would like to use one of your options in the drop down box first, you can add this to it.<br/><br/>

Code:: <option selected>Third</option>

Example :

=> Preview this example

**Marc** · by **Marc** on Tue Nov 03, 2009 8:45 pm

HTML Fonts

You can change the font of your webpage text by using this html code.

Change font size :

Code:
<font size="1">My Text Is Here</font>
Code:
<font size="2">My Text Is Here</font>
Code:
<font size="3">My Text Is Here</font>
Code:
<font size="4">My Text Is Here</font>
Code:
<font size="5">My Text Is Here</font>

You can see example of every preview on this html page :

=> Click Here To Preview

Change color of font :

Code:
<font size="2" color="green">My Text Is Here</font>
Code:
<font size="2" color="red">My Text Is Here</font>
Code:
<font size="2" color="blue">My Text Is Here</font>
Code:
<font size="2" color="yellow">My Text Is Here</font>
Code:
<font size="2" color="orange">My Text Is Here</font>

You can see example of every preview on this html page :

=> Click Here To Preview

Change the type of font :

Code:
<font face="arial">My Text Is Here</font>
Code:
<font face="arial black">My Text Is Here</font>
Code:
<font face="verdana">My Text Is Here</font>
Code:
<font face="georgia">My Text Is Here</font>
Code:
<font face="times new roman">My Text Is Here</font>

You can see example of every preview on this html page :

=> Click Here To Preview

**Marc** · by **Marc** on Tue Nov 03, 2009 8:50 pm

HTML Frames

You can use this html code on your webpage to use frames.

Code:: <frameset cols="50%,50%"> <frame src="URL"> <frame src="URL"> </frameset>

Just replace the URL text with your url of a webpage.

You can also use iframe codes.

Code:: <iframe name="innerframe" src="http://www.google.com" width="100%" height="100%"> </iframe>

Preview : Link to Example

Use another website address in a frame :

Find this in above code and edit this in bold

src="http://www.google.com" width="100%"

**Marc** · by **Marc** on Tue Nov 03, 2009 8:53 pm

HTML Headings

Here are a list of all of the html headings codes. ( => Preview All Heading HTML Codes )

Code:
<h1>This is heading 1</h1>
Code:
<h2>This is heading 2</h2>
Code:
<h3>This is heading 3</h3>
Code:
<h4>This is heading 4</h4>
Code:
<h5>This is heading 5</h5>
Code:
<h6>This is heading 6</h6>

=> Preview All Heading HTML Codes

The more you increase the number, the smaller the headings are.

It only works up to the number 6. So try not to cross it.

Example :

Code:: <h7>This is heading 7</h7>

Heading 7 and up, the html code(s), does not have any effect.

=> Preview All Heading HTML Codes

**Marc** · by **Marc** on Tue Nov 03, 2009 8:55 pm

HTML Images

Here is the html code that allows you to use images on your website.

Code:: <img src="URL OF IMAGE"</a>

If you would like to set the size of the image, you can use this code below :

Code:: <img src="URL OF IMAGE" Width="100" Height="50">

You can also add a bored to your image by adding this : Border="0"

Here's the full code :

Code:: <img src="URL OF IMAGE" Width="100" Height="50" Border="0">

**Marc** · by **Marc** on Tue Nov 03, 2009 9:04 pm

HTML Inputs

This code is used to submit data for you to read.

Code:: <form method=post action="/cgi-bin/"> Selection :<br> <input type="radio" name="option"> Option 1 <input type="radio" name="option" > Option 2 <input type="radio" name="option"> Option 3 <br> <br> <input type="submit" value="Submit"> </form>

Preview :

=> Click here for an example

You can replace "radio" with "checkbox" if you would like to switch the button type. Or "text" if you would like to receive text data.<br/><br/>

Examples :

Code:: <form method=post action="/cgi-bin/"> Selection :<br> <input type="checkbox" name="option"> Option 1 <input type="checkbox" name="option" > Option 2 <input type="checkbox" name="option"> Option 3 <br> <br> <input type="submit" value="Submit"> </form>

Also, change the "/cgi-bin/" to a section on your server you would like to receive the data a user sends to you.

And you can check any field by adding checked="checked" in the code.

Example :

Code:: <form method=post action="/cgi-bin/"> Selection :<br> <input type="radio" name="option" checked="checked"> Option 1 <input type="radio" name="option" > Option 2 <input type="radio" name="option"> Option 3 <br> <br> <input type="submit" value="Submit"> </form>

Preview :

=> Click here for an example

**Marc** · by **Marc** on Tue Nov 03, 2009 9:07 pm

HTML Lines

Here are some html lines you can use on your website :

Code:: <hr width="85%" size="3">

Code:: <hr width="85%" size="3" noshade>

Code:: <hr width="85%" color="#000000" size="4">

Code:: <hr width="85%" color="#000000" size="8">

Code:: <hr width="85%" color="green" size="10" align="center">

**Marc** · by **Marc** on Tue Nov 03, 2009 9:09 pm

HTML Links

A hyperlink is used to direct you to another page on the web.

You can modify the name of a link by editing the text that says "Text Here" to whatever you would like.

Code:: <a href="URL">Text Here</url>

Link that opens in a new window :

If you add this little extra text [ target="_blank ] between the arrows [ < / >] of a link, the link will open up in a new window.

Code:: <a href="URL" target="_blank">Text Here</a>

<strong>Image Links</strong>

You can also create images links by adding the URL of your image to the part of the html code that displays the normal message of a link.

Code:: <a href="URL"><img src="URL OF IMAGE HERE"</a>

**Marc** · by **Marc** on Tue Nov 03, 2009 9:11 pm

Marquee

You can make your text scroll on your html page by using this code :

Code:: <font color="#000000"> <marquee bgcolor="#ffffff" direction="right" loop="20" width="50%"> Hello , This is my text</marquee> </font>

To scroll left or up, change the direction="right" to direction="left" or direction="up" .
To change the background color, change bgcolor="#ffffff" to a color you would like. [ bgcolor="#??????" ]
To change the color of your font, change font color="#000000" to a color you would like. [ font color="#??????" ]
To change the width, replace the percentage. [ width="??%" ]

**Marc** · by **Marc** on Tue Nov 03, 2009 9:13 pm

Meta Tags

Meta Tags are keywords that you can use to define the content of your website. Search engines use these keywords to know what your website is about.

Site Description :

Code:: <meta name="description" content="Your Description Here" />

Keywords of your website :

Code:: <meta name="keywords" content="Your keywords here" />

Website Author :

Code:: <meta name="author" content="Your author's name here" />

Copyright :

Code:: <meta name="copyright" content="Your copyright text here" />

It is important that you add these codes between your head tags on your html page.

**Marc** · by **Marc** on Tue Nov 03, 2009 9:14 pm

HTML Order List

This html code is used to organise a list.

Code:: <ul> <li>Hello Friend</li> <li>Hello John</li> </ul>

This html code just like the one above, but it uses numbers instead.

Code:: <ol> <li>Hello Friend</li> <li>Hello John</li> </ol>