Code HTML

Code HTML

Modèle de page à télécharger

Page Web | Types de Balises | Titres | Titres-Modifiés | Paragraphes | OnMouseOver
Listes-à-Puces | Listes à puce modifiées | Balise DIV | Balises DIV modifiées
Balises DIV alignées | Images | Vidéos 1 | Vidéos 2

RETOUR VERS LE HAUT

Structure d'une page web


Code HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre de la page</title>

 

 

</head>

<body>

 

</body>
</html>



Types des Balises

Balises de type Block

 

  • Il existe 2 types de balises en HTML :

    • Les balises de type block :

Code HTML

<h1>...<h6>

<p>

<div>

<ul> <ol> <li>

<dl> <dt> <dd>

 

    Elles impliquent

      • un retour à la ligne
      • se positionnent les une au-dessous des autres
      • occupent toute la largeur.
      • on peut leur attribuer une largeur et une hauteur.

 

Balises de type Inline

 

    • Le balises de type inline :

Code HTML

<span>

<a>

<strong>

<em>

<img>

<br>

<imput>

<abbr>


      • ne génèrent pas de retour à la ligne
      • se placent  à l’intérieur d'une ligne ou d’un texte pour en délimiter des parties.
      • s’inscrivent de gauche à droite, les unes à côté des autres.
      • on ne peut pas leur attribuer de largeur, ni de hauteur.


Les différentes Balises

Titres

Titre 1

Titre 2

Titre 3

Titre 4

Titre 5
Titre 6

Code HTML

<h1> Titre 1</h1>
<h2> Titre 2</h2>
<h3> Titre 3</h3>
<h4> Titre 4</h4>
<h5> Titre 5</h5>
<h6> Titre 6</h6>

 

Titres modifiés



Titre 1

Titre 2

Titre 3

Titre 4

Titre 5
Titre 5
Titre 6
Titre 6

Code HTML

<h1align="center"> Titre 1</h1>

<h2 style="text-align:center;"> Titre 2 </h2>

<h3 style="color:#7646a3; text-align:center;"> Titre 3</h3>

<h4 style=" font-family:'Courier New', Courier, monospace" > Titre 4</h4>

<h5 style="font-style:italic;" > Titre 5</h5>

<em><h5> Titre 5</h5></em>

<h6 style="letter-spacing: 30px;" >Titre 6 </h6>

<h6 style="font-size:40px;"> Titre 6</h6>



Paragraphes

Paragraphe

.................

Paragraphes modifiés

Paragraphe ave Balise <span>

Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.


<P>Paragraphe</P>

<P><span>Paragraphe</span> avec balises </P>

<P style="font-size: 30px;" align="center">Le <span>style="font-size:36px; color:#F36; font-weight:bold; font-style:italic;">Lorem Ipsum </span>est simplement du <span style="text-decoration:underline;">faux texte</span> employé dans la composition et <u>la mise en page</u> avant <em>impression</em>.</P>


OnMouseOver

Change de couleur : "onMouseOver" (au passage de la souris)

<h1 style="color:#3C3;"onMouseOver="this.style.color = '#bf9000'" onMouseOut="this.style.color = '#e2448e'">Change de couleur : "onMouseOver" </h1>

OnMouseOver : avec un lien

<h2>
<a href="https://youtu.be/1X3flQ9ZcNI" target="_blank"
style="text-decoration: none; color:#FC3;" title="Créer une boutique en ligne en 25 minutes Chrono" onMouseOver="this.style.color = '#bf9000'" onMouseOut="this.style.color = '#e2448e'">OnMouseOver : avec un lien</a>
</h2>

OnMouseOver : avec un lien aussi 

<h2>

<a href="https://youtu.be/C2l-VrrAEIE" target="_blank" style="text-decoration: none; color: #7646a3;" title="Le Dropshiping en 5 étapes" onMouseOver="this.style.color = '#bf9000'" onMouseOut="this.style.color = '#e2448e'">OnMouseOver : avec un lien aussi</a> 

</h2>


  • OnMouseOver sur les listes à Puces

    • <li style="font-size:24px;">

    <a href="#" title="Lon titre"
    target="_blank" style="text-decoration: none; color:#f27c09;" onMouseOver="this.style.color = '#bf9000'" onMouseOut="this.style.color = '#e2448e'">OnMouseOver sur les listes à Puces</a>

    </li>




    Listes à Puces

  • Liste à puces
  • Liste à puces
  • Liste à puces
  • Liste à puces

    • <li>Liste à puces</li>
    <li>Liste à puces</li>
    <li>Liste à puces</li>
    <li>Liste à puces</li>

    .................

    • Liste à puces
    • Liste à puces
    • Liste à puces
    • Liste à puces

    <ul>
    <li>Liste à puces</li>
    <li>Liste à puces</li>
    <li>Liste à puces</li>
    <li>Liste à puces</li>
    </ul>

    .................

    1. Liste à puces numéroté
    2. Liste à puces numéroté
    3. Liste à puces numéroté
    4. Liste à puces numéroté

    <ol>
    <li>Liste à puces numéroté</li>
    <li>Liste à puces numéroté</li>
    <li>Liste à puces numéroté</li>
    <li>Liste à puces numéroté</li>
    </ol>

    Listes à puce modifiées

  • Liste à puces
  • Liste à puces
  • Liste à puces
  • Liste à puces

    • <li style="text-align:center; font-size:20px;">Liste à puces </li>

    <li style="font-weight:bold; font-size:20px;">Liste à puces</li>

    <li style="color:#F36; font-size:20px;">Liste à puces</li>

    <li style="font-family:'Courier New', Courier, monospace">Liste à puces</li>

    .................

    <ul style="font-size:24px;">

    • Liste à puces
    • Liste à puces
    • Liste à puces
    • Liste à puces
    • Liste à puces

    <ul style="font-size:24px;">

    <li>Liste à puces</li>

    <li style="color:#FC3;"><span style="color:#000;">Liste à puces</span></li>

    <li style="margin-left: 60px;">Liste à puces</li>

    <li> <span style="margin-left: 30px;">Liste à puces</span></li>

    <li style="margin-left: 60px;"><span style="margin-left: 30px;">Liste à puces </span></li>

    </ul>

    .................

    • Liste à puces
    • Liste à puces

    <ul style="font-size:24px;">

    <li style="font-size:60px; margin-left: 20px; color:#FC6;"><span style=" color:#000;">Liste à puces </span></li>

    <li style="font-size:60px; margin-left: 20px; color:#FC6;"><span style="font-size:40px; color:#000;">Liste à puces</span></li>

    </ul>

    .................

    1. Liste à puces numéroté
    2. Liste à puces numéroté
    3. Liste à puces numéroté
    4. Liste à puces numéroté

    <ol>
    <li style="font-size:30px;" margin-left: 30px;">Liste à puces numéroté </li>
    <li style="font-size:30px;" margin-left: 30px;">Liste à puces numéroté </li>
    <li style="font-size:30px;" margin-left: 30px;">Liste à puces numéroté </li>
    <li style="font-size:30px;" margin-left: 30px;">Liste à puces numéroté </li>
    </ol>

    Balise DIV

    Balise DIV

    <div>Balise DIV</div>


    Balises DIV modifiées

    Balise DIV

    <div style="width: 65%; margin-left:auto; margin-right:auto;" >Balise DIV </div>



    Balise DIV

    <div style="width: 65%; margin-left:auto; margin-right:auto;" align="center">Balise DIV</div>



    Balise DIV

    <div style="width: 65%; border:solid #7746a2 5px; margin-left:auto; margin-right:auto;" align="center">Balise DIV</div>



    Balise DIV

    <div style="width: 65%; border:solid #F93 5px; border-radius: 10px; margin-left:auto; margin-right:auto;" align="center">Balise DIV</div>



    Balise DIV

    <div style="width: 65%; height: 100px; border:solid #FC3 5px; border-radius: 15px; margin-left:auto; margin-right:auto;" align="center">Balise DIV</div>



    Balise DIV

    <div style="width: 65%; height: 100px; border:dashed #e2448e 5px; border-radius: 15px; margin-left:auto; margin-right:auto;" align="center">Balise DIV</div>



    Balise DIV


    <div style="width: 65%; height: 100px; border:dashed #e2448e 1px; border-radius: 20px; margin-left:auto; margin-right:auto;" align="center">

    <p style="margin-top: 40px; font-weight:bold; color:#7746a2">Balise DIV</p>
    </div>



    Balise DIV


    <div style="width: 65%; height: 100px; border:dashed #7746a2 1px; border-radius: 45px; margin-left:auto; margin-right:auto;" align="center">

    <p style="margin-top: 40px; font-weight:bold; color:#7746a2">Balise DIV</p>
    </div>


    Balises DIV alignées et responsives

    0
    1
    2
    3
    0


    <div style="width:12.5%; float:left;" align="center">0</div>
    <div style="width:25%; float:left;" align="center">1</div>
    <div style="width:25%; float:left; text-align:center;">2</div>
    <div style="width:25%; float:left;" align="center">3</div>
    <div style="width:12.5%; float:left;" align="center">0</div>

     



    0
    1
    2
    3
    0


    <div style="background-color:#F93; width:12.5%; float:left; color:#FFF;" align="center">0</div>
    <div style="background-color:#e2448e; width:25%; float:left; color:#FFF;" align="center">1</div>
    <div style="background-color:#FC3; width:25%; float:left; color:#FFF; text-align:center;">2</div>
    <div style="background-color:#7746a2; width:25%; float:left; color:#FFF;" align="center">3</div>
    <div style="background-color:#F93; width:12.5%; float:left; color:#FFF;" align="center">0</div>




     

     

    Titre

    Sous-Titre

    Paragraphe

    Titre

    Sous-Titre

    Paragraphe

    Titre

    Sous-Titre

    Paragraphe

     


     

    <div style="background-color:#F93; width:12.5%; float:left; color:#FFF;" align="center">&nbsp;</div>

    <div style="background-color:#e2448e;width:25%; float:left; color:#FFF;" align="center">

    <h1 style="font-weight:bold;">Titre</h1>
    <h2 style="font-style:italic;">Sous-Titre</h2>
    <p style="font-size: 20px;">Paragraphe</p>

    </div>

    <div style="background-color:#FC3;width:25%; float:left; color:#FFF; text-align:center;">

    <h1 style="font-weight:bold;">Titre</h1>
    <h2 style="font-style:italic;">Sous-Titre</h2>
    <p style="font-size: 20px;">Paragraphe</p>

    </div>

    <div style="background-color:#7746a2;width:25%; float:left; color:#FFF;" align="center">

    <h1 style="font-weight:bold;">Titre</h1>
    <h2 style="font-style:italic;">Sous-Titre</h2>
    <p style="font-size: 20px;">Paragraphe</p>

    </div>

    <div style="background-color:#F93; width:12.5%; float:left; color:#FFF;" align="center">&nbsp;</div>






     

    Titre

    Sous-Titre

    Paragraphe

    Titre

    Sous-Titre

    Paragraphe

    Titre

    Sous-Titre

    Paragraphe

     




     

    <div style="background-color:#F93; width:12.5%; float:left; color:#FFF;" align="center">&nbsp;</div>

    <div style="background-color:#e2448e;width:25%; float:left; color:#FFF;" align="center">

    <h1 style="font-weight:bold;">Titre</h1>
    <h2 style="font-style:italic;">Sous-Titre</h2>
    <p style="font-size: 20px;">Paragraphe</p>

    </div>

    <div style="background-color:#FC3;width:25%; float:left; color:#FFF; text-align:center;">

    <h1 style="font-weight:bold;">Titre</h1>
    <h2 style="font-style:italic;">Sous-Titre</h2>
    <p style="font-size: 20px;">Paragraphe</p>

    </div>

    <div style="background-color:#7746a2;width:25%; float:left; color:#FFF;" align="center">

    <h1 style="font-weight:bold;">Titre</h1>
    <h2 style="font-style:italic;">Sous-Titre<</h2>
    <p style="font-size: 20px;">Paragraphe</p>

    </div>

    <div style="background-color:#F93;width:12.5%; float:left; color:#FFF;" align="center">&nbsp;</div>






     

    Titre

    Sous-Titre

    Paragraphe

    Description de l'image en quelques mots

    Titre

    Sous-Titre

    Paragraphe

    Description de l'image en quelques mots

    Titre

    Sous-Titre

    Paragraphe

    Description de l'image en quelques mots

     

     

    <div style="width:12.5%; float:left; color:#FFF;" align="center">&nbsp;</div>

    <!----------- DIV 1 ----------->

    <div style="background-color:#e2448e;width:25%; float:left; color:#FFF;" align="center">

    <h1 style="font-weight:bold;">Titre</h1>

    <h2 style=" font-style:italic;">Sous-Titre</h2>

    <p style="font-size: 20px;">Paragraphe</p>

    <p style="font-size: 20px;">

    <img alt="Description de l'image en quelques mots" src="https://cdn.shopify.com/s/files/1/0269/6308/3347/files/Tete.jpg?v=1600092931" width="90%">

    </p>

    </div>

    <!---------------------------->

    <!----------- DIV 2 ----------->

    <div style="background-color:#FC3;width:25%; float:left; color:#FFF; text-align:center;">

    <h1 style="font-weight:bold;">Titre</h1>

    <h2 style="font-style:italic;">Sous-Titre</h2>

    <p style="font-size: 20px;">Paragraphe</p>

    <p style="font-size: 20px;">

    <img alt="Description de l'image en quelques mots" src="https://cdn.shopify.com/s/files/1/0269/6308/3347/files/Tete.jpg?v=1600092931" width="90%">

    </p>

    </div>

    <!---------------------------->


    <!----------- DIV 3 ----------->

    <div style="background-color:#7746a2;width:25%; float:left; color:#FFF;" align="center">

    <h1 style="font-weight:bold;">Titre</h1>

    <h2 style="font-style:italic;">Sous-Titre</h2>

    <p style="font-size: 20px;">Paragraphe</p>

    <p style="font-size: 20px;">

    <img alt="Description de l'image en quelques mots" src="https://cdn.shopify.com/s/files/1/0269/6308/3347/files/Tete.jpg?v=1600092931" width="90%">

    </p>

    </div>

    <!---------------------------->

    <div style="width:12.5%; float:left; color:#FFF;" align="center">&nbsp;</div>






    1
    2
    3

     

    Titre

    Sous-Titre

    Paragraphe

    Description de l'image en quelques mots

    Titre

    Sous-Titre

    Paragraphe

    Description de l'image en quelques mots

    Titre

    Sous-Titre

    Paragraphe

    Description de l'image en quelques mots

     

     

     

     

     

    <!------------- BLOCK ------------->
    <div style="background-color:#F93; width:75%; color:#FFF; margin-left:auto; margin-right:auto;" align="center">
    <!--------------------------------->


    <!-------------- DIV 1 -------------->
    <div style="background-color:#e2448e;width:33%; float:left; color:#FFF;" align="center">

    <h1 style="font-weight:bold;">Titre</h1>
    <h2 style="font-style:italic;">Sous-Titre</h2>
    <p style="font-size: 20px;">Paragraphe</p>

    <p style="font-size: 20px;">

    <img alt="Description de l'image en quelques mots" src="https://cdn.shopify.com/s/files/1/0269/6308/3347/files/Tete.jpg?v=1600092931" width="90%">

    </p>

    </div>
    <!--------------------------------->

    <!-------------- DIV 2 -------------->
    <div style="background-color:#FC3;width:33%; float:left; color:#FFF;" align="center">

    <h1 style="font-weight:bold;">Titre</h1>
    <h2 style="font-style:italic;">Sous-Titre</h2>
    <p style="font-size: 20px;">Paragraphe</p>

    <p style="font-size: 20px;">

    <img alt="Description de l'image en quelques mots" src="https://cdn.shopify.com/s/files/1/0269/6308/3347/files/Tete.jpg?v=1600092931"width="90%">

    </p>

    </div>
    <!--------------------------------->

    <!-------------- DIV 3 -------------->
    <div style="background-color:#7746a2; width:33%; float:left; color:#FFF;" align="center">

    <h1 style="font-weight:bold;">Titre</h1>
    <h2 style="font-style:italic;">Sous-Titre</h2>
    <p style="font-size: 20px;">Paragraphe</p>

    <p style="font-size: 20px;"><img alt="Description de l'image en quelques mots" src="https://cdn.shopify.com/s/files/1/0269/6308/3347/files/Tete.jpg?v=1600092931"width="90%">

    </p>

    </div>
    <!--------------------------------->


    <!---------- FERME BLOCK ---------->

    </div>
    <!--------------------------------->






    Images


    Description de l'image en quelques mots


    <p align="center">

    <img src="https://cdn.shopify.com/s/files/1/0269/6308/3347/files/Tete.jpg?v=1600092931"alt="Description de l'image en quelques mots" width="200" >

    </p>




    Description de l'image en quelques mots


    <p style="text-align: center;">

    <a href="https://cdn.shopify.com/s/files/1/0269/6308/3347/files/Tete.jpg?v=1600092931" title="Description du lien" target="_blank">

    <img alt="Description de l'image en quelques mots" src="https://cdn.shopify.com/s/files/1/0269/6308/3347/files/Tete.jpg?v=1600092931"width="200">

    </a></p>



    Vidéos



    Vidéos 1


    LIEN

    <p style="text-decoration:none;" align="center">

    <a href="https://youtu.be/1X3flQ9ZcNI" title="Créer une boutique en ligne en 25 minutes" target="_blank">LIEN</a>

    </p>


     


    <p align="center">&nbsp;
    <iframe width="560" height="315" src="https://www.youtube.com/embed/inWeHE00Aac" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>


    Vidéos 2

    Bande ilio-tibiale (IT)

    <p style="text-align: center;">

    <video width="600px" data-src="https://hmg.h-cdn.co/videos/oct18-foamroller-itband-loop-1540231321.mp4" autoplay loop muted="" playsinline="" src="https://hmg.h-cdn.co/videos/oct18-foamroller-itband-loop-1540231321.mp4"></video>

    </p>


    2ème exercice

    <p align="center">

    <a href="http://onlinebodyguide.com/how-to-use-a-foam-roller-to-warm-up/" title="Comment utiliser un rouleau de massage pour s'échauffer">

    <video width="600px" data-src="https://hmg.h-cdn.co/videos/oct18-foamroller-piriformis-loop-1540231249.mp4" autoplay loop muted="" playsinline="" src="https://hmg.h-cdn.co/videos/oct18-foamroller-piriformis-loop-1540231249.mp4">

    </video>

    </a>

    </p>