Memento HTML

Télécharger le Memento des balises HTML : 1-HTML memento

Côté Logiciels

HTML est l’abréviation de « HyperText Mark-up Language », inventé par Tim Berners-Lee en 1991. C’est un langage de balisage qui permet uniquement de présenter des informations. Il existe aussi une variante compatible mais plus rigoureuse : le XHTML (eXtensible HyperText Mark-up Language).

en local : 1 éditeur + 1 navigateur

Le code d’une page HTML est stocké dans un fichier texte avec l’extension .htm ou .html

Ecrire une page web nécessite 2 logiciels :

  • un bon éditeur de texte, pour écrire le code HTML :
    • Windows :  Notepad++ « 32bits installer », PSPad , Sublime Text , …
    • Apple : Sublime Text, Bluefish, BBEdit , TextWrangler, gedit, TaterEdit (ou un payant : coda2 )
  • un navigateur, pour visualiser le résultat : Firefox , Chrome , Opera

premierePageWeb

sur serveur : 1 éditeur + 1 navigateur + 1 client FTP

On peut également travailler « en live » sur le serveur en rajoutant un 3ème logiciel :

  • un logiciel Client FTP FileZila Client , pour déposer vos pages html sur un serveur, afin qu’elles soient accessibles sur le web.
    Et votre écran va rapidement s’avérer trop étroit avec ces 3 fenêtres ouvertes en permanence !
  • ou bien on ajoute l’extension NppFTP à l’éditeur Notepad++ . Cette extension est équivalente à FileZila : elle affiche une fenêtre NppWindow dans Notepad++ pour travailler directement sur le serveur.

Démarrage

1ère méthode : en local :

Cette méthode consiste à travailler localement sur son ordinateur. L’intérêt est qu’on garde une copie de son travail sur son PC .. et c’est plus sûr !

étape 1 : Créer un répertoire /WWW et un sous-répertoire /images afin de stocker les multiples fichiers du site web.

étape 2 : Ouvrir le logiciel Notepad++ et copier/coller le code HTML ci-dessous.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style2.css" />
        <title>Titre de l'onglet</title>
    </head > <!-- fin de la 1ère partie : l'entête (les réglages) -->
 
    <body>
        <h1>Un titre sur la page</h1>
        <p>
            Puis écrire le contenu du paragraphe ici.
            Tout apparaît en bloc.
        </p>
    </body> <!-- fin de la 2e partie : le corps (la partie visible) -->
</html>

étape 3 : Enregistrer le fichier sous le nom index.html dans le dossier /WWW

étape finale : Envoyer les fichiers sur le serveur (distant) avec FileZilla (par glisser) lorsque la page est terminée.

2ème méthode : sur le serveur distant (en live)

On se connecte au serveur isn.ovh et on peut créer un nouveau fichier directement sur le serveur distant :

  • Ouvrir Filezilla, et inscrire l’Hote isn.ovh puis votre identifiant (votre prénom) et votre mot de passe puis clic sur Connexion rapide.

    FilezillaConnexion

  • Dans la partie droite (le serveur distant), faire un clic droit et créer un nouveau fichier.

    FilezillaPresentation

  • Renommer ce fichier avec l’extension html ou htm ( par exemple : page.html)  : clic droit > Renommer.

  • Puis ouvrir ce fichier : clic droit > Afficher/Editer.
    Si Notepad++ demande s’il doit remplacer la copie existante du fichier par la version du serveur : il faut répondre OUI.

0_ambulance Si Filezilla n’ouvre pas Notepad++  : menu  Edition > Paramètres > Edition des fichiers > cocher « Utiliser l’éditeur personnalisé : »  « C:\Program Files\Notepad++\notepad++.exe » et cocher aussi « Toujours utiliser l’éditeur par défaut ».

Première page web

La structure

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style2.css" />
        <title>Titre de l'onglet</title>
    </head > <!-- fin de la 1ère partie : l'entête (les réglages) -->
 
    <body>
        <h1>Un titre sur la page</h1>
        <p>
            Puis écrire le contenu du paragraphe ici.
            Tout apparaît en bloc.
        </p>
    </body> <!-- fin de la 2e partie : le corps (la partie visible) -->
</html>

Tout d’abord, on remarque qu’il y a plusieurs niveaux dans le balisage : les balises de 2ème niveau sont à l’intérieur de balises de 1er niveau. Ces différents niveaux sont marqués par des indentations afin de mieux s’y retrouver (cependant l’indentation n’a aucune incidence sur le résultat visuel).

Ensuite on remarque 2 styles de balises : les ouvrantes/fermantes et les auto-fermantes.

Balises ouvrantes/fermantes

  • La balise <p> ouvre un paragraphe. Puis la balise </p> indique la fin du paragraphe.

  • Les balises <h1>, <h2>, .. , <h6> marquent le début d’un titre de 1er, 2e,.. 6e niveau.
    Puis </h1>, </h2>, .. , </h6> indiquent la fin du titre.

Balises auto-fermantes

  • La balise <meta charset="utf-8" /> est une balise auto-fermante :

    • elle remplace la balise ouvrante suivie de sa balise fermante : <meta charset="utf-8"> </meta>
    • charset="utf-8" est appelé un attribut de balise (indiquant que la page web a été encodée en UTF-8, cela concerne les lettres accentuées  et caractères spéciaux).
    • En HTML5, on peut aussi noter : <meta charset="utf-8">
  • La balise <img src="photo.jpg" /> est une balise auto-fermante qui insère une image :

    • Le lien vers l’image est mis en attribut de balise : <img src="photo.jpg"></img>)
    • En HTML5, on peut aussi noter : <img src="photo.jpg">
  • La balise <br /> est une balise auto-fermante qui provoque un passage à la ligne (on l’utilise à l’intérieur d’un paragraphe). En HTML5, on la note aussi <br>.

NB : Dans la notation HTML 4, il y a bien un espace avant les caractères « /> ».

0_ambulance Si problème avec les lettres accentuées  : En fait, le navigateur affiche en utf-8 une page encodée en ANSI, donc pour corriger cela il faut enregistrer le fichier en UTF-8 dans Notepad++ : menu Encodage > UTF-8 (sans BOM).

Pour avoir la coloration syntaxique du HTML dans Notepad++ : menu Langage > H > HTML

Eléments Block ou Inline.

Dès qu’on voudra modifier le rendu esthétique (occupation de l’espace, dimensions, …) il faudra prendre conscience qu’il existe 2 sortes de balises : les balises block ou inline.

Eléments de type Block

Par défaut, les éléments de type Block sont affichés sur toute la largeur de la page avec un saut de ligne au début et à la fin. Parmi les balises Block :

  • <div>  : balise Block multi-usage, utilisée en CSS pour positionner un contenu dans la page.
  • <h1><h6> : titre, sous-titre …
  • <p> : paragraphe.
  • <ul>, <ol>, <dl> : listes (non ordonnée, ordonnée ou avec définition).
  • <li>, <dt>, <dd> : élément de liste, définition, titre de définition.
  • <table> : tableau.
  • <blockquote> : paragraphe indenté (décalé à droite) pour présenter une citation.
  • <pre> : bloc de code préformaté.
  • <section> : bloc d’une même thématique.
  • <form> : formulaire de saisie.

Eléments de type Inline

Les éléments de type inline se placent l’un à côté de l’autre (pas de saut de ligne) donc « en-ligne ». Les balises Inline sont :

  • <span> : balise Inline multi-usage pour appliquer un style CSS.
  • <a> : pour insérer une ancre (ou hyperlien).
  • <abbr> : pour expliquer une abréviation (en info-bulle).
  • <q>, <cite> : pour insérer une citation.
  • <strong>, <em>, <sup>, <sub> : pour mettre une portion de texte en gras, en italique, exposant, indice.
  • <mark> : faire ressortir visuellement une portion de texte (en le surlignant)  (l’effet est modifiable dans le CSS).
  • <img /> : image, permet de placer une image au milieu du flux de texte.
  • <br /> : pour insérer un saut de ligne.
  • <input>, <select> : champs de saisie dans un formulaire (qui ont l’exception de pouvoir être dimensionnés).

Mélange de balises Block et Inline.

D’une manière générale, il faut comprendre que :

  • Les éléments Inline doivent toujours se trouver à l’intérieur d’un Block (donc les hyperliens <a> et images <img /> sont à mettre dans un paragraphe ! ).

  • Généralement, un Block utilise toute la largeur de la page Web (donc il est normal qu’un tableau occupe toute la largeur de la page ! ).

Plus précisément, les 2 règles à respecter sont :

  1. Les éléments Block peuvent contenir des éléments Block ou Inline.

    Sauf une exception : Les paragraphes et les titres (<p> , <h1> ..) ne peuvent contenir que des éléments Inline !
    Donc pas de titres dans un paragraphe ; pas de paragraphes dans un paragraphe ; pas de liste dans un paragraphe !

    2

  2. Les éléments Inline ne peuvent contenir que des éléments Inline.

    3

Valider le code HTML par le W3C

Vérifiez votre code sur le site du W3C https://validator.w3.org et choisir parmi :

  • Validate by URI  pour un page déjà publiée ;
  • Validate by File Upload  pour une page enregistrée dans votre ordinateur ;
  • Validate by direct input  pour tester un bout de code (copier/coller). …. Puis  Check.

Le W3C (World Wide Web Consortium) est le nom de l’organisme créé par le fondateur du HTML (Tim Berners-Lee). Cet organisme définit les nouvelles versions des langages liés au Web.

Memento HTML du formulaire

Pour faire un quizz, c’est le Memento du formulaire : 1-HTML memento formulaires

Balises  structurantes  du HTML 5balise_structurante_HTML5

  • <header>  pour insérer une entête au site (une bannière, un logo, ..).
  • <footer>  pour insérer un pied de page au site (coordonnées de l’entreprise, CGV, …).
  • <nav>  pour rassembler les principaux liens de navigation (menu sous forme d’une liste à item <ul><li>)
  • <section>  pour regrouper des contenus qui ont la même thématique.
  • <aside>  pour insérer des informations complémentaires (souvent placées sur le côté).
  • <article> pour annoncer une partie indépendante (article de journal, de blog, …).

Cependant ces balises ne sont pas reconnues par les anciens Internet Explorer alors la solution est de rajouter un javascript HTML5shiv qui remède à cela (dans un commentaire conditionnel).

<head>
  <meta charset="utf-8" />
  <!--[if lt IE 9]>
  <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![ endif ] -->
  <title>Titre de la page</title>
</head>