Creating Web Documents Wk 2: HTML & PSP basics
Download
Report
Transcript 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>
Used by
bookmarks,
<head>
search engines
<title> </title>
</head>
<body>
Arguments: text,
…
link, bgcolor,
background
</body>
</html>
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.