EPICH HOW TO: HTML Basic Commands

HTML Basic Commands

Only very basic commands are listed here. If correctly entered, none of these codes will show on the page. If you do see that looks like HTML, it means something is not correct with the coding missing a < or, > or, a </> or, and extra space where it shouldnt be, or something else.

Text tags
Paragraph or Hard Return

<p>

Starts a new paragraph with a blank line followed by a new line for text. Created automatically appear when you use the Enter key. or <br /> Starts a new line without a blank line in between. Create this automatically by pressing SHIFT-Enter. Bold any text between the tags. Italic any text between the tags. The width="50%" (any percent is acceptable) draws a line of that percentage of the screen width. The attribute align= can be used to move the line to left, center, or right.

Soft Return or line break Bold Text Italicize text Draw a Horizontal line

<br>

<b>text </b> <i> text </i> <hr> <hr align="center" color="#000000" width="50%">

<hr color="#213C80" SIZE="2">

Blockquote

<blockquote>Lots of text. A paragraph that needs is indented on both sides.</blockquote> Looks like: Lots of text. A paragraph that is indented on both sides.

Indents a paragraph of text on both sides similar to an indented quote in a research paper.

Insert an Image
<img src="filename.jpg"> Insert an image file (.jpg or .gif). Not for .pdf or .doc.

Links
Text Links <a href="http://www.xxxxxx"> Text </a> <a href="../xxxx.html"> Text </a> Creates a link to the listed page outside of the web site. Creates a link to a page within the web site one folder up from where the current page is located.

Image Link

<a href="http://www.xxxxxxx"> <img src="nameoffile.jpg"> </a> <a href=file.pdf >Text </a>

Creates a link from an image instead of text, for a clickable image. Creates a link to a PDF or Word doc.

PDF/ Document Link

8/2006

EPICH HOW TO: HTML Basic Commands

Anchor or Name tags

Anchor or Name tags <a href=#Subject>&nbsp; </a> You can use these to link between spots on the same page or to a specific spot on a different web page. If you put <a name=Top></a> at the top of the page, at various points within the page you can add <a href=#Top>Top of Page</a>, which will link the user to the top of the page. Likewise, if you put the <a name=Heading></a> on the line above the selected Heading, and list the <a href=#Heading>Heading</a> at the top of the page, clicking on the link will move the reader to the Heading further down the page.

<a name=Subject>Subject header</a>

Email or mailto:
<a href=mailto:cwiebe@umn.edu>cwiebe@umn.edu</a> To insert an e-mail address manually, use the code to the left. This code will open an e-mail window when the user click on what ever it surrounds. Usually, the e-mail address is used for the text, but you can also use regular text, or even a graphic.

Lists
Unordered lists <ul> <li>Text</li> <li>Text</li> <li>Text</li> </ul> <ol> <li>Text</li> <li>Text</li> </ol> Looks like: Text Text Text The <ul> </ul> tags mean this is an UNORDERED list. Each item in the list begins with <li> and ends with </li>. Each item appears as a bullet point.

Ordered lists

Looks like: 1. Text 2. Text 3. Text

The <ol></ol> tags mean this is an ORDERED list. Each individual item on the list begins with <li> and ends with </li>. Each item appears as a numbered point on a separate line.

<ol> <li value=10> Text</li> <li>Text</li> <li>Text</li> </ol>

Looks like: 10. Text 11. Text 12. Text

If you want a numbered list to start with a number other than 1, enter : value=x in the beginning <li> tag.

Background colors in tables Alternating by row

<table> <tr> <td>Section 1 text</td> </tr> <tr bgcolor="#CED7F0"> <td>Section 2 text</td> </tr> <tr> <td>Section 3 text</td> </tr> </table> Looks like: Section 1 text Section 2 text Section 3 text
2

A table begins and ends with : <table></table> The <tr> </tr> tags represent the ROWS in the table. The <td></td> tags represent the CELLS in the table. There can be more than one cell in a row. Best Practice: Create the table with DreamWeaver commands and add the background color later.

8/2006