Prérequis

Vous devez maîtriser le cours N°1 avant de suivre ce cours

L'auteur

Aurélie ARROT

Html et Css

Cours suivants :

COURS 1 : Prise en main d'Html

COURS 2 : Les balises et attributs HTML

COURS 3 : Intégration multimédia en HTML

COURS 4 : Les feuilles de styles CSS

COURS 2 : Les balises et attributs Html


 

 

LES OBJECTIFS :
Connaître le fonctionnement des balises et les utiliser, connaître les attributs des balises et les utiliser, utiliser les liens hypertexte, les images et les tableaux.

PUBLIC VISE : Tout utilisateurs qui souhaitent se former sur Html

 

 

PROGRAMME

 

Occupons-nous d'abord de l'entête.

Cela regroupe les balises que l'on mettra dans la balise "head"
On définit donc :
  • le titre de la page
  • quel encodage de caractères utiliser
  • la description
  • les options


  • comment définir l'entête d'une page Html?

    Il est possible de rajouter d'autres options dans l'entête :
  • le copyright
  • l'icône de la page
  • la langue
  • l'auteur de la page
  • la feuille de style associée (nous le verrons dans le cours N°4)


  • comment définir l'entête d'une page Html?

    Occupons-nous maintenant du corps du document

    Cela regroupe les balises que l'on mettra dans la balise "body"
    On défini ce qui sera affiché :

  • le grand titre : balise H1
  • les sous-titre : balises H2 à H6
  • les paragraphes : balise P
  • les sauts de ligne : balise BR


  • Il faut savoir qu'il y'a 2 façons de faire des sauts de ligne :

    1. avec la balise paragraphe (P)
    2. avec la balise BR
    Voici un premier exemple de contenu simple en html :

    comment insérer du contenu Html?

    Ici, dans le "body", nous retrouvons bien un grand titre dans la balise H1, puis un sous-titre dans la balise H2. Nous illustrons ensuite l'utilisation du paragraphe avec la balise P et enfin l'utilisation du saut de ligne simple avec la balise BR.

    Lorsque nous lançons notre page en local, voici le résultat dans le navigateur google chrome :


    Dans cet aperçu, on remarque :

    • Le titre de l'onglet dans le navigateur (balise head)
    • l'icône attribuée à la page (balise head)
    • Le grand titre du contenu de la page (balise body, H1)
    • Le sous-titre (balise H2)
    • Le paragraphe (balise P)
    • 2 lignes avec retour à la ligne simple (balise BR)


    Mettre en forme du texte :

    Les titres :

    Comme vu précédamment il est possible de mettre les titres en avant dans le contenu d'une page HTML, en utilisant les balises H1, H2, ...,H6.
    Cela représente 6 niveaux de titre, allant du grand titre (H1), au plus petit titre (H6).
    Il est très rare de voir les 6 niveaux dans une même page, généralement 3 ou 4 niveaux suffisent amplement.

    Par exemple :



    Modifier la mise en forme des caractères :

    Voici les principales balises de mise en forme :

    • Balise B : mise en gras
    • Balise I : mise en italique
    • Balise U : souligner
    • Balise FONT : permet de modifier la police de caractère grâce à ses attributs
    • Les listes : Balises UL, LI, OL : mettre en forme des listes


    Par exemple :

    Comment utiliser les balises de mise en forme en html ?

    Dans cet exemple, nous utilisons la balise FONT pour modifier la police de caractère, la couleur et la taille de la 1ère phrase. Pour se faire nous faisons appel aux attributs : size, color et face de la balise FONT. En effet, la balise FONT elle seule n'aura aucun impact, se sont ses attributs qui sont interessants.

    Ensuite, nous utilisons les balises B, U et I pour mettre en forme les caractères (gras, italique, souligner)

    Puis enfin, nous utilisons 2 types de listes :
  • Les listes non ordonées (avec un puce) : balise LU et LI
  • Les listes ordonées (avec numéroation): balise OL et LI


  • Voici un aperçu du résultat :



    Les liens :

    Les liens hypertextes offrent la possibilité de passer d'une page à une autre, ou d'un site à un autre.
    Pour insérer un lien hypertexte il faut utiliser la balise A.

    Cette balise possède plusieurs attributs :

  • href : permet d'indiquer sur quoi pointe le lien.
  • name : permet de nommer l'endroit de la page.


  • Voici un exemple d'utilisation de lien hypertexte en Html :

    Faire un lien hypertexte en Html avec la balise A href

    Aperçu dans le navigateur :



    Préparation des images :

    Un navigateur met plus ou moins de temps à afficher une page Web. Cela dépend du contenu et des ressources de la page.

    A noter qu'en référencement naturel (SEO), le temps de chargement a un impact sur le positionnement de votre site Web.

    Ainsi, avant d'insérer une image dans votre page, enregistrez-là dans l'un des 3 formats optimisés suivants :

  • Jpeg (.jpg) : très répandu, idéal pour les images avec des dégradés de couleur.
  • Png (.png) : utilisé pour des images avec un fond transparent.
  • Gif (.gif) : utilisé pour des images avec applats de couleur, mais aussi pour de courte animation.


  • Une fois que vous avez mis votre image au bon format, il faut l'insérer dans votre page.
    Pour ce faire, il faut au préalable stocké l'image dans un dossier.

    Généralement, lorsque vous débuter un petit site, vous vous créer un répertoire dans votre ordinateur avec le nom du site, dans lequel vous allez rangez vos pages Html, mais aussi créer différents dossier dont vous aurez besoin. Vous aurez donc un dossier images dans lequel vous allez stocker toutes les images nécessaires à votre site.

    Voici un exemple :



    Placer une image :

    Pour insérer une image vous devez utiliser la balise IMG qui possède plusieurs attributs :
    • SRC : la source. Permet de préciser le chemin de l'image
    • ALT : permet d'ajouter une description concernant l'image qui apparaîtra si l'image ne peut pas s'afficher. Cet attribut est important pour le référencement naturel de votre site.
    • Width et Height : spécifient la largeur et la hauteur de l'image. Dans le cas échéant, le navigateur calculera lui-même la taille des images automatiquement.
    • Ismap : précise qu'il s'agit d'une image réactive (côté serveur)
    • Usemap : indique qu'il s'agit d'une image réactive (côté client)
    • Align : détermine la position de l'image par rapport au texte qui l'entoure. Cet attribut possède les options : left (valeur par défaut), right, top, bottom et middle.
    • Border : épaisseur de la bordure qui encadre l'image
    • Hspace : définit une marge à droite et à gauche de l'image. Prend un nombre en pixel
    • Vspace : définit une marge avant et après l'image. Prend un nombre en pixel


    Exemple d'utilisation en HTML :

    Utilisation de la balise IMG en HTML

    Le résultat dans le navigateur :



    Les images réactives

    Il s'agit d'un concept reprenant les images-lien et aussi les images de carte réactives. nous présenteront ici que les images-lien, les cartes réactives nécessite un découpe de zone sensible sur l'image en question (Balise MAP et AREA), la description des zones sensibles à la main est fastidueuse, nous vous suggérons de les programmer à l'aide d'un logiciel éditeur comme Dreamweaver ou Frontpage.

    Les images-lien :

    Dans ce cas, l'ancre du lien est une image et non un texte. Cela signifi qur lorsque nous allons cliquer sur cette image nous allons atterir sur une autre page ou un autre site.
    La forme la plus simple d'image réactive est obtenue en plaçant une image à l'intérieur de la balise A :

    Une image lien en html avec la balise A

    Ici, lorsque nous cliquerons sur l'image logoHtml.jpg, nous accéderont à la page coursHtml.html.

    Les tableaux ont une structure plus complexe composée de plusieurs balises :

  • La balise TABLE :permet la création du tableau
  • La balise TR : permet de créer une nouvelle ligne dans le tableau
  • La balise TD : permet de créer des cellules sur la ligne (un peu comme une colonne)


  • A noter que si la cellule est un intituté de colone, la balise TD peut être remplacer par la balise TH.

    Reprenons notre exemple, à la suite insérer le tableau HTML suivant :

    Comment faire un tableau simple en HTML ?

    Il est interessant d'utiliser les attributs de la balise TABLE :

  • BORDER : permet de rajouter une bordure au tableau


  • CELLPADDING : permet de modifier l'espace entre le texte et les bords des cellules


  • CELLSPACING : permet de modifier l'espace entre 2 cellules


  • WIDTH : permet de spécifier la largeur du tableau




  • Attributs de cellules :

    Les balises TD ou TH ont aussi des attribus. Par exemple pour chaques cellules on peut sépcifier une largeur avec WIDTH :



    Il est également possible de préciser l'alignement horizontal (align) et vertical (valign).



    Une utilisation détournée des tableaux :

    Il n'est pas rare en HTML de voir passer ce genre de mise en page grâce aux tableaux :

    Utiliser un tableau HTML pour mettre en page du texte et une image côte à côte

    Le role de la balise DIV est de définir une "division" ou une section au sein de votre page HTML. Elle est utilisée pour regrouper des éléments sous forme de "bloc". Ainsi il sera plus simple de les formater en CSS, mais c'est également conseillé de structurer sa page avec des blocs pour le responsive.

    Syntaxe de la balise DIV en HTML

    La balise DIV est aussi utilisée pour faire des calques dynamiques (menu déroulant par exemple). La tendance actuelle étant plutôt l'utilisation des Listes (UL et OL) pour les menus déroulants, mais on peut passer par du Javascript également.

    Dans notre site, notre menu est géré avec une DIV et des listes, ainsi que du CSS :

    Syntaxe de la balise DIV dans un menu avec les balises liste et du CSS

     

    EXERCICES

    Les bases HTML

    EXERCICE : Lettre au père Noël exercices
    EXERCICE : Les tableaux en HTML exercices

    Contact

    SARL AAT's

    N° SIREN : 822580056 - N° TVA intracommunautaire : FR40822580056