HTML/Cgi-Bin
Total Page:16
File Type:pdf, Size:1020Kb
Introduction to HTML (adapted from Laurent Falquet) 2005 VI, March 2005 Page 1 Outline Definitions Tags, structure • HTTP, MIME, URL... • Text formatting • Tables History • Images • Links • Forms, example Browsers • Mosaic, Netscape, Lynx, Internet CSS Explorer, other JavaScript vs Java Client <-> !Server Dynamic vs Static Apache server Future: XHTML? VI, March 2005 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 VI, March 2005 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-0x Start of WWW economy... 2004 Internet2 and the GRID ?? VI, March 2005 Page 4 HTML - Little network reminder I 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, March 2005 Page 5 HTML - Client <-> Server VI, March 2005 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, March 2005 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, March 2005 Page 8 HTML - Tags, structure <HTML> minimal tags: <HEAD> <HTML> <TITLE>titre de la page </TITLE> <BODY> </HEAD> </BODY> <BODY> </HTML> <FRAMESET> <FRAME> </FRAMESET> </BODY> </HTML> Example: <tagname> xxxxx </tagname> The <B>bold</B> word ---> The bold word Attributes: <IMG src="../images/logo.gif" height=’320’ width=‘576’> VI, March 2005 Page 9 HTML - Frames Ability to conserve some parts of the page (e.g., headers, menus, etc…) Potential problems • some browsers • keeping bookmarks • Printing <html> <header>…</header> <frameset cols="162,*" border="0" framespacing="0"> <frame src="Gauche.html" name="Gauche" noresize scrolling="NO"> <frame src="Droite.html" name="Droite" noresize> </frameset> <noframes> <body> … </body> </noframes> </html> VI, March 2005 Page 10 HTML - Frames http://www.htmlhelp.com/design/frames/whatswrong.html What's wrong with frames? … In depth Unaddressable resources On the Web, everything can be accessed (or addressed, at least) using an Uniform Resource Locator (URL). This makes it possible to link to anything, anywhere. At least, as long as the anything in question does not use frames. Totally incompatible The general rule for HTML is that if an element is not understood by a browser, it should be ignored. This way, a browser that does not understand the element can still show the rest of the document. The reader may miss some of the meaning of the text, or get a document that is formatted a bit strangely. Unfortunately, this is not the case with frames. The FRAMESET and FRAME eleAVOIDments do not h avFRAMESe 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, March 2005 Page 11 HTML - Text formatting Format <UL> <LI>first line</LI> • <Hn> header (n = 1 to 6) <LI>second line</LI> <LI>last line</LI> • <P> paragraph </UL> • <CENTER> center • <BR> line break • <HR> horizontal rule Style • <B> bold Lists <LI> • <I> italic • <UL> unordered list • <PRE> fixed width text • <OL> ordered list • <DL> definition list deprecation • <U>, <S>, <FONT>, … • Use CSS ! VI, March 2005 Page 12 HTML - Table formatting CAPTION - Table caption TR - Table row TH - Header cell TD - Table cell <TABLE BORDER=1> <CAPTION>A test table with merged cells</CAPTION> <TR><TH ROWSPAN=2><TH COLSPAN=2>Average<TH ROWSPAN=2>other<BR>category<TH>Misc <TR><TH>height<TH>weight <TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003 <TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002 </TABLE> A test table with merged cells /--------------------------------------------------\ | | Average | other | Misc | | |-------------------| category |--------| | | height | weight | | | |-----------------------------------------|--------| | males | 1.9 | 0.003 | | | |-----------------------------------------|--------| | females | 1.7 | 0.002 | | | \--------------------------------------------------/ VI, March 2005 Page 13 HTML - Table formatting <TABLE> Attributes: • <CAPTION>…</CAPTION> • align, width, cellpading, cellspacing, border • <TR> • colspan, rawspan, nowrap • <TH>…</TH> • … • </TR> • <TR> Tables within tables? • <TD>…</TD> (http://www.isb-sib.ch) • </TR> </TABLE> VI, March 2005 Page 14 HTML - Tables example VI, March 2005 Page 15 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, <IMG src="../images/logo.gif" (photographic images) height=‘320’ width=‘576’> PNG • 48 bits colors, interlacing, transparency, static, smaller files Image Maps • See links VI, March 2005 Page 16 HTML - Links Internal • Allows redirection inside of a (long) page <A HREF="#nextchapter">click here</A> ...Some HTML code... <A name="nextchapter"></A> External • Allows redirection to another page or site <A HREF="http://www.expasy.ch"> click here</A> E-mail • Allows direct email <A HREF="mailto:[email protected]"> click here</A> Image maps • Allows clickable regions in an image <IMG width="48" height="24" src="../images/map.gif" usemap="#anymapname"> <MAP name="anymapname"> <AREA href="otherpage.html" coords="33,2,43,22" shape="rect"> </MAP> VI, March 2005 Page 17 HTML - Forms Forms allow user to enter data and transmit them to the server <FORM name="FormName" action="/cgi-bin/dea-test.pl" method="post"> ...Some HTML code... ...With form tags... </FORM> 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/Swiss-Prot_Helpdesk&&[email protected] ) INPUT tag options: • Text, Password, Hidden Other tags • Radio •TEXTAREA • Checkbox •SELECT, OPTION • Submit, Reset • File, Button, Image VI, March 2005 Page 18 HTML - Forms Example VI, March 2005 Page 19 HTML - Forms Example source part 1 <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <meta name="generator" content="Adobe GoLive 4"> <title>DEA: Example of a form</title> </head> <body bgcolor="#afeeee"> <center> <form name="FormName" action="/cgi-bin/dea-test.pl" method="post"> <h1>Example of a form :</h1> <hr width="580"> <p><b>Your name:</b> <input type="text" name="nom" size="24"> <b>Your password:</b> <input type="password" name="motdepasse"size="24"> </p> <p><b>Your sex:</b> male<input type="radio" value="homme" name="sexe"> female<input type="radio" value="femme" name="sexe"> <b>Your university:</b> <select name="universite" size="1"> <option value="empty" selected>select please <option value="unibas">Basel <option value="unige">Geneva <option value="unil">Lausanne </select> </p> VI, March 2005 Page 20 HTML - Form Example source part 2 <p><b>Your interests:</b> <input type="checkbox" value="biochimie" name="interets">biochemistry <input type="checkbox" value="scrabble" name="interets">scrabble <input type="checkbox" value="bouffe" name="interets">food <input type="checkbox" value="voiture" name="interets">cars <input type="checkbox" value="autre" name="interets">other </p> <p> <input type="submit" name="submitButtonName" value="send data to cgi-bin"> <input type="reset"> </p> </form> <p> <hr width="580"> </center> </body> </html> VI, March 2005 Page 21 HTML - Client <-> Server <-> CGI VI, March 2005 Page 22 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, March 2005 Page 23 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 "<HTML><HEAD></HEAD><BODY bgcolor='#afeeee'>\n"; if ($genre eq "homme") { $titre = "Monsieur";} else { $titre = "Madame";} print "<h2><p>Bonjour $titre,\n</h2>"; print