HTML

11 January 2021

image de l'article

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.

Table des matières

1. Structure d'une page internet

2. Organiser son texte

3. Liens / Images

4. Video-Musique

5. Les Tableaux

1. Structure d'une page internet.

Page HTML

<!DOCTYPE html>

<html lang="fr">

    <head>

        <title>Titre de la page</title>

        <meta charset="utf-8">

    </head>

<body>



</body>

</html>

Format mobile

<!DOCTYPE html>

<html lang="fr">

    <head>

        <title>Titre de la page</title>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

<body>



</body>

</html>

Structure d'une page

<header>  </header>     //en-tête

<nav>     </nav>        //menu

<section> </section>    //section de page

<article> </article>    //article

<aside>   </aside>      //informations complémentaire

<footer>  </footer>     //pied de page

2. Organiser son texte :

<p> </p>         un paragraphe




             retour a la ligne



<hr>             ligne horizontal



            pour avoir une espace insécable



            pour deux espaces



            pour quatre espaces

Mise en valeur :

<em> </em>            Texte italique



<strong> </strong>    Mise en gras

Titre / Sous titre :

<h1></h1>   <h2></h2>   <h3></h3>    ect ...



<title> </title>      Titre de la page

<h1>Titre niveau 1</h1>

<h2>Titre niveau 2</h2>     

<h3>Titre niveau 3</h3>     

<h4>Titre niveau 4</h4>     

<h5>Titre niveau 5</h5>     

<h6>Titre niveau 6</h6>

Résultat

Titre niveau 1

Titre niveau 2

Titre niveau 3

Titre niveau 4

Titre niveau 5

Titre niveau 6

3. Liens / Images :

Ouvre un autre site :

<a href="https://www.deepl.com/translator">nom</a>

Ouvre un autre onglet :

<a href="https://www.deepl.com/translator" target="_blank">message</a>

Indique une Info bulle :

<a href="http:.." title="info bulle">message</a>

e-mail :

<p><a href="mailto:email" >Envoyez-moi un email</a></p>

Les images

JPG pour les photos

PNG pour les logos ou illustration

GIF pour les animations

Afficher une image :

<img src="images/image.jpg" alt="image" />

Placer mon image dans un paragraphe ou dans une figure ?

Les figures

Exemple :

<figure>

    <img src="images/figure.png" alt="image" />

</figure>

<figure>

    <img src="images/figure.png" alt="image" />

    <figcaption>UNE FIGURE</figcaption>

</figure>

Résultat

La balise figcaption = libellé (commentaire)

une figure peut très bien comporter plusieurs images :

<figure>

    <img src="images/1.png" alt="commentaire" />

    <img src="images/2.png" alt="blablabla" />

    <img src="images/3.png" alt="lol" />

<figcaption>commentaire</figcaption>

4. Video-Musique :

Afficher une vidéo :

<video src="mavideo.avi" controls poster="monimage.jpg" width="600"></video>

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 :

<audio src="hype_home.mp3" controls></audio>

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 :

<p>Ceci est un paragraphe avant le tableau.</p>

<table>

   <!-- Ici, on écrira le contenu du tableau -->

</table>

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 :

<table>

    <tr>

        <th>nom</th>

        <th>age</th>

        <th>pays</th>

    </tr>

    <tr>

        <td>Anne</td>

        <td>27 ans</td>

        <td>France</td>

    </tr>

    <tr>

        <td>Carmen</td>

        <td>33 ans</td>

        <td>Espagne</td>

    </tr>

    <tr>

        <td>Michelle</td>

        <td>26 ans</td>

        <td>Etats-Unis</td>

    </tr>

</table>

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 :

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

Code HTML

<table>

    <caption>Passagers du vol 377</caption>

    <tr>

        <th>nom</th>

        <th>age</th>

        <th>pays</th>

    </tr>

    <tr>

        <td>Anne</td>

        <td>27 ans</td>

        <td>France</td>

    </tr>

    <tr>

        <td>Carmen</td>

        <td>33 ans</td>

        <td>Espagne</td>

    </tr>

    <tr>

        <td>Michelle</td>

        <td>26 ans</td>

        <td>Etats-Unis</td>

    </tr>

</table>

Résultat

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

HTML