html [mode de compatibilit ]) - lirmm.frcroitoru/teaching/html.pdf · dates 1992:1,000,000...

Présentation

� Partie I: Internet: un ensemble de systèmes d'information en ligne

Partie II: Sites web avec HTML / � Partie II: Sites web avec HTML / XHTML et CSS

1980

Internet à la fin des années 1980 était un ensemble de réseaux qui peuvent communiquer les uns avec les autres dans le cadre du protocole TCP / IP.

Son utilisation était encore largement limité à l'éducation, le Son utilisation était encore largement limité à l'éducation, le gouvernement et les organismes scientifiques.

Deux développements ont déterminé la croissance explosive de l’Internet dans 1990. Le premier a été l'augmentation rapide des PC (en privé et business). L'autre a été la conception et le développement du World Wide Web.

Curtis, G. Business Information Systems, Addison Wesley 1998

Dates

� 1992: 1,000,000 utilisateurs de Web connecté a l’Internet et WWW

� 1993: White House, UK Government, United Nations, World Bank en ligne

� 1993/94 Utilisation commerciale: transactions par carte de créditcarte de crédit

� 1995: Netscape, Internet Explorer – video, audio etc.

� 1995: 40-50,000,000 utilisateurs

Systèmes d'information en ligne …

� Internet: Système d'information en ligne

� Impact sur tous les aspects de notre vie:

Travail

Education Education

Shopping

Divertissement

Voyager

etc etc

Qu'est-ce que l'information?

� Information

� Les données traitées

� Les données qui sont organisées, significatives et utiles

� L'information dans l'ordinateur :

� Stockée

� Traitée

� Sous une forme qui « peuvent être » utile

Qu'est ce qu'un système d'information?

� Systèmes d'information

� Système informatique qui gère et fournit l'accès à

l'information

� Systèmes d'information grande échelle:� Systèmes d'information grande échelle:

� Systèmes bancaires

� Système de réservation hôtel

� Systèmes de gestion de l'information

� Systèmes informatiques dans une entreprise qui fournissent

des informations sur les activités

Les sites Web sont des systèmes d'information

� World-Wide Web [WWW]

� N'est pas l'Internet, seulement une partie � WWW est un service d'information hypermédia

� Toutes les ressources et les utilisateurs pour le protocole de transfert hypertexte [http]

Hypertexte: référencement � Hypertexte: référencement

� “The World Wide Web is the universe of network-accessible information, an embodiment of human knowledge”

Sir Tim Berners Lee.

Web Information Systems

Systèmes d'information ont toujours utilisé le modèle client-serveur.

Client: navigateur Web standard Réseau: Internet

(ou un intranet local) Serveurs: serveurs Web

inte

rnet

Web

� Omniprésent, accessible partout.

PCfrigo

PDA

DTV

Quelle technologie derrière?

� La clé du succès de l'Internet - les normes:

� Normes:

� TCP / IP (Transmission Control Protocol / Internet Protocol)

� DNS (Domain Name System) � DNS (Domain Name System)

� Key Web standards:

� HTTP (Hypertext Transfer Protocol)

� URL / URI (Uniform Resource Locator / Identifier)

� HTML (Hypertext Markup Language)

Protocoles

� TCP/IP: Transmission Control Protocol/Internet Protocol� Définissent les règles pour l'échange de données de

base sur l’Internet

� La plupart des autres protocoles s'appuient sur le protocole TCP / IP pour la transmission de leurs données protocole TCP / IP pour la transmission de leurs données

� Pour se connecter à l'Internet, un ordinateur a besoin d'un logiciel qui implémente les protocoles TCP / IP

internet

TCP/IP� TCP/IP- deux couches:TCP / IP est un programme de deux

couches:

� La couche supérieure: Transmission Control Protocol gère le

découpage d'un message ou un fichier en petits paquets qui

sont transmis sur Internet et reçues par une couche TCP qui

rassemble les paquets dans le message original rassemble les paquets dans le message original

� La couche inférieure: Internet Protocol gère la partie adresse de

chaque paquet (adresse IP). Chaque ordinateur sur le réseau

vérifie cette adresse pour transmettre le message.

Adresses IP

� Chaque machine sur l'Internet - une adresse unique appelée adresse IP

� Les adresses IP: nombres de 32 bits, normalement Les adresses IP: nombres de 32 bits, normalement exprimée sous forme de 4 octets dans un nombre décimal à points

216.27.61.137

Domain Name Service [DNS]

� DNS Domain Name Service: Chaque ordinateur sur Internet a un nom unique, utilisée pour référer à l'ordinateur:Www.amazon.co.uk, www.abdn.ac.uk

� Chaque ordinateur sur Internet possède également une adresse IP unique, utilisé par TCP / IP pour transmettre ces données DNS (DNS Software)

DNS & IP

http://www.iutmontp.univ-montp2.fr/ www.amazon.com

Host Name

internet

162.38.221.50 204.016.127.04

Internet Protocol [IP] Address

Standards I

� HTTP Hyper Text Transfer Protocol

� Utilisé pour la communication entre les clients Web et serveurs Web clients Web et serveurs Web

� Pour demander une page Web, un navigateur envoie un message HTTP GET

� Pour envoyer des données vers un serveur Web, un navigateur peut utiliser un message HTTP POST

Standards II

� URL=Uniform Resource Locator

� URI=Uniform Resource Identifier: � Une manière commune de se référer à n'importe quelle page

Web, n'importe oùWeb, n'importe où

� Format… Protocol://web_server_name/page_name

� Example…http://www.iutmontp.univ-montp2.fr/index.html

� URL / URI sont utilisés en conjonction avec HTTP pour obtenir soit une URL soit des données POST sur une URL

Tim Berners-Lee's Browser

http://inventors.about.com/od/computersoftware/a/html.htm

Le plus ancien HTML sur le web

� 13 Novembre 1990 "Last-Modified: Wed, 13 nov 1990 15:17:00 GMT". GMT".

� La page est encore fonctionnelle dans la plupart des navigateurs Web modernes, et contient même un HyperLink fonctionnel!

http://infomesh.net/html/history/early/

Le plus ancien HTML sur le web

HMTL

� Des balises pour le contenu d'une page

web.

Head / body:� Head / body:

<html>

<head>

</head>

<body>

</body>

</html>

Balises?

� Utilisées pour marquer le début et la fin d'un élément en

HTML

� Toutes les balises ont le même format:

� commencent par un signe inférieur "<"

� terminent par un signe supérieur ">".

� Deux types de tags

� balise d'ouverture: <html>

� balises de fermeture: </ html>.

� Différence entre une balise d'ouverture et une balise de

fermeture est la barre oblique "/".

Balises (tags) pour:

� Page Title

� Headings

� Paragraphs� Paragraphs

� Bold & italic text

� Lists

� Images

� Links

First (not very interesting) Page

<html>

<head>

</head></head>

<body>

</body>

</html>

Your First Page

Add a page title…

<html><head>

<title>This is a page title</title>

</head></head>

<body>

</body>

</html>

Now with a title…

Add a Heading…

<html><head>

<title>This is a page title</title>

</head></head>

<body>

<h1>A heading On My First Webpage</h1>

</body>

</html>

Here’s A Heading…

Some content…

<html>

<head>

<title>Example</title>

</head></head>

<body>


<p>Here is some text in a paragraph</p>

<p>Here is the next paragraph</p>

</body>

</html>

Some content…

Write paragraphs without <p></p>?

<html>

<head>


</head>

<body><body>


Here is some text in a paragraph

Here is the next paragraph

</body>

</html>

Write paragraphs without <p></p>?

Bold and italic text to paragraphs?

<html>

<head>


</head></head>

<body>


<p>Here is some <b>text in a paragraph</b></p>

<p>Here is the <i>next paragraph</i></p>

</body>

</html>

Bold and italic text to paragraphs?

Nested tags

<html>

<head>


</head></head>

<body>




</body>

</html>

Adding a list to your page

<html>

<head>


</head>

<body>

<h1>A heading On My First Webpage</h1><h1>A heading On My First Webpage</h1>



<ul>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ul>

</body>

</html>

Adding a list to your page

What about an ordered list?

<html>

<head>


</head>

<body>




<ol>

<li>First item</li>


<li>Third item</li>

</ol>

</body>

</html>

What about an ordered list?

HTML can be more than just text<html>

<head>


</head>

<body>


<p>Here is some <b>text in a paragraph</b></p><p>Here is some <b>text in a paragraph</b></p>


<ol>

<li>First item</li>


<li>Third item</li>

</ol>

<img src="snowhead.jpg"/>

</body>

</html>

HTML: more than just text

Links to other pages

How to specify a link:How to specify a link:

<a href=“LINK_LOCATION">LINK TEXT</a>


<html>

<head>


</head>

<body>




<ol>

<li>First item</li>


<li>Third item</li>

</ol>


<a href="http://fr.wikipedia.org/wiki/CSD">CSD Homepage</a>

</body>

</html>

Adding in a line break<html>

<head>


</head>

<body>




<ol>

<li>First item</li>


<li>Third item</li>

</ol>


<br/>

<a href="http://fr.wikipedia.org/wiki/CSD">CSD Homepage</a>

</body>

</html>

Some more text effects

<html>

<head>


</head>

<body>



<p>Here is the <i>next paragraph</i></p><p>Here is the <i>next paragraph</i></p>


<br/>

<a href=" http://fr.wikipedia.org/wiki/CSD ">CSD Homepage</a>

<br/>

<u>some underlined text</u>

<br/>

<tt>Typewriter type text</tt>

<br>

<small>some small text</small>

</body>

</html>

Some more text effects

Space between pieces of text?

<html>

<head>


</head>

<body>





<br/>

<a href=" http://fr.wikipedia.org/wiki/CSD ">CSD Homepage</a>

<br/>


<br/>


<p>I want a space between here and here</p>

</body>

</html>

Space between pieces of text?

Use Non-Breaking space

<html>

<head>


</head>

<body>





<br/>

<a href="http://www.csd.abdn.ac.uk">CSD Homepage</a>

<br/>


<br/>


<p>I want a space between here and here</p>

</body>

</html>

Use Non-Breaking space

Taking control of your text

<div align="left">aligned to left</div>

<div align="center">aligned to centre</div>

<div align="right">aligned to right</div>

Note the American spelling of center is used.� Note the American spelling of center is used.

� Note that <div align="center">…</div> is now used in favour of the old [and deprecated]

Taking control of your text

Manipulating images on page

� The <img/> tag is used to display an image. There are several attributes that the user can define.

� src source image [URI or the filename]

� alt alternative text � alt alternative text

� height in pixels

� width in pixels

� align to the left, right, top, middle or bottom.

� Specifying the height and width attributes enables faster downloads

HTML below

Not very well written!

<html><head>

<TITLE>This bit goes in the titlebar</title>

<h1>This is the heading of the page

<i>

No closing </head> tag

CAPITALS

<i>

<p>This is a paragraph

</i></P>

</p>This is another paragraph

</BODY>

</html>

Tags not nested

properly

No opening </body> tag

W3C

� W3C:

� Industry consortium to promote standards for the web

� XHTML 1.0:

� Introduced in January 2000

� XHTML – based on XML, not SGML

� Same strict syntax as XML

Previous HTML example…

<html>

<head>

<TITLE>This bit goes in the titlebar</title>

<h1>This is the heading of the page

<i><i>

<p>This is a paragraph

</i></P>

</p>This is another paragraph

</BODY>

</html>

…redone as XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"

lang="en">

<head>

<title>This bit goes in the titlebar</title><title>This bit goes in the titlebar</title>

</head>

<body>

<h1>This is the heading of the page</h1>

<p><i>This is a paragraph

</i></p>

<p>This is another paragraph</p>

</body>

</html>

So what it means is…

� Your well-defined XHTML document� Can be read correctly by a multitude of

browsers

� PC based, palm, mobile phone etc.� PC based, palm, mobile phone etc.

� Be read and interpreted by users with disabilities etc.

� You’ve written some nicely formed documents!

In the content itself

� In the actual HTML code itself:� XHTML elements must be properly

nested

� XHTML elements must always be closed� XHTML elements must always be closed

� XHTML elements must be in lowercase

� XHTML documents must have one root element

� Attribute Names Must Be In Lower Case

� Attribute Values Must Be Quoted

How do I know if is good XHTML?

� http://validator.w3.org/

� Check your XHTML

for errors

html [mode de compatibilit ]) - lirmm.frcroitoru/teaching/html.pdf · dates 1992:1,000,000...

Documents