Introduction to HTML

1
Introduction to HTML
2
Contents

• Definitions
• HTTP, MIME, URL...
• History
• Browsers
• Mosaic, Netscape, Lynx, Internet Explorer, other
• Client lt-gt Server
• Apache server

• Tags, structure
• Text formatting
• Tables
• Images
• Links
• Forms, example
• CSS
• JavaScript vs Java
• Dynamic vs Static
• Future XHTML?

3
Definitions

• HTTP
• HyperText Transfer Protocol
• MIME
• Multipurpose Internet Mail Extension
• URL (URI)
• Uniform Resource Locator

• HTML
• HyperText Markup Language
• CSS
• Cascading Style Sheet
• XML
• eXtended Markup Language

4
History

• 60s ARPANET
• 1989-90 HTML and World-Wide-Web concept
• Tim Berners-Lee at CERN
• 1992 Definition of HTTP
• 1993 First graphic browser
• 1994 Foundation of W3 consortium
• 1995-200x start of WWW economy...
• 2004 Internet2 and the GRID ??

5
Little network reminder

• IPv4
• Internet Protocol ver. 4
• 192.42.197.31
• IPv6 (Internet2)
• DNS
• domain name server
• Convert a URL to an IP and vice-versa

• Tools
• nslookup
• traceroute
• ifconfig

6
Little network reminder
Root DNS
3
2
.org
4
5
Primary DNS
Local DNS
www.expasy.org
dns.anywhere.net
6
1
www.expasy.org ??
Client query
Target server
129.194.8.64
client.anywhere.net
7
Client lt-gt Server
8
Browsers (client)

• Mosaic
• First graphic browser by NCSA
• Netscape
• Son of Mosaic also called Communicator or Mozilla
• Lynx
• Text only browser

• Internet Explorer
• From Microsoft
• Others
• Firefox, Opera, iCab, OmniWeb, Chimera, Galeon,
  Safari, Webstar
• WAP
• Wireless Application Protocol

9
The Apache server

• Receives calls from port 80 or other
• Answers by sending back html or images
• Process dynamic pages (php, jsp)
• Calls executables (cgi-bin)
• Check authorizations (.htaccess, .htpasswd)
• Encrypt data (SSL)
• Sends cookies

10
Tags, structure

• Ex lttagnamegtxxxxx lt/tagnamegt
• The ltBgtboldlt/Bgt word
• The bold word
• Attributes
• ltIMG src"../images/logo.gif" height320
  width576gt

• ltHTMLgt
• ltHEADgt
• ltTITLEgttitre de la page
• lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltFRAMESETgt
• ltFRAMEgt
• lt/FRAMESETgt
• lt/BODYgt
• lt/HTMLgt

11
Frames

• Ability to conserve some parts of the page (e.g.,
  headers, menus, etc)
• Potential problems
• some browsers
• keeping bookmarks
• Printing

• lthtmlgt
• ltheadergtlt/headergt
• ltframeset cols"162," border"0"
  framespacing"0"gt
• ltframe src"Gauche.html" name"Gauche" noresize
  scrolling"NO"gt
• ltframe src"Droite.html" name"Droite" noresizegt
• lt/framesetgt
• ltnoframesgt
• ltbodygt lt/bodygt
• lt/noframesgt
• lt/htmlgt

12
Frames example
13
Text formatting

• Format
• ltHngt header (n 1 to 6)
• ltPgt paragraph
• ltCENTERgt center
• ltBRgt line break
• ltHRgt horizontal rule
• Lists ltLIgt
• ltULgt unordered list
• ltOLgt ordered list
• ltDLgt definition list

• ltULgt
• ltLIgtfirst linelt/LIgt
• ltLIgtsecond linelt/LIgt
• ltLIgtlast linelt/LIgt
• lt/ULgt
• Style
• ltBgt bold
• ltIgt italic
• ltPREgt fixed width text
• deprecation
• ltUgt, ltSgt, ltFONTgt,
• Use CSS !

14
Table formatting

• ltTABLEgt
• ltCAPTIONgtlt/CAPTIONgt
• ltTRgt
• ltTHgtlt/THgt
• lt/TRgt
• ltTRgt
• ltTDgtlt/TDgt
• lt/TRgt
• lt/TABLEgt

• Attributes
• align, width, cellpading, cellspacing, border
• colspan, rawspan, nowrap
• Tables within tables?

15
Tables example
16
Images

• Images types
• GIF87, GIF89, Animated (Graphics Interchange
  Format)
• JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphic)
• ltIMG src"../images/logo.gif" height320
  width576gt

• GIF
• 256 indexed colors, interlacing, transparency,
  animated, (logos, flat colors)
• JPEG
• 24 bits, 16.8 mio colors, no interlacing or
  transparency, static, (photographic images)
• PNG
• 48 bits colors, interlacing, transparency,
  static, smaller files
• Image Maps
• See links

17
Links

• Internal
• Allows redirection inside of a (long) page
• ltA HREF"nextchapter"gt click herelt/Agt
• ...Some HTML code...
• ltA name"nextchapter"gtlt/Agt
• External
• Allows redirection to another page or site
• ltA HREF"http//www.expasy.ch"gt click herelt/Agt

• E-mail
• Allows direct email
• ltA HREF"mailtojean_at_isb.ch"gt click herelt/Agt
• Image maps
• Allows clickable regions in an image
• ltIMG width"48" height"24" src"../images/map.gif
  " usemap"anymapname"gt
• ltMAP name"anymapname"gt
• ltAREA href"otherpage.html" coords"33,2,43,22"
  shape"rect"gt
• lt/MAPgt

18
Forms

• Forms allow user to enter data and transmit them
  to the server
• ltFORM name"FormName" action"/cgi-bin/dea-test.pl
  " method"post"gt
• ...Some HTML code...
• ...With form tags...
• lt/FORMgt
• GET or POST ?

• INPUT tag options
• Text, Password, Hidden
• Radio
• Checkbox
• Submit, Reset
• File, Button, Image
• Other tags
• TEXTAREA
• SELECT, OPTION

19
Example
20
Example source part 1

• lthtmlgt
• ltheadgt
• ltmeta http-equiv"content-type"
  content"text/htmlcharsetiso-8859-1"gt
• ltmeta name"generator" content"Adobe GoLive
  4"gt
• lttitlegtDEA Example of a formlt/titlegt
• lt/headgt
• ltbody bgcolor"afeeee"gt
• ltcentergt
• ltform name"FormName" action"/cgi-bin/de
  a-test.pl" method"post"gt
• lth1gtExample of a form lt/h1gt
• lthr width"580"gt
• ltpgtltbgtYour namelt/bgt ltinput type"text"
  name"nom" size"24"gt
• ltbgtYour passwordlt/bgt ltinput type"password"
  name"motdepasse" size"24"gt
• lt/pgt
• ltpgtltbgtYour sexlt/bgt
• maleltinput type"radio" value"homme"
  name"sexe"gt
• femaleltinput type"radio" value"femme"
  name"sexe"gt
• ltbgtYour universitylt/bgt
• ltselect name"universite" size"1"gt

21
Example source part 2

• ltpgtltbgtYour interestslt/bgt
• ltinput type"checkbox" value"biochimie"
  name"interets"gtbiochemistry
• ltinput type"checkbox" value"scrabble"
  name"interets"gtscrabble
• ltinput type"checkbox" value"bouffe"
  name"interets"gtfood
• ltinput type"checkbox" value"voiture"
  name"interets"gtcars
• ltinput type"checkbox" value"autre"
  name"interets"gtother
• lt/pgt
• ltpgt
• ltinput type"submit" name"submitButtonName"
  value"send data to cgi-bin"gt
• ltinput type"reset"gt
• lt/pgt
• lt/formgt
• ltpgt
• lthr width"580"gt
• lt/centergt
• lt/bodygt
• lt/htmlgt

22
Client lt-gt Server lt-gt CGI
23
Modules for cgi-bin

• CGI.pm
• use CGI
• cginew CGI
• my seqcgi-gtparam(sequence')
• my _at_databasecgi-gtparam('database')
• Carp.pm
• use CGICarp q(fatalsToBrowser)

• CGILite.pm
• use CGILite
• cginew CGILite
• val cgi-gtparse_form_data
• my seqval(sequence')
• my _at_databasecgi-gtget_multiple_values
  (valdatabase')

24
Example

• !/usr/local/bin/perl
• import modules
• use CGICarp q(fatalsToBrowser) makes
  debugging more easy
• use CGI
• read arguments
• cgiCGI-gtnew() create CGI instance
• my _at_interetscgi-gtparam('interets')
• my nomcgi-gtparam('nom')
• my passcgi-gtparam('motdepasse')
• my genrecgi-gtparam('sexe')
• my universitecgi-gtparam('universite')
• select(STDOUT) configure output stream... to
  possibly send error message
• 1 flush buffering to true
• start HTML output
• print "Content-type text/html \n\n"
  required line (HTTP)
• print "ltHTMLgtltHEADgtlt/HEADgtltBODY
  bgcolor'afeeee'gt\n"
• if (genre eq "homme") titre "Monsieur"
  else titre "Madame"
• print "lth2gtltpgtBonjour titre,\nlt/h2gt"
• print "ltpgtVotre nom est ltbgtnomlt/bgt et votre mot
  de passe est ltbgtpasslt/bgt\n"

25
Cascading Style Sheet

• Clean way to define text elements
• ltSTYLE type"text/css"gt
• lt!--
• Alink color green
• H1 color FFFFFF
• font-size 14px
• font-family Arial
• text-align center
• // --gt
• lt/STYLEgt

• Use external style sheet file
• ltLINK rel"stylesheet" type"text/css"
  HREF"http//www.expasy.org/ style.css"gt

26
JavaScript vs Java

• JavaScript
• scripting language defined by Netscape
• now standardized by the W3 consortium
• code resides in the web page and allows specific
  tasks. See ltSCRIPTgt tag
• E.g., verifying form input, rollover button,
  animation (DHTML), etc...

• Java
• high level object language created by Sun
  Microsys.
• applet (usually) small compiled java software
  running in a web page
• See ltAPPLETgt tag
• Useful for creating  interactive  web pages
• E.g., Dotlet, Jalview, Seview, etc...

27
Dynamic vs Static web pages

• Dynamic
• Pages fully generated by a script or an
  executable
• Automatic update of information
• Partial indexing by robots
• Edition by programmers
• Interaction with databases
• PHP, Perl, C, Java, ASP

• Static
• Pages stored on the server
• Manual update
• Indexed by robots
• Easy to design and edit
• No possible interaction with databases
• HTML

28
The solution Semi-dynamic !

• Semi-dynamic
• Pages partly generated by a script
• Automatic update of information
• Partial indexing by robots
• Easy to design and edit
• Interaction with databases
• HTML PHP, Perl, ASP, JSP, XML

• Many PHPMySQL sites

29
Future XHTML?

• HTML not satisfactory
• DHTML HTMLCSSJavaScript
• XML standard for data definition
• Lack of a standard for data representation
• XHTMLXMLHTML

• Other new standards?
• UDDI, WDSL, SOAP, RPC
• Conclusion

30
Useful Books and remarks

• How to generate or modify HTML code?
• Windows Mac
• - Adobe Golive (WISIWIG)
• - Macromedia DreamWeaver (WISIWIG)
• - Netscape Communicator (composer)
• - other text editors (e.g., MS Word, BBedit,
  etc...)
• - MS FrontPage (Windows only)
• Unix
• - Netscape Communicator (composer) (X-windows)
• - emacs (X-windows)
• - pico (terminal)
• - vi (terminal)

• One can work on a local computer, then use FTP or
  cutpaste to transfer the files to the server.
• Or using a remote editor (on the server) like
  emacs or Netscape, one can save the files
  directly into the final folder. If X-windows
  doesn t work, use pico or vi
• From O Reilly
• - HTMLXHTML the definitive guide 4th edition
• - Beginning Perl for Bioinformatics
• - Programming PERL 3rd edition (advanced PERL
  programming)
• - Web client programming with PERL
• - Programming web graphics with PERL and GNU
  software
• - Perl 5 pocket reference
• - Mastering regular expressions 2nd edition

31
Exercises

• Exercises URL http//www.isrec.isb-sib.ch/DEA/mo
  dule_perl
• Login to sib-dea.unil.ch
• In your home directory
• create a subdir called  public_html 
• create another subdir called  cgi-bin 
• In both subdirs , create a symlink to a temporary
  dir called  wwwtmp  with
• ln -s /tmp/wwwtmp wwwtmp
• Place your pages here /home/username/public_html
  
• Place your scripts here /home/username/cgi-bin
• View your pages with
• http//sib-dea.unil.ch/username/mypage.html
• Call the scripts from HTML with
  /username-cgi-bin/myscript.pl
• View the temp files with
• http//sib-dea.unil.ch/username/wwwtmp/tempfile.g
  if

32
Exercises HTMLperl cgi-bin

• The goal of this exercise is to take an existing
  pair of files (hits_form.html and dea-hits.pl)
  and analyse how these two files work together.
• hits_form.html is a very simple form to allow the
  retrieval of protein sequences matching with a
  given profile (e.g., UBA, CARD or HECT). This
  form calls a cgi-bin perl script that makes use
  of the "hits" script to interrogate the Hits
  database.
• Modify these two files to allow multiple database
  selection
• Try to modify the perl script to allow
  hyperlinking of the results with the  get_doc 
  script
• Syntax
• http//www.isrec.isb-sib.ch/cgi-bin/get_doc?format
  textdbyyyentryxxx
• xxx entry AC number
• yyy database code (sp, trembl, trest or trgen)

33
Exercise interface analyse_seq

• The goal of this exercise is to take an existing
  pair of files (freak.html and freak.pl) and
  analyse how these two files work together, then
  create another pair of files to interface the
  analyse_seq program.
• freak.html is a very simple form to interface the
  EMBOSS program freak, that calculates the gc
  percentage of a DNA sequence and displays it in a
  table or graphically, very similarly to your
  analyse_seq
• (see http//www.uk.embnet.org/Software/EMBOSS/App
  s/freak.html)
• This form calls a cgi-bin perl script (freak.pl )
  that performs the command line action and
  displays the results in a new page.
• Modify these two files to interface your
  analyse_seq instead of freak.
• Textual output of the table is OK.
• Try to modify the perl script to allow a
  graphical output of the results using GNUPLOT
• Check if the user want a graphic output and which
  type
• Create a gnuplot command file and execute it
• Display the gif or pdf output (use  ps2pdf  to
  convert the postscript file to a pdf file).