Internet & langage HTML barbria_manel@yahoo.fr

1. Institut Supérieur de Gestion de Tunis Internet & langage HTMLbarbria_manel@yahoo.fr 2009 - 2010 3ème Année IAG

2. Références • D.Mailliet,Cours Internet • Laurent Candillier,Cours HTML • Stefan Münz, 27/01/2003, http://fr.selfhtml.org BarbriaManel Internet & langage HTML

3. Objectifs du cours Connaitre les notions de base sur Internet • Présenter le langage HTML • Développer des sites web BarbriaManel Internet & langage HTML

4. Le réseau Internet : 1 Le langage HTML 2 Plan du cours • Définition • Les protocoles • Les services • Définition • Quelques balises BarbriaManel Internet & langage HTML

5. 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 BarbriaManel Internet & langage HTML

6. 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 …. BarbriaManel Internet & langage HTML

7. 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. BarbriaManel Internet & langage HTML

8. 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. BarbriaManel Internet & langage HTML

9. 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 BarbriaManel Internet & langage HTML

10. Le protocole HTTP(2) Fonctionnement du protocole HTTP BarbriaManel Internet & langage HTML

11. 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 MozillaFireFox NetScape …. BarbriaManel Internet & langage HTML

12. 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: nom@serveur.suffixe Le protocole SMTP ( Sample Mail Transfer Protocol):Envoi des courriels électroniques Le protocole POP( Post Office Protocol):Réception des courriels électroniques BarbriaManel Internet & langage HTML

13. 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 … BarbriaManel Internet & langage HTML

14. Langage HTML : Définition • HTML : Hyper TextMarkup 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. BarbriaManel Internet & langage HTML

15. 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 BarbriaManel Internet & langage HTML

16. 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 …

17. Structure de base d’un document HTML <html> <head> <TITLE> ………... </TITLE> </head> <body> ……….. </body> </html> Titre du document Entête du document Contenu du document BarbriaManel Internet & langage HTML

18. Les textes et paragraphes BarbriaManel Internet & langage HTML

19. Les listes Listes numérotées <OL> Listes à puces <UL> Code HTML : <OL> <LI>Mon premier élément de liste <LI>Mon deuxième élément de liste </OL> Résultat : 1. Mon premier élément de liste 2. Mon deuxième élément de liste Code HTML : <UL> <LI>Mon premier élément de liste <LI>Mon deuxième élément de liste </UL> Résultat : · Mon premier élément de liste · Mon deuxième élément de liste Type {circle,square} Type {A,a,i,I} Start

20. Les titres BarbriaManel Internet & langage HTML

21. 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 BarbriaManel Internet & langage HTML

22. 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 BarbriaManel Internet & langage HTML

23. 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> BarbriaManel Internet & langage HTML

24. Travail à faire : Comment créer des formulaires en HTML BarbriaManel Internet & langage HTML