DOCSLIB.ORG

Introduction to HTML Outline

Introduction to HTML Outline

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 <HTML> minimal tags: <HEAD> <HTML> <TITLE>title of the 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, 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 <LI> • <Hn> header (n = 1 to 6) • <UL> unordered list <P> paragraph • • <OL> ordered list • <CENTER> center • <DL> definition list • <BR> line break • <HR> horizontal rule </UL> Style <LI>first line</LI> • <B> bold </B> <LI>second line</LI> • <I> italic </I> <LI>last line</LI> • first line </UL> • <PRE> fixed width text </PRE> • second line • last line deprecation • <U>, <S>, <FONT>, … <DL> • Use CSS ! <DT>spam <DD>annoying unrequested email </DL> spam annoying unrequested email VI, October 2006 Page 14 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, October 2006 Page 15 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, 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, <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, October 2006 Page 20 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, 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 <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, October 2006 Page 23 HTML - Forms Example VI, October 2006 Page 24 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, October 2006 Page 25 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, 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:

View Full Text

Details

  • File Type
    pdf
  • Upload Time
    -
  • Content Languages
    English
  • Upload User
    Anonymous/Not logged-in
  • File Pages
    19 Page
  • File Size
    -

Download

Channel Download Status
Express Download Enable

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

  • Not to be reproduced or distributed without explicit permission.
  • Not used for commercial purposes outside of approved use cases.
  • Not used to infringe on the rights of the original creators.
  • If you believe any content infringes your copyright, please contact us immediately.

Support

For help with questions, suggestions, or problems, please contact us