HTML in a Day
By the end of class we will have created and published a complete web site that includes a home page, resume and hot list. To do this, we will use only a simple text editor. Here is an example of what you will have:
Introduction to the Internet
Creating an HTML Document
HTML Syntax
<TagName Properties>Content</TagName>
- Tags always have brackets
- Tags usually have opening and closing elements around content
- Some tags are "empty" and contain both opening and closing information
Example - <h1 align="center">Mary Taylor</h1> yields:
Mary Taylor
Making a Basic HTML Document Structure
- Create the required elements
Type the following into a blank document in a text editor like NotePad:- Line 1: <html>
- Line 2: <head>
- Line 3: <title> </title>
- Line 4: </head>
- Line 5: <body>
- Line 6: </body>
- Line 7: </html>
- Give the page a title
- Place the cursor between <title> and </title>
- Type in a title, such as My Page
- Enter and format text
- Place the cursor after <body> and press Return to make some space
- Type <h1>Hello World!</h1>
- Save and view the page in a browser
- Choose Save As (be sure you are saving the file as text if in a word processor)
- Name the file index.html
Break
The Simple Site
Now that you know everything about HTML, it's time to make your personal web site. Follow these instructions:
FTP
A web page is just a local document until it is published. I have a place for you to place things on my web server. The following tutorial will help you post your web page on the Internet. I will distribute the ftp login information in class.
Resources
HTML Basics
For a perspective and a chance to practice some more use Webmonkey, a site full of web authoring tutorials. Note that these pages are constructed to allow you to print them out if you wish. The directions are a bit chatty, but give you a quick introduction to the subject.
First, read through the following to get a general understanding of HTML
Then, use the Webmonkey Teaching Tool to learn the following skills and tags:
- View Source
- Paragraphs
- Headlines
- Bold/Italics
- Blockquotes
- Aligning Text
- Line Breaks
- Background Color
In each case, be sure to practice the tag by completing the "try it" link at the end of the article if one is present.
Web Graphics
The HTML
You will always use "inline" graphics. They are placed using the <img src="url"> tag. The URL can be absolute or relative, but 99% of the time you will use relative (linking to another person's links is both bad form and risky, as who knows with they will move them?).
Exercise
- Download this file - sample.gif
- Place it in the same foler as last week's index.html
- Create a link on your index.html by typing <img src="sample.gif">
- Upload the new version of index.html and the sample.gif file
- View in browser
Graphics Work
I'd like you to take a fair amount of time and work on graphics. There are a number of links available to help you at any level. Please view the table on the right for places to help your graphics work.
I strongly suggest going through Graphics 101.
- Graphics 101
- Fireworks Tutorials
- Scanning images and adding to a web page
- Background
Basics
(about background graphics) - Rollovers
- Adding Images to your Web site (Philip Greenspun)
Technologies of Interest
- Acrobat
- Electronic Paper
- HyperText
- Vannevar Bush and As We May Think
- The Electronic Labyrinth
- HyperMedia
- Louvre Museum
- Macromedia Flash Video Examples (probably won't work in ODU labs due to need of Flash 7 player)
- Collaborative Communitiy
Assignments due tomorrow
- Lesson plan and rationale due tomorrow by start of class
- Movie due by tomorrow (start of class) for extra 10% credit
Last modified Friday, January 5, 2007 9:31 PM