NSU logoENGL 201 Composition II: The Wired Society

Syllabus Schedule Hypertext

Hypertext Project Reference Sheet

This reference sheet describes the fundamental elements of hypertext markup language (HTML). We will use it in the workshops listed in the Schedule as "Introduction to Hypertext" (Nov 21-Dec 1).

1. Document Structure

<html>
   <head>
     <title> This text will appear in the browser title bar. </title>
   </head>
   <body>
     The content of the page should be placed here.
   </body>
</html>

2. Text Formatting
paragraph: <p>text</p>
block quotation: <blockquote>text</blockquote>
headings: <h1>text</h1>  through  <h6>text</h6>
italics: <i>text</i>
bold: <b>text</b>
line break: <br>
horizontal rule: <hr>
ordered list <ol>list-items</ol>
unordered list <ul>list-items</ul>
list item <li>item</li>


3. Links
link to a file: <a href="filename.htm">link-text</a>
link to a URL: <a href="http://www.northern.edu">NSU</a>
link to an anchor: <a href="#anchor-name">link-text</a>
anchor: <a name="anchor-name">anchor-text</a>

4. Images
Inserting an image: <img src="filename.ext">
<img> tag attributes:
alignment
 align="value"  (values: left, right)
horizontal margins
 hspace="value" (value in pixels)
vertical margins
 vspace="value"  (value in pixels)
width
 width="value"  (value in pixels)
height
 height="value"  (value in pixels)
description alt="value"  (verbal description of the content of the image )


5. Styles

Cascading Style Sheets (CSS) is an extension to HTML used to apply a unique style (look) to Web pages. One method of using CSS is to create an external style sheet: a separate file that contains a set of style rules (for margins, colors, fonts, etc.) . These rules can then be applied to several pages, giving the Web site a unified look.

To link a page to a style sheet, place the following code in the head section of the page, replacing "filename" with the name of your style sheet file:

<link href="filename.css" rel="stylesheet" media="screen">

A style sheet is simply a list of style rules saved in text-only format with file name extension .css. A rule consists of a selector and a declaration. A selector identifies the HTML content to be styled. A declaration describes the styles to be applied. The following example applies the color green to level 1 headings:

h1  { color: green }

The selector is h1 and the declaration, contained  inside the curly braces, consists of a property and value separated with a colon. A declaration can have multiple property-value pairs separated by semicolons, as in the example below.

Following is an example of a simple style sheet that changes the page margins, colors and fonts. You may copy it and modify or expand it to create your own set of styles (use the Web Color Picker to find hexadecimal values of other colors).



body { background: #ffffcc; margin-left: 7%; margin-right: 7%; }

h1, h2, h3 { color: #990000; text-align: center; }

p { font-family: verdana, sans-serif; font-size: 1em; }



To learn more about CSS, read the CSS Overview and consult with me during class.


To develop more Web-design skills, consider enrolling in ENGL 302 Hypertext Writing
(see sample syllabus). The course will be offered next in the spring semester of 2010.





back to top