Introduction to HTML
(adapted from Laurent Falquet)
VI, October 2006 Page 1
Outline
Definitions Tags, structure • HTTP, MIME, URL... • Text formatting • Tables • Images History • Links • Forms, example Browsers HTML forms & CGI • Mosaic, Netscape, Lynx, Internet Explorer, other CSS
Client <-> Server JavaScript vs Java
Apache server Dynamic vs Static
Future: XHTML?
VI, October 2006 Page 2 HTML - Definitions
HTTP HTML • HyperText Transfer Protocol • HyperText Markup Language
MIME CSS • Multipurpose Internet Mail • Cascading Style Sheet Extension XML URL (URI) • eXtended Markup Language • Uniform Resource Locator
FTP • File Transfer Protocol
VI, October 2006 Page 3
HTML - 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-… Start of WWW economy...
2004 Internet2 and the GRID
VI, October 2006 Page 4 HTML - Little network reminder
IPv4 Tools • Internet Protocol ver. 4 • 192.42.197.31 • nslookup • traceroute • IPv6 (Internet2) Root DNS 3 • ifconfig 2 *.org 5 4 Local DNS Primary DNS dns.anywhere.net www.expasy.org
1 6 www.expasy.org ??
Client query Target server client.anywhere.net 129.194.8.64 DNS •domain name server •Convert a URL to an IP and vice-versa VI, October 2006 Page 5
HTML - Client <-> Server
VI, October 2006 Page 6 HTML - Browsers (client)
Mosaic Internet Explorer • First graphic browser by NCSA • From Microsoft
Netscape Others • Son of Mosaic also called • Firefox, Opera, iCab, OmniWeb, Communicator or Mozilla Chimera, Galeon, Safari, Webstar… Lynx • Text only browser WAP • Wireless Application Protocol
VI, October 2006 Page 7
HTML - 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
VI, October 2006 Page 8 HTML - Tags, structure
VI, October 2006 Page 9
VI, October 2006 Page 10 HTML - Tags, structure
minimal tags:
Example:
The bold word ---> The bold word Attributes: 
VI, October 2006 Page 11
HTML - Frames
Ability to conserve some parts of the page (e.g., headers, menus, etc…)
VI, October 2006 Page 12 HTML - Frames
http://www.htmlhelp.com/design/frames/whatswrong.html Potential problems •some browsers What's wrong with frames? … •keeping bookmarks •Printing In depth
Unaddressable resources On the Web, everything can be accessed (or addressed, at least) using a!n Uniform Resource Locator (URL). This makes it possible to link to anything, anywhere. At least, asE loSng as the anything in question does not use frames. M A Totally incompatible R The general rule for HTML is that if an element is nFot understood by a browser, it should be ignored. This way, a browser that does not understand the elemenDt can still show the rest of the document. The reader may miss some of the meaning of the text, or get a docuIment that is formatted a bit strangely. Unfortunately, this is not the O case with frames. V A The FRAMESET and FRAME elements do not have textual content. A browser that does not support frames will simply skip over these tags. But as there is nothing else to show, this browser would display nothing in place! The NOFRAMES element allows an author to specify content for such a browser, but this often means that the author has to do double work.
VI, October 2006 Page 13
HTML - Text formatting
Format Lists
- unordered list
paragraph • •
- ordered list •
- definition list •
line break •
horizontal rule
fixed width text• second line • last line
deprecation • , , , … • Use CSS !
spam annoying unrequested email
VI, October 2006 Page 14 HTML - Table formatting
CAPTION - Table caption TR - Table row TH - Header cell TD - Table cell
| Average | other category | Misc | ||
|---|---|---|---|---|
| height | weight | |||
| males | 1.9 | 0.003 | ||
| females | 1.7 | 0.002 | ||
A test table with merged cells /------\ | | Average | other | Misc | | |------| category |------| | | height | weight | | | |------|------| | males | 1.9 | 0.003 | | | |------|------| | females | 1.7 | 0.002 | | | \------/
VI, October 2006 Page 15
HTML - Table formatting
| … | • … •
|---|
| … | (http://www.isb-sib.ch) •
VI, October 2006 Page 16 HTML - Tables example
VI, October 2006 Page 17
HTML - Tables example
56 tables !!!
VI, October 2006 Page 18 HTML - Tables example
3 tables …
VI, October 2006 Page 19
HTML - Images
Images types: GIF • GIF87, GIF89, Animated • 256 indexed colors, interlacing, transparency, animated, (logos, flat (Graphics Interchange Format) colors) • JPEG (Joint Photographic Experts Group) JPEG • PNG (Portable Network Graphic) • 24 bits, 16.8 mio colors, no interlacing or transparency, static, PNG • 48 bits colors, interlacing, transparency, static, smaller files
Image Maps • See links
VI, October 2006 Page 20 HTML - Links
Internal • Allows redirection inside of a (long) page click here ...Some HTML code...
External • Allows redirection to another page or site click here
E-mail • Allows direct email click here
Image maps • Allows clickable regions in an image 
VI, October 2006 Page 21
HTML - Links: Image Maps
VI, October 2006 Page 22 HTML - Forms
Forms allow user to enter data and transmit them to the server
GET or POST ? (with the Get, all the form data is included in the URL. So we can directly access this program without the form, by using the following URL: http://www.expasy.org/cgi-bin/mailform/[email protected] )
INPUT tag options: • Text, Password, Hidden Other tags • Radio •TEXTAREA • Checkbox •SELECT, OPTION • Submit, Reset • File, Button, Image
VI, October 2006 Page 23
HTML - Forms Example
VI, October 2006 Page 24 HTML - Forms Example source part 1
VI, October 2006 Page 26 HTML - Client <-> Server <-> CGI
VI, October 2006 Page 27
HTML - Modules for cgi-bin
CGI.pm CGI::Lite.pm use CGI; use CGI::Lite; $cgi=new CGI; $cgi=new CGI::Lite; my $seq=$cgi->param(’sequence'); %val = $cgi->parse_form_data; my @database=$cgi->param('database'); my $seq=$val(’sequence'); my @database=$cgi->get_multiple_values ($val{’database'});
Carp.pm use CGI::Carp q(fatalsToBrowser);
VI, October 2006 Page 28 HTML - cgi-bin Example
#!/usr/local/bin/perl ### import modules use CGI::Carp q(fatalsToBrowser); # makes debugging more easy use CGI; ### read arguments ### $cgi=CGI->new(); ### create CGI instance my @interets=$cgi->param('interets'); my $nom=$cgi->param('nom'); my $pass=$cgi->param('motdepasse'); my $genre=$cgi->param('sexe'); my $universite=$cgi->param('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 "
\n"; if ($genre eq "homme") { $titre = !!"Sir";} else { $titre = "Madam";} print "Dear $titre,\n"; print "
Your name is $nom and your password is $pass\n"; print "
The code of your university is $universite\n"; print "
Your current interests are : @interets!\n"; print "
"; print ""; print ""; exit 0;
VI, October 2006 Page 29
HTML - Cascading Style Sheet
Clean way to define text elements
Use external style sheet file
VI, October 2006 Page 30 HTML - JavaScript vs Java
JavaScript Java • scripting language defined by • high level object language Netscape created by Sun Microsys. • now standardized by the W3 • applet: (usually) small compiled consortium java software running in a web • code resides in the web page and page allows specific tasks. See • See