LANGAGE HTML Le HTML (Hyper Text Markup Langage) est un langage universel utilisé sur le World Wide Web. Le HTML permet de : * Publier des documents sur le web * Retrouver des informations en un click de souris grâce aux Liens Hypertexte. * Concevoir des formulaires permettant d’envoyer et de recevoir des infos sur le Web * Insérer directement des documents dans d'autres formats, des sources vidéo et sonores et d'autres applications
LANGAGE HTML Un bref historique Créé par Tim Berners-Lee avec sa première version qui dépendait du navigateur utilisé. Situer des spécifications communes pour en faire un langage standard. - Apparition du HTML 2.0 puis HTML 3.0 et HTML 3.2 - Et enfin la norme HTML 4.0 permettant d’intégrer des objets, des cadres, tableaux, formulaires … reconnue par la plupart des browsers
LANGAGE HTML De quel outil ai-je besoin ? - Un éditeur de texte tel que NOTPAD sous Windows, SIMPLTEXT sous Machintoch … - Et d’un navigateur Internet : Internet Explorer , Netscape ou autre. Sur PC Windows : - Cliquez sur DEMARRER, PROGRAMMES, ACCESSOIRES, BLOC-NOTES. - Sauvegarder le fichier avec ENREGISTRER SOUS, Placez le fichier sur votre bureau sous le nom page.HTM - Cliquer deux fois sur l’icône du fichier pour le tester avec le browser.
La structure d'un document HTML LANGAGE HTML La structure d'un document HTML HTML, un langage balisé : le texte de la page est écrit par l’intermédiaire des balises Exemple : <i>Ce texte sera en Italique </i> <b>Ce texte apparaîtra en gras </b> <b><i> Ce texte apparaîtra en Gras et en Italique </i></b> Toute balise débute par le caractère <nom_de_la_balise> et se termine par </nom_de_la_balise>
LANGAGE HTML L'entête d'un document HTML La balise <HTML> <HTML> <HEAD> …Contenu de l'entête </HEAD> <BODY> …Contenu du document </BODY> </HTML>
LANGAGE HTML La balise <TITLE> Notre page HTML se complète : Notre page HTML se complète : <HTML> <HEAD> <TITLE> La page d’accueil de l’Institut </TITLE> </HEAD> <BODY> …Contenu du document </BODY> </HTML>
LANGAGE HTML Le corps d'un document HTML Balise BODY) Identifiant le corps d'un document HTML, ses attribut sont : Attribut : Signification Bgcolor : Couleur de fond de page Background : Image de fond de page Text : Couleur du texte Link : Couleur des liens Alink : Couleur du lien actif
LANGAGE HTML Vlink Couleur des liens déjà visités Leftmargin Marge de gauche en pixels dans Internet Explorer Topmargin Marge de début de page en pixels dans Internet Explorer Marginwidth Marge de gauche en pixels dans Netscape Navigator Marginheight Marge de début de page en pixels dans Netscape Navigator
LANGAGE HTML <HTML> <HEAD> <TITLE> La page d’accueil de l’Institut </TITLE> </HEAD> <BODY bgcolor="white" text="black“ link="blue" alink="red" vlink="magenta"> …Corps du document </BODY> </HTML>
LANGAGE HTML Les accents A la rédaction d’une page Web, il ne faut surtout pas écrire les accents directement dans le code. <b>Voici la page du Lycé ;e Franco-Marocain </b> Le code suivant affichera : Voici la page du Lycée Franco-Marocain Lettres Code HTML Lettres Code HTML e accent aigu é ; a accent aigu á ; e accent grave è ; a accent grave à e accent ê ; a accent circonflexe â c cédille ç ;
LANGAGE HTML La mise en forme du texte <B> met le texte en gras </B> <STRONG> met le texte en gros </STRONG> idem que gras <I> met le texte en italique </I> <CENTER> centre le texte au milieu de l'écran </CENTER> <U> souligne le texte </U> à éviter car cela ressemble à un lien hypertexte. <BIG> grossit le texte </BIG> ne fonctionne pas avec tous les navigateurs
LANGAGE HTML <SMALL> rapetisse le texte </SMALL> <STRIKE> barre le texte </STRIKE> <CODE> sert pour les listings de programmes </CODE> permet d'utiliser la police de caractère non proportionnelle "courrier" Texte préformaté. <PRE> Budget : Revenu brut 750 000,00 F Cout de revient 132 825,00 F Benefice brut 617 175,00 F </PRE>
LANGAGE HTML Pour mettre le texte <SUP> en exposant </SUP> Pour mettre le texte <SUB> en indice </SUB> <HR> barre de séparation
LANGAGE HTML Paragraphes Utile pour formater le texte sous forme de paragraphes. Il est possible d'utiliser l'attribut align pour centrer ou justifier le texte: <P align="center"> Le paragraphe suivant sera justifié au centre </P> <P align="justify"> alors que celui-ci sera doublement justifié </P> Les 4 valeurs possibles pour l'attribut align sont left, right, center et justify
LANGAGE HTML Les listes simples Le code: <UL> Balise de début de liste <LI> des pommes <BR> <LI> des poires <BR> <LI> des bananes <BR> </UL> Balise de fin de liste Donne comme résultat Des pommes Des poires Des bananes Avec : <UL TYPE="disc"> ou <UL TYPE="square"> ou <UL TYPE="circle">.
LANGAGE HTML Les listes numérotées OL> Balise de début de liste <LI> élément 1 de la liste <LI> élément 2 de la liste <LI> élément 3 de la liste </OL> Balise de fin de liste Donne comme résultat élément 1 de la liste élément 2 de la liste élément 3 de la liste
LANGAGE HTML Les listes des définitions <DL> Balise de début de liste <DT> Titre de la première définition <DD> Texte de la première définition <DT> Titre de la deuxième définition <DD> Texte de la deuxième définition <DT> Titre de la troisième définition <DD> Texte de la troisième définition </DL> Balise de fin de liste Voici le résultat : Titre de la première définition Texte de la première définition Titre de la deuxième définition Texte de la deuxième définition Titre de la troisième définition Texte de la troisième définition
LANGAGE HTML Exercice : Titre de la première définition Texte de la première définition 1. élément 1 de la liste 2. élément 2 de la liste 3. élément 3 de la liste
LANGAGE HTML Titre de la deuxième définition Texte de la deuxième définition Titre de la troisième définition Texte de la troisième définition élément 1 de la liste élément 2 de la liste élément 3 de la liste Suite
LANGAGE HTML Ces formats sont le GIF et le Jpeg Quels formats d'image utiliser ? - 2 formats d'images sont compatibles avec tous les navigateurs Ces formats sont le GIF et le Jpeg Le GIF est limité à 256 couleurs - le Jpeg permet l'affichage jusqu'à 16 millions de couleurs et offre une meilleure compression (avec perte de qualité). - Le GIF offre la transparence ce qui permet la superposition des images.
LANGAGE HTML Insérez des images <IMG SRC="nom_de_l'image.gif"> : Insertion d'une image GIF <IMG SRC="nom_de_l'image.jpg"> : Insertion d'une image Jpeg <IMG SRC="nom_de_l'image.gif" ALT=« Texte de l’info bulle"> L'instruction <IMG> supporte aussi d'autres critères, voici quelques exemples : left, right, top, middle, bottom,.
LANGAGE HTML <IMG ALIGN="left" SRC="nom_de_l'image.gif"> : Insertion d'une image alignée à gauche <IMG ALIGN="right" SRC="nom_de_l'image.gif"> : Insertion d'une image alignée à droite <IMG ALIGN="top" SRC="nom_de_l'image.gif"> : Insertion d'une image alignée en haut <IMG ALIGN="bottom" SRC="nom_de_l'image.gif"> : Insertion d'une image alignée en bas
LANGAGE HTML Le texte peut être placé au milieu de l'image <IMG SRC="pic.gif" ALIGN="MIDDLE"> comme ceci. Le texte peut être placé au bas de l'image <IMG SRC="pic.gif" ALIGN="BOTTOM"> comme ceci. Une image peut être placée au milieu de la page par <CENTER><IMG SRC="pic.gif"></CENTER> <IMG SRC="pic.gif" ALIGN="RIGHT"> Une image peut être placée à droite de la page comme ceci. <IMG SRC="pic.gif" ALIGN="LEFT" HSPACE="10"> Une image peut être mise à gauche du texte comme ceci.
LANGAGE HTML <IMG SRC="pic.gif" ALIGN="RIGHT" HSPACE="20"> Une image peut être placée à droite du texte comme ceci. Cette fois-ci on choisit de créer un espace (calculé en pixels) entre le texte et l'image avec HSPACE (HSPACE veut dire Horizontal Space, il existe aussi VSPACE pour Vertical Space). Une autre astuce consiste à jouer sur la taille d'une image. Pour agrandir ou réduire une image , vous pouvez utiliser les instructions <WIDTH="valeur"> et <HEIGHT="valeur">. comme ici <IMG SRC="pic.gif" ALIGN="RIGHT" HSPACE="40" WIDTH="80" HEIGHT="80">
LANGAGE HTML Insérez du son et autres types de documents <EMBED SRC="objet_à_insérer"> L’objet peut être soit une séquence audio Wave, Midi ou une séquence vidéo : AVI, QuickTime, MPEG video/audio, etc... Pour les autres types de documents ( Word, Excel, Video...) la méthode normale est d'insérer un lien vers le nom du fichier en prenant bien garde de conserver l'extension traditionnelle dudit fichier ( .doc pour un fichier Word, .xls pour un document Excel…)
LANGAGE HTML L'insertion de liens hypertextes Pour créer un lien hypertexte, on utilise l'instruction "HREF" entre le <A> et le </A>, cette insertion se fait sous la forme suivante : <A HREF=". . . ."> …… </A> <A HREF="http://www.iga.ac.ma/"> Ceci est un lien vers le serveur de l’IGA </A> Voici le résultat : Ceci est un lien vers le serveur de l'IGA
LANGAGE HTML Quelques exemples de liens relatifs (par rapport à la page actuelle) <A HREF="test.html"> Lien vers le fichier test.html dans le même répertoire </A> <A HREF="c:\TPHTML\test.html"> Lien vers le fichier test.html dans le sous répertoire "TPHTML" </A> <A HREF="../test.html"> Lien vers le fichier test.html dans le répertoire supérieur </A>
LANGAGE HTML Quelques exemples de liens absolus (liens qui ont une adresse complète) <A HREF="http://www.iga.ac.ma/faq"> Lien vers la faq des étudiants (FAQ=Frequently Asked Questions) </A> <A HREF="http:// www.iga.ac.ma /programmes/prog2002.html"> Lien vers les programmes 2002 </A> Ces deux liens sont des liens vers des serveurs distants. <A HREF=" /programmes/prog2002.html "> Lien vers le même serveur en local MAIS obligatoirement à partir de la racine du serveur et dans le répertoire /programmes/ </A>
LANGAGE HTML Adresse Électronique : <A HREF="mailto:personne@sous-domaine.domaine.pays"> votre message S.V.P <A> Liens au sein d'une même page Vous pouvez aussi diviser votre page en plusieurs parties différentes; créer des liens vers ces différentes parties est possible. Pour cela nous utiliserons l'instruction <NAME> qui indiquera la destination du lien. Voici la syntaxe : <A NAME="test"> La syntaxe du lien à cliquer est <A HREF=#test> cliquer pour lancer le test</A>.
LANGAGE HTML Utiliser une image comme source de lien : Insérer simplement l'image entre l'instruction <A HREF="..."> et </A> : <A HREF="demo.htm"><IMG SRC="demo.gif"></A> <A HREF="demo.htm"><IMG BORDER="0" SRC="demopic.gif" ALIGN="LEFT" ALT="Image pour Demo"></A>