HTML reference

...(this is not a complete reference of all html, as that is beyond this introduction, but it should prove useful as it contains most commonly used aspects of html)...

tag
function
outcome (example)

<body> </body>

use to define your html body, but also add the attributes for background color or background images.

<body bgcolor="#FFFFFF"></body> will give a white background

<body background="images/green.jpeg"> will repeat the image specified until the screen is filled.

mailto: URL

this is how you make your clickable "email to us " links. Instead of a normal url for the link, type mailto: dingbat@ucsd.edu

for example:

 

email me

<a href="mailto:dingbat@ucsd.edu">email me</a>

Grouping: Methods of formatting paragraphs and lines

<br>

linebreak (carriage return and line feed)

this is a line
break

and this is the code:

this is a line <br>
break

<hr>

draws a horizontal rule, which you can define the width and alignment of.

<hr size=12 width="50%">

this bar will be 50% of the width of whatever window it is in (here it is 50% of the width of this table element). You can also choose to optionally specify the size, as we did here, but it is not necessary. Finally, you can specify its alignment as left, which is default, center, or right. If you want, you can specify an absolute width by saying something like width=100, with no quotes, and that will make a horizontal rule of 100 pixels width no matter what.

<p> </p>

defines a paragraph.

(if you don't, everything will remain wrapped from one line of text!)

for example, I will write a small paragraph, and then the paragraph will need to be separated, which we will see in a minute as to how it looks...

this is the new paragraph. no, it's not a totally equivalent paragraph to the real thing in writing formally, but it gives the closest thing.

and here's the code:

<p>for example, I will write a small paragraph, and then the paragraph
will need to be separated, which we will see in a minute as to how it
looks...</p>
<p>this is the new paragraph. no, it's not a totally equivalent paragraph
to the real thing in writing formally, but it gives the closest thing.
</p>

Text formatting: The essentials

<h1> </h1>

heading levels 1-6, six being the least large and bold, and one the most.

heading 1

heading 2

heading 3

heading 4

heading 5
heading 6

and the following is the code:

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>

<u> </u>

underlined text

This text is underlined!!!

and here's the code to do it:

<u>This text is underlined!!!</u>

<b> </b>

boldface

this is bold text

and here's the code: <b>this is bold text</b>

<i> </i>

italic of what is between the tags

this is italic text

and here's the code:

<i>this is italic text</i>

<strike></strike>

strike through what is between the tags

this text has been struck through

and here's the code:

<strike>this text has been struck through</strike>

<sup></sup>

superscript (puts it above the standard text, when used in combination with the tag <small> </small>, it makes a great footnote or exponent)

X2

and the code:

X<sup><small>2</small></sup>

<sub></sub>

subscript

Xo

<div></div>

an organizational tool, a way of dividing the document and also of formatting sections, add effects like <div align="left"> </div>

<div align = "right"></div>

<div align = "center"></div>

this is text aligned to the left,

this is text aligned to the right

this is centered text

and the code:

<div align="left">this is text aligned to the left,</div>

<div align="right">this is text aligned to the right</div>

<div align="center">this is centered text</div>

<font> </font>

text font, font size, color

this is an example of a font that is green, size +2, and Times font.

and here's the code:

<font size="+2" face="Times" color="#00FF00" >this is an example
of a font that isgreen, size +2, and Times font.</font>

<ul>

<li> </li>

</ul>

unordered list, often bulleted as displayed

(the start and end of the list are bounded by the <ul> and </ul> tag, and each item is bounded by <li> and </li> tag)

this is an example of an unordered list

  • item 1
  • item 2
  • item 3

And here's the code:

<ul>
<li> item 1</li>
<li> item 2</li>
<li> item 3</li>
</ul>

<ol>

<li> </li>

</ol>

ordered list, works the same as unordered but has numbers

this is an example of an ordered list

  1. item a
  2. itemb
  3. itemc

and here's the code:

<ol>
<li> item a</li>
<li> itemb</li>
<li> itemc</li>
</ol>

<dl>

<dt></dt>

<dd></dd>

</dl>

definition list

(the <dt></dt> tag is used for the definition word or title, and then the text for it is done with the <dd></dd> tag)

 
Geisel, Theodor Seuss, n.
1904-1991, U.S. Humorist, illustrator, and author of children's books.

And here's the code:

<dl>
<dt>&nbsp; </dt>
<dt>Geisel, Theodor Seuss,<i> n.</i></dt>
<dd>1904-1991, U.S. Humorist, illustrator, and author of children's books.</dd>
</dl>

Images

<img>

use this tag to insert an image into an html document.

(note that it doesn't require an end tag)

attributes (things you can add inside the <img> tag)
alt
specifies alternate text to display if the image does not show up (ie if the browser is text only, like in lynx)

[links]

code:

<img src="links.jpeg" alt="[links]">

align

use this to control how text flows around your image:

(left-image to left margin, right-image to right margin, top-align to top of image, middle-align text to middle of image, bottom-align to bottom of image)

left aligned so you can see the image moves to the corresponding margin

 

and here's the code:

<img src="images/green.jpg" width="72" height="72" align="left">left aligned so you can see the image moves to
the corresponding margin

border
specifies a border around the image, similar to that of a table (border=0 gives no border, as the browser defaults to a boarder for an image with a link)

and the code:

<img src="images/green.jpg" width="72" height="72" border="3">

height
optional value for the height of the image. If you don't specify the image dimensions, the browser has to extract what they are from the image, which slows image download quite a bit. Also, you can specify an dimensions you wish, and the image will be scaled accordingly. Can also be done as a percent.

and the code:

<img src="images/green.jpg" width="72" height="72" >

hspace
pixel distance between any text wrapping around the image and the image horizontally
ismap
specifies whether the image becomes a "map" of one or more hyperlinks
(to be added)
src
the source of the image itself, where to look relative to the current document, or absolute.

and the code:

<img src="images/green.jpg">

vspace
pixel distance between any text wrapping around the image and the image vertically
width
same as height, but for the pixel width of the image. Can also be a percent.
(see height)
Image formats and some summary information (these are NOT tags)

jpeg

an image format that you can use to display photos and similar imagery.

use this format to display photos (gif only has 256 colors), as it compresses images well and shows gradients smoothly.

gif

another image format which compresses areas of the same color

use this for areas with large amounts of constant color, like this:

this obviously works well for things like bars and such shapes of constant color (or mostly constant)

Tables

<table> </table>
defines a table

attributes:

align,background,bgcolor,border,bordercolor,bordercolorlight,bordercolordark, cellpadding, cellspacing, height, hspace, nowrap, rules, valign,vspace,width

 

<tr></tr>

defines a row

(tr- has these attributes- align,background,bgcolor,border

,bordercolor,bordercolorlight,bordercolordark,valign)

for example, this is the code for the above row:

<tr>
<td width="12%">
<div align="center">&lt;table&gt; &lt;/table&gt;</div>
</td>
<td width="42%">
<div align="center">defines a table</div>
</td>
<td width="46%">
<div align="center">
<p>attributes:</p>
<p>align,background,bgcolor,border,bordercolor,bordercolorlight,bordercolordark,
cellpadding, cellspacing, height, hspace, nowrap, rules, valign,vspace,width</p>
<p>&nbsp;</p>
</div>
</td>
</tr>

<th></th> <td></td>

defines a header for that row, and data inside, respectively, must go inside the <tr> tag

(td and th- have these attributes- align,background,bgcolor,border,bordercolor,bordercolorlight,bordercolordark,

valign,width,rowspan,nowrap,colspan)

Frames

<frameset> </frameset>

define a frameset. This has several attributes:

(border,bordercolor,cols,frameborder,

framespacing,onblur,onfocus,onload,onunload,rows)

NOTE: USE FRAMESET IN PLACE OF <BODY> tags