HTML Quick Reference

HTML (Hyper Text Markup Language) is not a fancy what-you-see-is-what-you-get (WYSIWYG) style of editor. Instead it is made up of several different elements delimited by tags. Tags are enclosed in angle brackets <>. Most, but not all, tags come in pairs. The closing tag name always begins with a slash. All HTML documents should begin with a <html > tag and end with a </html> tag.

HTML pages consist of two primary sections, the HEAD and the BODY. The HEAD of the document begins with the <HEAD> tag and ends with the </HEAD> tag. The HEAD contains the TITLE and other information about the document. The HEAD is not part of the visible portion of the HTML page, but rather it is at the top of the netscape page.

The BODY contains the text and images displayed in the visible part of the HTML page. Within the body you can use several different types of elements. Some of the basic element types you will need to know, to begin developing your own home page are summarized below.

<html> All html documents must begin with this

<HEAD> Start header

</HEAD> End header

<TITLE> Start title

</TITLE> End title

<BODY> Start body

<hl> Start largest heading style

</hl> End largest heading style

There is also a h2, h3, h4, h5 which descend in size in that order

<h6> Start smallest heading style

</h6> End smallest heading style

<hr> Insert a horizontal line, the rest of the line is left blank

<p> Paragraph for explaining all sorts of interesting things. Each new paragraph must begin with a <p> tag and while it is not mandatory, good html programmers will end a paragraph with the </p>

<p align = middle> Allows you to align the material within the paragraph in the middle of the page, that is, going vertically. You can also choose to align the material at the TOP or BOTTOM

<p align = center> Allows you to align the material within the paragraph in the center of the page, that is, going horizontally. You can also choose to align the material to the LEFT or to the RIGHT. You can use align, to align pictures or anything else, just put the align in side the tag, as seen above

<br> Force a hard return in your text

<img src = "Picture.gif"> Puts in a image called picture.gif

The following is a link to the College of Engineering Home Page. The "a" means anchor, followed by the address as seen. The words "College of Engineering, Home Page" will be highlighted as the link to the College of Engineering Home Page.

Need to end each address with a ">", so that it knows when the address is complete. Then end each link with a "</a>", so that it knows where to stop highlighting for the link. Example as follows

<a HREF = http://www.et.byu.edu/engineering> College of Engineering, Home Page </a>

<ul> Begin an unordered list, also called a bullet list

<li> For each element in the list, put this first, then the text

</ul> End the unordered list

<ol> Begin an ordered list, also called a numbered list

<li> For each element in the list, put this first, then the text

</ol> End the ordered list

<table> Begin a table

<tr> Begin a row on a table
</tr> End a table row

<td> Begin a cell in a table row
</td> End a cell in a table row

</table> End a table

 <I> text </I> Makes the text between these tags italics (the EM tag does basically the same thing)

<B> text </B> Makes the text between these tags bold (the STRONG tag does basically the same thing)

<pre> text </pre> Preformatted text. This means that any text between this tag and the </pre> tag will be left in the format it was taken in. This can be useful if, you are bring text from a document that you have already written and you want it to look the exact same way. This is good for tables, formatting, indenting, etc.

</BODY> End the body of the html document

</html> End the html document

 

If you wish to learn more about HTML, I highly recommend this site: http://www.w3schools.com/html/default.asp