Lab 1: Raw HTML

As the page about markup languages hinted, a web browser can view web pages even without a webserver.

And, we can create a web page with nothing fancier than a plain text editor.

Browsers and text editors are usually free.

 

Readings

See also:

Text Editors

...all have some means of selecting text and then moving it around from place to place, e.g.:

MS "WordPad"

Start it up by going to Start | All Program | Accessories | WordPad.

On PC's I recommend that you use WordPad (rather than NotePad) because it can handle larger files, and as we eventually start to work on both Macs and PCs, we'll find it's a bit more graceful than NotePad about handling text files created on non-Windows computers.
Start it up by going to Start | All Program | Accessories | WordPad.
Keeping long lines on the screen. To deal with this, select View | Options | Text and set Word Wrap to "Wrap to window". (See a screenshot).

Mac OS-X TextEdit

On a Mac you can use TextEdit as a raw text editor. However, you have to set your preferences once to have it "unhide" the tags when you open html files.

Basic (X)HTML page framework

Copy and paste the text below into a blank Wordpad window.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>This is the title</title> </head> <body> <p>Your page content here</p> </body> </html>

Parts of the page

<html>...</html> -- "Container" for all the html on this page.

<body>...</body> -- "Container" for the contents of the page--all the things that show up in the display area of your web browser.

<head>...</head> -- "Container" for all the info about this page, such as the page title, styles that determine how the content will display, eventually links to javascript files, summaries for search engines of the content.

Layout repository

Typically, we'll start with a page from the layout repository

Save your file

Save what you just created in WordPad on your M: drive (or on the desktop, with a Mac). Some things to keep in mind when saving files:

Where is my file being stored...anyway?

View your web page in a web browser

Go find the file with your browser.

The editing cycle

Repeat the cycle you've begun of editing a web page:

  1. Make further change to your web page (already open in WordPad).
  2. Switch to your web browser.
  3. Click the Re-load or Refresh button on your browser to see your changes.

Exploring tag syntax

Click here for a printable page to fill out and turn in as the first lab assignment.