04 février 2010

Clarifier ses pages HTML (4)

On améliore considérablement la lisibilité d'une page HTML en y ajoutant des commentaires. Ceux-ci doivent être compris entre les signes "<!--" et "-->" (tout ce qui se trouve entre ces deux signes est rendu inactif).

Exemple :

<!--texte du commentaire-->


Ainsi les pages HTML ne seront plus un tissu incompréhensible de codes, vous pourrez facilement vous y repérer et opérer les changements désirés au bon endroit.

Si vous "bidouillez" souvent, vous comprendrez vite l'intérêt qu'il y a à clarifier les pages HTML. Vous détecterez rapidement la moindre anomalie et par la même occasion vous éviterez d'en provoquer.

Posté par Michal53 à 08:25 - - Permalien [#]
Tags : ,

03 février 2010

Clarifier ses pages HTML (3)

Il existe un moyen simple et automatique d'obtenir des pages HTML claires. Il suffit de se connecter sur le site de Tidy.

Bien que le site soit en anglais, son utilisation reste très simple.

 

HTML_Tidy_Online_part1000

 

1- Faites un copier-coller de la page choisie du menu "Apparence" dans la case "HTML" :

tidy222

 

2- Modifiez les valeurs des différentes cases comme suit (donné à titre indicatif) :

HTML_Tidy_Online_part2

 

3- Validez en cliquant sur la case "Tidy" :

HTML_Tidy_Online_part3

 

4- Après quelques secondes, on obtient une page de résultats :

tidy3

 

5- En surlignant (CONTROLE+A) la partie centrale de la page, puis en la copiant (CONTROLE+C) et en la collant dans un nouveau fichier ouvert avec le bloc-notes de Windows on obtient une page bien structurée.

Posté par Michal53 à 12:24 - - Permalien [#]
Tags : ,
31 janvier 2010

Clarifier ses pages HTML (2)

Dans une page HTML on peut ajouter des sauts de lignes sans que cela affecte en quoi que ce soit le résultat.
Ces sauts de lignes ne doivent être ajoutés qu'entre des balises, jamais à l'intérieur d'une balise.

On peut donc disposer le texte en respectant deux principes :
- une balise (d'ouverture ou de fermeture) par ligne ;
- indenter (= décaler) les balises en fonction de leur niveau dans la hiérarchie des emboîtements.

Exemple :

<ul class="menu">
          <li class="top">
                    <a href="http://xyz" class="top_link">Accueil</a>
          </li>
          <li class="top">
                    <a href="http://xyz" class="top_link">Articles</a>
                    <ul class="sub">
                              <li>
                                        <a href="http://xyz">Des colonnes de même hauteur</a>
                              </li>
                                        <li>
                                        <a href="http://xyz">Ajouter une colonne</a>
                              </li>
                    </ul>
          </li>
</ul>

D'un coup d'oeil la structure est visualisée

Conseils :

- Faire ce travail de mise en ordre sur la copie de la page sauvegardée au format "txt" ;
- Veiller à ne rien ajouter ou enlever à ce stade de l'opération. La moindre guillemet en plus ou en moins, un espace retiré ou de trop, et c'est l'affichage de la page entière qui peut être compromis.

Posté par Michal53 à 08:28 - - Permalien [#]
Tags : , , , , , , ,
29 janvier 2010

Clarifier ses pages HTML (1)

Attention ! Toute manipulation sur ces pages doit être faite avec précaution :
- toujours faire une copie de sauvegarde avec un copier-coller (au format "txt" dans un fichier du bloc-notes de Windows - et uniquement le bloc-notes) ;
- toujours prévisualiser ses modifications avant de les valider.

Les pages HTML visibles dans le sous-menu "Editer les fichiers de ce modèle" du menu "Apparence" sont :
- La page d'accueil ;
- La page des archives ;
- La page de l'index des archives ;
- La page d'un message ;
- La page du profil d'un auteur ;
- La page de présentation d'un album ;
- La page d'une photo d'un album.

html01
menu "Apparence"

Leur contenu tel qu'il se présente à leur création manque de clarté. On en améliorera la lisibilité pour y déceler d'éventuelles erreurs en y mettant un peu d'ordre.

Pour cela il y a quelques principes simples de l'écriture du code HTML à connaître.

1- Une expression du type <balise >* doit obligatoirement être suivie (plus ou moins loin après) d'une autre s'écrivant </balise>**. (La première est une balise d'ouverture et la seconde une balise de fermeture.)
exemples :

<p>Il était une fois, un grand méchant loup...</p>
<div class="logolink">.......</div>
<a href="http://michal53.canalblog.com/"></a>

2- Comme des parenthèses dans un texte ordinaire, ces balises forment des ensembles qui doivent soit s'emboîter soit se succéder mais jamais se chevaucher.
exemple :

<div id="topbar-logo">
          <div class="logolink">
          <a href="http://michal53.canalblog.com/"></a>
          </div>
</div>

Ici on voit que les balises bleues sont à l'intérieur des balises vertes qui sont elles-mêmes bien comprises dans les balises rouges.

*On ne s'occupera pas des balises encadrées du signe "$" qui sont uniques.
**Les balises img (image) et br (retour à la ligne) font exception à la règle et sont uniques.

Posté par Michal53 à 08:30 - - Permalien [#]
Tags : , , ,
28 janvier 2010

Deux colonnes à gauche

Pour afficher les deux colonnes latérales à gauche de la colonne des articles, il faut juste s'atteler à un petit calcul.

 

perm_col_art04

On ajoute la propriété margin-left aux sélecteurs content et rightbar.

Pour content la valeur de margin-left sera égale à la largeur (width) de rightbar.
Pour rightbar la valeur de margin-left sera égale à la somme des largeurs de content et rightbar précédée du signe "moins".

Exemple :

#content {
          float: left;
          width : 340px;
          margin-left : 250px;;
}
#rightbar {
          float: left;
          width : 250px;
          margin-left : -590px;;
}

(250 + 340 = 590 pixels)

Posté par Michal53 à 10:19 - - Permalien [#]
Tags : , , , , , ,


Deux colonnes à droite

La disposition classique d'un modèle comportant trois colonnes veut que les colonnes latérales de menu soient disposées de chaque côté de la colonne des articles. Comme il est possible de le voir dans certains modèles présentés dans ce blog, on peut regrouper ces colonnes à droite sans rien modifier dans les pages HTML.

green
un exemple de disposition
des colonnes latérales

La marche à suivre ne nécessite qu'une seule modification :
On fait passer la colonne de gauche (leftbar) tout à droite en changeant simplement la valeur de la propriété float :

#leftbar {
          float: right;
}

perm_col_art03

Posté par Michal53 à 10:18 - - Permalien [#]
Tags : , , , , , ,
27 janvier 2010

Un vieux miroir...

Des allures de vieux miroir dont l'étain se décolle peu à peu ou de devanture de vieux bar sur les Grands Boulevards parisiens, un ciel menaçant la lande avant l'orage... Laissez-vous porter par votre imagination...

 


mirror

Posté par Michal53 à 09:40 - - Permalien [#]
Tags : , , , , , , , ,
26 janvier 2010

Dans ma rue...

Macadam, bitume, asphalte, béton, acier... A vous de construire le reste...

 


metallic

Posté par Michal53 à 10:01 - - Permalien [#]
Tags : , , , , , , , ,
24 janvier 2010

Pour les amoureux

Un tissu rapiécé avec des cœurs... Vous pourriez peut-être bientôt utiliser cet habillage, pourquoi pas ?

 


hearts

Posté par Michal53 à 09:17 - - Permalien [#]
Tags : , , , , , , , ,
22 janvier 2010

Une image de fond pour les commentaires

Il peut être intéressant d'insérer les commentaires des articles dans une image de fond.

divider_art

exemple de commentaires avec image de fond

La méthode employée est pratiquement la même que pour afficher un séparateur d'articles (voir cet article).

La différence réside dans l'image qui sera utilisée. Elle devra avoir une hauteur plus importante que nécessaire pour répondre à tous les besoins, en particulier lorsqu'il y a beaucoup de tags et donc plusieurs lignes.

divider_artb
l'image de fond

D'autre part, puisque la hauteur est variable il ne faudra pas la fixer (pas de height dans le sélecteur blogbody .itemfooter).

.blogbody .itemfooter {
          background: url(URL de l'image) bottom center no-repeat;
}

Posté par Michal53 à 09:19 - - Permalien [#]
Tags : , , , , , ,


« Début   2  3  4  5  6  7  8  9  10  11    Fin »