14-03.1
Summary of some HTML Tags[1]
Structure Tags
<html> ... </html> Encloses the entire HTML document.
<head> ... </head> Encloses the head of the HTML document (i.e. the title tag, etc.).
<title> text </title>Indicates the title of the document. This appears in the title bar
of the browser and is the name used when a user bookmarks the
page; it does not display in the actual text area of the browser
itself.
<base href="url">Contains the URL or address of the current page. It allows you to
easily use relative links (also included in the header area).
<body> ... </body> Encloses the body (text and tags) of the HTML document. A
optional format of this tag sets the background color:
<body bgcolor="#RRGGBB">.
Headings
<h1> text </h1>A first-level heading. (Most often used as the title which does
appear in the document).
<h2> text </h2> A second-level heading.
<h3> text </h3> A third-level heading.
<h4> text </h4> A fourth-level heading.
<h5> text </h5> A fifth-level heading.
<h6> text </h6>A sixth-level heading.
Paragraphs
<p> text </p>Indicates a paragraph.
<blockquote>
text paragraphs
</blockquote>Indents a block of text.
Character Formatting - Logical Highlighting
<strong> text </strong>
Strong emphasis. (Usually displays as bold).
<em> text </em> Emphasis. (Usually displays as italics).
<cite> text </cite>A small citation reference.
<code> text </code>A selection of typed computer code (i.e. fixed width font).
<pre> text </pre> Similar to <code>, preformatted text, puts text in fixed width font
and does not alter spacing and line breaks
Character Formatting - Physical Highlighting
<b> text </b> Boldfaced text.
<i> text </i> Italicized text.
<u> text </u>Underlined text. (Can be confused with links which are
displayed as underlined text).
Changing Font Size and color
<font size="value" color=”colorname”text </font>
Changes the size of the font without using a heading tag.
Enter a value between "-2" and "+6".
Example: <font size="+2">text</font>.
Colorname can be common words like red, blue, green, or as
triples of hexadecimal pairs: #AA99C3
Other Elements
<hr/A horizontal rule/line. Often referred to as a shadow rule.
<br/A line break.
<!-- text -->A comment. This text does not appear in the browser.
<center> … </center> all content between the tags will be centered on the page
Lists
<ol> ... </ol>An ordered (numbered) list. Precede all items on the list with the
<li> tag. Specify starting number by adding start=#. Specify bullet
type by adding type= followed by one of: "1 a A i I".
<ul> ... </ul>An unordered (bulleted) list. Specify bullet type by adding
type= followed by one of "disk square circle".
<li> text</li>A list item: for use inside <ol> or <ul>.
<dl> ... </dl>A definition or glossary list enclosing the <dt> and <dd> tags.
<dt> text </dt>A definition term: for use inside <dl>.
<dd> text </dd>The corresponding definition to each <dt> term as a part of a
definition list.
Links
<a options> text </a>Contains the information defining the location of the link.
Options are:
href="url"
href="#name"
name="name"
Use "url" to link to another document or "#name" to link to an
anchor (i.e. a named location). Use "name" to create an anchor
which can then be linked to. Do not use spaces in "name".
Link Examples:
<a href="#LocationPointers">Go to Pointers</a>
<a name="LocationPointers">Pointers</a>
<a href=" here to go to the Queen’s
Home Page</a>
To create an email link:
<a href="mailto:">Click here to email me!</a>
To create an email link with a specified subject:
<a href="mailto:?subject=Request for more
information">Click here to request more info</a>
Tables
<table> … </table> create a region of organized rows and columns
this tag takes modifiers like cellspacing=8 cellpadding=3 border=2
<tr> … </tr> a row in the table… items inside this tag pair will be in one row
<td> … </td> a single cell in a table row
Forms and Input fields
You will use these when we set up an HTML page to run a JavaScript program
These tags go inside the <body> tag pair of an HTML document:
input onclick=someFunc() type=button value="click to execute"
<input type=text name=”speed”>
<form name=”data2”> … in here <input> tags for text fields and button … </form>
This tag pair is used to tell the browser that program code appears inside.
script type=text/javascript> … code in here </script>
The <script> tag pair can appear in either the <body> or the <head>. In this class, we will put the <script> tags in the <head>. The “type” modifier is used here to tell the browser that the language we are programming in is Javascript.
[1] This is a sample crib sheet. It’s a good idea to make your own, expanding it as we go through the semester.