Web Page Design

1
Web Page Design

• Writing a Web page is easy
• It takes an hour to learn
• Web pages use what we call HTML
• HyperText Markup Language
• All word processing packages are moving towards
  HTML documents as the standard document format.
• This is now a required skill!

2
What is HTML

• Web pages consist of three components
• Plain ASCII text
• HTML Tags
• Scripts and/or applets
• We will focus on the first two
• Scripting languages and applets give power to the
  Web page design, but require somewhat more skill.

3
HTML Tags

• HTML Tags are any of a set of commands found
  inside the Tag delimiters ltgt
• Thus
• B is the letter B
• But ltBgt mean the following text will be in bold
  print.
• And lt/Bgt mean the following text will no longer
  be in bold print.
• HTML tags may be either upper or lower case
• I recommend UPPERCASE for Readability.
• Thus ltBgt and ltbgt both work, but ltBgt will be
  easier to see when you read the source code.

4
Create Your first web page

• Open Windows Notepad
• Start gt Programs gt Accessories gt Notepad
• Type This is my first web page!
• Save it.
• File gt Save
• Call it your last name.htm e.g. Duval.htm
• Save it to either your removable disk Floppy or
  USB or the My Documents directory
• Open Internet Explorer
• Open the File
• File gt Open gt Browse
• Congratulations! You have created your first web
  page!

5
Adding Features

• In class we will add elements to work with the
  formatting and appearance of the web page.

6
Another Example

• Look at demo.html
• Now click on View gt Page Source

7
The Header

• Web Pages often have a section called the Header
• It is found in between the
• ltHEADgt
• and
• lt/HEADgt Tags
• It contains information not visible on the page
  but perhaps important for the document

8
Information found in the Header

• The Title
• Put a title on a page, and that will be displayed
  in the Title bar of the explorer window
• Try
• ltTITLEgtMy First Web Page!lt/TITLEgt
• Authoring Info
• Keywords

9
Information in the Body

• Anything you want on the page
• Commonly found components
• The text you want read
• Images
• Links to other web pages
• Lists
• Tables
• Background information/color scheme

10
Creating a Web page

• We will use Symantecs Visual Page
• It is relatively easy to use
• It is easy to transfer files with it
• It is close to WYSIWYG
• Netscape Page Composer is also a good editor, and
  is free

11
Now, Construct a Web page!
12
Publishing Your Web page

• Use the Publish Option in Composer
• Or use an FTP program