Building a Website

1
Building a Website
Stephen Sontum Middlbury College sontum_at_middlebury
.edu
Chapter 3 Scientific Publications and
ArchivesIntroduction 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
• AssignmentFriday Create an index.html and
  publish it to create your group talk website

Core
3
Project Talk
Core

• 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.

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 CERNs 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 CERNs 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 CERNs 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 CERNs 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
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

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 sontums 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
Which are valid file names for a Web Page?

• C\My Documents\COURSES
• ../images/middlebury.gif
• W4_Building_Website.ppt
• index.html
• OConnell.html
• 4/1/2008
• Arthur Lesk

20
File Name Quiz
Which are valid file names for a Web Page?

• C\My Documents\COURSES
• ../images/middlebury.gif
• L9_Building_Website.ppt
• index.html
• OConnell.html
• 4/1/2008
• Arthur Lesk

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 XPMapping 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 MacMounting 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 Authorizationin
  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 ltbgt 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
• Syntaxltprotocolgt//ltprotocol specific
  partgt/lturl-pathgt
• Valid ltprotocolgtsftp, http, mailto, news,
  nntp, telnet, wais, file
• ltprotocol specific partgtltusergtltpasswordgt_at_lthostgt
  ltportgt
• ltusergtltpasswordgt _at_ and ltportgt are optional
• lturl-pathgt syntax varies according to the
  protocol
• Exampleprotocol host
  user_home folder file
  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 (ltopen_taggttextlt/close_taggt)
• The HTML Document ltHTMLgtlt/HTMLgt)
• The Document Head (ltHeadgtlt/Headgt)
• The Document Title (ltTitlegtlt/Titlegt
• The Document Body (ltbodygtlt/bodygt)

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.
lthtmlgt ltheadgt lttitlegt Steve lt/titlegt lt/headgt ltbody
gt Hello my name is Steve lt/bodygtlt/htmlgt
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.
• ltBodygt contains bulk of document. Most HTML tags
  will be found in the ltbodygt
• Tags can have attributes. For example the
  attribute of the ltbodygt tag can be used to set
  the background of the document and the color of
  links and text
• BACKGROUND, BGCOLOR, TEXT, LINK, VLINK

ltBODY TEXT"003399" BGCOLOR"FFFFFF"
LINK"003399" VLINK"800080"gt
31
How to Hyperlink Documents

• links may point within a document, to other
  files, or to other hosts.
• Hyperlinking is performed using a Anchor ltagt
  tag. When you click on the hyperlink your window
  will display the new document
• ltA HREFURLgttext to displaylt/Agt

lta href"http//www.middlebury.edu/sontum"gt my
web page lt/agt lta hreffile.html"gt A file in the
local directory lt/agt lta hreffiles/file.html"gt A
file in the directory files lt/agt lta
href../file.html"gt A file in the directory
above this one lt/agt lta hrefc/WINDOWS/file.html
"gt Dont use a hard file link lt/agt
Core
32
How to Add Graphics

• Graphics are added to documents using IMG tag
  with SRC elements.
• ltIMG SRCURLgt
• Can be imbedded inside of other TAGs
• How the image displays is determined by the files
  extension

To bring up an image ltimg src"web.gif"gt To
bring up image with text to the right.
ltpgtltimg src"web.gif"gtThe spider weblt/pgt lta
href"penguin.gif"gtltimg src"smallpenquin.gif"gtlt/a
gtthis 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/genom
ics/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 typeas
  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
  cokpGGXzzxwfeaturerelated
• Web Teacher (Perl CGI)http//www.webteacher.com/c
  gi/index.html
• Web Monkeyhttp//www.webmonkey.com/
• Kompozer Tutorialhttp//kompozer.net/
  http//www.youtube.com/watch?vcokpGGXzzxwfeatur
  erelated There are lots of videos
• Davidson Tutorialhttp//www.bio.davidson.edu/cour
  ses/genomics/GPBwebstandards.htmlweb1

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
lt?xml version"1.0" encoding"ISO-8859-1"?gtltnotegt
  lttogtTovelt/togt  ltfromgtJanilt/fromgt 
ltheadinggtReminderlt/headinggt  ltbodygtDon't forget
me this weekend!lt/bodygtlt/notegt

• 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 lt
• gt for gt
• amp for
• quot for
• apos for

Core
41
ExtensionPlugin and Scripts

• MDL plugin for molecules http//www.mdl.com/produc
  ts/framework/chime/
• EMBED Tag Puts a Browser Plugin onto the
  page
• Include your own Perl Program

ltP ALIGNCENTERgt ltEMBED SRC"Aspirin.pdb
WIDTH"350 HEIGHT"350" ALIGN"BOTTOM"gt lt/Pgt
http//s09.middlebury.edu/CHEM0324A/chime/index.ht
ml
ltHTMLgt ltBODYgt ltPgtHere's the output from my
program lt!--include virtual"hello.cgi"--gt lt/Pgt
lt/BODYgt lt/HTMLgt
Core