Thursday, September 4, 2008

Tutorial -- Basic Link, Graphic, and List Insertion (html)

Inserting Links or Graphics in Articles

If the need arises to insert a graphic or link into an article; or use any type of specific formatting features such as a numbered or bulleted list, they must be implemented in HTML. This is best shown by example. For Links, Images, and Lists; first I will show the code, then demonstrate each.

Link Example:


The above directly inserted would create the following link:

...text...text which operates as a link...more text...

The destination URL needs to be between the " " marks after href=. The link must be closed, as well, or the rest of the document might link to the defined URL

Image Example:


The above directly inserted would show the following graphic:

Hydrogen Road Tour '08

The image has been scaled from whatever the standard width is to 150px(150 pixels, dots on the screen). If width isn't specified, the default image size is used. This could be larger than the available display area and would cause formatting issues. Height can be specified using the same code. This can be used in conjunction with width to skew a graphic's intended display ratio if necessary. Normally, setting one of either the width or the height is adequate, as the browser will automatically use the image's intended display ratio to calculate the other measurement. The alt tag is not required, but good code practice says to use it an label it appropriately. It is displayed if the graphic can't be located or in some text browsers.

Images can be used as links as well. By 'wrapping' the link tags around an image like this:


The resulting image link looks like this:

Hydrogen Road Tour '08

Finally, placement amongst text can prove tedious, but result in a far more pleasing layout.
Hydrogen Road Tour '08
Text can be made to wrap around an image, and an image sometimes looks better on the right hand side of the page. This can be done using CSS. I will not explain much, as it is outside the scope of this demo. The image is assigned a style. The style can specify whether the images is on the right or left hand side of the page

Using the following code, I placed an image on the right hand side of the page towards the top of the last paragraph. Likewise, left would have put it on the left hand side of the text. Subsequent text wraps around the image using this method


Using style="float:left/right;" is just one way to accomplish image positioning, but it is effective and works well with text wrapping. This is a good place to look for further knowledge about CSS Positioning

Lists Example:

There is often need for bulleted or numbered lists. These can serve many helpful purposes which I will not limit here. A list is created in a similar manner to links or images, but has more parts. Like a link, a list starts with an opening tag and a closing tag. Further, each 'bullet' or number will also have it's own opening and closing tag inside of the list's tags.

View this simple example:

Which would produce the following list:

  • Category 1
  • Category 2
  • Category 3

Or the following, more complex code which uses a list nested within a list (for sub bullets or numbers):


The above code creates the following, more advanced, list:

  • category 1
  • category 2
    • cat2, subcat1
  • category 3

In each of these lists, ul can be replaced with ol for an ordered, or numbered list. Keep in mind that some 'blogs' or content management sites (myspace, facebook, etc) will treat spacing differently, so the above list code may need to be combined to form one long line of code if the spacing looks strange.