HTML-CSS-XHTML

Document Sample
HTML-CSS-XHTML Powered By Docstoc
					HTML-CSS-XHTML




                 1
• HTML: HyperText Markup Language
  (Markup  balisage). Sert à structurer les
  pages
                                    html4.01
• XHTML: eXtensible HTML
                                   xhtml 1.0
• CSS: Cascading Style Sheets. Sert a
  gérer la présentation du HTML
                                           2
                            ex1.html
<html>
<head>
   <title>M2 Protocoles Internet </title>
</head>
<body>
   <h1> Ceci est le début du cours, avec un grand titre</h1>
   <p> Pour faire le premier paragraphe avec du texte et autre</p>
   <h2> Ceci est un titre de niveau inférieur il y a 6 niveaux </h2>
   <p> Pour faire le second paragraphe avec une image
          <img src=« vache.gif"> et autre</p>
   <p> Pour faire le <em>troisième paragraphe</em> avec du texte.
   Si le texte dépasse la ligne ce n'est pas les retours à la ligne du
   texte source qui sont conservés. De nouveaux retours à la ligne seront
   insérés là où le navigateur considérera que c'est nécessaire.</p>
</body>
</html>

                                                                            3
<html>
                                                    ex2.html
<head>
     <title>M2 Protocoles Internet exemple2 </title>
     <style type="text/css">
                body {          background-color: #d2b48c;
                                margin-left: 20%;
                                margin-right: 20%;
                                font-family: sans-serif;
                }
     </style>




</head>
<html>
<head>
      <title>M2 Protocoles Internet </title>
</head>
<body>
      <h1> Ceci est le début du cours, avec un grand titre</h1>
      <p> Pour faire le premier paragraphe avec du texte et autre</p>
      <h2> Ceci est un titre de niveau inférieur il y a 6 niveaux </h2>
      <p> Pour faire le second paragraphe avec une image
                  <img src=« vache.gif"> et autre</p>
      <p> Pour faire le <em>troisième paragraphe</em> avec du texte.
      Si le texte dépasse la ligne ce n'est pas les retours à la ligne du
      texte source qui sont conservés. De nouveaux retours à la ligne seront
      insérés là où le navigateur considérera que c'est nécessaire.</p>
</body>
</html>


                                                                               4
                   http://validator.w3.org
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
      <title>M2 Protocoles Internet: exemple 2 </title>
      <style type="text/css">….
      </style>
</head>
<body>
      <h1> Ceci est le début du cours, avec un grand titre</h1>
      <p> Pour faire le premier paragraphe avec du texte et autre</p>
      <h2> Ceci est un titre de niveau inférieur il y a 6 niveaux </h2>
      <p> Pour faire le second paragraphe avec une image
                <img src="vache.gif" alt=" une vache"> et autre</p>
      <p> Pour faire le <em>troisième paragraphe</em> avec du texte.
      Si le texte dépasse la ligne ce n'est pas les retours à la ligne du
      texte source qui sont conservés. De nouveaux retours à la ligne seront
      insérés là où le navigateur considérera que c'est nécessaire.</p>
      <p> <img src="valid-html401.png" alt="Valid HTML 4.01 Strict" height="31" width="88"></p>
      <p> <img src="rien.png" alt="Valide" height="31" width="88"></p>
</body>
</html>
                                                                                            ex2VALID.html Certif

                                                                                                              5
     Construction d’une page
Elément en-ligne, élément de bloc
  – Chaque élément de bloc s’affiche toujours
    comme si il y avait un saut de ligne avant et
    après
  – Un élément en ligne s’affiche dans le cours du
    texte de la page




                                                 6
               Elément de bloc
•   <h1>… </h1> titre (6 niveaux)
•   <p>…</p> paragraphe
•   <div>…</div>
•   Listes:
    – <ol>…</ol> liste numérotée
    – <ul>…</ul> liste non numérotée
       <li>…</li> pour un élément de liste
    – <dl>…</dl> liste de définitions (balise titre dt,
      description dd)
                                                          7
                          ex4.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-
    8859-1" >
    <title>M2 Protocoles Internet </title>
    <style type="text/css">
          body {background-color: #d2b48c;
                 margin-left: 20%;
                 margin-right: 20%;
                 font-family: sans-serif;
          }
    </style>
</head>
                                                                       8
                                ex4.html
<body>
<h1>Cours HTML</h1>
    <p>
En HTML il y a des balises, la première est &lt; html&gt;.
Avec &amp; suivi d'une entité vous aurez tous les symboles spéciaux.
Pour consulter les entités, aller voir <a href="http://www.unicode.org/charts">
    www.unicode.org/charts </a>.
          <ol>
                    <li>Pour renvoyer vers le <a href="ex1.html"> premier exemple</a></li>
                    <li>Pour renvoyer vers le <a href="ex2.html">second exemple</a> </li>
                    <li>Pour renvoyer vers le <a href="ex3.html"> troisième exemple</a></li>
          </ol>
          <hr>
          <dl>
                    <dt> un autre type liste</dt>
                              <dd> avec indentation des éléments</dd>
                    <dt> le titre </dt>
                              <dd> et sa description</dd>
          </dl>
    </p>
</body>
</html>




                                                                                      9
                                      espacement




Maintenant il y a le contenu qui
occupe toute cette partie. C’est du
texte certaines parties peuvent              bordure
être emphasées, etc….



                                             marge

 Contenu

                                                   10
            Elément de ligne
•   <em> …</em> mis en emphase
•   <a….> </a> hypertexte
•   <img…> insertion d’une image
•   <br> saut de ligne
•   <hr> ligne horizontale
•   <span>...</span> structuration


                                     11
                       Attributs
Permettent de donner à un élément des informations
  supplémentaires
Ex: ex5.html
• Pour les listes:
      <ol start="3">
• Pour l’élément ancre <a>
   <a href="ex2.html" title=" M2 protocoles Internet
     exemple 2" >
   <a target="_blank" href="ex3.html">
   <a id="debut" >
   <a href="#debut" >          (<a href="ref#debut" >)




                                                         12
• <a href="ex1.html">
• <a href="../ex.html#debut">
• <a
  href="http://www.liafa.jussieu.fr/~
  cd"> ~cd/public_html/index.html
• <a
  href="http://www.liafa.jussieu.fr/~
  cd/Master_SRI.html">
                                  13
<!DOCTYPE….
<body>
<a id="debut"></a>
<h1>Cours HTML</h1>
   <p>
         En HTML il y a des balises, la première est &lt; html&gt;.
         Avec &amp; suivi d'une entité vous aurez tous les symboles
         spéciaux. Pour consulter les entités, aller voir
         <a href="http://www.unicode.org/charts">
         www.unicode.org/charts </a>.
   <ol start="3">
         <li>Pour renvoyer vers le <a href="ex1.html"> premier exemple</a>
   </li>
         <li>Pour renvoyer vers le <a href="ex2.html" title=" M2 protocoles
   Internet exemple 2" >second exemple</a> </li>
         <li>Pour renvoyer vers le <a target="_blank" href="ex3.html">
   troisième exemple</a> dans une nouvelle fenêtre </li>
   </ol>
                                                                       14
   …
<hr>
   <p><strong> La même chose en gras pour avoir un long texte.
   …
   </strong></p>
   <p> Pour revenir <a href="#debut">au début </a>
   </p>

</body>

</html>




                                                                 15
                                      XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>M2 Protocoles Internet </title>
     <style type="text/css">
             body {background-color: #d2b48c;
                        margin-left: 20%;
                        margin-right: 20%;
                        font-family: sans-serif;
             }
     </style>
</head>
<body>
…
</body>
</html>
                                                                                  Ex6.html



                                                                                       16
                          http://validator.w3.org
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

      <title>M2 Protocoles Internet: exemple 2 </title>
      <style type="text/css">
                   body {background-color: #d2b48c;
                                     margin-left: 20%;
                                     margin-right: 20%;
                                     font-family: sans-serif;
                   }
      </style>
</head>
<body>
      <h1> Ceci est le début du cours, avec un grand titre</h1>
      <p> Pour faire le premier paragraphe avec du texte et autre</p>
      <h2> Ceci est un titre de niveau inférieur il y a 6 niveaux </h2>
      <p> Pour faire le second paragraphe avec une image
                   <img src="matete.gif" alt="ma tête"/> et autre</p>
      <p> Pour faire le <em>troisième paragraphe</em> avec du texte.
      Si le texte dépasse la ligne ce n'est pas les retours à la ligne du
      texte source qui sont conservés. De nouveaux retours à la ligne seront
      insérés là où le navigateur considérera que c'est nécessaire.</p>
      <p> <img src="valid-xhtml10.png" alt="Valid HTML 4.01 Strict" height="31" width="88"/></p>
      <p> <img src="rien.png" alt="Valide" height="31" width="88"/></p>
</body>
</html>
                                                                                                   ex2VALIDX.html CertifX




                                                                                                                     17
                  CSS

•   p     {background-color: yellow;
          }
• h1,h2   {font-family:times;
          }




                                       18
<body>
<h1>Cours </h1>
<h2> HTML </h2>
<p>
    En HTML il y a des balises, la première est &lt; html&gt;.
    Avec &amp; suivi d'une <em> entité </em> vous aurez tous les symboles
    spéciaux.
    Pour consulter les entités, aller voir <a
    href="http://www.unicode.org/charts"> www.unicode.org/charts </a>.

</p>
<h2> CSS </h2>
<p>
    En CSS, il y a de nombreux parametres possibles. Il y a <em>
    héritage</em>
    des propriétés suivant la strucyure du document
</p>
</body>
</html>




                                                                            19
              html


              body


h1   h2   p          h2   p

              em          em




                               20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>M2 Protocoles Internet </title>
    <style type="text/css">
          body {background-color: #d2b48c;
                    color: red;
                    margin-left: 20%;
                    margin-right: 20%;
                    font-family: sans-serif;
          }
          p         {background-color: yellow;
          }
          em        {color : black;
          }
          h1,h2 {font-family:times;
          }

    </style>
</head>




                                                                                 21
• On peut créer une feuille de style valable pour plusieurs
  documents.
• Attention c’est du css pas du html pas <style>
• Ex:
      body {background-color: #d2b48c;
             color: red;
             margin-left: 20%;
                                                mafeuille.css
             margin-right: 20%;
             font-family: sans-serif;}
      p      {background-color: yellow;}
      em     {color : black;}
      h1,h2 {font-family:times;}

                                                            22
Inclusion dans un document (X)HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-
    8859-1" />
    <title>M2 Protocoles Internet </title>
    <link type="text/css" rel="stylesheet" href="mafeuille.css" />
</head>
<body>                                                             Ex8.html
….
</body>
</html>
                                                                     23
Sélecteur: particulariser le style des
   éléments (attribut class et id)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>M2 Protocoles Internet </title>
      <link type="text/css" rel="stylesheet" href="mafeuille2.css" />
</head>
<body>
<h1 class="titre"> Cours </h1>
<h2 class="titre"> HTML </h2>
<p>
      En HTML il y a des balises, la première est &lt; html&gt;.
      Avec &amp; suivi d'une <em> entité </em> vous aurez tous les symboles spéciaux.
      Pour consulter les entités, aller voir <a href="http://www.unicode.org/charts"> www.unicode.org/charts </a>.

</p>
<h2 class="titre"> CSS </h2>
<p id="sec">
     En CSS, il y a de nombreux parametres possibles. Il y a <em> héritage</em>
     des propriétés suivant la strucyure du document
</p>
</body>
</html>

                                                                                                         Ex9.html
                                                                                                                     24
body {background-color: #d2b48c;
               color: red;
               margin-left: 20%;
               margin-right: 20%;
               font-family: sans-serif;}
p       {background-color: yellow;}
p#sec {background-color: green;}
em {color : black;}
.titre {font-family:symbol;}
                                           mafeuille2.css
                                                            25
    Placement des éléments sur la
               fenêtre
• Le navigateur utilise le flux pour effectuer la mise en
  pages des éléments (X) HTML.
• Commence au début du fichier (X)HTML.
• Les éléments de bloc sont disposés de haut en bas au
  fur et à mesure de la lecture
• Les élément de ligne se placent les uns à coté des
  autres depuis le coin en haut à gauche jusqu’au coin en
  bas à droite
• Sauf si la taille a été spécifiée, les éléments occupent la
  largeur de la page. La mise en page s’adapte à la
  modification de la taille de la fenêtre.


                                                            26
              Attribut float
• Lorsque le navigateur rencontre l’attribut
  float il le place suivant sa valeur à gauche
  ou à droite et le retire du flux
• Les blocs se comportent comme si cet
  élément n’existait pas
• MAIS les éléments en ligne sont
  positionnés en respectant les limites de
  l’élément flottant
                                             27
<body>
<h1 class="titre"> Cours </h1>
<div id="gauche">
<h2 class="titre"> CSS </h2>
<p class="sec">
     En CSS, il y a de nombreux paramètres possibles. Il y a <em> héritage</em>......
     des propriétés suivant la structure du document.
</p>
</div>
<h2 class="titre"> HTML </h2>
<p>
     En HTML il y a des balises, la première est &lt; html&gt;.
     Avec &amp; suivi d'une ….
     Pour consulter les entités, aller voir <a href="http://www.unicode.org/charts">
     www.unicode.org/charts </a>.
</p>
<p> Un nouveau paragraphe pour voir. Un nouveau paragraphe pour voir. Un nouveau paragraphe
     pour voir. Un nouveau paragraphe pour voir.




                                                                                              28
    mafeuille3.css (ex10.html)
body {background-color: #d2b48c;
          color: red;
          margin-left: 20%;
          margin-right: 20%;
          font-family: sans-serif;
     }

#gauche { color: green;
          width: 200px;
          float: left;}

                                     29
  mafeuille3b.css (ex10b.html)
ex10b.html:
<p id="dernier"> Un nouveau paragraphe
  pour voir

mafeuille3b.css:
#dernier {clear:left;}


                                         30
              Pseudo classe
• Un élément peut avoir plusieurs états
• Un lien <a> peut être:
  – non visité, a:link
  – visité, a:visited
  – survolé, a:hover
  –…




                                          31
                                  ex11.html
<body>
<h1 class="titre"> Cours </h1>
<h2 class="titre"> HTML/XHTML </h2>

<p>Pour renvoyer vers le <a href="ex1.html"> premier exemple</a> </p>

<div id="chetat">
<p>Pour renvoyer vers le <a target="bb" href="ex2.html">second exemple</a> </p>
<p>Pour renvoyer vers le <a href="ex3.html">troisieme exemple</a> </p>
<p>Pour renvoyer vers le <a href="www.google.fr">vers google</a> </p>
<p>
<ul>Un lien peut avoir plusieurs états:
<li><span class="etat"> non visité </span> <span class="affiche"> a:link </span> </li>
<li><span class="etat"> visité </span> <span class="affiche"> a:visited </span> </li>
<li><span class="etat"> survole </span> <span class="affiche"> a:survole</span> </li>
</ul>
</p>
</div>
</body>



                                                                                         32
body {background-color: #d2b48c;
                  color: red;
                  margin-left: 20%;
                  margin-right: 20%;
                  font-family: sans-serif;
        }
.etat   { font-family:times;
        color:black}

.affiche {font-family: geneva;
           color:white}

#chetat a:link {color: green;}
#chetat a:visited {color: white;}
#chetat a:hover {color:yellow}


                                             33
                Vérification
• Par W3Chttp://jigsaw.w3.org/css-
  validator

validCSS.html




                                      34
                A faire….
•   Gerer les fontes
•   Affichage des images
•   Tableaux et tables
•   ….




                            35
               Formulaire
<form
  action="http://www.liafa.jussieu.fr/~cd/affic
  hp.php" method="GET">
Prénom: <input type="text" name="prénom"
  value="" />
                                 POST possible
<input type="submit" value="Envoyer" />
..
</form>
                                              36
                        Ex12.html
<body>
  <form action="http://www.liafa.jussieu.fr/~cd/affichp.php"
  method="GET">
<p> Votre nom et prénom <br/>

Prénom: <input type="text" name="prénom" value="Carole" /> <br />
Nom: <input type="text" name="nom" value=""/> <br/>

</p>
…..
<p>
<textarea name="commentaire" rows="15" cols="20"></textarea>
</p>



                                                                    37
<h2> Acheter vous aujourd'hui? </h2>
<p>
<input type="radio" name="unouautre" value="oui" />Oui <br />
<input type="radio" name="unouautre" value="non" /> Non <br />
<input type="radio" name="unouautre" value="on" /> Peut-être <br />

</p>
….
<p id="gauche">
<input type="checkbox" name="choix" value="A" /> Le bon choix <br />
<input type="checkbox" name="choix" value="B" /> Le meilleur <br />
<input type="checkbox" name="choix" value="C" /> Le moins cher <br />

</p>
…
<p>
Par qui voulez vous être servi?:
<select name="nompourselect">
<option value="Pierre"> Pierre Bleu</Option>
<option value="Paul"> Paul Blanc </Option>
<option value="Jacques"> Jacques Gris </Option>
<option value="Adeline"> Adeline Rouge </Option>
</select>



                                                                        38