Quick viewing(Text Mode)

HTML/Cgi-Bin

HTML/Cgi-Bin

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 • • Forms, example Browsers • , , , CSS Explorer, other JavaScript vs Java <-> !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 • First graphic browser by NCSA • From Microsoft

Netscape Others • Son of Mosaic also called • , , iCab, OmniWeb, Communicator or Chimera, , , 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 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

minimal tags: titre de la page

Example: xxxxx

The bold word ---> The bold word Attributes:

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

…
<body> … </body>

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

  • first line
    • • header (n = 1 to 6)
  • second line
  • last line
    • •

    paragraph

•
center •
line break •
horizontal rule Style • bold Lists
  • • italic •
      unordered list • 
       fixed width text • 
         ordered list • 
         definition list deprecation • , , , … • Use CSS !
        VI, March 2005 Page 12 HTML - Table formatting
        CAPTION - Table caption TR - Table row TH - Header cell TD - Table cell 
         A test table with merged cells 
        Averageother
        category        		Misc 
        heightweight 
        males1.90.003 
        females1.70.002 
        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
         Attributes: •  • align, width, cellpading, cellspacing, border •  • colspan, rawspan, nowrap •  • … •  •  Tables within tables? •  (http://www.isb-sib.ch) • 
        …
        …
        …
         
        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,  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 click here ...Some HTML code... 
        External • Allows redirection to another page or site  click here
        E-mail • Allows direct   click here
        Image maps • Allows clickable regions in an image    
        VI, March 2005 Page 17 HTML - Forms
        Forms allow user to enter data and transmit them to the server 
         ...Some HTML code...... With form tags... 
        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, March 2005 Page 18 HTML - Forms Example
        VI, March 2005 Page 19 HTML - Forms Example source part 1
            DEA: Example of a form   
         
         
        Example of a form :
         
         
        Your name:  Your password:  
         
        Your sex: male female Your university:  
        VI, March 2005 Page 20 HTML - Form Example source part 2
        Your interests: biochemistry scrabble food cars other 
         
           
         
         
         
         
          
        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 "\n"; if ($genre eq "homme") { $titre = "Monsieur";} else { $titre = "Madame";} print "
        Bonjour $titre,\n
        "; print "
        Votre nom est $nom et votre mot de passe est $pass\n"; print "
        Vous êtes de l'université dont le code est $universite\n"; print "
        Vos intérêts sont: @interets!\n"; print "
        "; print ""; print ""; exit 0;
        VI, March 2005 Page 24 HTML - Cascading Style Sheet
        Clean way to define text elements
        Use external style sheet file
        VI, March 2005 Page 25 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  and page allows specific tasks. See • See  tag 









        

        
  

        
© 2022 Docslib.org