Scribd Logo
Importer

Bienvenue sur Scribd !

  • Cours HTML

    Transféré par

    Tokai
    1 vues7 pages

    Titre original

    cours HTML

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    1 vues7 pages

    Cours HTML

    Transféré par

    Tokai

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 7

    Spécialité NSI

    Interactions entre l’homme et la machine sur le Web


    Création d’une page Web avec HTML

    Éléments de cours
    HTML ou CSS?
    • Pour créer un site web, il est nécessaire d’utiliser les langages HTML et CSS (version 5 et 3 actuellement). Et
    selon nos besoins d’autres langages peuvent aussi devenir nécessaires (comme le PHP, Javascript ou MySQL).
    Cependant, il existe également des logiciels pour automatiser un peu les choses...

    • L’utilisation de 2 langages différents peut parraître fastidieux, mais cela présente en fait beaucoup
    d’avantages car le HTML et le CSS n’ont pas du tout le même rôle ! Le HTML permet d’organiser le contenu du site
    (sans se soucier de l’aspect visuel), et c’est grâce au CSS que l’on donnera ensuite l’apparence voulue ! Cette
    séparation du fond et de la forme permet notamment :
    — de pouvoir réfléchir au contenu du site de manière efficace (sans perdre de temps avec la mise en page),
    — et surtout de pouvoir modifier l’apparence du site à volonter, en ne modifiant que quelques paramètres, sans
    avoir à relire et modifier tout le site « à la main » !

    Interface pour coder


    • Pour coder un site web, on a simplement besoin d’un éditeur de texte ! Mais pour plus de confort, il vaut mieux
    choisir un éditeur capable de reconnaître le langage HTML (offrant ainsi des avantages comme : un code en
    couleur donc une meilleure lisibilité, une complétion automatique, etc...). Citons notamment les logiciels
    Notepad++ (uniquement sous Windows) ou Sublime Text, parfaits pour cela.

    • Pour créer une page web, il suffit d’ouvrir un nouveau fichier, puis de l’enregistrer avec l’extension .html !

    Navigateurs pour interpréter


    • Le HTML est un langage interprété, c’est-à-dire qu’il faut un logiciel pour exécuter le code à chaque fois que l’on
    veut voir le résultat. Or, tous les navigateurs sont capables d’interpréter un fichier .html (par exemple Firefox,
    Chrome, Internet Exploreur...). Donc pour exécuter notre code, il suffit de l’ouvrir avec n’importe quel navigateur !
    (Ou d’actualiser la page si elle est déjà ouverte...) • ATTENTION, coder un site web pose cependant plusieurs
    problèmes techniques :

    — le langage HTML évolue avec le temps, et les navigateurs doivent donc être mis à jour régulièrement
    (une personne utilisant une vielle version peut donc avoir des problèmes pour consulter certains sites...),
    — et les navigateurs n’interprètent pas tous exactement de la même manière un même code ! (Et cela est
    d’autant vrai avec des navigateurs conçu pour smartphones ou tablettes...) Il faut donc vérifier régulièrement
    sur plusieurs navigateurs que notre site fonctionne bien comme on le veut !
    Spécialité NSI

    Balises et attributs
    • Le HTML n’est pas un langage de programmation (car on ne crée pas de variables), mais plutôt un langage

    de description, qui utilise des « balises » pour décrire ce que l’ordinateur (ou le navigateur) doit faire...

    • Les balises sont reconnaissables grâce aux chevrons < et >. On distingue deux type de balises : « en paire »
    ou « orpheline » (voir ci-dessous). La plupart des balises acceptent également des attributs, c’est-à-dire des
    infromations complémentaires qu l’on précise juste après le nom de la balise (entre les <>), et qui ont souvent une
    valeur.
    Balises en paire : 2 balises (début et fin) permettant d’indiquer la nature de ce qui est à l’intérieur...

    <nom> contenu </nom>


    <nom attrib1="val1" attrib2="val2" ...> contenu </nom>
    Balise orpheline :1 balise, permettant en général d’insérer quelque chose à un endroit précis...

    <nom/>
    <nom attrib1="val1" attrib2="val2" .../>

    Structure globale du code

    • Un ficher .html commence toujours par une en-tête, qui précise le type du document (avec DOCTYPE), et
    toutes les informations nécessaires au navigateur pour interpréter le code (surtout l’encodage des caractères
    spéciaux en UTF-8, et le titre à afficher dans l’onglet du navigateur...). Enfin, tout le contenu du fichier doit toujours
    être encadrée par une balise <html>, donc l’en-tête est de la forme :

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title> Titre de l’onglet </title>
    </head>
    • Après l’en-tête vient tout le corps du site web (encadré par une balise <body>), c’est-à-dire toutes les
    informations à afficher à l’écran sur le site ! Et l’on n’oublie pas de refermer les balises ouvertes avec </body> et
    </html> à la fin du ficher :
    <body>
    ...
    </body>
    </html>
    Spécialité NSI

    Organisation du texte

    • Les principales balises organiser le contenu d’un site web sont :

    <p> ... </p> Pour délimiter les paragraphes.


    <br/> Pour insérer un retour-à-la-ligne (même dans un paragraphe).
    <h1> ... </h1> De h1 à h6, à utiliser dans l’ordre ! Pour créer des titres et sous-titres.

    • Il existe quelques balises de mise en forme par défaut (surtout utiles au référencement) :

    <em> ... </em> Pour mettre un peu en valeur du texte (souvent en italique...). <strong> ... </strong> Pour
    mettre beaucoup en valeur du texte (souvent en gras...).
    <mark> ... </mark> Pour faire ressortir visuellement du texte (souvent surligné...).

    • Mais il est possible aussi d’organiser le texte dans une structure plus complexe, comme une liste à puces
    (avec <ul>) ou une liste ordonnée (avec <ol>)... Chaque élément est alors délimité par une balise <li>. (Les listes de
    description existent également, mais avec <dl>, <dt> et <dd> comme délimitateurs...).
    <ul>
    <li> blabla1 </li>
    <li> blabla2
    </li>
    </ul>

    • De même, on peut créer des tableaux avec <table>. Les lignes sont délimitées avec la balise <tr>, les
    cellules de la première ligne avec <th>, et les suivantes avec <td>. De plus, la balise (facultative) <caption> permet
    de délimiter le titre du talbeau. Par exemple, pour un tableau à 2 colonnes et 3 lignes :

    <table>
    <caption> ...Un titre... </caption>
    <tr><th> ... </th><th> ... </th></tr>
    <tr><td> ... </td><td> ... </td></tr>
    <tr><td> ... </td><td> ... </td></tr>
    </table>

    Création de liens

    • Pour créer un lien on utilise la balise <a>, avec l’attribut href qui récupère le chemin de l’objet ciblé (et peut
    prendre différents types de valeurs !), et en précisant le contenu (texte, image, etc...) qui formera le lien sur le site.
    On rencontre le plus souvent 2 types de liens, selon que l’on indique :
    — un chemin absolu : qui commence par http:// et redirige vers un autre site web sur internet...
    Spécialité NSI

    <a href="http://google.fr"> Ici google... </a>


    — ou un chemin relatif : qui donne directement le nom du fichier à ouvrir... Mais le fichier doit se trouver dans le
    même dossier que la page en cours ! Autrement, on peut utiliser dossier/ s’il se trouve dans un sous-dossier,
    ou ../ s’il se trouve dans un dossier parent.

    <a href="page2.html"> Vers page 2 </a>


    <a href="dossier/page2.html"> Vers page 2 </a>
    <a href="dossier1/dossier2/page2.html"> Vers page 2
    </a>
    <a href="../page2.html"> Vers
    page 2 </a> <a href="../../page2.html"> Vers page 2
    </a> ...

    Insertion d’images
    • Sur le web, il faut trouver un compromis entre qualité des images et temps de chargement du site ! C’est

    pourquoi il est fortement conseillé de n’utiliser que les formats suivants, selon l’usage souhaité :

    PNG Pour la plupart des images (8 ou 24 bits selon le nombre de couleurs...).


    JPEG Pour les photos.
    GIF animé Pour des images animés...

    • Pour charger une image, on utilise la balise <img/> avec l’attribut src pour indiquer le chemin de l’image (et

    idéalement l’attribut alt pour afficher un message en cas d’erreur, pour le référencement, etc...) :

    <img
    src="image.png"/>
    <img
    src="dossier/image.png"/> ...
    • ATTENTION : De manière générale, il faut éviter les espaces, accents et majuscules dans les noms en HTML

    (pour les noms d’images, fichiers, dossiers...) !

    Création d’un formulaire

    • Un formulaire doit être encadré par un balise <form>, qui permet de spécifier ce qui devra être fait des
    informations reçues avec l’attribut action (envoie par mail, traitement PHP, etc...), et la manière dont il sera envoyé
    avec l’attribut method (vallant "post" par défaut, ou "get" sinon, voir cours de PHP). Par exemple :
    <form method="post"
    action="code.php">
    ...
    </form>
    • Chaque élément du formulaire est ensuite délimités par un bloc de type paragraphe ( <p>), dans lequel on
    peut préciser une légende avec <label>, et le champ lui-même. Le champ doit alors avoir un attribut id pour faire le
    Spécialité NSI

    lien avec la légende associée, qui utilise l’attribut for. De plus, le champ peut également contenir un attribut name
    utile en cas de traitement PHP... (ayant par exemple la même valeur que le id...).

    • Par exemple, la création d’une zone de texe monoligne s’effectue via la balise <input type="text", et les

    attributs optionnels possibles sont :

    size pour agrandir le champ (en nombre de caractères)

    maxlength pour limiter le nombre de caractères qui peuvent être saisis

    value pour pré-remplir le champ avec une valeur par défaut


    placeholder pour donner une indication qui disparaîtra lors d’un clic
    Un code possible est alors :

    <p>
    <label for="prenom"> Quel est votre prØnom? </label>
    <input type="text" id="prenom" name="prenom"
    maxlength=15/>

    </p>

    • La création d’une zone de texte multiligne s’effectue de manière analogue via la balise <textarea>, dont les

    dimensions sont modifiables grâce aux attributs rows et cols.

    • La création de cases à cocher s’effectue via la balise <input type="checkbox"/>, que l’on peut cocher par
    défaut grâce à l’attrubut checked (sans valeur). En revanche, il est préférable alors de placer la légende après la
    balise dans ce cas, et de séparer plusieurs case par de simple retours-à-la-ligne ( <br/>), comme suit :

    <p> Quelles matiŁres aimez-vous? <br/>


    <input type="checkbox" cheched id="math" name="math"/>
    <label for="math"> J’aime les maths. </label>
    <br/>
    <input type="checkbox" id="info" name="info"/>
    <label for="info"> J’aime l’informatique. </label>

    </p>

    • Pour une liste à choix unique, on utilise <input type="radio"/>, en spécifiant obligatoirement la même

    valeur pour l’attribut name, et des valeurs différentes pour l’attribut value (comme pour id). Par exemple :

    <p> Voulez-vous gagner une semaine de vacances? <br/>


    <input type="radio" id="oui" name="sondage" value="oui"/>
    <label for="oui"> Oui </label>
    <br/>
    <input type="radio" id="non" name="sondage" value="non"/>
    <label for="non"> Non </label>
    Spécialité NSI

    </p>
    • Ou l’on peut aussi créer une liste déroulante avec <select>, en spécifiant chaque option avec <option>
    dont l’attribut value doit être unique. De plus, l’attribut sans valeur selected peut servir à en selectionner une par
    défaut.

    <p>
    <label for="couleur"> Quelle couleur prØfØrez-vous? </label>
    <select id="couleur" name="couleur">
    <option value="bleu" selected> Bleu </option>
    <option value="rouge"> Rouge </option>
    </select>
    </p>
    • Enfin, certaines actions peuvent s’effectuer à l’aide de boutons. En particulier, pour la validation en fin de
    formulaire on utilise <input type="submit"/>, et pour le bouton de remise à zero <input type="reset"/>.
    L’attribut value permet alors de changer le texte affiché dans le bouton.

    Commentaires • Enfin, il est possible (et très conseillé) d’écrire des commentaires dans un fichier

    HTML avec :

    <! - blabla ->


    • Mais ATTENTION : Le code d’un site internet est public ! C’est-à-dire visible de tous (par un simple clic droit

    sur la page). Donc il ne faut jamais écrire d’informations confidentielles... même en commentaire !

    POUR APPROFONDIR Æ Chacun est libre de s’intéresser (ou pas) aux outils ou notions ci-dessous.
    → Il est bien sûr possible de créer des tableaux plus compliqué, avec des cellules fisionnées par exemple grâce aux
    attributs colspan et rowspan des balises th et td...
    → Il existe aussi beaucoup d’autres types de liens : vers un endroit précis sur une page (avec id et #), vers une
    messagerie (avec mailto:), vers un fichier à télécharger (en donnant le nom du fichier !)...
    → En plus des images, on peut bien sûr insérer également des vidéos ou des musiques dans une page HTML. L’attribut
    → "type" de la balise <input> dans un formulaire possède de nombreuses autres valeurs pour diverses utilitées,
    comme : password, email, tel, date, time, number, url, range, color, search, ...
    → Et d’autres possibiltés sont offertes dans les formulaires, comme le placement automatique du curseur dans un
    champ avec l’attribut autofocus, ou l’obligation de renseigner un des champs avec required...

    Vous aimerez peut-être aussi