Microsoft Office LIVE Small Business
gives you everything you need to make a website and build your business online.

FREE!!

That's right!!

Everything is
FREE
the First Year.

Get all the tools to build, grow, and manage your website and business online from Microsoft® Office Live Small Business.


Next year, pay only $14.95/Year
for your domain name and email.

Everything else is still free!!.

Make Your Own Website

More HTML Code

Want to add more character to your web pages? I've added some code and examples for different things you can try.

Adding Lists
Adding Images
Spicing Up Header Tags

Lists

There are 3 kinds of lists that you can use on your web pages. The code and examples are given for each.

Unordered Lists

Ordered Lists

Definition Lists

Note: We didn't use closing tags for the li, dt and dd tags. For W3C CSS and XHTML compliance they should be added

Adding Images

The tag for placing an image or picture on your web page is actually an anchor tag. It does not use a close tag. In its basic form it looks like:

<img src="imagefolder/imagename">

src tells the browser where to find the image and the name of the image. Thus: imagefolder/imagename

To make your website more manageable keep your images in a separate folder within the folder where you keep your pages. If your folder was named images and your image was named mypic.gif the src code would look like: src="images/mypic.gif"

Add border="0" as an attribute to the tag to suppress the default blue border that will appear around your image if you don't. If you want borders around your images use conventional inline CSS style code to add them.

You should always add width and height attributes to your image code. If you don't know the size of the image, place the code on your web page and open it in a browser. Right click on the image and click properties. This will give you its dimensions.

Most WYSIWYG and conventional HTML editors will add the image dimensions automatically to the code when an image is placed on a page.

You should also add alternate text to your images using the alt attribute. Provide a brief description of the image. Some SEO experts will tell you to stuff keywords in your alt tags, but this is no longer a wise practice.

The code so far would look like this:

<img src="images/mypic.gif" width="100" height="50" alt="A description of the pic" border="0">

When displaying pictures within paragraphs, you need to tell the browser how you want it aligned.

If you want the picture on the left and the paragraph text on the right you would use align="left"

If you wanted the picture on the right and paragraph text on the left you would use align="right"

If you had a very small picture that you wanted to appear within the paragraph text, you would use align="center"

Spicing Up Header Tags

You can create some interesting header tags using HTML and CSS. Here are some examples and code that you may want to use in your web pages.

Heading Text 1

<h1 style="font-family:arial,serif; font-style:normal; font-weight:normal; font-size:14pt; border:solid #000000 1px; color:#ff0000; background-color:#efefef; padding:2px; width:200px; display:block">Heading Text 1</h1>

I used an inline style tag here. If you wanted to use the effect all over your website you would add the code shown below to your linked CSS style sheet. Adjust colors to match your scheme.

h1 {
font-family:arial,serif;
font-style:normal;
font-weight:normal;
font-size:14pt;
border:solid #000000 1px;
color:#ff0000;
background-color:#efefef;
padding:2px;
width:200px;
display:block}

Reverse Text 2

<h1 style="font-family:arial,serif; font-style:normal; font-weight:normal; font-size:14pt; border:solid #000000 1px; color:#ffffff; background-color:#ff0000; padding:2px; width:200px; display:block">Reverse Text 2</h1>

Like reversed text? I used an inline style tag here. If you wanted to use the effect all over your website you would add the code shown below to your linked CSS style sheet. Adjust colors to match your scheme.

h1 {
font-family:arial, serif;
font-style:normal;
font-weight:normal;
font-size:14pt;
border:solid #000000 1px;
color:#ffffff;
background-color:#ff0000;
padding:2px;
width:200px;
display:block}

Additional Helps