Introduction to HTML Outline - Vital-IT · 2013-06-28 · VI, October 2006 Page 7 HTML - Browsers (client) Mosaic ¥First graphic browser by NCSA Netscape ¥Son of Mosaic also called

Page 1VI, October 2006

Introduction to HTML

(adapted from Laurent Falquet)


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?


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


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


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


HTML - Client <-> Server


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


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


HTML - Tags, structure



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:


HTML - Frames

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


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


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


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


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)


HTML - Tables example



56 tables !!!



3 tables …


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


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>


HTML - Links: Image Maps


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


HTML - Forms Example


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>


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>


HTML - Client <-> Server <-> CGI


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'});


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;


HTML - Cascading Style Sheet

Clean way to define text elements

<STYLE type="text/css">



</STYLE>

Use external style sheet file

<LINK rel="stylesheet" type="text/css" HREF="http://www.expasy.org/ style.css">


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


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


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


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


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)


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


……

Documents

Introduction to HTML Outline - Vital-IT · 2013-06-28 · VI, October 2006 Page 7 HTML - Browsers (client) Mosaic ¥First graphic browser by NCSA Netscape ¥Son of Mosaic also called