Warning: filemtime(): stat failed for /home/developpez/www/developpez-com/upload/djibrilhttp://www.developpez.com/template/kit/article.css in /home/developpez/www/developpez-com/template/entete.php on line 405
IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Article DVP avec le nouveau look

Projet d'affichage

Publié le 17 mars 2012 et mis à jour le 31 mars 2012

Par NOM PRENOM Site personnel Blog Profil Google+

 djibril Site personnel lien test 1 Blog Profil Google+

 

Public visé : tout le monde

durée : 30 minutes

Portion de texte servant de synopsis ou édito pour un article developpez.com. Il vous permet de faire un résumé assez bref de votre article. Ce synopsis peut contenir du texte en gras, italique ou souligné.
Penser également à y mettre un lien pointant vers la discussion du forum : 170 commentaires Donner une note à l´article (5)

       Version PDF   Version hors-ligne   Version eBooks
Viadeo Twitter Facebook Share on Google+        



I. Les chapitres ou sections
II. La notion de paragraphe
II-A. Balises situées dans une zone <paragraph>
II-A-1. Mise en forme
II-A-2. Images dans le texte
II-A-3. Liens
II-A-4. Mettre du Latex dans le texte
II-A-5. Note de bas de page
II-B. Balises situées en dehors d'une zone <paragraph>
II-B-1. Images en dehors du texte
II-B-2. Balise imgtext
II-B-3. Balise rich-imgtext
II-B-4. Les tableaux
II-B-5. Les listes
II-B-6. Zones de code
II-B-7. Les animations ou vidéos
II-B-8. Latex hors paragraphe
III. Exemple de coloration des codes
III-A. CSS
III-B. Delphi et Delphi pour .NET
III-C. JAVA
III-D. Perl
III-E. PHP
III-F. XML
IV. En savoir plus


I. Les chapitres ou sections

Les chapitres ou sections permettent d'organiser votre article. Les sections sont automatiquement ajoutées à la table des matières lors de la génération de l'article. Vous pouvez très bien imbriquer les balises sections pour créer des sous-parties.


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.

Ce paragraphe est important.

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 : avec la balise image.


II-A-3. Liens


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 : fr Site developpez.com
Lien avec le tag faq : faq FAQ developpez.com
Lien avec le tag source au singulier : src Site de developpez.com
Lien avec le tag sources au pluriel : srcs Site de developpez.com
Lien avec le tag dico : Site de developpez.com
Lien avec l'image ZIP : icozip FAQ Perl de developpez.com
Lien avec l'image PDF : icopdf 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>





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




Voici la racine carré de 25 () égale à 5.


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-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.

Images contenant un alignement et une légende.

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


Images avec affichage de miniatures :


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.

ideaJ'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.
infoJ'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.
warningAttention, 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.
errorAttention, 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.
./images/djibril.jpgImage 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.

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...

info Mettons un tableau.
Cellule1,1Celulle1,2
Cellule2,1Cellule2,2
Voici du code Perl :
#!/usr/bin/perl
use strict;
use warnings;

# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).
Résultat :
  • Bonjour

II-B-4. Les tableaux

Tableau sans entête

 
Texte à gauche Texte à droite
Texte centré Texte avec une image :
Tableau avec légende et cellules groupées.

Entête Entête
Cellule 1 Cellules fusionnées
Cellule 2 avec couleur
Légende du tableau.
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
Nono !
AABB
CCDD
<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. 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

II-B-6. Zones de code

Code avec titre
Titre de mon code
#!/usr/bin/perl
use strict;
use warnings;

# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).
Code sans titre
#!/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
1.
2.
3.
4.
5.
6.
#!/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
3.
4.
5.
6.
7.
8.
#!/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
1.
2.
3.
4.
5.
6.
#!/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écharger
1.
2.
3.
4.
5.
6.
#!/usr/bin/perl 
use strict; 
use warnings; 
 
# Voici une ligne de commentaire. 
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire). 

II-B-7. Les animations ou vidéos

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.

Lien Youtube

Vidéo Cliquez pour lire la vidéo



Lien Dailymotion

Vidéo Cliquez pour lire la vidéo



Lien Vimeo

Cliquez sur ma vidéo vimeo : The Mountain

vidéos SWF

Asa 360° Asa 360°



vidéos FLV

vidéos MP3

Lecture d'une playlist mp3

vidéos MP4

Océan Océan
vidéos M4V


II-B-8. Latex hors paragraphe


III. Exemple de coloration des codes


III-A. CSS

/* définition du style de la police, et largeur du select */
select {
font-family : Courier ;
font-size : 10px ;
width : 200px;
}

/* élément de couleur bleu */
option.bl_eu 
{
color : #0000FF ;
background-color :#00CCFF ;

background : blue url(img.png) ; 
background-color : blue ; 
background-image : url(img.png) ; 

}

III-B. Delphi et Delphi pour .NET

// commentaire
{
Un commentaire sur
plusieurs lignes }
{$ une directive }
Var i:Integer;
<a href="lien.html?parametre1=valeur1&amp;parametre2=valeur2">test</a>

(*
Et un autre
*)
begin
  For i:=Onglet.PageCount-1 DownTo 0 Do
  Begin
    Onglet.ActivePageIndex:=i;
    // En commentaire d ON ' euuuuuu
    ShowMessage('Truc muche !'kqjhsd'jhkjh''''''hghg''''hg'); // c'est un comment !
    { et un autre }
    FileName:= 'Document.doc'; // ou 'Document.rtf'
    URL ='http://toto.com';
  End;
end;

III-C. JAVA

// un comment en deb
public class MaClasse{
   public static Map uneVariableStatique = new HashMap();
   static{
/*      uneVariableStatique.put("une clef","une valeur");
      uneVariableStatique.put("une autre clef","une autre http:// jshdjshd");*/
      //etc un comment et import
      uneVariableStatique.put("une clef","une http://valeur");
      uneVariableStatique.put("une autre clef","une autr\"e valeur\\\"");
   qal.declareImports("import com.unilog.data.Track"); 
   import toto;
   }

}

III-D. Perl

#!/usr/bin/perl
use strict;
use warnings;

# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).

III-E. PHP

function creationPanier(){
	if (!isset($_SESSION['panier'])){
		$_SESSION['panier']=array();
		$_SESSION['panier']['libelleProduit'] = array();
		$_SESSION['panier']['qteProduit'] = array();
		$_SESSION['panier']['prixProduit'] = array();
		$_SESSION['panier']['verrou'] = false;
	}
	return true;
}

III-F. XML

<?xml version="1.0" encoding="ISO-8859-1"?>
<document>
    <xiti>
        <!-- compteur Dotnet-->
        <alias>Dotnet</alias>
        <logg_er>logv99</logg_er>
        <id>12345</id>
    </xiti>
</document>

IV. En savoir plus

Pour en savoir plus, merci de lire la documentation officielle du fr Kit de génération.


Test d'ajout de paragraphe seulement dans la version ONLINE du document



               Version PDF   Version hors-ligne   Version eBooks

(1)Ceci est un exemple de note de bas de page : fr http://www.developpez.com
(2) 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].

Valid XHTML 1.0 TransitionalValid CSS!

Licence Creative Commons
Le contenu de cet article est rédigé par djibril et est mis à disposition selon les termes de la Licence Creative Commons Attribution 3.0 non transposé.
Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright © 2013 Developpez.com.