Welcome to our basic steps to learning HTML!

Below is a simple set of directions that will walk you through the steps of learning how to properly use a template to posting pictures... 

 To Practice your Html and Preview a code then click here.

Lets get started!
 

What is HTML? HTML stands for the Hyper Text Markup Language. HTML code is the major language of the Internet's World Wide Web. Web sites and web pages are written in HTML code. With HTML code you have the ability to bring together text, pictures, sounds, and links... all in one place!


HTML Text

You can have bold and italicized, Larger and Smaller Type Text. You can even change the color of the text!

Of course, the HTML code for this looks like a bunch of gibberish...

You can have <b>bold</b> and <i>italicized</i>, <font size=+2>Larger</font> and
<font size=-2>Smaller</font>, Type Text. <font color="#FF0000">You can</font> <font color="#0000FF">even change</font>
<font color="#008080">the color </font><font color="#800080">of the text!</font></font>


So what are all these "<" and ">" things doing here? When you place a certain thing within these you are making something known as a tag. For example the <b> tag is saying to start bold text, and the </b> tag is saying to stop bold text. The tag with the slash (/) is known as the closing tag. Many opening tags require a following closing tag, but not all do. Tags make up the entire structure of an HTML document. Here are some common text commands to use just put your text in between the tags! Use the practice board listed above to try these codes out!

  • Bold <b>      </b>

  • Italic <i>        </i>

  • underline <u></u>

  • Make Text Bigger <font size=+2>   </font>

  • Make Text Smaller <font size=-2>  </font>

  • Change the Color of a Font <font Color="Put the color # here">      </font>

  • Change the style of a font <font face="put the font's name here">    </font>


Starting an HTML Document

HTML documents have two (2) parts, the head and the body. The body is the larger part of the document, as the body of a letter you would write to a friend would be. The head of the document contains the document's title and similar information, and the body contains most everything else.

Example of basic HTML document Structure...

<html>
<head><title>Title goes here</title></head>
<body>Body goes here</body>
</html>
 

Whatever falls between the TITLE tags will be the title of the document, when the page is viewed it is usually found in the title bar at the top of the screen.
[Note: You may NOT use other tags within the TITLE tags (Example: You cannot have the code read: <title><b>title goes here</b></title>.)]

Whatever you place between the BODY tags will fall into the major area of the document window, and therefore it is the largest part of your HTML document. Here are some tips to begin the body of your HTML document:

You will often use paragraphs in HTML, just as you do when you write stories. The opening tag for a paragraph is <p>, and the closing tag is </p>. This spaces out the Text in an HTML Document. To simply go to the next line with out having a space in your text you need to insert a break use the code <br> You do not need a closing tag for this command!

You also want to align your text and images with in your document.

Left Align Code: <left>Text goes here</left>

 

Center Align Code: <center>Text goes here</center>

Right Align Code: <Right>Text goes here</right>


Adding Images to your web page!

You may also add images (pictures) to your web page, as long as the image is in the .gif or .jpg (or .jpeg) file formats. You will not be able to use .bmp format files! The basic tag for in-line images in <img src="location">. The location is the url or address of the image... If you are using a hosting site they provide you with the location.  (The IMG tag has no closing tag!)

 

Example of a basic in-line image...



<img src="http:/www.CrimsonRoseDesigns.com/samplepicture.jpg">

To have your image hosted use one of the hosting sites listed below:
www.PhotoBucket.com
http://www.theimagehosting.com/


Adding Links to your web page!

To add a link... you will use the <a href="location"> opening tag and </a> closing tag. Whatever appears between these two tags will become underlined and colored, and if you click on the underlined text it will send the browser to the location within the quotes.
 

Example of a link...

Visit Crimson Rose Designs!

Visit <a href="http://www.CrimsonRoseDesigns.com/">Crimson Rose Designs</a>!

 

If you want a link to open in a new window, add target="_blank" the end of the anchor tag, e.g.

<a href="http:www.CrimsonRoseDesigns.com" target="_blank">Crimson Rose
Designs</a>!

 

Example of a link opening in a new window...

Visit Crimson Rose Designs!

 

Although Links are usually used to send people to other web pages, you may also use links to send email to a specific address by using a location of mailto:user@host.

Example of a Mailto: Link...

Send email to Crimson Rose Designs!

Send email to <a href="mailto:crimsonrosephotography@yahoo.com">Crimson Rose
Designs</a>!


 


Adding a link to your Image!

Many times you may want to have an image that is linked, so that if someone clicks the image, the person will be taken to another page. This is rather simple- you just need to place the IMG tag within the A HREF tags.
(<a href="location_of_link"><img src="location_of_image"></a>)


Example of a linked image...
 

<a href="http://www.crimsonrosedesigns.com">
<img src="CrimsonRoseButton.jpg"></a>

 

 


     
   
  • Home
     
  • Store & Free Gifts
     
  • Art Galleries
     
  • Forum (coming soon)
     
  • About CrimsonRose
     
  • Resources & Links
  •