Building a Website

1. Building a Website Stephen Sontum Middlbury College sontum@middlebury.edu Chapter 3: Scientific Publications and Archives“Introduction to Bioinformatics” by Arthur M. Lesk

2. 9: What we hope to learnBuilding a Website • History of the Web • LINUX file structure • Simple HTML tags • Word, Power Point and Kompozer • Assignment:Friday: Create an index.html and publish it to create your group talk website Core

3. Project Talk 25 minute talk to present your proposal (5 min/each). You should convince us that: 1) you are addressing an important problem. 2) you understand various approaches to the problem. 3) you have found the data and software to attack the problem. 4) you have a specific, detailed plan 5) you know how to evaluate your project when it is done. This is a short talk. You will want to use about 15 slides based on the outline above. Goup leaders should have an organization meeting before Friday. Core

4. World Wide Web Background • 1971 DOE ARPANET started (TCP/IP)

5. World Wide Web Background • 1971 DOE ARPANET started (TCP/IP) • 1991 Al Gore Invents the Internet Al Gore: High Performance Computing and Communication Act of 1991 During my service in the United States Congress I took the initiative in creating the Internet.

6. World Wide Web Background • 1971 DOE ARPANET started (TCP/IP) • 1991 HPC and Communications Act • 1991 CERN’s Tim Berners-Lee builds a server World Wide Web marked 20th anniversary

7. World Wide Web Background • 1971 DOE ARPANET started (TCP/IP) • 1991 HPC and Communications Act • 1991 CERN’s Tim Berners-Lee builds a server • 1994 First browser built by Mark Andreessen Mosaic, Netscape, Ning, Facebook, Twitter http://blog.pmarca.com/

8. World Wide Web Background • 1971 DOE ARPANET started (TCP/IP) • 1991 HPC and Communications Act • 1991 CERN’s Tim Berners-Lee builds a server • 1994 First browser built by Mark Andreessen • 1994 1500 known web server sites

9. World Wide Web Background • 1971 DOE ARPANET started (TCP/IP) • 1991 HPC and Communications Act • 1991 CERN’s Tim Berners-Lee builds a server • 1994 First browser built by Mark Andreessen • 1994 1500 known web server sites • Today over 100 million web servers each one connected to every other one Core 1014 connections

10. Unix Runs the Internet • Unix is a command line interface, used by most large, powerful computers. • In fact, Unix is the underlying structure for most of the Internet and most large scale bioinformatics operations. • A knowledge of Unix is likely to be helpful in your future career, regardless of where you pursue it.

11. Unix Advantages/Disadvantages • It is very popular, so it is easy to find information and get help • Unix can run on virtually any computer (IBM, Sun, Apple, Windows, etc) • Unix is free or nearly free (LINUX) • Unix is a stable operating system • The Apache web-server is free. • Apple computers operating system is Unix Core

12. Unix Advantages/Disadvantages • It is very popular, so it is easy to find information and get help • Unix can run on virtually any computer (IBM, Sun, Apple, Windows, etc) • Unix is free or nearly free (LINUX) • Unix is a stable operating system • The Apache web-server is free. • Apple computers operating system is Unix • Unix computers are controlled by a user unfriendly command line interface Core

13. File Name: Unix Core • Unix is case sensitive • Unix filenames contain only letters, numbers, and the _ (underscore), . (dot), and - (dash) characters. (No spaces or other characters) • Unix does not allow two files to exist in the same directory with the same name. (Doing so overwrites the existing file ). • Unix uses / for directories (not Windows \ ) starting with the root directory / • Unix uses extensions to define file types /home/sontum/public_html/index.html root username filename.filetype

14. File Name: Unix Unix is case sensitive Unix filenames contain only letters, numbers, and the _ (underscore), . (dot), and - (dash) characters. (No spaces or other characters) Unix does not allow two files to exist in the same directory with the same name. (Doing so overwrites the existing file ). Unix uses / for directories (not Windows \ ) starting with the root directory / Unix uses extensions to define file types Core C:\home\sontum\public_html\index.html root username filename.filetype

15. File Name: Extensions • Most UNIX filenames start with a lower case letter and end with a dot followed by one, two, or three letters: myfile.txt • However, this is just a common convention and is not required. • It is also possible to have additional dots in the filename. • The part of the name following the last dot is called the “extension.” • The extension is often used to designate the type of file.

16. File Name: Common Extensions • By convention: • files that end in .txt are text files • files that end in .html are HTML files for the Web • Compressed files have the .zip or .gz extension • Files that end in .doc are word files • Files that end in .jpg are jpeg image files • Extensions are used by the web-server to process files • Unix does not require these extensions (unlike Windows or the web-server), but it is sensible to always include extensions.

17. File Name: Windows Xp • Turning on extensions: • By default Windows does not show extension • Open up “My Computer” & select Tools/Folder Options • Uncheck “Hide extensions for known file types” • Click OK • Mac computers show the extensions by default. • Beware of blanks in file names. Windows Xp uses many C:\Documents and Settings\sontum • When installing software derived from LINUX you many have to install in a directory tree without blanks.

18. File Name: Relative Names • Change directorycd name #Move down into directory namecd .. #Move up one directorycd ~sontum #Move to sontum’s users directorydir #List directory contentsthese commands are mostly the same in DOS • Keep all of your web-page in one directory on your PC using Unix file names • Use relative file names (. & ..) to move around within your web-page directory • Move your whole web-page directory as a unit to publish page.

19. File Name: Quiz • C:\My Documents\COURSES • ../images/middlebury.gif • W4_Building_Website.ppt • index.html • O’Connell.html • 4/1/2008 • Arthur Lesk Which are valid file names for a Web Page?

20. File Name: Quiz • C:\My Documents\COURSES • ../images/middlebury.gif • L9_Building_Website.ppt • index.html • O’Connell.html • 4/1/2008 • Arthur Lesk Which are valid file names for a Web Page? yes yes yes yes no no no no

21. File Names: Windows • Make an alias to “Command Prompt” on your desktop. (Start/Programs/Accessories) right click and send to desktop • Right Click the alias select properties and blank out “Start in:” then press OK • Double click the alias to start up the windowIt will start in “Desktop” because Start in: is blank • Use “dir” and “cd directory” to explore your account. Where did “cd cd .. cd .” Take you • Type “ipconfig /all” to find your computers URL and IP address (Note: spaces are important) • Type “perl –h” to see if perl is installed

22. File Names: Mac • Make an alias to “Terminal” from the Finder cntrl-click on Applications/Utilities/Terminal and select Make Alias • Drag the Terminal alias to the Desktop • Double click the alias to start up the window • Use “ls -l” and “cd directory” to explore your account. Where did cd, cd .., and cd . take you • Type “ifconfig -a” to find your computers URL and IP address (Note: spaces are important) • Type “perl –h” to see if perl is installed

23. Web Servers XP:Mapping a Drive • Under My Computer select Tools/Map Network Drive or right click My Computer • For the folder type \\middfiles.middlebury.edu and Browse • Under middfiles.middlebury.edu select middfiles, then classes, then Spring11 and then MBBC0324A • You should now be able to navigate to the folders in our classes account. Check out PUBLIC_HTML/STUDENTS and make a desktop alias to your group • Mappings are offen set up automaticaly when you log in to your user account on campus.

24. Web Servers Mac:Mounting a Drive • Click the desktop to activate Finder then select Go/Connect to Server from the menu • In the Server Address field, typeafp://middfiles.middlebury.edu/middfiles then click the Add button (a + sign) to add the address to your favorite servers list • Click Connect and complete the Authorization:in the name field type your usernamein the password field type your passwordclick OK • A new volume will appear on your deskdtop. You should now be able to navigate to the folders in our classes account. Check out PUBLIC_HTML/STUDENTS and make a desktop alias to your group.

25. What is HTML? • The Hyper-Text Markup Language • A text only document built using tags for formatting instructions for example <b> for bold. • The Document display will be independent of the monitor used for the display • When using your browser use View/Page Source to see the mark up language Go to http://s11.middlebury.edu/MBBC0324A/ And view the source Using: View/Page Source & right click View Frame Source

26. HTML Background • Based on "Information Processing - Text and Office Systems - Standard Generalized Markup Language (SGML)”, published by ISO in 1986 (ISO 8879) • Tim Berners-Lee, (CERN) near Geneva, Switzerland, writes proposal in 1989 for a hypertext document system (named the "The World-Wide Web" in October of 1990). • Dan Connolly (CERN) writes specifications for HTML 1.0 in 1990. • Last release of HTML is Version 4.01 in 1997 • XML, a new user definable mark up language, replaced HTML 4.01 with XHTML 1.0 in 2002 • Current release is XHTML 2.0 in 2010

27. URL Definition • Uniform Resource Locator • Syntax:<protocol>://<protocol specific part>/<url-path> • Valid <protocol>’s:ftp, http, mailto, news, nntp, telnet, wais, file … • <protocol specific part>:<user>:<password>@<host>:<port> [<user>:<password> @ and :<port>] are optional • <url-path> syntax varies according to the protocol • Exampleprotocolhostuser_homefolderfile http://www.middlebury.edu/~sontum/chemistry/index.html Core http://www.middlebury.edu/~sontum What is the file?

28. Basic Architecture of an HTML Document • Tags (<open_tag>text</close_tag>) • The HTML Document <HTML></HTML>) • The Document Head (<Head></Head>) • The Document Title (<Title></Title> • The Document Body (<body></body>) Make this index.html file with Kompozer then save it to your desktop in a folder called my_web. Also make a folder in my_web called images. <html> <head> <title> Steve </title> </head> <body> Hello my name is Steve </body></html> Core

29. Editing HTML with Kompozer • With Kompozer you can edit the source or just add objects to the display much as you would with Word by dragging and dropping. • Caution: Never add images to a new html file only to an existing file. Save a new html file before you add links or you will get hard links rather than relative links. • Set up an images folder and put all images that you will use in your html document in this folder.

30. Document Body • Why a Head and a Body? • HTML is designed to logically separate information about the document from the document information. • HEAD elements can also be used to describe relationships of this document to others. • <Body> contains bulk of document. Most HTML tags will be found in the <body> • Tags can have attributes. For example the attribute of the <body> tag can be used to set the background of the document and the color of links and text • BACKGROUND, BGCOLOR, TEXT, LINK, VLINK <BODY TEXT="#003399" BGCOLOR="#FFFFFF" LINK="#003399" VLINK="#800080">

31. How to Hyperlink Documents • links may point within a document, to other files, or to other hosts. • Hyperlinking is performed using a Anchor <a> tag. When you click on the hyperlink your window will display the new document • <A HREF=“URL”>text to display</A> <a href="http://www.middlebury.edu/~sontum"> my web page </a> <a href=“file.html"> A file in the local directory </a> <a href=“files/file.html"> A file in the directory files </a> <a href=“../file.html"> A file in the directory above this one </a> <a href=“c:/WINDOWS/file.html"> Don’t use a hard file link </a> Core

32. How to Add Graphics • Graphics are added to documents using IMG tag with SRC elements. • <IMG SRC=“URL”> • Can be imbedded inside of other TAGs • How the image displays is determined by the files extension To bring up an image <img src="web.gif"> To bring up image with text to the right. <p><img src="web.gif">The spider web</p> <a href="penguin.gif"><img src="smallpenquin.gif"></a>this example uses a small inline image to point to a larger image

33. Editors • WYSIWYG: What you see is what you getMicrosoft Word and PowerPoint • Text EditorsVim, NotePad • Hybrid WYSIWYG Editors and site managers Kompozer and SeaMonkey Core Lets look an ideal students first web page at Davidson http://www.bio.davidson.edu/courses/genomics/webauthor/template.html

34. Editor: Example Word • Start Word to create a file called word.html • Center and Bold a title • Insert a picture from a file • Type www.middlebury.edu and select the text then use Insert/Hyperlink to make it a link. • Use File/Save As and choose the file type: as Web Page Filtered • View the file with Firefox and Kompozer

35. Editor: Example Powerpoint Start Powerpoint and create a slide Insert a picture from a file Start up a web-browser and copy a URL into the slide. Use File/Save As and choose the file type:as Web Page(.html) thenas Single File Web page (.mhtml) and finally as PowerPoint 97-2003 (.ppt) Add a link in your index.html file to both of these power point files and then view each with Firefox.

36. Hosting my Website Core • Domains and subdirectories • http://www.middlebury.edu/~sontumpoints to directory ~sontum/public_html on midd-unix (community.middlebury.edu) • You need to move your index.html and associated folders to your name in PUBLIC_HTML/STUDENTS/Group/firstname • See of you can view your page from our class webpage using the Students link on our Class WebPage

37. File Transfer Programs • Kompozer is a freeware FTP client and editor • SeaMonkey is a freeware editor and browser • CyberDuck is a freeware Mac SFTP client • WinSCP is a freeware SFTP and SCP client (secure shell is not activated for students) Move your index.html file Using a Mapped Drive Off campus use a VPN client then Map the Drive Core

38. Website References • Building a Website http://www.youtube.com/watch?v=cokpGGXzzxw&feature=related • Web Teacher (Perl CGI)http://www.webteacher.com/cgi/index.html • Web Monkeyhttp://www.webmonkey.com/ • Kompozer Tutorialhttp://kompozer.net/http://www.youtube.com/watch?v=cokpGGXzzxw&feature=related There are lots of videos • Davidson Tutorialhttp://www.bio.davidson.edu/courses/genomics/GPBwebstandards.html#web1

39. Extensions: What is XML ? • Extensible Markup Language • XML is a markup language for data • Tags are self-designed • XML separates the data from its display • XML is a user defined programming language that can be used to create new internet languages like XHTML http://www.w3schools.com/xml/default.asp

40. XML Example <?xml version="1.0" encoding="ISO-8859-1"?><note>  <to>Tove</to>  <from>Jani</from>  <heading>Reminder</heading>  <body>Don't forget me this weekend!</body></note> • The first line declares the XML version and the character encoding (western European character set) • The next line defines the root element • The next 4 lines define child elements of the root • All XML elements must have a closing tag. • If you need special characters replace them with an entity reference • &lt; for < • &gt; for > • &amp; for & • &quot; for “ • &apos; for ‘ Core

41. Extension:Plugin and Scripts • MDL plugin for molecules http://www.mdl.com/products/framework/chime/ • EMBED Tag Puts a Browser Plugin onto the page • Include your own Perl Program <P ALIGN=CENTER> <EMBED SRC="Aspirin.pdb“ WIDTH="350” HEIGHT="350" ALIGN="BOTTOM"> </P> http://s09.middlebury.edu/CHEM0324A/chime/index.html <HTML> <BODY> <P>Here's the output from my program: <!--#include virtual="hello.cgi"--> </P> </BODY> </HTML> Core