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
pp.
45-47,50, 52, 53.;- Fix your site with the right DOCTYPE (A List Apart).
See also:
Text Editors
...all have some means of selecting text and then moving it around from place to place, e.g.:- Ctrl+x to "cut" ('apple'-x on a Mac) your selection to the 'clipboard'
- Ctrl+c to "copy" (apple-c)
- Ctrl+v to "paste" (apple-v) clipboard contents into your document
- Edit Menu to access "cut" "copy" and "paste" commands.
- Right Click (ctrl-click) to access "cut" "copy" and "paste" commands.
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:
- WordPad will try to save files in binary, MS-Word ".doc" format by default. Make sure you "Save as type: Text Document".
- Make sure you save your files with an extension of .htm or .html so that a browser will use its html rules when displaying it.
- Make sure you drop down the menu box to save your file as a Text File the first time, when you're starting up a new file.
Where is my file being stored...anyway?
- Remember (and this works with almost all Windows programs, including DreamWeaver), if you're unsure of exactly what folder you've been saving a file in, you can always do a "File | Save As" and then drop down the "Save in" menu to see...
View your web page in a web browser
Go find the file with your browser.
- In IE: "File | Open", click "browse", find the file, click "Open" and then click "OK".
- In Firefox: "File | Open File", find your file, and click "Open".
The editing cycle
Repeat the cycle you've begun of editing a web page:
- Make further change to your web page (already open in WordPad).
- Switch to your web browser.
- Click the Re-load or Refresh button on your browser to see your changes.