HTML

11 January 2021

Le langage HTML intervient pour la création de site web. C’est un langage facile à apprendre qui permet de définir le contenu des pages web HTML est devenu un langage incontournable pour internet. Le HTML est simple, et vous permet de mettre en place un site internet gratuitement.

1. Structure d'une page internet.

• Page HTML






• Format mobile






• Structure d'une page



  
     //en-tête

        //menu

 
    //section de page

 
    //article

      //informations complémentaire

     //pied de page

2. Organiser son texte :

 
         un paragraphe




             retour a la ligne



             ligne horizontal



            pour avoir une espace insécable



            pour deux espaces



            pour quatre espaces





• Mise en valeur :

Au sein de vos paragraphes, certains mots sont parfois plus importants que d'autres et vousaimeriez les faire ressortir.



             Texte italique



     Mise en gras





• Titre / Sous titre :

   
   
    ect ...



      Titre de la page

Titre niveau 1


Titre niveau 2
     

Titre niveau 3
     

Titre niveau 4
     

Titre niveau 5
     

Titre niveau 6

Résultat

3. Liens / Images :

• Ouvre un autre site :



nom





• Ouvre un autre onglet :



message





• Indique une Info bulle :



message





• e-mail :



Envoyez-moi un email






---





Les images




JPG pour les photos

PNG pour les logos ou illustration

GIF pour les animations





• Afficher une image :



Toujours mettre un l'interieur d'un paragraphe (sauf dans une figure)


Placer mon image dans un paragraphe ou dans une figure ?


Si elle n'apporte aucune information (c'est juste une illustration pour décorer) : placez l'image dans un
paragraphe. Si elle apporte une information : placez l'image dans une figure.


---





Les figures



Ce sont des éléments qui viennent enrichir le texte pour compléter les informations de la page. les figures peuvent être de différents types : images ; codes source ; citations ; etc.



Exemple :








Résultat


















La balise figcaption = libellé (commentaire)





• une figure peut très bien comporter plusieurs images :

4. Video-Musique :

• Afficher une vidéo :






• Différent attributs a connaître :




poster="image à afficher pour le début"



width="pour modifier la largeur de la vidéo."



height="pour modifier la hauteur de la vidéo."



controls: pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.

Musique

• Insertion d'une musique :






• Attributs :




controls: pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.



width="pour modifier la largeur de l'outil de lecture audio."



loop="la musique sera jouée en boucle."



autoplay: la musique sera jouée dès le chargement de la page. Évitez d'en abuser

5. Les Tableaux :

• Un tableau simple :

La première balise à connaître   indique le début et la
fin d'un tableau. Cette balise est de type bloc, il faut donc la placer en dehors d'un paragraphe.


Ceci est un paragraphe avant le tableau.




   





• Qu'est-ce qu'on écrit à l'intérieur du tableau ?




 : indique le début et la fin d'une ligne du tableau.



 : indique la ligne d'en-tête sur cette photo (nom, age, pays).



 : indique le début et la fin du contenu d'une cellule.











Exemple :




    

        

        

        

    

    

        

        

        

    

    

        

        

        

    

    

        

        

        

    
nom
age
pays
Anne
27 ans
France
Carmen
33 ans
Espagne
Michelle
26 ans
Etats-Unis




Résultat





C'est un tableau ça ? pff il n'y a même pas de bordures !





• Ajouter dans le fichier CSS :



table

{                                       /*collapse: les bordures seront collées entre elles */

    border-collapse: collapse;          /*separate: les bordures seront dissociées (valeur par défaut) */

}

td, th

{

    border: 1px solid black;            /* Mettre une bordure sur les td ET les th */

}




nom	age	pays
Anne	27 ans	France
Carmen	33 ans	Espagne
Michelle	26 ans	Etats-Unis




Voilà qui est mieux !




• Titre du tableau :

Normalement, tout tableau doit avoir un titre.
Le titre permet de renseigner rapidement le visiteur sur le contenu du tableau.


: Cette balise se place tout au début du tableau, juste avant l'en-tête.




Code HTML




    

    

        

        

        

    

    

        

        

        

    

    

        

        

        

    

    

        

        

        

    
Passagers du vol 377
nom
age
pays
Anne
27 ans
France
Carmen
33 ans
Espagne
Michelle
26 ans
Etats-Unis




Résultat




Passagers du vol 377

nom	age	pays
Anne	27 ans	France
Carmen	33 ans	Espagne
Michelle	26 ans	Etats-Unis