October 27, 1998

Creating andmaintaining apersonal website

Christopher F Baum

Department of Economics and

Faculty Microcomputer Resource Center

Boston College

October 27, 1998

Introductionn A personal website may be used to make your

teaching and/or research materials available tostudents, colleagues, and potential employers

n Most ÔproductivityÕ software (e.g. Microsoft Office)may be used to rough out webpages, and handlecumbersome tasks such as table creation

n A little knowledge of HTML (HyperText MarkupLanguage), coupled with a text editor, goes a longway in improving webpagesÕ appearance

October 27, 1998

Introduction

n In order to present complex mathematics, graphsinterspersed with text, etc., Adobe Acrobat may beused to create platform-independent, downloadableÔportable documentsÕ (PDFs) which may be viewedon screen, and printed in their original form

n Your personal website may also be used todistribute programs, data, and other researchmaterials that you want to share with students andcolleagues via FTP

October 27, 1998

Outline

n How do web pages work?

n Establishing and accessing your web account

n Creating a set of draft pages

n Refining your pages

n Creating and linking PDF files

n Establishing and linking FTP-accessible files

October 27, 1998

How do web pageswork?

n Each page on the Web is addressed by its URL(uniform resource locator), which specifies:

n Protocol to be used for access: e.g. http:

n Hostname on which the object is located: e.g.fmwww.bc.edu , a machine connected to the Web

n Directory in which the object is located, in UNIX(forward-slash) format: e.g. /ec-c/f98/

n Name of the page (file): e.g. ec761.f98.htmln http:// fmwww.bc. edu / ec -c/f98/ec761.f98.html

October 27, 1998

Addressing a page

n The protocol for HTML pages is http: , theHyperText Transport Protocol

n HTML files are plain (ASCII) text

n Other protocols are used to access other Webservices: ftp: for downloading files, telnet: toconnect to a remote machine interactively,mailto: to send a mail message to a specifieduser

n URLs may be case-sensitive (and on UNIX hostsgenerally are)

October 27, 1998

Cross-references

n Web pages refer to other pages (and other URLs ingeneral) via links, the highlighted/underlinedsegments of the page that make the pagehypertextual

n Links to other pages in your own directory may berelative, that is, referring to a location relative to thebase page

n Links may also refer, if Ôfully qualifiedÕ, to URLs onother hosts, or other directories on your host

October 27, 1998

Establishing a webaccount

n Personal web pages in BCÕs domain are stored onserver www2.bc.edu . Your homepage on thatserver will be referenced ashttp://www2.bc.edu/~usernamewhere that URL actually references the filedefault.html on that directory.

n When you go to the ÔStudent/Faculty/Staff PersonalPagesÕ link on the Econ homepage (ÔPersonal WebPage ServerÕ on InfoEagle), you have the option toÔRequest a WWW Account.Õ

October 27, 1998

Establishing a webaccount

n When you ÔRequest a WWW Account,Õ that useraccount, directory and default home page(default.html ) will be created, and you willreceive a confirmation of those specifications. Thedefault page will merely contain ÔWelcome to JaneDoeÕs Home Page!Õ

n You will be given 10 Mb space on www2.bc.edufor your Web files. Since most HTML files (andeven many graphics) are only 5-10 Kb, this shouldbe more than adequate for most users.

October 27, 1998

Building your homepage

n For the shorthand URL (ending in ~username ) tofunction, you must have the page default.htmlin your www2 directory. Filenames on www2 (whichis an IBM UNIX (AIX) machine like fmrisc ) shouldnot contain spaces, and are case-sensitive. Thisimplies that links to other pages on your directorymust respect case: ps1.html , PS1.html andPs1.html are three different files. For simplicity,use lowercase in all filenames, and use the .htmlextension throughout to signal html files.

October 27, 1998

Building yourhome page

n You move files between your desktop machine andwww2.bc.edu via FTP; telnet is not enabled onthis machine. On a Macintosh, use Fetch; onWindows, download the WS_FTP LE applicationfrom www2 (not included in Eaglenet Resources).

n Alternatively, Mac users have a better option: thefull BBEdit package, which includes ÒOpen fromFTP serverÉÓ and ÒSave to FTP serverÉÓcommands. These facilities are not included in thefreeware BBEdit Lite package.

October 27, 1998

Building yourhome page

n There are two options for those constructing HTMLpages:

n Use a program that manages all aspects of theHTML, ÒhidingÓ the HTML details, link addresses,etc.; or

n Use a program to create the basic HTML code, butthen use a text editor to modify and tweak it to meetyour needs

n The second option requires more investment, butmay be less frustrating in the long run.

October 27, 1998

Building yourhome page

n Programs which support the first option (handlingall the details, enabling you to remain ignorant ofHTML), such as Netscape Composer, MicrosoftFrontPage or AdobeÕs PageMill, provide anenvironment in which some elements of pageconstruction will inevitably be limited by theprogram. It may well be easier to learn a limitedamount of HTML and ÔtweakÕ the HTML with a texteditor than determine how to convince the programto do exactly what you want.

October 27, 1998

Building yourhome page

n The second option is supported by the ÔOfficeÕenvironment, in which Word (97/98) and Excel(97/98) both have ÔSave as HTMLÕ commands ontheir File menu. These options are especially usefulin creating tabular webpages; HTML tables aresimple constructions, but require lots of markupcommands. A Word table or Excel sheet willautomatically create the required markup.

n To tweak the page, use a text editor (not a wordprocessor!) such as BBEdit.

October 27, 1998

Building yourhome page

n If you use a word processor (including Word 9x) tomodify an existing webpage, you must alwaysremember to save it as a text file (or, in Word, Saveas HTML). A Web browser cannot process a word-processor file saved in its own format.

n A text editor (such as BBEdit) is much easier to usefor this task, and Web browsersÕ ability to open alocal HTML file allow you to ÔpreviewÕ your pages(and test everything but the links) before uploadingthem to the website.

October 27, 1998

Building yourhome page

n As a first task, retrieve your default.html pagefrom www2.bc.edu , and make some simplechanges to the page with a text editor (or with Word9x, which will import the file as HTML; remember toSave as HTML).

n Try out the procedure of web page modification byadding the lineÒThis page is under construction<p> Ófollowing the ÒWelcomeÓ line, and FTP the pageback to www2.bc.edu . Check it out in Netscape!

October 27, 1998

Principles of HTML

n HyperText Markup Language (HTML) is plain ASCIItext which uses ÒtagsÓ to Òmark upÓ the documentÐsimilar to TeX/LaTeX, or DOS Word Perfect.

n Tags are denoted by <tag> or <tag>…</tag>.

n Like TeX, the form of the source document doesnot matter; you may type any amount of text oneach line, and the line breaks will not affect theWeb browserÕs processing of that HTML code. Youcannot use tabs or spaces to align HTML output inany reliable fashion.

October 27, 1998

Principles of HTML

n You cannot control the userÕs browser preferences,so that the size of text, font, and width of screen areall up to the userÕs control. Generally, text whichappears to be the right size on a Windows webbrowser will be very small when viewed in the samebrowser on a Macintosh (and vice versa). Someusers will view the page using a larger monitor;your page should be flexibly designed so that it canbe viewed comfortably with any screen width. Itshould avoid extreme font sizes.

October 27, 1998

Principles of HTML

n Every document should begin with <HTML> andend with </HTML>.

n Two sections should be present:<HEAD>…</HEAD><BODY>…</BODY>

n The <TITLE>…</TITLE> in the HEAD section isused to control the text displayed on the browserÕswindow bar; it should always be filled in with a shorttext phrase (for bookmark use). It is usually the onlymaterial in the HEAD section of a webpage.

October 27, 1998

Principles of HTML

n The BODY section contains the body of thedocument. The beginning tag may be used to setthe background color for the whole page:<body bgcolor=00ccff>will create a page with a light blue background. Thesix hex digits represent the amount of Red, Green,and Blue, respectively, in the background color,ranging from 00 (no color) to FF (full color).

n Choices of background color may be viewed athttp://www. lynda .com/ hexh .html

October 27, 1998

Principles of HTML

n The single tag <br> , or break, is used to insertspacing in text flow; it is the equivalent of theÒreturnÓ on a typewriter.

n The single tag <p>, or paragraph, inserts both aÔreturnÕ and a blank line in text. It is the equivalentof hitting ÔreturnÕ twice on a typewriter.

n Strictly speaking, <p> should appear at thebeginning of a paragraph, with </p> at the end.Very few HTML authors obey this syntax (andbrowsers do not enforce it).

October 27, 1998

Principles of HTML

n The single tag <hr> , or horizontal rule, inserts aline across the screen. It may be modified bysize=n , where larger values of n imply thickerrules.

n A single-color graphic with height=2 or 3 isprobably more effective in many cases than ahorizontal rule:<IMG SRC=“/ gif -bin/990033. gifheight=“3” width=“576”>

October 27, 1998

Principles of HTML

n Within the document, headings and subheadingsmay be designated with <Hn>..</Hn> tags, forn=1 (very large), 2,É6. I recommend usingheadings 2, 3, and 4 for most uses. Headingsautomatically create breaks and vertical spacing.

n Text with a particular formatÐe.g. listing of acomputer programÐmay be tagged asÒpreformattedÓ with <pre>...</pre>. Thecontents of that block will be displayed as theyappear. This should not be overused!

October 27, 1998

Principles of HTML

n Within a text block, you may specify that text is tobe bold (<b>…</b>) or italic (<i> ...</i>). Becautious with italic text, which is often quite difficultto read in a browser. You may also specify that thetext is to be larger via <big>…</big>. There aretags for more precise font size control, but there isno direct specification of, e.g., point size, as youhave in a word processor.

n Whenever you specify a text style tag (or a headingtag), donÕt forget to turn it off!

October 27, 1998

Principles of HTML

n Lists of items may be created as Unordered (withbullets) or Ordered (numbered) lists.

n Unordered: <UL><LI>…<LI>…

</UL>

n Ordered lists are generated in the same fashion,using the <OL>…</OL> tag. The option START=nmay be used to control the numbering.

October 27, 1998

Refining your pages

n With the tools specified thus far, you can readilyproduce a decent resume/CV or course syllabus.

n Some aspects of printed pages are morechallenging to create as HTML. In particular, youmay want the top of your CV or syllabus to containboth flush-left and flush-right text. This must bedone with HTML tables; you cannot use tabs orspaces to position material on the right margin.

n <center>…</center> is available to centerblocks of text on the screen.

October 27, 1998

Refining your pages

n To create HTML tables, use the Save as HTMLÉfeature of Word 9x or Excel 9x. Material within atable cell will wrap as needed, and the alignmentwithin each column may differ, as specified in theprogram used to create the table. Copy and pastethe table specification (<table>…</table> ) intoyour HTML document.

n An alternate table creation program: BBEditÕs built-in Table Builder tool, available only in the fullBBEdit program (and only for the Macintosh).

October 27, 1998

Refining your pages

n Hyperlinks are inserted with the<A HREF=“linkURL”>…</A>syntax, where the “linkURL” specifies the Webpage to be accessed if the link is hit. The textbetween the tags is underlined and colored toindicate that it is a hyperlink.

n The linkURL may specify a page in your owndefault directory, in which case it need not beÔqualifiedÕ.

October 27, 1998

Refining your pages

n If the linkURL refers to a file in your own directorystructure, you may use Ôrelative addressingÕ suchas /courses/ec362/362ps1.html . This impliesthat you have created a subdirectory in your ownaccount named courses as well as a subdirectorywithin that directory named ec362 . The absence ofa protocol or hostname implies that the link refersto a file on the same server as your homepage.

n These subdirectories may be created with Fetch (orany FTP client).

October 27, 1998

Refining your pages

n If the linkURL refers to a file on another site(including other BC usersÕ sites on www2.bc.edu )you must Ôfully qualifyÕ the URL with the protocol,hostname, and directory: e.g.http://www2.bc.edu/~baum/to refer to my www2 homepage.

n A link to sites outside BC would give the protocoland hostname (e.g. http://www.cnn.com ).

n A ÔmailtoÕ link specifies the valid email address:mailto:baum@bc.edu (note absence of //)

October 27, 1998

Refining your pages

n Links may also refer to specific sections of a pageor document. If the ÔanchorÕ tag<A NAME=target>…</A>is used to specify a point in the document, then alink to that point may be made within the documentwith<A HREF=“#target”>…</A>or from another document with<A HREF=“syllabus.html#grading”>…</A>to link to that section of the document.

October 27, 1998

Adding graphics

n Graphics may be added to a page in either GIF orJPEG format, which may be created by manyprograms (including the sharewareGraphicConverter for Macintosh)

n Graphics produced by digital photography or byÒDrawÓ programs will generally be in other formats(ÒPICTÓ or ÒWindows BitmapÓ); conversion shouldtake the target resolution (72 dpi, 256 colors) intoaccount

October 27, 1998

Adding graphics

n To specify that a graphic should be added on anHTML page, use tag<IMG SRC=“gph.gif” ALT=“alt text”>where gph.gif is the filename of the graphic, andÒalt textÓ displays if the graphic is not available (or ifthe viewer has image loading disabled)

n Even if a single graphic is the sole item to beviewed, it is wise to create an HTML page with animage reference to present it

October 27, 1998

Adding graphics

n The placement of the graphic can be modified withthe ALIGN option to the IMG tag. ALIGN=LEFT,ALIGN=RIGHT, ALIGN=CENTER may be used inconjunction with <BR CLEAR=ALL>, which forcesfollowing elements below a horizontal line(preventing graphics from colliding).

n HEIGHT=n and WIDTH=n options on the IMG tag,where values of n are in pixels, may be used toscale an image (with caution, so as not to degraderesolution).

October 27, 1998

Adding graphics

n An image can be the item enclosed in a link:<A HREF=“URL”><IMG SRC=“img.jpeg”></A>so that the image itself becomes the hyperlink, orÒbutton.Ó

n Graphics should be used with caution; largegraphics will take a long time to load over a modemconnection. Scaling a graphic to a fraction of itsoriginal size will speed up download. To gauge thegraphicÕs size, open it with ÒOpen PageÉÓ in yourbrowser, which will report its size in pixels.

October 27, 1998

Additionalresources

n An excellent summary of all defined ðHTML tags isavailable athttp:// werbach .com/ barebones /

n A guide to many of the resources available on theWeb about website design and maintenance isavailable athttp:// werbach .com/web/ wwwhelp .html

October 27, 1998

Creating PDF files

n HTMLÐthe current language of the WebÐis not wellsuited to the presentation of mathematics, inlinegraphics, or foreign scripts beyond the simpleaccents of major European languages.

n Where the pagination and Òlook and feelÓ of adocument must be preserved, it may be servedover the Web in AdobeÕs ÒPortable DocumentFormat,Ó or PDF: e.g. IRS tax forms aredownloadable as PDF files, as are manyprofessional journals, working papers, and the like.

October 27, 1998

Creating PDF files

n PDF files may be painlessly created on eitherMacintosh or Windows platforms with the ÒfullÓAdobe Acrobat package. The freeware AcrobatReader cannot create PDFs.

n The ÒfullÓ package is available to academicpurchasers for $39.00 via BC Tech Products.

n ÒAcrobat DistillerÓ is the preferred mechanism forcreating PDF files; the ÒPDF WriterÓ option is lessreliable and creates larger, less efficient PDFs.

October 27, 1998

Creating PDF files

n Acrobat Distiller is automatically launched whenÒPDFÓ is selected in the File->Print dialog. Theapplication program (Word, Excel, etc.) creates aprint spool file in PostScript (.ps) format, thenDistiller transforms that file into a PDF file. Distillermay also be used to transform a .ps file created bya different application (such as a Òdvi2ps Ó routinein LaTeX, or GAUSS graphics output) into a PDFfile.

October 27, 1998

Creating PDF files

n Acrobat Exchange may be used to merge PDFs(including those in portrait and landscape format).This is very useful if you are using a wordprocessing application and a separate graphicsapplication (Excel, DeltaGraph, etc.) and want toproduce a single PDF file. Exchange can alsorotate individual pages into the appropriateorientation for viewing on screen.

October 27, 1998

Serving PDF files

n Once PDF files have been created, they may beuploaded to your www2 account, and specified in anHREF link as a target.

n The browser will either download the PDF file to theuserÕs desktop, launch an ÒAcrobat Reader pluginÓto view the PDF within the browser window, orinquire as to how the file should be handled.

n When a downloaded PDF is printed, it will have thesame quality, graphics, fonts, etc. as the originaldocument from which it was distilled.

October 27, 1998

Establishing aFTP directory

n In order to give users access to binary files (suchas compiled programs, datasets in the format of astatistical package, etc.) you have two options:

n Create archive files (e.g. .zip archives):reasonable if the files are not too large

n Become an ÒInfo ProviderÓ and use an account onftp.bc.edu , BCÕs anonymous FTP server, to giveusers access to the files. This may also be a goodoption if the datafiles to be served are large, givenlimited per-user space on www2.bc.edu .

October 27, 1998

Establishing aFTP directory

n When you request Info Provider status (see theHelp Center for the forms), you will be given FTPaccess to a directory on ftp.bc.edu.

n Files in that directory are referenced asftp://ftp.bc.edu/pub/user/username/file.ext

where username is your University username.

n You may transfer files to that directory, create newsubdirectories, etc. using FTP clients such as Fetchor WS_FTP LE.

October 27, 1998

Serving filesvia FTP

n Files may then be referenced on your Web pagesusing the ftp: protocol. The Web browser will usethe FTP protocol to download the specified file tothe userÕs desktop.

n Placing files on an FTP server also makes themaccessible to users with either a Web browser or anFTP client: for instance, users on bcaxp1 orfmrisc cannot run Netscape, but they can use theftp command to download files from ftp.bc.edu.

October 27, 1998

Serving filesvia FTP

n An example of a large-scale delivery system usingHTML pages linked to FTP downloads may befound at http://ideas. uqam.ca

n This site provides searchable access to thousandsof working papers and software components viaHTML-formatted bibliographic information, with FTPlinks to the downloadable documents or programs

n BC EconÕs working papers and software archives:http://ideas. uqam.ca/ideas/data/ bocbocoec .htmlhttp://ideas. uqam.ca/ideas/data/ bocbocode .html