1. GRICHI Hanen
Hajjem manel
Barbata sana 1

2. 1. C’est quoi l’internet?
2. Historique
3. Connexions grand public
4. L’Hypertext Markup Language
5. Notion de Base du langage HTML
6. Exemple de page à réaliser
2

3. Internet est le réseau informatique mondial qui rend
accessibles au public des services variés comme:
• le courrier électronique,
Internet ayant été popularisé par l'apparition du
• la messagerie instantanée etdeux sont parfois confondus
World Wide Web, les
• le World par le Web, non averti.
Wide public
en utilisant  Le World Wide Web n'est pourtant que IP (Internet
le protocole de communication l'une des
Protocol). applications d'Internet.
Son architecture technique qui repose sur une
hiérarchie de réseaux, ce qui implique une non-
centralisation d’ou la nomination de réseau des
réseaux. 3

4.  L'accès à Internet peut être obtenu grâce à un
fournisseur d'accès à Internet via divers moyens de
communications électroniques:
– filaire: réseau téléphonique commuté (bas débit), ADSL, fibre
optique jusqu'au domicile...
– sans fil: WiMAX, Internet par satellite, 3G+…
Un utilisateur d'Internet est désigné en français par le
néologisme « internaute ».
4

5.  En juillet 1962 (Licklider du Massachusetts Institute of
Technology ): textes décrivant les interactions sociales qui
seraient possibles avec un réseau d'ordinateurs.
 Faciliter les communications entre chercheurs de la Defense
Advanced Research Projects Agency (DARPA).
 En octobre 1962, Licklider fut le premier chef du
programme de recherche en informatique de la DARPA
 de l'intérêt des réseaux informatiques.
 En 1965, Roberts testa avec Thomas Merrill la première
connexion informatique à longue distance, entre le
Massachusetts et la Californie.
5

6.  Entre 1962 et 1965, le groupe de la RAND avait étudié la
transmission par paquets pour l'armée américaine(réseau
non centralisé).
 Le Network Working Group (NWG) conduit par Steve
Crocker finit le protocole de communication poste-à-poste
en décembre 1970.
 En 1972, Ray Tomlinson mit au point la première
application importante : le courrier électronique.
6

7.  Le concept d'Internet est né (Advanced Research Projectsle nom de
ARPANET d'ARPANET (en 1972 sous Agency
Internetting) Network) est le premier réseau à transfert de
paquets développé aux États-Unis par la DARPA.
 Le protocole NCP d'ARPANET ne permettait pas
 d'adresser des hôtes hors d'ARPANET ni
 de corriger d'éventuelles erreurs de transmission.
 Kahn décida donc de développer un nouveau protocole, qui
devint finalement TCP/IP.
 Le début des années 1990 : la naissance d'Internet .
 L’année 1993 voit l’apparition du premier navigateur Web ou
(browser), supportant le texte et les images.
 La National Science Foundation (NSF) mandate une compagnie
pour enregistrer les noms de domaine. 7

8. Un canal de communication vers le
fournisseur d'accès : Fibre optique, Ligne
téléphonique fixe : ligne analogique, xDSL,
Ligne téléphonique mobile : 3G+, 3G, Edge,
GPRS, GSM (CSD), Internet par satellite,
Wi-Fi…
Un ordinateur
personnel
,Assistant
personnel,
Console de jeux
vidéo, Téléphone
mobile …
8

9. du texte,
des liens,
des images,
9

10.  L’Hypertext Markup Language, généralement abrégé
HTML, est le format de données conçu pour représenter les
pages web.
 C’est un langage de balisage qui permet d’écrire de
l’hypertexte, d’où son nom.
 Un système hypertexte est un système contenant des nœuds
liés entre eux par des hyperliens permettant de passer
automatiquement d'un nœud à un autre.
HTML est initialement dérivé du Standard Generalized Markup
Language (SGML).
10

11.  HTML permet également de structurer sémantiquement et
de mettre en forme le contenu des pages, d’inclure des
ressources multimédias
 des images,
 des formulaires de saisie,
 des éléments programmables (applets)
Il est souvent utilisé conjointement avec des langages de
programmation (JavaScript) et des formats de présentation
(feuilles de style en cascade).
11

12. Le langage HTML a été mis au point par Tim Berners-Lee,
à partir de 1989.
À partir de 1993 on considère l'état du HTML suffisamment
avancé pour parler de langage (HTML 1.0).
Le navigateur internet utilisé à l'époque était nommé NCSA
Mosaïc.
Novembre 1995 : la première version officielle de HTML
(HTML 2.0).
12

13. Après le HTML 3.0, le HTML 3.2 devint le standard
officiel le 14 janvier 1997.
Les apports les plus marquants du HTML 3.2 étaient la
standardisation des tableaux ainsi que d'un grand nombre
d'éléments de présentation.
Le 18 décembre 1997, le HTML 4.0 a été publié. La
version 4.0 du langage HTML standardise notamment les
feuilles de style et les cadres (frames).
La version HTML 4.01, apparue le 24 décembre 1999
apporte quelques modifications mineures au HTML 4.0. 13

14. Cadre Générale (1)
 Vos besoins Logiciels:
 Un éditeur du texte simple pour écrire du HTML:
Bloc note, Notepad,…
 Un éditeur du texte évolué, dit "WYSIWYG":
Dreamweaver, FrontPageé, …
 Un navigateur web pour interpréter la langage HTML
et afficher le résultat:
Netscape, Internet Explorer,…
14

15. Cadre Générale (2)
 Il contient des commandes, implémentées par des balises
pour marquer les différents types de texte (titres,
paragraphe, listes …) , pour inclure des images, des
formulaires, des liens …
<marqueur attribut= « argument»>Texte Ici</marqueur>
 Les balises peuvent posséder un ou plusieurs attributs qui
permettent de spécifier l'action de la balise. Toujours mettre
la valeur de l'attribut entre guillemets.
15

16. Structure d’un fichier HTML (1)
 Type de document: <html></html> ( au début et à la fin
du document)
 Titre:<title></title> (nom du fichier; doit être dans
l'entête) <BODY bgcolor="blue" >
 En-tête: <head></head> (l’entête du document)
<BODY bgcolor="#000099" >
 Corps: <body></body> (corps du document)
<BODY bgcolor= rgb (240, 245, 128) >
HTML n’est pas sensible à la casse
16

17. Structure d’un fichier HTML (2)
Faisons ensemble notre premier document Html:
 Ouvrir l'éditeur de texte.
 Ecrire les codes Html suivants:
<html>
<head> <title>Premier Document Html </title> </head>
<body> Bienvenue à ma page personnelle </body>
</html>
 Enregistrer le document avec l'extension .html ou .htm17

18. Contenu d’un document Html
Tout document Html peut contenir:
 Texte
 Image
 Lien Hypertexte: C’est un lien qui permet la liaison
entre différents documents Html
18

19. Mise en forme du texte
 Le texte du document Html est écrit entre les balises:
<body> et </body>
 La langage Html permet la mise en forme du texte en
l’argument avec des balises spécifiques
 Si différentes formes sont appliqués sur un texte, on doit
respecter l’ordre des balises.
<gras><italique> Le cours HTML</gras></italique>
<gras><italique> Le cours HTML </italique></gras>
19

20. Mise en forme du texte
Gras [Bold]: <B>...</B> ou <STRONG>...</STRONG>
Italique [Italic]: <I>...</I> ou <EM>...</EM>
Taille de caractère [Font size]: <FONT SIZE=?>...</FONT>
Couleur de caractère[Font color]: <FONT COLOR="#$$$$$$"> …</FONT>
A la ligne [Line break]: <BR>
Commentaires [Comments]: <!-- *** -->
Centrage [Center]: <CENTER> </CENTER>
Fond d’écran <BODY BGCOLOR="#000088« >
Alignement <p align=left>...</p>
<p align=center>...</p>
<p align=right>...</p>
20

21. Mise en forme du texte: code couleur
21

22. Les Titres et les listes
Titres [Heading] <Hn></Hn> avec n=1 à 6
Afficher un titre de niveau n
Liste non-ordonnée [Bullet list] <UL></UL>
Liste ordonnée [Numbered list] <OL></OL>
Elément de liste [List items] <LI> </LI>
A la ligne [Line break]: <BR>
Paragraphe [Paragraph] <P></P> Saut de ligne,
insérer une ligne vierge et
commencer un paragraphe
22

23. Insertion: image et séparateurs
 Insertion d’image
<IMG SRC="Adresse de l'image">
La balise image possède de nombreux attributs:
Dimensions: width=? height=? border=? (en pixels)
Alignement: align=top||middle||botton||left||right
 Insertion de ligne horizontale
<HR> Ligne horizontale [Horizontal Rule]
<HR size=?> Epaisseur en pixels
<HR width=?> Largeur en pixels
<HR width="%"> Largeur en % de la fenêtre
<HR align=left> Alignement par apport à la fenêtre
23

24. Insertion des liens
• Lien Externe
Un lien vers un autre document Html sur la même machine ou une
machine distante
<A HREF="URL" Name= " lien " ></A>
• Lien Interne
C’est un pointeur vers un endroit précis du même document ou
d'un autre fichier. C'est ce qu'on appelle les ancres, ancrages ou
pointeurs
<A NAME="***">...</A> Ceci est une cible
<A HREF="#***">...</A> Lien vers la cible *** dans la même page
24

25. Insertion des tableaux
 En Html, les tableaux servent non seulement à
aligner des chiffres mais surtout à placer des éléments
à l'emplacement que vous souhaitez.
 Définition du tableau [Table]
<TABLE></TABLE>
 Définition d'une ligne [Table Row]
<TR></TR>
 Définition d'une cellule [Table Data]
<TD></TD>
25

26. Insertion des tableaux
 Exemples
<TABLE border=1 >
<TR>
<TD>1</TD>
<TD>2</TD>
</TR> 1 2
<TR> 3 4
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
26

27. Titre de la page En-tête 1
Ma page perso: Nom et prénom
Arrière Plan Lien de l’université En-tête 3
@mail
Votre image Lien courrier
Cursus
Annés Niveau Etablisement Tableau invisible
En-tête 2 Centré
Liste des matières préférées:
a
Liste à puces abc
b
Liste des loisirs
1 Liste à puces 123
2
27