[PPT] - Introduction to HTML (adapted from Laurent Falquet) 2005 VI, March PowerPoint Presentation

SLIDE 1

Page 1

VI, March 2005

Introduction to HTML

(adapted from Laurent Falquet)

2005

SLIDE 2

Page 2

VI, March 2005

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

CSS JavaScript vs Java Dynamic vs Static Future: XHTML?

SLIDE 3

Page 3

VI, March 2005

HTML - Definitions

HTTP

HyperText Transfer Protocol

MIME

Multipurpose Internet Mail

Extension

URL (URI)

Uniform Resource Locator

HTML

HyperText Markup Language

CSS

Cascading Style Sheet

XML

eXtended Markup Language

SLIDE 4

Page 4

VI, March 2005

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 ??

SLIDE 5

Page 5

VI, March 2005

Primary DNS

HTML - Little network reminder I

Root DNS Local DNS Client query Target server 1 2 3 4 5 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

SLIDE 6

Page 6

VI, March 2005

HTML - Client <-> Server

SLIDE 7

Page 7

VI, March 2005

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

SLIDE 8

Page 8

VI, March 2005

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

SLIDE 9

Page 9

VI, March 2005

HTML - Tags, structure

Example: <tagname> xxxxx </tagname>

The <B>bold</B> word

--> The bold word

Attributes:

<HTML>

<HEAD>

<TITLE>titre de la page </TITLE>

</HEAD> <BODY>

</BODY>

</HTML> <HTML>

<BODY> </BODY>

</HTML>

minimal tags:

SLIDE 10

Page 10

VI, March 2005

HTML - Frames

Ability to conserve some parts of the page (e.g., headers, menus, etc…) Potential problems

some browsers
keeping bookmarks
Printing

SLIDE 11

Page 11

VI, March 2005

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.

AVOID FRAMES !

SLIDE 12

Page 12

VI, March 2005

HTML - Text formatting

Format

<Hn> header (n = 1 to 6)
<P> paragraph
<CENTER> center
<BR> line break
<HR> horizontal rule

Lists <LI>

<UL> unordered list
<OL> ordered list
<DL> definition list

<UL> UL> <LI>first <LI>first line</LI> line</LI> <LI>second <LI>second line</LI> line</LI> <LI>last <LI>last line</LI> line</LI> </UL> </UL>

Style

<B> bold
<I> italic
<PRE> fixed width text

deprecation

<U>, <S>, <FONT>, …
Use CSS !

SLIDE 13

Page 13

VI, March 2005

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

SLIDE 14

Page 14

VI, March 2005

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)

SLIDE 15

Page 15

VI, March 2005

HTML - Tables example

SLIDE 16

Page 16

VI, March 2005

HTML - Images

Images types:

GIF87, GIF89, Animated

(Graphics Interchange Format)

JPEG (Joint Photographic

Experts Group)

PNG (Portable Network Graphic)

GIF

256 indexed colors, interlacing,

transparency, animated, (logos, flat colors)

JPEG

24 bits, 16.8 mio colors, no

interlacing or transparency, static, (photographic images)

PNG

48 bits colors, interlacing,

transparency, static, smaller files

Image Maps

See links

SLIDE 17

Page 17

VI, March 2005

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:jean@isb.ch"> click here</A>

Image maps

Allows clickable regions in an image

SLIDE 18

Page 18

VI, March 2005

HTML - Forms

Forms allow user to enter data and transmit them to the server

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&&swiss-prot@expasy.org )

INPUT tag options:

Text, Password, Hidden
Radio
Checkbox
Submit, Reset
File, Button, Image

Other tags

TEXTAREA
SELECT, OPTION

SLIDE 19

Page 19

VI, March 2005

HTML - Forms Example

SLIDE 20

Page 20

VI, March 2005

HTML - Forms Example source part 1

<html html> <head head> <meta meta http-equiv="content-type" http-equiv="content-type" content="text/html;charset=iso-8859-1"> content="text/html;charset=iso-8859-1"> <meta meta name="generator" name="generator" content="Adobe content="Adobe GoLive GoLive 4"> 4"> <title title>DEA: >DEA: Example Example of

f a

a form< form</title /title> </head /head> <body body bgcolor="#afeeee"> bgcolor="#afeeee"> <center center> <form form name="FormName" name="FormName" action="/cgi-bin/dea-test.pl" action="/cgi-bin/dea-test.pl" method="post"> method="post"> <h1 h1>Example >Example of

f a

a form form :< :</h1 /h1> <hr hr width="580"> width="580"> <p>< ><b>Your >Your name:< name:</b /b> > <input input type="text" type="text" name="nom" name="nom" size="24"> size="24"> <b>Your >Your password:< password:</b /b> > <input input type="password" type="password" name="motdepasse"size="24"> name="motdepasse"size="24"> </p /p> <p>< ><b>Your >Your sex:< sex:</b /b> male< male<input input type="radio" type="radio" value="homme" value="homme" name="sexe"> name="sexe"> female< female<input input type="radio" type="radio" value="femme" value="femme" name="sexe"> name="sexe"> <b>Your >Your university:< university:</b /b> <select select name="universite" name="universite" size="1"> size="1"> <option

ption value="empty"

value="empty" selected>select selected>select please please <option

ption value="unibas">Basel

value="unibas">Basel <option

ption value="unige">Geneva

value="unige">Geneva <option

ption value="unil">Lausanne

value="unil">Lausanne </select /select> </p /p>

SLIDE 21

Page 21

VI, March 2005

HTML - Form Example source part 2

<p>< ><b>Your >Your interests:< interests:</b /b> <input input type="checkbox" type="checkbox" value="biochimie" value="biochimie" name="interets">biochemistry name="interets">biochemistry <input input type="checkbox" type="checkbox" value="scrabble" value="scrabble" name="interets">scrabble name="interets">scrabble <input input type="checkbox" type="checkbox" value="bouffe" value="bouffe" name="interets">food name="interets">food <input input type="checkbox" type="checkbox" value="voiture" value="voiture" name="interets">cars name="interets">cars <input input type="checkbox" type="checkbox" value="autre" value="autre" name="interets">other name="interets">other </p /p> <p> <input input type="submit" type="submit" name="submitButtonName" name="submitButtonName" value="send value="send data data to to cgi- cgi-bin"> bin"> <input input type="reset"> type="reset"> </p /p> </form /form> <p> <hr hr width="580"> width="580"> </center /center> </body /body> </html /html>

SLIDE 22

Page 22

VI, March 2005

HTML - Client <-> Server <-> CGI

SLIDE 23

Page 23

VI, March 2005

HTML - Modules for cgi-bin

CGI.pm

use CGI; $cgi=new CGI; my $seq=$cgi->param(’sequence'); my @database=$cgi->param('database');

Carp.pm

use CGI::Carp q(fatalsToBrowser);

CGI::Lite.pm

use CGI::Lite; $cgi=new CGI::Lite; %val = $cgi->parse_form_data; my $seq=$val(’sequence'); my @database=$cgi->get_multiple_values ($val{’database'});

SLIDE 24

Page 24

VI, March 2005

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 "<p>Votre nom est <b>$nom</b> et votre mot de passe est <b>$pass</b>\n"; print "<br><p>Vous êtes de l'université dont le code est <b>$universite</b>\n"; print "<p>Vos intérêts sont: <b>@interets</b>!\n"; print "<p><hr width='580'>"; print "</body>"; print "</html>"; exit 0;

SLIDE 25

Page 25

VI, March 2005

HTML - Cascading Style Sheet

Clean way to define text elements

Use external style sheet file

SLIDE 26

Page 26

VI, March 2005

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...

SLIDE 27

Page 27

VI, March 2005

HTML - Dynamic vs Static web pages

Dynamic

Pages fully generated by a script
r 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

SLIDE 28

Page 28

VI, March 2005

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, ASP, JSP, XML Many PHP+MySQL sites

SLIDE 29

Page 29

VI, March 2005

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

SLIDE 30

Page 30

VI, March 2005

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 the server. Or using a remote editor (on the server) like emacs or Netscape, one can save the files directly into 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)

SLIDE 31

Page 31

VI, March 2005

HTML - Exercises

Login to sib-dea.unil.ch In your home directory

there is a subdir called « public_html »
and another subdir called « cgi-bin »

In both subdirs , there is a temporary dir called « wwwtmp » Place your html pages here: /home/username/public_html Place your Perl scripts here: /home/username/cgi-bin Browse your pages at: http://sib-dea.unil.ch/~username/mypage.html Call the scripts from HTML with: /username-cgi-bin/myscript.pl View the temp files with: http://sib-dea.unil.ch/~username/wwwtmp/tempfile.gif

SLIDE 32

Page 32

VI, March 2005