Le code HTML pour les nuls

Par défaut

Avant toute tentative de personnalisation de ton thème, prévois bien d’en enregistrer une version initiale. Celle-ci te serviras:

– si tu fais des erreurs en tâtonnant pour faire tes modifications.

– si tu acceptes une mise à jour de ton thème et que toutes les modifications que tu avais brillamment réussi à mettre au point s’effacent comme s’ils elles n’avaient jamais existé. Risque de crise de nerfs ;-p

Allez, c’est parti, je vais te livrer le fruits de mes propres tentatives.

Le code HTML pour les nuls

Premiers pas dans le HTML

Voici quelques définitions de base utiles. Si tu ne parles pas anglais, tu vas rencontrer une difficulté supplémentaire. Tu trouveras ici un peu d’aide utile:

– pour rechercher un terme dans les limbes des fichiers PHP, taper le raccourci “F3”. Il fera apparaitre un cartouche de recherche spécifique à ces pages, en haut, à droite de l’écran. Y faire la recherche attendue et taper entrée. Il faut retaper F3 + Entrée dans chacun des fichiers PHP où tu veux faire tes recherches. Une réponse négative indique “0”, une réponse positive indique “X sur XXX” et met en couleur (jaune ou orange) les termes recherchés dans les pages et le menu.

– la feuille de style CSS: donne à ton blog l’intégralité de ses caractéristiques de style et de mise en page.

– les autres fichiers html: définissent (sur la base de ta feuille de style CSS) l’interaction des pages et de leurs données entre elles.

– font-size: taille de la police

– font-weight: lighter, le texte est affiché en léger; normal, le texte est affiché en normal; bold, le texte est affiché en gras; bolder, le texte est affiché en très gras. Les chiffres associés sont: 100 (lighter), 200, 300, 400 (normal), 500, 600, 700 (bold = gras), 800, 900 (bolder = plus gras).

– line-height: la hauteur de ligne. Espacement entre deux lignes. Elle s’exprime en px (pixel), pt (point), em (unité relative à la taille de l’élément parent) ou % (pourcent). Inherit signifie que la ligne hérite de la propriété CSS de son parent (page supérieure).

– hover: indique qu’une police change quand on passe la souris dessus

– #RRVVBB = code couleur à appliquer à une police, à un fond, à une zone de texte ou d’image. Le très bon site Codes couleur HTML permet de définir tes couleurs et de connaître le ton contenu dans les codes par défaut de ton thème.

– background = fond d’une zone.

– header: en-tête. Partie haute d’une page, principalement de la page d’accueil.

– body: corps. Partie centrale de la page.

– footer: pied de page. Partie basse de la page.

– page: page. Contient un ensemble d’articles.

– single: article (simple).

– search: zone de recherche.

– tags: mots-clés.

– image-caption: légende.

FAQ

Bien équipé, tu prends confiance en ta capacité à influer sur ta page web et tu te poses maintenant un certain nombre de très bonnes questions.

image

Comment sauter une ligne dans mon code (tous thèmes)?
<br/> <BR>

Comment modifier la police de mon blog (thème Hueman)?
Cliquer sur la barre la plus supérieure de ta page sur le titre de ton blog. Apparaît alors un menu. Aller dans “Theme options”. Une petite arborescence apparaitra. Cliquer sur “Styling”. Tu trouveras dans “Font” un choix plus large de police.

Attention! Bien mettre “Dynamic styles” (la 1e option de la page) sur “ON” sinon, aucune des options en-dessous ne sera prise en compte.

Comment modifier la taille d’affichage par défaut des images (thème Hueman)?
Dans le menu de ton blog, aller dans “Apparences” > “Editeur”.

Puis, dans le fichiers PHP situés sur la droite de ta page, aller dans “Feuille de style CSS”. Dans le paragraphe “Thumbnail sizes”, indiquer pour un affichage plein de tes photos: medium: 420×390, large: 453×340.

Attention, le thème Hueman prend très mal en charge le format portrait. il vaut mieux se contenter du format paysage et prendre l’habitude de shooter directement dans ce format. Globalement, c’est un aléa de l’affichage des images sur le web…

Comment modifier la forme d’affichage de mes images (thème Hueman)?
Cliquer sur la barre la plus supérieure de ta page sur le titre de ton blog. Apparaît alors un menu. Aller dans “Theme options”. Une petite arborescence apparaitra. Cliquer sur “Styling”. Dans “Image border radius”, on peut changer la forme des images (de rectangle à rectangle aux bords plus ou moins arrondis).

Comment modifier l’affichage de ma barre de menu (thème Hueman)?
Dans le “Tableau de bord” de ton blog, dans le menu à gauche de la page, aller dans “Apparences”, puis “Editeur”.

Dans les fichiers PHP situés sur la droite de ta page, aller dans “Feuille de style CSS”.

Taper F3 pour faire apparaître en haut de la page à droite le cartouche de recherche dans la feuille. Taper “Header : nav header”, puis “Entrée”. Dans le paragraphe du même nom, faire les modifications utiles: couleur de la police (#xxxxxx ou RGBA), taille du bord ou suppression du bord (mettre 0 à tous les Xpx ou les augmenter).

Pour changer la couleur du fond de la zone: cliquer sur la barre la plus supérieure de ta page sur le titre de ton blog. Apparaît alors un menu. Aller dans “Theme options”. Une petite arborescence apparaitra. Cliquer sur “Styling”. C’est ici qu’on peut changer facilement la couleur des principaux fonds (topbar, header, body, footer…)

Comment modifier l’apparence de la légende sur les images (thème Hueman)?
Dans le “Tableau de bord” de ton blog, dans le menu à gauche de la page, aller dans “Apparences”, puis “Editeur”.

Dans les fichiers PHP situés sur la droite de ta page, aller dans “feuille de style CSS”.

Taper F3 pour faire apparaître en haut de la page à droite le cartouche de recherche dans la feuille. Y rentrer “image-caption”, puis “Entrée”.

Dans le paragraphe “common : responsive image + caption”, modifier la couleur du “background” et désactiver les options “webkit-border-radius” ( en mettant 0px) et “webkit-box-shadow” en remplaçant la couleur noire RGBA (0, 0, 0, 0.4) et RGBA (0, 0, 0, 0.3), par blanc (#ffffff). Cela donne:

.image-container { position: relative; } .image-container img { display: block; width: 100%; height: auto; } .image-caption { background: #ffffff; color:000000; font-size: 15px; line-height: 1.3em; font-style:bold; padding: 8px 10px; position: absolute; bottom: 8px; left: 8px; margin-right: 8px; -webkit-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: inset 0 1px 1px #ffffff, 0 1px 0 #ffffff; box-shadow: inset 0 1px 1px #ffffff, 0 1px 0 #ffffff; }

Rafraichir (F5 ou CTRL + R)

  •  
  •  
  •  
  •  
  •  
  •  

Donne ton avis sur cet article

Lance le débat!

100

wpDiscuz