docLe langage « HTML »
download 
Plainte Transcription
Le langage « HTML »
http://peldoc.oise-picarde.com/ Le langage « HTML » Pour le réseau Point Cyb/PEL Animateur : Ludovic R. et Christophe R. Coordinateur : F.LAMBERT Introduction Définition : Le langage HTML (HyperText Markup Language) est un langage permettant d’écrire des documents hypertexte pour le web. C’est un langage très simple, basé sur des balises (tag). Les balises servent à mettre en forme le texte, à réaliser des liens vers d’autres pages, à insérer des images, etc… Comment s’exécute l’HTML ? Les pages HTML et tous les documents diffusés sur Internet sont stockés sur des serveurs web (hébergeur) puis affichés par les navigateurs (IE, Firefox…). Les serveurs web les plus connus sont Apache et IIS Structure d’une page HTML Les Balises : Le HTML est un langage utilisant des balises pour structurer et mettre en forme une page web. Une balise représente une commande HTML, à réaliser le plus souvent sur du texte. Une balise est entourée des caractères < et >. Les balises sont invisibles à l’affichage de la page, mais elles permettent de modifier l’apparence du texte, ou de réaliser une action. La plupart des balises doivent êtres ouvertes et fermées (sauf pour <br>). Exemple : <b>un petit mot en gras</b> : B comme Bold qui veut dire gras Les commandes HTML peuvent être écrites en minuscules ou en majuscules. Pour voir le code HTML d’un document : Menu Affichage – Code Source Structure d’une page HTML La structure de base : Un document HTML doit commencer par la balise <HTML> et se terminer par la balise fermante </HTML>. Un document HTML est composé d’une en-tête (HEAD) et d’un corps (BODY). Dans le corps, on trouve tout simplement le contenu de la page. Dans l’en-tête, on trouve le titre (TITLE), les METATAGS, les scripts… • L’extension d’un fichier rédigé en HTML doit être : .html ou .htm <META NAME="DESCRIPTION" CONTENT=“blabla“> Exemple de page HTML <html> <head> <title>Ma premiere page web</title> </head> <body> Voila ma page avec du texte en <b>gras</b> Voila un retour à la ligne </body> </html> Pour mettre en commentaires du texte : <!--texte--> Quiz n° n°1 Quelques balises de mise en forme Paragraphe Paragraph <p> </p> Gras Bold <b> </b> ou <strong> </strong> Italique Italic <i> </i> ou <em> </em> Souligné Underlined <u> </u> À la ligne Line Break <br> pas de balise de fin Centrer Centrer <center> </center> Il est possible d’utiliser plusieurs balises pour un même élément. Les balises de la POLICE Taille de police Font Face <font face= “police“> </font> valeur par défaut : Times New Roman Couleur de police <font color=“rrvvbb/blue“> </font> #0000FF #C0C0C0 #FF0000 #00FF00 #8000FF #FFFF00 #000000 Font Color Taille de police Font Size <font size=x> </font> x : entre 1 et 7, valeur par défaut : 3 Il est possible d’utiliser une seul fois la balise FONT et de lui attribuer plusieurs ATTRIBUTS. Exemple : <font size=2 face= “arial“ color= “blue“> </font> Alignement du texte Le tag <BLOCKQUOTE>...</BLOCKQUOTE> introduit une citation. Correspond « un peu » à la touche Tabulation (retrait vers la droite) Les tags <SUB>...</SUB> et <SUP>...</SUP> placent le texte respectivement en indice et en exposant. Pour aligner du texte, on peut utiliser l'attribut ALIGN ou le tag <CENTER>. Il existe une balise permettant d'aligner différents éléments. c'est le tag : <DIV align=left>...</DIV> <DIV align=center>...</DIV> <DIV align=right>...</DIV> <marquee>…</marquee> texte défilant <blink>…</blink> texte clignotant (Firefox seulement) Quiz n° n°2 Les titres et les listes Entêtes [Titres] <Hn></Hn> avec n=1 à 6 Afficher une entête de niveau n et sauter une ligne Liste à puces <UL></UL>Afficher le texte sous forme d'une liste à puces. Avec comme attributs (circle : o, square : ▪, ou disc : •) Liste numérotée <OL></OL>Afficher le texte sous forme d'une liste ordonnée. Avec comme attributs (1, A, a, I, i) Elément de liste <LI>Voici un élément de la liste Attribut d’une liste à puces : <ul type= “circle”> ou <ul circle> Attribut d’une liste numérotée : <ul type=A> Les caractères spéciaux Selon la version du système d’exploitation et du navigateur, il faut utiliser un langage spécifique pour les accents, caractères spéciaux… Ils sont facilement repérable car ils commencent par le signe & et se termine par un point virgule. Exemple : à pour à Les tableaux La définition de la structure d’un tableau est tout à fait comparable à celle des listes. On définit une balise de début de tableau, puis on décrit le tableau ligne par ligne, et enfin on indique la balise de fin du tableau. Une cellule peut contenir toute sorte d’élément : texte, liste, image, liens hypertexte, formulaires… Les balises : <table> début du tableau <tr> une ligne du tableau </tr> <td> une colonne </td> </table> fin du tableau Attributs de la balise <table> Bordures et espacements : Border : épaisseur en pixels du cadre extérieur Cellpadding : espace autour du texte Cellspacing : espace entre les cellules Bordercolor : couleur des bordures Bgcolor : couleur de fond du tableau Alignements des cellules : Dans les balises <tr> et <td> on peut trouver les attributs : - VALIGN qui permet d’obtenir un alignement du texte dans le sens vertical (valeurs : TOP, BOTTOM, MIDDLE) - ALIGN qui permet d’obtenir un alignement horizontal (valeurs : RIGHT, LEFT, CENTER) PS : Chaque cellule peut avoir une couleur/bordure différente Exemple de tableau <table border=“10” cellpading=“3” cellspadding=“20” bordercolor=blue bgcolor=“#00CCFF”> <tr> <td valign=“top” align=“center”>coucou</td> <td>Admirez le résultat</td> </tr> <tr> <td>Voila une deuxieme ligne</td> </tr> </table> Quiz n° n°3 Les images Pour insérer une image on utilise la balise IMG, en définissant le chemin de l’image avec l’attribut SRC=“…” Exemple : <img src=“images/bienvenue.gif”> ALIGN = définit la position (top, middle, bottom, left, right) La source de l’image : SRC = définit le chemin de l’image à insérer. Ce chemin peut être : - relatif (par rapport à la page), - absolu par rapport à la racine du site. - ou alors ce peut être son adresse internet (URL) Les images de fond avec l’attribut background dans la balise BODY : <body background=“image de fond”> … </body> L’image de fond se répète pour remplir la page Les liens Les liens vers un autre site : <a href=“http://unautresite.fr”>texte ou image</a> Les liens vers un document complet local (relatif ou absolu): <a href= “accueil.html”>texte ou image</a> Les liens vers une partie du document : <a name=“partie3”>Texte</a> = le point de branchement (non visible) <a href=“#partie3>texte du lien</a> = le “#” renvoi au point On définit la cible d’un lien avec l’attribut TARGET : _blank : affichage dans une nouvelle fenêtre _self : dans la même fenêtre (par défault) _top : dans tout le navigateur <a href="pel.jpg" target=_top><img src="pelmini.jpg"></a> Adresse e-mail : <a href=mailto:[email protected]>email</a> (&:pour plusieurs destinataires) Quiz n° n°4 et 5 Les frames Pour diviser l’écran on utilise les balises : <Frameset></frameset> remplace <body></body> Avec les attributs : rows = horizontales ou cols = verticales Ainsi que leurs pourcentages respectifs Puis on indique les pages vers lesquelles renvoit chaque frame : <frame src="nom de la page.html"> Les frames , l’attribut target L'utilisation de l'attribut target permet de diriger l'ouverture d'un document cible vers une fenêtre déterminée du navigateur. L'attribut : target="Cadre cible" définit la fenêtre dans laquelle la page cible doit s'afficher. Valeurs possibles : Description _blank : Ouverture de la page cible dans une nouvelle fenêtre _self : Ouverture de la page cible dans le cadre hôte _top : Ouverture de la page cible dans la fenêtre hôte Nom du cadre : Ouverture de la page cible dans le cadre portant le nom cité Exemple : <a href="adresse de la page cible" target="cadre cible">lien</a> Exemple <html> <head> </head> <frameset rows="30%,70%"> <frame src="nom de la page1.html" "name=" haut"> <frame src="nom de la page2.html" "name=" bas"> </frameset> </html>
