Creating Web Documents Wk 2: HTML & PSP basics

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.

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

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

Good & Bad sites • What did you find?

HyperText Markup Language • Text (ascii text) with addition of tags < > 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 <h1> </h1> and what is in-between is affected by the tags. • Some tags also have parameters: extra information • <img src=“logo.gif”> • <a href=“http://www.purchase.edu”> Purchase site </a>

Basic format <html> <head> <title> </title> </head> <body> … </body> </html> Used by bookmarks, search engines Arguments: text, link, bgcolor, background

Simple HTML page <html> <head> <title> Jeanine’s ratings </title> </head> <body> <h1> Assignment I: Good and Bad sites </h1> <br> 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). <p> The <a href=“http://csis.pace.edu/~meyer/origami”> Meyer family origami site </a> 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. <img src=“frog.gif”> <hr> The <a href=“http://cnn.com”>CNN site </a> 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. <p> I want <I>more </I> from you, including more images, perhaps an image as a link, done by putting the img tag within the a and /a tags. </body> </html>

More tags <I> Italics </I> <b> Bold </b> <ul> <li> first item in bullet list <li> second item in bullet list </ul> <ol> and </ol> for numbered list

NotePad & Netscape exercise Simple web page

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!

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. <img src=“logo.gif”> <img src=“logo.gif” width=100> may change size <img src=“logo.gif” width=100 height=80> may distort

Netscape to download image Paint Shop Pro to crop image Add img tag to html file

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.

Creating Web Documents Wk 2: HTML & PSP basics