18nov

Les bases du html, Partie 1: les balises META

Les méta informations servent à décrire votre page web ou votre site. Elles permettent d’indiquer le contenu de votre page, l’auteur, la langue, des mots clés, etc… Elles sont utilisées par les moteurs de recherche pour le référencement.

Ces informations ne sont pas affichées par le navigateur.

Les différentes balises META:

  • Language: Permet d’indiquer la langue utilisée. (obsolète)
  1. <META HTTP-EQUIV="Content-Language" CONTENT="fr">
Exemple d’argument:
FR = français
EN = anglais
EN-US = américain
DE = allemand
  • Charset: Permet d’indiquer le type d’encodage de votre page.
  1. <meta name= "charset" content= "utf-8">
Encodage pour le Français:
iso-8859-1
windows-1252
utf-8
  • Author: Permet d’indiquer des le nom de l’auteur de la page.
  1. <META NAME="Author" CONTENT="Nom Prenom">
  • reply-to: Permet d’indiquer une adresse mail. (Attention au spam)
  1. <meta name="reply-to" content="adresse e-mail">
  • Copyright: Permet d’indiquer le copyright.
  1. <META NAME="Copyright" CONTENT="woodiv">
  • Category: Permet d’indiquer aux annuaires la catégorie de votre site.
  1. <meta name="category" content="Nom de la categorie">
  • Identifier-url: Permet d’indiquer l’adresse de base du site. (obsolète)
  1. <META NAME="Identifier-URL" CONTENT="www.woodiv.com">
  • Publisher: Permet d’indiquer l’éditeur du site.
  1. <META NAME="Publisher" CONTENT="Nom Prenom">
  • Description: Permet de décrire le contenu de votre page web.
  1. <META NAME="Description" CONTENT="Placer le texte de la description ici">
  • Keywords: Permet d’indiquer des mots clés correspondants au contenu de votre page web.
  1. <META NAME="keywords" CONTENT="mot1, mot2, mot3, mot4">
  • Robot: Permet d’indiquer aux robots si vous autorisez le référencement ou non.
  1. <meta name="robots" content="index, follow">

all : Le robot indexe tout (par défaut)
none : Le robot n’indexe rien du tout
index : Votre page est indexée
noindex : Votre page n’est pas indexée mais il suivra les liens de cette page
follow : Le robot récupère les liens de votre page pour les référencer plus tard
nofollow : Le robot ne récupère pas les liens de votre page

  • pragma: Permet d’indiquer de ne pas utiliser le cache des navigateur.
  1. <meta http-equiv="pragma" content="no-cache">
  • refresh: Permet d’actualiser la page ou de faire une redirection en utilisant l’option “URL=”
  1. <meta http-equiv="refresh" content="10">
  2. <meta http-equiv="refresh" content="10; URL=http://www.woodiv.com">
“Content” indique ici les secondes à attendre avant de rafraichir la page ou d’effectuer la redirection. (0 pour une action immédiate)
17nov

Les bases du html

Le html est la base d’un site web internet. C’est avec ce code que vous allez créer le squelette de vos pages web.

Le code html est composé de balise aussi appelé “tag” ou “commande” qui seront interprétées par le navigateur. La plupart du temps, on doit ouvrir une balise (ex: <html>) et la fermer (ex: </html>)

Voici la structure de base d’une page html:

  1. <html>
  2. <head>
  3. <title>Titre de la page</title>
  4. <style type="text/css">
  5.  
  6. </style>
  7. </head>
  8. <body>
  9.  
  10. </body>
  11. </html>

La balise <html>: Indique au navigateur qu’il doit afficher du code html.

La balise <head>: Donne des informations sur le contenu de la page. Voir l’article sur les META

La balise <title>: Indique le nom de la page. Cette information est affiché dans la barre du navigateur.

la balise <style type=”text/css”>: C’est dans cette balise qu’il faut écrire le code CSS. Ce code permet de mettre en forme votre page interne.

La balise <body>: C’est la partie que le navigateur affiche.
16nov

Choisir une feuille de style pour IE avec les commentaires conditionnels

Les commentaires conditionnels permettent de choirsir une feuille de style précise en fonction de la version d’Internet Explorer.

Le principe est simple. Il suffit de placer ce code entre les balises <head> et </head> de votre code html:

  1. <!--[if IE]>
  2. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  3. <![endif]-->

Ce qui se traduit par: Si le navigateur est Internet Explorer, il faut utiliser cette feuille de style. On peut bien sûr utiliser une autre fonction entre les balises comme par exemple: indiquer au visiteur qu’on sait qu’il utilise Internet explorer !

Syntaxes et options possible pour les commentaires conditionnels:

  • if IE 5 : Pour toutes les versions d’Internet Explorer 5 (5.0 – 5.5)
  • if IE 6 : Pour la version 6 d’Internet Explorer
  • if IE 7 : Pour la version 7 d’Internet Explorer
  • lt : Pour toute les versions inférieurs à … (ex: if lt IE 6 –> Le code sera éxécuté par Internet Explorer 5 et 5.5)
  • lte : Pour toute les versions inférieurs ou égales à … (ex: if lte IE 6 –> Le code sera éxécuté par Internet Explorer 5, 5.5 et 6)
  • gt : Pour toute les versions supérieurs à … (ex: if gt IE 6 –> Le code sera éxécuté par Internet Explorer 7 et 8 )
  • gte : Pour toute les versions supérieurs ou égales à … (ex: if gte IE 6 –> Le code sera éxécuté par Internet Explorer 6, 7 et 8 )

Voici un exemple de code que j’utilise régulierement:

  1. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  2. <!--[if lt IE6]>
  3. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  4. <![endif]-->
  5. <!--[if lt IE7]>
  6. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  7. <![endif]-->
  8. <!--[if gte IE7]>
  9. <link type="text/css" href="chemin_du_fichier_css.css" rel="stylesheet" media="screen" />
  10. <![endif]-->

Dans cet exemple, la première ligne sera utilisé par firefox (Safari su mac). Il faut donc construire le CSS autour de ce navigateur.

Ensuite pour les feuilles de styles spécifiquent aux versions de IE, il suffira de modifier les lignes qui provoquent une mauvaise mise en page.