Introduction to HTML (adapted from Laurent Falquet) VI, October - - PDF document
Introduction to HTML (adapted from Laurent Falquet) VI, October 2006 Page 1 Outline Tags, structure Definitions Text formatting HTTP, MIME, URL... Tables Images History Links Forms, example Browsers HTML
Page 1
VI, October 2006
Page 2
VI, October 2006
Page 3
VI, October 2006
Page 4
VI, October 2006
Page 5
VI, October 2006
www.expasy.org 129.194.8.64 *.org dns.anywhere.net client.anywhere.net www.expasy.org ??
Page 6
VI, October 2006
Page 7
VI, October 2006
Page 8
VI, October 2006
Page 9
VI, October 2006
Page 10
VI, October 2006
Page 11
VI, October 2006
<IMG src="../images/logo.gif" height=’320’ width=‘576’>
minimal tags: Page 12
VI, October 2006
Page 13
VI, October 2006
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 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.
Page 14
VI, October 2006
</UL> <LI>first line</LI> <LI>second line</LI> <LI>last line</LI> </UL> <DL> <DT>spam <DD>annoying unrequested email </DL>
spam annoying unrequested email
Page 15
VI, October 2006
<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 | | | \--------------------------------------------------/
Page 16
VI, October 2006
Page 17
VI, October 2006
Page 18
VI, October 2006
Page 19
VI, October 2006
Page 20
VI, October 2006
<IMG src="../images/logo.gif" height=‘320’ width=‘576’>
Page 21
VI, October 2006
<A HREF="#nextchapter">click here</A> ...Some HTML code... <A name="nextchapter"></A>
<A HREF="http://www.expasy.ch"> click here</A>
<A HREF="mailto:jean@isb.ch"> click here</A>
<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>
Page 22
VI, October 2006
Page 23
VI, October 2006
<FORM name="FormName" action="/cgi-bin/dea-test.pl" method="post"> ...Some HTML code... ...With form tags... </FORM>
http://www.expasy.org/cgi-bin/mailform/Swiss-Prot_Helpdesk&&swiss-prot@expasy.org )
Page 24
VI, October 2006
Page 25
VI, October 2006
<html> <head> <meta http-equiv="content-type" content="text/html;ch charset=i =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/de dea-t
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=" ="mo 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>
Page 26
VI, October 2006
<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>
Page 27
VI, October 2006
Page 28
VI, October 2006
use CGI; $cgi=new CGI; my $seq=$cgi->param(’sequence'); my @database=$cgi->param('database');
use CGI::Carp q(fatalsToBrowser);
use CGI::Lite; $cgi=new CGI::Lite; %val = $cgi->parse_form_data; my $seq=$val(’sequence'); my @database=$cgi->get_multiple_values ($val{’database'});
Page 29
VI, October 2006
#!/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 = "Sir";} else { $titre = "Madam";} print "<h2><p>Dear $titre,\n</h2>"; print "<p>Your name is <b>$nom</b> and your password is <b>$pass</b>\n"; print "<br><p>The code of your university is <b>$universite</b>\n"; print "<p>Your current interests are : <b>@interets</b>!\n"; print "<p><hr width='580'>"; print "</body>"; print "</html>"; exit 0;
Page 30
VI, October 2006
<STYLE type="text/css"> <!-- A:link {color: green} H1 { color: #FFFFFF; font-size: 14px; font-family: Arial; text-align: center; } // --> </STYLE>
<LINK rel="stylesheet" type="text/css" HREF="http://www.expasy.org/ style.css">
Page 31
VI, October 2006
Page 32
VI, October 2006
Page 33
VI, October 2006
Page 34
VI, October 2006
Page 35
VI, October 2006
Page 36
VI, October 2006
Page 37
VI, October 2006