Interactive Web Development

Reading 1.1: HTML “Cheat Sheet”

This reading provides a concise reference (i.e. a “cheat sheet”) of common HTML elements,
introducing the elements that you will use most often throughout the unit. It does not aim to be
comprehensive or go into much detail. Extra online research is likely to be required at some points.

Text Elements
These are the common HTML elements used to display, structure and format text. It is worth noting
that in HTML documents compress all whitespace characters into a single space. This means that
multiple spaces between words and line breaks/blank lines in your code will simply become one space.

Headings
<h1>This is a heading</h1>
BLOCK Display text as a heading (bold, padding at the top, bigger font size).
There are 6 heading elements, named <h1> to <h6>, allowing for smaller subheadings.

Paragraphs
<p>This is a paragraph.</p>
BLOCK Display text as a paragraph (padding at the top and bottom).

Emphasis / Italics
<em>emphasise this</em> <i>emphasise this</i>
INLINE Emphasise text by italicising it. Can also use the <i> element.

Strong / Bold
<strong>make this stand out</strong> <b>make this stand out</b>
INLINE Make the text stand out by making it bold. Can also use the <b> element.

Small
<small>This text is smaller.</small>
INLINE Make the text smaller than the text around it. Can also control text size using CSS.

Superscript
2^nd
INLINE Display text higher and smaller. Use the <sub> element for subscript.

Preformatted Text
<pre>Display this
exactly as it is
written.</pre>
BLOCK Display text in a monospaced font and maintain line breaks and spacing.

Interactive Web Development Reading 1.1 Page 1

Hyperlinks, Images, Lists, Forms and Tables
There are many elements in HTML to support specific types or structures of content. These are some
of the more commonly used ones.

Hyperlinks
<a href="list_threads.php">List Threads</a>
INLINE Creates a hyperlink that the user can click to request (go to) a different page. Specify the
page using the href attribute, and the text to display between the <a> and </a> tags. If linking to
a file on the same server, only specify the filename (and folders if necessary) – this is a relative link,
since the location is relative to the current file. If linking to another website, include the full URL.

Images
<img src="logo.png" alt="Website Logo">
INLINE Displays the image specified in the src attribute, or the text specified in the alt attribute if
the image file cannot be found. The alt text should describe the image.

Lists
<ul> <ol>
<li>Red</li> <li>First</li>
<li>Green</li> <li>Second</li>
<li>Blue</li> <li>Third</li>
</ul> </ol>
BLOCK Display an unordered (<ul>, uses bullets) or ordered (<ol>, uses numbers) list.
Place the items of the list inside <li> elements within the opening and closing <ul>/<ol> tags.

Forms
<form method="post" action="form_handler.php"> ... </form>
BLOCK The opening <form> tag is where you specify the method (how form data sent when the
form is submitted) and the action (the file to request when the form is submitted). The file specified
in the action attribute should contain code that handles/processes the form data in some way. This
file will almost always be on the same server, so it should be a relative link (see Hyperlinks section).

Between the opening <form> tag and closing </form> tag is where you place the HTML for the
form fields, using elements like <input>. The values of any form fields inside a form will be
submitted when the form is submitted. Other HTML, e.g. for layout and labels, can also be included.

<input type="text" name="username">

<input type="submit" name="submit">
INLINE The type attribute of the <input> tag allows you to create a variety of different form
fields, but this document will only introduces text fields and submit buttons – created with values of
“text” and “submit”. Give every form field a name, using the name attribute, so that it can be
referred to in JavaScript (client-side) and PHP (server-side, once the form has been submitted).

Module 3 explores form and form fields in a lot more detail!

Interactive Web Development Reading 1.1 Page 2

Tables
<table>
<tr>
<th>Brand</th>
<th>Product</th>
</tr>
<tr>
<td>Apple</td>
<td>iPhone</td>
</tr>
<tr>
<td>Google</td>
<td>Android</td>
</tr>
</table>

BLOCK Tables should be used if you have tabular data to display, i.e. Rows and columns of data.
The <table> and </table> tags define the start and end of a table. Inside a table, the <tr> and
</tr> tags define the start and end of a row. Inside a row, the <th> and </th> tags define a
heading (usually the first row of the table) and the <td> and </td> tags define a cell of data.

The example above creates a table with three rows and two columns. The first row contains headings,
while the second and third rows contain data. Browsers do not display borders around table cells by
default, but this can be controlled via CSS, as can other aspects such as size, alignment, padding, etc.

General Layout & Structure Elements

The <br> element is useful when you need a line break, and the <div> and <span> elements can
be thought of as building blocks or containers that you can use to achieve desired looks and layouts.
They are often used in conjunction with CSS to tell part of your document how to look or behave.

Line Breaks
<br>
BLOCK This produces a line break, letting you split things up across multiple lines.

Divisions
<div>This text is in a div.</div>
BLOCK This defines a division or section which can contain text and/or other elements.
How it looks/behaves is usually defined using CSS.

Spans
<span>This text is in a span.</span>
INLINE This defines a span which can contain text and/or other elements.
How it looks/behaves is usually defined using CSS.

End of Cheat Sheet

For further information and detail, see online sources such as W3Schools.

Interactive Web Development Reading 1.1 Page 3