Get Reliable web hosting from Yahoo! Web Hosting - 35% off for a limited time!

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

Code Example
<ul>
<li>Item One
<li>Item Two
<li>Item Three
</ul>
  • Item One
  • Item Two
  • Item Three

Ordered Lists

Code Example
<ol>
<li>Item One
<li>Item Two
<li>Item Three
</ol>
  1. Item One
  2. Item Two
  3. Item Three

Definition Lists

Code Example
<dl>
<dt>A Term to Define
<dd>The Definition of the Term
<dt>A Term to Define
<dd>The Definition of the Term
<dt>A Term to Define
<dd>The Definition of the Term
</dl>
A Term to Define
The Definition of the Term
A Term to Define
The Definition of the Term
A Term to Define
The Definition of the Term

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"

Aligned Left

This is Charlie. He is one of my five doggie people. He is 10 years old. Charlie likes ice cream in the morning with his arthritis medicine.


<p><img src="images/charlie.gif" width="123" height="108" align="left" alt="this is Charlie" border="0">This is Charlie. He is one of my five doggie people. He is 10 years old. Charlie likes ice cream in the morning with his arthritis medicine.</p>


Aligned Right

This is Charlie. He is one of my five doggie people. He is 10 years old. Charlie likes ice cream in the morning with his arthritis medicine.


<p><img src="images/charlie.gif" width="123" height="108" align="right" alt="this is Charlie" border="0">This is Charlie. He is one of my five doggie people. He is 10 years old. Charlie likes ice cream in the morning with his arthritis medicine.</p>


Aligned Center

This is Charlie. He is one of my five doggie people. He is 10 years old. Charlie likes ice cream in the morning with his arthritis medicine.


<p>This is Charlie. <img src="images/charlie.gif" width="30" height="26" align="center" alt="this is Charlie" border="0"> He is one of my five doggie people. He is 10 years old. Charlie likes ice cream in the morning with his arthritis medicine.</p>

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}




Home

HTML Primer

The Right Tool

Adding Content

Make Your Template

Publishing

Additional Helps

Modifying Your Template

More HTML Code

Color Schemes

Color Code Chart

Graphic Headings

Recommended Products

I Need Help


Make My Own Website is the Property of
Net Success 2000 Plus Inc
Po Box 1508
Somerset, KY 42502 USA
Copyright © 2007
Last Modified: July 5, 2007