Internet & langage HTML [email protected]

Internet & langage HTML

[email protected]

2009 - 2010 1

Institut Supérieur de Gestion de Tunis

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

Barbria Manel Internet & langage HTML

http://fr.selfhtml.org/

3

Objectifs du cours

Connaitre les notions de base sur Internet

Présenter le langage HTML

Développer des sites web


4

Plan du cours

• Définition• Les protocoles• Les services

• Définition• Quelques balises

Le réseau Internet :1

Le langage HTML2


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


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/IPHTTPDNSSMTP

….Barbria Manel 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.


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.


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


10

Le protocole HTTP(2)

Fonctionnement du protocole HTTPBarbria Manel 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 Mozilla FireFox NetScape ….


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: [email protected] Le protocole SMTP ( Sample Mail Transfer Protocol):Envoi des courriels électroniques Le protocole POP( Post Office Protocol):Réception des courriels électroniques


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 …


14

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.


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 fermetureIl faut respecter la logique d’imbrication


16

Les éditeurs HTML1- 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

Contenu du document

Entête du document


18

Les textes et paragraphesBalises 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 paragraphe

Mon premier<p>cours</p> Mon premier

cours<BR> Retour à la

ligneMon premier <BR> cours Mon premier

cours


19

Les listes

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

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 liste2. Mon deuxième élément de liste

Listes numérotées <OL>Listes à puces <UL>

Type {circle,square}Type {A,a,i,I} Start

20

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


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 Barbria Manel 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


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éderen 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

24

Travail à faire :

Comment créer des formulaires en HTML


Documents

Internet & langage HTML [email protected]