IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Exemple d'article multipage DVP

Projet d'affichage
Image non disponible


précédentsommairesuivant

II. La notion de paragraphe

II-A. Balises situées dans une zone <paragraph>

Cette balise permet d'insérer du texte. On peut la retrouver à l'intérieur d'une section, d'un synopsis...

II-A-1. Mise en forme

Voici un exemple de contenu avec la mise en forme du texte.

Voici un paragraphe utilisant du texte en gras, italique, souligné, avec des mots en exposant comme E=MC2 ou en indice (texte en indice). On peut aussi avoir du texte inline.

Texte avant Ce texte est important Texte après !

Voici une citation récupérée sur Internet.

Décrocher un Oscar, c'est aussi difficile que d'embrasser ses propres fesses...

L'auteur de cette citation devait être inspiré ce jour là !

Il est également possible de mettre du texte en couleur : rouge, vert, bleu...
Sans oublier la possibilité de mettre des caractères spéciaux : ÀÂÆÇÉÈÈÊËÎÏÔÔŒÛÜÙ€ àâæçéèêëîïôœûüù

II-A-2. Images dans le texte

Voici une image dans le texte : Image non disponible avec la balise image : Image non disponible.

II-A-3. Liens

Voici une liste de type de liens autorisés :
- Relatif : ./images/nono.jpgExemple de titre
- Absolu : https://nono40.developpez.com/images/nono.gifExemple de titre
- FTP : ftp://nono40.developpez.com/nono.jpgExemple de titre
- News : news://borland.public.delphiExemple de titre
- HTTPS : https://www.google.fr/Exemple de titre
- MAILTO :

Nouvelle balise de lien vers un message du forum :
- Liens vers le forum avec note affichée : 170 commentaires Donner une note à l´article (5)
- Liens vers le forum sans note affichée : 170 commentaires
Nous pouvons mettre un lien-forum (170 commentaires Donner une note à l´article (5)) au milieu du texte

Voici une liste de type de liens avec image autorisés :

Lien avec texte : Site developpez.com
Lien utilisant l'attribut target : Site developpez.com
Lien avec l'attribut langue : Site developpez.com
Lien avec le tag faq : FAQ developpez.com
Lien avec le tag source au singulier : Site de developpez.com
Lien avec le tag sources au pluriel : Site de developpez.com
Lien avec le tag dico : Site de developpez.com
Lien avec l'image ZIP : FAQ Perl de developpez.com
Lien avec l'image PDF : FAQ Perl de developpez.com
Lien avec une mise en en forme à l'intérieur : Site de developpez.com

Renvoi : lien à l'intérieur du document : Renvoi vers la section tableaux

II-A-4. Mettre du LaTeX dans le texte

Vous pouvez mettre du LaTeX dans le texte d'un paragraphe via la balise <latex>

Voici du texte avant mon code LaTeX : kitxmlcodeinlinelatexdvp\forall 1 \leq j \leq p , a_{j} = g(in_{j}) = g(\sum_{i = 0}^{n}w_{i,j} \times x_{i}) = g((\sum_{i = 1}^{n}w_{i,j} \times x_{i}) - w_{0,j})finkitxmlcodeinlinelatexdvp


kitxmlcodeinlinelatexdvp\forall 1 \leq j \leq p , a_{j} = g(in_{j}) = g(\sum_{i = 0}^{n}w_{i,j} \times x_{i}) = g((\sum_{i = 1}^{n}w_{i,j} \times x_{i}) - w_{0,j})finkitxmlcodeinlinelatexdvp Merci

Une fonction : kitxmlcodeinlinelatexdvpP(x) = \frac{1}{\sigma.\sqrt{2\pi}} . exp(- \frac{x^2}{2.\sigma^2})finkitxmlcodeinlinelatexdvp

Une formule : kitxmlcodeinlinelatexdvpU(t+\mathrm{d}t)-U(t)=\iiint_\tau \rho c (T(t+\mathrm{d}t)-T(t)) \mathrm{d}\tau = \iiint_\tau \rho c \frac{\partial T}{\partial t} \mathrm{d}t \mathrm{d}\taufinkitxmlcodeinlinelatexdvp

Grande formule : kitxmlcodeinlinelatexdvp\frac{\partial\mathbf{F}} {\partial\mathbf{X}}= \begin{bmatrix} \frac{\partial\mathbf F_{1,1}}{\partial \mathbf X} & \cdots & \frac{\partial \mathbf F_{n,1}}{\partial \mathbf X}\\ \vdots & \ddots & \vdots\\ \frac{\partial\mathbf F_{1,m}}{\partial \mathbf X} & \cdots & \frac{\partial \mathbf F_{n,m}}{\partial \mathbf X}\\ \end{bmatrix}finkitxmlcodeinlinelatexdvp
Voici la racine carré de 25 (kitxmlcodeinlinelatexdvp \sqrt 25 finkitxmlcodeinlinelatexdvp) égale à 5.

Vous pouvez aussi mettre du LaTeX en dehors d'un paragraphe, les formules seront alors centrées comme des images : (voir chapitre LaTeX hors paragraphe)

II-A-5. Note de bas de page

Pour insérer une note de bas de page(1), vous devez utiliser la balise(2) <noteBasPage>. La note doit être écrite dans le paragraphe qui y fait référence.

II-A-6. Acronyme

CPANComprehensive Perl Archive Network, A.D.S.L.Asymetric Digital Subscriber Line, A.P.I.Application Programming Interface, R.A.M.Random Acces Memory.

II-A-7. Les index

Un index est une liste de mots ordonnés de façon lexicographique. Il permet normalement à la fin d'un livre de lister certains mots-clés avec les numéros auxquels ils sont associés. Dans les tutoriels developpez.com, vous aurez des renvois depuis les index vers le contenu de l'article. Pour créer un index, il suffit d'encadrer chaque mot par une balise « index » : <index>mot</index>.

II-B. Balises situées en dehors d'une zone <paragraph>

II-B-1. Images en dehors du texte

Image centrée et située en dehors d'un paragraphe.

Image non disponible

Images contenant un alignement et une légende.

Image non disponible
Je suis à gauche
Image non disponible
Centre
Image non disponible
Droite

Il est possible de mettre un lien hypertexte dans une image :

Image non disponible

Images avec affichage de miniatures :

Image non disponible
Image non disponible
Image non disponible
Image non disponible
Image non disponible

II-B-2. Balise imgtext

La balise <imgtext>, à placer au même niveau qu'une balise <paragraph>, permet de mettre une image d'agrément sur le côté du texte. On peut mettre une image personnelle ou utiliser le code faisant référence à une idée, une attention ou une information.

La balise <imgtext>, à placer au même niveau qu'une balise <paragraph>, permet de mettre une image d'agrément sur le côté du texte.

: <imgtext type="idea"> J'ai une idée !
HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu pour représenter les pages web). Cette version HTML5 est en développement en 2012. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de la technologie. Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant.

<imgtext type="info">J'ai une information !

HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu pour représenter les pages web). Cette version HTML5 est en développement en 2012. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de la technologie. Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant.

<imgtext type="warning"> Attention, message important !

HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu pour représenter les pages web). Cette version HTML5 est en développement en 2012. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de la technologie. Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant.

<imgtext type="error"> Attention, message important !

HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu pour représenter les pages web). Cette version HTML5 est en développement en 2012. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de la technologie. Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant.

<imgtext src="image.jpg"> Image personnelle de mon profil.

HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu pour représenter les pages web). Cette version HTML5 est en développement en 2012. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de la technologie. Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant. HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu pour représenter les pages web). Cette version HTML5 est en développement en 2012. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de la technologie. Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant. HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu pour représenter les pages web). Cette version HTML5 est en développement en 2012. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de la technologie. Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant. HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu pour représenter les pages web). Cette version HTML5 est en développement en 2012. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de la technologie. Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant. HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu pour représenter les pages web). Cette version HTML5 est en développement en 2012. HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur le même document afin de maintenir une version unique de la technologie. Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant.

II-B-3. Balise rich-imgtext

La balise rich-imgtext est une variante de la balise imgtext vous permettant d'insérer autre chose que du texte : des tableaux, du code, des listes...

Du coup on peut aussi y remettre des imgtext...

Avec un tablau !
AAA BBB CCC

Attention !
... un petit warning

Mais bon sang c'est bien ça !
...

Et voila !
...

Mettons un tableau.

Cellule1,1 Celulle1,2
Cellule2,1 Cellule2,2

Voici du code Perl :

 
Sélectionnez
#!/usr/bin/perl
use strict;
use warnings;
# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).
Résultat :
  • Bonjour
 
Sélectionnez
#!/usr/bin/perl
use strict;
use warnings;
# Ce code est dangereux.
system 'rm -rf /'

II-B-4. Les tableaux

Tableau sans entête

Texte à gauche Texte à droite
Texte centré Texte avec une image : Image non disponible

Tableau sans bordures

Ma légende
l0c0 l0c1 l0c2
l1c0 l1c1 l1c2

Tableau avec légende et cellules groupées.

Légende du tableau.
Entête Entête
Cellule 1 Cellules fusionnées
Cellule 2 avec couleur

Il est possible de fixer les tailles des colonnes dans un tableau à l'aide de l'attribut width.

Col1 Col2 Col3
20 % taille libre 120 px
Tableau Code Liste
Image non disponible
Nono !
AABB
CCDD
 
Sélectionnez
<balise>data</balise>
Une liste :
  • numéro 1 ;
  • numéro 2.

II-B-5. Les listes

La balise <liste> permet d'afficher une liste d'éléments.

Il est possible de modifier les puces en ajoutant un tag type à la balise liste. Vous devez utiliser dans la balise <liste> l'attribut « type ». Il peut prendre les valeurs : 1, a, A, i, I. En fonction du type choisi, vous obtiendrez, à la place des puces classiques, une numérotation avec des chiffres ou des lettres.

  • Liste simple
  • liste simple

Liste avec différents types :

  1. chiffre
  2. chiffre

    1. lettre
    2. lettre
  1. chiffre 3
  2. chiffre 4
  3. chiffre 5
  1. Liste avec des lettres
  2. Suite des lettre
  1. Liste avec des lettres
  2. Suite des lettre
  1. Liste avec des lettres
  2. Suite des lettre

Liste sans puces :

  • liste simple 1
  • liste simple 2
  • liste simple 3

II-B-6. Zones de code et code inline

code inline : print "Bonjour\n";

code inline avec coloration : print "Bonjour\n";

Code avec titre

Titre de mon code
Sélectionnez
#!/usr/bin/perl
use strict;
use warnings;
# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).

Code sans titre

 
Sélectionnez
#!/usr/bin/perl
use strict;
use warnings;
# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).

Code avec des numéros de lignes

 
Sélectionnez
1.
2.
3.
4.
5.
#!/usr/bin/perl
use strict;
use warnings;
# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).

Code avec des numéros de lignes commençant à 3

 
Sélectionnez
3.
4.
5.
6.
7.
#!/usr/bin/perl
use strict;
use warnings;
# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).

Code accordéon (montrer/cacher)

Code avec accordéon
Cacher/Afficher le codeSélectionnez
1.
2.
3.
4.
5.
#!/usr/bin/perl
use strict;
use warnings;
# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).

Code avec lien vers un fichier

code à télécharger
TéléchargerCacher/Afficher le codeSélectionnez

Code Brute copié dans la page web via la balise <html-brut>

 
Sélectionnez
<canvas id="canvas" width="150" height="150">
    <p>This example requires a browser that supports the
    <a href="http://www.w3.org/html/wg/drafts/html/master/">HTML5</a>
    feature.</p>
</canvas>
  <script>
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
  </script>

This example requires a browser that supports the HTML5 feature.

II-B-7. Les animations, vidéos et présentations

Cette balise permet d'ajouter une vidéo de type flash swf, flv, mp4 dans votre article ou même un lien YouTube, Dailymotion ou vimeo. Vous pouvez également insérer un son mp3. Voici comment insérer les différents types de vidéos ou sons.

Liens Youtube


Asa - Broda OLE



Milky Chance - Stolen Dance (Album Version)



Perl Vs Python


Lien Dailymotion


Cliquez pour lire la vidéo


Lien Vimeo

Cliquez sur ma vidéo vimeo : The Mountain

vidéos SWF


Asa 360°



vidéos FLV

vidéos MP3

Asa - 360°

Lecture d'une playlist mp3

vidéos MP4

vidéos M4V

présentation slideshare

Perl

présentation speakerdeck

II-B-8. LaTeX hors paragraphe

kitxmlcodelatexdvpP(x) = \frac{1}{\sigma.\sqrt{2\pi}} . exp(- \frac{x^2}{2.\sigma^2})finkitxmlcodelatexdvp

précédentsommairesuivant
Ceci est un exemple de note de bas de page : https://www.developpez.com ou https://www.developpez.com
balise, nom féminin
Sens 1 Objet, dispositif qui permet de guider, de faire suivre un tracé précis. Synonyme clignotant Anglais (aviation) light, (marine) beacon, (route) raod sign, ski (marker)
Sens 2 Marque qui permet d'identifier un élément d'un fichier, sa fonction, son emplacement [Informatique]. Anglais tag
Sens 3 Fruit du balisier [Botanique].

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2020 djibril. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.