HTML Cheat Sheet



1. Images

<img src=”web address of the picture”>

e.g. <img src=”http://photos1.blogger.com/Cottage0020.jpg”>

  1. Finding an image’s web address: right-click on the picture (whether from another website or one that you’ve uploaded – like through Flickr) and then click “Properties” down at the bottom of the list. The line that says “Address (URL)” is the web address of the picture.

  2. Aligning an image with surrounding text:

align=right, align=left

e.g. <img src=”http://photos1.blogger.com/Cottage0020.jpg” align=left>

  1. Re-sizing an image: Images are measured in pixels. You can find the size of a picture by right-clicking on the picture, selecting “Properties” and looking for the “Dimensions” line. Width is listed first, then height (e.g. 400x300). You can resize the dimensions of any picture you’re displaying by putting the following commands within the image brackets: WIDTH=x HEIGHT=y

e.g. <img src=”http://photos1.blogger.com/Cottage0020.jpg” WIDTH=400 HEIGHT=300>

When resizing the most important thing is to keep the proportions the same, so, for example, to halve a 400x300 picture you’d do WIDTH=200 HEIGHT=150, or to reduce it by one quarter you’d say WIDTH=300 HEIGHT=225. Any picture can be reduced (or expanded) to any size, as long as you keep the proportions the same. Common dimensions are:

Full-size camera photo: 400x300 or 300x400, depending on the orientation

Good size pictures aligned with text: 200x150 or 150x200.

Book/DVD Thumbnails: ~50x75 (varies depending on size of the cover… usually you can find thumbnails of the right size at Amazon)

CD Thumbnails: 75x75

  1. Putting space between a picture and surrounding text: Put the following commands within the image brackets: hspace=x vspace=y

e.g. <img src=”http://photos1.blogger.com/Cottage0020.jpg” hspace=5 vspace=5>

This will create a border of blank space 5 pixels wide around the picture. The space can be as wide or as narrow as you like by adjusting the pixel number, but usually 5 pixels is sufficient.

  1. All of these commands can be used together:

e.g. <img src=”http://photos1.blogger.com/Cottage0020.jpg” align=right WIDTH=200 HEIGHT=150 hspace=5 vspace=5>



2. Links

  1. Links that open in the same window:

<a href=”website address”>text that displays as a link</a>

e.g. <a href=”http://www.theooze.com/”>TheOoze</a>

  1. Links that open in a new window:

<a href=”website address” target=”_blank”>text that displays as a link</a>

e.g. <a href=”http://www.theooze.com/” target=”_blank”>TheOoze</a>

  1. Image Links:

<a href=”website address”><img src=”web address of the picture”></a>

e.g. <a href=”http://emergingpensees.blogspot.com/”><img src=”http://photos1.blogger.com/ Farm0025.jpg”></a>






3. Text Formatting

a. Italics: <i>text</i>

b. Bold: <b>text</b>

c. Underline: <u>text</u>

d. Headings: <h1>text</h1> (Headings come in sizes 1-6. E.g. <h6>text</h6>

e. Font Size: <font size=n>text</font> where n equals a number between 1-7 with 1 being the smallest

and 7 the largest. Normal sized text is size 3.

f. Colored Text: <font color=name>text</font> where “name” is the name or number of one of the

colors supported by HTML. You can find a list with examples of these colors at http://www.mcli.dist.maricopa.edu/tut/tut16.html.


4. Lists

a. Unordered Lists: (i.e. lists that display with bullets in front of each item) Surround the entire list with

the tags <ul> and </ul> and start each line of the list with <li>. For example:

<ul>

<li> Item 1

<li> Item 2

<li> Item 3

</ul>

b. Ordered Lists: (i.e. lists that display with numbers in front of each item) Same as unordered lists except

change the <ul></ul> tags to <ol> and </ol>



5. Miscellaneous

a. Centering Text or Images: <center>text</center> OR <center><img src=”(image address)”></center>

b. Line Break: (i.e. putting text or images on a new line) <br>

c. Paragraph Break: (i.e. putting text or images two lines down) <p>



For more specifics go to: http://www.mcli.dist.maricopa.edu/tut/lessons.html