CPI/BTS 2 Programmation Web Introduction au HTML Prog Web CPI/BTS2 – M. Dravet – 18/09/2003 Dernière modification: 18/09/2003.

Présentation au sujet: "CPI/BTS 2 Programmation Web Introduction au HTML Prog Web CPI/BTS2 – M. Dravet – 18/09/2003 Dernière modification: 18/09/2003."— Transcription de la présentation:

1 CPI/BTS 2 Programmation Web Introduction au HTML Prog Web CPI/BTS2 – M. Dravet – 18/09/2003 Dernière modification: 18/09/2003

2 Introduction Le WEB et les Réseaux –C’est UNE des utilisations d’Internet, –Internet : interconnexion de réseaux locaux –Possible grâce à un protocole unificateur: le protocole IP (Internet Protocol) –Organisation des protocoles sous forme de couches. On parle de couches réseaux.

3 Introduction Pour simplifier les couches réseau: Accès réseau Internet Transport Application Protocoles de bas niveau pour la gestion physique des équipements réseaux et des réseaux locaux: ethernet, token ring, etc. Protocole IP, universellement reconnu et véhiculé dans les protocoles de réseaux locaux Différents modes de connexion entre machines, via les protocoles TCP ou UDP, le tout dans IP Différents types de données véhiculées par les applications via le TCP ou l’UDP. En général chaque type d’application à sa propre organisation de données: protocole applicatif.

4 Introduction Les protocoles applicatifs –Ils sont encapsulés dans du TCP ou de l’UDP suivant le type de connexion requis: TCP: mode connecté avec suivi de connexion UDP: mode non connecté avec moins de contrôles –Exemples de protocoles applicatifs: SMTP et POP3 ou IMAP pour les mails FTP pour les transferts de fichiers SNMP pour la gestion d’équipements réseau HTTP pour la communication WEB

5 Introduction Chaque protocole applicatif véhicule différents types d’informations utiles au domaine applicatif concerné. Ex: –Le SMTP (envois de mails) va véhiculer : Les adresses email de l’expéditeur et du destinataire, Les relais SMTP utilisés pour acheminer un mail, + le corps du mail: les données utilisateur

6 Le HTTP Le protocole qui nous intéresse ici est le HTTP. Il véhicule lui aussi des informations spécifiques: –Adresse IP source, –Adresse IP destinataire, –Longueur des données transmises, –URL demandée ou envoyée –Type de navigateur ou de serveur WEB –+ les données « utilisateur » …

7 Fonctionnement du WEB Toute l'information diffusée sur le web est stockée dans des documents appelés pages web Les pages web sont les données utilisateur véhiculées par le protocole HTTP. Les pages web sont stockées sur des serveurs web qui permettent leur diffusion à travers le réseau Les ordinateurs qui accèdent aux pages web pour les lire sont appelés des clients web Les clients affichent les pages web en utilisant un logiciel appelé navigateur internet Les deux principaux navigateurs sont internet explorer et netscape navigator

8 Navigateurs et requêtes Un navigateur va chercher une page sur un serveur web en effectuant une requête. Une requête HTTP doit forcément contenir l'adresse de la page demandée. On l’appelle aussi URL. La syntaxe d'une adresse est du type : http://www.votresite.com/lapagealire.html Nom de domaine Service ou machine demandée Protocole utilisé Objet demandé

9 Récapitulatif Internaute Utilise un navigateur sur son ordinateur et formule une demande (URL) Le nom de domaine est extrait de l’URL et l’ordinateur demande l’adresse IP correspondant à ce domaine à un serveur DNS Serveur DNS L’ordinateur client envoie une requête HTTP à l’IP de destination (le serveur web). Le protocole HTTP véhicule l’URL exacte demandée, + d’autres informations sur le client. Le serveur analyse l’URL et répond au client en lui fournissant l’objet demandé ou une notification de rejet ou d’erreur toujours via le protocole HTTP

10 Lecture d’une page Web Toutes les pages web sont constituées d'instructions qui sont en fait des « lignes de programmation » ou « lignes de code » Le navigateur peut afficher les pages en lisant ou en interprétant ces instructions Sur le web, ces instructions sont très généralement construites en utilisant des balises issues du langage de programmation HTML (balises HTML) Un exemple de balise HTML : test de fonte taille 4

11 Normalisation du Web Un standard web définit des règles précises pour la réalisation de pages web Les différents standards du web ne sont pas réalisés par Microsoft ou Netscape Ces règles sont élaborées par le W3C (World Wide Web Consortium) Les principaux standards du web sont le HTML, le CSS, et le XML

12 Créer un contenu WEB Nous allons principalement nous servir du format HTML qui est le plus répandu. HTML est l'abréviation de Hyper Text Markup Language Un fichier HTML est un fichier texte qui contient des balises HTML Ces balises ou tags "disent" au navigateur comment afficher la page web Les fichiers HTML doivent porter l'extension.htm ou.html

13 Créer un contenu WEB Exemple de code HTML Titre de ma page Ceci est ma première page web. Ce texte sera affiché en gras

14 Créer un contenu WEB Une telle page n’a pas besoin d’être stockée sur un serveur pour être lue par votre navigateur. Il suffit de l’enregistrer en local puis de double clicker dessus pour que le navigateur par défaut s’ouvre … Dans une certaine mesure, il est donc possible de développer quelques pages web en local sans avoir besoin d’Internet ou d’un serveur Web. Votre navigateur interprète directement les pages depuis votre disque.

15 Créer un contenu WEB Analyse de l’exemple précédent –La première balise HTML de l’exemple est. –Ce tag (ou balise) indique au navigateur que le document qu'il est en train de lire est écrit en langage HTML. –La dernière balise du document est et signifie au browser (ou navigateur) que votre document est terminé.

16 Créer un contenu WEB Analyse de l’exemple précédent –Le texte compris entre les balises et contient les informations de l'en tête du document. –Ces informations vont servir à la construction ou l'affichage de la page. –Elles ne sont jamais directement affichées sur la page web, elles servent uniquement au navigateur utilisé.

17 Créer un contenu WEB Analyse de l’exemple précédent –Les informations inscrites entre les balises et permettent de donner un titre à votre page web. –Ce titre est affiché dans la barre de titre de votre navigateur –Les lignes se trouvant entre les balises et contiennent le texte qui sera affiché par le navigateur. –Enfin, le texte contenu entre les tags et sera affiché en gras.

18 Créer un contenu WEB Vous allez probablement vouloir utiliser des éditeurs HTML qui facilitent grandement la vie d’un développeur Web. Dans notre cas, il est préférable d’apprendre le HTML avant d’utiliser un tel éditeur, afin d’en comprendre le fonctionnement. C’est nécessaire pour la suite du programme car il faudra générer du code HTML « à la main » via un autre langage Editeur HTML recommandé: Macromédia Dreamweaver

19 Les balises HTML Vous allez probablement vouloir utiliser des éditeurs HTML qui facilitent grandement la vie d’un développeur Web. Dans notre cas, il est préférable d’apprendre le HTML avant d’utiliser un tel éditeur, afin d’en comprendre le fonctionnement. C’est nécessaire pour la suite du programme car il faudra générer du code HTML « à la main » via un autre langage Editeur HTML recommandé: Macromédia Dreamweaver

20 Les balises HTML Détails sur les balises –Chaque balise (d'ouverture ou de fermeture) débute par le caractère –Généralement, les balises HTML fonctionnent par paires: …. –Les tags HTML ne sont pas sensibles à la casse : est identique à –Les balises d’ouverture (ex. ) et de fermeture (Ex. ) encadrent le bloc concerné par ces balises.

21 Les balises HTML Quelques balises : les paragraphes simples Paragraphe 1 Paragraphe 2 Paragraphe 3 Les paragraphes sont définis par la balise p

22 Les balises HTML Quelques balises : les titres Titre de niveau 1 Titre de niveau 2 Titre de niveau 3 Titre de niveau 4 Titre de niveau 5 Titre de niveau 6 h1  titre le plus gros h6  titre le plus petit

23 Les balises HTML Quelques balises : les sauts de ligne toto Ceci est un paragraphe avec 2 sauts de lignes toto Le tag n’a pas de balise de fermeture !

24 Les balises HTML Quelques balises : insertion d’image Le tag n’a pas de balise de fermeture ! Il prend au moins un paramètre pour indiquer l’emplacement de l’image à afficher (src="…")

25 Les balises HTML Quelques balises : les commentaires toto Ceci est un paragraphe avec 2 sauts de lignes toto Le ! est obligatoire dans la balise d’ouverture.

26 Les liens HyperText Nécessité de relier les pages HTML entre elles pour former une arborescence de site Les liens se font via des balises HTML : Ce texte est un lien interne qui va amener le visiteur sur une autre page du site. Ce texte est un lien externe vers un autre site.

27 Les liens HyperText Les liens à partir d’une image : Vous pouvez aussi créer un lien sur une image :

28 Sources d’information Quelques liens utiles pour poursuivre l’apprentissage du HTML: –http://www.salemioche.net/tutorial.phphttp://www.salemioche.net/tutorial.php –http://ir2lcb.cnrs-mrs.fr/cours_HTML/html_1.htmhttp://ir2lcb.cnrs-mrs.fr/cours_HTML/html_1.htm –http://www.allhtml.com/html/index.phphttp://www.allhtml.com/html/index.php –http://www.bountiful.demon.co.uk/html/lesson_one. htmlhttp://www.bountiful.demon.co.uk/html/lesson_one. html

29 Les balises HTML Vous allez probablement vouloir utiliser des éditeurs HTML qui facilitent grandement la vie d’un développeur Web. Dans notre cas, il est préférable d’apprendre le HTML avant d’utiliser un tel éditeur, afin d’en comprendre le fonctionnement. C’est nécessaire pour la suite du programme car il faudra générer du code HTML « à la main » via un autre langage Editeur HTML recommandé: Macromédia Dreamweaver

30 Exercice … Ceux qui connaissent déjà le HTML se mettent avec ceux qui ne connaissent pas ! Rédaction d’une page HTML simple avec les balises de début et fin de page + texte sans formatage Rédaction d’une page HTML avec tests de formatage de texte: paragraphes, sauts de ligne, titres … Rédaction d’une page HTML avec insertion d’image, de lien, et d’image en lien