LE XHTML

• Le XHTML
• Le doctype
• Encodage / charset
• Entités (Entities en anglais)
• Listes : balises ul et li
• Couleurs et images d'arrière-plan : balise background
• Divers
• Liens / Sites

 

 

Le XHTML

 

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

 

Les 5 règles de syntaxe XHTML
http://xhtml.le-developpeur-web.com/
- 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 :

A quoi sert la ligne DOCTYPE en tête de mes fichiers et que faut-il y mettre ?
http://pagesperso-orange.fr/coin.des.experts/reponses/faq9_64.html

Le DOCTYPE qu’il vous faut
http://www.pompage.net/pompe/doctype/

Comment bien déclarer du XHTML 1.0 et du XHTML1.1?
http://www.alsacreations.com/astuce/lire/41-comment-bien-dclarer-du-xhtml-10-et-du-xhtml11.html

 

XHTML 1.0 Transitionnel :

 

HTML 4.01 strict

 

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 :

 

Charset Iso-8859-1, iso-8859-15, utf-8, lequel choisir ?
http://www.alsacreations.com/astuce/lire/34-charset-iso-8859-1-iso-8859-15-utf-8-lequel-choisirnbsp.html

S'y retrouver entre ASCII, ANSI, Latin1, ISO-8859-1, MacRoman, Windows-1252, etc
http://www.alsacreations.com/astuce/lire/83-sy-retrouver-entre-ascii-ansi-latin1-iso-8859-1-macroman-windows-1252-etc.html

Changer de jeu de caractères pour UTF-8
http://openweb.eu.org/articles/changer_pour_utf8

Comment bien déclarer l'encodage des caractères d'une page ?
http://www.alsacreations.com/astuce/lire/69-declarer-encodage-des-caracteres.html

 

 

Entités (Entities en anglais)

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

Caractères spéciaux et entités HTML
http://alexandre.alapetite.fr/doc-alex/alx_special.html

Les entités HTML pour les accents en français sont devenues obsolètes (oui !!!)
http://tal-p3.wordpress.com/2009/06/28/les-entitees-html-pour-les-accents-en-francais-sont-devenus-obsoletes/

 

 

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 :

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.

 

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 :

 

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

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

Dans la CSS :

Dans le HTML :

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

 

Liens :

Les listes à puces :
http://www.siteduzero.com/tutoriel-3-13548-les-listes-a-puces.html

Formatage de listes :
http://fr.selfhtml.org/css/proprietes/listes.htm

Liste à puces :
http://www.cyberformateur.com/cours_css/index.htm

 

 

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 :

Couleurs et images d'arrière plan :
http://fr.selfhtml.org/css/proprietes/arriereplan.htm

Utilisation de background
http://openweb.eu.org/articles/background_css

 

 

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

 

Voir :

Tableaux de couleur
http://actuel.fr.selfhtml.org/archives/docu/7.0/tcef.htm

 

 

Divers :

 

la balise <iframe>

iframe Amazon et xhtml strict Une solution alternative?
http://www.webmaster-hub.com/topic/34941-iframe-amazon-et-xhtml-strict/
"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>?"

 

Inclure un fichier dans une page HTML sans utiliser <iframe>
http://www.alsacreations.com/actu/lire/214-inclure-un-fichier-dans-une-page-html-sans-utiliser-ltiframegt.html

 

 

Liens / Sites :