balises-html

Balises HTML

Convention : Le texte écrit comme ceci doit être tapé au clavier. Le texte tapé comme ceci indique qu'une touche du clavier doit être appuyée. Exemple : Taper html:5 puis Tab


HTML = Hypertext Markup Language : Langage de balisage permettant d’écrire de l’hypertexte.


Exercice 1 : Structure de base.

  • Créer le fichier "www\exe001\page01.html"
  • L'ouvrir en édition (dans Sublime Text 3)
    • Assurez-vous d'avoir installé le module 'Emmet' dans Sublime text 3
  • Taper ! puis Tab , (remplacer 'en' par 'fr')
  • Combien de balises voyez-vous ?
    • Réponse : 6
      • <!DOCTYPE html> : Balise spéciale, hors contexte indiquant au navigateur le type de document (ici, html)
      • <html lang="fr">......</html> : Balise ouvrante + fermante. 'lang' est un attribut (ayant pour valeur 'fr'). Les pointillés indiquent qu'il y a une descendance (d'autres balises, hiérarchiquement inférieures).
      • <head>.....</head> : Balise ouvrante + fermante.
      • <body>.....</body> : Balise ouvrante + fermante.
      • <meta charset="UTF-8"> : Balise auto-fermante. 'charset' est un attribut (ayant pour valeur 'UTF-8').
      • <title>...</title> : Balise ouvrante + fermante.

Exercice 2 : Aperçu.

  • Dans l'explorateur de fichiers windows, double-clic sur le fichier précédent : "www\exe001\page01.html"
  • Le navigateur par défaut s'ouvre, affichant cette page.
  • Que voyez-vous ?
    • Réponse : rien (page blanche), à part l'onglet qui indique 'Document' (Contenu de la balise 'title')
  • Pour ajouter du contenu visible, le placer obligatoirement dans le corps (entre <body> et </body>)
    • Placer le caret dans le corps.
    • Taper lorem puis Tab
  • Rafraîchir le navigateur. Que voyez-vous ?
    • Réponse : Le texte du corps.

Exercice 3 : <br> et <p>

  • La balise <br> : Balise auto-fermante. Retour à la ligne contrôlé (imposé).
    • Par défaut, les retours à la ligne du texte édité ne sont pas pris en compte. Les retours se font de façon naturelle lorsque le texte arrive en bout, au bord droit de son contenant.
  • Exercice libre : Taper du texte avec des retours à la ligne contrôlés.
  • La balise <p> ... </p> : Balise ouvrante + fermante. Paragraphe. Chaque paragraphe commence sur une nouvelle ligne.
  • Exercice libre : Taper du texte avec des paragraphes (avec ou sans <br> à l'intérieur)

Exercice 4 : <span>, <div>, <h1> à <h6>

  • La balise <span> ... </span> : Plusieurs balises <span> à la suite restent sur la même ligne, contrairement aux paragraphes.
  • La balise <div> ... </div> : Plusieurs balises <div> à la suite passent à la ligne comme les paragraphes.
  • La balise <h1> ... </h1> : Texte d'entête de premier niveau, de grande taille (Header 1, ou titre 1)
  • Les balises <h2> ... </h2> à <h6> ... </h6> : Hiérarchie descendante.
  • Tapez ceci dans la balise <body> :
    <h1>Je suis un titre h1</h1>
    <h2>Je suis un titre h2</h2>
    <h3>Je suis un titre h3</h3>
    <h4>Je suis un titre h4</h4>
    <h5>Je suis un titre h5</h5>
    <h6>Je suis un titre h6</h6>
  • Rafraîchir le navigateur.

Par défaut chaque balise est rattachée à un de ces deux type d'affichage : inline et block

Exemples de balises inline : <span>,  <img>, <a>

Exemples de balise block : <p>, <div>, <h3>, <hr>


Exercice 5 : <a>. Liens vers d'autres sites = adressage absolu.

  • Dans la page 1 (à la suite), taper ceci (copier-coller, ça ira plus vite) :
    <a href='http://www.startyourdev.com/html/tag-html-balise-a'>Informations sur la balise 'a'</a>
  • La balise 'a' est de type inline. Elle possède au moins un attribut, 'href' qui a pour valeur une url en adressage absolu ou relatif.
  • Afficher cette page : on voit le lien.
    • Cliquer dessus.
    • On va sur un site web, dans internet : l'adressage est absolu. On reconnait cela à la valeur de l'attribut 'href' qui commence par 'http'
    • ... mais on reste sur la même page : en effet, notre "page 1" a disparu, laissant la place au site appelé.
  • On désire modifier un peu cela, afin de conserver notre page, et d'afficher ce site sur un autre onglet.
    • Pour celà, il faut ajouter un deuxième attribut : 'target' avec, pour valeur '_blank'
    • Vérifier.

Exercice 6 : <a>. Les liens internes = adressage relatif.

  • Créer le fichier "www\exe001\page02.html"
  • L'ouvrir en édition (dans un nouvel onglet de Sublime Text)
  • Taper ! puis Tab , (remplacer 'en' par 'fr', mettre en titre 'Page 2')
  • Dupliquer ce fichier en"www\exe001\page03.html", corriger le titre.
  • L'ouvrir en édition (dans un nouvel onglet de Sublime Text)

Nous voilà donc avec 3 onglets dans Sublime Text : page01.html, page02.html et page03.html. Nous allons pouvoir switcher de l'un à l'autre ... mais dans ce cas, il vaudra mieux afficher 3 colonnes, avec une page dans chacune. Dans le menu de Sublime Text > View > Layout > Columns: 3

  • On désire placer des liens dans ces 3 pages, afin de pouvoir passer de l'une à l'autre.
  • On va pour cela utiliser encore la balise 'a'.
  • Dans body de la page03, tapez ceci :
    <h2>Je suis la page 3</h2>
  • Dans body de la page02, tapez ceci :
    <h2>Je suis la page 2</h2>
    <a href='page01.html'>Aller à la page 1</a> | <a href='page03.html'>Aller à la page 3</a>
  • Afficher la page 2 (rafraîchir le navigateur si nécessaire - F5 -)
    • On voit qu'il y a 2 liens ... ce qui était prévu !
    • On remarque qu'ils apparaissent soulignés, et que le curseur de la souris change (main) au survol.
  • Vérifier que ces liens fonctionnent.
  • A vous de compléter les pages 1 et 3 pour obtenir la navigation désirée.
  • Ici, l'adressage est relatif car l'attribut 'href' ne commence pas par 'http'
    • Le point de référence est la page en cours (ici, page 2) dans le disque dur.
    • Si la page liée est dans un autre dossier, il faudra l'écrire dans la valeur du 'href', toujours en partant du point de référence.

Exercice 7 : <a>. Les liens sur la même page.

Imaginons une page très longue ... disons 3 mètres de hauteur. Pour accéder à l'information voulue, il va falloir faire défiler l'ascenseur ... jusqu'au point désiré : Ce n'est pas très pratique.

L'idéal serait :

  • De partager le contenu en une succession de blocs (des paragraphes, par exemple), identifiés par un attribut.
  • De placer en début de page un ensemble de liens à la manière d'une table des matières, pointant chacun vers un paragraphe particulier.

Faisons- le !

  • Dans la page 2, créer un paragraphe comprenant un titre suivi d'un menu.
    • Le titre sera : <h1>Les nouvelles régions de France</h1>
    • Le menu sera :
      <a href='#strasbourg'>Alsace-Champagne-Ardenne-Lorraine</a>
      <br><a href='#bordeaux'>Aquitaine-Limousin-Poitou-Charentes</a>
      <br><a href='#lyon'>Auvergne-Rhône-Alpes</a>
      <br><a href='#dijon'>Bourgogne-Franche-Comté</a>
      <br><a href='#rennes'>Bretagne</a>
      <br><a href='#orleans'>Centre-Val de Loire</a>
      <br><a href='#ajaccio'>Corse</a>
      <br><a href='#paris'>Île-de-France</a>
      <br><a href='#toulouse'>Languedoc-Roussillon-Midi-Pyrénées</a>
      <br><a href='#lille'>Nord-Pas-de-Calais-Picardie</a>
      <br><a href='#rouen'>Normandie</a>
      <br><a href='#nantes'>Pays de la Loire</a>
      <br><a href='#marseille'>Provence-Alpes-Côte d'Azur</a>
  • créer 13 paragraphes composés d'un titre et de faux texte (lorem ipsum).
    • Voici le premier :
      <hr>
      <h2 id='strasbourg'>Alsace-Champagne-Ardenne-Lorraine</h2>
      <p> Taper (lorem, puis Tab) plusieurs fois</p>
    • Créer les suivants, en dupliquant le premier et en le modifiant.
  • Créer à la fin de chaque paragraphe un lien pour revenir au menu.

Exercice 8 : images

  • La balise <img> est de type 'inline'.
  • La balise <img> est auto-fermante.
  • Syntaxe : <img src='url de l'image'>
  • Dans la page 2, placer la carte de France représentant les nouveaux départements.
    • La placer en haut, au niveau du menu.

Encore des balises ...

  • La balise <hr> a déjà été utilisée, elle trace une ligne horizontale. Block, auto-fermante.
    • On l'utilise pour afficher des séparations, comme dans l'exercice précédent.
  • La balise de commentaires : Le texte contenu entre le début et la fin ne sera pas interprété par le navigateur. Ce texte ne sert qu'au programmeur (pense-bête, remarques, explication du code, etc)
    • Début = <!--
    • Fin = -->

Exercice 9 : Liste à puces, liste numérotée

  • Cet exercice sera fait dans la page 3 (www\exe001\page03.html)
  • Écrire ceci (copier-coller) : Veillez à respecter les indentations
    <hr>
    <h3>Inventaire</h3>
    <ul>
        <li>1 tournevis</li>
        <li>2 feuilles</li>
        <li>1 couteau</li>
        <li>4 fleurs</li><li>12 litres de lait</li>
    </ul>
  • Observer le résultat
  • Continuer, en écrivant ceci (copier-coller) :
    <hr>
    <h3>A faire dans l'ordre</h3>
    <ol>
        <li>Ouvrir le capot.</li>
        <li>Débrancher les 2 câbles de la batterie.</li>
        <li>Sortir la batterie.</li>
        <li>Mettre une batterie neuve.</li>
        <li>Brancher les 2 câbles dans le bon sens.</li>
        <li>Fermer le capot.</li>
    </ol>
    <hr>
  • Observer le résultat

Exercice 10 : Application d'une liste

  • Reprendre la page 2 (www\exe001\page02.html)
  • Transformer le menu en liste à puces, puis en liste numérotée

 

0 réponses

Un commentaire, une suggestion ?

Participez à la discussion.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *