Introduction to Web Page Creation

1
Introduction to Web Page Creation
Scott Dexter Computer and Information Science,
Brooklyn College
2
Overview

• Goals
• Infrastructure
• HyperText Markup Language (HTML)
• Some HTML Basics
• Using Links and Images

3
Advanced Topics

• More complex layout using tables
• Other tools for creating pages
• Publishing your page
• Limitations of HTML Related Technologies

4
I Hope Youll Go Home With...

• An understanding of the basic technologies that
  make up the Web
• Some hands-on experience creating a web page
• A willingness to experiment
• Access to further information

5
Infrastructure

• What is the Web?
• Network of linked computers containing
  information resources (Internet)
• System for sending requests for information, and
  responses, across the network (HTTP)
• Scheme for describing location of a resource
  (URL)
• Way to describe how information should appear in
  a browser (HTML)

6
HyperText Markup Language

• We need to describe to a computer program (web
  browser) how we want information to be displayed
• What is a markup language?
• markup detailed instructions for how a document
  should appear when printed
• language a well-defined system of symbols and
  rules for their use

7
HyperText Markup Language

• So system for describing a piece of text should
  appear
• HTML descrubes how information should be
  displayed on the web
• Computers are powerful but stupid, so we must be
  pretty precise

8
What does HTML describe?

• Structure of displayed page
• Location of external resources
• links
• images
• Browser uses this info to decide exactly where to
  place everything
• Different browsers may decide differently
• (See first example)

9
HTML Basics

• Regular old text is valid HTML
• To provide info about display, HTML uses a set of
  tags
• Words enclosed in
• Many tags are paired, e.g.
• first
• Others are separators, e.g.
• web page.Things about me ...

10
HTML Basics
Experiment with these tags thru

• Proper web page structure

11
Using Links and Images

• We can incorporate external resources if we know
  their URL
• Link to another web page using
• HREF (hyper-reference) field gives location
• Incorporate an image using
• SRC field gives location

12
Tables

• Very flexible way to describe horizontal and
  vertical layout
• You can specify
• width and horizontal position within window
• number of columns
• borders, spacing
• background color
• cell contents
• Tables inside tables can give lots of control

13
Web Design Software

• Netscape includes (free) page design software,
  Composer
• Microsoft sells a program called FrontPage that
  works very much like Word (so pretty easy to
  learn)
• Other profession-grade applications, e.g.
  DreamWeaver

14
Publishing Your Page

• HTML
• Always (most of the time?) connected to the
  Internet
• Has software (web server) that can receive
  requests for pages and send them out
• Your home computer probably wont do
• Many Internet Service Providers include a fair
  amount of web space

15
Publishing Your Page

• There are several free web servers (but your
  page will have some ads)
• Try www.geocities.com
• Need to learn how to upload the pages you design
  from your computer to the web server

16
Limitations of HTML

• HTML just describes appearance
• It doesnt do anything
• Dynamic/interactive pages require additional
  techniques, such as
• Cascading Style Sheets (CSS)
• JavaScript
• Hypertext Preprocessor (PHP)
• CGI (Common Gateway Interface)