XHTML
Structure type dun document XHTML
Structure type dun document XHTML <?xml version="1.0" encoding="utf-8"?>
Structure type dun document XHTML <?xml version="1.0" encoding="utf-8"?> <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
Structure type dun document XHTML <?xml version="1.0" encoding="utf-8"?> <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"> </html>
Structure type dun document XHTML <?xml version="1.0" encoding="utf-8"?> <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> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>structure</title> </head> </html>
Structure type dun document XHTML <?xml version="1.0" encoding="utf-8"?> <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> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>structure</title> </head> <body> </body> </html>
Structure type dun document XHTML <DOCTYPE Ä > <html> <head> Ä Ä </head> <body> Ä Ä </body> </html>
Balise <balise> Ä </balise> <h1> </h1> Texte < balise / > < br / >
Attribut de balise <balise attribut ="valeur" > Ä </balise> <table id="titre"> Texte </table> < balise attribut = " valeur " / > < img src= " photo.jpg" / >
Les donn «±es Les textes Les URI Les couleurs d «±finies par un nom ou un nombre Les longueurs d «±finies en pixel ou en porcent Les types de contenus Les codages de caract «²res
CHARSETS
Les entit «±s HTML «à à «± é é «² è è «ç ç espace http://www.unicode.org/charts/
Les URI Les URL Çs absolues protocol://login:pwd@server:port/path/file.extension?q=req&q2=req2#signet Exemples http://www.ulg.ac.be/ http://www.ulg.ac.be/cms/c_5000/accueil http://maps.google.fr/maps?hl=fr&tab=wl https://pour:rire@db.ressource-toi.org
Les URL Çs relatives construite en d «±finissant un chemin depuis l Çadresse du fichier XHTML dans lequel cette URL est d «±finie../ correspond au dossier actuel../ correspond au dossier parent / correspond au dossier racine du site
Les couleurs
Les types de contenus text/html text/palin text/css application/javascript image/jpeg multipart/form-data contenu HTML texte sans mise en forme contenu CSS contenu JavaScript contenu JPEG cfr. formulaire
Encodage de caract «²res ISO-8859-1 ISO-latin-1 IBM819 windows-1252 utf-8 macroman
<--... --> Les commentaires
Balises dent «Žte : meta <meta http-equiv = " Ä " content = " Ä " /> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta http-equiv=""pragma" content=""no-cache"/> <meta name = " Ä " content = " Ä " /> <meta name=""keywords" content="" «±cologie, «±nergie"/> <meta name=""author" content=""bonjean Steve"/>
Balises dent «Žte : title Balise: < title> titre du document HTML Type : - Attributs : <title> Cours de XHTML </title>
Les textes et les listes
Les titres Balise: < h1>,<h2>, <h3>, < h4>, <h5>, < h6> Type : bloc Attributs : <h1> Le titre 1 </h1> <h2> Le titre 2 </h2> <h3> Le titre 3 </h3> <h4> Le titre 4 </h4> <h5> Le titre 5 </h5> <h6> Le titre 6 </h6> Le titre 1 Le titre 2 Le titre 3 Le titre 4 Le titre 5 Le titre 6
H1 a une valeur de 200 % par rapport «la valeur de body H2 a une valeur de 150 % par rapport «la valeur de body H3 a une valeur de 120 % par rapport «la valeur de body H4 a une valeur de 100 % par rapport «la valeur de body H5 a une valeur de 90 % par rapport «la valeur de body H6 a une valeur de 60 % par rapport «la valeur de body
Les paragraphes Balise: < p> Type : bloc Attributs : <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
La mise en «±vidence Balise: <em> Ä. </em> mise en «±vidence faible Type : en ligne Attributs : <em> Lorem ipsum... </em> Lorem ipsum... Balise : <strong> Ä. </strong> mise en «±vidence forte Type : en ligne Attributs : <strong> Lorem ipsum... </strong> Lorem ipsum...
Information sur l'auteur Balise : <address> Ä. </address> informations sur l'auteur Type : bloc Attributs : <address>lorem ipsum...</address> Lorem ipsum...
Retour «la ligne et trait Balise: <br / > retour «la ligne suivante Type : en-ligne Attributs : Lorem <br/> ipsum... Lorem ipsum... Balise: <hr / > trait horizontal Type : bloc Attributs : Lorem <hr/> ipsum... Lorem ipsum...
Acronyme, abr «±viation et d «±finition Balise: <acronym> Ä. </acronym> acronyme Type : en ligne Attributs : title = Ä <acronym title="institut National dassurance Maladie Invalidit «±"> INAMI </acronym> INAMI Balise : <abbr> Ä. </abbr> abr «±viation Type : en ligne Attributs :title = Ä <abbr title="et caetera"> etc.</abbr> Balise : <dfn> Ä. </dfn> d «±finition Type : en ligne Attributs :title = Ä <dfn> Lorem ipsum... <dfn> etc. Lorem ipsum...
Les citations Balise: <q> Ä. </q> citation courte Type : en ligne Attributs : <q>lorem ipsum...</q> "Lorem ipsum Ä" Balise : <cite> Ä. </cite> citation moyenne Type : en ligne Attributs : Lorem ipsum... <cite>lorem ipsum...</cite> Balise : <blockquote> Ä. </blockquote> citation longue Type : bloc Attributs : <blockquote>lorem ipsum...</blockquote> Lorem ipsum...
Code, sortie, saisie clavier Balise: <code> Ä. </code> code informatique Type : en ligne Attributs : <code>lorem ipsum...</code> Balise : <samp> Ä. </samp> exemple de sortie Type : en ligne Attributs : <samp>lorem ipsum...</samp> Balise : <kbd> Ä. </kbd> saisie clavier Type : en ligne Attributs : Lorem ipsum... Lorem ipsum... <kbd>lorem ipsum...</kbd> Lorem ipsum...
Insertion, suppression Balise: <ins> Ä. </ins> texte ins «±r «± Type : en ligne Attributs : <ins> Lorem ipsum... </ins> Lorem ipsum... Balise : <del> Ä. </del> texte supprim «± Type : en ligne Attributs : <del> Lorem ipsum... </del> Lorem ipsum...
Indice, exposant Balise: <sub> Ä. </sub> texte en indice Type : en ligne Attributs : <sub> Lorem ipsum... </sub> Lorem ipsum... Balise : <sup> Ä. </sup> texte en exposant Type : en ligne Attributs : <sup> Lorem ipsum... </sup> Lorem ipsum...
Les listes ordonn «±es (1) Balise: <ol> liste ordonn «±es Type : bloc Attributs :type, start Balise: <li> «±l «±ment d'une liste Type : bloc Attributs : value <ol> <li>el «±ment 1</li> <li>el «±ment 2</li> </ol> 1. El «±ment 1 2. El «±ment 2
Les listes ordonn «±es (2) <ol type="a" start="3"> <li>el «±ment 1</li> <li>el «±ment 2</li> </ol> C. El «±ment 1 D. El «±ment 2 <ol> <li value="34">el «±ment 1</li> <li value="52">el «±ment 2</li> <li>el «±ment 3</li> </ol> 34. El «±ment 1 52. El «±ment 2 53. El «±ment 3.
Les listes non-ordonn «±es Balise: <ul> Type : bloc Attributs :type <ul> <li>el «±ment 1</li> <li>el «±ment 2</li> </ul> <ul type="circle"> <li>el «±ment 1</li> <li>el «±ment 2</li> </ul> El «±ment 1 El «±ment 2 o El «±ment 1 o El «±ment 2
Les listes de d «±finitions Balise: <dl> Type : bloc Attributs : Balise: <dt> terme «d «±finir Type : bloc Attributs : Balise: <dd> d «±finition Type : bloc Attributs : <dl> <dt>html</dt> <dd>hypertext Markup Language</dd> </dl> HTML HyperText Markup Language
Les images
Les images (1) Balise: <image/> Type : en-ligne Attributs : src, alt, usemap, border,width,height <img src="lion.jpg" alt="photo de lion" border="1" width="200" />
Les images (2) Balise: <map> Type : - Attributs : shape, coords, href Balise: <area/> Type : - Attributs : shape, coords, href, title, alt <img src="belgique.gif" alt="photo de Belgique" usemap="#carte" border="0" /> <map name="carte"> <area shape="rect" coords="221,125,250,157" href="bruxelles.html"/> </map>
Les images (3) Image map avec Photoshop CS2 http://www.golumfr.com/photshp/imagemap.html Gimp http://www.infetech.com/article.php3?id_article=159
Les liens
Les liens (1) Balise: <a> Type : en-ligne Attributs : href, name, target <a href="http://www.apple.be">visitez le site d'apple</a> <a href="pageb.html">visitez le page B</a>
Les liens (2) <a href="#suite">aller «la suite sur la m «Žme page </a>...... <a id="suite"/> Ceci est la suite <a href="#suite">aller «la suite sur la m «Žme page </a>...... <h1 id="suite">ceci est la suite</h1>
Les tableaux
Les tableaux (1) Balise: <table> Type : bloc Attributs :summary, border, width, cellspacing, cellpadding, frame, rules Balise: <tr> ligne d'un tableau Type : bloc Attributs : Balise: <th> cellule de rubrique Type : bloc Attributs : rowspan, colspan, width, height, algn, valign Balise: <td> cellule d'un tableau Type : bloc Attributs : rowspan, colspan, width, height, align, valign
Les tableaux (2) <table border="1px"> <tr> <td>contenu de la cellule 1</td> <td>contenu de la cellule 2</td> </tr> <tr> <td>contenu de la cellule 3</td> <td>contenu de la cellule 4</td> </tr> </table>
Les tableaux (3) <table border="1px" width="300px"> <tr> <td>contenu de la cellule 1</td> <td>contenu de la cellule 2</td> </tr> <tr> <td>contenu de la cellule 3</td> <td>contenu de la cellule 4</td> </tr> </table>
Les tableaux (4)
Les tableaux (5) <table border="1px" width="400px"> <tr> <th>titre 1</th> <th>titre 2</th> </tr> <tr> <td>contenu de la cellule 1</td> <td>contenu de la cellule 2</td> </tr> </table>
Balise: <caption> l «±gende de tableau Type : bloc Attributs : Les tableaux (6)
Les tableaux (7) <table border="1px" width="400px"> <caption>l «±gende du tableau</caption> <tr> <th>titre 1</th> <th>titre 2</th> </tr> <tr> <td>contenu de la cellule 1</td> <td>contenu de la cellule 2</td> </tr> </table>
Les tableaux (8) <table cellspacing="10px" cellpadding="20px" border="1px" width="500px"> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table>
Les tableaux (9) <table border="1px" width="400px"> <caption>l «±gende du tableau</caption> <tr> <th colspan="2">titre 1</th> </tr> <tr> <td>contenu de la cellule 1</td> <td>contenu de la cellule 2</td> </tr> </table>
Les tableaux (10) Balise: <thead> en-t «Žte du tableau Type : - Attributs Balise: <tbody> coprs du tablea Type : - Attributs : Balise: <tfoot> pied du tableau Type : - Attributs :
Les tableaux (11) <table border="1px" width="400px"> <caption>l «±gende du tableau</caption> <thead> <tr> <th>titre 1</th> <th>titre 2</th> </tr> <thead> <tbody> <tr> <td>contenu de la cellule 1</td> <td>contenu de la cellule 2</td> </tr> </tbody> </table>
Balise: <col> en-t «Žte du tableau Type : - Attributs span width Les tableaux (12)
Les tableaux (13) <table border="1px" width="500px"> <col span="2" width="100px"/> <tr> <td>cellule 1</td> <td>cellule 2</td> <td>cellule 3</td> </tr> <tr> <td>cellule 4</td> <td>cellule 5</td> <td>cellule 6</td> </tr> </table>
Les formulaires
Les formulaires (1) Balise: < form> Type : bloc Attributs : action, method, enctype <form action="http://127.0.0.1/test.php" method="get" enctype="application/x-www-form-urlencoded" >......... </form> <form action="http://127.0.0.1/test.php" method="post" enctype="multipart/form-data" >......... </form>
Les formulaires (2) Balise: < input type="text" /> Type : en)ligne Attributs : name, size, maxlength, value <form action="http://127.0.0.1/test.php" method="post" > <p> <input name="pr «±nom" type="text" value="blabla" size="15" maxlength="20"/> </p> </form>
Les formulaires (3) Balise: < input type="submit" /> Type : en)ligne Attributs : name, value, id <form action="http://127.0.0.1/test.php" method="post" > <label>entrez votre pr «±nom </label> <input name="pr «±nom" type="text" size="15" /> <br/><br/> <input type="submit" value="envoyer ces donn «±es"> </form>
Les formulaires (4) Balise: < input type="password" /> Type : en)ligne Attributs : name, size, maxlength, value <form action="http://127.0.0.1/test.php" method="post" > <p> <input name="mp" type="password" value="blabla" size="15" maxlength="20"/> </p> </form>
Les formulaires (5) Balise: < label> Type : en)ligne Attributs : for <form action="http://127.0.0.1/test.php" method="post" > <p> <label>entrez votre pr «±nom </label> <input name="pr «±nom" type="text" value="blabla" size="15" maxlength="20"/> </p> </form>
Les formulaires (6) Balise: < input type="radio" /> Type : en)ligne Attributs : name, checked, value, id <form action="http://127.0.0.1/test.php" method="post" > <p> <label > Cliquez ici si vous «Žtes abbon «± </label> <input name="aonnn «±" type="radio" value="ab" /> </p> </form>
Les formulaires (7) <form action="http://127.0.0.1/test.php" method="post" > <p> <label for= "ab-bouton"> Cliquez ici si vous «Žtes abbon «± </label> <input name="aonnn «±" type="radio" value="ab" id="ab-bouton"/> </p> </form>
Les formulaires (8) <form action="http://127.0.0.1/test.php" method="post" > <label> Sexe </label> <br /> <input name="sexe" type="radio" value="homme" id="h-bouton"/> <label for= "h-bouton"> homme </label> <br /> <input name="sexe" type="radio" value="femme" id="f-bouton"/> <label for= "f-bouton"> femme </label> <br /> </form>
Les formulaires (9) Balise: < input type="checkbox" /> Type : en)ligne Attributs : name, checked, value, id <form action="http://127.0.0.1/test.php" method="post" > <label> Sous quel type d'os travaillez-vous? </label> <br /> <input name="windows" type="checkbox" value="oui" id="w-bouton" /> <label for="w-bouton"> Windows </label> <br /> <input name="macos" type="checkbox" value="oui" id="m-bouton" /> <label for="m-bouton"> MacOS </label> <br /> <input name="linux" type="checkbox" value="oui" id="l-bouton" /> <label for="l-bouton"> Linux </label> <br /> </form>
Les formulaires (10) Balise: < input type="reset" /> Type : en-ligne Attributs : name, value Balise: < input type="button" /> Type : en-ligne Attributs :
Les formulaires (11) Balise: < select> Type : bloc Attributs : name, size, multiple Balise: < optgroup> Type : - Attributs : label Balise: < option> Type : - Attributs : selected, value
Les formulaires (12) <form action="http://127.0.0.1/test.php" method="post" > <select name="pays" > <optgroup label="europe"> <option> Belgique </option> <option> France </option> </optgroup> <optgroup label="asie"> <option> Chine </option> <option> Japon </option> </optgroup> </select> </form>
Les formulaires (13) Balise: < textarea> Type : en-ligne Attributs : name, rows, cols <form action="http://127.0.0.1/test.php" method="post" > <label>commentaires </label><br/> <textarea name="commentaires" rows="5" cols="40"> Inscrivez notre commantaire ici </textarea> </form>
Les formulaires (14) Balise: < input type="file" /> Type : en-ligne Attributs : name <form action="http://127.0.0.1/test.php" method="post" enctype="multipart/form-data" > <label>s «±lectionner sur votre disque une photo «envoyer </label> <input type="file" name="photo" /> </form>
Les formulaires (15) Balise: < fieldset> Type : bloc Attributs : Balise: < legend > Type : bloc Attributs :
Les formulaires (16) <form action="http://127.0.0.1/test.php" method="post" > <fieldset> <legend> Donn «±es personnelles </legend> <label>nom </label> <input name="nom" type="text" size="25" maxlength="40"/> <br /> <label>pr «±nom </label> <input name="pr «±nom" type="text" size="25" maxlength="40" /> <br /> </fieldset> </form>
Les formulaires (17) Attribut tabindex Balise a, area, button, input, object, select, textarea. Attribut disabled Balise input, select, textarea
Les objets
Les objets (1) Balise: <obect> Type : en-ligne Attributs : type, data, classid, codebasse <object type="application/x-shockwave-flash" data ="anim.swf" width="600" height ="400"> <param name="movie" value="anim.swf"/> </object> <object type="video/mpeg" data="test.mpg" width="320" height="255"> <param name="src" value="test.mpg"> <param name="autoplay" value="false"> <param name="autostart" value="0"> </object>
Les objets (2) <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=9,0,0,0" width="550" height="400" id="anim" align="middle"> <param name="allowscriptaccess" value="samedomain" /> <param name="allowfullscreen" value="false" /> <param name="movie" value="anim.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <embed src="anim.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="anim" align="middle" allowscriptaccess="samedomain" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>
Les objets (3) Mpeg sur le Web http://joliclic.free.fr/html/object-tag/en/object-video.html
Les cadres
Les cadres (1) Balise: <frameset> Type : Attributs : rows, cols Balise: <frame/> Type : - Attributs : src, frameborder, scrolling, marginwidth, marginheight <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> </head> <frameset cols="50%,50%"> <frame name="..." src="..." /> <frame name="..." src="..." /> </frameset> </html>
Les cadres (2)
Les cadres (3) <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>les cardes</title> </head> <frameset cols="250,*" > <frame name="gauche" src="..."/> <frameset rows="150,*" > <frame name="haut" src="... /> <frame name="bas" src="..."/> </frameset> </frameset> </html>
Les cadres (4)
Balises g «±n «±riques Balise: <div>... </div> Type : bloc Attributs : Balise: <span>... </span> Type : en-ligne Attributs :
Balise : link Balise: < link /> Type : - Attributs rel, type, href, meta <link rel="stylesheet" type="text/css" href="monstyle.css" />
Balise : style Balise: < style> Type : - Attributs : type, media <style type = "text/css" media = ""screen" >... </style>
Balise : script Balise: <script> Type : - Attributs type, src <script type = "text/javascript">... </script> <script type="text/javascript" src=" " fonctions.js" />