Essais E-commerce sur Blogger: octobre 2013

Pour qu'une vidéo démarre automatiquement lors de l'ouverture d'une page web, il suffit simplement d’ajouter &autoplay=1 dans le code Html de la vidéo

Exemple avec une vidéo youtube :

<u> <strike> <object class="BLOGGER-youtube-video" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data-thumbnail-src="https://i1.ytimg.com/vi/09bFnV-jYug/0.jpg" height="266" width="320"> <param name="movie" value="https://www.youtube.com/v/09bFnV-jYug?version=3&f=user_uploads&c=google-webdrive-0&app=youtube_gdata&autoplay=1"/> <param name="bgcolor" value="#FFFFFF" /> <param name="allowFullScreen" value="true" /> <embed width="320" height="266" src="https://www.youtube.com/v/09bFnV-jYug?version=3&f=user_uploads&c=google-webdrive-0&app=youtube_gdata&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true"></embed> </object></strike></u>

Peut fonctionner avec des Vidéo d'autre site comme Dailymotion ( pas tester )

La première balise à connaître est

. C'est cette balise qui permet d'indiquer 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. Exemple :

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

<table>

</table>

<p>Ceci est un paragraphe après le tableau.</p>

Bon, et qu'écrit-on à l'intérieur du tableau ?

Là, préparez-vous à subir une avalanche de nouvelles balises.

Pour commencer en douceur, voici deux nouvelles balises très importantes :

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

En HTML, un tableau se construit ligne par ligne. Dans chaque ligne (

), on indique le contenu des différentes cellules ().

Schématiquement, un tableau se construit comme à la figure suivante.

Un tableau, avec des cellules contenues dans des lignes

On a une balise de ligne (

) qui englobe un groupe de cellules ().

Par exemple, si je veux faire un tableau à deux lignes, avec trois cellules par ligne (donc trois colonnes), je devrai taper ceci :

<table>

   <tr>

       <td>Carmen</td>

       <td>33 ans</td>

       <td>Espagne</td>

   </tr>

   <tr>

       <td>Michelle</td>

       <td>26 ans</td>

       <td>États-Unis</td>

   </tr>

</table>

Le résultat est un peu déprimant (figure suivante).

C'est un tableau ça ?

Le texte s'est écrit à la suite et il n'y a même pas de bordures !

Oui, un tableau sans CSS paraît bien vide. Et justement, rajouter des bordures est très simple, vous connaissez déjà le code CSS correspondant !

td /* Toutes les cellules des tableaux... */

{

    border: 1px solid black; /* auront une bordure de 1px */

}

Et voici le résultat à la figure suivante.

Hum, ce n'est pas encore aussi parfait que ce qu'on voudrait. En effet, on aimerait qu'il n'y ait qu'une seule bordure entre deux cellules, or ce n'est pas le cas ici.

Heureusement, il existe une propriété CSS spécifique aux tableaux, border-collapse, qui signifie « coller les bordures entre elles ».

Cette propriété peut prendre deux valeurs :

collapse : les bordures seront collées entre elles, c'est l'effet qu'on recherche ici ;
separate : les bordures seront dissociées (valeur par défaut)

table

{

    border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */

}

td

{

    border: 1px solid black;

}

La figure suivante représente le résultat obtenu.

Les bordures sont collées les unes aux autres

Voilà qui est mieux !

La ligne d'en-tête

Maintenant que l'on a ce qu'on voulait, on va rajouter la ligne d'en-tête du tableau. Dans l'exemple ci-dessous, les en-têtes sont « Nom », « Âge » et « Pays ».

La ligne d'en-tête se crée avec un

comme on l'a fait jusqu'ici, mais les cellules qu'elle contient sont, cette fois, encadrées par des balises et non pas !

<table>

   <tr>

       <th>Nom</th>

       <th>Âge</th>

       <th>Pays</th>

   </tr>

   <tr>

       <td>Carmen</td>

       <td>33 ans</td>

       <td>Espagne</td>

   </tr>

   <tr>

       <td>Michelle</td>

       <td>26 ans</td>

       <td>États-Unis</td>

   </tr>

</table>

La ligne d'en-tête est très facile à reconnaître pour deux raisons :

les cellules sont des au lieu des habituels ;
c'est la première ligne du tableau (c'est idiot, mais encore faut-il le préciser).

Comme le nom des cellules est un peu différent pour l'en-tête, il faut penser à mettre à jour le CSS pour lui dire d'appliquer une bordure sur les cellules normales et sur l'en-tête (figure suivante).

table

{

    border-collapse: collapse;

}

td, th /* Mettre une bordure sur les td ET les th */

{

    border: 1px solid black;

}

Comme vous pouvez le constater, votre navigateur a mis en gras le texte des cellules d'en-tête. C'est ce que font en général les navigateurs mais, si vous le désirez, vous pouvez changer cela à coups de CSS : modifier la couleur de fond des cellules d'en-tête, leur police, leur bordure, etc.

Titre du tableau

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

Notre exemple est constitué d'une liste de personnes… oui mais alors ? Qu'est-ce que cela représente ? Sans titre de tableau, vous le voyez, on est un peu perdu.

Heureusement, il y a !

Cette balise se place tout au début du tableau, juste avant l'en-tête. C'est elle qui contient le titre du tableau (figure suivante) :

<table>

   <caption>Passagers du vol 377</caption>

   <tr>

       <th>Nom</th>

       <th>Âge</th>

       <th>Pays</th>

   </tr>

   <tr>

       <td>Carmen</td>

       <td>33 ans</td>

       <td>Espagne</td>

   </tr>

   <tr>

       <td>Michelle</td>

       <td>26 ans</td>

       <td>États-Unis</td>

   </tr>

</table>

C'est quand même plus clair !

Sachez que vous pouvez changer la position du titre avec la propriété CSS caption-side qui peut prendre deux valeurs :

top : le titre sera placé au-dessus du tableau (par défaut) ;
bottom : le titre sera placé en dessous du tableau.

Title 1	Title 2	Title 3
Row 1	Row 1	Row 1
Row 2	Row 2	Row 2
Row 2	Row 2	Row 2
Row 3	Row 3	Row 3

Essais E-commerce sur Blogger

Bannière

Crée menu déroulant exemple pour Blogger

Créer une infobulle sur une Image, un Bouton, etc...

Comment publier un Pdf sur son Blog avec lecture automatique

Lecture automatique d’une vidéo

Comment bloquer les affichage dynamique sur Blogger

Créer un Tableau Css

Crée un tableau simple Html

La ligne d'en-tête

Titre du tableau