Scribd Logo
Importer

Bienvenue sur Scribd !

  • Cours HTML

    Transféré par

    Najoua Chaarana
    16 vues19 pages

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PPTX, 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 PPTX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    16 vues19 pages

    Cours HTML

    Transféré par

    Najoua Chaarana

    Droits d'auteur :

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

    Institut Supérieur des Sciences Appliquées et de

    Technologies De Kairouan

    COURS HTML
    (Hypertext Markup language)

    chaarana.najwa@gmail.com
    14/12/2022 2

    Plan du cours
    TITRE DE LA PRÉSENTATION

    - qu'est-ce que html?


    - Structure code Html
    INTRODUCTION HTML

    QU'EST-CE QUE LE HTML ?

    HTML(HyperText Markup Language) n'est pas un langage de programmation : c'est un langage de


    balisage qui sert à indiquer au navigateur comment structurer les pages web visitées. Il peut être aussi
    compliqué ou aussi simple que le développeur web souhaite qu'il soit.
    Le HTML se compose d'une série d'éléments avec lesquels vous pouvez encadrer, envelopper
    ou baliser différentes parties du contenu pour les faire apparaître ou agir d'une certaine manière.
    Des balises encadrantes peuvent transformer une petite partie de contenu en un lien vers une autre page sur
    le Web, mettre des mots en italique, etc.

    3
    INTRODUCTION HTML
    Un document HTML simple

    •La <!DOCTYPE html>déclaration définit que ce document est un


    document HTML5

    •L' <html>élément est l'élément racine d'une page HTML

    •L' <head>élément contient des méta-informations sur la page HTML

    •L' <title>élément spécifie un titre pour la page HTML (qui s'affiche


    dans la barre de titre du navigateur ou dans l'onglet de la page)

    •L' <body>élément définit le corps du document et est un conteneur


    pour tous les contenus visibles, tels que les titres, les paragraphes,
    les images, les hyperliens, les tableaux, les listes, etc.

    •L' <h1>élément définit un grand titre

    •L' <p>élément définit un paragraphe


    4
     Afficher la page HTML dans votre navigateur
    Ouvrez le fichier HTML enregistré dans votre navigateur préféré (double-cliquez sur le fichier ou faites un clic
    droit - et choisissez "Ouvrir avec").
    Le résultat ressemblera beaucoup à ceci :

    le rôle du navigateur

    Les rôles du HTML et du CSS se complètent. Mais ensuite, c’est le navigateur web qui fait le reste du
    travail : lire le code HTML et CSS pour afficher un résultat visuel à l'écran. Si votre code CSS dit “Les
    titres sont en rouge”, alors le navigateur affichera les titres en rouge.
    Le rôle du navigateur est donc essentiel !
    En-têtes HTML

    Les titres HTML sont définis avec les balises <h1>to .<h6>


    <h1>définit la rubrique la plus importante.  <h6>définit la rubrique la moins importante : 

    Exemple:
    Paragraphes HTML
    Les paragraphes HTML sont définis avec la <p>balise :

    Exemple:

    Liens HTML
    Les liens HTML sont définis avec la <a>balise :

    La destination du lien est spécifiée dans l' hrefattribut. 


    Les attributs sont utilisés pour fournir des informations supplémentaires sur les éléments HTML.
    Vous en apprendrez plus sur les attributs dans un chapitre ultérieur.
    7
    Comment afficher la source HTML
    Avez-vous déjà vu une page Web et vous êtes-vous demandé « Hé ! Comment ont-ils fait
    ça ?
    Afficher le code source HTML :

    Faites un clic droit dans une page HTML et sélectionnez "Afficher la source de la page" (dans
    Chrome) ou "Afficher la source" (dans Edge), ou similaire dans d'autres navigateurs. Cela
    ouvrira une fenêtre contenant le code source HTML de la page.
    Inspectez un élément HTML :

    Faites un clic droit sur un élément (ou une zone vide), et choisissez "Inspecter" ou "Inspecter
    l'élément" pour voir de quoi sont composés les éléments (vous verrez à la fois le HTML et le
    CSS). Vous pouvez également modifier le code HTML ou CSS à la volée dans le panneau
    Éléments ou Styles qui s'ouvre.

    8
    Éléments HTML
    Un élément HTML est défini par une balise de début, du contenu et une balise de fin.

    L' élément HTML est tout, de la balise de début à la balise de fin :

    Exemples de certains éléments HTML :

    Remarque : Certains éléments HTML n'ont pas de contenu (comme l'élément <br>). Ces éléments sont
    9
    appelés éléments vides. Les éléments vides n'ont pas de balise de fin !
    Éléments HTML imbriqués
    Les éléments HTML peuvent être imbriqués (cela signifie que les éléments peuvent contenir d'autres éléments)
    Tous les documents HTML sont constitués d'éléments HTML imbriqués.
    L'exemple suivant contient quatre éléments HTML ( , <html>et <body>) :<h1><p>

    Attributs HTML
    •Tous les éléments HTML peuvent avoir des attributs
    •Les attributs fournissent des informations supplémentaires sur les éléments
    •Les attributs sont toujours spécifiés dans la balise de début
    •Les attributs viennent généralement dans des paires nom/valeur comme : nom="valeur"

    10
    L'attribut href
    La <a>balise définit un lien hypertexte. L' href attribut spécifie l'URL de la page vers laquelle le lien va :

    • L'attribut le plus important de l' <a> élément est l' href attribut, qui indique la destination du lien.
    • Le texte du lien est la partie qui sera visible pour le lecteur.
    • Cliquer sur le texte du lien enverra le lecteur à l'adresse URL spécifiée.
    Exemple:

    L'attribut src
    La <img>balise est utilisée pour intégrer une image dans une page HTML.
    L' src attribut spécifie le chemin vers l'image à afficher :

    11
    Il existe deux manières de spécifier l'URL dans l' src attribut :

    1. URL absolue - Liens vers une image externe hébergée sur un autre site Web. Exemple
    : src="https://www.w3schools.com/images/img_girl.jpg" .

    2. URL relative - Liens vers une image hébergée sur le site Web. Ici, l'URL n'inclut pas le nom de domaine. Si l'URL
    commence sans barre oblique, elle sera relative à la page en cours. Exemple : src="img_fille.jpg". Si l'URL commence
    par une barre oblique, elle sera relative au domaine. Exemple : src="/images/img_fille.jpg".

    Conseil : Il est presque toujours préférable d'utiliser des URL relatives. Ils ne se briseront pas si vous
    changez de domaine.

    Les attributs largeur et hauteur


    La <img>balise doit également contenir les attributs width et height, qui spécifient la largeur et la hauteur
    de l'image (en pixels) :

    L'attribut alt
    L' alt attribut required pour la <img> balise spécifie un texte alternatif pour une image, si l'image ne peut pas
    être affichée pour une raison quelconque.  12
    Cela peut être dû à une connexion lente, ou à une erreur dans l' src attribut, ou si l'utilisateur
    utilise un lecteur d'écran.
    <img src="img_girl.jpg" alt="Girl with a jacket">

    Citations simples ou doubles ?


    Les guillemets doubles autour des valeurs d'attribut sont les plus courants en HTML, mais les guillemets
    simples peuvent également être utilisés.

    Dans certaines situations, lorsque la valeur de l'attribut elle-même contient des guillemets doubles, il est
    nécessaire d'utiliser des guillemets simples :

    Ou vice versa:

    13
    Listes HTML
    HTML LISTS

    Les listes HTML permettent aux développeurs Web de regrouper un ensemble d'éléments
    connexes dans des listes.

    Liste HTML non ordonnée


    Une liste non ordonnée commence par la <ul>balise. Chaque élément de la liste commence par la <li> balise.
    Les éléments de la liste seront marqués par des puces (petits cercles noirs) par défaut :
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    14
    </ul>
    Liste HTML ordonnée
    Une liste ordonnée commence par la <ol>balise. Chaque élément de la liste commence par la <li>balise.
    Les éléments de la liste seront marqués par des numéros par défaut :

    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>

    Listes de description HTML


    HTML prend également en charge les listes de description.
    Une liste de description est une liste de termes, avec une description de chaque terme.
    La <dl>balise définit la liste de description, la <dt>balise définit le terme (nom) et la <dd> balise décrit
    chaque terme :
    <dl>
      <dt>Coffee</dt>
      <dd>- black hot drink</dd>
      <dt>Milk</dt>
      <dd>- white cold drink</dd>
    </dl>
    Résumé du chapitre
    Éléments HTML
    Les attibuts
    •Tous les éléments HTML peuvent avoir des attributs
    •L' href attribut de <a>spécifie l'URL de la page vers laquelle le lien va
    •L' src attribut de <img>spécifie le chemin vers l'image à afficher
    •Les attributs width et fournissent des informations sur la taille des images height<img>
    •L' alt attribut de <img>fournit un texte alternatif pour une image
    •L' style attribut est utilisé pour ajouter des styles à un élément, tels que la couleur, la police, la taille, etc.
    •L' lang attribut de la <html>balise déclare la langue de la page Web
    •L' title attribut définit des informations supplémentaires sur un élément
    LISTES HTML
    •Liste non ordonnées
    •Listes ordonnées
    •Autres listes

    16
    Vue d'ensemble : HTML, CSS et JavaScript

    Quiconque connaît JavaScript sait qu'il a quelque chose à voir avec HTML et CSS. Mais quelle est la
    relation entre ces trois? Permettez-moi d'expliquer cela avec une analogie.

    17
    TITRE DE LA PRÉSENTATION

    Comprenez le rôle du CSS

    Le CSS (Cascading Style Sheets, aussi appelées feuilles de style) a pour rôle de gérer l'apparence de la page
    web (agencement, positionnement, décoration, couleurs, taille du texte…).
    Le CSS a besoin d'une base en HTML pour fonctionner. C'est pour cela que nous allons d'abord apprendre à
    coder en HTML avant de nous occuper du style en CSS. Vos premières pages ne seront donc pas des plus
    esthétiques au début, mais c'est normal et cela ne durera pas longtemps.

    18
    19

    Vous aimerez peut-être aussi