HTML5 - CSS3

II. Programmons !!

Commençons la programmation de notre premiére page html5.
Je vous l'ai expliqué précedement avec la balise paragraphe. Il existe des balises fonctionnants en duo, <header> </header> et des balises simples <image/>.

Pour faire simple, lorsque vous ouvrez une balise < > il y aura forcement un endroit dans votre page où vous devrez la fermer </>.
Par contre, si il y a un </> il sagit d'une balise auto-fermante. Il n'y a donc pas besoin de la refermer, mais ce type de balise reste trés rare.

Important :

  • Les balises existantes par paire doivent obligatoirement s'ouvrir et se refermer dans la page.

  • Les balises simples doivent obligatoirement se terminer par un "/"

  • Le nom d'une balise (appelé attributs) doit être écrit en minuscule.

    • Nous pouvons à présent nous préparer à construire notre premiére page! Pour cela, il vous faudra un logiciel je vous recommande de telecharger notepad++. Un lien est à votre disposition dans l'onglet Download.
    Je vous conseil pour plus de lisibilité d'aller dans l'onglet langage de notepad.
    Il faut ensuite activer la case HTML afin que le logiciel mette votre code en couleur et qu'il soit incrémenté !

    Voici à présent, un code qui servira de base à la plus part des sites.

    Code source d'un paragraphe

    Faites un copier coller de tout ceci, vous aurez sous les yeux la première page web que vous aurez "crée".

    Ce n'est pas fameux , il est normal que la seul chose qu'affiche le navigateur soit :

    Bienvenue sur ma page web

    Note utile :

    N'oubliez pas que seul le Body est affiché! Tout le reste ne sert, qu'à le rendre conforme au norme standard, du moin en partie.

    Je vous invite à écrire à présent, le minimum de code servant à afficher dans un paragraphe la phrase

    "Ma réelle première page web".

    Voici la solution :

    Premiere page web

    Cependant attention à gardez les principes du référencement, c'est une excellente habitude à prendre et un simple copier coller suffit pour une page basique.

    1.Le saut de ligne

    C'est une balise auto fermante : </br> Elle se place UNIQUEMENT dans un paragraphe.

    Note :

    Il est possible de faire plusieurs <br> à la suite mais il existe une balise plus efficace qu'on verra dans la partie CSS.

    2.Les titres

    En html5, il existe 6 titres différents, leur noms sont :

  • <h1> Très Gros titre </h1>
  • <h2> Gros titre </h2>
  • <h3> titre (sous titre)</h3>
  • <h4> petit titre </h4>
  • <h5> très petit titre </h5>
  • <h6> très très petit titre </h6>

    Testez tout ces différents titres sur votre page pour avoir un aperçu plus clair.
    Votre page devrait donc ressemblait à sa :

    Code source d'une page avec des titres

    Je n'ai utilisé ici que les deux premiers types de titre, tous les autres sont assez "inutiles". La taille "h3" vous servira peut-être, mais avec le CSS, vous pourrez créer des titres bien plus grands ou plus petit.

    Le html5 peut aussi faire "quelques" mise en forme assez sympa sur un texte sans avoir besoin du CSS.

    3.Balises de mise en forme


    Je vous les présente assez rapidement car elles sont rarement utilisés mais elles valent la peine d'être connues.

  • La balise "em", c'est une balise double servant à mettre le texte en italique:

    • Texte ecrit avec la balise "em"

  • La balise "strong", c'est une balise servant à mettre en gras votre texte:

    • Texte ecrit avec la balise "strong"

  • La balise "sup", c'est une balise servant à mettre un texte en exposant:

    • Texte écrit avec la balise "sup"

    Résultat de la course

    Le célèbre cycle italien Alberta Amnstrong et arriver 2 éme a la course del torero

    Exemple code

    4.Les citations

    Il existe deux type de citations :

  • Celles assez courte qui peuvent tenir dans une phrase :

    • Citation sur une ligne

  • Celles qui forment un bloc à elle seule, blockoquote :
    • Voici le début de Candide de Voltaire provenant du site http://www.bacdefrancais.net/candide-1.php

    Il y avait en Westphalie, dans le château de M. le baron de Thunder-ten-tronckh, un jeune garçon à
    qui la nature avait donné les moeurs les plus douces.
    Sa physionomie annonçait son âme. Il avait le jugement assez droit, avec l'esprit le plus simple ;
    c'est, je crois, pour cette raison
    qu'on le nommait Candide.

    Ce qui nous donne comme code :

    Citation en block



    1, 2, 3, 4, 5, 6, 7