Cheat Sheet Tags, Codes, Images and Pictures for Articles

General

DO NOT MAKE LIVE

Style Sheet Tags

Ted Gallardo

h1 tag style

h2 tag style

h3 tag style

h4 tag style

h5 tag style
h6 tag style

hr / tag

Code
  1. List Star
Ordered List: open list tag 
ol
 open tag 
li
 List Star  close tag 
/li
 close list tag 
/ol

  • List Bullet

Unordered List: open list tag 
ul
 open tag 
li
 List Bullet close tag 
/li
 close list tag 
/ul

Do Not Use Bold tags b – Use Emphasis tags em instead.

When using href linking always include title and alt tags.

To underline something use the u tag.

To use italics use the i tag.

Path /images/star_full.gif

Path /images/star_half.gif

Path /images/star.gif

Path /images/star-one.gif

Path /images/speechbubble.gif

Path /images/editorial/0stars.gif

Path /images/editorial/_5star.gif

Path /images/editorial/1star.gif

Path /images/editorial/1_5stars.gif

Path /images/editorial/2stars.gif

Path /images/editorial/2_5stars.gif

Path /images/editorial/3stars.gif

Path /images/editorial/3_5stars.gif

Path /images/editorial/4stars.gif

Path /images/editorial/4_5stars.gif

Path /images/editorial/5stars.gif

Path /images/featured.gif

Path /images/new.gif

Path /images/question.gif

Path /images/query.gif

Path /images/rocket.gif

Path /images/ram.gif

Path /images/feat_spyware.gif

Path /images/advice.gif

Path /images/feeds/feed-icon-28×28.png

Path /images/arch_articles_topicon.png

Path /images/audio_howto_topicon.png

Path /images/backup_topicon.png

Path /images/blogging_topicon.png

Path /images/buy_guide_topicon.png

Path /images/cbctv_topicon.png

Path /images/comp_basics_topicon.png

Path /images/comp_cleanup_topicon.png

Path /images/comp_connectors_topicon.png

Path /images/comp_security_topicon.png

Path /images/comp_upgrade_topicon.png

Path /images/cp24_logo_topicon.png

Path /images/ctv_topicon.png

Path /images/cyber_radio_topicon.png

Path /images/dig_photo_topicon.png

Path /images/faq_defrag_topicon.png

Path /images/faq_email_topicon.png

Path /images/fix_comp_topicon.png

Path /images/gadgets_topicon.png

Path /images/hard_issues_topicon.png

Path /images/hdtv_topicon.png

Path /images/howto_privacy_topicon.png

Path /images/internet_topicon.png

Path /images/labrats_topicon.png

Path /images/memory_topicon.png

Path /images/network_topicon.png

Path /images/newsletters_topicon.png

Path /images/opinion_topicon.png

Path /images/remote_acc_topicon.png

Path /images/rogers_topicon.png

Path /images/software_rev_topicon.png

Path /images/stop_spam_topicon.png

Path /images/tips_tricks_topicon.png

Path /images/andy_tv_topicon.png

Path /images/using_software_topicon.png

Path /images/vista_ref_reinst_topicon.png

Path /images/vista_topicon.png

Path /images/win_all_ref_reinst_topicon.png

Your Title

Addition text, links, etc. goes here.

nbsp;

nbsp;

Pictures/Images

Mike Britton

Please do not use the “upload image” tool any longer. Please email and ask that he upload the image and he will then reply to you as to it’s location.

This section will explain the process of producing thumbnail images for the “Feature of the Day” section along with any other image sizing needs.

1)

Locate and download a copy of the full-size image from the server, by completing the following sub-steps:

    a) Right-click the image

    b) Select “Save Image As”

    c) Save to your desktop

[For example: http://cyberwalker.com/images/editorial/oakley.jpg]

2)

To resize a image properly with distorting the image quality, you will need one of these tools:

    a) Irfanview: http://software.cyberwalker.com/item.php?i=115

    b) ImageResizer [WinXP Only]: http://tinyurl.com/2yt2

After downloading either of these applications, proceed with installation.

3)

Using your chosen application, open your current image and resize to a specific size. For standardizing the image sizes, for a image with more of a landscape size use 100×50. For a image more vertical use, 50×100. And finally for a square image use 100×100.

4)

After the thumbnail has been created rename it, by using this format “original_small.jpg”. Using the Oakley sunglasses as my example: the original image is titled “oakley.jpg” and the thumbnail is titled “oakley_small.jpg”.

5)

When embedding the images into the article, use one of the following combinations of coding:

    a) Use this code when you wish to insert a image with a HTML document.

    <img src="title.jpg" title="title" alt="title">

    b)Use this code when you wish to insert a image inside a HTML document. The image will be aligned to the “right” margin.

    <img src="title.jpg" style="float: right; margin-left: 10px, margin-bottom: 10px;">

    c)Use this code when you wish to insert a image inside a HTML document. The image will be aligned to the “left” margin.

    <img src="title.jpg" style="float: left; margin-right: 10px, margin-bottom: 10px;">

    d)Use this code when you wish to insert a image inside a HTML document. The image will be aligned to the “top” of the page.

    <img src="title.jpg" title="title" alt="title" align="top">

    e)Use this code when you wish to insert a image inside a HTML document. The image will be aligned to the “bottom” of the page.

    <img src="title.jpg" title="title" alt="title" align="bottom">

    f)Use this code when you wish to insert a image inside a HTML document. The image will be aligned “center” on the page. The “center” can be combined with “top” and “bottom” by insert the chosen word. For example: “top-center” or “bottom-center”.

    <img src="title.jpg" title="title" alt="title" align="center">

    g)Use this code when you wish to insert a image inside a HTML document. The image will be aligned according to the “position” tag chosen and will also link to the “link location”. It will be a clickable image. The “link location” does not have to be a page. It can be a larger image of the thumbnail too.

    <a href="link location"><img src="title.jpg" title="title" alt="title" align="position">

You can add space between by using the hspace and vspace, which will provide extra spacing around the image. Vspace is the extra spacing on the top and bottom of the image. While hspace is the extra spacing on the left and right sides.

Additionally, if you want to add a title or description to appear when you hover over the image, using the “title” and “alt” tags. This can be accomplished by placing this tags within the image coding.

Some key points to understand, don’t ever use HTML coding to resize a image. By doing this it has a tendency to distort the image. This is purpose of doing a little extra work to create a thumbnail, is to prevent this.

For reference the images I used as references above as located at these links:

Oakley

http://cyberwalker.com/images/editorial/oakley.jpg

Oakley

http://cyberwalker.com/images/editorial/oakley_small.jpg