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

• Tags, structure
• Text formatting
• Images
• Links
• Forms, example
• CSS
• JavaScript vs Java
• 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-2000 start of WWW economy...

5
Browsers

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

• Internet Explorer
• From Microsoft
• Other
• Opera, iCab, Webstar
• WAP
• Wireless Application Protocol

6
Client lt-gt Server
7
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

8
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 !

9
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

• Image Maps
• See links

10
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

11
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

12
Example
13
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

14
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

15
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.ch/ style.css"gt

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

17
Future XHTML?

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

• Conclusion

18
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)
• 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
• - 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