NOTIONS : La couche présentation : Le langage HTML-CSS


- FICHE DE NOTIONS -

La couche présentation : Le langage HTML-CSS





  1. Le HTML et le CSS, deux standards

La difficulté de comprendre la structure d’un document en HTML5 vient surtout de l’utilisation des balises de sections (header, nav, footer, main, body, aside, section, article…). Voici un exemple de structure d’une page html :

Si le monde de l’informatique vous plaît et que vous êtes tenté d'apprendre la programmation informatique, vous serez obligé de passer par l’apprentissage du HTML (HyperText Markup Language) et du CSS (Cascading Style Sheets).

Les langages HTML et CSS sont véritablement à la base de tout projet de développement web car les navigateurs (Google Chrome, Safari, etc.) vont utiliser le code HTML et le CSS pour vous fournir et afficher des pages web.

Voici par exemple un extrait du code HTML d'une page index.html :


<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>Ma première page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body id="fond">
    <header>
      <div><img alt="bandeau" src="images/entete.png" </div>
    </header>
    <nav>
      <ul>
<li><a href="index.html">Accueil</a></li>
        <li><a href="les_pages.html">Les pages du sites</a>
          <ul>
            <li><a href="Lien_vers_la_page1.html">page1</a></li>
            <li><a href="Lien_vers_la_page2.html">page2</a></li>
            <li><a href="Lien_vers_la_page3.html">page3</a></li>
                  </ul>
    </nav>
    <section class="coin">
      <article>
        <p>Le HTML c'est pas compliqué <br>
          <br>
          Par: c'est moi qui le dit</p>
        <p><span><u>Ma devise:</u><br>
            <br>
            L'html c'est juste des balises pour que le navigateur comprenne comment afficher une page web<br>
            Pas de quoi baliser!<br>
            Ok ... je sors...</span></p>
             </article>
      <aside>
        <h1>Une image pour illustrer</h1>
        <img alt="ce texte apparait car le navigateur n'a pas trouvé l'image src=source " src="images/image.gif">
        </aside>
    </section>
    <footer>
      <p><font color="#F4E078">Ma première page-ICN - Tous droits réservés</font><br></p>
    </footer>
  </body>
</html>


Et voici un exemple de la feuille de style associée style.css permettant d’indiquer une couleur au fond du site :

#fond {

background-color: black;

}

Voici la balise qui permet d’insérer une image :


<img alt="bandeau" src="images/entete.png"


Résultat à l’affichage sans le CSS :


Résultat à l’affichage avec le CSS :


En bref : que vous vouliez créer un site e-commerce, un blog, une application mobile ou quoique ce soit d’autre, vous serez obligé de passer par les langages HTML et CSS.

Cela étant, si vous connaissez un petit peu le monde du web, vous pouvez très bien vous dire que coder en HTML et en CSS est inutile puisque vous pouvez utiliser des solutions toutes faîtes comme des frameworks (WordPress, PrestaShop), des éditeurs WYSIWIG (What You See Is What You Get) comme bluegriffon ou encore avoir recours aux services d’une agence spécialisée.

Cependant apprendre le HTML et le CSS c’est surtout et avant tout se créer un socle pour comprendre comment fonctionne son site et ainsi pouvoir le modifier ou corriger des problèmes au besoin.

L’immense majorité des échecs liés au web proviennent du fait que des personnes se lancent dans l’aventure sans la moindre connaissance de leur environnement.

  1. Les ressources web sélectionnées
  1. Site et chaine Youtube de Pierre Giraud (Ingénieur informatique)

Le but de ce tutoriel est d’explorer les différentes fonctionnalités du HTML et du CSS. Ce cours s’adresse à tous, des plus parfaits débutants aux personnes disposant déjà d’un bagage informatique.

  1. Le cours en ligne d’OpenClassRoom

Dans ce cours, vous apprendrez comment utiliser HTML5 et CSS3, les deux langages de programmation à la base de tous les sites web.

  1. Le cours en ligne de la Khan Académy sur le HTML et le CSS
  1. Pense bête sur les principales balises HTML et CSS

Modifié le: mercredi 29 novembre 2017, 14:22