Table des matières
Le Html dans Dokuwiki
Ceci n'est pas un cours html mais juste une aide pour permettre de placer du html dans vos pages. Parfois les plugins et les balises sont pas suffisant pour faire une mise en page selon ses désires. Les html vous permet aussi d'inclure des éléments extérieurs au site, comme des bannières.
Pour une intégration correcte du html penser bloc de texte.
<html> <div> ... votre bloc, votre code </div> </html> Comme on le verra plus loin il est possible de placer un bloc hors du cadre principal . Pour cette raison les layout que j'ai développé ne sont pas recommandé pour un usage tout publique; mais plutôt comme une alternative interactive au niveau du design d'un site, lorsqu'on veut fréquemment modifier l'aspect d'un site sans repasser par une recréation de site au moyen d'un éditeur html. Ce ci est surtout valable si le contenu du site ne se modifie pas dans son ensemble. C'est aussi prévu pour les personnes qui sont constamment en route et veulent gérer leur site depuis n'importe où.
Html compatible
La référence officiel qui concerne l'affichage sur le web http://www.w3.org/
Document déjà traduits en francais
La version actuel du DOKUWIKI utilise W3C XHML 1.0 Transitional:
Ceci est le document text qui definit la compatibilité de syntax.
Téléchargement:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
Le html a évolué au cours du temps, des syntaxes de balise on changer et la bataille entre les divers navigateurs a eu pour résultat d'un ajout continuer de fonctions. Pour pouvoir afficher plus ou moins correctement les pages, les navigateurs maitrisent les divers syntaxe et le mélange de syntaxe. Mais ceci n'est pas une solution durable c'est pourquoi le html à évolué vers le xhtml, afin de retrouvé le concept de base , à savoir la lecture universel d'un document quel que soit la plateforme utilisé. Il en résulte un nettoyage du code et une séparation des éléments attributifs placés dans une section css ou fichier css. Afin de ne pas avoir remodifier tout les codes , il vaut mieux éviter les anciennes syntaxes, et de favoriser les nouvelles qui d'ailleurs offre de nouveau avantages entre autre la possibilité de faire changer l'aspect des pages au moyen de layout sans avoir à changer les pages elle-même.
Exemples:
Juste un exemple pour vous montre que l'ancienne notation fonctionne encore, mais montre des affichage différent.
La prochaine étape sera un mixe entre Html5 xhtml 2 autour de 2010. Le problème restera. Les navigateurs c'est ce qui rend l'évolution lent et difficile. La compatibilité avec les anciens navigateur et la concurrence entre les navigateurs eux-même continuent à mener la vie dure au développeur de page sur le net. Certains préfèrent d'ailleurs se facilité la tâche, et affichent le contenu sous format pdf pour éviter des problèmes de compatibilité.
XHTML
Pour l'instant dokuwiki n'est pas encore complètement conforme au xhtml 2.0 donc un certain nombre de chose ne fonctionne pas encore. Mon projet ici c'est de présenté les codes qui fonctionnent correctement avec du xhtml 1.0 et 1.1 , et ce qui ne fontionne pas correctement avec le code correspondant. Je présenterai les choses dans un ordre d'utilité plutôt que dans une structure pédagogique.
Balise pour Xhtml 2.0
Pour comprendre l'évolution du xhtml , il faut savoir que le but de celui-ci est de transfère toute les caractéristique de présentation hors du document. C'est à dire de mettre la présentation du document dans la feuille de style css. Ce qui donne une plus grande souplesse à l'image présenté du document et permet aussi que le document puisse etre formaté pour d'aute médium par exemple imprimant, lecture acoustique du document etc.
Les balise deviennent une signication et non une représentation qui a une signification.
Exemples
hr était un ligne horizontal utilisé comme séparateur.
Maintenant il y a separator qui est un élément dont l'aspect pourra être definit dans la feuille de style css.
Les éléments pourront avoir divers attribut selon les classes qui seront définit. Les éléments pourront aussi avoir des identificateurs mais ceux ci devront être unique.
separateur
Recommandation
Attention lors de copie de code html.
- Pour placer du html ou xhtml sur votre page,la balise <html></html> doit être absolument écrite en minuscule.
- On ne peut pas mettre de directive dans la balise <html> pour définir le type de document.
Le type de document est défini par docuwiki lui-même.
Donc actuellement <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- Lorsque celle-ci passer en XHTM 1.1 ( )la syntaxe sera plus sévère et je ne sais pas comment seron gèré les caractères spéciaux. Table Caractère
- Veuillez mettre toute les balises en minuscules.
- supprimer les script java et activx , ils ne fonctionnent pas dans le wiki. On trouvera d'autres solutions pour résoudre certain problème voir plus bas.
Eliminer les anciennes balises et adopter les nouvelles syntaxes
- les balises <br> deviennent <br/> <hr> deviennent <hr/>
- certaine balise pouvait être écrite sans fin de balise . Maintenant il faut toujours une fin de balise.
- Pour les images ne pas oublier la mention de alt=“description image”
- <img src=“logo.png” alt=“logo”> devient <img src=“logo.png” alt=“logo” /> la barre en fin
- tout les attributs doivent être entre guillemets alt=“description image”
- Nouvelle Balise Xhtml 2.0 reprise des codes w3c avec la possibilité de voir ce qui ne fonctionne pas.
HTML 5 et CSS 3
Le futur html est à nos portes. Un certain nombre de navigateur comme Firefox et Safari arrivent déjà à afficher de nouvelles commandes. Certains essais sont déjà implanté dans certains layout de mes différent site. Pour l'instant les commandes implantés sont uniquement des options visuels qui ne modifient pas le fonctionnement , mais peuvent apparêtre différemment dans les différent navigateurs disponible.
les commandes sont précédés d'un identificateur qui lancent les processus relatif au navigateur qui les supportent.
Ce qui fonctionne pas encore:
Au seins même de xhtml il y a des différences, les nouveaux navigateurs seront normalement capable d'interpréter les nouvelles syntax. Il semble quand même y avoir des différence d'interprétation entre navigateurs. En plus la déclaration du type de syntax sur une page joue aussi son rôle. dans le dokuwiki on utilise :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Certains attributs du xhtml 2.0 ça ne semble pas encore fonctionner. Je ne sais pas encore si ca provient du docuwiki ou du navigateur.
- Certaine balise xhtml on la possibilité d'inclure un lien mais ce lien ne fonctionne pas chez moi.
Exemples et Tests
- On peut même faire un saut vers une ancre définit dans un bloc html vers une ancre html dans une page wiki.
Marges et Bord
Attributs de marges:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;
}
Bloc flottant
Un bloc flottant est un bloc div avec des particularités de placement très libre qui permettent quasi toute les fantaisies au nouveau des mis en page.
Exemple
test_layer_2 avec changement du fond en blanc
Des menus sans javascript
- http://css.maxdesign.com.au/index.htm Autre menu en css
Les Tables
Attributs des tables
OpenCalc (Openoffice)
Après test le meilleur résultat s'obtient en sauvegardant le fichier open office en Html. Cela préserve les alignement et les couleurs. Le xhtml ne le fait pas correctement , ou n'est pas correctement interprété dans le docuwiki.
Une 3ème solution consiste à utiliser le plugin de openoffice calk2dokuwiki http://forum.dokuwiki.org/post/4178 Pas de couleur et attention au alignement des colonnes. La barre de titre doit être corrigé manuellement. Mais vous avez un code natif dokuwiki.
Fonctionnement du plugin:
- Sélectionner votre bloc de tableau
- Cliquer sur le bouton à gauche de votre barre.
- Le tableau est placé dans Officeword avec les balises du wiki.
- Recopier dans la fenêtre d'édition de Dokuwiki.
Alternative iframe
iframe n'est plus valide en xhtml , mais il existe une possibilité d'utiliser java scripte pour avoir un code valide en quelques lignes sans même utiliser de plugin.
Code:<script type="text/javascript">
<html>
<!--//--><![CDATA[//><!--
document.write('<iframe src="http://www.armuco.ch" width="700" height="800" frameborder="0" allowtransparency="true" ></iframe>');
//--><!]]>
</script>
</html>
Rubriques
Sélection de couleurs
- Les couleurs Sélection de couleurs
Images et galeries
- Xhtml et images Images et galeries dans un blog
Video-musique
- Object et Media Video,musique et Jeux dans un blog
Essais Divers
Malgré les divers plugins dans Dokuwiki, le côté design de page est un peu limité. Pour palier à ce problème, il est possible d'utiliser du code html dans les pages que vous éditez. Vous pouvez recopier des parties existantes des vos anciennes pages html ou résultant de certain logiciel dans le wiki.
Mais pour que ca fonctionne correctement il faut respecter un certain nombres de règles , et voir modifier certaines chose pour que vous n'ayez à refaire le bouleau plus tard si vous faites un update de Dokuwiki plus tard.
Le problème majeur provient des divers versions html et des divers codes que l'on peut trouver sur une page html ainsi que des divers navigateurs utilisés sur les divers plateformes d'ordinateurs (linux,mac,win$). En consultant le web ces derniers jours j'en suis venu à la conclusion qu'il sera probablement plus judicieux de se tenir aux nouvelles directives du W3c pour ne pas avoir à tout réécrire plus tard. Ce qui revient à utiliser dès maintenant le xhtml qui semble devenir le standard pour un certains temps on l'espère.
Mais pas de panique tout ne change pas. Mais il y a certaine règle à respecter maintenant. Il faut comprendre que les navigateurs actuels essaye de convertir des syntaxes divers pour obtenir un affichage plus ou moins correcte. L'idée est d'avoir à l'avenir une syntaxe plus uniformes et plus simple. On espère aussi que windows arrête un peu de vouloir toujours bander à part et de foutre la merde comme d'habitude.
Ressource et références
- W3c Nouvelle directive html W3c Nouvelle directive html
Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Noncommercial-Share Alike 3.0 Unported