docChapitre 04 : Le langage HTML
download 
Plainte Transcription
Chapitre 04 : Le langage HTML
Le langage HTML Document HTML (« Hyper-Text Markup Language ») Un document HTML est un hypertexte décrit à l'aide du langage HTML. Un hypertexte est un texte contenant des hyperliens. Un hyperlien est un élément particulier (mot/image) sur lequel on clique pour se déplacer vers : un autre emplacement du document, un autre document sur le même site, un document sur un autre site WEB, un autre service Internet (mail, ftp… ) HTML Exemple Fichier html interprété brut <html> <head> <title>ma premiere page</title> <meta http-equiv="Content-Type" content="text/html" /> </head> <body> <h1>Page Web</h1> <p>Ma première page.</p> </body> </html> Le langage HTML Le langage HTML permet la : mise en forme de documents : polices, styles.. Tableaux,listes,… création d'hyperliens insertion d'images insertion de composants multimedia : son, vidéo... définition de formulaires de saisie . …….. Le Web et HTML HTML est un langage informatique dont le principe de base repose sur l’utilisation de balises (tags ) pour délimiter les différents éléments d’un document. Ces balises ont la forme <…> et </…> Exemple : <B> Mon texte </B> (pour mettre en gras) <I> Autre texte </I> (pour mettre en italique) On peut combiner ces balises : <B> <I> Texte en gras et en italique </I> </B> Éléments de base d’une page HTML <HTML> Définit le contenu HTML d'un document Nécessite un marqueur de fin. Règle : <HTML>.....</HTML> <HEAD> Définit l'en-tête d'un document HTML Nécessite un marqueur de fin. Règle : <HEAD>.....</HEAD> <TITLE> Définit le titre d'un document HTML Nécessite un marqueur de fin. Règle : <TITLE>.....</TITLE> <BODY> Définit le corps du document HTML Nécessite un marqueur de fin. Règle : <BODY>.....</BODY> Exemple d’une base de page HTML <HTML> <HEAD> <TITLE> Titre de votre page </TITLE> </HEAD> <BODY> Insérer vos textes, images, formulaires, etc. ici </BODY> </HTML> Retour à la ligne : <BR> <HTML> <HEAD><TITLE> saut de ligne </TITLE> </HEAD> <BODY> la 1ére ligne encore la 1ère ligne toujours la 1 ère ligne <BR> la 2ème </BODY> </HTML> ligne <BR> la 3ème ligne Commentaires <html> <head> <title>Commentaires </title> </head> <body> <!-- Ceci est un commentaire inséré dans le code mais invisible pendant la navigation --> </body> </html> Les paragraphes <P> </P> Les balises <P> et </P> définissent le début et la fin d’un paragraphe Le paramètre align indique l’alignement du paragraph (left, right, center). Les paragraphes <P> </P> <HTML> <HEAD> <TITLE> Paragraphe </TITLE> </HEAD> <BODY> <p> Ma première ligne. </p> <p align="center"> Cette phrase est centrée sur la page. </p> <p align="right"> Celle-ci est alignée à droite. </p> <p align="left"> Par défaut, l'alignement se fait à gauche. </p> </BODY> </HTML> Mise en forme de texte • Gras : <B> et </B> (pour Bold) ou <STRONG> et </ STRONG > • Italique : <I> et </I> •Souligné : <U> et </U> (pour Underlined) • Police plus grande : <BIG> et </BIG> • Police plus petite : <SMALL> et </SMALL> • Texte barré : <STRIKE> et </STRIKE> ou <S> et </S> • Indice : <SUB> et </SUB> • Exposant : <SUP> et </SUP> Mise en forme <html> <head><title> Mise en form </title></head> <body > <B> c'est Gras </B> <br> <I> c'est Italique </I> <br> <U> Souligné </U> <br> <BIG> Police plus grande </BIG> <br> <SMALL> Police plus petite </SMALL> <br> <STRIKE> Texte barré </STRIKE> <br> A<SUB> Indice </SUB> <br> A<SUP> Exposant </SUP> </body> </html> Mise en forme de texte (suite) Police de caractères, taille, et couleur : <FONT FACE="Arial" SIZE="5" COLOR="red"> </FONT> et avec la police pouvant être : Arial, Arial Black, Comic sans MS, Courier New, Impact, Times new roman, Verdana, etc. avec size de 1 à 7, et color étant une couleur (en anglais) ou un code RGB (#004422). Exemple <html> <head> <title> Mise en form du texte </title></head> <body > <FONT FACE="Arial" SIZE="5" COLOR="red"> Un texte Arial Rouge </FONT> <br> <FONT FACE="times" SIZE="3" Un texte Time Times new roman </FONT> </body> </html> COLOR="blue"> Mise en forme de texte les titres Il y a 6 niveaux de titres. <H1> et </H1> grand <H2> et </H2> <H3> et </H3> ……….. jusqu’à <H6> et </H6> (petit) Exemple <html> <head> <title> Titres <body > <H1> Titre 1 </H1> <H2> Titre 2 </H2> <H3> Titre 3 </H3> <H4> Titre 4 </H4> <H5> Titre 5 </H5> <H6> Titre 6 </H6> </body> </html> </title> </head> Centrer du texte Pour centrer un/des élément(s) : <CENTER> et </ CENTER> Ligne horizontale : <HR> (Horizontal Rulers) Exemple : <HR SIZE=3 WIDTH=50% ALIGN=RIGHT COLOR=BLACK> Listes ordonnées <OL> <LI> Valeur1 </LI> <LI> Valeur2 </LI> <LI> Valeur3 </LI> </OL> On peut préciser le type (A, a, 1, i, I). Exemple : <OL TYPE="A"> On peut faire démarrer à une valeur précise. Exemple : <OL START=2000> Listes non ordonnées <UL> <LI> Valeur1 </LI> <LI> Valeur2 </LI> <LI> Valeur3 </LI> </UL> On peut préciser le type de « puces » (disc, circle, square) Exemple : format.html <html> <head> <title> Format Open source </title></head> <body bgcolor="#00FF55"> <h2>Quelques formats de données libres</h2> <p>L'utilisation de ces formats n'est pas limitée par l'existence de brevets connus.</p> <ul type="square"> <li> Audio : Vorbis, FLAC</li> <li> Compression : gzip, bzip2, lzma </li> <li> Image : PNG, SVG, MNG</li> <li> Tableur : OpenOffice.org (.ods)</li> <li> Texte : ASCII (.txt) </li> <li> Texte formaté : TeX, OpenOffice.org (.odt) </li> <li> Video : Matroska (.mkv), XviD, Theora </li> </ul> </body> </html> Exemple format.html Les images L’insertion d’une image dans une page Web se fait grâce à la balise <IMG SRC="nom du fichier"> (IMG SRC pour Image Source). L’attribut ALT permet de décrire l’image. Cette description est visible lorsque l’on passe sur l’image. L’argument ALIGN définit l’alignement de l’image sur la page. Exemple : <img src= ‘images/logo.png’ alt=‘Tux fan’ > Images <img src="image.jpg" /> <img src="image.gif" /> <img src="image.png" /> JPEG : avec perte, pour les photos GIF : sans perte, compression LZW, pour les illustrations PNG : sans perte, plus de couleurs. Exemple : header.html <html> <head><title>Tux Fan</title></head> <body bgcolor="#FFFFFF"> <img src="images/logo.png" alt="Entete de site"> </body> </html> Les tableaux < TABLE> <TABLE Border=N Align="center"> <TR> <TD>Donnée N°1</TD> <TD> Donnée N°2</TD> </TR> </TABLE> <TR> correspond à une ligne du tableau <TD> correspond à une donnée (une cellule) du tableau Exemple : menu.html <html> <head> <title>Menu</title> </head> <body bgcolor="#FFFFFF"> <TABLE border=1 ALIGN="center"> <TR> <TD>Home </TD> </TR> <TR> <TD>News </TD> </TR> <TR> <TD>Links </TD> </TR> <TR> <TD>Contact</TD> </TR> </TABLE> </body> </html> Exemple : initiative.html <TABLE border=0 ALIGN="center"> <TR> <TD width=20% ><h2>Tux Fan</h2></TD> <TD><b>Le site des fanatiques de Tux</b></TD> </TR> <TR> <TD width=20% > Home<br> News<br> Links<br> Contact<br> </TD> <TD> L' Open Source Initiative est une organisation dévouée à la promotion du logiciel Open Source. Elle a été créée par Bruce Perens et Eric S. Raymond. </TD> </TR> </TABLE> initiative.html Les tableaux (avec en-tête) Les balises <TH> et </TH> permettent de spécifier un en-tête Exemple : <TR> <TH> En-tête 1 </TH> <TH>En-tête 2 </TH> </TR> Les hyperliens La balise <A> </A> sert à définir un hyperlien (une ancre hypertextuelle) dans une page Web. Format : <A HREF= "Chemin du document"> Texte qui sera souligné </A> Exemples : <A HREF="http://www.openxnet.com.dz">Openxnet</A> <A HREF="formation.html"> Formation </A> Exemple : link.html <h2> Open Source </h2> <a href="format.html" >Formats libres</a> <br> <a href="initiative.html"> Open source initiative </a><br> <a href="link.html" >links</a><br> <a href="contact.html">contact</a><br> <a href="http://www.google.com"> search on google </a><br> Les hyperliens Pour qu’une image soit un hyperlien, il suffit d’écrire : <A HREF="page cible"> <IMG SRC= "fichier image"> </A> Exemples : <A HREF="http://www.linux.org"> <IMG SRC="tux.gif"> </A> XHTML/ HTML XHTML : du "HTML propre" XHTML 1.0 (Second Edition) a reformulation of HTML 4 in XML 1.0 Premières différences de XHTML : - mettre un doctype en haut du fichier - fermer toutes les balises : <b> … </b> - pour les balises simples, les fermer "de l'intérieur" (comme <br /> ou <img />), - toutes les balises en minuscules, - (!) Vision un peu réductrice les arguments entre guillemets, XHTML XHTML est le successeur de HTML XHTML se base sur la syntaxe définie par XML Le ‘X’ dans XHTML signifie «extensible » Devenu standard pour assurer la compatibilité entre navigateurs (Firefox, Internet Explorer, Mozilla, …) Pour vérifier la validité d'une page, le W3C a mis en place un validateur qui comptabilise les erreurs et donne les moyens de les corriger : http://validator.w3.org/ HTML/XHTML : Hello World <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Votre titre</title> </head> <body> <p>Bonjour tout le monde!</p> </body> </html>
