Chapitre I : Historique de Internet et services
I.1 Introduction
**Internet** est un système d'interconnexion de machines qui constitue un réseau informatique mondial, utilisant un ensemble standardisé de protocoles de transfert de données. C'est un réseau de réseaux, composé de millions de réseaux aussi bien publics que privés, universitaires, commerciaux et gouvernementaux. Internet transporte un large spectre d'information et permet l'élaboration d'applications et de services variés comme le courrier électronique, la messagerie instantanée et le World Wide Web.
Internet ayant été popularisé par l'apparition du World Wide Web, les deux sont parfois confondus par le public non averti. Le World Wide Web n'est pourtant que l'une des applications d'Internet.
I.2 Définitions
**Réseau :** Ensemble des ordinateurs et périphériques connectés les uns aux autres. Notons que deux ordinateurs connectés ensemble constituent à eux seuls un réseau minimal.
**Protocole :** méthode standard qui permet la communication entre des processus (s'exécutant éventuellement sur différentes machines), c'est-à-dire un ensemble de règles et de procédures à respecter pour émettre et recevoir des données sur un réseau.
**TCP/IP :** **Transmission Control Protocol/Internet Protocol**» : ensemble des règles de communication sur internet se basant sur la notion adressage IP, c'est-à-dire le fait de fournir une adresse IP à chaque machine du réseau afin de pouvoir acheminer des paquets de données.
**Adresse IP :** Sur Internet, les ordinateurs communiquent entre eux grâce au protocole IP (*Internet Protocol*), qui utilise des adresses numériques, appelées **adresses IP**, composées de 4 nombres entiers (4 octets) entre 0 et 255 et notées sous la forme xxx.xxx.xxx.xxx. Par exemple, *194.153.205.26* est une adresse IP donnée sous une forme technique.
* Ces adresses servent aux ordinateurs du réseau pour communiquer entre-eux, ainsi chaque ordinateur d'un réseau possède une adresse IP unique sur ce réseau. * C'est l'**ICANN** (*Internet Corporation for Assigned Names and Numbers*, remplaçant l'IANA, *Internet Assigned Numbers Agency*, depuis 1998) qui est chargée d'attribuer des adresses IP publiques, c'est-à-dire les adresses IP des ordinateurs directement connectés sur le réseau public internet.
**Nom de domaine :** Chaque ordinateur directement connecté à internet possède au moins une adresse IP propre. Cependant, les utilisateurs ne veulent pas travailler avec des adresses numériques du genre *194.153.205.26* mais avec un nom de domaine ou des adresses plus explicites (appelées adresses FQDN) du type [www.commentcamarche.net].
**Web :** On appelle «**Web**» (nom anglais signifiant «**toile**»), contraction de «*World Wide Web*» (d'où l'acronyme *www*), une des possibilités offertes par le réseau Internet de naviguer entre des documents reliés par des liens hypertextes.
**Navigateur :** c’est l’outil de l'internaute, lui permettant de surfer entre les pages web de ses sites préférés. Il s'agit d'un logiciel possédant une interface graphique composée de boutons de navigation, d'une barre d'adresse, d'une barre d'état (généralement en bas de fenêtre) et dont la majeure partie de la surface sert à afficher les pages web.
Exemple : internet Explorer, Mozilla Firefox, Google Chrome…
**Site Web :** Un site web (aussi appelé site internet) est un ensemble de fichiers HTML stockés sur un ordinateur connecté en permanence à internet et hébergeant les pages web (serveur web).
Un site web est habituellement architecturé autour d'une page centrale, appelée «**page d'accueil**» et proposant des liens vers un ensemble d'autres pages hébergées sur le même serveur, et parfois des liens dits «externes», c'est-à-dire de pages hébergées par un autre serveur.
**Site Web statique :** site web dont le contenu de ses pages web ne varie pas en fonction de la demande des internautes.
**Site Web dynamique :** site web contenant des pages web générées à la demande et leur contenu varie en fonction des caractéristiques de la demande (heure, adresse IP de l'ordinateur du demandeur, formulaire rempli par le demandeur, etc.) qui ne sont connues qu'au moment de sa consultation.
**URL**(Uniform Resource Locator) : permet d’identifier de manière unique une ressource sur le Web. Elle précise le protocole d’accès, le nom du serveur qui héberge cette ressource et sa localisation sur le serveur. Exemple : <http://fr.wikipedia.org/wiki/Uniform_Resource_Locator> est l’URL de la page web du site wikipedia décrivant l’URL.
I.3 Historique d’Internet
**1962 :** Joseph Liklider publie ses travaux sur les interactions sociales qui seraient possibles avec un réseau d’ordinateurs
**1969 :** naissance de l’ARPANET : un réseau décentralisé reliant quatre grands centres universitaires américains par des câbles 50Kbps, et utilisant le NCP ("Network Control Protocol")
**1972 :** Ray Tomlison crée le courrier électronique
**1973 :** Vinton Cerf spécifie le réseau TCP/IP
**Fin des années 80 :** ARPAnet
**Début 1990 :** Internet tel que nous le connaissons
I.4 Services d’Internet
I.4.1 World Wide Web
Le concept du Web a été mis au point au CERN (Centre Européen de Recherche Nucléaire) en 1991 par une équipe de chercheurs à laquelle appartenaient Tim-Berners LEE, le créateur du concept d'hyperlien, considéré aujourd'hui comme le père fondateur du Web.
Le principe de web repose sur l'utilisation d'hyperliens pour naviguer entre des documents (appelés «**pages web**») grâce à un logiciel appelé navigateur. Une page web est ainsi un simple fichier texte écrit dans un langage de description appelé HTML (Hypertext Markup Language), permettant de décrire la mise en page du document et d'inclure des éléments graphiques ou bien des liens vers d'autres documents à l'aide de balises.
I.4.2 Courrier électronique
Le **courrier électronique**, **courriel**, **e-mail**, **mail** (parfois mél), est un service de transmission de messages écrits et de documents envoyés électroniquement via un réseau informatique (principalement Internet) dans la boîte aux lettres électronique d’un destinataire choisi par l’émetteur.
Pour émettre et recevoir des messages par courrier électronique, il faut disposer d’une adresse électronique et d'un client de messagerie ou d’un [webmail](http://fr.wikipedia.org/wiki/Webmail) permettant l'accès aux messages via un navigateur Web.
I.4.3 Internet Relay Chat (IRC)
IRC st un protocole de communication textuelle sur Internet. Il sert à la communication instantanée principalement sous la forme de discussions en groupe par l’intermédiaire de canaux de discussion, mais peut aussi être utilisé pour de la communication de un à un. Il peut par ailleurs être utilisé pour faire du transfert de fichier.
I.4.4 Messagerie instantanée
Contrairement au IRC, la messagerie Instantanée vous permet de contacter seulement les personnes qui vous intéressent. Aussi, pas besoin de se connecter à l'un des serveurs IRC et d'entrer dans une chambre pour savoir qui est là. En ouvrant le logiciel, vous savez instantanément si une personne de votre liste de contact est disponible ou pas ou commencer une conversation.
[ICQ](http://www.icq.com/), Yahoo Messenger, AOL Instant Messenger (AIM), Microsoft Messenger sont parmi les logiciels les plus utilisés de ce service.
I.4.5 Téléphonie sur l’Internet
Ce service vous permet d'avoir des conversations par la voix sur l'Internet. C'est l'équivalent d'interurbains sans payer de frais. Vous payer seulement les coûts d'abonnement du service d'accès à l'Internet. Ce service ne fait que s'améliorer en qualité.
I.4.6 Vidéo Conférence sur l'Internet
La vidéo conférence est la communication entre les usagers en utilisant de la vidéo et le son. Avec une petite caméra vidéo et un programme spécialisé, vous pouvez vous connecter à un serveur qui s'occupe de la communication entre deux ou plusieurs personnes. Le logiciel plus connu est appelé Skype.
I.5 Protocoles d’Internet
Chaque protocole a des fonctions propres et, ensemble, ils fournissent un éventail de moyens permettant de répondre à la multiplicité et à la diversité des besoins sur Internet.
**HTTP** (*HyperText Transfer Protocol*) : protocole mis en œuvre pour le chargement des [pages web](http://fr.wikipedia.org/wiki/Page_Web).
[**HTTPS**](http://fr.wikipedia.org/wiki/HTTPS) : version sécurisée du HTTP pour la navigation en mode sécurisé.
[**FTP**](http://fr.wikipedia.org/wiki/File_Transfer_Protocol)(*File Transfer Protocol*) : protocole utilisé pour le transfert de fichiers sur Internet.
[**SMTP**](http://fr.wikipedia.org/wiki/Simple_Mail_Transfer_Protocol) (*Simple Mail Transfer Protocol*) : mode d'échange du [courrier électronique](http://fr.wikipedia.org/wiki/Courrier_%C3%A9lectronique) en envoi.
[**POP3**](http://fr.wikipedia.org/wiki/Post_Office_Protocol) (*Post Office Protocol* version 3) : mode d'échange du courrier électronique en réception.
[I**MAP**](http://fr.wikipedia.org/wiki/Internet_Message_Access_Protocol) (*Internet Message Access Protocol*) : un autre mode d'échange de courrier électronique.
**IRC** (*Internet Relay Chat*) : protocole de discussion instantanée.
[**SSL**](http://fr.wikipedia.org/wiki/Transport_Layer_Security) ou [***TLS***](http://fr.wikipedia.org/wiki/Transport_Layer_Security): protocoles de transaction sécurisée, utilisés notamment pour le paiement sécurisé.
Chapitre II : Le langage HTML
II.1 Définition
Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents.
Le langage HTML permet notamment la lecture de documents sur [Internet](http://www.commentcamarche.net/contents/522-internet) à partir de machines différentes, grâce au [protocole HTTP](http://www.commentcamarche.net/contents/520-le-protocole-http).
Publicité
Le langage HTML est un standard publié par W3C (World Wide Web Consortium).
II.2 Historique de HTML
1991 : naissance du Web et du langage HTML
1993 : première version de HTML : HTML 1.0, navigateur NCSA Mosaîc
1995 : première version officielle de HTML HTML2.0 rfc 1866
Janvier 1997 :HTML 3.2, apports : standardisation des tableaux et un grand nombre d’éléments de présentation
Décembre 1997 : HTML4.0 standardise les feuilles de style et les cadres.
2012 : HTML 5 : nouvelles possibilités dans la création d’applications web avec l’intégration d’éléments mutimédia.
II.3 Structure d’un document HTML
La structure générale d’un document HTML doit être selon cette allure :
* Le document doit être entouré de marqueurs (Angl. “tags”) <html> ....</html> * L’en-tête (“head”) est utilisé pour stocker de l’information à propos du document. Dans la plupart des cas, il s’agit uniquement du titre. * Le titre (“title”) du document est utilisé à deux fins: + Dans la plupart des “browsers”, le titre est affiché dans la barre supérieure de la fenêtre. + Le titre est souvent utilisé par les “search robots” pour indexer votre page. Choisissez donc quelque chose de significatif. * Toute la page HTML proprement dite (ce qui est visible dans le browser) est incluse dans le corps (“BODY”).
II.4 Notions de base
II.4.1 Balise HTML
* Une balise est un élément du texte (un nom) encadré par (<) et (>). Exemple : <head> * Les balises HTML ne sont pas sensibles à la casse : pas de différence entre majuscules et minuscules. * Les balises fonctionnent par paire afin d’agir sur les éléments qu’elles encadrent. La première balise est dite ouvrant et la seconde est dite fermante. La balise fermante est précédée par ‘/’.
Exemple :
<b> Ce texte est en gras </b> : met le texte encadré en gras.
* Les balises HTML peuvent être uniques. Exemple : <br> représente un retour à la ligne. * Les balises peuvent être imbriquées de manière hiérarchique. Le chevauchement n’est pas accepté.
Exemple :
<i><u>Bonjour</u>tout le monde</i> (*Bonjour tout le monde*)
<i><b>Ceci est un exemple</i>incorrect </b> (incorrect)
II.4.2 Attribut HTML
Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires. Les attributs se présentent la plupart du temps comme une paire clé=valeur, mais certains attributs ne sont parfois définis que par la clé.
Exemple :
<p align="right">Exemple de paragraphe</p>
Dans cet exemple, dans la balise de paragraphe <p>, on a spécifié l’attribut align="right"> qui permet d’aligner à droite le texte du paragraphe.
II.5 Titres, séparateurs et paragraphes
II.5.1 Titres
Il existe 6 niveaux de titre dans HTML.
Un retour à la ligne est automatiquement inséré après un titre.
Syntaxe: <Hn>...</Hn>
où n est compris entre 1 et 6 (H1 est le plus grand titre possible)
*Exemple*
<H1>Titre de niveau 1</H1>
<H4>Titre de niveau 4</H4>
*Attribut:*
* ALIGN sert à spécifier l’alignement horizontal d’un titre.
Syntaxe: ALIGN="LEFT ou CENTER ou RIGHT"
<h1 align="center">Texte du titre centré</h1>
II.5.2 Paragraphe
a/ Paragraphe simple
Le marqueur de paragraphe "p" produit un double retour de ligne.
Syntaxe: <p>...</p>
A l'intérieur d'un paragraphe, les espaces, tabulations et retours chariot comptent pour un seul espace.
*Attribut:*
* ALIGN sert à spécifier l’alignement horizontal du paragraphe.
Syntaxe: ALIGN="LEFT ou CENTER ou RIGHT"
*Exemple*
<p align="center">Ceci est un premier paragraphe centré</p>
<p align="right">Ceci est un paragraphe aligné à droite</p>
b/ Paragraphe en retrait
* Le marqueur “blockquote” décale le paragraphe à droite.
Syntaxe: <blockquote>...</ blockquote >
*Exemple*
<blockquote>ce paragraphe a un retrait à droite</blockquote>
c/ Paragraphe formaté
Publicité
Le marqueur “pre" est utilisé lorsqu’on désire afficher du texte avec un caractère non-proportionnel (“monospaced font”). Un “m” prendra autant de place qu’un “i”.
Lorsqu’on insère plusieurs espaces à la suite, ceux-ci sont maintenus à l’affichage (ce qui n’est pas le cas avec le texte normal)
Syntaxe: <pre> ... </pre>
*Exemple*
<pre>
ligne 1
ligne2 précédée d’espaces
</pre>
d/ Adresse et signature
“Address” est utilisé pour les indications relatives à l’auteur, à la date de création et à la version du document.
Syntaxe: <address> ... </address>
*Exemple*
<address>
Ce document a été créé par les étidients de l’ISET de Bizerte
Dernière modification: 12/1/2011
</address>
II.5.3 Séparateur
a/ Retour à la ligne
Le marqueur “br” effectue un simple retour de ligne.
Il n’est pas nécessaire de le fermer par </br>.
Syntaxe: <br>
**Attribut :**
CLEAR permet de forcer l’alignement du texte. Ce paramètre est particulièrement utile lorsqu’on l’utilise conjointement avec des images. Il introduit des retours de lignes jusqu’à ce que la marge droite, gauche ou les deux soient libres.
CLEAR="LEFT ou RIGHT ou ALL"
<br clear=left>
<br clear=all>
b/ Ligne horizontale
Le marqueur “hr” insère une barre horizontale.
Syntaxe: <hr>
**Attributs :**
* **SIZE :** spécifie l’épaisseur de la barre horizontale en pixels. La valeur par défaut est 1. * **WIDTH :** spécifie la longueur de la ligne, soit en pixels, soit en pourcentage de la largeur de la fenêtre. * **ALIGN :** spécifie l’alignement de la barre
ALIGN="LEFT ou RIGHT ou CENTER"
* **NOSHADE :** ne prend pas de valeur. Lorsqu’il est présent dans le marqueur “hr” l’effet est une ligne pleine sans ombrage.
*Exemple :*
<hr size="3" width="200" align="center" noshade>
c/ La balise DIV
La balise DIV permet de regrouper des éléments.
On peut associer des attributs communs aux éléments contenus entres les balises <div>
<div align="center">
<h1> Introduction </h1>
<p>
Bonjour
</p></div>
Cette balise est surtout utile pour associer des styles
<DIV class="cours">
.....
</DIV>
II.6 Mise en forme de caractères et caractères spéciaux
II.6.1 Balises de style
Les balises de style modifient la typographie du texte. Elles peuvent être imbriquées dans d'autres balises de style de la même façon qu'on le ferait avec un traitement de texte.
| | | | --- | --- | | **Balise de style** | **Effet Visuel** | | <ABBREV> | Abréviation | | <ACRONYM> | Acronyme | | <B> | **Met la police en gras** | | <BIG> | Police plus grande | | <CITE> | *Citation* | | <CODE> | Instruction | | <DEL> | ~~Texte supprimé mais qui reste présent~~ | | <DFN> | *Définition d'instance* | | <EM> | *Emphase* | | <I> | *Italique* | | <INS> | Nouveau texte inséré à cet endroit | | <KBD> | Clavier - Suite de caractères devant être tapés tel quel | | <Q> | Encadre le texte par des guillemets | | <S> | ~~Comme strike (barré)~~ | | <SAMP> | Exemple | | <SMALL> | Police plus petite | | <STRONG> | **Forte accentuation rendue par du gras** | | <STRIKE> | ~~Texte barré (comme S)~~ | | <SUB> | Texte en Indice | | <SUP> | Texte en Exposant | | <TT> | Caractère de machine |
II.6.2 Police
Pour modifier la police de votre texte il suffit d’utiliser la balise: **<font>.**
Syntaxe : <font face= « … » color= « … » size= « … »>.votre texte</font>
**Attributs :**
* Face : spécifie la police utilisée. * **size :** spécifie la taille de la police. * color : spécifie la couleur de la police soit en spécifiant le nom de la couleur soit le code de la couleur en "#RRVVBB" (RR, VV et BB représentent respectivement un nombre hexadécimal entre 00 et FF pour le Rouge, le Vert et le Bleu).
Publicité
*Exemple :*
<font face="Times New Roman, Times, serif" color="#FF0000" size="+2" >exemple de police </font>
II.6.3 Caractères spéciaux
Le standard HTML demande de respecter le codage des caractères ASCII 7 bits, c'est-à-dire que les caractères accentués ne sont pas autorisés. Il faut pour cela utiliser un codage particulier.
*Exemple :*
| | | | --- | --- | | **Caractère** | **Code** | | " | " | | & | & | | Space | | | à | à | | E | è ; | | E | é |
II.7 Les listes
II.7.1 Liste à puce
Pour créer une liste à puce, on dispose de la balise <ul>
Pour spécifier le titre de la liste, on utilise <lh>
Les éléments de la liste sont réalisés grâce à la balise <li>
Syntaxe:
<ul>
<lh>…</lh>
<li>…</li>
<li>…</li>
…
</ul>
*Exemple :*
<ul>
<lh>Titre de la liste</lh>
<li>Elément 1</li>
<li>Elément 2</li>
</ul>
II.7.2 Liste numérotée
Syntaxe: <ol> ... </ol>
<ol>
<lh>Titre de la liste</lh>
<li>Elément 1</li> <li>Elément 2</li>
</ol>
II.7.3 Liste de définition
**Le marqueur « dl » :** Délimite une zone de liste de définition qui contient des termes "dt" et des descriptions "dd"
Syntaxe: <dl> ... </dl>
**Le marqueur « dt » :** Introduit un nouveau terme de définition.
Syntaxe: <dt> ... </dt>
**Le marqueur « dd » :** introduit une description du terme de définition. Le résultat à l’écran est un décalage du texte vers la droite.
Syntaxe: <dd> ... </dd>
<dl>
<th>Titre de la liste
<dt>Terme 1</dt>
<dd>Définition du terme 1</dd>
<dt>Terme 2</dt>
<dd>Définition du terme 2</dd>
....
</dl>
II.7.4 Attributs de liste
Il existe des attributs spécifiques aux listes:
| | | | | --- | --- | --- | | **Attribut** | **Valeur** | **Effet Visuel** | | | | | | COMPACT | | resserre l'interligne | | PLAIN | | supprime les puces | | SEQNUM | | définit le premier numéro | | START | | définit le premier numéro | | CONTINUE | | repart du numéro où il s'était arrété à la liste précédente | | TYPE (pour les listes ordonnées) | 1 A a I i | numérotation chiffrée (par défaut) numérotation en capitales numérotation en bas de casse numérotation en chiffres romains (I, II, III, IV ...) numérotation en chiffres romains en bas de casse | | TYPE (pour les listes non-ordonnées) | circle square disc | puce circulaire puce carrée puce en disque |
II.7.5 Combinaison de liste
Les listes peuvent être emboîtées les unes dans les autres, il suffit pour cela de définir un élément d’une liste comme étant une autre liste.
| | | --- | | <ol> <li> Achats à faire </li> <p> <ul> <li> 2 litres de lait </li> <li> 1 kg de pain mi-blanc </li> </ul> <li> Recette </li> <dl> <dt>Pain</dt> <dd>Il faut de la farine et de l’eau, de la levure.</dd> <dt>Lait</dt> <dd>Si vous êtes en ville, aucune chance ... Il faut trouver une vache </dd> </dl> <li> Dernier élément numéroté </li> </ol> |
