WordPress me permet de tenir ce blog sans prise de tête, avec un éditeur graphique qui ressemble à un logiciel de traitement de texte. De temps en temps, il m’arrive aussi de regarder le code html des billets mais j’ai vraiment « mis les mains dans le cambouis » en mettant à jour le thème de ce blog.
J’ai trouvé pas mal de doc sur internet et j’ai quelques sites de référence qui offrent les ressources ou les tutoriels nécessaires pour comprendre : Le site du zéro, souvent référencé en tant que tel mais devenu Openclassrooms ; developpez.com ; Alsacréations. Comme j’ai une mémoire de poisson rouge, je suis souvent revenu chercher des infos que j’avais déjà consultées et j’ai décidé de me faire mon petit aide-mémoire.
En html, quasiment tout est géré par des balises <> qui s’ouvrent comme cela <balise> et se ferment comme cela </balise>. Les formats peuvent être entièrement définis ainsi, mais on fait souvent appel à des éléments prédéfinis dans le fichier css, les classes ou styles, qui évitent des structures lourdes qui cumulent plusieurs balises.
Quelques balises html
- <a> insère un lien hypertexte ; en css on définit aussi le lien survolé a:hover et le lien visité a:visited
- <blockquote> ou <q> pour une citation (formaté dans le css)
- <br> impose un saut de ligne ; cette balise simple n’a pas à être fermée
- <caption> pour les titres ou légendes des photos et des tableaux
- <cite> pour indiquer la source d’une citation ou on auteur
- <div > marque une partie, une section, un tableau. Peut intégrer des sous-parties marquées avec d’autres attribut de formatage
- <img> appelle une image, doit être suivi de src=″emplacement de l’image″
- <h1> , <h2>… indique les niveaux de titre qui sont préformatés dans le css
- <hr> pour insérer une ligne. C’est une balise simple comme <br>, elle n’a pas besoin d’être fermée et elle peut être complétée d’attributs de forme, taille ou style
- <li> marqueur de ligne dans une liste
- <ol> pour créer une liste numérotée
- <p> définit un paragraphe
- <span> pour appeler un format (couleur, taille, police…)
- <sub> met en indice
- <sup> met en exposant
- <table> insère un tableau
- <th> haut de colonne d’un tableau
- <tr> lignes de tableau
- <td> cellule d’un tableau
- <ul> définit une liste à puces
L’html ne connait pas tous les signes typographiques et certains ont besoin d’être codés pour s’afficher
- » donne des « guillemets doubles ouvrants
- « des guillemets doubles fermants »
- " pour avoir des guillemets doubles droits » qui seront toutefois interprétés par le navigateur
- < permet d’insérer < et il est complété par > qui ferme >
- & pour l’esperluette &
- impose une espace insécable
- <word-wrap> et ses valeurs normal, break-all, keep-all est un balise qui gère les césures mais est utilisées exclusivement dans le css.
Formatage
Tous les enrichissements peuvent s’appliquer à une lettre, un texte, un tableau…. Bien sûr, il y a les balises <i> pour italique, <b> pour gras, <u> pour souligné… moins connu : <s> pour rayé.
La balise <em> (emphasis) est utilisée pour mettre en valeur et <strong> pour un renforcement; dans les faits, elles sont interprétées comme italique et gras mais ont une valeur supplémentaire.
A noter que em peut aussi indiquer la taille de la police, il est utilisé en pourcentage de la taille de base définie dans le css (si la taille standard est 14 ; 0,85em indique taille 12).
Ces enrichissements de texte sont assez simples à mettre en place en html et on peut même ajouter d’autres spécificités, même s’il est préférable d’utiliser le css pour cela :
- pour définir les polices de caractères, on utilise font-face, font-size (de xx-small à xx-large, % em ou taille en pixels), font-color, font-style (normal, italic) et/ou font-weight (lighter ou 100, normal ou 400, bold ou 700, bolder ou 900) ;
- pour régler l’alignement, c’est align et les valeurs left, right, center, justify ;
- pour l’enrichissement, on choisit text-decoration et les valeurs none, underline, overline, line through (le clignotement de blink ne fonctionne pas avec tous les navigateurs) ;
- pour définir le fond, on prend background ;
- on définit la largeur et la taille d’un élément avec width et size ;
- et toute mention de color doit être suivie de la couleur définie par son nom, son code hexadécimal ou rvb.
Listes
Une liste est introduite par une balise qui en définit le type : <ul> pour une liste à puces et <ol> pour une liste ordonnée. Ensuite, chaque ligne de la liste est notée par la balise <li>.
Les balises <ul> et <ol> peuvent être enrichies d’un attribut type qui va définir la puce (none, disc, circle ou square) ou le format (1, a, A, i, I) ; là encore, il est préférable de faire ce réglage en css.
Pour les listes ordonnées, l’attribut start permet aussi de définir la première valeur.
Image
L’image peut être sur un site web ou sur le serveur. En plus de src=″adresse″ qui va chercher son emplacement, elle peut être enrichie avec alt qui va s’afficher lorsque le curseur est sur l’image.
L’image peut être alignée (align), enrichie d’une bordure (border) ou peut avoir un titre ou une légende avec la balise caption.
Liens
Introduit par la balise <a> qui doit être suivie de href=″adresse du lien″, le lien se fait vers une page web (href=″www.site-web.com″). On peut forcer l’ouverture d’un nouvel onglet dans le navigateur avec target=″_blank″ avant la fermeture de la balise. Le lien peut aussi se faire vers une adresse mail avec <a href=″mailto:adresse@fournisseur.com″>.
L’ancre permet de faire un lien à l’intérieur de la même page. On crée l’ancre avec l’attribut id ou name, ce qui donne <a id=″nom de l’ancre″> texte en lien</a>
et on l’appelle son nom avec lien hypertexte assez classique, le nom de l’ancre doit être précédé de dièse :
<a href=″#nom de l’ancre″> texte à lier </a>.
A titre d’exemple, j’ai inséré une ancre au niveau du titre Quelques balises html et un lien vers lui ici [clic]. Les ancres ne font pas bon ménage avec les niveaux de titre et ont tendance à créer le lien à sa suite, sauf à les insérer la ligne précédente.
Tableaux
Les tableaux sont un peu plus compliqués à gérer. Ils sont repérés par une première balise <table>, les lignes sont gérés par <tr>, les cellules par <td> et, en option, les hauts de colonne par <th>.
On peut intégrer la balise <span> à l’intérieur de ces balises de lignes, colonnes ou cellules pour enrichir le fond, le texte ou les bordures. Les tailles et couleurs des bordures se règlent aussi avec les attributs border, margin (marge extérieure) et padding (marge intérieure). Par défaut, une seule instruction s’applique à toutes les bordures ; mais on peut personnaliser chacune, l’ordre est haut-droit-bas-gauche.
Les cellules ont quelques réglages supplémentaires :
- width règle la largeur des cellules
- et height leur hauteur ;
- align formate l’alignement horizontal du texte
- et valign règle l’alignement vertical ;
- colspan fusionne sur une même ligne le nombre de cellules indiquées ;
- rowspan fusionne sur une même colonne le nombre de cellules indiquées.