Web Design & Development

First html page

There is a LOT of information in this section! but it's all basic information that you'll need when working in html. I'll try to keep my comments to just a few.

Both the Commentary in the Assignment and Lemay tell you about Viewing Source. This is a great way to see the code behind a web page. It's also a way that you can "borrow" code for a particular effect that you want to use. You can go to the page source, highlight, and copy the code. Then you can just paste it to your own html in your text editor!

Lemay says that html does not "describe" the page layout. The html tags tell the browser "this is where a paragraph breaks ... this is an image and here's where to go find it" etc. It's the browser that interprets the information and desplays the page. --- If you are confused by this you really can just think of html as describing the page and you'll be fine in this course. Just be aware that different browsers may require different code. Different size monitors will display the information differently. As an example look at a page of text on the web, and then look at how it prints to your printer. The line breaks will happen at different places. This is the basic problem with different browsers.

One problem with WYSIWYG applications is that they design by appearance not by structure (see Note bottom of p54). What you create on FrontPage (for example) may not look at all the same when someone with a smaller monitor and a different browser views it. And it can be very difficult to fix. I'm running into this very problem in a consulting job I'm working on right now. This is why I recommend working with the raw code as much as possible in this course.

As you look at html tags you'll notice some lower case and some upper case. HTML tags are not case sensitive. Some designers prefer to put tags in caps just to make them easier to find on a page of code. The same thing is true with indenting tags. The "tab" does not get read by the browser, so indenting tags just helps the designer look at the page of code.

When you are writing your first page in your text editor be sure that you are working on a "text document". And when you save that document be sure to add the .html to the name. If you don't, most editors will automatically add .txt or .doc to the name, and browsers will not be able to read it.

Lemay (on p61) says you may see Open Local, Open File, or Open. To add one more -- NetScape says Open Page. The easiest way to find the page is to Browse -- or in NetScape, Choose File. I save my pages to a disk so I go to drive A, then my folders, and the file name -- then click Open. Also remember, that if you are going back and forth between your work and the browser, you must save any changes you make and then reload the page in the browser.

Even though Lemay says that the structure tags are not strictly necessary, you should always use them. There are several reasons. One is that in the Advanced class you will be working with Java Scripts. Part of the script must be put between the <head> and </head> tags.

There are a LOT of tags in Days 4 and 6. Given the time, you should try as many of these as you can. For example: when you nest lists within lists, you might take a look at the bullets that are used -- they do change. And one final thought to avoid a problem -- when you put an attribute tag such as <b> or <ul>, etc. immediately drop down a line or two on your page and put in the closing tag (</b> </ul>) so you won't forget to include it. Then continue working between the two tags. This can really be a help when you are nesting lists, or later when we'll nest tables. It's very easy to forget an ending tag, and then it just won't be read by the browser.

Keep trying the tags and viewing the results on your computer. Try as many as you have time for -- the more the better. Remember, you'll be posting the page next time, and you'll want to use some of these tags on your final project.

Here's an example of a practice.html page with some of this lessons tags on it. **When you are finished looking at the page, just close that new window to return here.

Return to Class Pages/Lesson Comments home page

or use the CourseInfo navigation buttons (or your browser's back button) to return to the course.