Transcript Cours HTML

Institut Supérieur de Gestion de Tunis
Internet & langage
HTML
[email protected]
2009 - 2010
3ème Année IAG
1
Références
D.Mailliet,Cours Internet
Laurent Candillier,Cours HTML
Stefan Münz, 27/01/2003, http://fr.selfhtml.org
Barbria Manel
Internet & langage HTML
2
Objectifs du cours
Connaitre les notions de base sur Internet
Présenter le langage HTML
Développer des sites web
Barbria Manel
Internet & langage HTML
3
Plan du cours
1
Le réseau Internet :
•
•
•
2
Définition
Les protocoles
Les services
Le langage HTML
Définition
• Quelques balises
•
Barbria Manel
Internet & langage HTML
4
Internet : Définition
C'est un réseau international d'ordinateurs qui
communiquent entre eux grâce à des protocoles
d'échange de données standards.
Développé dans le milieu des années 1970 par la
DARPA( Defense Advanced Research Projects
Agency ) pour interconnecter les systèmes
informatiques de l’armée
Barbria Manel
Internet & langage HTML
5
Les protocoles:
Internet fonctionne suivant un modèle en couches où les
éléments appartenant aux mêmes couches utilisent un
protocole de communication pour s'échanger des informations.
Un protocole est un ensemble de règles qui définissent un
langage afin de faire communiquer plusieurs ordinateurs.
Exemples :
TCP/IP
HTTP
DNS
SMTP
….
Barbria Manel
Internet & langage HTML
6
Le protocole TCP/IP (1)
TCP/IP (Transmission Control Protocol / Internet
Protocol) définit les règles que les ordinateurs
doivent respecter pour communiquer entre eux sur
le réseau Internet.
Il provient des noms des deux protocoles TCP et IP
Protocole IP:
Ce protocole se charge du routage de chaque paquet
vers sa destination où une adresse IP unique est
attribuée à chaque ordinateur.
Barbria Manel
Internet & langage HTML
7
Le protocole TCP/IP ( 2)
Protocole TCP :
Se charge de la communication entre les
applications c’est-à-dire entre les logiciels utilisés
par les ordinateurs.
Lors d'une communication à travers le protocole
TCP, les deux machines doivent établir une
connexion.
Barbria Manel
Internet & langage HTML
8
Le protocole HTTP(1)

Le protocole HTTP (HyperText Transfer Protocol)
est le protocole le plus utilisé sur Internet .
Il permet un transfert de fichiers
hypertextes(essentiellement au format HTML)
localisés entre un client et un serveur Web
Utilise les adresses URL (Uniform Ressource
Locator)
La forme d’une adresse URL :
http:\\www.serveur.suffixe
Barbria Manel
Internet & langage HTML
9
Le protocole HTTP(2)
Fonctionnement du protocole HTTP
Barbria Manel
Internet & langage HTML
10
Les services (1)
Le World Wide Web (WWW):
 Le Web (la toile d'araignée) est une application qui
utilise le réseau Internet, et rend possible la
recherche d'informations sur les divers sites grâce à
l'utilisation des navigateurs et les adresses URL.
 Un navigateur est un logiciel qui permet d'accéder
aux différentes ressources sur internet.
Exemples : Internet Explorer
Mozilla FireFox
NetScape ….
Barbria Manel
Internet & langage HTML
11
Les services (2)
La messagerie électronique :
Le courrier électronique (e-mail) permet la transmission
personnelle de messages et de fichiers d'un expéditeur à un
destinataire grâce à des adresses e-mail protégées par des
mots de passe .
 La forme d’une adresse e-mail:
[email protected]
Le protocole SMTP ( Sample Mail Transfer Protocol):Envoi des
courriels électroniques
Le protocole POP( Post Office Protocol):Réception des
courriels électroniques

Barbria Manel
Internet & langage HTML
12
Les services (3)
File Transfer Protocol (FTP):
C’est un service d’Internet permettant de
télécharger des fichiers à partir du serveur.
Autres services :
 Internet Relay Chat (IRC)
 Forums de discussion
 Le commerce électronique
…
Barbria Manel
Internet & langage HTML
13
Langage HTML : Définition
HTML : Hyper Text Markup Language est né en
1989 par Tim Berners Lee
C'est un langage de balisage qui permet de mettre
en forme des pages html : apparence et
présentation
Un document HTML peut incorporer du texte, des
images, de l'animation et du son.
Barbria Manel
Internet & langage HTML
14
Les balises
Une balise (tag) est une commande codée qui
indique une action concernant la mise en page, la
mise en forme ou la structure logique d’un document.
Structure d’une balise:
< balise attribut1 = " valeur " … > xxx </balise>
Remarques :
Certaines balises n’ont pas de balise de fermeture
Il faut respecter la logique d’imbrication
Barbria Manel
Internet & langage HTML
15
Les éditeurs HTML
1- Le mode graphique: repose sur le principe de
WYSIWYG c.à.d. la création se fait d’une façon
visuelle.
2 - Le mode texte ( ou code ) : l’éditeur HTML est
considéré comme un simple éditeur de texte où la
génération de code se fait ligne par ligne.
Exemples des éditeurs HTML:
 Macromedia DreamWeaver
 Netscape Navigator Gold
 Microsoft Frontpage
 Symposia …
16
Structure de base d’un
document HTML
Entête du
document
Barbria Manel
<html>
<head>
<TITLE>
………...
</TITLE>
</head>
<body>
………..
</body>
</html>
Internet & langage HTML
Titre du
document
Contenu du
document
17
Les textes et paragraphes
Balises
Fonctions
Exemple de code
Résultat
<B>….</B>
Texte en
gras
<B>Mon premier cours </B>
Mon premier cours
<I>…...</I>
Texte en
italique
<I>Mon premier cours </I>
Mon premier cours
<U>….</U>
Texte
souligné
<U>Mon premier cours </U>
Mon premier cours
<p>….</p>
Début d’un Mon premier<p>cours</p>
paragraphe
Mon premier
cours
<BR>
Barbria Manel
Retour à la
ligne
Mon premier <BR> cours
Internet & langage HTML
Mon premier
cours
18
Les listes
Listes à puces <UL>
Code HTML :
<UL>
<LI>Mon premier élément de liste
<LI>Mon deuxième élément de
Type {A,a,i,I}
liste
</UL>
Start
Résultat :
· Mon premier élément de liste
· Mon deuxième élément de liste
Listes numérotées <OL>
Code HTML :
<OL>
<LI>Mon premier élément de liste
<LI>Mon
élément de
Typedeuxième
{circle,square}
liste
</OL>
Résultat :
1. Mon premier élément de liste
2. Mon deuxième élément de liste
19
Les titres
Exemple de code
Résultat
<H1>Mon titre en H1</H1>
Mon titre en H1
<H2>Mon titre en H2</H2>
Mon titre en H2
<H3>Mon titre en H3</H3>
Mon titre en H3
<H4>Mon titre en H4</H4>
Mon titre en H4
<H5>Mon titre en H5</H5>
Mon titre en H5
<H6>Mon titre en H6</H6>
Mon titre en H6
Barbria Manel
Internet & langage HTML
20
Les tableaux
<TABLE> et </TABLE> :
Marquent le début et la fin d'un tableau
<TR> et </TR> :
Servent à définir une ligne du tableau
<TD> et </TD>:
Servent à définir une cellule du tableau
<TH> et </TH> :
Servent à définir un titre de chaque colonne
<CAPTION> et </CAPTION>:
Servent à définir un titre pour le tableau
Barbria Manel
Internet & langage HTML
21
Les liens hypertextes : Liens
externes
La création des liens hypertextes se fait avec la
balise :
<A href = ″adresse cible ″> texte du lien </A>
L'adresse cible peut être un lien vers :
 Un site extérieur
 Une adresse e-mail
 Un fichier sur le même serveur
Barbria Manel
Internet & langage HTML
22
Les liens hypertextes : Liens
internes
Des liens vers des endroits précis dans le même
document html, appelés les ancres ou les
pointeurs.
1 - Insérer une ancre :
Nommer l’endroit où l’utilisateur veut accéder
en utilisant la balise < a name = ″ nom ″></a>
2 – Pointer vers cette ancre :
Se fait par la création d’un lien an ajoutant le nom de
l’ancre : <A href = ″ #nom ″>ancre</A>
Barbria Manel
Internet & langage HTML
23
Travail à faire :
Comment créer des formulaires en HTML
Barbria Manel
Internet & langage HTML
24