HTML : Suite

De Centre de Ressources Numériques - Labomedia
Révision de 4 juin 2015 à 08:15 par Serge (discussion | contributions)

(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à : navigation, rechercher

Les balises élémentaires:

Les balises élementaires : <html></html>, <head></head>, <body></body>

Un document HTML possède une section header (elle contient des méta-données propres au document en cours ainsi que des information relatives aux feuilles de styles et scripts) et une section  body le code du contenu visible ( seul le contenu de la balise body est visible par l'utilisateur ).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> titre du document </title>
</head>
<body>        

contenu de la page web

</body>
</html>


Les niveaux de titres et paragraphes

Les balises: <h1></h1>...<h6></h6>, <p></p>

<h1> Un titre de premier niveau </h1>
<p> un paragraphe </p>
<h2> Un titre de second niveau </h2>
<p>un second paragraphe</p>
<p> un dernier paragraphe </p> <!--  ce commentaire ne sera pas visible par l'utilisateur -->

Un peu de formattage

Les balises: <i></i>, <b></b>, <u></u>

<i>un texte en italique</i>

<b>un texte en gras</b>

<u>un texte souligné</u>

!!! HTML connaît deux types de styles, les styles logiques (interprétés) et les styles physiques (non interprétés). Chaque type de  navigateur interprète les styles logiques différemment. Par exemple, le style logique <em> (pour "emphatique") sera affiché en rouge avec soulignement simple par un navigateur et en italique par un autre. Autres exemples de styles logiques: <strong> (accentué) et <cite> (citation). Les styles physiques, tels que italique, souligné et gras sont représentés tels qu'ils sont indiqués ( il est préférable de les utiliser ).


Insérer une image

Balise : <img />

<img src="peter.jpg" width="200" height="150"
alt="My friend Peter"/>

l'attribut "alt" permet d'afficher un texte dans la cas ou l'image ne peut être affichée. Cet attribut devrait toujours être présent.


Ajouter un  lien

balise: <a></a>

ceci est un lien vers <a href="http://www.google.com">google</a>.

C'est la valeur de l'attribut "href" qui contient l'url ( absolue ou relative) de la ressource visée

Un example de lien relatif:

Ceci est un lien vers une autre page de mon site web <a href="../categorie1/mapage.html">une page</a>

'Un example de lien associé à une image':

<a href="/"><img src="logo.gif" alt="home page"></a>

Définir une ancre (insertion d'un lien dans la page courante)

En deux temps : définir la cible à l'intérieur du docment et créer le lien.

Par exemple, pour créer une note en bas de page:

<a href="#note-1">notes[1]</a>

<a name="note-1">nom</a>

Créer un lien vers une adresse électronique
La syntaxte de base est la suivante :

<a href="mailto:prenom.nom@provider.net">prenom nom@provider.net</a>

Il faut cependant absolument éviter d'écrire une adresse mail dans une page web. Celle çi sera automatiquement detecté par les spammeurs. Il vaut mieux créer un lien vers une page contenant un formulaire de contact.

Pour Wordpress, il est possible d'installer des plugins anti-spam: http://wordpress.org/extend/plugins/search.php?q=antispam+mail ou d'utiliser la fonction intégrée à wordpress prévue à cet effet :

http://codex.wordpress.org/Protection_From_Harvesters

Les listes

Balises : <ul></ul>, <ol>, <li> ...

Il existe 3 type de listes, voici seulement présentée les listes ordonnées et non-ordonnées.

Les listes  ordonées

<ol>
     <li>premier élement de la liste</li>

     <li>second élement de la liste</li> 

     <li>troisième élement de la liste</li>
</ol>

Les listes non ordonnées ( les plus courantes):

<ul>
    <li>premier élement de la liste</li>

    <li>second élement de la liste</li>

    <li>troisième élement de la liste</li>
</ul>


Les tableaux

Les balises:  <table></table>, <tr></tr>, <th></th>, <td></td>, <thead></thead>, <tfoot></tfoot>

Tableau simple

Un tableau est construit définit par les balises "<table></table>. Les lignes sont définies par les balises "<tr></tr>" et chaque celulle par les balises "<td></td>" ou "<th></th>" pour définir une cellule d'en.

<table>
  <tr>
    <th>Poisson</th>

    <td>20 euros</td>
    <td>500 grammes</td>
  </tr>
  <tr>
    <th>Viande</th>
    <td>15 euros</td>
    <td>900 grammes</td>
  </tr>
</table>


Tableau avec une ligne d'en-tête, une ligne de pied et une légende

<table>
   <caption>Mes courses</caption>
   <thead>
     <tr>
       <th>Aliment</th>
       <th>Prix</th>
       <th>Poids</th>
     </tr>
   </thead>

   <tfoot>
     <tr>
       <th>Total</th>
       <th>35 euros</th>
       <th>1400 grammes</th>
     <tr>
   </tfoot>
   <tbody>
     <tr>
       <th>Poisson</th>
       <td>20 euros</td>
       <td>500 grammes</td>
     </tr>
     <tr>
     <th>Viande</th>
     <td>15 euros</td>
     <td>900 grammes</td>
    </tr>
   </tbody>
</table>


Les conteneurs

balises: div, span

Ils sont très largement utilisé conjointement avec les attributs "id" et "class" pour définir la structure de la page.

L'élément div est un conteneur générique pour le contenu de flux qui en soi ne représente rien. Il permets de définir des groupements de balises qui pourront correposndre à des zones de la page

<div id="menu">
    <h2>Le titre de mon bloc</h2>

    <ul>

      <li>accueil</li>

      <li>contact</li>

   </ul>
</div>
<div id="contenu-principal">
         <h2>Le titre de mon bloc</h2>
     <p>To be xhtml or not to be xhtml ?</p>
</div>


L'élément span est un conteneur générique pour le contenu phrasé qui par lui-même ne représente rien.

<p><span class="info">Variable declared twice</span></p>
<p><span class="warning">Undeclared variable</span></p>
<p><span class="erreur">Bad syntax for variable name</span></p>
 


Les formulaires

Les balises : <form></form>,<fieldset></fieldset>, <legend></legend>, <label></label>, <input />, <textarea></textarea>, <button></button>.


Un formulaire simple de contact

<form>

    <input type="text" name="nom"/>

    <input type="submit" value="ok" />
</form>


Ajoutons un label

<form>

    <label for="nom">nom: </label> 

    <input type="text" name="nom" id="nom"/>

    <button>valider le formulaire</button>
</form>

Notez l'attribut "for" de la balise "label" qui associe ce label à l'élement dont la valeur de l'attribut "id" est "nom". De plus, le champ "input" de type "submit" a été remplacé par un élement "button".


Un formulaire plus complet

Ajoutons un champ de texte multiple pour la saisie d'une description, ainsi que des checkbox et radiobox.

<form>
    <label for="nom">nom : </label>
    <input type="text" name="nom" id="nom"/>

    <label for="prenom">prénom : </label>
    <input type="text" name="prenom" id="prenom"/>

    <label for="description">description : </label>
    <textarea rows="10" cols="10" name="description" id="description"></textarea>

    <label for="graphiste">graphiste</label>
    <input type="radio" name="graphiste" id="graphiste" />
   
    <label for="developpeur">développeur</label>
    <input type="radio" name="developpeur" id="developpeur" />

    <label for="newsletter">recevoir la newsletter</label>
    <input type="radio" name="newsletter" id="newsletter" />

    <button>valider le formulaire</button>
</form>



Les listes déroulantes

<form>
<select>

<option>un</option>

<option>deux</option>

</select>

</form>



Ajouter des sections au formulaires ( grouper des élements)

<form action="sauvegarde-contact.php" method="post">

    <fieldset>
        <legend>Informations principales</legend>

        <label for="nom">nom : </label>

        <input type="text" name="nom" id="nom"/>

        <label for="prenom">prénom : </label>
        <input type="text" name="prenom" id="prenom"/>

        <label for="description">description : </label>
        <textarea rows="10" cols="10" name="description" id="description"></textarea>

    </fieldset>   

    <fieldset>
        <legend>Informations secondaires</legend>

        <label for="graphiste">graphiste</label>
        <input type="radio" name="graphiste" id="graphiste" />

        <label for="developpeur">développeur</label>
        <input type="radio" name="developpeur" id="developpeur" />

        <label for="newsletter">recevoir la newsletter</label>
        <input type="checkbox" name="newsletter" id="newsletter" />

    </fieldsset>

    <button>valider le formulaire</button>
</form>



Forcer les sauts de lignes

Balise: <br />

<p>
     vidi lecta diu et multo spectata labore <br />
     degenerare tamen, ni vis humana quotannis <br />
     maxima quaeque manu legeret. sic omnia fatis <br />
     in peius ruere ac retro sublapsa referri, <br />
     non aliter quam qui adverso vix flumine lembum <br />
     remigiis subigit, si bracchia forte remisit, <br />
     atque illum in praeceps prono rapit alveus amni.
</p>


Insérer un espace insécable

Entité: &nbsp;

Sweetened carbonated beverages, such as Coca&nbsp;Cola,
have attained world-wide popularity


Les entités

voir : http://alexandre.alapetite.fr/doc-alex/alx_special.html


Les deux modèles de contenus:

  • inline: éléments au niveau du caractère et chaînes de texte
  • block:  éléments de type bloc, par exemple, paragraphes et listes


Par défaut, les éléments de bloc sont formatés différemment des éléments en-ligne. En général, les éléments de bloc commencent sur une nouvelle ligne, et non les éléments en-ligne. Pour des informations concernant les blancs, les sauts de ligne et le formatage des blocs, veuillez consulter la section sur le texte.

Les élements de type "block" (XHTML)

p | h1|h2|h3|h4|h5|h6 | div | ul | ol | dl | pre | hr | blockquote | address | fieldset | table

Les elements de types "inline"(XHTML)

br | span | bdo | map | object | img | tt | i | b | big | small | em | strong | dfn | code | q |
samp | kbd | var | cite | abbr | acronym | sub | sup | input | select | textarea | label | button


Sources

Tutoriaux :

http://www.w3.org/MarkUp/Guide/ (en)

http://www.w3.org/MarkUp/Guide/Advanced.html (en)

http://openweb.eu.org/articles/xhtml_une_heure (fr)

http://xhtml.le-developpeur-web.com/ (fr)


Les documents de références :

XHTML : http://www.w3.org/TR/xhtml1/dtds.html (en)
HTML4 : http://www.la-grange.net/w3c/html4.01/sgml/dtd.html (fr)
             http://www.la-grange.net/w3c/html4.01/ (FR)


Outils pratiques:

Faux texte : http://www.lipsum.com/

Validateur : http://validator.w3.org/#validate_by_uri

Couleurs : http://fr.wikipedia.org/wiki/Couleurs_du_Web


Voir aussi : CSS , 3eme année