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

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.

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.

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

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 de l’expéditeur et du destinataire, Les relais SMTP utilisés pour acheminer un mail, + le corps du mail: les données utilisateur

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 » …

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

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 : Nom de domaine Service ou machine demandée Protocole utilisé Objet demandé

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

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

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

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

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

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.

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

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

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.

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

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.

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

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

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 !

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="…")

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.

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.

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

Sources d’information Quelques liens utiles pour poursuivre l’apprentissage du HTML: – – – – htmlhttp:// html

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

Exercice … Ce TP est INDIVIDUEL. Ex n°1: Rédaction d’une page HTML simple appelée exo1.html avec les balises de début et fin de page + du texte présentant un magasin de votre choix, sans formatage Ex n°2: copiez exo1.html vers exo2.html et modifiez exo2.html pour inclure du formatage de texte: paragraphes, sauts de ligne, titres … La présentation de votre magasin doit devenir propre ! Ex n°3: copiez exo2.html en exo3.html et modifiez exo3.html de manière à inclure des images de votre magasin, des liens vers des constructeurs ou partenaires éventuels de votre choix, des images servant de liens …

Exercice … Exo n°4 : travail à faire en deux étapes: –Documentez vous (livres, net …) sur l’utilisation des balises et en HTML. Elles servent à faire un tableau.. D’autres balises sont utilisées pour définir le nombre de lignes et de colonnes. A vous d’en comprendre l’utilisation. –copiez exo3.html vers exo4.html et modifiez exo4.html de manière à placer les images que vous aviez mis lors de l’exo3, à coté du texte qui les commente (par exemple). Le but est d’obtenir une mise en page différente du modèle trop classique consistant à mettre du texte, une image en dessous, encore du texte, à nouveau une image en dessous, etc. A la fin de ce TP vous devez donc avoir 4 fichiers HTML différents montrant votre progression. Utilisation d’un éditeur HTML interdite. TP susceptible d’être ramassé en cas de flag de fainéantise.