Mémento HTML

  1. Balises de premier niveau[1]

    Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour
    réaliser le « code minimal » d’une page web.

    Balise Description
    <html> Balise principale
    <head> En-tête de la page
    <body> Corps de la page

    Code minimal d’une page HTML :

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>Titre</title>
    <!—Facultatif mais très recommandé : l’intégration de scripts et feuilles de styles-->
            <script type="text/javascript" src="http://***** monScript.js"></script>
            <link rel="stylesheet" href="http://******maFeuilleDeStyle.css" />
           <!— Fin de Facultatif -->
        </head>
        <body>
        …
        </body>
    </html>
    

     

  2. Balises d’en-tête

    Ces balises sont toutes situées dans l’en-tête de la page web, c’est-à-dire entre <head> et </head> :

    Balise Description
    <link /> Liaison avec une feuille de style
    <meta /> Métadonnées de la page web (charset, mots-clés, etc.)
    <script> Code JavaScript
    <style> Code CSS
    <title> Titre de la page
  3. Balises sectionnantes[2]

    http://www.alsacreations.com/xmedia/doc/full/schema2.png
    Figure 1 Exemple de construction de page utilisant les balises sectionnantes HTML5 Ces balises permettent de construire le
    squelette de notre site web.

    Balise Description
    <header> En-tête
    <nav> Liens principaux de navigation
    <footer> Pied de page
    <section> Section de page
    <article> Article (contenu autonome)
    <aside> Informations complémentaires
  4. Balises génériques

    Les balises génériques sont des balises qui n’ont pas de sens sémantique. En effet, toutes les autres balises HTML ont un
    sens : <p> signifie « Paragraphe », <h2> signifie « Sous-titre », etc. Parfois, on a besoin d’utiliser
    des balises génériques (aussi appelées balises universelles) car aucune des autres balises ne convient.
    On utilise le plus souvent des balises génériques pour construire son design. Il y a deux balises génériques : l’une est
    inline, l’autre est block.

    Balise Description
    <span> Balise générique de type inline
    <div> Balise générique de type block

    Class id style

    
    Contenu de l'article, contenu de l'article, contenu de l'article, contenu de l'article...
    
    

    class: indique le nom de la classe CSS à utiliser.

    id: donne un nom à la balise. Ce nom doit être unique sur toute la page car il permet d’identifier la balise.
    Vous pouvez vous servir de l’ID pour de nombreuses choses, par exemple pour créer un lien vers une ancre, pour un style CSS
    de type ID, pour des manipulations en JavaScript, etc.

    style: cet attribut vous permet d’indiquer directement le code CSS à appliquer. Vous n’êtes donc pas obligés
    d’avoir une feuille de style à part, vous pouvez mettre directement les attributs CSS. Notez qu’il est préférable de ne pas
    utiliser cet attribut et de passer à la place par une feuille de style externe, car cela rend votre site plus facile à mettre
    à jour par la suite.

  5. Balises de structuration du texte

    Balise Description
    <abbr> Abréviation
    <blockquote> Citation (longue)
    <cite> Citation du titre d’une œuvre ou d’un évènement
    <q> Citation (courte)
    <sup> Exposant
    <sub> Indice
    <strong> Mise en valeur forte
    <em> Mise en valeur normale
    <mark> Mise en valeur visuelle
    <h1> Titre de niveau 1
    <h2> Titre de niveau 2
    <h3> Titre de niveau 3
    <h4> Titre de niveau 4
    <h5> Titre de niveau 5
    <h6> Titre de niveau 6
    <img /> Image
    <figure> Figure (image, code, etc.)
    <figcaption> Description de la figure
    <audio> Son
    <video> Vidéo
    <source> Format source pour les balises <audio> et <video>
    <a> Lien hypertexte
    <br /> Retour à la ligne
    <p> Paragraphe
    <hr /> Ligne de séparation horizontale
    <address> Adresse de contact
    <del> Texte supprimé
    <ins> Texte inséré
    <dfn> Définition
    <kbd> Saisie clavier
    <pre> Affichage formaté (pour les codes sources)
    <progress> Barre de progression
    <time> Date ou heure
  6. Balises de listes

    Cette section énumère toutes les balises HTML permettant de créer des listes (listes à puces, listes numérotées, listes de
    définitions…)

    Balise Description
    <ul> Liste à puces, non numérotée
    <ol> Liste numérotée
    <li> Élément de la liste à puces
    <dl> Liste de définitions
    <dt> Terme à définir
    <dd> Définition du terme
  7. Balises de tableau

    Balise Description
    <table> Tableau
    <caption> Titre du tableau
    <tr> Ligne de tableau
    <th> Cellule d’en-tête
    <td> Cellule
    <thead> Section de l’en-tête du tableau
    <tbody> Section du corps du tableau
    <tfoot> Section du pied du tableau

     

  8. Balises de formulaire

    Balise Description
    <form> Formulaire
    <fieldset> Groupe de champs
    <legend> Titre d’un groupe de champs
    <label> Libellé d’un champ
    <input /> Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)
    <textarea> Zone de saisie multiligne
    <select> Liste déroulante
    <option> Élément d’une liste déroulante
    <optgroup> Groupe d’éléments d’une liste déroulante
  1. D’après https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-balises-html
    Voir aussi http://s-jdm.developpez.com/tutoriels/html/traductions/presentation-html5/
    et http://tcuvelier.developpez.com/tutoriels/web-semantique/html5-microdonnees/introduction/
  2. http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html

Framework Bootstrap

Initiation à Bootstrap

(merci au site apprendre-a-coder.com)

Intégration de Bootstrap dans Visual studio

Exercice

En s’aidant de ce qui a été fait précédemment reproduire au plus près la page web suivante à l’aide du framework Bootstrap.

Pour information :

initiation WEB avec Visual Studio

Créer un site web avec Visual Studio

  • Création d’un site web et utilisation du serveur local iisExpress
  • Incorporation d’images
  • Utilisation de l’interface graphique WYSIWYG (what you see is what you get)

Mise en page à l’aide des <div>

  • présentation des div
  • mise en forme automatique Visual Studio
  • affectation d’id aux div, modification d’un style pour une div.
  • utilisation de classe pour assurer un centrage de texte

Positionnement des éléments d’une page.

  • Réalisation d’une petite galerie photo
  • Utilisation des styles float et  margin pour gérer le flottement des éléments.

Structuration d’une page grâce aux balises sectionnantes HTML5

  • Réalisation d’une page dont la structuration est la suivante :

Pour l’utilisation de Framework CSS voir la page Framework Bootstrap

Tutoriel

Créer une page web qui ressemble à ceci :

Le plan de structuration de la page est le suivant :

Aide pour le bouton bleu « See more… »
Ce bouton est créé à l’aide d’une div qui contient un texte inclus dans une balise h2. Cette div se situe dans une section ayant pour id : finArticle

Le code de la section est alors :

<section id="finArticle">
     <p>Etiam rhoncus nunc quis nulla dapibus pellentesque vitae vitae risus. </p>
     <div>
          <h2> See more...</h2>
     </div>
</section>

On peut constater que dans la section tous les textes sont centrés , nous pouvons donc déclarer le style suivant :

#finArticle{
             text-align:center;
           }

Ce style ne s’applique qu’à la balise ayant pour id : finArticle.
Pour appliquer des modifications à une balise div incluse dans finArticle, il faut faire comme ceci :

#finArticle div {
              width: 200px; /*largeur*/
              height: 75px; /*hauteur*/
              margin: auto; /*centrage de la div dans la page*/
              background-color: #0094ff;/*couleur de fond (bleu)*/
              border: 1px solid #ccc;/*bordure grise du "bouton"*/
              border-radius:8px;/*angles arrondis*/
              text-shadow: -1px -1px rgba(0, 0, 0, 0.31);/*effet d'ombrage du texte "See more" */
              color: #FFFFFF;/*couleur du premier plan : le texte écrit "See more..."*/
}

Technologie Web

Html, css, javascript…

Introduction

Le web est un système client/ serveur qui permet au client d’afficher des pages web sur un terminal. L’envoi de requêtes et leurs décryptages est assuré par un logiciel nommé navigateur. Les terminaux qui peuvent se connecter à internet sont de type et de technologie différente (ordinateur, tablette, téléphone portable, objet connecté…).

Le format web doit pouvoir s’adapter à tous ces types de connexions. Le web s’appuie sur 3 langages :

  • HTML pour véhiculer le contenu (texte, images, son, vidéo…),
  • CSS pour la mise en forme et l’adaptation aux différents terminaux
  • JS pour rendre la page interactive avec l’utilisateur ou le serveur.

Requête http

Le diagramme de séquence d’une requête web est la suivante :

  • Le client appelle la page web grâce à son URI. On parle de requête de type GET.
  • Le serveur renvoie la page demandée au format html.
  • La page contenant des liens hypertextes dans son entête reformule elle-même des requêtes GET afin de rapatrier les autres éléments de la page web : JS et CSS.
  • Une fois l’ensemble des éléments reçus, la page s’affiche avec sa mise en forme et sa capacité à interagir avec l’utilisateur.
  • La page html peut aussi appeler des images, des vidéos, du son…

En fait tous les éléments constituant la page sont rapatriés et c’est le navigateur qui s’occupe de tout mettre en place en fonction du flux html et du fichier CSS

HTML[1]

L’HyperText Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom HTML.

Les balises sont invisibles à l’écran du navigateur, mais elles permettent à ce dernier de comprendre ce qu’il doit afficher. Les balises se repèrent facilement. Elles sont entourées de « chevrons », c’est-à-dire des symboles < et >, comme ceci :

<balise>

Elles indiquent la nature du texte qu’elles encadrent. Elles veulent dire par exemple : «Ceci est le titre de la page», «Ceci est une image», «Ceci est un paragraphe de texte», etc.

<titre>Ceci est un titre</titre>

On distingue une balise ouvrante <titre> et une balise fermante </titre> qui indique que le titre se termine.

Il existe des balises dites orphelines c’est-à-dire qu’on n’a pas de texte à insérer entre l’ouverture de la balise et sa fermeture. Par exemple <br/> (back return = saut de ligne) ou <image/> qui permet l’insertion d’image…

Les documents HTML ont une véritable structure en arbre, avec un élément racine contenant tous les autres éléments. Par exemple <html> contient <head> et <body>. Cet « arbre du document » est utilisé pour repérer les éléments de la page et permettre leur formatage ou l’interaction avec l’utilisateur par le biais de scripts.

liste des balises HTML voir le memento HTML

Tutoriel

On veut réaliser la page suivante :
(pour savoir comment créer un site et des pages avec Visual Studio cliquer ici):

Le code html est le suivant:


<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Démonstration des éléments de section HTML5</title>
    <style>
        span.elem {
            display: none;
        }
    </style>
</head>

<body>
    <!-- Header -->
    <header>
        <h1>Nouveaux éléments de section, article, header, footer, aside, nav</h1>
        <!-- nav principale -->
        <nav>
            <ul>
                <li><a href="#">Rubrique 1</a></li>
                <li><a href="#">Rubrique 2</a></li>
                <li><a href="#">Rubrique 3</a></li>
                <li><a href="#">Rubrique 4</a></li>
            </ul>
        </nav>
    </header>
    <!-- Main -->
    <section id="main">
        <span class="elem">section</span>
        <article>
            <span class="elem">article</span>
            <header>
                <span class="elem">header</span>
                <h2>En tête de l'article</h2>
                <p>Date de publication, auteur</p>
            </header>
            <p>Contenu de l'article, contenu de l'article, contenu de l'article, contenu de l'article, contenu de l'article,
                contenu de l'article, contenu de l'article...</p>
        </article>
        <article>
            <span class="elem">article</span>
            <header>
                <span class="elem">header</span>
                <h2>Harry Gruyaert</h2>
                <p>Par François, le
                    <time datetime="2016-11-05">5 novembre 2016</time>
                </p>
            </header>
            <p>Harry Gruyaert (né le 25 août 1941 à Anvers) est un photographe belge. Il est membre de l'agence Magnum Photos
                depuis 1981</p>
            <aside>
                <span class="elem">aside</span>
                <p><b>Magnum Photos</b> est une coopérative photographique. Créée en 1947 par Robert Capa, Henri Cartier-Bresson,
                    George Rodger, William Vandivert et David Seymour, elle fut la première de ce genre à voir le jour1.</p>
            </aside>
            <footer>
                <span class="elem">footer</span>
                <p>Source : <a href="http://fr.wikipedia.org/wiki/Magnum_Photos">Wikipedia</a></p>
            </footer>
        </article>
    </section>
    <!-- sidebar -->
    <aside id="sidebar">
        <span class="elem">aside</span>
        <h2>Sidebar</h2>
        <h3>Navigation</h3>
        <nav>
            <span class="elem">nav</span>
            <ul>
                <li><a href="#">Lien 1</a></li>
                <li><a href="#">Lien 2</a></li>
                <li><a href="#">Lien 3</a></li>
            </ul>
        </nav>
        <h3>Autre titre</h3>
        <p>Autres informations...</p>
    </aside>
    <!-- footer -->
    <footer>
        <span class="elem">footer</span>
        <p class="mentions">Page de démonstration de l'article <a href="/article/lire/1376-html5-section-article-nav-header-footer-aside.html">Nouveaux éléments de section, article, header, footer, aside, nav</a></p>
    </footer>
</body>

</html>

L’appel de cette page dans un navigateur montre le contenu mais la mise en page est linéaire est suit le flux, c’est-à-dire l’ordre d’apparition des éléments dans l’ordre d’écriture de la page

En reprenant la page et en faisant apparaitre les éléments de section HTML5, on peut voir que les sections s’imbriquent ou s’empilent les unes sur les autres.

Ajout de style afin de modifier l’aspect de la page

C’est grâce aux feuilles de style  CSS (Cascade Style Sheet) que le positionnement des sections va avoir lieu. Si on ajoute les instructions suivantes dans la balise <style> de l’entête du fichier html :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Démonstration des éléments de section HTML5</title>
    <style>
        span.elem {
            display: none;
        }

        body {
            width: 980px;
            margin: 0 auto 0 auto;
        }

        #main {
            float: left;
            width: 75%;
            margin: 0 0 50px 0;
        }

        #sidebar {
            float: left;
            width: 22%;
            margin-left: 1%;
            margin-top: 1em;
        }

        footer {
            clear: both;
        }

        nav ul li {
            display: inline-block;
        }
    </style>
</head>
<body>
    <!-- Header -->
...

La page prend l’aspect attendu. En faisant apparaitre les sections, on peut constater que la section “aside” est passée à droite (en rose).

Conclusion : Le code html contient le texte, les balises permettent de structurer la page c’est-à-dire définir les zones de contenu. Les feuilles de styles quant à elles, permettent de dimensionner et positionner les balises sectionnantes. Les feuilles de styles jouent aussi sur les éléments décoratifs de la page (couleurs, polices, encadrement…). Le code html contient le fond (la structure et le texte), le code css contient la forme (mise en page). Cette séparation permet à la page de s’adapter à n’importe quel terminal (écran d’ordinateur, tablette, téléphone…) En ajoutant à CSS quelques scripts, on peut créer une  mise en page « responsive » ou page réactive qui s’auto-adapte à l’écran.

Pour en savoir plus, voir le Memento CSS

  1. https://fr.wikipedia.org/wiki/Hypertext_Markup_Language#Description_de_HTML