Some useful HTML tags

HTML stands for "HyperText Markup Language."
Hypertext
The ability to follow links to any other part of the text, or other texts,  rather than reading sequentially like a book. This is done by clicking on links, which are typically bits of text hilighted in some way, usually blue and underlined, although authors may vary this considerably using CSS styles. (that was such a link)
Markup
The use of "tags" to describe parts of a document, and thus control how a browser will render it. We have seen some already, such as <P> for paragraph.

Links

A link is formed by surrounding some text with A-tags. Within the A tag is the HREF, the location referred to. This can be a "named anchor" on the same page, but typically it is another page, perhaps found in the same directory as the present page, or perhaps on an entirely different server (computer). Here are 3 examples, followed by the actual links.
<a href="#lists">All about Lists</a>, further down on this page

<a href="html-note-1.html">Basic form of an HTML page</a>, 
     the previous note in this series

<a href="http://www.ubishops.ca">Bishop's Web Page</a>,
     leaving my site now
It is a good idea to always give your user places to go. including back to your main page, and interesting other pages.

Images

Lin Jensen Images can be (at least) in the formats GIF, JPEG, or PNG. They are not stored as part of the html file, but separately, and simply referred to in the same way as links are. The difference is that the browswer automatically asks for the image files, and displays them at that point on the page. By default the images follow along with the text, but you can get the text to wrap around them, as my picture does, with CSS. Or, control where the text lines up with the picture with ALIGN= (top, bottom, or middle).
Example:
<img src="../jensen.jpg" style="float:right" 
      alt="Lin Jensen" title="That's me" width="100" height="124">
The src is necessary, the other fields are optional. Normally you specify the actual size of the image, in pixels. However I scaled this one down to 2/3 size, most browsers will do this for you. However, you should scale very large images to the desired size, to reduce file size and speed up loading.
alt is to be dispayed if the picture cannot be, title causes a small "hint" to pop up.

Lists

<ul>
  <li>First item</li>
  <li>Next item</li>
</ul> 
  1. Ordered list (numbered)
<ol>
 <li>First item</li>
 <li>Next item</li>
</ol> 

Others

<hr> Horizontal line (see above)
<br> Line break - useful for poems
<pre> preformatted text inside </pre> Used for the code examples above (but note that the box and shading are the result of some CSS style)
--  Logical styles: (useful for blind people)
<em> emphasis </em> - usually rendered as italics
<strong> strong emphasis </strong> - usually rendered as bold
<code> program code </code> - usually rendered as monospace
-- physical styles: How you want it to look
<i> italics </i>
<b> bold </b>
Now refer to the quick reference (in coursepack)
or
see Tables
Back to Contents
Home page of Lin Jensen