Creating Web Documents Wk 2: HTML

1
Creating Web Documents Wk 2 HTML PSP basics

• Discuss sites
• HTML, PSP lesson
• Assignment first Web page due Day class 1/23
  Night class 1/28.

2
Process of creating website

• Purpose
• Content
• Audience
• Development process
• Including choice of technologies, marketing,
  evaluation, maintenance
• Web site development differs from other
  information technology (IT) work because of the
  potential variety of user environments
• (Plan for) Maintenance

3
Web as medium / channel

• Compare reading newspaper, watching TV, listening
  to radio, and browsing the Web
• Metaphor Web site as a place to visit.

4
Good Bad sites

• What did you find?

5
HyperText Markup Language

• Text (ascii text) with addition of tags lt gt
  which markup the text, indicating formatting and
  addition of images, sounds, hyperlinks.
• Browsers interpret the tags to display the page.
• Most tags come in pairs lth1gt lt/h1gt and what is
  in-between is affected by the tags.
• Some tags also have parameters extra information
• ltimg srclogo.gifgt
• lta hrefhttp//www.purchase.edugt Purchase site
  lt/agt

6
Basic format

• lthtmlgt
• ltheadgt
• lttitlegt lt/titlegt
• lt/headgt
• ltbodygt
• lt/bodygt
• lt/htmlgt

Used by bookmarks, search engines
Arguments text, link, bgcolor, background
7
Simple HTML page

• lthtmlgt
• ltheadgt lttitlegt Jeanines ratings lt/titlegt lt/headgt
• ltbodygt
• lth1gt Assignment I Good and Bad sites lt/h1gt ltbrgt
• Here is where you might put some brief
  introductory comments. You can copy and paste
  from a word processing program (so you can use
  spell-check).
• ltpgt
• The lta hrefhttp//csis.pace.edu/meyer/origamigt
  Meyer family origami site lt/agt contains general
  and specific information on paper folding. This
  is an educational site aimed at people who like
  origami. It may not be suitable for beginners.
  My favorite fold is the frog. ltimg
  srcfrog.gifgt
• lthrgt
• The lta hrefhttp//cnn.comgtCNN site lt/agt was
  very annoying during the post election period
  because it required you do click to specify the
  version of CNN you wanted. It also required
  horizontal scrolling when viewed on a small
  display.
• ltpgt I want ltIgtmore lt/Igt from you, including more
  images, perhaps an image as a link, done by
  putting the img tag within the a and /a tags.
• lt/bodygt
• lt/htmlgt

8
More tags

• ltIgt Italics lt/Igt
• ltbgt Bold lt/bgt
• ltulgt
• ltligt first item in bullet list
• ltligt second item in bullet list
• lt/ulgt
• ltolgt and lt/olgt for numbered list

9
NotePad Netscape exercise

• Simple web page

10
Images

• Images are incorporated into Web pages using the
  src parameter in the img tag.
• The image file is generally either gif (drawings)
  or jpg (photos). You will read later about these
  and other formats (png is a new one)
• You can refer to a remote file (using http//) or
  a file on the same computer, same folder as your
  HTML file.
• You need to get the name, file type (extension),
  and, if required, the location absolutely correct!

11
Images from Web on your page

• Use Netscape (or IE) to download image
• Right mouse click and follow directions. NOTE the
  location. You may want to change the name.
• Use Paint Shop Pro (or other tools) to crop
  modify image, if desired.
• Use PSP, others for color codes for background or
  fonts
• Use NotePad to type in image tag.
• ltimg srclogo.gifgt
• ltimg srclogo.gif width100gt may change size
• ltimg srclogo.gif width100 height80gt may
  distort

12
Netscape to download image

• Paint Shop Pro to crop image
• Add img tag to html file

13
Assignment

• Complete Web page for next class
• Include at least one image from each site.
• Include link to each site.
• Include 2-3 paragraphs of grammatical AND
  compelling text. May also include lists.
• The content should include mention of audience
  and purpose (make your own inferences on these)
• Use your own observations reflections and also
  ideas from discussions textbooks.