Class 2 Handout

Comprehensive Web Design
Fall 2002 - Spring 2003
https://ehollywood.net/dhima/handouts/class2.htm

Class 2 Handout

HTML Lesson 1. Learn to hand code a web page in Notepad using basic HTML and a JPEG and/or GIF found on the Internet. File naming conventions. Hyperlinking with absolute and relative links.

1. File naming conventions. - http://courses.wccnet.org/~colthorp/course/210/activities/filenames.html
It's important to understand how to name your files before you start building a website. Good naming habits to follow so you don't need to worry about the OS of your server or clients. Eight letters are less is good. Spaces in between words and capital letters are bad.

2 .Basic HTML for creating a web page. - http://personalweb.about.com/library/bltags.htm
What is <html> <head> <title> <body> all about? Learn to test your new web page in a web browser. Save the file as an HTML file (use the file extension .htm or .html) and then open the page in your browser. Both Netscape and Internet Explorer have an "Open" or "Open page" option under the "File" menu. Setting web page colors in the body tag. <BODY LINK="RED" VLINK="PINK" ALINK="BLUE"> - http://www.umich.edu/~cs111/colors.html

SEE: Basic HTML Tutorial: - http://personalweb.about.com/library/weekly/aa052498.htm
Learn to code your own personal Web site with this HTML tutorial. Here you will find basic HTML code to help you start building your own personal Web site using HTML.
What are flags? - http://www.redtempest.com/tutorials/html_flags.php
Flags are simply a special character that surrounds a command in HTML. All flags begin with a less than sign <, and close with a greater than sign >. There are no exceptions to this rule.

3. Text manipulation.
http://www.redtempest.com/tutorials/html_textmanipulation.php#1
Using the text formatting features of HTML. How to bold, italic, underline and use headings 1-6.
Headings: Headings look bold and are a quick fix for type design, but they have one flaw. Headings tend to be isolated from the rest of the page because they have an automatic <P> command attached to them. They will always appear alone on a single line.
Fonts: The FONT command is one of the most useful commands you'll ever learn. Inside the FONT command is a series of specifications, that when undefined, are set as default. The two most important font commands are the FACE and SIZE commands.

4. Working with Images.
There are two kinds of images used on the web, GIFs and JPEGs.
GIF stands for Graphics Interchange Format - The GIF image file format was created by and is the copyrighted property of CompuServe Incorporated.
The JPEG image file format was created by the Joint Photographic Experts Group (JPEG).
Both are compression formats
A good rule of thumb is when an image has lots of colors like in a photograph, use JPEG. For solid colors or no gradations use GIF. Read more about GIFs and JPEGs here: http://www.dnr.state.oh.us/water/eeco99/8jpeguse.htm

5. Linking - http://www.boogiejack.com/paths.html
Hyperlinking is the essence of the World Wide Web. The difference between absolute and relative links. Linking between web pages. Using an image that is on a different page.

HOMEWORK ASSIGNMENT:
1. For next class I want you to create three html pages that all link to each other.
Page 1- The first page(index.htm) say "Britney Spears is lame!" really large using the largest Header tag and has a JPEG image below it of Britney Spears that you find and download from the web. This page color is white and the text is black. The image of Britney links to the Dragon Ash page.
Page 2- The second page(dragon.htm) is about Dragon Ash. This page background color is black with white text and red links. It includes an image of the band that is pulled from another website (an absolute link) and NOT in your image folder. The image is centered at the top of the page. Below it, not centered, are members of the bands listed on their own lines like:
1. Member 1 (his name)
2. Member 2 (his name)
etc. Each member name must be in a different text color and different font size.. Below the members is a paragraph of text about the band. Below that are three URLs that link to other websites about the band.
Page 3- The third page ("your name".html) is your page to do what you like. However it must have a background image and purple text somewhere. It also needs to have a GIF image.

ALL THREE PAGES MUST LINK TO EACH OTHER WITH EITHER TEXT OR IMAGES. ALL THE IMAGES MUST BE IN ONE FOLDER CALLED "IMAGES"