Introduction to HTML Outline - Vital-IT · 2013-06-28 · VI, October 2006 Page 7 HTML - Browsers...
Transcript of Introduction to HTML Outline - Vital-IT · 2013-06-28 · VI, October 2006 Page 7 HTML - Browsers...
Page 1VI, October 2006
Introduction to HTML
(adapted from Laurent Falquet)
Page 2VI, October 2006
Outline
Definitions
• HTTP, MIME, URL...
History
Browsers
• Mosaic, Netscape, Lynx, Internet
Explorer, other
Client <-> Server
Apache server
Tags, structure
• Text formatting
• Tables
• Images
• Links
• Forms, example
HTML forms & CGI
CSS
JavaScript vs Java
Dynamic vs Static
Future: XHTML?
Page 3VI, October 2006
HTML - Definitions
HTTP
• HyperText Transfer Protocol
MIME
• Multipurpose Internet Mail
Extension
URL (URI)
• Uniform Resource Locator
FTP
• File Transfer Protocol
HTML
• HyperText Markup Language
CSS
• Cascading Style Sheet
XML
• eXtended Markup Language
Page 4VI, October 2006
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
Page 5VI, October 2006
Primary DNS
HTML - Little network reminder
Root DNS
Local DNS
Client query Target server
1
23
45
6
www.expasy.org
129.194.8.64
*.org
dns.anywhere.net
client.anywhere.net
www.expasy.org ??
IPv4
• Internet Protocol ver. 4
• 192.42.197.31
• IPv6 (Internet2)
Tools
• nslookup
• traceroute
• ifconfig
DNS
•domain name server
•Convert a URL to an IP and vice-versa
Page 6VI, October 2006
HTML - Client <-> Server
Page 7VI, October 2006
HTML - Browsers (client)
Mosaic
• First graphic browser by NCSA
Netscape
• Son of Mosaic also called
Communicator or Mozilla
Lynx
• Text only browser
Internet Explorer
• From Microsoft
Others
• Firefox, Opera, iCab, OmniWeb,
Chimera, Galeon, Safari,
Webstar…
WAP
• Wireless Application Protocol
Page 8VI, October 2006
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
Page 11VI, October 2006
HTML - Tags, structure
Example: <tagname> xxxxx </tagname>
The <B>bold</B> word ---> The bold word
Attributes:<IMG src="../images/logo.gif" height=’320’ width=‘576’>
<HTML>
<HEAD>
<TITLE>title of the page </TITLE>
</HEAD>
<BODY>
<FRAMESET> <FRAME> </FRAMESET>
</BODY>
</HTML>
<HTML>
<BODY>
</BODY>
</HTML>
minimal tags:
Page 12VI, October 2006
HTML - Frames
Ability to conserve some parts of the page (e.g., headers, menus, etc…)
Page 13VI, October 2006
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 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.
AVOI
D FR
AMES
!
Potential problems
•some browsers
•keeping bookmarks
•Printing
Page 14VI, October 2006
HTML - Text formatting
Format
• <Hn> header (n = 1 to 6)
• <P> paragraph
• <CENTER> center
• <BR> line break
• <HR> horizontal rule
Style
• <B> bold </B>
• <I> italic </I>
• <PRE> fixed width text </PRE>
deprecation
• <U>, <S>, <FONT>, …
• Use CSS !
Lists <LI>
• <UL> unordered list
• <OL> ordered list
• <DL> definition list
</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
• first line
• second line
• last line
Page 15VI, October 2006
HTML - Table formatting
<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 | | |\--------------------------------------------------/
CAPTION - Table caption TR - Table row TH - Header cell TD - Table cell
Page 16VI, October 2006
HTML - Table formatting
<TABLE>
• <CAPTION>…</CAPTION>
• <TR>
• <TH>…</TH>
• </TR>
• <TR>
• <TD>…</TD>
• </TR>
</TABLE>
Attributes:
• align, width, cellpading,cellspacing, border
• colspan, rawspan, nowrap
• …
Tables within tables?
(http://www.isb-sib.ch)
Page 17VI, October 2006
HTML - Tables example
Page 18VI, October 2006
HTML - Tables example
56 tables !!!
Page 19VI, October 2006
HTML - Tables example
3 tables …
Page 20VI, October 2006
HTML - Images
Images types:
• GIF87, GIF89, Animated
(Graphics Interchange Format)
• JPEG (Joint Photographic
Experts Group)
• PNG (Portable Network Graphic)
<IMG src="../images/logo.gif"height=‘320’ width=‘576’>
GIF
• 256 indexed colors, interlacing,transparency, animated, (logos, flatcolors)
JPEG
• 24 bits, 16.8 mio colors, nointerlacing or transparency, static,(photographic images)
PNG
• 48 bits colors, interlacing,transparency, static, smaller files
Image Maps
• See links
Page 21VI, October 2006
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>
• 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>
Page 22VI, October 2006
HTML - Links: Image Maps
Page 23VI, October 2006
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 programwithout 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
• Radio
• Checkbox
• Submit, Reset
• File, Button, Image
Other tags
•TEXTAREA
•SELECT, OPTION
Page 24VI, October 2006
HTML - Forms Example
Page 25VI, October 2006
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>
Page 26VI, October 2006
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>
Page 27VI, October 2006
HTML - Client <-> Server <-> CGI
Page 28VI, October 2006
HTML - Modules for cgi-bin
CGI.pmuse CGI;
$cgi=new CGI;
my $seq=$cgi->param(’sequence');
my @database=$cgi->param('database');
Carp.pmuse CGI::Carp q(fatalsToBrowser);
CGI::Lite.pmuse CGI::Lite;
$cgi=new CGI::Lite;
%val = $cgi->parse_form_data;
my $seq=$val(’sequence');
my @database=$cgi->get_multiple_values($val{’database'});
Page 29VI, October 2006
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 = !!"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 30VI, October 2006
HTML - Cascading Style Sheet
Clean way to define text elements
<STYLE type="text/css">
<!--
A:link {color: green}
H1 { color: #FFFFFF;
font-size: 14px;
font-family: Arial;
text-align: center;
}
// -->
</STYLE>
Use external style sheet file
<LINK rel="stylesheet" type="text/css" HREF="http://www.expasy.org/ style.css">
Page 31VI, October 2006
HTML - JavaScript vs Java
JavaScript
• scripting language defined by
Netscape
• now standardized by the W3
consortium
• code resides in the web page and
allows specific tasks. See
<SCRIPT> tag
• E.g., verifying form input,
rollover button, animation
(DHTML), etc...
Java
• high level object language
created by Sun Microsys.
• applet: (usually) small compiled
java software running in a web
page
• See <APPLET> tag
• Useful for creating
« interactive » web pages
• E.g., Dotlet, Jalview, Seview,
etc...
Page 32VI, October 2006
HTML - Dynamic vs Static web pages
Dynamic
• Pages fully generated by a script
or an executable
• Automatic update of information
• Partial indexing by robots
• Edition by programmers
• Interaction with databases
PHP, Perl, C, Java, ASP…
Static
• Pages stored on the server
• Manual update
• Indexed by robots
• Easy to design and edit
• No possible interaction with
databases
HTML
Page 33VI, October 2006
HTML - The solution: Semi-dynamic !
Semi-dynamic
• Pages partly generated by a script
• Automatic update of information
• Partial indexing by robots
• Easy to design and edit
• Interaction with databases
HTML + PHP, Perl, AJAX,ASP, JSP, XML
Many PHP+MySQL sites
Page 34VI, October 2006
HTML - Future: XHTML?
HTML not satisfactory
DHTML = HTML+CSS+JavaScript
XML standard for data definition
Lack of a standard for data representation
XHTML=XML+HTML
Other new standards?
• UDDI, WDSL, SOAP, RPC
Page 35VI, October 2006
HTML - Useful Books and remarks
How to generate or modify HTML code?
Windows & Mac- Adobe Golive (WISIWIG)
- Macromedia DreamWeaver (WISIWIG)
- Netscape Communicator (composer)
- other text editors (e.g., MS Word, BBedit, etc...)
- MS FrontPage (Windows only)
One can work on a local computer, then use FTP (or cut&paste) to transfer the files to theserver.
Or using a remote editor (on the server) like emacs or Netscape, one can save the files directlyinto the final folder. If X-windows doesn ’t work, use pico or vi…
From O ’Reilly:- HTML&XHTML the definitive guide 4th edition
- Programming PERL 3rd edition (+advanced PERL programming)
- Web client programming with PERL
- Programming web graphics with PERL and GNU software
Unix- Netscape Communicator (composer) (X-windows)
- emacs (X-windows)
- pico (terminal)
- vi (terminal)
Page 36VI, October 2006
HTML - Exercises
Login: ssh -l studentXX bc2-emboss01.bc2.unibas.ch
In your home directory
• there is a subdir called « www »
• containing another subdir called « cgi»
Place your html pages here: www/
Place your Perl scripts here: www/cgi/
Browse your pages at: http://www.bc2.unibas.ch/~studentXX/file.html
Call the scripts from HTML with: cgi/myscript.pl