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 ListsAdding ImagesSpicing 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
CodeExample<ul><li>Item One<li>Item Two<li>Item Three</ul>Item One
Item Two
Item Three
Ordered Lists
CodeExample<ol><li>Item One<li>Item Two<li>Item Three</ol>Item One
Item Two
Item Three
Definition Lists
CodeExample<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>
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 LeftThis 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 RightThis 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 CenterThis 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}