Mot-clef : commentaires.

Facebook veut acquérir nos commentaires.

Dans les prochaines semaines, la rumeur veut que Facebook lancerait un système de commentaires. Ainsi en quelques lignes de code, on pourrait intégrer un système de commentaires sur son blog. On pourrait ainsi s’y loguer via son compte Facebook certes, mais avec aussi d’autres services tels que Google et Yahoo.

Bon même si on est à peu près certain que ce système va pulluler sur la toile, pour ma part je ne l’intégrerais pas sur Web-Petit. Déjà que j’ai viré le bouton « j’aime » de Facebook qui avait tendance à boguer et à ralentir énormément le chargement de mes pages ce qui m’avait d’ailleurs un peu obligé à enlever les boutons Facebook et Twitter de la page d’accueil. Mais depuis qu’exit le bouton Facebook, Twitter a fait son retour en vitrine.

Source : ZDNet.com.

Votre vidéo Youtube compatible IE et valide W3C.

Quand on est soucieux des normes W3C et de la compatibilité de son site sur tous les navigateurs, arrive à un moment ou un autre la question des vidéos et notamment celles des vidéos Youtube.

C’est bien connu la balise embed n’est pas valide mais tellement indispensable à Internet Explorer. Il suffit donc de la mettre en commentaires pour les autres navigateurs. Quand au code fourni par Youtube il va falloir le modifier quelque peu afin d’avoir un code valide.

Code fourni par Youtube

<object width="730" height="435">
<param name="movie" value="http://www.youtube.com/v/QAebNJitpNU?fs=1&amp;hl=fr_FR"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/QAebNJitpNU?fs=1&amp;hl=fr_FR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="730" height="435"></embed>
</object>

Code valide et compatible avec Internet Explorer

<object type="application/x-shockwave-flash" style="width:730px;height:435px;" data="http://www.youtube.com/v/QAebNJitpNU?fs=1&amp;amp;hl=fr_FR">
<param name="movie" value="http://www.youtube.com/v/QAebNJitpNU?fs=1" />
<param name="allowFullScreen" value="true" />
<!--[if IE]><embed src="http://www.youtube.com/v/QAebNJitpNU?fs=1&amp;hl=fr_FR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="730" height="435"></embed><![endif]-->
</object>

HTML 5 : Ma première page.

Tout comme ses prédécesseurs HTML 5 est un langage de balisage c’est à dire qu’on utilise des balises qui ont des valeurs sémantiques pour annoncer des éléments. Une balise est délimitée par des chevrons ouvrants (‹) et fermants (›).

<balise>

Les balises peuvent être simples ou doubles (=paires), dans ce cas la deuxième commencera par un slash /.

Balise simple
<balise>
Balises doubles
<balise></balise>

Voici une page HTML 5 vide.

<!DOCTYPE html>
<html lang="fr"> 

  <head> 

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Titre</title>

  </head>

  <body>

    <!-- Ici il y aura le contenu de votre page. -->

  </body>

<html>

Le type de document (DOCTYPE)

Ceux qui ont travaillé avec les doctype d’autres versions de HTML ou de XHTML que HTML 5 savent combien cette déclaration est simple. Il ne faut pas se le cacher, la plupart d’entre nous étaient incapables de déclarer de tête un document en XHTML 1.0 Strict par exemple. Voyez vous-même :

DOCTYPE HTML 5
<!DOCTYPE html>
DOCTYPE HTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

L’élement html

<html lang="fr"></html>

‹html› indique au navigateur l’endroit où votre document HTML commence et ‹/html› l’endroit où il se temine. L’attribut lang permet de spécifier la langue du document HTML mais il n’est pas obligatoire. L’attribut lang peut être appliqué sur tous les autres éléments HTML.

L’élement head

<head></head>

L’élément head contient tous les en-têtes envoyés au navigateur comme :

  • Le type de contenu de la page : 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  • Le titre de la page : 
    <title>Titre</title>

De nombreuses autres informations peuvent être spécifiées dans l’élément head, ce sera l’objet d’autres chapitres.

L’élément body

<body></body>

L’élément body constitue le corps de votre page HTML. On y trouvera à l’intérieur tout le contenu affiché à l’utilisateur.

Les commentaires

<!-- Ceci est un commentaire -->

Les commentaires permettent d’ajouter de l’information à un morceau de code. Cette information ne sera visible que dans le code source de la page. En aucun cas il ne sera affiché au visiteur de la page HTML.

Conseil : Même si on l’oublie vite quand on est penché sur son code, il est important d’y intégrer des commentaires un tant soit peu. Non seulement cela pourrait servir si quelqu’un d’autre doit lire votre code mais vous pourrez également vous repérez dans votre code 6 mois, 1 an, 5 ans… plus tard.

← Chapitre précédent
Chapitre suivant →