Le Wiki de Papinou

Sommaire Accueil Contact

HTML : masquer/afficher un texte

Si vous voulez masquer puis démasquer un texte vous pouvez utiliser les balises <details> et <summary> de la façon suivante :

<details> <summary>ici la question !</summary> et là, la réponse... CQFD ! </details>

Ce qui donne comme résultat (cliquez pour faire apparaître le texte caché et ré-appuyez pour le cacher à nouveau) :

ici la question ! et là, la réponse... CQFD !

Vous pouvez utiliser ce moyen pour réaliser des listes de révisions dans bien des domaines (apprentissage des langues, informatique, sciences etc...)

HTML : afficher le code sans l'exécuter

--> pour afficher le code tel qu'il apparaît plus haut j'ai utilisé la balise <xmp> (raccourci de exemple). Elle permet d'afficher le code html sans l'exécuter. Elle n'est plus recommandée. On peut la remplacer par la balise <pre> ou la balise <code>.

---> pour échapper le caracère < et le caractère > employez &lt et &gt

---> On peut y ajouter un peu de style ! 

<style>
pre
(ou code) {
background-color: #eee;
border-radius: 5px;
font-family: courier, monospace;
padding: 0 3px;
}
</style>

ce qui donne : 

<html>				
<details>
<summary>ici la question !</summary>
et là, la réponse... CPFD !
</details>
</html>

Archiver et Compresser un fichier ou un dossier

Si vous voulez archiver des documents sous une forme compressée deux étapes sont obligatoires :

  • Créer une archive,
  • Compresser cette archive.

Réalisez les deux opérations en même temps avec L'utilitaire "tar" dans le terminal en tapant :

cd /chemin_vers_l'endroit_où_se_situe_votre_fichier_ou_votre_dossier/
puis validez et ensuite tapez : 
tar -czvf archive.tar.gz nom_du_fichier_ou_du_dossier
puis validez.

---> "archive.tar.gz" est l'archive qui sera créée,
---> -czvf est l'ordre de créer l'archive, de la compresser en utilisant le fichier ou le dossier de manière verbeuse (bavarde),
---> puis vient le "nom du fichier ou du dossier".

Validez. Votre archive est créée à l'endroit que vous aurez choisi.

Si vous voulez afficher une image à côté d'un texte :

<code>
	<html>

	<div style="display:inline-block; vertical-align:top;">
	<img src="choisir_une_image.png" alt="une image" width="auto" height="190">
	</div>

	<div style="display:inline-block;">
		<pre>
			blablablablablabla
			blablablablablabla
			blablablablablabla
			blablablablablabla
			blablablablablabla
			blablablablablabla
			blablablablablabla
			blablablablablabla
			blablablablablabla
			blablablablablabla
			blablablablablabla
			blablablablablabla.
		</pre>
	</div<>
	</html>
</code>