html [mode de compatibilit ]) - lirmm.frcroitoru/teaching/html.pdf · dates 1992:1,000,000...
Post on 26-Mar-2018
221 Views
Preview:
TRANSCRIPT
<HTML>
</HTML>
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>
<h1>A heading On My First Webpage</h1>
<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>
<title>Example</title>
</head>
<body><body>
<h1>A heading On My First Webpage</h1>
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>
<title>Example</title>
</head></head>
<body>
<h1>A heading On My First Webpage</h1>
<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>
<title>Example</title>
</head></head>
<body>
<h1>A heading On My First Webpage</h1>
<p>Here is some <b>text in a paragraph</b></p>
<p>Here is the <i>next paragraph</i></p>
</body>
</html>
Adding a list to your page
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>A heading On My First Webpage</h1><h1>A heading On My First Webpage</h1>
<p>Here is some <b>text in a paragraph</b></p>
<p>Here is the <i>next paragraph</i></p>
<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>
<title>Example</title>
</head>
<body>
<h1>A heading On My First Webpage</h1><h1>A heading On My First Webpage</h1>
<p>Here is some <b>text in a paragraph</b></p>
<p>Here is the <i>next paragraph</i></p>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
</html>
What about an ordered list?
HTML can be more than just text<html>
<head>
<title>Example</title>
</head>
<body>
<h1>A heading On My First Webpage</h1>
<p>Here is some <b>text in a paragraph</b></p><p>Here is some <b>text in a paragraph</b></p>
<p>Here is the <i>next paragraph</i></p>
<ol>
<li>First item</li>
<li>Second 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>
Links to other pages
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>A heading On My First Webpage</h1><h1>A heading On My First Webpage</h1>
<p>Here is some <b>text in a paragraph</b></p>
<p>Here is the <i>next paragraph</i></p>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<img src="snowhead.jpg"/>
<a href="http://fr.wikipedia.org/wiki/CSD">CSD Homepage</a>
</body>
</html>
Links to other pages
Adding in a line break<html>
<head>
<title>Example</title>
</head>
<body>
<h1>A heading On My First Webpage</h1>
<p>Here is some <b>text in a paragraph</b></p><p>Here is some <b>text in a paragraph</b></p>
<p>Here is the <i>next paragraph</i></p>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<img src="snowhead.jpg"/>
<br/>
<a href="http://fr.wikipedia.org/wiki/CSD">CSD Homepage</a>
</body>
</html>
Links to other pages
Some more text effects
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>A heading On My First Webpage</h1>
<p>Here is some <b>text in a paragraph</b></p>
<p>Here is the <i>next paragraph</i></p><p>Here is the <i>next paragraph</i></p>
<img src="snowhead.jpg"/>
<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>
<title>Example</title>
</head>
<body>
<h1>A heading On My First Webpage</h1>
<p>Here is some <b>text in a paragraph</b></p><p>Here is some <b>text in a paragraph</b></p>
<p>Here is the <i>next paragraph</i></p>
<img src="snowhead.jpg"/>
<br/>
<a href=" http://fr.wikipedia.org/wiki/CSD ">CSD Homepage</a>
<br/>
<u>some underlined text</u>
<br/>
<tt>Typewriter type text</tt>
<p>I want a space between here and here</p>
</body>
</html>
Space between pieces of text?
Use Non-Breaking space
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>A heading On My First Webpage</h1>
<p>Here is some <b>text in a paragraph</b></p><p>Here is some <b>text in a paragraph</b></p>
<p>Here is the <i>next paragraph</i></p>
<img src="snowhead.jpg"/>
<br/>
<a href="http://www.csd.abdn.ac.uk">CSD Homepage</a>
<br/>
<u>some underlined text</u>
<br/>
<tt>Typewriter type text</tt>
<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
top related