On va un peu édité au fur et à mesure pour romancer, ajouter, modifier etc.
Invité Invité
Sujet: Re: Code divers (& d'été) Mer 13 Jan 2016 - 22:30
Tuto copié collé de JE ici : http://jeunesecrivains.superforum.fr/t28188-forum-mettre-en-forme-ses-textes
Nywth a écrit:
Vous n'êtes pas vraiment doué en informatique, et vous voudriez que votre texte soir un peu plus agréable à voir qu'un vulgaire pavé sur un fond marron ? Ce sujet va vous aider à mettre en forme vos posts.
1. Les tableaux
• Les tableaux, c'est beau, c'est joli, et ça permet d'encadrer son texte d'une chouette manière. Voici quelques codes pour les créer et les personnaliser facilement.
Pour insérer un tableau et pouvoir le personnifier au maximun, il faut utiliser le code :
(Si vous ne voyez pas les traits du tableau, c'est normal, pour le moment, ne vous inquiétez pas) Ceci est le code de base. Il fonctionne d'une manière très simple : TABLE et TBODY sont les balises qui délimitent votre tableau, TR marque une nouvelle ligne de votre tableau et TD une nouvelle case sur cette ligne. Les balises sont fermées après chaque case. Vous pouvez ainsi multiplier les lignes et les colonnes à votre guise.
Ensuite, vous pouvez rajouter des éléments pour embellir votre tableau.
Mettre un fond
Pour mettre un fond à votre tableau, nous allons agir sur la partie du code TABLE. Pour l'exemple, je choisis de mettre cette image en fond, ou un fond blanc (code ''FFFFFF'')
Pour rajouter un fond avec une couleur unie, Il faut rajouter le code bgcolor="FFFFFF" à la balise table Ici, avec la couleur choisie, ça donne :
La couleur est modifiable à l'infini ; il suffit de rentrer un code hexadécimal différent pour la changer, à la place de FFFFFF. Liste des codes hexadécimaux ici.
Pour rajouter un fond avec une image Il faut rajouter le code background="http://wolpeper.com/ciel-ete-vendee.JPG" à la balise table Ici, avec l'image choisie, ça donne :
L'image est modifiable à l'infini ; pour la changer, il suffit de rentrer l'adresse URL d'une autre image.
Note : Il est ainsi possible de modifier la couleur d'une seule cellule en conséquence, en rajoutant le code non pas à la balise table, mais à la balise TD qui correspond à la case de votre choix.
Définir une bordure
Pour définir une bordure, il faut rajouter un code dans l'entête ''TABLE''. Vous pouvez utiliser trois codes : cellspacing définit l'espace entre les différentes bordures du tableau; border définit la largeur de la bordure ; bordercolor définit la couleur de cette bordure.
Pour régler la hauteur et la largeur du tableau, il faut utiliser les codes Width et Height. Leur valeur peut se régler de deux manières différentes : en % (% par rapport à la page), ou en pixel, sachant que la largeur du forum est légèrement inférieure à 800 pixel. Il sont ajoutés au code TABLE.
Note : Il est ainsi possible de modifier la taille d'une seule cellule en conséquence, en rajoutant le code non pas à la balise table, mais à la balise TD qui correspond à la case de votre choix.
Choisir l'alignement à l'intérieur du tableau
Pour régler l'alignement à l'intérieur du tableau, il faut ajouter dans la partie TABLE plusieurs codes : Valign=top(centré en haut), middle(centré au milieu) ou bottom (centré en bas) définit l'alignement vertical à l'intérieur des cellules. Align=left(gauche) ou right(droite) ou center(centrer) ou justify(justify) pour régler l'alignement horizontal du texte. En revanche, il faut l'ajouter dans les cellules TR ou TD ; l'ajouter dans la partie TABLE reviendrait à définir son alignement face à la page.
Note : Il est ainsi possible de modifier l'alignement d'une seule cellule en conséquence, en rajoutant le code non pas à la balise table, mais à la balise TD qui correspond à la case de votre choix.
Donner un titre à son tableau
Pour donner un titre à son tableau, il faut insérer une balise CAPTION entre la balise TABLE et la balise TBODY.
Deux codes, Rowspan et colspan, insérés dans la balise TD concernée, permettent respectivement que la cellule s'étende sur plusieurs lignes ou colonne (le numéro correspond au nombre de cellule sur lesquelles doit s'établir la cellule courante, 1 étant le numéro de la cellule elle-même)
puis http://jeunesecrivains.superforum.fr/t41301-formatage-html-elements-pour-pages-recap
Raven a écrit:
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.
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 !
Yggdarsil Roi des Koalas
Messages : 506 Date d'inscription : 25/10/2012 Localisation : Dans le doute. Ou l'ignorance. Surement l'un des deux. Humeur : Pourvu que ça dure !
Sujet: Re: Code divers (& d'été) Jeu 10 Mar 2016 - 17:45
Petit bonus: ffeee3, ou la couleur de fond la plus reposante que je connais! A utiliser avec une police noire, bien entendu. N'hésitez pas, si le texte est long, à faire légèrement varier la teinte d'une page à l'autre, ça évite encore plus d'être gêné...
Code:
[table bgcolor="ffeee3"][tr][td][color=#000000]Petit bonus: ffeee3, ou la couleur de fond la plus reposante que je connais! A utiliser avec une police noire, bien entendu. N'hésitez pas, si le texte est long, à faire légèrement varier la teinte d'une page à l'autre, ça évite encore plus d'être gêné...[/color][/td] [/tr] [/table]
------------------------------------------------------------------------------------------------ Il est des gens qui sont là. Comme ça. En vrai. Et d'autres dont la présence est un mensonge. Une illusion. Efficace, quand elle trompe tout le monde. Ridicule, quand elle ne trompe que son porteur. -Lyonel Trouillot, Kannjawou
Donc, je vous fait une suggestion de présentation pour vos histoire, afin de que ce soit joli. Copiez collez ce qu'il y a dans le cadre. Veillez à insérer le code des alinéas au début de chaque paragraphe. Et voilà
Code:
<fieldset style="border: 3px solid #FFFFFF;"> <div><div style="float:right;font-size:150%;margin:1em">TITRE DE VOTRE OEUVRE</div>
Notez que le titre peut aussi être inséré dans le cadre.
Code:
<fieldset style="border: 3px solid #FFFFFF;"><legend style=" color: #FFFFFF; text-align: center: 20px; ; letter-spacing:4px; ">Ceci est un titre</legend>Ceci est un texte</fieldset>
Note, si vous souhaitez adopter ce code pour une poésie, il y a une petite astuce. Le fond s'adapte à la longueur de vos phrase donc: (on va prendre un poème de prévert en illustration) Pour passer de ca
A ça
Il suffit d'ajouter (après la balise [/color] Une phrase longue (ici "Ceci est une phrase longue qui n'a d'autre but que d'élargir le fond blanc afin que vos mirettes amaigris par l'écran sans échancrure puissent mieux voir")
J'espère avoir était clair
Alton Casseur de forum depuis 2005
Messages : 571 Date d'inscription : 12/04/2015 Localisation : La taverne la Pomme de Pin Humeur : Eh Chaussette !
Petit message pour présenter un autre code reprenant ceux présenté plus aux par mes illustres confères. Suite aux inévitables débat entre untel qui préfèrent le noir sur blanc, ceux qui préfèrent le blanc sur noir (Ceux là ont raison comme chacun sait #ObjectivitéSansEgale) et ceux qui préfèrent l'Azur sur rose bonbon (le nec plus ultra de la lisibilité pour Barbappa du pays des bisounours) je vous propose de hurler à la face du monde "Debrouillez-brave gens" avec une balise permettant au lecteur de faire se choix ô combien cornélien
Demo et latin :
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[size=18][center]Votre super texte [/center][/size] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div>
Précision, pour le moment il est impossible de coller quoique-ce soit entre les blocs
qui représente les boutons moches et les balise contenant les textes
Code:
<div class='textePerso'> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
Tout cela reste un peu expérimental, nous allons essayer de bidouiller et d'améliorer cette balise, mais n'hésitez par à nous faire signe si ça ne marche pas chez vous !
C'est brillant Alton et véritablement primordial. Je l'utiliserais lors de mes prochains textes Félicitation! R.
Cornedor Divine cerfette et ses lapins multicolores
Messages : 5120 Date d'inscription : 17/05/2014 Localisation : Endormie dans un terrier de lapins. Humeur : Lapinesque. (ça veut dire paisible et joyeuse)
C'est génial, comme je te l'avais dit sur ton sujet de test, tu est un GENIE
Le nec le plus ultra (encore plus qu'une version azur sur rose bonbon) serait d'avoir un code mini ou plus simple pour les noctus qui y pigent rien en code (j'en ai encore un qui m'a envoyé un MP parce qu'il arrivait pas à se servir du fond blanc, malgré le tuto ) Mais après j'y connais rien et je suis sûre que tu peux pas faire de trucs aussi "ergonomiques" que l'option des citations ou des spoilers sur Forumactif, ça doit être super galère
BREF c'est trop cool, je vais faire une annonce voire même un MP collectif pour fêter ça
Lapine : Ce à quoi je répondrai la même chose que sur le dit sujet (Sens de la mesure, merci, toussa).
Blague a part, oui je réfléchis à une astuce pour simplifier le code, mais l'idée des balises phpBB me semble très compliquée, je vois mal forum actif prendre le pseudo-code du premier crétin venu pour en faire une balise "Officielle"(J'ai déjà dû coller du code là ou il y a rien a y foutre pour simplifier l'utilisation, non patapéééé ...). Dans le pire des cas, si vraiment c'est un problème je pourrais me risquer à la rédaction d'un tuto pour l'utilisation des codes !
Merci encore à vous !
Cornedor Divine cerfette et ses lapins multicolores
Messages : 5120 Date d'inscription : 17/05/2014 Localisation : Endormie dans un terrier de lapins. Humeur : Lapinesque. (ça veut dire paisible et joyeuse)
Accueil 
Publications 
