CS 120 Concepts of Computing

1
CS 120Concepts of Computing

• Introduction to
• Web Page/Site Development

2
What is a Web Page?

• A document
• w/ text, graphics, links, etc.
• described in a text file...
• using HTML tags to specify the layout of the
  elements on the page
• that can be displayed by a web browser.

3
What is an HTML Tag?

• Formatting instructions for page elements.
• Beginning Tag
• ltname parametersgt
• Ending Tag
• lt/namegt
• Parameters specify options
• parametervalue
• Example
• ltfont colorff0000gtHi!lt/fontgt

More later
4
Whats on a web page?

• Paragraphs of text
• Formatted text
• Headings
• Lists
• Rules (horz. lines)
• Links (to pages, mail addresses, files)
• Background (color or pattern)

• Images / Graphics
• Image Maps
• Tables
• Frames
• Forms
• Sound Clips
• Video Clips
• Java Applets

5
Whats on a web page?

• Paragraphs of text
• Formatted text
• Headings
• Lists
• Rules (horz. lines)
• Links (to pages, mail addresses, files)
• Background (color or pattern)

• Images / Graphics
• Image Maps
• Tables
• Frames
• Forms
• Sound Clips
• Video Clips
• Java Applets

Items in yellow will be covered in this class.
6
What is a web site?

• A collection of related web pages.
• 1st page Home Page
• note This is NOT the browsers home page!
• index.htm or index.html

7
Terminology

• Web Server
• Web Browser
• HTTP
• HTML
• URL
• http//server/folder-path/filename.htm
• file///folder-path/filename.htm
• mailtobox_at_postoffice

8
Tools for Creating Web Pages

• Text Editor
• Example Notepad
• Word Processor
• HTML Editor
• Example EditPlus2
• Web Page Authoring Tool
• Examples Dreamweaver Nvu
• Other Programs that Generate Web Pages

9
Before you begin...

• Collect Information
• Determine the Site Organization

10
Before you begin...

• Collect Information
• Determine the Site Organization
• Determine the File Organization

11
Before you begin...

• Collect Information
• Determine the Site Organization
• Determine the File Organization
• Collect Supporting Graphics
• not part of the web page file
• JPG, GIF, or PNG
• file size?
• location?

12
File Folder Naming Rules

• Dependent on the server
• No spaces
• Use correct extensions
• .htm or .html for web pages
• .jpg or .gif for graphics
• Special Filenames
• default.htm server default (dont use)
• index.htm home page

13
Web Page Layout Considerations

• HTML is not WP or DTP
• Cant control page size
• Limited font control (typeface size)
• Limited control of position of graphics
• Why these limitations?
• HTML is platform independent

14
HTML Basics a minimal page

• ltHTMLgt
• ltHEADgt
• ltTITLEgtPage Titlelt/TITLEgt
• lt/HEADgt
• ltBODY BGCOLORFFFFFFgt
• ltPgtHave a ltBgtnicelt/Bgt day.lt/Pgt
• lt/BODYgt
• lt/HTMLgt

15
HTML Basics a minimal page

• ltHTMLgt
• ltHEADgt
• ltTITLEgtPage Titlelt/TITLEgt
• lt/HEADgt
• ltBODY BGCOLORFFFFFFgt
• ltPgtHave a ltBgtnicelt/Bgt day.lt/Pgt
• lt/BODYgt
• lt/HTMLgt

16
HTML Basics a minimal page

• ltHTMLgt
• ltHEADgt
• ltTITLEgtPage Titlelt/TITLEgt
• lt/HEADgt
• ltBODY BGCOLORFFFFFFgt
• ltPgtHave a ltBgtnicelt/Bgt day.lt/Pgt
• lt/BODYgt
• lt/HTMLgt

17
HTML Basics a minimal page

• ltHTMLgt
• ltHEADgt
• ltTITLEgtPage Titlelt/TITLEgt
• lt/HEADgt
• ltBODY BGCOLORFFFFFFgt
• ltPgtHave a ltBgtnicelt/Bgt day.lt/Pgt
• lt/BODYgt
• lt/HTMLgt

18
HTML Basics a minimal page

• ltHTMLgt
• ltHEADgt
• ltTITLEgtPage Titlelt/TITLEgt
• lt/HEADgt
• ltBODY BGCOLORFFFFFFgt
• ltPgtHave a ltBgtnicelt/Bgt day.lt/Pgt
• lt/BODYgt
• lt/HTMLgt

19
HTML Basics a minimal page

• ltHTMLgt
• ltHEADgt
• ltTITLEgtPage Titlelt/TITLEgt
• lt/HEADgt
• ltBODY BGCOLORFFFFFFgt
• ltPgtHave a ltBgtnicelt/Bgt day.lt/Pgt
• lt/BODYgt
• lt/HTMLgt