|
HTML Examples You Can Use
[ text | fonts | images | links | pix link | jump link ]
With the advent of Dynamic HTML (DHTML) syntax there are new ways to do many of the old things we've used for years in HTML. In most cases the old ways will still work as all browsers in use today are fully backward compatible. However, as new versions of these browsers are rolled out they will become more and more tied to the new process and will require the new way of coding HTML in order to show your pages correctly.
One important thing for the new way of doing HTML is that it will become case sensitive -- that is, all HTML will need to be in lower case (small) letters.
The new way uses Cascading Style Sheets (CSS) and the appropriate way to use this for listings, me pages and other HTML on eBay is to use style attributes. You can put style attributes in almost any tag set that encloses the section of your page content that you want to affect. When no suitable tag set is available, the <span>...</span> tag set may be used. I will use it in most of the examples below.
In the examples below I will show both the old way and the new way. You can choose which you wish to use.
Click Here For The Wizard's Complete East-To-Learn Template Design Course
back to top
Simple Text Mark-up
the old way
<b>bold</b> <u>underline</u> <i>italics</i> <s>strike through</s>
combined:
<b><u>bold and underlined</b></u>
the new way
<span style="font-weight: bold">bold</span>
<span style="text-decoration: underline">underline</span>
<span style="font-style: italic">italics</span>
<span style="text-decoration: line-through">strike through</span>
combined:
<span style="font-weight: bold; text-decoration: underline">bold and underlined</span>
back to top
Font Choices, Sizes and Colors
the old way
<font face="arial">arial</font> <font face="comic sans ms">comic sans ms</font>
<font size="4">font size 4</font> <font size="-1">one size smaller</font>
<font color="red">this is red</font> <font color="#0000ff">this is blue</font>
combined
<font color="red" size="4"><b>this red, size 4, and bold!</b></font>
the new way
<span style="font-family: arial">arial</span>
<span style="font-size: 10pt">size 10 point</span>
<span style="color: red">this is red</span>
<span style="color: #0000ff">this is blue</span>
combined
<span style="font-family: arial; font-weight: bold; font-size: 10pt; color: #0000ff">this arial, bold, size 10 point and blue</span>
Where the old way only had seven font sizes, the new way, using point sizes instead of just size numbers, allows for much more control over, and range of, font sizes:
<span style="font-size: 100pt; color: #0000ff">big</span>
back to top
Images
old way/new way
single picture
<img src="http://www.ourhutch.net/examples/graphics/clipboard.gif">
two pictures side by side
<img src="http://www.ourhutch.net/examples/graphics/clipboard.gif"><img src="http://www.ourhutch.net/examples/graphics/clipboard.gif">
four pictures in two rows
<img src="http://www.ourhutch.net/examples/graphics/clipboard.gif"><img src="http://www.ourhutch.net/examples/graphics/clipboard.gif">
<img src="http://www.ourhutch.net/examples/graphics/clipboard.gif"><img src="http://www.ourhutch.net/examples/graphics/clipboard.gif">
note: you must watch that your pictures are not too wide for the space where you want them to fit or they will push your page out of shape or not line up properly. A maximum width of 500 pixels for a single picture and 250 pixels for each of two pictures side by side is about right on a full page.
The above exmples only show the SouRCe (src) attribute but your IMaGe (img) tags should also have height, width, border and alt attributes at a minimum.
back to top
Links
old way/new way
<a href="http://www.ourhutch.net/examples/">click here</a>
change color
the old way
<a href="http://www.ourhutch.net/examples/"><font color="blue">click here</font></a>
the new way
<a href="http://www.ourhutch.net/examples/" style="color: blue">click here</a>
back to top
Picture Links
old way/new way
<a href="http://www.ourhutch.net/examples/"><img src="http://www.ourhutch.net/examples/graphics/clipboard.gif" width="30" height="35" border="0" alt="clipboard"></a>
Setting the border attribute to zero (0) suppresses the colored line around the image when it is used as a link. Width and height attributes should be present and give the actual dimensions of the image. They should not be used to resize on the fly. An ALternate Text (alt) attribute is also required.
back to top
Links That Let You Jump
old way/new way
Sometimes you want to jump to another spot somewhere down in a page. This is done with a special two part link. There is the part that provides the link you click on. It looks almost like the normal anchor link but has one extra thing:
<a href="#jumphere"></a>
Notice the number sign (#) in front of the word jumphere. The number sign is important and is what designates this as a link that will jump to a target link somewhere in the page. The word jumphere is the target identifier and can be any single word (any group of letters and/or numbers) but must match the name word in the target anchor. The target anchor will look like this:
<a name="jumphere"></a>
Notice it is also an anchor (a) tag, but it has no href attribute. Its only attribute is name and the attribute parameter, jumphere in this case, matches the target identifier from the link which points to the spot indicated by the target anchor. The number sign is not used with the target name in this tag.
To use this, just as I have done in the menu at the top of this page, you use the link like this:
<a href="#jumphere">click to jump</a>
and then place the anchor just above the spot to which you wish to jump.
If your page is quite long with several jump anchors, like this page, then it is probably a good idea to put back to top or back to menu links at the end of each section as I have done on this page. This simply requires the link code at the end of each section and the appropriate target anchor at the top of the page. In this case I used:
<a name="topofpage"></a>
as the target anchor, and:
<a href="#topofpage">back to top</a>
as the link.
back to top
It's always the right time to use good code!
[ back | top ]
|
