Internet > Création web > Le XHTML

LE XHTML

 

Page un peu "fourre-tout' qui n'est pas spécifiquement consacrée au XHTML
En attendant un rangement..

 

Le XHTML

 

Quelques règles essentielles sur le site le-developpeur-web.com

- le-developpeur-web.com : Apprendre le XHTML
Le XHTML est une récriture du HTML dont l'objectif est de permettre une transition vers le XML.

 

Le-developpeur-web.com - Les 5 règles de syntaxe XHTML
- Toute balise ouvrante doit obligatoirement être fermée
- Les balises et attributs doivent être écrits en minuscule
- Les valeurs des attributs doivent être entre guillemets ou apostrophe
- Chaque attribut doit avoir une valeur
- Chaque élément doit être imbriqué correctement.

 

 

Le Doctype :

Le DOCTYPE est à définir au début de chaque page.
Il permet aux navigateurs d'interpréter plus facilement le code contenu dans la page.
Il favorise donc le bon affichage des pages.

 

Voir :

Coin.des.experts.pagesperso-orange.fr - A quoi sert la ligne DOCTYPE en tête de mes fichiers et que faut-il y mettre ?

12/04/2002 : Pompage.net - Le DOCTYPE qu’il vous faut

09/12/2011 : Alsacreations.com - Comment bien déclarer du XHTML 1.0 et du XHTML1.1?

 

XHTML 1.0 Transitionnel :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 

HTML 4.01 strict :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

 

Les doctypes et Internet Explorer :

Les bug d'Internet Explorer en CSS - Bug IE6 - Bug IE7
Compatibilité entre navigateurs Firefox 2 et 3 :
http://esprit-creatif.blog.mongenie.com/index.php?idblogp=406297
"1# Bien renseigner son doctype :
Essentiel à la bonne compréhension de votre code, le doctype va donner une clé à IE 6 pour interpréter votre code HTML. En l'absence de Doctype, IE passe en mode QUIRKS et point de vue affichage c'est la catastrophe !"

 

 

Encodage / charset :

L'encode ou charset correspond aux caractères utilisés pour afifcher le texte :
Les principaux : Iso-8859-, iso-8859-15, utf-8

Exemple :

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

 

09/08/2013 : Alsacreations.com - Charset Iso-8859-1, iso-8859-15, utf-8, lequel choisir ?

27/11/2012 : Alsacreations.com - Les codages ASCII, ISO-8859-1, Windows-1252 et MacRoman

18/06/2014 : Openweb.eu.org - Changer de jeu de caractères pour UTF-8

02/11/2012 : Alsacreations.com - Comment bien déclarer l'encodage des caractères d'une page ?
Les encodages les plus fréquents (pour le public français) sont :
l'ISO-8859-1 (parfois appelé latin1), qui permet d'enregistrer presque tous les caractères du français ;
l'ISO-8859-15 (parfois appelé latin9), une variation de l'ISO-8859-1, qui rajoute le symbole « euro » et le « l'o dans l'e» ;
l'UTF-8, qui permet théoriquement d'encoder toutes les langues, du français au japonais en passant par l'arabe.

 

 

Entités (Entities en anglais)

Les entités (Entities en anglais) c'est des trucs comme : &eacute

Alexandre.alapetite.fr - Caractères spéciaux et entités HTML

28/06/2009 : Tal-p3.wordpress.com - Les entités HTML pour les accents en français sont devenues obsolètes (oui !!!)

 

 

HTML : Les listes : balise <ul> et <li> :

Pour énumérer une liste, ou pour faire un menu, il est recommandé d'utiliser les balises <ul> et <li>

Cela se fait sous la forme suivante, en HTML :

<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>

Ce qui donne :

  • menu 1
  • menu 2
  • menu 3
  • menu 4

Remarquer, la *puce* qui se met, par défaut, au début de chaque ligne.

 

 

HTML : Les puces :

La puce d'une liste, c'est le caractère spécial situé à chaque début de ligne.

 

On peut faire des listes sans puce :

Avec la propriété : list-style-type

Dans la CSS :

.navlist {
list-style-type:none;
margin-top:0px;
margin-left:1px;
padding-left:10px;
}

 

On peut faire des listes avec une image à la place de la puce :

Avec la propriété : list-style-image

Dans la CSS :

ul.puce {
list-style-image:url("images/puce1.png");
line-height:1.4;
}

Dans le HTML :

<ul claas="puce">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>

Ce qui donne :

  • menu 1
  • menu 2
  • menu 3
  • menu 4

Evidemment, les menus doivent être accompagnés de liens hypertexte pour être utilisables.

 

On peut faire des listes avec ou sans retrait :

Avec la propriété : list-style-position

inside = sans retrait
outside = avec retrait (par défaut)

 

 

Autres types de listes :

Il existe d'autres balises, pour définir d'autres types de liste :

 

Les listes ordonnées : <ol> et </ol>

Elles seront accompagnées de numéros (1, 2, 3...)
avec les balises <ol> et </ol> à la place de <ul> et </ul>

 

Les listes de définition (Definition List) : <dl> et </dl>

avec les balises <dl> et </dl>
les balises <dt> et </dt> pour définir les termes à définir ,
et les balises <dd></dd>.pour les définitions

 

 

HTML : Couleurs et images d'arrière plan : la balise background

Il existe différentes ballises background :

background = Arrière-plan en général
background-color = Couleur d'arrière-plan
background-image = Image d'arrière-plan

On peut citer également :

background-repeat = répétition d'image
background-attachment = filigrane
background-position = osition d'arrière plan

 

bgcolor

 

 

Voir :

21/03/2005 : Openweb.eu.org - Utilisation de background

 

 

Couleurs et images d'arrière plan pour tableau : bgcolor et bordercolor

 

Dans un tableau :

- bgcolor = couleur d'un tableau, d'une rangée (<tr>) ou d'une cellule (<td>)
- bordercolor = couleur du cadre d'un tableau

- background = image d'arrière-plan d'un tableau, d'une rangée ou d'une cellule

 

 

Divers :

 

la balise <iframe>

04/06/2007 : Webmaster-hub.com - iframe Amazon et xhtml strict Une solution alternative?
"je cherche à intégrer une bannière Amazon dans une page xhtml strict. Problème, le code fourni par amazon est une <iframe>, et donc non valide. Connaissez-vous une solution pour intégrer cette pub amazon sans <iframe>?"

 

07/12/2011 : Alsacreations.com - Inclure un fichier dans une page HTML sans utiliser <iframe>

 

 

Liens / Sites :

- le-developpeur-web.com : Apprendre le XHTML
Le XHTML est une récriture du HTML dont l'objectif est de permettre une transition vers le XML.

 

 

 

Haut de page

| Copyright | Histoire d'Aidewindows | Assistance à domicile | Concarneau | Aide Informatique et Internet : www.ai2.fr

Hit-Parade des sites francophones