HAGJewels

Where Looking Good Is Easy!

Home     -     Go Shop!     -     Wall of Jewels     -     Forums     -     Why Buy Used Jewelry?     -     Contact     -     Sitemap

 

E-Z HTML Tutorial

Basic Terms
NoteTab

You don't need to buy expensive website creation software tools. You can do this on your own for FREE! You may use the free software on most Windows computers called Note Pad or Word Pad. Personally, my absolutely most favorite hand coding tool is a free download of the light version of NoteTab. Click here to download the free version of NoteTab now.

Buy a Domain Name and Host it.

You can pick out your website name and get a very reasonably priced web host at LunarPages. Current price is about $5/month to buy a Domain Name and host it for a basic unlimited bandwidth site. Find out more here at LunarPages. We've used them for dozens of sites for years. They have fantastic customer support, a great price and are very reliable.

Basic Terminology

HTML=Hyper Text Markup Language

http=Hyper Text Transfer Protocol

URL=Uniform Resource Locator (that's the address line of your browser)

Nesting=When you open most html tags you must close them. Nesting refers to the need to do that in a certain order. The first one open is the last one closed, example:

<Font color=red size=5><B><I>Get it?</i></b></font>

I like to use a capital letter for the beginning tag and lower case to close. It's not necessary but helps me to debug if I miss something and have to go back later to find the Gremlins.

If you read through and try these codes and it just doesn't work or make sense, feel free to send me an email and get more help Helen@HagJewels.com!

Basic HTML Page Structure Formatting
<html>
<head>
<title> Put your title here (it will show up on the top of the browser window)</title>
<body>
Type the text and insert the image tags that are your page here.
</body>
</html>

Basic HTML Text Formatting

Bold <B>bold text</b>
Italics <I>italic text</i>
Underlined <U>underlined text</u> (careful here - most ppl relate underlined text to a hyper-link)
Monospaced <IT>looks like typewriter</it>
Preformatted <PRE>
 spaced  exactly how  you   t y p e it 
</PRE>


These fonts are recognized by most browsers:
"arial", "courier new", "new times roman", "OCR A Extended" <big>Slightly bigger than the rest

Simple Tags for paragraphs and such Numbered Lists Bulleted lists Definition list
new paragraph <p>

ending </p>


Horizontal rule (a line) <HR>
ending </hr>
Line break, <BR>
or a "return" with no space between lines
Headings
<H1></h1>

biggest-smallest
<H6></h6>
    <OL>
    <LI>
    <LI>
  1. first item
  2. second item
    so on.....
    </OL>

    <UL>
    <LI>
    <LI>
  • first item
  • second item
    so on... </ul>

<DL> first term
<DT> definition
<DL> second term
<DT> definition so on..
</DL>
Text Link Tags - Button and Image Link Tags
Linked page <a href="URL">Name of link text</a>
Linked page that opens in a new window <a href="URL" Target="Blank">Name of link text</a>
Linked page with an image instead of text to click:
<a href="URL"><img src="http://www.url.com/picture.jpg"> </a>
E-mail <a href=mailto:"Youremailaddy">Contact me at this email</a>
E-mail <a href=mailto:"Youremailaddy"<img src="http://www.url.com/picture.jpg"> </a>

Url button links

target="_blank" = tells the browser to open the link in a new window:
<a href="URL" target="_blank"> <img scr="picture.jpg" width="#" height"#" alt="picture.jpg"(#bytes)"> </A>
Border="0": it takes out the color border around the button when it is a link
<a href="URL"><img scr="picture.jpg" width="#" height"#" alt="picture.jpg"(#bytes)" border="0"></A>
the border="0" is also good to use around pictures for any kind of link, to remove the border colors.

Basic Tables
<html>
<head>
<title>Table page two rows w/caption</title>
</head>
<body>
<table border="1" width="50%">
<caption alighn="top">Hello!</caption>
<tr><td width="50%"> Left TD Cell is 50% </td>
<td width="50%">Right TD Cell is 50%</td>
</tr>
</table>
</body>
</html>
</td>
</tr>
</table>


This is what the html above looks like:

table page two rows w/caption
Hello!
Left TD Cell is 50% Right TD Cell is 50%


Table Talk
One row = "100%" so when you are breaking a row into columns remember that and you will have to figure the widths for each column to equal up to 100%. For instance, one big column 75% and a small 25%. So if you want 3 columns you would add another <td width="#%"></td> and make sure it all equals 100%. 33% 33% and 34% to make 3 equal columns (ok, so one is 1% larger but can you really tell? lol)

Here are some attributes and meanings to what goes into the table heading:

Example:
<table border="0" width="50%" cellspacing="0" cellpadding="0" alighn="left" height="#" font color="#C0C0C0" bgcolor="#000000" background="picture.jpg">your stuff here</table>

Border: this = viewable border so "0" as in the example is a invisible border you will not see anything.

Cellpadding: is like the margin inside the cells of the table so like this box "cell" ="0" there in no margin.

Width: now the width think of this as the percentage of the viewable window so ="50%" means it would be 50% of the actual screen width

Cellspacing: is the space between cells the higher the number the more space between the cells

Font face: = the particular font you wish to use for the whole table..also can be changed per "cell"

Font color: is the color of the font inside the table..this of course can be changed per "cell" too..that will come in a bit

Alighn: alighn = what side of page it will be on there is "left""center""right"

Background: this is a picture that you can use instead of bgcolor it can be a .jpg or a .gif...

Height: height = exactly that the height of the table now this is a number not a percentage and you do not have to have it in the <table> listing at all

Bgcolor: = the background color of the table, all the cells in the table and this too can be changed per cell

Cell Talk
Now here are the attributes per "cell":

Example:
<td width="101%" colspan="4" height="1" bgcolor="#C0C0C0"><font color="#000000"><font face="name of font">your stuff here</td>

Now this is the exact stuff for this actual "cell" don't ask how the width is 101% it just is lol

Colspan: = number of columns it is set at 4 right now because way up towards the top I have one row that has 4 columns so all My blank rows say 4 columns now if you have one row split in half it will be 2, etc

Height: is also set per "cell" can be a # or a percent this one is 57% percent of the cell to the left's size but that was before I typed anything it seems to stay once it is set

Bgcolor: same as the table talk font color: = same as table talk

Background: same as table talk font face: = same as table talk Colors

Colors

These colors are recognized by most browsers by name:
silver, white, gray, maroon, red, green, lime, navy, blue, purple, magenta, olive, yellow, teal, cyan

For the other colors, you use a #6digits/letters combination. The #/letters are hexidecimal codes representing rrggbb rr=red gg=green bb=blue

Font color="#6digits/letters"

Color of font bgcolor="#6digits/letters"

Color of background text="#6digits/letters"

 
 

Images
Basic image <img src="filename">

Image aligned w/top of text <img src="filename" align="top">

Image aligned w/bottom of text <img src="filename" align="Bottom">

Image aligned w/Middle of text <img src="filename" align="Middle">

Image w/URL <a href="URL"><img src="picture.jpg" width="#" height"#"></A>

Image aligned w/alternative text <img src="filename" alt="text"> (yes some ppl have text only browsers..go figure lol)

Frames
This is a nestled hierarchy. A sample page layout: the main.html would consist of main, firstpage, top, and side.html's. This is how there are separate areas for navigation buttons, etc.

<html>
<head> // how it looks all together---->
<title>main</title>
</head>
<frameset framespacing="0" border="false" frameborder="0" cols="53,247">
<frame name="left" scrolling="auto" noresize target="rtop" src="side.html" marginwidth="0" marginheight="10">
<frameset rows="18%,81%">
<frame name="rtop" target="rbottom" src="top.html" scrolling="no" marginwidth="0" marginheight="0">
<frame name="rbottom" src="firstpage.html" scrolling="auto">
</frameset>
<noframes>
<body>
<P>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>

This would be firstpage.html and the main area where all other pages are brought Up// this area is called "rbottom". This is how it would look all together:

Leftside attributes:
<frameset framespacing="0" border="false" frameborder="0" cols="53,247">
<frame name="left" scrolling="auto" noresize target="rtop" src="side.html" marginwidth="0" marginheight="10">
<frameset cols="53,247"> This is saying the left side area is 53 pixels wide and the 247 is like a generality of keeping it aligned right, depending on the browser. It adds to 300... just mess with the numbers till your left frame is where you want it.

Commands:
<frameset framespacing="0" border="false" frameborder="0" cols="53,247*gt;Frame Names</frames> <frame name="left" scrolling="auto" noresize target="rtop" src="side.html" marginwidth="0" marginheight="10">

left is the name the computer is programmed to recognize as the left side/scrolling= make it auto all the time the browser can tell if it needs it or not

noresize target="rtop" heck if I know what that means possibly that the bar would not mess with the top.html //anyone know?// src="side.html" that just tells the comp what html page to put in that frame marginwidth is the margin on the right and left of frame or inside the frame the marginheight on the top and bottom

<frameset cols="53,247"> Starts it all off this tells the browser this page is a frames set

</frames> This tells the browser this is the end of the frames set

This is the part the ppl with browsers that cannot read frames see <noframes>
<body>
<P>This page uses frames, but your browser doesn't support them.</p>
</body> </noframes> </frameset>

Rightside attributes:
<framesetrows="18%,81%"> <frame name="rtop" target="rbottom" src="top.html" scrolling="no" marginwidth="0" marginheight="0"><frame name="rbottom"src="firstpage.html"scrolling="auto">
<frameset rows="18%,81%"> This tells the browser how much space the top frame takes of the height of the browser window it adds up to 100% on the left side I use it as a navigation side or buttons/links

use the target command as below only use target="rbottom" to make the pages open in the main area.

SEO
Search Engine Optimization
Now that I have a site, how do I let people know? Here are a few things you can use:

This will let people share your site on social networks, it tracks source clicks, and is FREE.

Add This


You should upload your items on Google base to get in the "Shopping" or product searches. Also FREE.

Google Base


Sign up for Google Analytics to track traffic sources. A FREE.

Google Analytics


Sell a few in a shop on Etsy, its a site that you can list for TONS less than on ebay and will give you exposure. Etsy also has an option to automatically upload your items to google base where ebay can't because ebay and google don't like each other! Listings only cost 20 cents for FOUR MONTHS instead of several dollars for a week on ebay. Etsy is a community of sellers that sell only Handmade or Vintage items.

Etsy


Optimize your site with HTML code that will help Search Engine Bots find your site.

SEO Basic Tips


Use Project Wonderful advertising for pennies a day, as well as host a few ads on your site to bring you some extra cash.

Project Wonderful