intermediate html - hcs.harvard.eduseminar/packets/doc/intermediate_web_pa… · web...

INTERMEDIATE HTML

Copyright © 1998 The President and Fellows of Harvard CollegeAll rights reserved

Intermediate HTMLThe Harvard Computer Society

Table of Contents

TABLE OF CONTENTS

INTRODUCTION 1

IMAGES 1

IMAGEMAPS 3

TABLES 4Advanced Page Layout Using Tables 5

FRAMES 6Controlling Frames 7More Complicated Layouts 7

FORMS & BASIC CGI 8Counters 8Forms 8

JAVASCRIPT 9 Finding More JavaScript Resources 9

STYLE 10

APPENDIXHTML Tag Reference AAcquiring Images BUsing FTP C

SEMINAR EVALUATION FORM


Page 1

INTRODUCTIONWelcome to the Harvard Computer Society's Intermediate HTML Seminar. This seminar presumes a knowledge of the material covered in our Basic HTML seminar, namely creating simple HTML documents on Harvard’s fas.harvard.edu Unix cluster. The goals of this seminar are as follows:

1.To teach you more advanced Web design techniques, such as tables, frames, and other formatting constructs.

2.To introduce you to using forms and FAS's CGI programs. 3.To provide pointers on principles of good design and proper HTML style; that is, how to make

pages that not only look good but also are designed well.

IMAGESEveryone likes having images on their web page. They liven up a page and provide content in a way that words alone cannot duplicate. However, good use of images takes some effort. You want to have images that look good with the rest of your page, yet are not so large that they (1) overshadow the rest of the page, nor (2) take a very long time to display to anyone without a high-speed internet connection. Furthermore, although it’s often tempting to put that neon-orange-and-fuschia animated GIF all over your page, sometimes restraint is wise. For tips on designing and creating images for your web page, please see our Graphic Design with Photoshop seminar; for now we will concentrate on the mechanics of manipulating images with the <IMG> tag.

A brief refresher: the basic syntax for including an image in a web page is <IMG SRC="image_file_name.jpg">

The image file may be either a JPEG, GIF, or (for the latest versions of Netscape and Internet Explorer) PNG format graphic.

It is always important when using images to remember that not everyone is using a web browser that can display them. (For instance, many people use the Unix web browser Lynx) To take this into account, one uses the ALT attribute of an <IMG> tag. This tag sets an ALTernate text expression that is displayed in place of the image. For example:

<IMG SRC=”veritas.jpg” ALT=”Photo of a Harvard shield”>Text-only browsers will display the ALT text instead of the image; modern graphical browsers display it while the image is still downloading and also in a popup flag if you hold your mouse over the image.

Secondly, you can specify the alignment of an image with the ALIGN attribute. This can be set to any one of bottom, middle, top, left, right. The first three of these refer to how the image relates to the text that is on the same line, by aligning either the bottom, middle, or top of the image and text as follows:

ALIGN="BOTTOM" ALIGN="MIDDLE" ALIGN="TOP"

In contrast, ALIGN="LEFT" and "RIGHT" move the image to the side of the page and allow text to wrap around it, just as this text wraps around the image to the left. Note that if you have an image aligned to the side and you want text to stop wrapping around it, <BR CLEAR="ALL">

Intermediate HTMLThe Harvard Computer SocietyPage 2

will insert enough vertical space so that the next line begins after the image, just as this line does.Often one will want to have some space around an image. This can be accomplished with the HSPACE and VSPACE attributes. When one of these is set to some number, then that number of pixels (dots on the screen) will be left blank on either the horizontal or vertical edges of the image. This allows you to have an image next to text without the two being too close together. Similarly, the BORDER attribute can be used to specify a visible border on all sides of the image; this is particularly relevant if the image is inside a <A HREF="…"> link tag, in which case the BORDER attribute sets the width of the blue border around the image. Thus

<IMG SRC="bluebird.jpg" ALIGN="LEFT" HSPACE="20p" BORDER="10">will insert an image on the left side of the screen with 20 pixels of horizontal space surrounding it and a ten pixel wide border.

Lastly, there are the HEIGHT and WIDTH attributes, which specify the height and width of the image. If these are set to the image’s actual dimensions in pixels (which can be obtained in any graphics viewer program or in Netscape through View Image and then Document Information from the View menu) then they will allow the web page to display faster while the image is still downloading. Thus it's always good style to include HEIGHT and WIDTH tags set appropriately. whenever possible to speed display of web pages. In addition, you can change the HEIGHT and WIDTH attributes to resize the image on your page. For instance,

<IMG WIDTH="300" HEIGHT="200" SRC="my_graphic.gif"> would force the dimensions of my_graphic.gif to be 300 pixels by 200 pixels, even if that meant stretching or resizing the original image. Once again, this does not work with all browsers, so be cautious in using it.

2


Page 3

IMAGEMAPSImagemap: A single image file (JPG, GIF, etc.) which is divided into regions by the <MAP> tag. Each region, known as a hot spot, is a link to different URL.

Imagemaps are a means of creating hot spots within images. Hot spots refer to areas of an image that you can link to URLs just as you can link text to URLs with the <A HREF> tag. This is accomplished with the standard <IMG> tag along with a new tag, the <MAP> tag. In order to tell a browser which areas of an image refer to links, you must include <AREA> tags after a <MAP> tag specifying exactly which block of pixels (the tiny dots that compose an image) is to be hyperlinked. These areas are most often rectangular in shape. An example best illustrates the use of image maps:

<IMG BORDER="0" SRC="graphics/home.gif" USEMAP="#menu">

<MAP NAME="menu"> <AREA SHAPE="rect" COORDS="140,282,261,296" HREF="about_me/"> <AREA SHAPE="rect" COORDS="288,284,414,300" HREF="my_friends/"> <AREA SHAPE="rect" COORDS="171,306,302,324" HREF="classes/"> <AREA SHAPE="rect" COORDS="207,338,403,353" HREF="computer_links/"></MAP>

The example above gives the graphic home.gif four hot spots, each of which is linked to another page. Each <AREA> tag corresponds to a region within the image; these are most often rectangular but can be other shapes as well; rect, circle, poly, and default are all legal values for the SHAPE attribute.

The COORDS attribute for the rect shape refers to the (x, y) pixel coordinates of the top-left-hand corner of a hot spot and the coordinates of the bottom-right-hand corner. The top-left-hand corner of the entire image is defined to be coordinates (0, 0), so x increases to the right and y increases moving down. The easiest way to obtain the values for the COORDS attribute is to use an image-editting program such as Adobe Photoshop to trace the edges of your hotspots and record their pixel coordinates. For specifics on the COORDS values for other shapes, please consult an online tutorial.

The HREF attribute of the AREA tag refers to page to which the area is linked, as with the <A HREF> tag.

Once you have defined the areas of your map, you give the map a NAME. Then add to your <IMG> tag the USEMAP="#name" attribute. Note that you have to include the # sign for this to work, just as with links to places within the same document. You can also supply an ALT tag for each area of your map;the alt text will be displayed when you hold your mouse over that portion of the image.

For a good example of using all of these features in a real-world web site, take a look at the menu bar at the left side of the www.college.harvard.edu web site. Each of the links ("Add Event", "Map", etc.) are just a hotspot of the image ivy_side.jpg.


TABLESSo far, you’ve just been entering your text in a fairly linear format. It moves down the screen, left to right, in a fairly predictable way. But what if you want to do something a bit more complicated, such as display two columns of text? Or a paragraph surrounded on all sides by pictures?

The answer is HTML tables. Tables provide you with a grid structure, similar to that of aspreadsheet program, where text and images can be placed in different cells of the grid. Tables are useful both for displaying actual tables of information on your page, and for creating more advanced page layouts that cannot be accomplished any other way. The following information has been adapted from the online materials of the National Center for Supercomputing Applications.

A table is composed of a series of nested tags, just like any other HTML construct; the only difference is that a table is somewhat more complicated. Tables contain horizontal rows, each of which is composed of one or more cells, which can contain either header or data information. The following are the primary tags necessary to construct a table:

Element Description<TABLE> ... </TABLE> This tag defines the overall table and encloses all of the tags that follow. In

addition, the table tag has a variety of attributes which will be explained below.

<TR> ... </TR> Table Row. Specifies a horizontal row within a table, and contains some number of <TD> and <TH> tags.

<TD> ... </TD> Defines a Table Data cell, which contains the text or images that are the table's contents. By default the text in this cell is aligned left and centered vertically.

<TH> ... </TH> Defines a Table Header cell, which is similar to a data cell but is meant to head a column or row. By default the text in this cell is bold and centered.

Thus, a typical HTML table will looks something like the following:

<TABLE> <TR> <TH> Column A Header </TH> <TH> Column B Header </TH> </TR> <TR> <TD> Cell A-1 contents </TD> <TD> Cell B-1 contents </TD> </TR> <TR> <TD> Cell A-2 contents </TD> <TD> Cell B-2 contents </TD> </TR> <TR> <TD> Cell A-3 contents </TD> <TD> Cell B-3 contents </TD> </TR></TABLE>

The above would display something like:

Column A Header Column B HeaderCell A-1 contents Cell B-1 contentsCell A-2 contents Cell B-2 contentsCell A-3 contents Cell B-3 contents

4


Page 5

Table Attributes. These may be applied to table rows, header cells, or data cells. Attributes defined for a <TH> or <TD> cell override the defaults set in the surrounding <TR>.

Attribute DescriptionALIGN= {"LEFT", "CENTER", "RIGHT"}

VALIGN={"TOP", "MIDDLE", "BOTTOM"}

COLSPAN="n"

ROWSPAN="n"

WIDTH="n"

Sets the horizontal alignments of the contents of cell.

Set the vertical alignment of a cell.

Increases the number (n) of columns a cell spans.

Increases the number (n) of rows a cell spans.

Specifies the width of a cell, in either pixels or a percentage of the table width.

So if you were to define a cell as <TD ALIGN="RIGHT" VALIGN="BOTTOM" ROWSPAN="2" WIDTH="25%">

it would create a cell which covered 25% of the width of the table, spanned two rows vertically, and had its contents located in the lower right corner.

In addition, there are a variety of attributes that apply to the <TABLE> tag itself. One of these is an ALIGN={"LEFT", "CENTER", "RIGHT"} attribute that functions the same as all other ALIGN attributes. You can specify the WIDTH of the entire table in either pixels or as a percentage of the entire screen. Lastly, there is the BORDER attribute, which specifies how wide in pixels the border around a table and between table cells is. By setting this border equal to 0, you can create a table with invisible boundaries, something that proves to be very useful for page layout.

Needless to say, you can interchange <TD> and <TH> cells however you desire. With the COLSPAN and ROWSPAN attributes, you can change the number of cells you have in any given row or column, and you can use the WIDTH attribute to control their size. There are other more advanced attributes, such as word wrap and background color, which we do not have time to cover here but which are covered in numerous HTML references on the web. All this allows you an extraordinary degree of control over the final appearance of your table.

Advanced Page Layout Using TablesBecause of this flexibility and control, some HTML authors use tables to present non-tabular information. By setting BORDER="0" and manipulating cell sizes and positions appropriately, one can exercise tremendous amounts of control over the visual appearance of a page. In fact, this is by far the most common use of tables on the web today! Again, we present the example of www.college.harvard.edu.

Looking at the HTML source code for this page, we can see that several nested tables are used to divide the page into several columns and present nicely formatted data in each. First, a table for the navigation bar at the top of the page is defined. Then, the header image ("Harvard College Online") is placed on the page. Then, the rest of the page is defined as a large table, with the left-hand column being the imagemap and the right-hand column being defined as another table into which all the page's content is placed.

Mastering the use of tables for page layout is one of the signs of a really good web designer, and the easiest way to gain this skill is to take examples from others (like the College page or www.hcs.harvard.edu) and practice them.


FRAMESFrames: An HTML construction that allows a web browser to be divided into different sections, which can have separate HTML documents loaded independently of the rest of the page.

Normally, a web browser displays only a single page at a time, but by using frames, you can divide the window into multiple regions, each of which displays a different web page. By far the most common use of this is to provide a title bar or navigation bar which remains fixed in one part of the screen while other regions of the screen change or scroll.

Frames are arranged using the <FRAMESET> tag. A frameset consists in one or more frames and defines their sizes and relative positions. A given frameset may divide the screen vertically or horizontally, but not both. (More on that later…) By setting either the ROWS or COLS attribute equal to a list of sizes, you define how the screen will be divided. You may specify sizes in either percentages of the screen or in absolute pixels, and you may use the * character to mean “all remaining space.”

For example, the code <FRAMESET COLS="50%,50%">..</FRAMESET>

divides the screen vertically into two columns, each of which is half the screen wide. In contrast,<FRAMESET ROWS="120,72,*">..</FRAMESET>

divides the screen into a horizontal region 120 pixels tall, another region 72 pixels tall, and a third region comprising all of the remaining space.

Now, inside of each frameset the <FRAME> tag is used to specify what is to be displayed in each region. Similar to the IMG tag, the frame tag has one attribute, SRC, which should be the URL of the file to display. So a basic frame tag would look like

<FRAME SRC="information.html">

To put it all together, simply insert the appropriate <FRAME> tags inside the <FRAMESET>, and then put the entire frameset in a HTML file in place of the <BODY> element. That’s right, on a web page designed with frames there should not be any <BODY>…</BODY> tags; in effect the frames become the body of the web page. Thus:

<HTML><HEAD> <TITLE>Frames Demo Document</TITLE> </HEAD>

<FRAMESET ROWS="120,72,*"><FRAME SRC="header.html"><FRAME SRC="middle.html"><FRAME SRC="main.html"></FRAMESET>

</HTML>

It's worth noting that just as the frames document doesn't contain any <BODY> element, the documents which are displayed in the frames need not contain a <HEAD> section; the header information for the framing document is used for all pages which appear in those frames. That is, there is only one <HEAD> section, despite the possibility of displaying multiple pages of HTML source code.

6


Page 7

Controlling FramesJust as with tables, it is possible to control many aspects of how frames are displayed and behave, via setting attributes of the <FRAME> tag. Once again, not all older browsers support all of these attributes, but the most recent several versions of both Netscape and Internet Explorer support all of the following.

By adding the attribute SCROLLING="NO" to a <FRAME> element, you prevent the page displayed in that frame from scrolling at all, even if it is larger than the visible area. This is especially useful for menus and navigation bars which should be static.

Presence of the NORESIZE attribute prevents a frame from being resized by the user; if it is not present the user may click and drag the frame border to resize them.

BORDERCOLOR="#AABBCC" can be used to change the color of the border between frames, using either the standard HTML color names or RGB codes; this attribute may be applied to either an individual frame or the entire frameset depending on whether you wish to change the border of only one or of all the frames. If you wish to change the size of the border between frames, use the BORDER attribute; just as with tables, BORDER="0" will remove the border entirely while using a nonzero integer lets you set the border to be as wide or narrow as you like.

More Complicated Layouts So far we have only used frames to divide the screen in one direction at a time, either horizontally or vertically. By nesting <FRAMESET> tags within one another, it is possible to divide the screen up however you may please. To do this, simply place a second frameset element inside the first, in the place of where you would normally place a frame. An example will probably make this clearer. Consider the following:

<FRAMESET ROWS="20%,*"><FRAME SRC="title.html">

<FRAMESET COLS="33%,*"><FRAME SRC="navigation.html">

<FRAME SRC="information.html"> </FRAMESET></FRAMESET>

This will first divide the screen into two horizontal regions, one of which occupies the upper 20% of the screen, and the other fills the remaining 80%. Then the latter region is itself divided into two regions vertically, one of which is twice the size of the other. Thus we have divided the screen into three separate regions via the use of two nested framesets. Similar techniques can be used to generate any layout desired, although there are aesthetic reasons to not overuse frames too heavily.

Frames and Links When you click on a link in a framed document, the default behavior is for the page referenced by that link to load only in the current frame, leaving the rest of the frames unchanged. Often, this is what you desire; however, when you want other behavior it is quite easy to override the default. The <FRAME> tag can take an additional attribute, NAME, which allows you to give each frame a unique identifier. For instance,

<FRAME SRC="information.html" NAME="info">Then, if you wish a link to change the contents of that frame, add a target attribute to the link:

<A HREF="information2.html" target="info">More information! </a>When you click on that link, information2.html will load in the frame named info, leaving all other frames alone. If you wish to have a link replace the entire contents of the browser window, closing all frames, you


can use the special name “_top”. In other words, <A HREF=”http://www.somewhere.com” target=”_top”>Go somewhere!</a>will make www.somewhere.com take up the entire web browser window, rather than just a single frame.

FORMS & BASIC CGIIf you’ve surfed the web a lot, you’ve probably encountered the abbreviation CGI. This stands for Common Gateway Interface, which is a standard way of allowing computer programs to interact with web pages. While students cannot currently create their own CGI programs on FAS due to security and maintenance concerns, this may change in the near future. In the meantime, there are a few preinstalled scripts available for use by anyone with an FAS account. These are documented at http://www.fas.harvard.edu/computing/docs/web/faqs/cgi.html.

CountersThe simplest of these scripts is the counter script, which provides a numerical counter of how many times your web page has been accessed. To use the counter script, add the following code to your page: <IMG SRC="http://www.fas.harvard.edu/cgi-bin/counter?username+5">where username+5 is your fas username plus five characters that identify that particular counter, such as jharvardpage1. That way, if you have more than one page, you can put a counter on each one as long as each page has its own unique five character extension.

FormsAnother script of particular interest is form, which can be used to process a form filled out on the web. If you have ever used a search engine on the Web like Yahoo!, you have used a form. As is explained at the URL above, the form script takes the input from a submitted form and emails it to a user. If the page containing the form is a file named filename.html, the script then looks for another file named filename.reply in the top level of the user's public_html directory. If this file is found, the scripts returns this file as an html page. Otherwise, the script returns a standard page thanking the user for the input. Typical usage for this script is as follows:

<FORM METHOD="POST" ACTION="http://www.fas.harvard.edu/cgi-bin/form"><INPUT TYPE="HIDDEN" NAME="mailto" VALUE="[email protected]">Name: <INPUT TYPE="TEXT" SIZE="20" NAME="name">Favorite Color: <INPUT TYPE="TEXT" SIZE="40" NAME="word">

</FORM>

The <FORM> tag begins the form and encloses all the other tags which make it up, similar to how the TABLE tag encloses the rest of the table. The METHOD attribute can be set to GET or POST; most scripts use the POST method. The ACTION attribute specifies the URL of the CGI program to which you want the form data sent.

Between <FORM> and </FORM> can be any of several different user-input types. The example above uses the <INPUT TYPE="TEXT"> type to create a one-line text-entry field for a user's input. Notice that we must name this input field, so that our CGI program can identify which input is associated with each field. The SIZE attribute specifies how long the input field is. The other input type used above is TYPE="HIDDEN", which specifies that we want to submit to our CGI program a hidden piece of data that is not displayed on the HTML itself. However, you should note that this information is available by looking at the HTML source, and can be altered if a user so desires. In this instance, we use it to submit the address to which we want the form's data sent. You can also create radio buttons and check boxes

8

Page 9

within forms; to learn more about these TYPEs, visit http://www.w3.org/TR/REC-html40/interact/forms.html.

JAVASCRIPTIf you've paid any attention at all to the development of the web over the past few years, you’ve surely heard of Java and JavaScript, two programming languages which bring the web to life and enable the creation of interactive and dynamic HTML pages. While truly teaching either of these would require a programming course far larger in scope than this seminar, we can at least offer you a quick glimpse of what is possible via some code you can cut-and-paste into your own web pages.

There are many pages throughout the web that boast collections of JavaScript code for beginning web programmers to incorporate into their pages. Here we'll follow the the true spirit of the web and introduce a simple onMouseover script that you can easily just enter into your web page.

The idea behind this script is simple: when someone looking at your page places their mouse over a certain image, we would like the image to change. You've probably seen lots of pages incorporating this script to highlight text, create a "push-button" effect, or greatly annoy the person looking at the page (it's all relative).

Every JavaScript application should be enclosed in the <SCRIPT> … </SCRIPT> tags, so that it may be hidden from older browsers (that don't support the JavaScript language) and to explain to the newer browsers how the code should be interpreted.

We then simply define an action with the function block. Here our function setImage will take two arguments (ImgName and NewSrc), and set the current image to use to be the value of the NewSrc variable.

<SCRIPT language="JavaScript"></SCRIPT>

The accompanying code shows how this function is actually implemented, inside the <A HREF>…</A> tags surrounding your image. The value of the HREF attribute is where the user should be sent upon clicking the image, as normal. The onMouseOver and onMouseOut directives call the function setImage which we just wrote, and therefore tell the browser to replace something with foo or bar as appropriate. These are just arbitrary names, you should insert the actually names of your images instead of foo and bar, and the handle you're giving your base image instead of something.

<A HREF="newpage.html" onMouseOver="setImage('something', 'bar')" onMouseOut="setImage('something', 'foo')"> <IMG SRC="foo" NAME="something"></A>


Finding More JavaScript ResourcesWe realize this is just the tip of the iceberg, and it may still seem very confusing. But we encourage you to just take a look at the source for people's page, and try out what they've implemented. Also, web searches through www.hotbot.com and www.yahoo.com for "JavaScript" will turn up lots of help documentation and new scripts.

10


Page 11

STYLEHopefully by now you feel fairly confident in your ability to create a web page. You can create and use images, change document and font colors, and construct tables. You may be tempted to run out and use these new tools to jazz up your web page, make it as cool as can be.

This is a probably a good idea, we agree, but you need to use some caution as well. Designing good web pages is not just about knowing lots of tags—it’s also about having a good sense of design and style, of which tags actually look good together and when. Yes, you can put neon fuchsia text on a purple background with flashing green images, but that doesn’t mean you should. Try to design your web page to not only use lots of tags, but to actually look good.


Appendix A

APPENDIX A: HTML TAG REFERENCEHere is a concise reference to most of the HTML tags we have covered in these seminars.:<HTML>...</HTML> Encloses the entire document.<HEAD>...</HEAD> Encloses the header information<TITLE>...</TITLE> Is the title of the document<BODY BGCOLOR="color" TEXT="color" LINK="color" ALINK="color" VLINK="color" BACKGROUND="imagename.jpg">...</BODY>

Encloses the body of the document.

<P> ends a paragraph<BR> adds a line break<B>...</B> makes text bold<I>...</I> makes text italic<H1>...</H1> creates a heading<H2>...</H2> creates a smaller

heading<H6>...</H6> the smallest heading (sizes range

from 1 through 6)<UL>...</UL> Creates an unordered (bulleted) list.<OL>...</OL> Creates an ordered (numbered) list.<LI> Marks an element in a list<PRE>...</PRE> Displays preformatted text<BLOCKQUOTE>...</BLOCKQUOTE> Displays a Block Quote<A HREF="url">...</A> Creates a hyperlink.<IMG SRC="imagename.ext" ALT="alternate text expression" ALIGN="VALUE" HEIGHT="NUMBER" WIDTH="NUMBER" HSPACE="NUMBER" VSPACE="NUMBER">

Displays an image on a web page.

<FONT COLOR="COLOR" SIZE="NUMBER" FACE="CHOICES">...</FONT>

Changes the font of some text.

<TABLE ALIGN="VALUE" BORDER="NUMBER" BGCOLOR="COLOR">...</TABLE>

Creates a table.

<TR>...</TR> Displays a table row<TH>...</TH> Displays a table header cell<TD>...</TD> Displays a table cell.


Appendix A

APPENDIX B: ACQUIRING IMAGESScanning ImagesYou can scan images using the scanners that are available in several computer labs, including the East Terminal Room (Science Center B14, the room containing the Help Desk), the Mac Classroom (Science Center B11C), the Technology Showcase (across from Science Center 119), and a few of the House labs around campus (particularly those in the Quad).

Locate an available computer that is attached to a scanner, and run the DeskScan II program found on the Apple menu. Place your photo or drawing on the scanner, at the top edge near where the cover hinges. In DeskScan, click the Preview button. This will scan in a preliminary version of your image and display it on screen with a selection rectangle around it.

Use the mouse to move the selection rectangle until it covers only those portions of the image you wish to scan. This allows you to crop out parts you do not want. You can also use the controls on the left side of the DeskScan window to adjust the zoom factor, the brightness, and the contrast of your image. All these settings will appear on the preview image so that you can get some idea of what your scanned image will look like. When you are satisfied with your settings, press the Final button. This will make the final scan and prompt you for where to save the file. You should most likely choose a location on the desktop of the Macintosh you are using. Your image will be scanned and saved to the location you have chosen.

DeskScan saves images in the TIFF file format. Adobe Photoshop can read TIFF images; simply click Open in the File menu and select the TIFF image. If you want to use these scanned images on the web, rather than in a Photoshop image, you will need to convert them to GIF or JPEG images. Instructions for doing this are found in Publishing Your Work, below.

Downloading ImagesAnother way to acquire images is by downloading them from other Web pages. First, you must locate an image on the Web that you would like to download. If you are using a PC, click with the right mouse button on the image and select Save Image or Save Image As…, type a filename, and the image will be saved to your hard disk. On a Macintosh, point to the image and hold down the mouse button until a menu appears. Then, select Save Image or Save Image As…, and enter a filename.

Note: placing an image in a Photoshop document or on your Web page constitutes copying and is illegal for copyrighted images. Many images found on the Internet are copyrighted, as are commercial photographs, including images found in books and magazines. Please check to make sure an image is not copyrighted before placing it on your page. The best place to find images which are legal to copy is through image libraries that are specially designed to provide images you can use. You can find many of these through the Yahoo index. Just go to http://www.yahoo.com/ and then click on World Wide Web, which is found just below Computers and Internet; then select Page Design and Layout, and finally Graphics. Even in these libraries, you should check for copyright information before copying any image.


Appendix C

APPENDIX C: USING FTPThe instructions that follow are for the Macintosh program Fetch. On a PC, you should use the FTP program called WS_FTP, found in Start : Programs : Internet Software. The process for using WS_FTP is largely the same; if you encounter any problems you can consult the online help (press the Help button), get documentation from the Help Desk (or from http://www.fas.harvard.edu/computing/docs/pc/faqs/pc-ftp.html), or ask a User Assistant.

New Connection: • This is the dialog box that appears at the beginning of Fetch.• Under Host, type in the name of the server (e.g. fas.harvard.edu).• Under User ID, type in your user ID (i.e. your email username if logging into

fas).• Under Password, type in your password.

Transferring Files: • Remember to go to the proper directory before downloaing or uploading. For transferring images to be used in Web pages, you should go to the public_html directory. To traverse the directory tree, double-click on a directory to enter it, and use the list box at the top of the FTP session window to move up.

• When transferring files, set the file type to binary. When uploading files to a Unix or PC server, it is important to transfer binary files as Raw Data. If you are transferring to a Mac, MacBinary II is the preferred method. This method will keep all Mac-specific information about the file intact. (NOTE: You will not have these options when using WS_FTP on a PC machine)

• To download files, select the file(s) or directories to download, and then click on Get File… to begin the transfer. Use the option key to select more than one file and/or directory.

• To upload files, select the file to upload, and then click on Put File… to begin the transfer. If you are uploading multiple files/directories, then from the Remote menu, select Put Folders and Files… from which you can select the files and folders to upload.

If you are storing images for a web page on fas, remember to run fixwebfiles before trying to view your new images.

3


Seminar Evaluation Form

SEMINAR EVALUATION FORMWe would appreciate very much your evaluation of this seminar.

When you have completed this form, please give it to one of the seminar's staff members or leave it by the door as you leave.

Thank you for your time.

Please write the date and time of this seminar:

Please rate this seminar by circling one answer for each category.

Overall experience: Poor Good Great Instructor: Poor Good Great Assistants: Poor Good Great

Pace: Too slow Just right Too fast Level: Too basic Just right Too advanced Detail: Too little detail Just right Too much detail

Do you feel comfortable with HTML now? If not, why not?

What, if anything, should we add to or omit from this seminar?

What can the instructor and assistants improve upon?

What additional seminars would you like us to offer? Would you attend?

Do you have any other comments or suggestions?

5

intermediate html - hcs.harvard.eduseminar/packets/doc/intermediate_web_pa… · web...

Documents