Directory
HTML cheat sheet
On this page:
For things you may want to do between the
<!-- Make changes below this line -->
and the
<!--Make changes above this line-->
lines in the template
This page is organized into roughly the order in which things appear in the template. It is long, so there is a navigation box here at the top.
First, some basic rules to ensure your page looks right
- All elements (pictures, paragraphs, links, headings, lists…) need to be opened and closed.
- Opening tags are formatted <tag modifiers>
- Closing tags are formatted </tag>
Regular text
- <p> opens a paragraph
- </p> closes a paragraph
- The <p> tag can have a few options. The ones most likely to be useful are:
- class="classname”
- align=”alignment”
- The class modifier allows you to use styles defined in the style sheet or elsewhere.
- The align modifier allows you to align the text to the left (default), right, center, or “justify” to make both the left and right edges even.
Examples:
<p class="breadcrumb"> will use the class called “breadcrumb” from the stylesheet, which happens to be small blue text for links, or normal for non-links.
<p align=”justify”> will justify the paragraph text
<p class="breadcrumb” align=”right”>would make your text align to the right side of the screen and turn links into tiny blue letters.
Links
Officially, links are actually “anchors” to a “hyperlink refrence”, i.e. on another page, so the link tag starts with “<a href=”. All anchors require modifiers.
<a href=”path/filename”> starts the link. If the path is a url for another site, it needs to be the whole url, including the http:// part. If the path is for something local, it can be a relative path, similar to what you would use to navigate from the command line. The href can also be to mailto:username@domain to create an email link (note this may increase your spam since harvesters look for this tag)
</a> ends it
Some other useful modifiers:
target=”_blank” opens the link in a new window
name=”name” will name the anchor so you can refer to it from elsewhere
Examples:
<a href=”index.php”>home</a> makes the word home into a link to the index page in the current directory (click the link to try it)
<a href=”http://www.umich.edu” target=”-blank”>UofM</a> makes UofM a link that opens the Uof M homepage in a new window (click the link to try it)
<a href="images/AngellHall.jpg"> creates a link to the file AngellHall.jpg
<a name=”star_form”> creates an anchor named “star_form”
<a href=”research.php#star_form”> takes you to the anchor named “star_form” on the “research.php” page in the current directory.
<a href=”mailto:nemo@loopback.edu”> will create an automatic email link.
Tables:
<table> opens a table
</table> closes a table
There are many modifiers for tables. The most useful are:
- border="#" specifies how many pixles to draw the border: use 0 for no border
- cellspacing="#" specifies how much space to put between the borders around the individual cells
- cellpadding="#" specified the number of pixels to put between the border and the stuff inside the cell
- class="classname" specifies a class defined in the stylesheet. "peopleinfo" is already defined as well spaced lines with a slightly smaller than standard font.
<tr> starts a row in the table
</tr> closes the row
<td>marks the start of the cell content.
</td> marks the end of the cell content
there are many modifiers for <td> The most useful are:
- valign="alignment" to align the data verticall to the top, center or bottom
- align="alignment" to align the data horizontally to the left, right center or "justify" to align both the left and right edges
- colspan="#" will make the data take up # cells in the same row
- rowspan="#" will make the data take up # rows in the same column
Especially useful for data tables
<caption> opens a caption for the table
</caption> closes it
<th> can be used in place of <td> to specify that the cell contains the heading for that column, not just another set of data. The same modifiers can be used as the <td> tag
</th> closes the header cell
Special note: some brosers will not put borders around empty cells, so if you need to leave a cell ampty, you should put the ASCII code for "space" into it: <td> </td>
Headings:
<h1> opens a first level heading
</h1> closes a first level heading
<h2> opens a second level heading
</h2> closes a second level heading
<h3> opens a third level heading…
There a 6 headings all together, with 1 being the largest.
They can all take the align modifier
Example:
<h1 align=”center”> would make a large, centered heading.
Line breaks
<br /> gives you a line break. This will start a new line withour leaving the gap that a paragraph usually displays. Most of the new lines in this document at started after a <br />. Note there is no seperate closeing tag; the tag is closed by the slash at the end instead.
Bold, Italic, underline, and horizontal lines
Bold and Italic don’t make sense to aural browsers, so their use is deprecated.
<strong> usually appears as bold text (or “shouting” in an aural browser)
</strong> closes the strong tag. Place it at the end of the text you want bolded.
<em> for emphasis usually appears as italic
</em> closes the emphasis tag
<u> will underline text. Use this with caution, since underline usually implies there is a link. </u> stops the underline.
<hr /> will give you a horizontal rule (a line going across the page)
Lists
There are 3 types of lists: ordered (aka numbered), unordered (aka bulleted) and definition.
Ordered and Unordered lists:
<ul> opens an unordered list
</ul> closes it
<li> starts an item in the list
</li> stops the item
<ol> starts an ordered list
</ol> closes it
the ordered list can have some modifiers:
- type=”type” sets what type of numbering the list will have. The options are “1” for regular numbers, “i" for lower case italics, “I” for upper case italics, “a” for lower case lettering, “A” for upper case lettering.
Start=”number” sets the number to start the list at
The <li> tag is also used for the ordered lists, and can have a couple modifiers:
type=”type” sets what type of numbering the list will have (yes, you can have a list that goes 1, 2, C)
Value=”number” changes the value of the list item.
Examples:
<ul>
<li> item 1</li>
<li> item 2</li>
<li> item 3</li>
</ul>
would look something like
- item 1
- item 2
- item 3
<ol>
<li> item 1</li>
<li> item 2</li>
<li> item 3</li>
</ol>
would look something like
- item 1
- item 2
- item 3
<ol type="A" start="2">
<li> item 1</li>
<li type="i"> item 2</li>
<li value="5"> item 3</li>
</ol>
would look something like
- item 1
- item 2
- item 3
Definition Lists
- Name:
- Shannon Murphy
- office:
- 925 Dennison
