HTML Crib Sheet

UIT»   Faculty & Staff Services»  HTML Crib Sheet

What is HTML?

HTML stands for Hypertext Markup Language, the language in which web pages are written. Look at the code of a web page (View menu > Source or View menu > Page Source), and you will see that it consists of plain text that, in addition to the text you can read on the formatted web page, includes a lot of odd-looking codes surrounded by angle brackets. These codes show the web browser how to arrange and format the text on the page, where to place images, and where to direct the browser when the user clicks on a link.

HTML Basics

  • All HTML codes are surrounded by angle brackets.
  • Most codes have two parts: an opening tag, and a closing tag. The closing tag starts with a backslash to distinguish it from the opening tag. For example, <em> is an opening tag, for which </em> is the closing tag.
  • The text to be affected appears between the opening and closing tags. If the tag has options (e.g., to specify a color or size), this appears within the opening tag as an attribute and its value. You can see this in a tag like <font color="red">. Attributes and values are not repeated in the closing tag </font>.
  • If you need multiple HTML tags to get the effect you want, be sure to nest them properly. If you open a set of tags inside another set of tags, close the inside set before closing the outside set. (See the example of bold and italic in the text formatting table below.)
  • Some HTML codes use only one tag, such as <hr> to insert a horizontal rule, or <br> to move to a new line.

HTML Samples

You can achieve a lot of effects with very simple HTML by copying and modifying the samples below.

Text Formatting

Codes for formatting text
Effect Sample
Bold (or "strong") text <strong>Your text here</strong>
Italics (or "emphasis") <em>Your text here</em>
Both bold and italic

  • Notice how the <em> codes are nested inside the <strong> codes
 <strong><em>Your text here</em></strong>
Change text colour

  • Some colour values: red, blue, green, purple, maroon, gray,
    olive, magenta, teal,aqua, fuchsia, lime, navy
  • Use colours that stand out well, and avoid relying on colour alone to convey important information
  • Note the spelling is "color" and "gray"
 <font color="red">Your text here</font>
Change text size

  • Use + or - to increase or decrease text size
 <font size="+2">Your text here</font>
Change both text colour and size <font size="+1" color="blue">Your text</font>
Start a new paragraph

  • Insert the code where you want to start a new paragraph; this leaves extra space above the new line
  • Technically, each paragraph should start with <p> and end with </p>, but a single <p> usually works
 <p>
Start a new line

  • Insert the code where you want to start a new line; this doesn't leave extra space above the new line
 <br>
Horizontal rule

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

Images

YQuiz Writer provides an area where you can enter a web address for an image, and it will be displayed in your finished quiz. How to find the web address of an image.
Use these examples if you need additional images for your question. Try using images as the "matches" in a matching answer question!

Code for displaying an image
Image Effect Sample
Display an image

  • Use the web address of the image as the value of the src attribute.
  • This tag does not require a closing tag.
 <img src="http://www.yorku.ca/cst/images/staff_nen.jpg">

Links to Web Sites

YQuiz Writer provides an area where you can enter a web page address, and it will be displayed as a link in your finished quiz. Use these examples if you need additional links for your question.

Codes for linking to web sites
Link Effect Sample
Link some text to a web page

  • The text between the opening and closing tags (York Web Page) will be displayed and linked to the address given as the value of the href attribute (http://www.yorku.ca)
 <a href="http://www.yorku.ca">York Web Site</a>
Open the link in a new window

  • Adding the target="_blank" attribute/value forces the linked page to open into a new browser window
 <a href="http://www.yorku.ca" target="_blank">Your text</a>