Creating Web Documents Wk 2: HTML & PSP basics Discuss sites HTML, PSP lesson Assignment: first Web...
-
Upload
verity-harvey -
Category
Documents
-
view
212 -
download
0
Transcript of Creating Web Documents Wk 2: HTML & PSP basics Discuss sites HTML, PSP lesson Assignment: first Web...
![Page 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.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e665503460f94b60a95/html5/thumbnails/1.jpg)
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.
![Page 2: 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.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e665503460f94b60a95/html5/thumbnails/2.jpg)
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
![Page 3: 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.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e665503460f94b60a95/html5/thumbnails/3.jpg)
Web as medium / channel
• Compare reading newspaper, watching TV, listening to radio, and … browsing the Web
• Metaphor: Web site as a place to visit.
![Page 4: 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.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e665503460f94b60a95/html5/thumbnails/4.jpg)
Good & Bad sites
• What did you find?
![Page 5: 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.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e665503460f94b60a95/html5/thumbnails/5.jpg)
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>
![Page 6: 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.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e665503460f94b60a95/html5/thumbnails/6.jpg)
Basic format
<html>
<head>
<title> </title>
</head>
<body>
…
</body>
</html>
Arguments: text, link, bgcolor, background
Used by bookmarks, search engines
![Page 7: 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.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e665503460f94b60a95/html5/thumbnails/7.jpg)
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>
![Page 8: 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.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e665503460f94b60a95/html5/thumbnails/8.jpg)
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
![Page 9: 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.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e665503460f94b60a95/html5/thumbnails/9.jpg)
NotePad & Netscape exercise
Simple web page
![Page 10: 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.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e665503460f94b60a95/html5/thumbnails/10.jpg)
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!
![Page 11: 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.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e665503460f94b60a95/html5/thumbnails/11.jpg)
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
![Page 12: 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.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e665503460f94b60a95/html5/thumbnails/12.jpg)
Netscape to download image
Paint Shop Pro to crop image
Add img tag to html file
![Page 13: 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.](https://reader036.fdocuments.in/reader036/viewer/2022072013/56649e665503460f94b60a95/html5/thumbnails/13.jpg)
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.