introduction to html - umasspeople.umass.edu/~peterson/intro_html.pdf · introduction to html –...
TRANSCRIPT
Introduction to HTML ndash TOC - ddp iAcademic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML
INTRODUCTION TO HTML 1
USING THE OITUNIX WEB SERVER - 2 SESSIONS 1
Prerequisites 1
GENERAL BACKGROUND 1
Definition of Terms 1How the Web works 2History of Web 2Important Web Terms 3
GETTING STARTED 4
URL AND WEB PAGE LOCATION 4
OITUNIX Directory Structure 4
CREATING YOUR HOME PAGE USING PERSONAL WEB PAGE GENERATOR 4
Personal Web Page Generator ndash Home Page Creation Screen 5Preview Screen for indexhtml 7indexhtml Submission Creation Screen 8Submission Success Screen for indexhtml 9
VIEWING YOUR HOME PAGE IN A WEB BROWSER 1 0
INTRODUCTION TO HTML CODE SYNTAX 1 0
Review An HTML Document Structure 11
BASIC TAGS 1 1
Basic HTML Page Diagram 12
TEXT FORMATTING TAGS 1 3
Text Styles 13Preformatted text 13Extended Quotations 14Special Characters 14Horizontal Rules (ltHRgt) 15
LINKS 1 5
Example Link to External URL 15Example Link to File 15Example Link to a Location Within A Document 16Example Link to E-Mail 16 Possible Hands-On Example 16
LISTS 1 7
Unordered Lists 17Modify the List by Adding a List Item 17
Ordered Lists 17Definition Lists 18
Introduction to HTML ndash TOC - ddp iiAcademic Computing OIT University of Massachusetts 2001-03-20
IN-LINE IMAGES 1 8
EXTERNAL MULTIMEDIA LINKS 1 9
VIEWING HTML SOURCE IN WEB BROWSER 1 9
ADDITIONAL WEB PAGES 1 9
Create another Web page Using the Personal Web Page Generator (General Page) 20Personal Web Page Generator ndash General Page ndash resumehtml 21Preview Screen for resumehtml 23Submission Screen for resumehtml 24Submission Success Screen for resumehtml 25
SETTING FILE PERMISSIONS 2 6
CHECK YOUR RESUMEHTML FILE IN NETSCAPE 2 6
LINK TO YOUR RESUME PAGE FROM YOUR HOME PAGE 2 6
LINK TO YOUR HOME PAGE FROM YOUR RESUME PAGE 2 6
SAVE A WEB IMAGE ON YOUR PERSONAL COMPUTER 2 7
MOVE THE SAVED IMAGE TO OITUNIX WEB SERVER USING FTP 2 8
Startup of the Session Properties Window 28
ADD THE PHOTOJPG IMAGE TO YOUR RESUME PAGE 2 9
TABLE CREATION 3 0
Basic Table Diagram 30
CHANGING THE COLOR OF YOUR BACKGROUND TEXT AND LINKS 3 1
APPENDIX A ndash INDEXHTML SOURCE LISTING 3 3
APPENDIX B ndash RESUMEHTML SOURCE LISTING 3 6
APPENDIX C ndash SUMMARY OF HTML TAGS 3 8
Comments 38Document Structure 38Document Headings 38Links 38Layout Elements 38Graphics 39Lists 39Text Controls 39Table 40
APPENDIX D HELP WITH HTML 4 1
APPENDIX E SEARCH ENGINE ndash HTML TAGS 4 2
Example HTML code 42
APPENDIX F UNIX COMMANDS 4 4
Introduction to HTML ndash TOC - ddp iiiAcademic Computing OIT University of Massachusetts 2001-03-20
APPENDIX G PICO EDITOR 4 5
APPENDIX H EXAMPLE HTML CODE FOR LINKING TO ACROBAT PDF FILE 4 6
APPENDIX I EXAMPLE HTML CODE FOR LINKING TO EXCEL XLS FILE 4 6
APPENDIX J SAMPLE JAVASCRIPT CODE FOR LAST MODIFED FILE DATE 4 7
Introduction to HTML ndash ddp 1Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML
Using the OITUNIX Web Server - 2 sessions
Prerequisites
bull active account on OITUNIX (must know username amp password)bull be able to successfully log onto your OITUNIX accountbull some familiarity with the UNIX operating system amp Web browsing
General Background
Definition of TermsWWW Web 3W W3 - World Wide Web - The World Wide Web is the multimediapart of the Internet The Web pages must reside on an Internet host with a Webserver Web pages are written in HTML which is plain text (also known as ASCII)and it can be created using any text editor (ex pico emacs or vi on unix)
bull html - HyperText Markup Language - used to build a Web document (youcan look at html source for Web pages by selecting view source when using yourfavorite Web ldquobrowserrdquo)bull ldquobrowserrdquo - program used to display html documents on a computer screenbull URL - Uniform Resource Locator - to specify the location of Web pages on aWeb serverbull http - HyperText Transfer Protocol
Introduction to HTML ndash ddp 2Academic Computing OIT University of Massachusetts 2001-03-20
How the Web worksclient serverbrowsers
History of WebThe Web was developed at CERN the European Particle Physics Laboratory andwas originally intended to combine the ability to ldquolinkrdquo documents to one anotherusing advanced multimedia publishing techniques Secondary documents arecalled ldquopagesrdquo with the top-level document in any series of documents being theldquohome pagerdquo
Tim Berners-Lee the Webrsquos project leader had the foresight to make theunderlying protocols that define the WWW publicly available and he used theInternet as the primary mechanism for disseminating those documents
Introduction to HTML ndash ddp 3Academic Computing OIT University of Massachusetts 2001-03-20
Important Web Terms
World Wide Web ndash the multimedia part of the Internet Web pages reside on anInternet host with a Web server Web pages are written in a language calledHTML which is plain text and can be created using any text editor
HyperText Markup Language (HTML) ndash codes used within a Web document thatprovides Web browsers with display and link information
Web Browser ndash program used to view Web documents Two popular Web browsersare Netscape NavigatorCommunicator and Microsoft Internet Explorer
HTTP ndash HyperTxt Transfer Protocol
URL ndash Uniform Resource Locator ndash specifies the ocation of Web pages on Webservers Ech Web page has its own unique URL
Telnet ndash PC application for accessing an account on a host computer
OITUNIX ndash host for accounts and Web server at OIT
Pico ndash simple text editor on OITUNIX
UNIX commandsls ndashla list files and permissions in current UNIX directorycd directory change directory (ex cd public_html)pico file open your file in the pico editor (ex pico indexhtml)
Introduction to HTML ndash ddp 4Academic Computing OIT University of Massachusetts 2001-03-20
Getting Started
For this class we will be working with two applications simultaneously on the PC andwill be switching back and forth between them Telnet will be used to connect to yourOITUNIX account and the Netscape Web browser will be used to view your Webpages
Begin your Telnet session by entering your OITUNIX account name and password Toedit afile once it is created
1 changeto the public_html directory with the cd command2 use pico to edit the file3 save changes4 use Web browser to view results5 cycle through these steps as needed
URL and Web Page Location
Your Web pages must be stored in the public_html directory on OITUNIXYour home page should be named indexhtml Any Web pages not calledindexhtml must have their filename specified in their URL
httpwww-unixoitumassedu~usernameOITUNIX Web Server = www-unixoitumassedu
username = substitute own username~ = path associated with username on OITUNIXindexhtml = your initial home page does not show up in URL
because it is the default filename for the starting Web page on OITUNIX
If for example you have a Web page named ldquoresumehtmlrdquo on yourOITUNIX account (peterson) in the public_html directory the URL would be
httpwww-unixoitumassedu~petersonresumehtml
OITUNIX Directory Structurehome directory (username)
public_html (Web pages directory)indexhtmlresumehtmlphotojpg
Creating Your Home Page Using Personal Web Page Generator
With your Web browser go to url httpwwwumasseduaccoworkshopshtml
Click onPersonal Web Page Generator
on left under Related Pages and follow directions given in class
Introduction to HTML ndash ddp 5Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash Home Page Creation Screen
Introduction to HTML ndash ddp 6Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 7Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for indexhtml
Introduction to HTML ndash ddp 8Academic Computing OIT University of Massachusetts 2001-03-20
indexhtml Submission Creation Screen
Introduction to HTML ndash ddp 9Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for indexhtml
Introduction to HTML ndash ddp 10Academic Computing OIT University of Massachusetts 2001-03-20
Viewing Your Home Page in a Web Browser
From a Web browser choose Open Page from the File menu In the dialog boxtype in the URL of your Web page
httpwww-unixoitumassedu~username
Substitute your own OITUNIX account for username
ExampleIf you logged onto the OITUNIX account gencon09 then your URL would be
httpwww-unixoitumassedu~gencon09
Introduction to HTML Code SyntaxHTML codes are NOT case sensitive Markup tags are used to tell the Webbrowser how to display the text
HTML Tags - consist ofbull a ldquoless thanrdquo (lt) symbolbull followed by the tag and closed by a ldquogreater thanrdquo (gt)bull usually tags are paired eg lttitlegt and lttitlegtbull The ending tag looks like the starting tag except for the slash () that precedesthe text within the angle brackets
Exceptions to the ldquocontainerrdquo (paired tag) rules (no ending tags)bull ltbrgt (break) - moves you down to a new linebull lthrgt - horizontal rule
Introduction to HTML ndash ddp 11Academic Computing OIT University of Massachusetts 2001-03-20
Review An HTML Document Structure
Switch back to your Telnet Application where you should be logged onto yourOITUNIX account and where your home page resides Warning do not useyour mouse with Telnet session do use your mouse with Netscape
Change to your public_html directory_______________________________________________________________________type
cd public_html pico indexhtmlother useful commands
ls -la (will list the files in your current directory) pwd (will tell you your present working directory)
________________________________________________________________________
View the indexhtml file that was generated by the Personal Web PageGenerator application
Reference Appendix A indexhtml Home Page Listing
Basic Tags
bull the lthtmlgt and corresponding lthtmlgt tags begin and end an HTMLdocument
bull the ltHeadgt and corresponding ltHeadgt tags begin and end the headerportion of the HTML document which includes the lttitlegt and lttitlegt tags
bull the lttitlegt tag and its corresponding lttitlegt tag This tag specifies the titleof the document Every HTML document should have a title It is the namethat is saved as a Bookmark and the name that appears in the Go menu and atthe top of the window in Netscape when the file is displayed Keep it short butdescriptive
bull the ltbodygt and corresponding ltbodygt tags encompass the rest of thedocument information
bull comments lt-- this is a comment --gt
Introduction to HTML ndash ddp 12Academic Computing OIT University of Massachusetts 2001-03-20
Basic HTML Page Diagram
Introduction to HTML ndash ddp 13Academic Computing OIT University of Massachusetts 2001-03-20
Text Formatting Tags
bull the ltH1gt header tag and corresponding ltH1gt tagHeadings - HTML has 6 levels of headings - 1 through 6 specifying the level ofthe heading Often the first heading is identical to the title
bull the ltFontgt tag and corresponding ltFontgt tag has 7 levels of font - 1 through7 specifying the font level
bull the ltpgt paragraph separator tag and corresponding ltpgt tagParagraphs -Unlike word processor documents carriage returns in HTML filesarenrsquot significant Wordwrapping can occur anywhere in source files andmultiple spaces are compressed into a single space
Browsers ignore any indentations or blank lines in source text but for the sakeof readability in HTML files headings should be on separate lines andparagraphs should be separated by blank lines (in addition to the ltpgt ltpgttags)
bull ltbrgt tag puts text that follows it onto a new line (forced line breaks)
ExampleAcademic ComputingltBRgtOffice of Information Technologies ltBRgtA125 Lederle GRCltBRgtUniversity of Massachusetts ltBRgtAmherst MA 01003ltBRgt
Text StylesltBgt - Bold textltIgt - ItalicsltTTgt - Typewriter text eg fixed-width font
ExampleThis is a ltBgtBold ltBgt word
Preformatted textUsing the ltPREgt tag (preformatted) generates text in a fixed-width font andcauses spaces new lines and tabs to be significant Poetry source code forcomputers tables etc might be good candidates for preformatted text Youcan include other html tags within a ltpregt tag to improve the appearance (exltfontgt ltfontgt)
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash TOC - ddp iiAcademic Computing OIT University of Massachusetts 2001-03-20
IN-LINE IMAGES 1 8
EXTERNAL MULTIMEDIA LINKS 1 9
VIEWING HTML SOURCE IN WEB BROWSER 1 9
ADDITIONAL WEB PAGES 1 9
Create another Web page Using the Personal Web Page Generator (General Page) 20Personal Web Page Generator ndash General Page ndash resumehtml 21Preview Screen for resumehtml 23Submission Screen for resumehtml 24Submission Success Screen for resumehtml 25
SETTING FILE PERMISSIONS 2 6
CHECK YOUR RESUMEHTML FILE IN NETSCAPE 2 6
LINK TO YOUR RESUME PAGE FROM YOUR HOME PAGE 2 6
LINK TO YOUR HOME PAGE FROM YOUR RESUME PAGE 2 6
SAVE A WEB IMAGE ON YOUR PERSONAL COMPUTER 2 7
MOVE THE SAVED IMAGE TO OITUNIX WEB SERVER USING FTP 2 8
Startup of the Session Properties Window 28
ADD THE PHOTOJPG IMAGE TO YOUR RESUME PAGE 2 9
TABLE CREATION 3 0
Basic Table Diagram 30
CHANGING THE COLOR OF YOUR BACKGROUND TEXT AND LINKS 3 1
APPENDIX A ndash INDEXHTML SOURCE LISTING 3 3
APPENDIX B ndash RESUMEHTML SOURCE LISTING 3 6
APPENDIX C ndash SUMMARY OF HTML TAGS 3 8
Comments 38Document Structure 38Document Headings 38Links 38Layout Elements 38Graphics 39Lists 39Text Controls 39Table 40
APPENDIX D HELP WITH HTML 4 1
APPENDIX E SEARCH ENGINE ndash HTML TAGS 4 2
Example HTML code 42
APPENDIX F UNIX COMMANDS 4 4
Introduction to HTML ndash TOC - ddp iiiAcademic Computing OIT University of Massachusetts 2001-03-20
APPENDIX G PICO EDITOR 4 5
APPENDIX H EXAMPLE HTML CODE FOR LINKING TO ACROBAT PDF FILE 4 6
APPENDIX I EXAMPLE HTML CODE FOR LINKING TO EXCEL XLS FILE 4 6
APPENDIX J SAMPLE JAVASCRIPT CODE FOR LAST MODIFED FILE DATE 4 7
Introduction to HTML ndash ddp 1Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML
Using the OITUNIX Web Server - 2 sessions
Prerequisites
bull active account on OITUNIX (must know username amp password)bull be able to successfully log onto your OITUNIX accountbull some familiarity with the UNIX operating system amp Web browsing
General Background
Definition of TermsWWW Web 3W W3 - World Wide Web - The World Wide Web is the multimediapart of the Internet The Web pages must reside on an Internet host with a Webserver Web pages are written in HTML which is plain text (also known as ASCII)and it can be created using any text editor (ex pico emacs or vi on unix)
bull html - HyperText Markup Language - used to build a Web document (youcan look at html source for Web pages by selecting view source when using yourfavorite Web ldquobrowserrdquo)bull ldquobrowserrdquo - program used to display html documents on a computer screenbull URL - Uniform Resource Locator - to specify the location of Web pages on aWeb serverbull http - HyperText Transfer Protocol
Introduction to HTML ndash ddp 2Academic Computing OIT University of Massachusetts 2001-03-20
How the Web worksclient serverbrowsers
History of WebThe Web was developed at CERN the European Particle Physics Laboratory andwas originally intended to combine the ability to ldquolinkrdquo documents to one anotherusing advanced multimedia publishing techniques Secondary documents arecalled ldquopagesrdquo with the top-level document in any series of documents being theldquohome pagerdquo
Tim Berners-Lee the Webrsquos project leader had the foresight to make theunderlying protocols that define the WWW publicly available and he used theInternet as the primary mechanism for disseminating those documents
Introduction to HTML ndash ddp 3Academic Computing OIT University of Massachusetts 2001-03-20
Important Web Terms
World Wide Web ndash the multimedia part of the Internet Web pages reside on anInternet host with a Web server Web pages are written in a language calledHTML which is plain text and can be created using any text editor
HyperText Markup Language (HTML) ndash codes used within a Web document thatprovides Web browsers with display and link information
Web Browser ndash program used to view Web documents Two popular Web browsersare Netscape NavigatorCommunicator and Microsoft Internet Explorer
HTTP ndash HyperTxt Transfer Protocol
URL ndash Uniform Resource Locator ndash specifies the ocation of Web pages on Webservers Ech Web page has its own unique URL
Telnet ndash PC application for accessing an account on a host computer
OITUNIX ndash host for accounts and Web server at OIT
Pico ndash simple text editor on OITUNIX
UNIX commandsls ndashla list files and permissions in current UNIX directorycd directory change directory (ex cd public_html)pico file open your file in the pico editor (ex pico indexhtml)
Introduction to HTML ndash ddp 4Academic Computing OIT University of Massachusetts 2001-03-20
Getting Started
For this class we will be working with two applications simultaneously on the PC andwill be switching back and forth between them Telnet will be used to connect to yourOITUNIX account and the Netscape Web browser will be used to view your Webpages
Begin your Telnet session by entering your OITUNIX account name and password Toedit afile once it is created
1 changeto the public_html directory with the cd command2 use pico to edit the file3 save changes4 use Web browser to view results5 cycle through these steps as needed
URL and Web Page Location
Your Web pages must be stored in the public_html directory on OITUNIXYour home page should be named indexhtml Any Web pages not calledindexhtml must have their filename specified in their URL
httpwww-unixoitumassedu~usernameOITUNIX Web Server = www-unixoitumassedu
username = substitute own username~ = path associated with username on OITUNIXindexhtml = your initial home page does not show up in URL
because it is the default filename for the starting Web page on OITUNIX
If for example you have a Web page named ldquoresumehtmlrdquo on yourOITUNIX account (peterson) in the public_html directory the URL would be
httpwww-unixoitumassedu~petersonresumehtml
OITUNIX Directory Structurehome directory (username)
public_html (Web pages directory)indexhtmlresumehtmlphotojpg
Creating Your Home Page Using Personal Web Page Generator
With your Web browser go to url httpwwwumasseduaccoworkshopshtml
Click onPersonal Web Page Generator
on left under Related Pages and follow directions given in class
Introduction to HTML ndash ddp 5Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash Home Page Creation Screen
Introduction to HTML ndash ddp 6Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 7Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for indexhtml
Introduction to HTML ndash ddp 8Academic Computing OIT University of Massachusetts 2001-03-20
indexhtml Submission Creation Screen
Introduction to HTML ndash ddp 9Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for indexhtml
Introduction to HTML ndash ddp 10Academic Computing OIT University of Massachusetts 2001-03-20
Viewing Your Home Page in a Web Browser
From a Web browser choose Open Page from the File menu In the dialog boxtype in the URL of your Web page
httpwww-unixoitumassedu~username
Substitute your own OITUNIX account for username
ExampleIf you logged onto the OITUNIX account gencon09 then your URL would be
httpwww-unixoitumassedu~gencon09
Introduction to HTML Code SyntaxHTML codes are NOT case sensitive Markup tags are used to tell the Webbrowser how to display the text
HTML Tags - consist ofbull a ldquoless thanrdquo (lt) symbolbull followed by the tag and closed by a ldquogreater thanrdquo (gt)bull usually tags are paired eg lttitlegt and lttitlegtbull The ending tag looks like the starting tag except for the slash () that precedesthe text within the angle brackets
Exceptions to the ldquocontainerrdquo (paired tag) rules (no ending tags)bull ltbrgt (break) - moves you down to a new linebull lthrgt - horizontal rule
Introduction to HTML ndash ddp 11Academic Computing OIT University of Massachusetts 2001-03-20
Review An HTML Document Structure
Switch back to your Telnet Application where you should be logged onto yourOITUNIX account and where your home page resides Warning do not useyour mouse with Telnet session do use your mouse with Netscape
Change to your public_html directory_______________________________________________________________________type
cd public_html pico indexhtmlother useful commands
ls -la (will list the files in your current directory) pwd (will tell you your present working directory)
________________________________________________________________________
View the indexhtml file that was generated by the Personal Web PageGenerator application
Reference Appendix A indexhtml Home Page Listing
Basic Tags
bull the lthtmlgt and corresponding lthtmlgt tags begin and end an HTMLdocument
bull the ltHeadgt and corresponding ltHeadgt tags begin and end the headerportion of the HTML document which includes the lttitlegt and lttitlegt tags
bull the lttitlegt tag and its corresponding lttitlegt tag This tag specifies the titleof the document Every HTML document should have a title It is the namethat is saved as a Bookmark and the name that appears in the Go menu and atthe top of the window in Netscape when the file is displayed Keep it short butdescriptive
bull the ltbodygt and corresponding ltbodygt tags encompass the rest of thedocument information
bull comments lt-- this is a comment --gt
Introduction to HTML ndash ddp 12Academic Computing OIT University of Massachusetts 2001-03-20
Basic HTML Page Diagram
Introduction to HTML ndash ddp 13Academic Computing OIT University of Massachusetts 2001-03-20
Text Formatting Tags
bull the ltH1gt header tag and corresponding ltH1gt tagHeadings - HTML has 6 levels of headings - 1 through 6 specifying the level ofthe heading Often the first heading is identical to the title
bull the ltFontgt tag and corresponding ltFontgt tag has 7 levels of font - 1 through7 specifying the font level
bull the ltpgt paragraph separator tag and corresponding ltpgt tagParagraphs -Unlike word processor documents carriage returns in HTML filesarenrsquot significant Wordwrapping can occur anywhere in source files andmultiple spaces are compressed into a single space
Browsers ignore any indentations or blank lines in source text but for the sakeof readability in HTML files headings should be on separate lines andparagraphs should be separated by blank lines (in addition to the ltpgt ltpgttags)
bull ltbrgt tag puts text that follows it onto a new line (forced line breaks)
ExampleAcademic ComputingltBRgtOffice of Information Technologies ltBRgtA125 Lederle GRCltBRgtUniversity of Massachusetts ltBRgtAmherst MA 01003ltBRgt
Text StylesltBgt - Bold textltIgt - ItalicsltTTgt - Typewriter text eg fixed-width font
ExampleThis is a ltBgtBold ltBgt word
Preformatted textUsing the ltPREgt tag (preformatted) generates text in a fixed-width font andcauses spaces new lines and tabs to be significant Poetry source code forcomputers tables etc might be good candidates for preformatted text Youcan include other html tags within a ltpregt tag to improve the appearance (exltfontgt ltfontgt)
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash TOC - ddp iiiAcademic Computing OIT University of Massachusetts 2001-03-20
APPENDIX G PICO EDITOR 4 5
APPENDIX H EXAMPLE HTML CODE FOR LINKING TO ACROBAT PDF FILE 4 6
APPENDIX I EXAMPLE HTML CODE FOR LINKING TO EXCEL XLS FILE 4 6
APPENDIX J SAMPLE JAVASCRIPT CODE FOR LAST MODIFED FILE DATE 4 7
Introduction to HTML ndash ddp 1Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML
Using the OITUNIX Web Server - 2 sessions
Prerequisites
bull active account on OITUNIX (must know username amp password)bull be able to successfully log onto your OITUNIX accountbull some familiarity with the UNIX operating system amp Web browsing
General Background
Definition of TermsWWW Web 3W W3 - World Wide Web - The World Wide Web is the multimediapart of the Internet The Web pages must reside on an Internet host with a Webserver Web pages are written in HTML which is plain text (also known as ASCII)and it can be created using any text editor (ex pico emacs or vi on unix)
bull html - HyperText Markup Language - used to build a Web document (youcan look at html source for Web pages by selecting view source when using yourfavorite Web ldquobrowserrdquo)bull ldquobrowserrdquo - program used to display html documents on a computer screenbull URL - Uniform Resource Locator - to specify the location of Web pages on aWeb serverbull http - HyperText Transfer Protocol
Introduction to HTML ndash ddp 2Academic Computing OIT University of Massachusetts 2001-03-20
How the Web worksclient serverbrowsers
History of WebThe Web was developed at CERN the European Particle Physics Laboratory andwas originally intended to combine the ability to ldquolinkrdquo documents to one anotherusing advanced multimedia publishing techniques Secondary documents arecalled ldquopagesrdquo with the top-level document in any series of documents being theldquohome pagerdquo
Tim Berners-Lee the Webrsquos project leader had the foresight to make theunderlying protocols that define the WWW publicly available and he used theInternet as the primary mechanism for disseminating those documents
Introduction to HTML ndash ddp 3Academic Computing OIT University of Massachusetts 2001-03-20
Important Web Terms
World Wide Web ndash the multimedia part of the Internet Web pages reside on anInternet host with a Web server Web pages are written in a language calledHTML which is plain text and can be created using any text editor
HyperText Markup Language (HTML) ndash codes used within a Web document thatprovides Web browsers with display and link information
Web Browser ndash program used to view Web documents Two popular Web browsersare Netscape NavigatorCommunicator and Microsoft Internet Explorer
HTTP ndash HyperTxt Transfer Protocol
URL ndash Uniform Resource Locator ndash specifies the ocation of Web pages on Webservers Ech Web page has its own unique URL
Telnet ndash PC application for accessing an account on a host computer
OITUNIX ndash host for accounts and Web server at OIT
Pico ndash simple text editor on OITUNIX
UNIX commandsls ndashla list files and permissions in current UNIX directorycd directory change directory (ex cd public_html)pico file open your file in the pico editor (ex pico indexhtml)
Introduction to HTML ndash ddp 4Academic Computing OIT University of Massachusetts 2001-03-20
Getting Started
For this class we will be working with two applications simultaneously on the PC andwill be switching back and forth between them Telnet will be used to connect to yourOITUNIX account and the Netscape Web browser will be used to view your Webpages
Begin your Telnet session by entering your OITUNIX account name and password Toedit afile once it is created
1 changeto the public_html directory with the cd command2 use pico to edit the file3 save changes4 use Web browser to view results5 cycle through these steps as needed
URL and Web Page Location
Your Web pages must be stored in the public_html directory on OITUNIXYour home page should be named indexhtml Any Web pages not calledindexhtml must have their filename specified in their URL
httpwww-unixoitumassedu~usernameOITUNIX Web Server = www-unixoitumassedu
username = substitute own username~ = path associated with username on OITUNIXindexhtml = your initial home page does not show up in URL
because it is the default filename for the starting Web page on OITUNIX
If for example you have a Web page named ldquoresumehtmlrdquo on yourOITUNIX account (peterson) in the public_html directory the URL would be
httpwww-unixoitumassedu~petersonresumehtml
OITUNIX Directory Structurehome directory (username)
public_html (Web pages directory)indexhtmlresumehtmlphotojpg
Creating Your Home Page Using Personal Web Page Generator
With your Web browser go to url httpwwwumasseduaccoworkshopshtml
Click onPersonal Web Page Generator
on left under Related Pages and follow directions given in class
Introduction to HTML ndash ddp 5Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash Home Page Creation Screen
Introduction to HTML ndash ddp 6Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 7Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for indexhtml
Introduction to HTML ndash ddp 8Academic Computing OIT University of Massachusetts 2001-03-20
indexhtml Submission Creation Screen
Introduction to HTML ndash ddp 9Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for indexhtml
Introduction to HTML ndash ddp 10Academic Computing OIT University of Massachusetts 2001-03-20
Viewing Your Home Page in a Web Browser
From a Web browser choose Open Page from the File menu In the dialog boxtype in the URL of your Web page
httpwww-unixoitumassedu~username
Substitute your own OITUNIX account for username
ExampleIf you logged onto the OITUNIX account gencon09 then your URL would be
httpwww-unixoitumassedu~gencon09
Introduction to HTML Code SyntaxHTML codes are NOT case sensitive Markup tags are used to tell the Webbrowser how to display the text
HTML Tags - consist ofbull a ldquoless thanrdquo (lt) symbolbull followed by the tag and closed by a ldquogreater thanrdquo (gt)bull usually tags are paired eg lttitlegt and lttitlegtbull The ending tag looks like the starting tag except for the slash () that precedesthe text within the angle brackets
Exceptions to the ldquocontainerrdquo (paired tag) rules (no ending tags)bull ltbrgt (break) - moves you down to a new linebull lthrgt - horizontal rule
Introduction to HTML ndash ddp 11Academic Computing OIT University of Massachusetts 2001-03-20
Review An HTML Document Structure
Switch back to your Telnet Application where you should be logged onto yourOITUNIX account and where your home page resides Warning do not useyour mouse with Telnet session do use your mouse with Netscape
Change to your public_html directory_______________________________________________________________________type
cd public_html pico indexhtmlother useful commands
ls -la (will list the files in your current directory) pwd (will tell you your present working directory)
________________________________________________________________________
View the indexhtml file that was generated by the Personal Web PageGenerator application
Reference Appendix A indexhtml Home Page Listing
Basic Tags
bull the lthtmlgt and corresponding lthtmlgt tags begin and end an HTMLdocument
bull the ltHeadgt and corresponding ltHeadgt tags begin and end the headerportion of the HTML document which includes the lttitlegt and lttitlegt tags
bull the lttitlegt tag and its corresponding lttitlegt tag This tag specifies the titleof the document Every HTML document should have a title It is the namethat is saved as a Bookmark and the name that appears in the Go menu and atthe top of the window in Netscape when the file is displayed Keep it short butdescriptive
bull the ltbodygt and corresponding ltbodygt tags encompass the rest of thedocument information
bull comments lt-- this is a comment --gt
Introduction to HTML ndash ddp 12Academic Computing OIT University of Massachusetts 2001-03-20
Basic HTML Page Diagram
Introduction to HTML ndash ddp 13Academic Computing OIT University of Massachusetts 2001-03-20
Text Formatting Tags
bull the ltH1gt header tag and corresponding ltH1gt tagHeadings - HTML has 6 levels of headings - 1 through 6 specifying the level ofthe heading Often the first heading is identical to the title
bull the ltFontgt tag and corresponding ltFontgt tag has 7 levels of font - 1 through7 specifying the font level
bull the ltpgt paragraph separator tag and corresponding ltpgt tagParagraphs -Unlike word processor documents carriage returns in HTML filesarenrsquot significant Wordwrapping can occur anywhere in source files andmultiple spaces are compressed into a single space
Browsers ignore any indentations or blank lines in source text but for the sakeof readability in HTML files headings should be on separate lines andparagraphs should be separated by blank lines (in addition to the ltpgt ltpgttags)
bull ltbrgt tag puts text that follows it onto a new line (forced line breaks)
ExampleAcademic ComputingltBRgtOffice of Information Technologies ltBRgtA125 Lederle GRCltBRgtUniversity of Massachusetts ltBRgtAmherst MA 01003ltBRgt
Text StylesltBgt - Bold textltIgt - ItalicsltTTgt - Typewriter text eg fixed-width font
ExampleThis is a ltBgtBold ltBgt word
Preformatted textUsing the ltPREgt tag (preformatted) generates text in a fixed-width font andcauses spaces new lines and tabs to be significant Poetry source code forcomputers tables etc might be good candidates for preformatted text Youcan include other html tags within a ltpregt tag to improve the appearance (exltfontgt ltfontgt)
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 1Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML
Using the OITUNIX Web Server - 2 sessions
Prerequisites
bull active account on OITUNIX (must know username amp password)bull be able to successfully log onto your OITUNIX accountbull some familiarity with the UNIX operating system amp Web browsing
General Background
Definition of TermsWWW Web 3W W3 - World Wide Web - The World Wide Web is the multimediapart of the Internet The Web pages must reside on an Internet host with a Webserver Web pages are written in HTML which is plain text (also known as ASCII)and it can be created using any text editor (ex pico emacs or vi on unix)
bull html - HyperText Markup Language - used to build a Web document (youcan look at html source for Web pages by selecting view source when using yourfavorite Web ldquobrowserrdquo)bull ldquobrowserrdquo - program used to display html documents on a computer screenbull URL - Uniform Resource Locator - to specify the location of Web pages on aWeb serverbull http - HyperText Transfer Protocol
Introduction to HTML ndash ddp 2Academic Computing OIT University of Massachusetts 2001-03-20
How the Web worksclient serverbrowsers
History of WebThe Web was developed at CERN the European Particle Physics Laboratory andwas originally intended to combine the ability to ldquolinkrdquo documents to one anotherusing advanced multimedia publishing techniques Secondary documents arecalled ldquopagesrdquo with the top-level document in any series of documents being theldquohome pagerdquo
Tim Berners-Lee the Webrsquos project leader had the foresight to make theunderlying protocols that define the WWW publicly available and he used theInternet as the primary mechanism for disseminating those documents
Introduction to HTML ndash ddp 3Academic Computing OIT University of Massachusetts 2001-03-20
Important Web Terms
World Wide Web ndash the multimedia part of the Internet Web pages reside on anInternet host with a Web server Web pages are written in a language calledHTML which is plain text and can be created using any text editor
HyperText Markup Language (HTML) ndash codes used within a Web document thatprovides Web browsers with display and link information
Web Browser ndash program used to view Web documents Two popular Web browsersare Netscape NavigatorCommunicator and Microsoft Internet Explorer
HTTP ndash HyperTxt Transfer Protocol
URL ndash Uniform Resource Locator ndash specifies the ocation of Web pages on Webservers Ech Web page has its own unique URL
Telnet ndash PC application for accessing an account on a host computer
OITUNIX ndash host for accounts and Web server at OIT
Pico ndash simple text editor on OITUNIX
UNIX commandsls ndashla list files and permissions in current UNIX directorycd directory change directory (ex cd public_html)pico file open your file in the pico editor (ex pico indexhtml)
Introduction to HTML ndash ddp 4Academic Computing OIT University of Massachusetts 2001-03-20
Getting Started
For this class we will be working with two applications simultaneously on the PC andwill be switching back and forth between them Telnet will be used to connect to yourOITUNIX account and the Netscape Web browser will be used to view your Webpages
Begin your Telnet session by entering your OITUNIX account name and password Toedit afile once it is created
1 changeto the public_html directory with the cd command2 use pico to edit the file3 save changes4 use Web browser to view results5 cycle through these steps as needed
URL and Web Page Location
Your Web pages must be stored in the public_html directory on OITUNIXYour home page should be named indexhtml Any Web pages not calledindexhtml must have their filename specified in their URL
httpwww-unixoitumassedu~usernameOITUNIX Web Server = www-unixoitumassedu
username = substitute own username~ = path associated with username on OITUNIXindexhtml = your initial home page does not show up in URL
because it is the default filename for the starting Web page on OITUNIX
If for example you have a Web page named ldquoresumehtmlrdquo on yourOITUNIX account (peterson) in the public_html directory the URL would be
httpwww-unixoitumassedu~petersonresumehtml
OITUNIX Directory Structurehome directory (username)
public_html (Web pages directory)indexhtmlresumehtmlphotojpg
Creating Your Home Page Using Personal Web Page Generator
With your Web browser go to url httpwwwumasseduaccoworkshopshtml
Click onPersonal Web Page Generator
on left under Related Pages and follow directions given in class
Introduction to HTML ndash ddp 5Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash Home Page Creation Screen
Introduction to HTML ndash ddp 6Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 7Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for indexhtml
Introduction to HTML ndash ddp 8Academic Computing OIT University of Massachusetts 2001-03-20
indexhtml Submission Creation Screen
Introduction to HTML ndash ddp 9Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for indexhtml
Introduction to HTML ndash ddp 10Academic Computing OIT University of Massachusetts 2001-03-20
Viewing Your Home Page in a Web Browser
From a Web browser choose Open Page from the File menu In the dialog boxtype in the URL of your Web page
httpwww-unixoitumassedu~username
Substitute your own OITUNIX account for username
ExampleIf you logged onto the OITUNIX account gencon09 then your URL would be
httpwww-unixoitumassedu~gencon09
Introduction to HTML Code SyntaxHTML codes are NOT case sensitive Markup tags are used to tell the Webbrowser how to display the text
HTML Tags - consist ofbull a ldquoless thanrdquo (lt) symbolbull followed by the tag and closed by a ldquogreater thanrdquo (gt)bull usually tags are paired eg lttitlegt and lttitlegtbull The ending tag looks like the starting tag except for the slash () that precedesthe text within the angle brackets
Exceptions to the ldquocontainerrdquo (paired tag) rules (no ending tags)bull ltbrgt (break) - moves you down to a new linebull lthrgt - horizontal rule
Introduction to HTML ndash ddp 11Academic Computing OIT University of Massachusetts 2001-03-20
Review An HTML Document Structure
Switch back to your Telnet Application where you should be logged onto yourOITUNIX account and where your home page resides Warning do not useyour mouse with Telnet session do use your mouse with Netscape
Change to your public_html directory_______________________________________________________________________type
cd public_html pico indexhtmlother useful commands
ls -la (will list the files in your current directory) pwd (will tell you your present working directory)
________________________________________________________________________
View the indexhtml file that was generated by the Personal Web PageGenerator application
Reference Appendix A indexhtml Home Page Listing
Basic Tags
bull the lthtmlgt and corresponding lthtmlgt tags begin and end an HTMLdocument
bull the ltHeadgt and corresponding ltHeadgt tags begin and end the headerportion of the HTML document which includes the lttitlegt and lttitlegt tags
bull the lttitlegt tag and its corresponding lttitlegt tag This tag specifies the titleof the document Every HTML document should have a title It is the namethat is saved as a Bookmark and the name that appears in the Go menu and atthe top of the window in Netscape when the file is displayed Keep it short butdescriptive
bull the ltbodygt and corresponding ltbodygt tags encompass the rest of thedocument information
bull comments lt-- this is a comment --gt
Introduction to HTML ndash ddp 12Academic Computing OIT University of Massachusetts 2001-03-20
Basic HTML Page Diagram
Introduction to HTML ndash ddp 13Academic Computing OIT University of Massachusetts 2001-03-20
Text Formatting Tags
bull the ltH1gt header tag and corresponding ltH1gt tagHeadings - HTML has 6 levels of headings - 1 through 6 specifying the level ofthe heading Often the first heading is identical to the title
bull the ltFontgt tag and corresponding ltFontgt tag has 7 levels of font - 1 through7 specifying the font level
bull the ltpgt paragraph separator tag and corresponding ltpgt tagParagraphs -Unlike word processor documents carriage returns in HTML filesarenrsquot significant Wordwrapping can occur anywhere in source files andmultiple spaces are compressed into a single space
Browsers ignore any indentations or blank lines in source text but for the sakeof readability in HTML files headings should be on separate lines andparagraphs should be separated by blank lines (in addition to the ltpgt ltpgttags)
bull ltbrgt tag puts text that follows it onto a new line (forced line breaks)
ExampleAcademic ComputingltBRgtOffice of Information Technologies ltBRgtA125 Lederle GRCltBRgtUniversity of Massachusetts ltBRgtAmherst MA 01003ltBRgt
Text StylesltBgt - Bold textltIgt - ItalicsltTTgt - Typewriter text eg fixed-width font
ExampleThis is a ltBgtBold ltBgt word
Preformatted textUsing the ltPREgt tag (preformatted) generates text in a fixed-width font andcauses spaces new lines and tabs to be significant Poetry source code forcomputers tables etc might be good candidates for preformatted text Youcan include other html tags within a ltpregt tag to improve the appearance (exltfontgt ltfontgt)
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 2Academic Computing OIT University of Massachusetts 2001-03-20
How the Web worksclient serverbrowsers
History of WebThe Web was developed at CERN the European Particle Physics Laboratory andwas originally intended to combine the ability to ldquolinkrdquo documents to one anotherusing advanced multimedia publishing techniques Secondary documents arecalled ldquopagesrdquo with the top-level document in any series of documents being theldquohome pagerdquo
Tim Berners-Lee the Webrsquos project leader had the foresight to make theunderlying protocols that define the WWW publicly available and he used theInternet as the primary mechanism for disseminating those documents
Introduction to HTML ndash ddp 3Academic Computing OIT University of Massachusetts 2001-03-20
Important Web Terms
World Wide Web ndash the multimedia part of the Internet Web pages reside on anInternet host with a Web server Web pages are written in a language calledHTML which is plain text and can be created using any text editor
HyperText Markup Language (HTML) ndash codes used within a Web document thatprovides Web browsers with display and link information
Web Browser ndash program used to view Web documents Two popular Web browsersare Netscape NavigatorCommunicator and Microsoft Internet Explorer
HTTP ndash HyperTxt Transfer Protocol
URL ndash Uniform Resource Locator ndash specifies the ocation of Web pages on Webservers Ech Web page has its own unique URL
Telnet ndash PC application for accessing an account on a host computer
OITUNIX ndash host for accounts and Web server at OIT
Pico ndash simple text editor on OITUNIX
UNIX commandsls ndashla list files and permissions in current UNIX directorycd directory change directory (ex cd public_html)pico file open your file in the pico editor (ex pico indexhtml)
Introduction to HTML ndash ddp 4Academic Computing OIT University of Massachusetts 2001-03-20
Getting Started
For this class we will be working with two applications simultaneously on the PC andwill be switching back and forth between them Telnet will be used to connect to yourOITUNIX account and the Netscape Web browser will be used to view your Webpages
Begin your Telnet session by entering your OITUNIX account name and password Toedit afile once it is created
1 changeto the public_html directory with the cd command2 use pico to edit the file3 save changes4 use Web browser to view results5 cycle through these steps as needed
URL and Web Page Location
Your Web pages must be stored in the public_html directory on OITUNIXYour home page should be named indexhtml Any Web pages not calledindexhtml must have their filename specified in their URL
httpwww-unixoitumassedu~usernameOITUNIX Web Server = www-unixoitumassedu
username = substitute own username~ = path associated with username on OITUNIXindexhtml = your initial home page does not show up in URL
because it is the default filename for the starting Web page on OITUNIX
If for example you have a Web page named ldquoresumehtmlrdquo on yourOITUNIX account (peterson) in the public_html directory the URL would be
httpwww-unixoitumassedu~petersonresumehtml
OITUNIX Directory Structurehome directory (username)
public_html (Web pages directory)indexhtmlresumehtmlphotojpg
Creating Your Home Page Using Personal Web Page Generator
With your Web browser go to url httpwwwumasseduaccoworkshopshtml
Click onPersonal Web Page Generator
on left under Related Pages and follow directions given in class
Introduction to HTML ndash ddp 5Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash Home Page Creation Screen
Introduction to HTML ndash ddp 6Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 7Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for indexhtml
Introduction to HTML ndash ddp 8Academic Computing OIT University of Massachusetts 2001-03-20
indexhtml Submission Creation Screen
Introduction to HTML ndash ddp 9Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for indexhtml
Introduction to HTML ndash ddp 10Academic Computing OIT University of Massachusetts 2001-03-20
Viewing Your Home Page in a Web Browser
From a Web browser choose Open Page from the File menu In the dialog boxtype in the URL of your Web page
httpwww-unixoitumassedu~username
Substitute your own OITUNIX account for username
ExampleIf you logged onto the OITUNIX account gencon09 then your URL would be
httpwww-unixoitumassedu~gencon09
Introduction to HTML Code SyntaxHTML codes are NOT case sensitive Markup tags are used to tell the Webbrowser how to display the text
HTML Tags - consist ofbull a ldquoless thanrdquo (lt) symbolbull followed by the tag and closed by a ldquogreater thanrdquo (gt)bull usually tags are paired eg lttitlegt and lttitlegtbull The ending tag looks like the starting tag except for the slash () that precedesthe text within the angle brackets
Exceptions to the ldquocontainerrdquo (paired tag) rules (no ending tags)bull ltbrgt (break) - moves you down to a new linebull lthrgt - horizontal rule
Introduction to HTML ndash ddp 11Academic Computing OIT University of Massachusetts 2001-03-20
Review An HTML Document Structure
Switch back to your Telnet Application where you should be logged onto yourOITUNIX account and where your home page resides Warning do not useyour mouse with Telnet session do use your mouse with Netscape
Change to your public_html directory_______________________________________________________________________type
cd public_html pico indexhtmlother useful commands
ls -la (will list the files in your current directory) pwd (will tell you your present working directory)
________________________________________________________________________
View the indexhtml file that was generated by the Personal Web PageGenerator application
Reference Appendix A indexhtml Home Page Listing
Basic Tags
bull the lthtmlgt and corresponding lthtmlgt tags begin and end an HTMLdocument
bull the ltHeadgt and corresponding ltHeadgt tags begin and end the headerportion of the HTML document which includes the lttitlegt and lttitlegt tags
bull the lttitlegt tag and its corresponding lttitlegt tag This tag specifies the titleof the document Every HTML document should have a title It is the namethat is saved as a Bookmark and the name that appears in the Go menu and atthe top of the window in Netscape when the file is displayed Keep it short butdescriptive
bull the ltbodygt and corresponding ltbodygt tags encompass the rest of thedocument information
bull comments lt-- this is a comment --gt
Introduction to HTML ndash ddp 12Academic Computing OIT University of Massachusetts 2001-03-20
Basic HTML Page Diagram
Introduction to HTML ndash ddp 13Academic Computing OIT University of Massachusetts 2001-03-20
Text Formatting Tags
bull the ltH1gt header tag and corresponding ltH1gt tagHeadings - HTML has 6 levels of headings - 1 through 6 specifying the level ofthe heading Often the first heading is identical to the title
bull the ltFontgt tag and corresponding ltFontgt tag has 7 levels of font - 1 through7 specifying the font level
bull the ltpgt paragraph separator tag and corresponding ltpgt tagParagraphs -Unlike word processor documents carriage returns in HTML filesarenrsquot significant Wordwrapping can occur anywhere in source files andmultiple spaces are compressed into a single space
Browsers ignore any indentations or blank lines in source text but for the sakeof readability in HTML files headings should be on separate lines andparagraphs should be separated by blank lines (in addition to the ltpgt ltpgttags)
bull ltbrgt tag puts text that follows it onto a new line (forced line breaks)
ExampleAcademic ComputingltBRgtOffice of Information Technologies ltBRgtA125 Lederle GRCltBRgtUniversity of Massachusetts ltBRgtAmherst MA 01003ltBRgt
Text StylesltBgt - Bold textltIgt - ItalicsltTTgt - Typewriter text eg fixed-width font
ExampleThis is a ltBgtBold ltBgt word
Preformatted textUsing the ltPREgt tag (preformatted) generates text in a fixed-width font andcauses spaces new lines and tabs to be significant Poetry source code forcomputers tables etc might be good candidates for preformatted text Youcan include other html tags within a ltpregt tag to improve the appearance (exltfontgt ltfontgt)
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 3Academic Computing OIT University of Massachusetts 2001-03-20
Important Web Terms
World Wide Web ndash the multimedia part of the Internet Web pages reside on anInternet host with a Web server Web pages are written in a language calledHTML which is plain text and can be created using any text editor
HyperText Markup Language (HTML) ndash codes used within a Web document thatprovides Web browsers with display and link information
Web Browser ndash program used to view Web documents Two popular Web browsersare Netscape NavigatorCommunicator and Microsoft Internet Explorer
HTTP ndash HyperTxt Transfer Protocol
URL ndash Uniform Resource Locator ndash specifies the ocation of Web pages on Webservers Ech Web page has its own unique URL
Telnet ndash PC application for accessing an account on a host computer
OITUNIX ndash host for accounts and Web server at OIT
Pico ndash simple text editor on OITUNIX
UNIX commandsls ndashla list files and permissions in current UNIX directorycd directory change directory (ex cd public_html)pico file open your file in the pico editor (ex pico indexhtml)
Introduction to HTML ndash ddp 4Academic Computing OIT University of Massachusetts 2001-03-20
Getting Started
For this class we will be working with two applications simultaneously on the PC andwill be switching back and forth between them Telnet will be used to connect to yourOITUNIX account and the Netscape Web browser will be used to view your Webpages
Begin your Telnet session by entering your OITUNIX account name and password Toedit afile once it is created
1 changeto the public_html directory with the cd command2 use pico to edit the file3 save changes4 use Web browser to view results5 cycle through these steps as needed
URL and Web Page Location
Your Web pages must be stored in the public_html directory on OITUNIXYour home page should be named indexhtml Any Web pages not calledindexhtml must have their filename specified in their URL
httpwww-unixoitumassedu~usernameOITUNIX Web Server = www-unixoitumassedu
username = substitute own username~ = path associated with username on OITUNIXindexhtml = your initial home page does not show up in URL
because it is the default filename for the starting Web page on OITUNIX
If for example you have a Web page named ldquoresumehtmlrdquo on yourOITUNIX account (peterson) in the public_html directory the URL would be
httpwww-unixoitumassedu~petersonresumehtml
OITUNIX Directory Structurehome directory (username)
public_html (Web pages directory)indexhtmlresumehtmlphotojpg
Creating Your Home Page Using Personal Web Page Generator
With your Web browser go to url httpwwwumasseduaccoworkshopshtml
Click onPersonal Web Page Generator
on left under Related Pages and follow directions given in class
Introduction to HTML ndash ddp 5Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash Home Page Creation Screen
Introduction to HTML ndash ddp 6Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 7Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for indexhtml
Introduction to HTML ndash ddp 8Academic Computing OIT University of Massachusetts 2001-03-20
indexhtml Submission Creation Screen
Introduction to HTML ndash ddp 9Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for indexhtml
Introduction to HTML ndash ddp 10Academic Computing OIT University of Massachusetts 2001-03-20
Viewing Your Home Page in a Web Browser
From a Web browser choose Open Page from the File menu In the dialog boxtype in the URL of your Web page
httpwww-unixoitumassedu~username
Substitute your own OITUNIX account for username
ExampleIf you logged onto the OITUNIX account gencon09 then your URL would be
httpwww-unixoitumassedu~gencon09
Introduction to HTML Code SyntaxHTML codes are NOT case sensitive Markup tags are used to tell the Webbrowser how to display the text
HTML Tags - consist ofbull a ldquoless thanrdquo (lt) symbolbull followed by the tag and closed by a ldquogreater thanrdquo (gt)bull usually tags are paired eg lttitlegt and lttitlegtbull The ending tag looks like the starting tag except for the slash () that precedesthe text within the angle brackets
Exceptions to the ldquocontainerrdquo (paired tag) rules (no ending tags)bull ltbrgt (break) - moves you down to a new linebull lthrgt - horizontal rule
Introduction to HTML ndash ddp 11Academic Computing OIT University of Massachusetts 2001-03-20
Review An HTML Document Structure
Switch back to your Telnet Application where you should be logged onto yourOITUNIX account and where your home page resides Warning do not useyour mouse with Telnet session do use your mouse with Netscape
Change to your public_html directory_______________________________________________________________________type
cd public_html pico indexhtmlother useful commands
ls -la (will list the files in your current directory) pwd (will tell you your present working directory)
________________________________________________________________________
View the indexhtml file that was generated by the Personal Web PageGenerator application
Reference Appendix A indexhtml Home Page Listing
Basic Tags
bull the lthtmlgt and corresponding lthtmlgt tags begin and end an HTMLdocument
bull the ltHeadgt and corresponding ltHeadgt tags begin and end the headerportion of the HTML document which includes the lttitlegt and lttitlegt tags
bull the lttitlegt tag and its corresponding lttitlegt tag This tag specifies the titleof the document Every HTML document should have a title It is the namethat is saved as a Bookmark and the name that appears in the Go menu and atthe top of the window in Netscape when the file is displayed Keep it short butdescriptive
bull the ltbodygt and corresponding ltbodygt tags encompass the rest of thedocument information
bull comments lt-- this is a comment --gt
Introduction to HTML ndash ddp 12Academic Computing OIT University of Massachusetts 2001-03-20
Basic HTML Page Diagram
Introduction to HTML ndash ddp 13Academic Computing OIT University of Massachusetts 2001-03-20
Text Formatting Tags
bull the ltH1gt header tag and corresponding ltH1gt tagHeadings - HTML has 6 levels of headings - 1 through 6 specifying the level ofthe heading Often the first heading is identical to the title
bull the ltFontgt tag and corresponding ltFontgt tag has 7 levels of font - 1 through7 specifying the font level
bull the ltpgt paragraph separator tag and corresponding ltpgt tagParagraphs -Unlike word processor documents carriage returns in HTML filesarenrsquot significant Wordwrapping can occur anywhere in source files andmultiple spaces are compressed into a single space
Browsers ignore any indentations or blank lines in source text but for the sakeof readability in HTML files headings should be on separate lines andparagraphs should be separated by blank lines (in addition to the ltpgt ltpgttags)
bull ltbrgt tag puts text that follows it onto a new line (forced line breaks)
ExampleAcademic ComputingltBRgtOffice of Information Technologies ltBRgtA125 Lederle GRCltBRgtUniversity of Massachusetts ltBRgtAmherst MA 01003ltBRgt
Text StylesltBgt - Bold textltIgt - ItalicsltTTgt - Typewriter text eg fixed-width font
ExampleThis is a ltBgtBold ltBgt word
Preformatted textUsing the ltPREgt tag (preformatted) generates text in a fixed-width font andcauses spaces new lines and tabs to be significant Poetry source code forcomputers tables etc might be good candidates for preformatted text Youcan include other html tags within a ltpregt tag to improve the appearance (exltfontgt ltfontgt)
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 4Academic Computing OIT University of Massachusetts 2001-03-20
Getting Started
For this class we will be working with two applications simultaneously on the PC andwill be switching back and forth between them Telnet will be used to connect to yourOITUNIX account and the Netscape Web browser will be used to view your Webpages
Begin your Telnet session by entering your OITUNIX account name and password Toedit afile once it is created
1 changeto the public_html directory with the cd command2 use pico to edit the file3 save changes4 use Web browser to view results5 cycle through these steps as needed
URL and Web Page Location
Your Web pages must be stored in the public_html directory on OITUNIXYour home page should be named indexhtml Any Web pages not calledindexhtml must have their filename specified in their URL
httpwww-unixoitumassedu~usernameOITUNIX Web Server = www-unixoitumassedu
username = substitute own username~ = path associated with username on OITUNIXindexhtml = your initial home page does not show up in URL
because it is the default filename for the starting Web page on OITUNIX
If for example you have a Web page named ldquoresumehtmlrdquo on yourOITUNIX account (peterson) in the public_html directory the URL would be
httpwww-unixoitumassedu~petersonresumehtml
OITUNIX Directory Structurehome directory (username)
public_html (Web pages directory)indexhtmlresumehtmlphotojpg
Creating Your Home Page Using Personal Web Page Generator
With your Web browser go to url httpwwwumasseduaccoworkshopshtml
Click onPersonal Web Page Generator
on left under Related Pages and follow directions given in class
Introduction to HTML ndash ddp 5Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash Home Page Creation Screen
Introduction to HTML ndash ddp 6Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 7Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for indexhtml
Introduction to HTML ndash ddp 8Academic Computing OIT University of Massachusetts 2001-03-20
indexhtml Submission Creation Screen
Introduction to HTML ndash ddp 9Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for indexhtml
Introduction to HTML ndash ddp 10Academic Computing OIT University of Massachusetts 2001-03-20
Viewing Your Home Page in a Web Browser
From a Web browser choose Open Page from the File menu In the dialog boxtype in the URL of your Web page
httpwww-unixoitumassedu~username
Substitute your own OITUNIX account for username
ExampleIf you logged onto the OITUNIX account gencon09 then your URL would be
httpwww-unixoitumassedu~gencon09
Introduction to HTML Code SyntaxHTML codes are NOT case sensitive Markup tags are used to tell the Webbrowser how to display the text
HTML Tags - consist ofbull a ldquoless thanrdquo (lt) symbolbull followed by the tag and closed by a ldquogreater thanrdquo (gt)bull usually tags are paired eg lttitlegt and lttitlegtbull The ending tag looks like the starting tag except for the slash () that precedesthe text within the angle brackets
Exceptions to the ldquocontainerrdquo (paired tag) rules (no ending tags)bull ltbrgt (break) - moves you down to a new linebull lthrgt - horizontal rule
Introduction to HTML ndash ddp 11Academic Computing OIT University of Massachusetts 2001-03-20
Review An HTML Document Structure
Switch back to your Telnet Application where you should be logged onto yourOITUNIX account and where your home page resides Warning do not useyour mouse with Telnet session do use your mouse with Netscape
Change to your public_html directory_______________________________________________________________________type
cd public_html pico indexhtmlother useful commands
ls -la (will list the files in your current directory) pwd (will tell you your present working directory)
________________________________________________________________________
View the indexhtml file that was generated by the Personal Web PageGenerator application
Reference Appendix A indexhtml Home Page Listing
Basic Tags
bull the lthtmlgt and corresponding lthtmlgt tags begin and end an HTMLdocument
bull the ltHeadgt and corresponding ltHeadgt tags begin and end the headerportion of the HTML document which includes the lttitlegt and lttitlegt tags
bull the lttitlegt tag and its corresponding lttitlegt tag This tag specifies the titleof the document Every HTML document should have a title It is the namethat is saved as a Bookmark and the name that appears in the Go menu and atthe top of the window in Netscape when the file is displayed Keep it short butdescriptive
bull the ltbodygt and corresponding ltbodygt tags encompass the rest of thedocument information
bull comments lt-- this is a comment --gt
Introduction to HTML ndash ddp 12Academic Computing OIT University of Massachusetts 2001-03-20
Basic HTML Page Diagram
Introduction to HTML ndash ddp 13Academic Computing OIT University of Massachusetts 2001-03-20
Text Formatting Tags
bull the ltH1gt header tag and corresponding ltH1gt tagHeadings - HTML has 6 levels of headings - 1 through 6 specifying the level ofthe heading Often the first heading is identical to the title
bull the ltFontgt tag and corresponding ltFontgt tag has 7 levels of font - 1 through7 specifying the font level
bull the ltpgt paragraph separator tag and corresponding ltpgt tagParagraphs -Unlike word processor documents carriage returns in HTML filesarenrsquot significant Wordwrapping can occur anywhere in source files andmultiple spaces are compressed into a single space
Browsers ignore any indentations or blank lines in source text but for the sakeof readability in HTML files headings should be on separate lines andparagraphs should be separated by blank lines (in addition to the ltpgt ltpgttags)
bull ltbrgt tag puts text that follows it onto a new line (forced line breaks)
ExampleAcademic ComputingltBRgtOffice of Information Technologies ltBRgtA125 Lederle GRCltBRgtUniversity of Massachusetts ltBRgtAmherst MA 01003ltBRgt
Text StylesltBgt - Bold textltIgt - ItalicsltTTgt - Typewriter text eg fixed-width font
ExampleThis is a ltBgtBold ltBgt word
Preformatted textUsing the ltPREgt tag (preformatted) generates text in a fixed-width font andcauses spaces new lines and tabs to be significant Poetry source code forcomputers tables etc might be good candidates for preformatted text Youcan include other html tags within a ltpregt tag to improve the appearance (exltfontgt ltfontgt)
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 5Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash Home Page Creation Screen
Introduction to HTML ndash ddp 6Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 7Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for indexhtml
Introduction to HTML ndash ddp 8Academic Computing OIT University of Massachusetts 2001-03-20
indexhtml Submission Creation Screen
Introduction to HTML ndash ddp 9Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for indexhtml
Introduction to HTML ndash ddp 10Academic Computing OIT University of Massachusetts 2001-03-20
Viewing Your Home Page in a Web Browser
From a Web browser choose Open Page from the File menu In the dialog boxtype in the URL of your Web page
httpwww-unixoitumassedu~username
Substitute your own OITUNIX account for username
ExampleIf you logged onto the OITUNIX account gencon09 then your URL would be
httpwww-unixoitumassedu~gencon09
Introduction to HTML Code SyntaxHTML codes are NOT case sensitive Markup tags are used to tell the Webbrowser how to display the text
HTML Tags - consist ofbull a ldquoless thanrdquo (lt) symbolbull followed by the tag and closed by a ldquogreater thanrdquo (gt)bull usually tags are paired eg lttitlegt and lttitlegtbull The ending tag looks like the starting tag except for the slash () that precedesthe text within the angle brackets
Exceptions to the ldquocontainerrdquo (paired tag) rules (no ending tags)bull ltbrgt (break) - moves you down to a new linebull lthrgt - horizontal rule
Introduction to HTML ndash ddp 11Academic Computing OIT University of Massachusetts 2001-03-20
Review An HTML Document Structure
Switch back to your Telnet Application where you should be logged onto yourOITUNIX account and where your home page resides Warning do not useyour mouse with Telnet session do use your mouse with Netscape
Change to your public_html directory_______________________________________________________________________type
cd public_html pico indexhtmlother useful commands
ls -la (will list the files in your current directory) pwd (will tell you your present working directory)
________________________________________________________________________
View the indexhtml file that was generated by the Personal Web PageGenerator application
Reference Appendix A indexhtml Home Page Listing
Basic Tags
bull the lthtmlgt and corresponding lthtmlgt tags begin and end an HTMLdocument
bull the ltHeadgt and corresponding ltHeadgt tags begin and end the headerportion of the HTML document which includes the lttitlegt and lttitlegt tags
bull the lttitlegt tag and its corresponding lttitlegt tag This tag specifies the titleof the document Every HTML document should have a title It is the namethat is saved as a Bookmark and the name that appears in the Go menu and atthe top of the window in Netscape when the file is displayed Keep it short butdescriptive
bull the ltbodygt and corresponding ltbodygt tags encompass the rest of thedocument information
bull comments lt-- this is a comment --gt
Introduction to HTML ndash ddp 12Academic Computing OIT University of Massachusetts 2001-03-20
Basic HTML Page Diagram
Introduction to HTML ndash ddp 13Academic Computing OIT University of Massachusetts 2001-03-20
Text Formatting Tags
bull the ltH1gt header tag and corresponding ltH1gt tagHeadings - HTML has 6 levels of headings - 1 through 6 specifying the level ofthe heading Often the first heading is identical to the title
bull the ltFontgt tag and corresponding ltFontgt tag has 7 levels of font - 1 through7 specifying the font level
bull the ltpgt paragraph separator tag and corresponding ltpgt tagParagraphs -Unlike word processor documents carriage returns in HTML filesarenrsquot significant Wordwrapping can occur anywhere in source files andmultiple spaces are compressed into a single space
Browsers ignore any indentations or blank lines in source text but for the sakeof readability in HTML files headings should be on separate lines andparagraphs should be separated by blank lines (in addition to the ltpgt ltpgttags)
bull ltbrgt tag puts text that follows it onto a new line (forced line breaks)
ExampleAcademic ComputingltBRgtOffice of Information Technologies ltBRgtA125 Lederle GRCltBRgtUniversity of Massachusetts ltBRgtAmherst MA 01003ltBRgt
Text StylesltBgt - Bold textltIgt - ItalicsltTTgt - Typewriter text eg fixed-width font
ExampleThis is a ltBgtBold ltBgt word
Preformatted textUsing the ltPREgt tag (preformatted) generates text in a fixed-width font andcauses spaces new lines and tabs to be significant Poetry source code forcomputers tables etc might be good candidates for preformatted text Youcan include other html tags within a ltpregt tag to improve the appearance (exltfontgt ltfontgt)
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 6Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 7Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for indexhtml
Introduction to HTML ndash ddp 8Academic Computing OIT University of Massachusetts 2001-03-20
indexhtml Submission Creation Screen
Introduction to HTML ndash ddp 9Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for indexhtml
Introduction to HTML ndash ddp 10Academic Computing OIT University of Massachusetts 2001-03-20
Viewing Your Home Page in a Web Browser
From a Web browser choose Open Page from the File menu In the dialog boxtype in the URL of your Web page
httpwww-unixoitumassedu~username
Substitute your own OITUNIX account for username
ExampleIf you logged onto the OITUNIX account gencon09 then your URL would be
httpwww-unixoitumassedu~gencon09
Introduction to HTML Code SyntaxHTML codes are NOT case sensitive Markup tags are used to tell the Webbrowser how to display the text
HTML Tags - consist ofbull a ldquoless thanrdquo (lt) symbolbull followed by the tag and closed by a ldquogreater thanrdquo (gt)bull usually tags are paired eg lttitlegt and lttitlegtbull The ending tag looks like the starting tag except for the slash () that precedesthe text within the angle brackets
Exceptions to the ldquocontainerrdquo (paired tag) rules (no ending tags)bull ltbrgt (break) - moves you down to a new linebull lthrgt - horizontal rule
Introduction to HTML ndash ddp 11Academic Computing OIT University of Massachusetts 2001-03-20
Review An HTML Document Structure
Switch back to your Telnet Application where you should be logged onto yourOITUNIX account and where your home page resides Warning do not useyour mouse with Telnet session do use your mouse with Netscape
Change to your public_html directory_______________________________________________________________________type
cd public_html pico indexhtmlother useful commands
ls -la (will list the files in your current directory) pwd (will tell you your present working directory)
________________________________________________________________________
View the indexhtml file that was generated by the Personal Web PageGenerator application
Reference Appendix A indexhtml Home Page Listing
Basic Tags
bull the lthtmlgt and corresponding lthtmlgt tags begin and end an HTMLdocument
bull the ltHeadgt and corresponding ltHeadgt tags begin and end the headerportion of the HTML document which includes the lttitlegt and lttitlegt tags
bull the lttitlegt tag and its corresponding lttitlegt tag This tag specifies the titleof the document Every HTML document should have a title It is the namethat is saved as a Bookmark and the name that appears in the Go menu and atthe top of the window in Netscape when the file is displayed Keep it short butdescriptive
bull the ltbodygt and corresponding ltbodygt tags encompass the rest of thedocument information
bull comments lt-- this is a comment --gt
Introduction to HTML ndash ddp 12Academic Computing OIT University of Massachusetts 2001-03-20
Basic HTML Page Diagram
Introduction to HTML ndash ddp 13Academic Computing OIT University of Massachusetts 2001-03-20
Text Formatting Tags
bull the ltH1gt header tag and corresponding ltH1gt tagHeadings - HTML has 6 levels of headings - 1 through 6 specifying the level ofthe heading Often the first heading is identical to the title
bull the ltFontgt tag and corresponding ltFontgt tag has 7 levels of font - 1 through7 specifying the font level
bull the ltpgt paragraph separator tag and corresponding ltpgt tagParagraphs -Unlike word processor documents carriage returns in HTML filesarenrsquot significant Wordwrapping can occur anywhere in source files andmultiple spaces are compressed into a single space
Browsers ignore any indentations or blank lines in source text but for the sakeof readability in HTML files headings should be on separate lines andparagraphs should be separated by blank lines (in addition to the ltpgt ltpgttags)
bull ltbrgt tag puts text that follows it onto a new line (forced line breaks)
ExampleAcademic ComputingltBRgtOffice of Information Technologies ltBRgtA125 Lederle GRCltBRgtUniversity of Massachusetts ltBRgtAmherst MA 01003ltBRgt
Text StylesltBgt - Bold textltIgt - ItalicsltTTgt - Typewriter text eg fixed-width font
ExampleThis is a ltBgtBold ltBgt word
Preformatted textUsing the ltPREgt tag (preformatted) generates text in a fixed-width font andcauses spaces new lines and tabs to be significant Poetry source code forcomputers tables etc might be good candidates for preformatted text Youcan include other html tags within a ltpregt tag to improve the appearance (exltfontgt ltfontgt)
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 7Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for indexhtml
Introduction to HTML ndash ddp 8Academic Computing OIT University of Massachusetts 2001-03-20
indexhtml Submission Creation Screen
Introduction to HTML ndash ddp 9Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for indexhtml
Introduction to HTML ndash ddp 10Academic Computing OIT University of Massachusetts 2001-03-20
Viewing Your Home Page in a Web Browser
From a Web browser choose Open Page from the File menu In the dialog boxtype in the URL of your Web page
httpwww-unixoitumassedu~username
Substitute your own OITUNIX account for username
ExampleIf you logged onto the OITUNIX account gencon09 then your URL would be
httpwww-unixoitumassedu~gencon09
Introduction to HTML Code SyntaxHTML codes are NOT case sensitive Markup tags are used to tell the Webbrowser how to display the text
HTML Tags - consist ofbull a ldquoless thanrdquo (lt) symbolbull followed by the tag and closed by a ldquogreater thanrdquo (gt)bull usually tags are paired eg lttitlegt and lttitlegtbull The ending tag looks like the starting tag except for the slash () that precedesthe text within the angle brackets
Exceptions to the ldquocontainerrdquo (paired tag) rules (no ending tags)bull ltbrgt (break) - moves you down to a new linebull lthrgt - horizontal rule
Introduction to HTML ndash ddp 11Academic Computing OIT University of Massachusetts 2001-03-20
Review An HTML Document Structure
Switch back to your Telnet Application where you should be logged onto yourOITUNIX account and where your home page resides Warning do not useyour mouse with Telnet session do use your mouse with Netscape
Change to your public_html directory_______________________________________________________________________type
cd public_html pico indexhtmlother useful commands
ls -la (will list the files in your current directory) pwd (will tell you your present working directory)
________________________________________________________________________
View the indexhtml file that was generated by the Personal Web PageGenerator application
Reference Appendix A indexhtml Home Page Listing
Basic Tags
bull the lthtmlgt and corresponding lthtmlgt tags begin and end an HTMLdocument
bull the ltHeadgt and corresponding ltHeadgt tags begin and end the headerportion of the HTML document which includes the lttitlegt and lttitlegt tags
bull the lttitlegt tag and its corresponding lttitlegt tag This tag specifies the titleof the document Every HTML document should have a title It is the namethat is saved as a Bookmark and the name that appears in the Go menu and atthe top of the window in Netscape when the file is displayed Keep it short butdescriptive
bull the ltbodygt and corresponding ltbodygt tags encompass the rest of thedocument information
bull comments lt-- this is a comment --gt
Introduction to HTML ndash ddp 12Academic Computing OIT University of Massachusetts 2001-03-20
Basic HTML Page Diagram
Introduction to HTML ndash ddp 13Academic Computing OIT University of Massachusetts 2001-03-20
Text Formatting Tags
bull the ltH1gt header tag and corresponding ltH1gt tagHeadings - HTML has 6 levels of headings - 1 through 6 specifying the level ofthe heading Often the first heading is identical to the title
bull the ltFontgt tag and corresponding ltFontgt tag has 7 levels of font - 1 through7 specifying the font level
bull the ltpgt paragraph separator tag and corresponding ltpgt tagParagraphs -Unlike word processor documents carriage returns in HTML filesarenrsquot significant Wordwrapping can occur anywhere in source files andmultiple spaces are compressed into a single space
Browsers ignore any indentations or blank lines in source text but for the sakeof readability in HTML files headings should be on separate lines andparagraphs should be separated by blank lines (in addition to the ltpgt ltpgttags)
bull ltbrgt tag puts text that follows it onto a new line (forced line breaks)
ExampleAcademic ComputingltBRgtOffice of Information Technologies ltBRgtA125 Lederle GRCltBRgtUniversity of Massachusetts ltBRgtAmherst MA 01003ltBRgt
Text StylesltBgt - Bold textltIgt - ItalicsltTTgt - Typewriter text eg fixed-width font
ExampleThis is a ltBgtBold ltBgt word
Preformatted textUsing the ltPREgt tag (preformatted) generates text in a fixed-width font andcauses spaces new lines and tabs to be significant Poetry source code forcomputers tables etc might be good candidates for preformatted text Youcan include other html tags within a ltpregt tag to improve the appearance (exltfontgt ltfontgt)
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 8Academic Computing OIT University of Massachusetts 2001-03-20
indexhtml Submission Creation Screen
Introduction to HTML ndash ddp 9Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for indexhtml
Introduction to HTML ndash ddp 10Academic Computing OIT University of Massachusetts 2001-03-20
Viewing Your Home Page in a Web Browser
From a Web browser choose Open Page from the File menu In the dialog boxtype in the URL of your Web page
httpwww-unixoitumassedu~username
Substitute your own OITUNIX account for username
ExampleIf you logged onto the OITUNIX account gencon09 then your URL would be
httpwww-unixoitumassedu~gencon09
Introduction to HTML Code SyntaxHTML codes are NOT case sensitive Markup tags are used to tell the Webbrowser how to display the text
HTML Tags - consist ofbull a ldquoless thanrdquo (lt) symbolbull followed by the tag and closed by a ldquogreater thanrdquo (gt)bull usually tags are paired eg lttitlegt and lttitlegtbull The ending tag looks like the starting tag except for the slash () that precedesthe text within the angle brackets
Exceptions to the ldquocontainerrdquo (paired tag) rules (no ending tags)bull ltbrgt (break) - moves you down to a new linebull lthrgt - horizontal rule
Introduction to HTML ndash ddp 11Academic Computing OIT University of Massachusetts 2001-03-20
Review An HTML Document Structure
Switch back to your Telnet Application where you should be logged onto yourOITUNIX account and where your home page resides Warning do not useyour mouse with Telnet session do use your mouse with Netscape
Change to your public_html directory_______________________________________________________________________type
cd public_html pico indexhtmlother useful commands
ls -la (will list the files in your current directory) pwd (will tell you your present working directory)
________________________________________________________________________
View the indexhtml file that was generated by the Personal Web PageGenerator application
Reference Appendix A indexhtml Home Page Listing
Basic Tags
bull the lthtmlgt and corresponding lthtmlgt tags begin and end an HTMLdocument
bull the ltHeadgt and corresponding ltHeadgt tags begin and end the headerportion of the HTML document which includes the lttitlegt and lttitlegt tags
bull the lttitlegt tag and its corresponding lttitlegt tag This tag specifies the titleof the document Every HTML document should have a title It is the namethat is saved as a Bookmark and the name that appears in the Go menu and atthe top of the window in Netscape when the file is displayed Keep it short butdescriptive
bull the ltbodygt and corresponding ltbodygt tags encompass the rest of thedocument information
bull comments lt-- this is a comment --gt
Introduction to HTML ndash ddp 12Academic Computing OIT University of Massachusetts 2001-03-20
Basic HTML Page Diagram
Introduction to HTML ndash ddp 13Academic Computing OIT University of Massachusetts 2001-03-20
Text Formatting Tags
bull the ltH1gt header tag and corresponding ltH1gt tagHeadings - HTML has 6 levels of headings - 1 through 6 specifying the level ofthe heading Often the first heading is identical to the title
bull the ltFontgt tag and corresponding ltFontgt tag has 7 levels of font - 1 through7 specifying the font level
bull the ltpgt paragraph separator tag and corresponding ltpgt tagParagraphs -Unlike word processor documents carriage returns in HTML filesarenrsquot significant Wordwrapping can occur anywhere in source files andmultiple spaces are compressed into a single space
Browsers ignore any indentations or blank lines in source text but for the sakeof readability in HTML files headings should be on separate lines andparagraphs should be separated by blank lines (in addition to the ltpgt ltpgttags)
bull ltbrgt tag puts text that follows it onto a new line (forced line breaks)
ExampleAcademic ComputingltBRgtOffice of Information Technologies ltBRgtA125 Lederle GRCltBRgtUniversity of Massachusetts ltBRgtAmherst MA 01003ltBRgt
Text StylesltBgt - Bold textltIgt - ItalicsltTTgt - Typewriter text eg fixed-width font
ExampleThis is a ltBgtBold ltBgt word
Preformatted textUsing the ltPREgt tag (preformatted) generates text in a fixed-width font andcauses spaces new lines and tabs to be significant Poetry source code forcomputers tables etc might be good candidates for preformatted text Youcan include other html tags within a ltpregt tag to improve the appearance (exltfontgt ltfontgt)
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 9Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for indexhtml
Introduction to HTML ndash ddp 10Academic Computing OIT University of Massachusetts 2001-03-20
Viewing Your Home Page in a Web Browser
From a Web browser choose Open Page from the File menu In the dialog boxtype in the URL of your Web page
httpwww-unixoitumassedu~username
Substitute your own OITUNIX account for username
ExampleIf you logged onto the OITUNIX account gencon09 then your URL would be
httpwww-unixoitumassedu~gencon09
Introduction to HTML Code SyntaxHTML codes are NOT case sensitive Markup tags are used to tell the Webbrowser how to display the text
HTML Tags - consist ofbull a ldquoless thanrdquo (lt) symbolbull followed by the tag and closed by a ldquogreater thanrdquo (gt)bull usually tags are paired eg lttitlegt and lttitlegtbull The ending tag looks like the starting tag except for the slash () that precedesthe text within the angle brackets
Exceptions to the ldquocontainerrdquo (paired tag) rules (no ending tags)bull ltbrgt (break) - moves you down to a new linebull lthrgt - horizontal rule
Introduction to HTML ndash ddp 11Academic Computing OIT University of Massachusetts 2001-03-20
Review An HTML Document Structure
Switch back to your Telnet Application where you should be logged onto yourOITUNIX account and where your home page resides Warning do not useyour mouse with Telnet session do use your mouse with Netscape
Change to your public_html directory_______________________________________________________________________type
cd public_html pico indexhtmlother useful commands
ls -la (will list the files in your current directory) pwd (will tell you your present working directory)
________________________________________________________________________
View the indexhtml file that was generated by the Personal Web PageGenerator application
Reference Appendix A indexhtml Home Page Listing
Basic Tags
bull the lthtmlgt and corresponding lthtmlgt tags begin and end an HTMLdocument
bull the ltHeadgt and corresponding ltHeadgt tags begin and end the headerportion of the HTML document which includes the lttitlegt and lttitlegt tags
bull the lttitlegt tag and its corresponding lttitlegt tag This tag specifies the titleof the document Every HTML document should have a title It is the namethat is saved as a Bookmark and the name that appears in the Go menu and atthe top of the window in Netscape when the file is displayed Keep it short butdescriptive
bull the ltbodygt and corresponding ltbodygt tags encompass the rest of thedocument information
bull comments lt-- this is a comment --gt
Introduction to HTML ndash ddp 12Academic Computing OIT University of Massachusetts 2001-03-20
Basic HTML Page Diagram
Introduction to HTML ndash ddp 13Academic Computing OIT University of Massachusetts 2001-03-20
Text Formatting Tags
bull the ltH1gt header tag and corresponding ltH1gt tagHeadings - HTML has 6 levels of headings - 1 through 6 specifying the level ofthe heading Often the first heading is identical to the title
bull the ltFontgt tag and corresponding ltFontgt tag has 7 levels of font - 1 through7 specifying the font level
bull the ltpgt paragraph separator tag and corresponding ltpgt tagParagraphs -Unlike word processor documents carriage returns in HTML filesarenrsquot significant Wordwrapping can occur anywhere in source files andmultiple spaces are compressed into a single space
Browsers ignore any indentations or blank lines in source text but for the sakeof readability in HTML files headings should be on separate lines andparagraphs should be separated by blank lines (in addition to the ltpgt ltpgttags)
bull ltbrgt tag puts text that follows it onto a new line (forced line breaks)
ExampleAcademic ComputingltBRgtOffice of Information Technologies ltBRgtA125 Lederle GRCltBRgtUniversity of Massachusetts ltBRgtAmherst MA 01003ltBRgt
Text StylesltBgt - Bold textltIgt - ItalicsltTTgt - Typewriter text eg fixed-width font
ExampleThis is a ltBgtBold ltBgt word
Preformatted textUsing the ltPREgt tag (preformatted) generates text in a fixed-width font andcauses spaces new lines and tabs to be significant Poetry source code forcomputers tables etc might be good candidates for preformatted text Youcan include other html tags within a ltpregt tag to improve the appearance (exltfontgt ltfontgt)
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 10Academic Computing OIT University of Massachusetts 2001-03-20
Viewing Your Home Page in a Web Browser
From a Web browser choose Open Page from the File menu In the dialog boxtype in the URL of your Web page
httpwww-unixoitumassedu~username
Substitute your own OITUNIX account for username
ExampleIf you logged onto the OITUNIX account gencon09 then your URL would be
httpwww-unixoitumassedu~gencon09
Introduction to HTML Code SyntaxHTML codes are NOT case sensitive Markup tags are used to tell the Webbrowser how to display the text
HTML Tags - consist ofbull a ldquoless thanrdquo (lt) symbolbull followed by the tag and closed by a ldquogreater thanrdquo (gt)bull usually tags are paired eg lttitlegt and lttitlegtbull The ending tag looks like the starting tag except for the slash () that precedesthe text within the angle brackets
Exceptions to the ldquocontainerrdquo (paired tag) rules (no ending tags)bull ltbrgt (break) - moves you down to a new linebull lthrgt - horizontal rule
Introduction to HTML ndash ddp 11Academic Computing OIT University of Massachusetts 2001-03-20
Review An HTML Document Structure
Switch back to your Telnet Application where you should be logged onto yourOITUNIX account and where your home page resides Warning do not useyour mouse with Telnet session do use your mouse with Netscape
Change to your public_html directory_______________________________________________________________________type
cd public_html pico indexhtmlother useful commands
ls -la (will list the files in your current directory) pwd (will tell you your present working directory)
________________________________________________________________________
View the indexhtml file that was generated by the Personal Web PageGenerator application
Reference Appendix A indexhtml Home Page Listing
Basic Tags
bull the lthtmlgt and corresponding lthtmlgt tags begin and end an HTMLdocument
bull the ltHeadgt and corresponding ltHeadgt tags begin and end the headerportion of the HTML document which includes the lttitlegt and lttitlegt tags
bull the lttitlegt tag and its corresponding lttitlegt tag This tag specifies the titleof the document Every HTML document should have a title It is the namethat is saved as a Bookmark and the name that appears in the Go menu and atthe top of the window in Netscape when the file is displayed Keep it short butdescriptive
bull the ltbodygt and corresponding ltbodygt tags encompass the rest of thedocument information
bull comments lt-- this is a comment --gt
Introduction to HTML ndash ddp 12Academic Computing OIT University of Massachusetts 2001-03-20
Basic HTML Page Diagram
Introduction to HTML ndash ddp 13Academic Computing OIT University of Massachusetts 2001-03-20
Text Formatting Tags
bull the ltH1gt header tag and corresponding ltH1gt tagHeadings - HTML has 6 levels of headings - 1 through 6 specifying the level ofthe heading Often the first heading is identical to the title
bull the ltFontgt tag and corresponding ltFontgt tag has 7 levels of font - 1 through7 specifying the font level
bull the ltpgt paragraph separator tag and corresponding ltpgt tagParagraphs -Unlike word processor documents carriage returns in HTML filesarenrsquot significant Wordwrapping can occur anywhere in source files andmultiple spaces are compressed into a single space
Browsers ignore any indentations or blank lines in source text but for the sakeof readability in HTML files headings should be on separate lines andparagraphs should be separated by blank lines (in addition to the ltpgt ltpgttags)
bull ltbrgt tag puts text that follows it onto a new line (forced line breaks)
ExampleAcademic ComputingltBRgtOffice of Information Technologies ltBRgtA125 Lederle GRCltBRgtUniversity of Massachusetts ltBRgtAmherst MA 01003ltBRgt
Text StylesltBgt - Bold textltIgt - ItalicsltTTgt - Typewriter text eg fixed-width font
ExampleThis is a ltBgtBold ltBgt word
Preformatted textUsing the ltPREgt tag (preformatted) generates text in a fixed-width font andcauses spaces new lines and tabs to be significant Poetry source code forcomputers tables etc might be good candidates for preformatted text Youcan include other html tags within a ltpregt tag to improve the appearance (exltfontgt ltfontgt)
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 11Academic Computing OIT University of Massachusetts 2001-03-20
Review An HTML Document Structure
Switch back to your Telnet Application where you should be logged onto yourOITUNIX account and where your home page resides Warning do not useyour mouse with Telnet session do use your mouse with Netscape
Change to your public_html directory_______________________________________________________________________type
cd public_html pico indexhtmlother useful commands
ls -la (will list the files in your current directory) pwd (will tell you your present working directory)
________________________________________________________________________
View the indexhtml file that was generated by the Personal Web PageGenerator application
Reference Appendix A indexhtml Home Page Listing
Basic Tags
bull the lthtmlgt and corresponding lthtmlgt tags begin and end an HTMLdocument
bull the ltHeadgt and corresponding ltHeadgt tags begin and end the headerportion of the HTML document which includes the lttitlegt and lttitlegt tags
bull the lttitlegt tag and its corresponding lttitlegt tag This tag specifies the titleof the document Every HTML document should have a title It is the namethat is saved as a Bookmark and the name that appears in the Go menu and atthe top of the window in Netscape when the file is displayed Keep it short butdescriptive
bull the ltbodygt and corresponding ltbodygt tags encompass the rest of thedocument information
bull comments lt-- this is a comment --gt
Introduction to HTML ndash ddp 12Academic Computing OIT University of Massachusetts 2001-03-20
Basic HTML Page Diagram
Introduction to HTML ndash ddp 13Academic Computing OIT University of Massachusetts 2001-03-20
Text Formatting Tags
bull the ltH1gt header tag and corresponding ltH1gt tagHeadings - HTML has 6 levels of headings - 1 through 6 specifying the level ofthe heading Often the first heading is identical to the title
bull the ltFontgt tag and corresponding ltFontgt tag has 7 levels of font - 1 through7 specifying the font level
bull the ltpgt paragraph separator tag and corresponding ltpgt tagParagraphs -Unlike word processor documents carriage returns in HTML filesarenrsquot significant Wordwrapping can occur anywhere in source files andmultiple spaces are compressed into a single space
Browsers ignore any indentations or blank lines in source text but for the sakeof readability in HTML files headings should be on separate lines andparagraphs should be separated by blank lines (in addition to the ltpgt ltpgttags)
bull ltbrgt tag puts text that follows it onto a new line (forced line breaks)
ExampleAcademic ComputingltBRgtOffice of Information Technologies ltBRgtA125 Lederle GRCltBRgtUniversity of Massachusetts ltBRgtAmherst MA 01003ltBRgt
Text StylesltBgt - Bold textltIgt - ItalicsltTTgt - Typewriter text eg fixed-width font
ExampleThis is a ltBgtBold ltBgt word
Preformatted textUsing the ltPREgt tag (preformatted) generates text in a fixed-width font andcauses spaces new lines and tabs to be significant Poetry source code forcomputers tables etc might be good candidates for preformatted text Youcan include other html tags within a ltpregt tag to improve the appearance (exltfontgt ltfontgt)
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 12Academic Computing OIT University of Massachusetts 2001-03-20
Basic HTML Page Diagram
Introduction to HTML ndash ddp 13Academic Computing OIT University of Massachusetts 2001-03-20
Text Formatting Tags
bull the ltH1gt header tag and corresponding ltH1gt tagHeadings - HTML has 6 levels of headings - 1 through 6 specifying the level ofthe heading Often the first heading is identical to the title
bull the ltFontgt tag and corresponding ltFontgt tag has 7 levels of font - 1 through7 specifying the font level
bull the ltpgt paragraph separator tag and corresponding ltpgt tagParagraphs -Unlike word processor documents carriage returns in HTML filesarenrsquot significant Wordwrapping can occur anywhere in source files andmultiple spaces are compressed into a single space
Browsers ignore any indentations or blank lines in source text but for the sakeof readability in HTML files headings should be on separate lines andparagraphs should be separated by blank lines (in addition to the ltpgt ltpgttags)
bull ltbrgt tag puts text that follows it onto a new line (forced line breaks)
ExampleAcademic ComputingltBRgtOffice of Information Technologies ltBRgtA125 Lederle GRCltBRgtUniversity of Massachusetts ltBRgtAmherst MA 01003ltBRgt
Text StylesltBgt - Bold textltIgt - ItalicsltTTgt - Typewriter text eg fixed-width font
ExampleThis is a ltBgtBold ltBgt word
Preformatted textUsing the ltPREgt tag (preformatted) generates text in a fixed-width font andcauses spaces new lines and tabs to be significant Poetry source code forcomputers tables etc might be good candidates for preformatted text Youcan include other html tags within a ltpregt tag to improve the appearance (exltfontgt ltfontgt)
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 13Academic Computing OIT University of Massachusetts 2001-03-20
Text Formatting Tags
bull the ltH1gt header tag and corresponding ltH1gt tagHeadings - HTML has 6 levels of headings - 1 through 6 specifying the level ofthe heading Often the first heading is identical to the title
bull the ltFontgt tag and corresponding ltFontgt tag has 7 levels of font - 1 through7 specifying the font level
bull the ltpgt paragraph separator tag and corresponding ltpgt tagParagraphs -Unlike word processor documents carriage returns in HTML filesarenrsquot significant Wordwrapping can occur anywhere in source files andmultiple spaces are compressed into a single space
Browsers ignore any indentations or blank lines in source text but for the sakeof readability in HTML files headings should be on separate lines andparagraphs should be separated by blank lines (in addition to the ltpgt ltpgttags)
bull ltbrgt tag puts text that follows it onto a new line (forced line breaks)
ExampleAcademic ComputingltBRgtOffice of Information Technologies ltBRgtA125 Lederle GRCltBRgtUniversity of Massachusetts ltBRgtAmherst MA 01003ltBRgt
Text StylesltBgt - Bold textltIgt - ItalicsltTTgt - Typewriter text eg fixed-width font
ExampleThis is a ltBgtBold ltBgt word
Preformatted textUsing the ltPREgt tag (preformatted) generates text in a fixed-width font andcauses spaces new lines and tabs to be significant Poetry source code forcomputers tables etc might be good candidates for preformatted text Youcan include other html tags within a ltpregt tag to improve the appearance (exltfontgt ltfontgt)
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 14Academic Computing OIT University of Massachusetts 2001-03-20
Example code for using pre_______________________________________________________________________ltpgtltPREgt
I think that I will never seeA poem as lovely as a tree
ltPREgtltpgt_______________________________________________________________________
Extended QuotationsUse the ltBLOCKQUOTEgt tag to include quotations in a separate block on thescreen Most browsers generally indent to separate it from surrounding text
Example code for blockquote_______________________________________________________________________ltpgtltH1gtLocal construction spurs calls for archaeologistsltH1gtltH2gtArchaeological Services excavating area sites for possiblehistoric preservationltH2gt
ltBLOCKQUOTEgtAn old tavern stone tools and centuries-old pottery are
some of the most recent findings made by Archaeological ServicesThe University-based private state and federally funded
organization has dug up many such treasures since it beganexcavating a proposed path for a Route 66 expansion to extend fromSmith College to the Westhampton town lineltBLOCKQUOTEgtltpgt_______________________________________________________________________
Notice that within the blockquote all tabs and line breaks are ignored when displayed through the Web browser You do get an ldquoindentedrdquo quote of the text
Special CharactersSome ASCII characters have special meaning within HTML therefore to usethem in HTML documents you must enter the escape sequence for thecharacter instead
lt beginning of taggt ending of tagamp beginning of escape sequenceldquo used in URLs
To represent these characters type the following escape sequenceslt represented by ampltgt represented by ampgtamp represented by ampampldquo represented by ampquot
To represent single spaces (way to put in multiple spaces)space represented by ampnbsp
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 15Academic Computing OIT University of Massachusetts 2001-03-20
Note Unlike the rest of HTML the escape sequences are case sensitive(amplt is not the same as ampLT)
HTML Coded Character Set for additional codes is available on the Web at
httpwwww3orgITRWD-html40-970708contentshtml
Click on chapter 5 HTML Document Character Set Also is useful as anHTML 40 online reference
Horizontal Rules (ltHRgt)The ltHRgt tag produces a horizontal line the width of the browser window Youmay specify a particular width within the browser window by including apercentage or pixel width within the ltHRgt tag
ExampleltHR width=95gt is a horizontal line that spans 95 of the browser
windowltHR width=80gt is a horizontal line that spans 80 pixels in the
browser window (535 pixels maximum forprinting)
The horizontal rule centers on the window
Letrsquos edit our indexhtml file and explore how the hr tag behaves
See the Appendix on Pico How To for editing our indexhtml file on OITUNIX
Links
Example Link to External URL
To include a link to the Web page for Academic Computing HTML Workshopyou would enter the following code
ltA HREF=ldquohttpwwwumasseduaccoworkshopshtmlrdquogtHTML WorkshopltAgt
The ldquohttp hellip ldquo provides the url reference for the Web page you are linkingto The text ldquoHTML Workshoprdquo is the clickable hyperlink to the Web pagereferenced in the url Most ldquobrowsersrdquo highlight these links (usually with colorandor underlines) to indicate they are hyperlinks (links)
Example Link to File
ltA HREF=ldquoresumehtmlrdquogtBillrsquos Resume PageltAgt
The text ldquoBillrsquos Resume Pagerdquo is the clickable hyperlink to the fileresumehtml which is located in the same directory as the Web page you areplacing this hyperlink in
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 16Academic Computing OIT University of Massachusetts 2001-03-20
To link to the file (text1html) in a subdirectory (subdir) below your presentone using the text ldquotest linkrdquo as the hyperlink you would enter the following
ltA HREF=ldquosubdirtest1htmlrdquogttest linkltAgt
These example ldquolinks to filesrdquo are called relative links Relative links shouldbe used for links referenced within your Web site
1 You type less2 Moving a group of documents to another location is much easierbecause the relative path between the documents remains the sameThe full path reference (absolute link reference) changes when thelocation of the documents change
Example Link to a Location Within A Document
To include a link to a location within a Web page you would enter the followingcode
lta href=rdquoresumehtmlrefrdquogtReferencesltagt
The ref is the named location within the document resumehtml which needsto set up
lta name=rdquorefrdquogt Point of Reference ltagt
Example Link to E-Mail
To include a link to an email address you would enter the following code
lta href=rdquomailtopetersonoitumassedurdquogtpetersonoitumassedultagt
Possible Hands-On Example Make sure you are in your Telnet session on your computerUsing the pico editor edit your indexhtml The pico editor doesnrsquot have acommand to go directly to the bottom of the file but ltctrlgt - v will move youdown a screen at a time Go to above the last the lthrgt tag (go to the bottom offile and then move the cursor up) and insert the following lines of code
_______________________________________________________________________
ltpgtltA HREF=
ldquohttpcermicsenpcfrdochtmlrefalphlisthtmrdquogtHTML Reference ltAgt
ltpgt
_______________________________________________________________________
Save this change in your indexhtml file and get out of your pico editor (ltctrlgt -x answer ldquoyrdquo when questioned about saving then press return key when askedfor the file name)
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 17Academic Computing OIT University of Massachusetts 2001-03-20
Switch back to your Netscape session press the ldquoReloadrdquo button (third fromthe left at the top of the Netscape window) and view the results of your changeto your indexhtml file You Reload in order to force Netscape to reaccess thefile and display with any changes
ListsHTML supports lists
bull unorderedbull orderedbull definition
Unordered Lists1 Start with an opening tag ltULgt2 Enter the ltLIgt tag followed by the list item (note there is no ending ltLIgt tag)3 End with a closing unordered list tag ltULgt
Reference lines 126-131 in your indexhtml listing (Appendix A)
Here is an example of an unordered list with a header_______________________________________________________________________
lth2gtTypes of Listslth2gtltULgt
ltLIgt orderedltLIgt unorderedltLIgt definition
ltULgt_______________________________________________________________________
Modify the List by Adding a List ItemSwitch to your Telnet sessionUse the pico editor to edit your indexhtml fileGo to the line (~ line 136 ltULgt Add an entry above the ltULgtOur example is inside of a table ignore that for now
Type in
ltLIgt ltA href=rdquohttpwww-unixoitumassedu~petersonrdquogtDoris Petersonrsquos Web Site ltagt
Save the changes in your indexhtml file and exit from picoSwitch applications to Netscape - nothing different - OOPS donrsquot forget topress the Reload button then check out the results
Ordered ListsAn ordered list is identical in syntax to an unordered list except the tags areltOLgt(ltOLgt) instead of ltULgt(ltULgt) Individual items are tagged the sameltLIgt
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 18Academic Computing OIT University of Massachusetts 2001-03-20
Definition ListsA definition list usually consists of alternating a term (abbreviated DT) and adefinition (DD) Web browsers generally format the definition on a new line
The syntax is as followsbull Begin the Definition List with the ltDLgt tagbull Put the definition term tag ltDTgt before the termbull Type the definition tag ltDDgt before the definitionbull Finish the Definition List with the ltDLgt tag
Example code for definition list_______________________________________________________________________ltpgtltH2gtWeb TerminologyltH2gtltDLgt
ltDTgtCERN ltDDgtEuropean Particle Physics Laboratory ltDTgtTim Berners-Lee ltDDgtThe Webrsquos project leader
ltDLgtltpgt_______________________________________________________________________
Lists can be nested (preferable to limit them to 3 levels) Lists can also beinside of a table
In-line Images
Most Web browsers can display in-line images (usually in GIF or JPEGformat) Each image takes time to process and slows down the initial display ofthe document therefore do not include too many or overly large images
To include an in-line image useltIMG SRC=ldquoimage URLrdquogt
The syntax for the image URL is identical to that used in an anchor HREF Ifthe image file is in GIF format then the file name extension part of the imageURL must end with gif
Example in your indexhtml file
ltimg src=rdquohttpwwwumasseduaccoimagesumimgjpgrdquo width=300height=128 alt=ldquoUniversity of Massachusettsrdquogt
alt is used within an image tag to for those viewing your pages with a text only browser such as lynx or to help those who use screen readers that speak
width and height indicate the pixel size of the image
Reference lines 9-11 in the indexhtml listing (Appendix A)
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 19Academic Computing OIT University of Massachusetts 2001-03-20
By default the bottom of an image is aligned with the text If you want thebrowser to align the adjacent text with the top of the image type
ltIMG align=top SRC=ldquohelliprdquogt
or change it to
ltIMG align=middle SRC=ldquohelliprdquogt
to align the adjacent text with the middle of the image Experiment with thealign option to see how it changes the appearance of the text in relation to theimage
External Multimedia Links
You may want to have an image file open as a separate document when a useractivates a link on either some text or on a smaller in-line image (thumbnail)included in your document Or you may wish to link to other types ofmultimedia ie sounds movies animations and pdf This is called anexternal image etc and is used when you donrsquot want to slow down the loadingof the main document with large in-line images or other multimedia files
Example
ltA HREF=ldquolarge_imagegifrdquogtClick here to see a large imageltAgt
This example creates a link reference to a large image which you can choose toclick on in order to display it on your screen
Viewing HTML Source in Web Browser
You can view HTML source for the web page currently being displayed in yourbrowser by choosing
View ndash Page SourceIt is then possible to highlight a section of the source code and Copy (Ctrl-C) to the clipboard You can then save what is in the clipboard area to another editing application by Paste (Ctrl-V) in the open application window (for
example MS Word)
Additional Web Pages
To generate additional Web Pages you could generate the HTML file(s) withthe pico editor on OITUNIX You could also create your html files usingDreamweaver HomePage Microsoft FrontPage Word (Office 97982000)WordPerfect or with any other software that generates HTML formatted fileson your Macintosh or PC You would then need to transfer your HTML andimage files to OITUNIX (use Fetch ftp or file transfer capabilities ofapplications that provide site management) and making sure they are placed inthe public_html directory
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 20Academic Computing OIT University of Massachusetts 2001-03-20
Create another Web page Using the Personal Web Page Generator (General Page)
With your Web browser go to the url
httpwwwumasseduaccoworkshopshtml
Click on the Personal Web Page Generator linkClick on Add another page to your site
Fill in the form to provide a basic Resume page Preview and if satisfied fill in the Endof Page form and click on
Transfer HTML file to your Web ServerBecause we have used the Web Page Generator to create and upload our resumehtmlpage to the server file permissions are appropriately set for us
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 21Academic Computing OIT University of Massachusetts 2001-03-20
Personal Web Page Generator ndash General Page ndash resumehtml
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 22Academic Computing OIT University of Massachusetts 2001-03-20
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 23Academic Computing OIT University of Massachusetts 2001-03-20
Preview Screen for resumehtml
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 24Academic Computing OIT University of Massachusetts 2001-03-20
Submission Screen for resumehtml
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 25Academic Computing OIT University of Massachusetts 2001-03-20
Submission Success Screen for resumehtml
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 26Academic Computing OIT University of Massachusetts 2001-03-20
If you use the pico OITUNIX editor to create a new html file from scratch you wouldthen need to set the permissions described below
Setting file permissions
To set the file permisions for your resume page________________________________________________________________________
chmod 755 resumehtml________________________________________________________________________
Check your resumehtml file in Netscape
Switch to NetscapeClick the Open buttonType in the url for your resume page
httpwww-unixoitumassedu~usernameresumehtml where ~username is your OIT account
Link to your resume page from your home pageSwitch to your telnet session You should already be in your public_html directory
Edit your home page type
pico indexhtml
In this exercise wersquoll add the link to your resume page in the list above the last ltHRgttag
Type the following before the ltHRgt tag
________________________________________________________________________
ltpgtlta href=ldquoresumehtmlrdquogtDorisrsquo Resume Pageltagtltpgt
________________________________________________________________________
Exit and save the changes to your indexhtml file Reload your home page and youshould now have a link to your resume Web page
Link to your home page from your resume pageSwitch to your telnet session again
Edit your resume page
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 27Academic Computing OIT University of Massachusetts 2001-03-20
pico resumehtmlAgain wersquoll add the link to your home page at the bottom
Type the following before the last ltHRgt tag(Be sure to substitute your name where I have Doris Peterson)
___________________________________________________________
ltpgtlta href=rdquoindexhtmlrdquogtDorisrsquo Home Pageltagtltpgt
___________________________________________________________
Exit and save the changes to your resumehtml file Reload your resume page and youshould now have a link to your home page At this point you should be able to go backand forth between your home page and your resume page using the links just added
Save a Web Image on Your Personal Computer
In Netscape go to specified url where the class pictures have been placed (url will begiven in class) Scroll down until you see your picture (itrsquos an in-line image)
Hold down the right mouse button (the only mouse button on a Macintosh) on thepicture image until you get the drop down menu select S ave Image As
In the Save As window use the Up One Level icon (arrow icon to the right of theSave in field until you see Desktop in the Save in field Select the htmlclass folderwhich should show when Desktop appears in the Save in field at the top of thewindow
Click the Open button
Now the htmlclass folder should show in the Save in field and press the Save buttonName the file photojpg and the Save as T ype should be JPEG File (jpg)
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 28Academic Computing OIT University of Massachusetts 2001-03-20
Move the Saved Image to OITUNIX Web server using FTP
Open FTP (application in lab to upload file from the PCrsquos to your OIT unix host
Minimize all windows and open (double-click) on the FTP icon on the desktop
You should now see the Session Properties General WindowMake sure Anonymous L ogin does NOT have a check mark in the box (click on it ifitrsquos checked to turn it off) Do not check Save Password box either
Enter the following fieldsProfile Name oitunixHost N ameAddress oitunixoitumasseduHost T ype Automatic detect (probably already selected)U ser ID ldquoyour OITUNIX usernamerdquo (what you type when you logon to
your unix account)Passwor d ldquoyour passwordrdquo (case sensitive)Account (leave this field blank)
Startup of the Session Properties WindowInitial Remote Site Folder public_htmlInitial Local Folder Cwindowsdesktophtmlclass
Then click OK
On the local system top window you should see the htmlclass folder open it and youshould see the photojpg file after you have set view to see all files (use the scrollarrows to find it if necessary)
Make sure the Binary radio button is selected since the file in an image (jpg in thiscase)
Click on the right arrow button in the center which should not be grayed out
You should see a message at the bottom of the window that tells that the transfer wascomplete or if there were problems with the transfer
Close your FTP session and exit FTP
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 29Academic Computing OIT University of Massachusetts 2001-03-20
Add the photojpg image to your resume page
Switch to your telnet sessionEdit your Resume Page (pico resumehtml)
At the top of resumehtml after the ltbody hellipgt and lt-- hellip --gt tags modify the ltimg tagas given below to reference your photojpg graphic________________________________________________________________________
ltimg src=rdquophotojpgrdquo alt=rdquoMy Picturerdquowidth=rdquo150rdquo height=rdquo180rdquogt
ltimggt
________________________________________________________________________
Check the size of your photojpg file to determine whether you have the correct widthand height in pixels in your ltimggt tag to correspond with your picture To do this holddown the right mouse button (Mac single mouse button) on your picture (displayed onweb page) Select View Image from the drop down menu Your picture will displayalone in a new window At the top of the browser window in the blue bar you will seethe file type (JPEG) and the image size given in pixels (width by height) These arethe pixel numbers you will want to have in your ltimggt tag for width and height
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 30Academic Computing OIT University of Massachusetts 2001-03-20
Table Creation
Table formatting is used to control the placement of information on the page Tablescan be nested
Basic Table Diagram
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 31Academic Computing OIT University of Massachusetts 2001-03-20
Reference resumehtml list ndash Appendix B - for a table example
We will modify our resume file to structure some of the information currently in theeducation text area into a table format in order to control the spacing of our educationinformation (Note any multiple spaces we might have placed in the original textentered has been reduced to a single space in each case)
Changing the Color of Your Background Text and Links
It is possible to change the default color of the background text andor links on Webpages There is a hexadecimal RGB color scheme for controlling these objects Thehexadecimal digits are as follows0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 The highest value (256 in decimal) is FF when using two digits in hexadecimalThe hex values for red green and blue colors are represented by 6 digits
ex 000000
The first two digits represent red the third and fourth - green and the last 2 - blue Torepresent the highest value for red with the hex RGB color scheme you would haveFF0000(FF (256) value for red 00 (no green) and 00 (no blue))Green would be 00FF00 and blue 0000FF
White is the highest values for all three colors (red green and blue) - FFFFFFBlack is the absence of the three colors - 000000
If you are a color theory guru you can mix your own colors and get good results If youare like me you can visit several Web sites that have charts already prepared to helpyou choose color mixtures
Here are the urlrsquos for two sites
httpthe-lightcomcolclickhtml
httpwwwlyndacomhexhtml
To make your background black and your text white you would add the following tothe ltbodygt tag in your HTML code This will show fine on your computer but if youprint this page it will give you white on white and you will see nothing
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquogt
If you want to change the color of your links to green add the following
ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquogt
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash ddp 32Academic Computing OIT University of Massachusetts 2001-03-20
There are three kind of links
links what you see when you come to a Web page for the first time
vlinks (visited links) links that you have visited and your browser still knows yoursquovebeen there
alinks (active links) turn the active color for a short time after the link has beenclicked to show some action has happened
Example ltbody bgcolor=ldquo000000rdquo text=ldquoFFFFFFrdquo link=ldquo00FF00rdquo alink=ldquoFF0000rdquo
vlink=ldquo0000FFrdquogt
Save your changes in pico Switch to Netscape and be sure to press the Reload Buttonto see the latest saved version of your file
Hint In general I suggest you use a light uncluttered background with dark or blacktext and make your links and visited links colors that go well together and with theother colors on that page but are distinct and easy to distinguish from each other thetext and the background
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash Appendix A - ddp 33Academic Computing OIT University of Massachusetts 2001-03-20
Appendix A ndash indexhtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris D Peterson s Home PageltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 lt-- Place personal information in a table separating each item14 in a separate data cell to preserve organization of the15 page This isnt entirely necessary but using tables16 allows for more control over the layout of the page --gt1718 ltFONT face=arialhelveticagt19 ltPgt20 ltH1gtDoris D PetersonltH1gt21 ltPgt22 ltFONTgt23 ltBRgt24 ltFONT FACE=arialhelveticagt25 lt-- List the office and other information26 using a P tag to help formatting --gt27 ltPgt28 Academic Computing ltBRgt29 OIT ltBRgt30 A125C Lederle GRC lowrise ltBRgt3132 ltA href=httpwwwumassedugt33 University of Massachusetts34 ltAgtltBRgt35 Amherst MA 01003ltBRgt36 ltBRgt37 Phone 413-545-3957 ltBRgt38 ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp ampnbsp39 413-367-2022 ltBRgt40 Fax 413-545-3203 ltBRgt41 ltFONTgt42 ltPgt434445 ltHR width=450 align=leftgt46 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt47 lt-- Here are the textblock(s) Putting them in a table48 allows more control over their positioning on the49 screen --gt50515253 ltTRgt54 ltTDgt
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash Appendix A - ddp 34Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONT face=arialhelvetica size=4gt56 ltbgtText 1ltbgt57 ltFONTgt58 ltTDgt59 ltTRgt60 ltTRgt61 ltTD COLSPAN=4gt62 ltFONT face=arialhelvetica size=-0gt63 ltPgt64 Sample Text 165 ltPgt66 ltFONTgt67 ltTDgt68 ltTRgt6970 ltTRgt71 ltTDgt72 ltFONT face=arialhelvetica size=4gt73 ltbgt Text 2ltbgt74 ltFONTgt75 ltTDgt76 ltTRgt77 ltTRgt78 ltTD COLSPAN=4gt79 ltFONT face=arialhelvetica size=-0gt80 ltPgt81 Sample text 2 ltbrgt82 ltPgt83 ltFONTgt84 ltTDgt85 ltTRgt8687 ltTRgt88 ltTDgt89 ltFONT face=arialhelvetica size=4gt90 ltbgtText 3ltbgt91 ltFONTgt92 ltTDgt93 ltTRgt94 ltTRgt95 ltTD COLSPAN=4gt96 ltFONT face=arialhelvetica size=-0gt97 ltPgt98 Sample text 3 ltbrgt99 ltPgt100 ltFONTgt101 ltTDgt102 ltTRgt103104105 ltTABLEgt106 lt-- Provide links to other web sites --gt107108 ltHR width=450 align=leftgt109 ltbrgtltbgtltFONT size=4 face=arialhelveticagtSome InterestingWeb SitesltFONTgtltbgt110 ltULgt111 ltligt ltA href=httpwwwumasseduaccoworkshopshtmlgt
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash Appendix A - ddp 35Academic Computing OIT University of Massachusetts 2001-03-20
112 Useful HTML Referenceltagt113 ltligt ltA114 href=httpwww-unixoitumassedu~jimhillgoodieshtmlgt115 Jims Web Referencesltagt116 ltULgt117 ltBRgt118 ltHR width=450 align=leftgt119 lt-- Provide an email address --gt120 ltFONT face=arialhelveticagt121122 Email123 lta href=mailtopetersonoitumassedugt124 petersonoitumassedultagt125 ltbrgt126 ltFONTgt127 ltFONT face=arialhelveticagt128 ltigtlast updated Tue Mar 20 090216 2001ltigt129 ltFONTgt129 ltBRgtltBRgt130131 ltBODYgt132 ltHTMLgt
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML Appendix B ndash ddp 36Academic Computing OIT University of Massachusetts 2001-03-20
Appendix B ndash resumehtml Source Listing
1 ltHTMLgt2 ltHEADgt3 ltTITLEgtDoris Petersons ResumeltTITLEgt4 ltHEADgt5 ltBODY bgcolor=ffffff text=000000gt67 lt-- Place the UMass photo at the top of the page --gt8 ampnbsp ltIMG9 src=httpwwwumasseduaccoimagesumimgjpg10 width=300 height=128 alt=University of Massachusettsgt11 ltIMGgt12 ltBRgtltBRgt13 ltFONT face=gt14 ltH1gtDoris Petersons ResumeltH1gt15 ltFONTgt1617 ltTABLE width=510 cellspacing=0 cellpadding=10 border=0gt1819 lt-- Here are the textblock(s) Putting them in a table20 allows more control over their positioning on the21 screen --gt2223 ltTRgt24 ltTDgt25 ltFONT face= size=4gt26 ltbgtEducationltbgt27 ltFONTgt28 ltTDgt29 ltTRgt30 ltTRgt31 ltTD COLSPAN=4gt32 ltFONT face= size=-0gt33 ltPgt34 Purdue University BS35 ltbrgtU of Massachusetts MS36 ltPgt37 ltFONTgt38 ltTDgt39 ltTRgt404142 ltTRgt43 ltTDgt44 ltFONT face= size=4gt45 ltbgt Work Experienceltbgt46 ltFONTgt47 ltTDgt48 ltTRgt49 ltTRgt50 ltTD COLSPAN=4gt51 ltFONT face= size=-0gt52 ltPgt53 1975 - present U of Massachusetts54 ltPgt
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML Appendix B ndash ddp 37Academic Computing OIT University of Massachusetts 2001-03-20
55 ltFONTgt56 ltTDgt57 ltTRgt5859 ltTABLEgt60 ltHR width=450 align=leftgt61 lt-- Provide links to other web sites --gt6263 ltBRgtltFONT size=4 face=gtOther InterestsltFONTgt64 ltULgt65 ltligt Hiking66 ltligt Piano67 ltULgt68 ltBRgt69 ltHR width=450 align=leftgt70 lt-- Provide an email address --gt71 ltFONT face=gt7273 Email74 lta href=mailtopetersonoitumassedugt75 petersonoitumassedultagt76 ltFONTgtltbrgtltFONT face=gt77 ltigtlast updated Wed Mar 14 141141 2001ltigt78 ltFONTgt79 ltBRgtltBRgt8081 ltBODYgt82 ltHTMLgt
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash Appendix C - ddp 38Academic Computing OIT University of Massachusetts 2001-03-20
Appendix C ndash Summary of HTML Tags
Comments
lt-- --gt Comment line
Document Structure
ltbodygthellip ltbodygt Document body
ltheadgt hellip ltheadgt Document head
lthtmlgthellip lthtmlgt Main document
Document Headings
lttitlegt hellip lttitlegt Document title
ltHgt ltHgt ( = 1 helliphellip6) Heading levels
Links
lta Anchor start Hypertext link
href = ldquohttpwwwumassedurdquo link to url
href= ldquomailtopetersonoitumassedurdquo link to internetemail address
href= ldquoresumehtmlrdquo link to filehref= ldquoimageslgphotojpgrdquo link to graphics filehref= ldquoresumehtmlprojectsrdquo link to anchor (projects)
in file resumehtmlname=projects name associated with
an anchor location (projects)gt close of anchor start tag
ltagt Anchor end
Layout Elements
ltBRgt Line break forces a line break
ltcentergt text here ltcentergt centers text or images
lthrgt horizontal rule draws horizontal line across page
ltpgt Paragraph start breaks up text into paragraphltpgt Paragraph end
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash Appendix C - ddp 39Academic Computing OIT University of Massachusetts 2001-03-20
Graphics
ltimg Image inserts referenced image into docsrc= ldquophotojpgrdquo file reference image attributealt= ldquoalternate textrdquo text to display where image cannot
be displayedborder= 0 ndash no border 1hellip - border widthwidth= width of image in pixelsheight= height of image in pixelsgt end of img tag
Lists
ltulgt Unordered list startltligt list item
ltulgt Unordered list end
ltolgt Ordered list startltligt list item
ltolgt Unordered list end
ltdlgt Definition list startltddgt list definition
ltdtgt list termltdlgt Definition list end
Text Controls
ltbgt text here ltbgt Bold text
ltIgt text here ltIgt Italic text
ltpregt preformatted text here ltpregtPreserves spacing and layout
ltblockquotegt hellip ltblockquotegt Quotation text area
ltfont Font tag for textsize=rdquordquo = +1+2+3 hellip -1-2-3 hellipface= ldquofontnamerdquo ldquoHelveticaArialrdquocolor=rdquorrggbbrdquo redgreenblue color number
gt close of start font tag
ltfontgt Font tag end
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash Appendix C - ddp 40Academic Computing OIT University of Massachusetts 2001-03-20
Table
lttablegt Table startlttrgt Table row start lttdgt Table data (cell) start lttdgt Table data (cell) endlttrgt Table row end
lttablegt Table end
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash Appendix D - ddp 41Academic Computing OIT University of Massachusetts 2001-03-20
Appendix D Help with HTML
Reference the Summary of HTML Tags diagram
A good source for html in designing your own home page is a Beginnerrsquos Guide toHTML The url is
httpwwwncsauiuceduGeneralInternetWWWHTMLPrimerhtml
From the URL
httpwwwumasseduaccoworkshopshtml
you will find links to other HTML resource sites
You may utlilize a Unix Perl Script to test for valid HTML code (version 30)
~petersonpubweblint filename
This sends to your screen the output of testing
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash Appendix E - ddp 42Academic Computing OIT University of Massachusetts 2001-03-20
Appendix E Search Engine ndash HTML Tags
Search engines use information embedded in HTML documents as HTML tags and insome cases document text content to categorize documents on the Web Search enginesdiffer in what information they use Below are some of the HTML tags and otherdocument information utilized by various search engines
1 ltTITLEgt Put text title here ltTITLEgtHTML tag within the ltHEADgt tag
2 ltMETA name=rdquodescriptionrdquo content=rdquoLonger description of information in the htmldocument goes hererdquogtHTML tag within the ltheadgt tag
3 ltmeta name=rdquokeywordsrdquo content=rdquokeyword1 keyword2 keyword phrase1rdquogtAnother form of the ltmeta gt tag within the ltheadgt tag
4 ltH1gtDocument Content Headerlth1gtHTML tag used within the ltbody gt tag
5 HTML document text itself For example the number of times the term HTMLappears in the documentContent within the ltbody gt tag
Example HTML code
ltHTMLgtltheadgt
lttitlegt Introduction to HTML lttitlegtltmeta name=rdquodescriptionrdquo content=rdquoHTML Workshop Using a UNIX
Web serverrdquogtltMETA name=rdquokeywordsrdquo content=rdquoHTML Web coding Academic
Computing at University of Massachusetts AmherstWorkshoprdquogt
ltHEADgt
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash Appendix E - ddp 43Academic Computing OIT University of Massachusetts 2001-03-20
ltBODYgtltH1gt HTML Codes Used to Format Text in HTML DocumentsltH1gtHTML tags are used to provide information that Web browsers use toformat the document information on the display screen HTML tags areinterspersed throughout the HTML document content HTML tags donot appear as text on the screen
ltbodygtlthtmlgt
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash Appendix F - ddp 44Academic Computing OIT University of Massachusetts 2001-03-20
Appendix F UNIX Commands
Changing your account informationyppasswd [return]Change your password You will beprompted for your old password newpassword and then asked to verify itypchfn [return]Change your finger information You willbe prompted for each field Type in thenew information and press [return] orjust press [return] to leave the fieldunchangedGetting online helpman command [return]Lists the manual pages for the specifiedcommandman -k keyword [return]Lists all commands pertaining to thekeyword with a one line descriptionlynxhttpwwwoitumasseduoit[return]Uses lynx to display the textual part ofOITs World Wide Web Home PageChecking your
Compare the number in the currentcolumn to the one in the first quotacolumn If current is approaching quotaremove all unneeded filesListing your file namesls -la [return]Lists all files owners and permissions incurrent directoryViewing a file on the screenmore filename [return]Lists named file on screen one screen at atimeRemoving filesrm filename [return]Removes specified fileCreating and removing directoriesmkdir directoryname [return]Creates specified directoryrmdir directoryname [return]Removes the specified directory[directory must be empty]
Moving between directoriescd directoryname [return]Moves you into the specified directory
cd [return]Returns you to your home directorycd [return]Moves you up one directoryCopying a filecp oldfilename newfilename[return]Makes a copy of the contents ofoldfilename under newfilename
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash Appendix G - ddp 45Academic Computing OIT University of Massachusetts 2001-03-20
Appendix G Pico Editor
PicoDefault editor for Pine Elm and Tin on OITUNIXIn the following list of functions ^ means hold down the key marked Ctrl Toaccomplish a function while holding down the key marked Ctrl press the other listedkey
Help^g Display Pico HelpCursor MovementNormal cursor movement is accom-plished using your arrow keys Thefollowing are additional cursorfunctions that Pico provides^a move to the beginning of the current line^e move to the end of the current line^v move forward a page of text^y move backward a page of textSearch^w Search for specified textEditing^d Delete the character at the cursorposition^ Mark cursor position as beginning of selected textNote Setting mark when already setunselects text^k Cut selected text (displayed ininverse characters)Note The selected texts boundary onthe cursor side ends at the left edge ofthe cursor So with selected text to theleft of the cursor the character underthe cursor is not selected^u Uncut (paste) last cut text insertingit at thecurrent cursor position^i Insert a tab at the current cursor position^j Justify the current paragraphNote paragraphs delimited by blank lines orindentation^l Refresh the display^t Invoke the spelling checker
Importing or Exporting a File^r Insert an external file at the current cursorposition^o Output the current buffer to a file saving itSaving and Exiting^x Exit pico saving buffer
ADDITIONAL INFORMATIONPine on OITUNIXHandout H7Elm on OITUNIXHandout H107Handouts are available in printed form at theOIT Help Desk room A109 in LederleGraduate Research Center lowrise[545-9400] and on-line through the OITon-line Help Desk The URL for is httpwwwoitumasseduhelpQuestions may be sent by email to helpoitumasseduDecember 1998
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash Appendix H-I - ddp 46Academic Computing OIT University of Massachusetts 2001-03-20
Appendix H Example HTML Code for Linking to Acrobat pdf File
lthtmlgtltheadgtlttitlegtPDF Test lttitlegtltheadgtltbodygt
This is a test of providing a pdf file for download purposes
ltpgt
lta href=rdquocover_appdfrdquogtltcodegtDownload this pdf fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file cover_appdf resides in the same folder as the file where this reference link isused
Appendix I Example HTML Code for Linking to Excel xls File
lthtmlgtltheadgtlttitlegt Excel Test lttitlegtltheadgtltbodygt
This is a test of providing an excel file for download purposes
ltpgt
lta href=rdquoexcelexxlsrdquogtltcodegtDownload this excel worksheet 40 fileltcodegtltagt
ltpgt
ltbodygtlthtmlgt
The file excelexxls resides in the same folder as the file where this reference link is used
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-
Introduction to HTML ndash Index - ddp 47Academic Computing OIT University of Massachusetts 2001-03-20
Appendix J Sample JavaScript Code for Last Modifed File Date
Sample JavaScript Code to change the last modified date for the current file
ltIgtLast Modifiedlt-- ltSCRIPT LANGUAGE=JavaScriptgt
function initArray() thislength = initArrayargumentslength for (var i = 0 i lt thislength i++) this[i+1] = initArrayarguments[i] var DOWArray = newinitArray(SundayMondayTuesdayWednesdayThursdayFridaySaturday)var MOYArray = new initArray(JanuaryFebruaryMarchApril MayJuneJulyAugustSeptember OctoberNovemberDecember)
var LastModDate = new Date(documentlastModified)documentwrite(DOWArray[(LastModDategetDay()+1)] )documentwrite(MOYArray[(LastModDategetMonth()+1)] )
documentwrite(LastModDategetDate() (LastModDategetYear()+1900))documentwrite()
ltSCRIPTgt --gtlt--ltNOSCRIPTgt --gtAugust 16 1999lt-- ltNOSCRIPTgt --gtltIgt
- Introduction to HTML
-
- Prerequisites
-
- Definition of Terms
-
- How the Web Works
- History of Web
- Important Web Terms
-
- Getting Started
- URL and Web Page Location
- Creating Your Home Page Using Personal Web Page Generator
-
- Home Page Creation Screen
- Preview Screen for indexhtml
- indexhtml Submission Creation Screen
- Submission Success Screen for indexhtml
- Viewing Your Home Page in a Web Browser
-
- Introduction to HTML Code Syntax
-
- Review an HTML Document Structure
-
- Basic Tags
-
- Basic HTML Page Diagram
-
- Text Formatting Tags
-
- Text Styles
- Preformatted Text
- Extended Quotations
- Special Characters
- Horizontal Rules
-
- Links
-
- Example Link to External URL
- Example Link to File
- Example Link to a Location Within A Document
- Example Link to E-Mail
- Possible Hands-On Example
-
- Lists
-
- Unordered Lists
- Modify the List by Adding a List Item
- Ordered Lists
- Definition Lists
-
- In-line Images
- External Multimedia Links
- Viewing HTML Source in Web Browser
- Additional Web Pages
-
- Create Another Web Page
- resumehtml Creation Screen
- Preview Screen for resumehtml
- Submission Screen for resumehtml
- Submission Success Screen for resumehtml
- Setting File Permissions
- Check your resumehtml file in Netscape
-
- Link to your resume page from your home page
- Link to your home page from your resume page
- Save a Web Image on Your Personal Computer
-
- Move the Saved Image to OITUNIX Using FTP
- Add photojpg image to your resume page
-
- Table Creation
-
- Basic Table Diagram
-
- Changing the Color of Your Background Text and Links
- Appendix A - indexhtml Source Listing
- Appendix B - resumehtml Source Listing
- Appendix C - Summary of HTML Tags
-
- Comments
- Document Structure
- Document Headings
- Links
- Layout Elements
- Graphics
- Lists
- Text Controls
- Table
-
- Appendix D - Help with HTML
- Appendix E - Search Engine - HTML Tags
- Appendix F - UNIX Commands
- Appendix G - Pico Editor
- Appendix H - Example HTML Code for Linking to Acrobat pdf File
- Appendix I - Example HTML Code for Linking to Excel xls File
- Appendix J - Sample JavaScript Code for Last Modified File Date
-