 Nombre de messages : 2296 Âge : 29 Pensée du jour : Homo Homini Caleportus. Date d'inscription : 28/06/2010 | Raven / ☠ Corps ☠ Beau ☠ Blond ☠
Lun 17 Aoû 2015 - 16:39 | |
| Fiche évolutive. Cette fiche propose des éléments HTML pour vous aider à personnaliser les messages-récap' et les sommaires de vos romans, de vos nouvelles, de vos autres écrits, etc. Toutes vos requêtes et questions seront traitées et prises en compte pour permettre d'ajouter plus de contenu à ce petit recueil de style.
Comment ça fonctionne ? Ceci n'est pas un tutoriel, pas la peine de le lire du début à la fin. Regardez dans le sommaire et choisissez ce qui vous intéresse, tout simplement : je vais essayer de penser tout ça pour que ça soit utilisable très rapidement. SOMMAIRE ICI BIENTÔT… 1. Titres flottants.LOREM IPSUM Dolor sit amet etiam at augue facilisis, tincidunt lacus ac, iaculis felis. Quisque ex nisi, faucibus in tellus quis, tincidunt suscipit nibh. Mauris id purus vel lorem lacinia eleifend. Sed ac ornare metus. Sed non ipsum venenatis urna scelerisque facilisis. Aliquam sit amet tincidunt turpis. Vivamus enim risus, faucibus id tempor vel, tempus vel risus. Quisque vitae sapien felis. Pellentesque a justo vitae dolor dapibus eleifend et eu elit. Quisque eget lectus a ligula dignissim sagittis. Aenean ac semper augue, sit amet viverra magna. Proin non lobortis diam. Praesent vel enim sapien. Nullam volutpat erat at dui pulvinar, vitae volutpat risus convallis. Sed pellentesque dui ac fermentum semper.
- Code:
-
<div><div style="float:right;font-size:150%;margin:1em">LOREM IPSUM</div>Dolor sit amet etiam at augue facilisis, tincidunt lacus ac, iaculis felis. Quisque ex nisi, faucibus in tellus quis, tincidunt suscipit nibh.</div> Ici, on a deux blocs de texte ( div) imbriqués : le bloc "titre" et le bloc "paragraphe". La propriété float indique que le bloc interne doit chevaucher le bloc externe. La propriété margin ( em est une unité de mesure, 1em représente une fois la "hauteur de ligne" de la police affichée, cf. Wikipédia) permet de ne pas avoir ça : LOREM IPSUM Dolor sit amet etiam at augue facilisis, tincidunt lacus ac, iaculis felis. Quisque ex nisi, faucibus in tellus quis, tincidunt suscipit nibh. Mauris id purus vel lorem lacinia eleifend. Sed ac ornare metus. Sed non ipsum venenatis urna scelerisque facilisis. Aliquam sit amet tincidunt turpis. Vivamus enim risus, faucibus id tempor vel, tempus vel risus…
Par défaut, la taille du bloc titre est déterminée par le texte à l'intérieur : LOREM IPSUM DOLOR SIT AMET ETIAM AT AUGUE Tincidunt lacus ac, iaculis felis. Quisque ex nisi, faucibus in tellus quis, tincidunt suscipit nibh. Mauris id purus vel lorem lacinia eleifend. Sed ac ornare metus. Sed non ipsum venenatis urna scelerisque facilisis. Aliquam sit amet tincidunt turpis. Vivamus enim risus, faucibus id tempor vel, tempus vel risus. Quisque vitae sapien felis. Pellentesque a justo vitae dolor dapibus eleifend et eu elit. Quisque eget lectus a ligula dignissim sagittis. Aenean ac semper augue, sit amet viverra magna. Proin non lobortis diam. Praesent vel enim sapien. Nullam volutpat erat at dui pulvinar, vitae volutpat risus convallis. Sed pellentesque dui ac fermentum semper.
La largeur du bloc peut être définie ou restreinte en pixels ou en pourcentage (ce qui est mieux) dans style="" par les propriétés : width qui impose la valeur ; min-width qui impose une valeur minimum ; max-width qui restreint le bloc à une largeur maximum. 2. Écrire sur plusieurs colonnes.Comment se code un tableau ? — Les tableaux sont encadrés par deux balises table. À l'intérieur, on divise un tableau en lignes ( rows), d'où les balises tr, et les lignes sont elles-mêmes divisées en données ( data), d'où les balises td (qui sont en fait les balises de colonnes). Nota Bene. — C'est une bonne idée de toujours forcer la largeur d'un tableau à 100%. A. Tableau vertical| LOREM IPSUM | PELLENTESQUE | | Lorem ipsum dolor sit amet etiam at augue facilisis, tincidunt lacus ac, iaculis felis. Quisque ex nisi, faucibus in tellus quis, tincidunt suscipit nibh. Mauris id purus vel lorem lacinia eleifend. Sed ac ornare metus. Sed non ipsum venenatis urna scelerisque facilisis. Aliquam sit amet tincidunt turpis. Vivamus enim risus, faucibus id tempor vel, tempus vel risus. Quisque vitae sapien felis. | Pellentesque a justo vitae dolor dapibus eleifend et eu elit. Quisque eget lectus a ligula dignissim sagittis. Aenean ac semper augue, sit amet viverra magna. Proin non lobortis diam. Praesent vel enim sapien. Nullam volutpat erat at dui pulvinar, vitae volutpat risus convallis. Sed pellentesque dui ac fermentum semper. |
- Code:
-
<table width="100%" cellpadding="5px"><tr><td>TITRE N°1</td><td>TITRE N°2</td></tr><tr><td>PARAGRAPHE N°1</td><td>PARAGRAPHE N°2</td></tr></table> Le tableau vertical, c'est pas vraiment le tableau naturel en matière d'HTML. Les balises ont été conçues pour des tableaux qui contiennent des données, et pas du texte, donc écrire en colonnes comme dans un journal, c'est impossible (ou plutôt super chiant à faire). Mais ça peut servir pour présenter des trucs en parallèle, des projets de romans, des séries de nouvelles dans un même topic, etc. A. Tableau horizontal (pour les sommaires)| TITRE | AUTEUR | DATE DE PARU. | NB. DE PAGES | | TITRE | AUTEUR | DATE DE PARU. | NB. DE PAGES | | TITRE | AUTEUR | DATE DE PARU. | NB. DE PAGES |
- Code:
-
<table width="100%" cellpadding="5px"><tr><td>TITRE</td><td>AUTEUR</td><td>DATE DE PARU.</td><td>NB. DE PAGES</td></tr><tr><td>TITRE</td><td>AUTEUR</td><td>DATE DE PARU.</td><td>NB. DE PAGES</td></tr><tr><td>TITRE</td><td>AUTEUR</td><td>DATE DE PARU.</td><td>NB. DE PAGES</td></tr></table> Utile pour les sommaires, les tableaux horizontaux ont tendance à se transformer en montagne de code. Faut éviter de perdre le fil de ce qu'on fait avec ce genre de tableau. Les sommaires sont des tableaux horizontaux donc le principe est facile : pour ajouter ou supprimer une ligne, il suffit de copier le code de TR à /TR. (Les fonctions "Rechercher" et "Surligner tout" sont vos alliées.) POSEZ VOS QUESTIONS ET FAITES VOS REQUÊTES SI VOUS ÊTES INTÉRESSÉS ! |
|
 Nombre de messages : 7925 Âge : 86 Date d'inscription : 21/11/2014 | Pangolin / Très premier degré
Lun 17 Aoû 2015 - 17:59 | |
| Voussa grand sorcier !
Missa peur, missa pas savoir tout ça ! |
|
Nombre de messages : 2374 Âge : 29 Localisation : Strasbourg toujours Date d'inscription : 23/11/2013 | Trikopp / ☣ Gifomane ☣
Lun 17 Aoû 2015 - 18:41 | |
| Raven, tous mes remerciements ! Je vais enfin pouvoir comprendre un peu ce langage obscure et terriblement séduisant des balises HTLM. Et ainsi obtenir le pouvoir...  - Spoiler:
|
|
Nombre de messages : 2395 Âge : 25 Pensée du jour : Notre père qui êtes aux cieux restez-y. Date d'inscription : 18/01/2015 | Jezebeth / Guère épais
Lun 17 Aoû 2015 - 19:19 | |
| Merci pour le partage. Ce sera très utile. |
|
![[Formatage HTML] Éléments pour pages récap'. Giphy](https://2img.net/h/media.giphy.com/media/HZL9Y6Zi4AW88/giphy.gif)
![[Formatage HTML] Éléments pour pages récap'. Tumblr_m9j266Jf3a1rocjk1o1_500](https://2img.net/h/33.media.tumblr.com/tumblr_m9j266Jf3a1rocjk1o1_500.gif)
