Slide 1 of 20

1
Web Site Design Stanford University Continuing
Studies CS 21
Mark Branom markb_at_stanford.edu http//www.stanford
.edu/people/markb/ Course Web Site
http//www.stanford.edu/group/csp/cs21/
2
Course Description

• In this class, we will explore the fundamentals
  of web site creation. Well look at the
  software, on-line resources, and reading
  materials which will help you build outstanding
  web sites. The class will consist of a mixture
  of hands-on exercises, lectures, and
  demonstrations. Topics covered will include
• Web design principles
• HTML basics
• Adding images to web pages
• Linking web pages
• Building tables for data and graphical layout
• Graphics production for the web
• By the end of the class, you will have built a
  website and be ready to strike out on your own.
  Students MUST have access to a computer, be
  familiar with computer basics, and have access to
  the Internet. We will be working on the IBM-PC
  platform however, since the Web is
  cross-platform, you can apply the knowledge you
  gain from this class to other computer platforms.

3
Administrivia

• Grading
• You have the option of taking this course for a
  letter grade, CR/NC, or as an Audit.

Letter Grade CR/NC NGR Attendance Required Requir
ed Recommended Homework Required Required Recomme
nded Project Required Required Not
required By request By Request Default choice
4
More Administrivia

• Resources
• Each week you will receive supplemental handouts
  and in-class exercises. Copies of the handouts
  and links to resources will be posted to the CS21
  website
• http//www.stanford.edu/group/csp/cs21/
• How to reach me
• markb_at_stanford.edu
• 650-725-1717

5
More Administrivia

• You will need
• Access to a computer
• Familiarity with computer basics
• Access to the internet (many free ISPs exist)
• A tripod account (well do it in class)
• Access to the following tools
• A text editor (TextEdit for Macs Notepad for
  Windows)
• A web browser (Firefox / Internet Explorer)
• An FTP client (Fetch for Macs WS_FTP for Windows)

6
Assignments Final Project

• The weekly class assignments will build toward
  the final project
• The final project will be to turn in a web site
  consisting of one home page and four linked
  subsequent pages with content, links, and
  graphics on all of them.
• The assignment will be "turned in" by being
  loaded onto your tripod webspace.

7
Course Syllabus

• Week 1 The Web HTML basics
• Week 2 Adding Links, Fonts, and Colors
• Week 3 Cascading Style Sheets (the Basics)
  Adding Graphics
• Week 4 More on Graphics Web Design Issues
• Week 5 More Web Design Issues Imagemaps, Sound
  Video
• Week 6 Lists Tables
• Week 7 Cascading Style Sheets (CSS) - more
  advanced usage
• Week 8 Forms Basic CGI Scripting
• Week 9 Frames Internal links meta tags site
  promotion
• Week 10 Unfinished business in-class lab time
  to work on projects

8
Week 1 Agenda

• Demystifying the internet ("How does it work?")
• Demystifying Web Pages
• HTML basics

9
How the internet works...

• The Internet is a network of networks that
  allows for communication and sharing of
  information.
• The World Wide Web is just one of several
  applications which can be used on the Internet.

10
Web Terminology

• FTP (File Transfer Protocol), SFTP (Secure File
  Transfer Protocol) - allows computers to exchange
  files over a network
• HTML (HyperText Markup Language) - the
  "programming" language used to write web pages
• HTTP (HyperText Transfer Protocol) - the internet
  protocol which allows web pages to work
• Protocol - ground rules or "language" that
  internet computers use to "talk" with each other
• Source file - the set of tags and text which make
  up a web page. Browsers process the source file
  to make the web page look the way the designer
  wanted it to look.
• URL (Uniform Resource Locator) - a web address
  indicates the location of a web resource as well
  as the protocol needed to access it
• Web browser/navigator/client - the software
  application which displays web pages
• Web page - a single page on the web (a "homepage"
  is the first web page on a web site)
• Web server - the computer or network of computers
  which stores web pages
• Web site - a collection of web pages, usually on
  a particular topic or business

11
How web pages work

• 1) Client (user) tells the browser to request a
  web page using the http protocol
• 2) Request goes over the internet to the web
  server
• 3) Web page is found on the web server
• 4) Copy of the source code for the web page is
  sent back to the original computer
• 5) Browser processes ("translates") code into web
  page

The Internet
Client (user)
Server
12
How does it work?

• Web pages are simply made up of plain ASCII text.
  Web browsers process the codes used on web pages
  to display a fully formatted web page. But the
  pictures, colors, and other non-text items on a
  web page aren't actually on the web page itself
  -- the
• web page itself is simply
• text,with the formatting and
• graphics encoded. You
• can look at the code for any web page by
  going to the "View" menu and choosing
  "Page Source".

13
Introduction to HTML

• HTML stands for "HyperText Markup Language"
• HTML is a collection of text surrounded by tags
  which modify the text of the document.
• All tags are encoded in angle brackets (ltgt).
• Tags work in pairs -- one turns on the
  modification, one turns it off. Stop tags look
  just like start tags except they have a slash (/)
  in front.
• lttaggtaffected textlt/taggt
• Some tags work on their own. Since they dont
  have a closing tag, we place a / at the end of
  the tag. The Horizontal Rule tag lthr /gt is an
  example.
• Most tags have attributes which can modify how
  they function
• lttag attribute"value"gtaffected textlt/taggt

14
Tag examples

• ltemgtI want this in italicslt/emgt
• is processed by the browser to look like
• I want this in italics
• ltp align"center"gtI want this new paragraph to be
  centeredlt/pgt
• is processed by the browser to look like
• I want this new paragraph
• to be centered

15
Structural tags

• These are the basic tags which must be a part of
  every web page. They tell the browser that the
  document is a web page.
• lthtmlgt
• ltheadgt
• lttitlegtTitle of Webpagelt/titlegt
• lt/headgt
• ltbodygt
• This is where the main part of the web
  page would go
• lt/bodygt
• lt/htmlgt

16
Breaking Lines and Paragraphs

• ltpgt text text text lt/pgt
• Paragraph tag
• Most browsers render (process) this with blank
  lines between each paragraph
• ltbr /gt
• Line break tag. Used when the webmaster wants a
  carriage return but doesn't want a blank line to
  follow
• lthr /gt
• Horizontal Rule. Used to place a straight line
  across the page.

17
Examples of Breaking Lines

• ltpgtThis is an example of howlt/pgt
• ltpgtparagraph tags work.lt/pgt
• lthr /gt
• ltbr /gtThis is an example of how
• ltbr /gtline breaking tags work.

18
Header Tags

• Header Tags -- Used for marking sections and
  subsections in a document. Using Cascading
  Style Sheets (CSS), you can change the
  default meaning for the tags (more on this
  next week).
• lth1gt Header 1 -- Giant-sized and bold lt/h1gt
• lth2gt Header 2 -- Large and bold lt/h2gt
• lth3gt Header 3 -- Normal-sized and bold lt/h3gt
• lth4gt Header 4 -- Small and bold lt/h4gt
• lth5gt Header 5 -- Very Small and bold lt/h5gt
• lth6gt Header 6 -- Tiny and bold lt/h6gt

19
Header Tags (cont.)

• H1 Giant-sized and bold
• H2 Large and bold
• H3 Normal-sized and bold
• H4 Small and bold
• H5 Very Small and bold
• H6 Tiny and bold

20
Formatting text

• Bolding and Italicizing
• ltstronggttext you want boldlt/stronggt
• ltbgt you can also use the bold tag (no longer
  recommended) lt/bgt
• ltemgttext you want in italicslt/emgt
• ltigt you can also use the italics tag (no longer
  recommended) lt/igt
• Aligning text or graphics left/center/right
• ltp align"left"gtnew paragraph justified leftlt/pgt
• ltp align"center"gtnew paragraph centeredlt/pgt
• ltp align"right"gtnew paragraph justified rightlt/pgt