HTML in a Day
By the end of the day 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:
Software you will need
All that is needed for making a Web site is a plain text editor, and I'm going to suggest you download the free Programmer's Notepad:
There is a "downloads" link to click on that will take you to the page you want to use. Click on it |
 |
Be sure to choose the "stable" version. This is good software, but it is always under development, so do not work on the cutting edge. |
 |
You will download an ".exe" file, which you can open and let the software install. That is it! |
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
- Launch your favorite Web Browser and choose "Open - File... " and select your page.
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
- The HTML Basics
- HTML Cheatsheet - Distributed in class
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.
The Simple Site
Now that you know everything about HTML, it's time to make your personal web site. First do it in the WIKI, then try to make the same three pages in HTML. Follow these instructions:
- The WIKI Tutorial
- The Simple Site Tutorial for a website
Assignments
- Complete the Simple Site Tutorial by at least linking all three of your pages together
Last modified
Sunday, June 17, 2007 2:05 PM