LE XHTML
- Le XHTML
- Le doctype
- Encodage / charset
- Entités (Entities en anglais)
- HTML : Listes : balises ul et li
- HTML : Couleurs et images d'arrière-plan : balise background
- Divers
- Liens / Sites
Page un peu "fourre-tout' qui n'est pas spécifiquement consacrée au XHTML
En attendant un rangement..
Le HTML5
Découvertes en 2018 :)
... Il est temps...
align :
"L'attribut align pour les balises <p> est obsolète et ne doit plus être utilisé." (developer.mozilla.org)
Mince :(
Il y en a plein dans aidewindows.net
On remplace ça par : "text-align:center" (forum.alsacreations.com)
La propriété text-align décrit la façon dont un texte en ligne (inline) est alignée dans le bloc de son élément parent. text-align ne contrôle pas l'alignement des éléments en bloc, uniquement celui du contenu en ligne." (developer.mozilla.org)
En utilisant le CSS :
<p class="center">
...
</p
.center {text-align:center;}
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.
XHTML 1.0 Transitionnel :
C'est celui que j'utilise en 2017
<!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 :
Ancien DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Voir :
09/12/2011 : Alsacreations.com - Comment bien déclarer du XHTML 1.0 et du XHTML1.1?
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
Les doctypes et Internet Explorer (obsolète):
Les bug d'Internet Explorer en CSS - Bug IE6 - Bug IE7
Compatibilité entre navigateurs Firefox 2 et 3
"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 au jeu de caractère utilisé pour afifcher le texte.
Il est particulier à chaque langue, sauf si on utilise UTF-8 qui est universel
Les principaux :
-
ISO-8859-1
-
ISO-8859-15,
-
UTF-8
Il faut privilégier UTF-8
On le déclare par une balise META dans la partie HEAD de la page :
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Sur Aidewindows.net, en 2017, j'utilise toujours ISO-8859-1 :
C'est une erreur, particulièrement à partir de PHP 5.6
Developpez.net - Caractères accentués avec PHP 5.6 chez OVH
"Je crois savoir qu'il n'y a pas d'alphabet par défaut en PHP 5.5
Par contre en PHP 5.6 c'est UTF-8 par défaut. "
><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Liens :
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 : é
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.
giminik.developpez.com - Structure de base du document XHTML 1.1 de base
- Index : Créer sa page web : Bases
- Créer sa page web : les techniques
- Créer sa page web : les logiciels
- Créer sa page web : Hébergement et transfert
- Transférer ses pages et fichiers avec FileZilla
- Utilisation de FileZilla
- Créer un serveur FTP avec FileZilla
- Créer une page en HTML (1)
- Créer une page en HTML (2)
- Créer une page en HTML (3)
- XHTML