Les titres :


Voici quelques codes de mise en forme de texte et HTML pour votre site.


titre1 titre1



*Le code à copier/coller


titre2 titre2



*Le code à copier/coller


titre3 titre3



*Le code à copier/coller


titre4 titre4



*Le code à copier/coller



Les conteneurs :

Les balises 'block' et "fieldset" servent à créer un cadre autour d'un texte. Sélectionnez votre texte à encadrer et choisissez votre type de cadre.



la balise block



bloc


*Le code à copier/coller


la balise fieldset



Mon titre
fieldest


*Le code à copier/coller



Les styles :

Les styles de texte permettent de bien mettre en évidence une zone texte sous forme de succès, question, remarque, attention, erreur, note et astuce.


Ce code met en forme un succès / une réussite, ou une maj

*Le code à copier/coller


Ce code met en forme une question.

*Le code à copier/coller


Ceci est un message signalant une remarque pertinente.

*Le code à copier/coller


Ceci est un message d' Alerte ! Qui signifie "attention" !!

*Le code à copier/coller


Ceci est un message d'erreur.

*Le code à copier/coller

Cette balise vous permettra de rajouter une note personnelle.

*Le code à copier/coller


Cette balise vous permettra de placer une astuce .. ou une idée ^^

*Le code à copier/coller



Quelques notions basiques d'HTML ...



Ceci est un texte en gras

*Le code à copier/coller

" Ceci est un texte en italique "

*Le code à copier/coller

Ceci est un texte barré

*Le code à copier/coller

Ceci est un texte souligné

*Le code à copier/coller



Mettre une image :


Ceci est une image placé en html et voici comment procéder:
Logo


*Le code à copier/coller

Explication du alt et du style dans l'image:
  1. - Le "alt" vous permet un complément d'information en rapport avec le visuel de l'image. Un mot parfois suffit ;)
  2. - Le "height" = hauteur de l'image en pixel soit : 216px
  3. - Le "width" = largeur de l'image soit 240px




Centrer une image :


Ceci est une image placé en html et voici comment procéder:

Logo



*Le code à copier/coller

Explication du alt et du style dans l'image:
  1. - Le "p" permet le saut de ligne et est stylisé avec du css (n'ayez pas peur, c'est très simple!)
  2. - Le "style" ajoutez juste le : text-align:center. Ou alors en passant par le css avec la class: center
  3. - Le "alt" vous permet un complément d'information en rapport avec le visuel de l'image. Un mot parfois suffit ;)
  4. - Le "height" = hauteur de l'image en pixel soit : 216px
  5. - Le "width" = largeur de l'image soit 240px




Faire une image flottante à droite:


Ceci est un exemple:
Logo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis felis turpis, sed luctus lorem semper vitae. Ut tristique mi libero, vitae imperdiet augue tempus in. Nam ut metus nibh. Integer fermentum fermentum nisi, non rhoncus arcu vehicula at. Etiam blandit faucibus orci, eu congue nulla consequat vitae. Proin porttitor, velit at luctus auctor, elit nisl vulputate ipsum, in pulvinar libero libero porttitor ligula. Aliquam lacus odio, scelerisque vel tincidunt eu, tristique a nisl. In vel odio id nulla eleifend ullamcorper ac a turpis. Nunc velit ante, tristique sed fringilla nec, tempus et elit. Suspendisse sit amet ornare lectus, eu fermentum nisl. Sed dui libero, adipiscing a nisl a, sodales iaculis lacus.



*Le code à copier/coller

Explication du "span" et de la "class" pour cette image:
  1. - Le "span" est la balise à tout faire ! Autant pour une stylisation simple ou une aplication de class.
  2. - La "class" , coresspond à une action qui est déclenché par un css défini. Prenez le nom de la class et vous la trouverez défini dans le fichier "generic.css", qui se trouve dans le dossier "css".
  3. - Le "float_right" lance l'action du flotement de l'image à droite.
  4. - Le "style" ajoutez juste le : text-align:center
  5. - Le "alt" vous permet un complément d'information en rapport avec le visuel de l'image. Un mot parfois suffit ;)
  6. - Le "height" = hauteur de l'image en pixel soit : 150px
  7. - Le "width" = largeur de l'image soit 1000px




Faire une image flottante à gauche:


Ceci est un exemple: Logo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mollis felis turpis, sed luctus lorem semper vitae. Ut tristique mi libero, vitae imperdiet augue tempus in. Nam ut metus nibh. Integer fermentum fermentum nisi, non rhoncus arcu vehicula at. Etiam blandit faucibus orci, eu congue nulla consequat vitae. Proin porttitor, velit at luctus auctor, elit nisl vulputate ipsum, in pulvinar libero libero porttitor ligula. Aliquam lacus odio, scelerisque vel tincidunt eu, tristique a nisl. In vel odio id nulla eleifend ullamcorper ac a turpis. Nunc velit ante, tristique sed fringilla nec, tempus et elit. Suspendisse sit amet ornare lectus, eu fermentum nisl. Sed dui libero, adipiscing a nisl a, sodales iaculis lacus.



*Le code à copier/coller

Explication du "span" et de la "class" pour cette image:
  1. - Le "span" est la balise à tout faire ! Autant pour une stylisation simple ou une aplication de class.
  2. - La "class" , coresspond à une action qui est déclenché par un css défini. Prenez le nom de la class et vous la trouverez défini dans le fichier "generic.css", qui se trouve dans le dossier "css".
  3. - Le "float_left" lance l'action du flotement de l'image à gauche.
  4. - Le "style" ajoutez juste le : text-align:center
  5. - Le "alt" vous permet un complément d'information en rapport avec le visuel de l'image. Un mot parfois suffit ;)
  6. - Le "height" = hauteur de l'image en pixel soit : 150px
  7. - Le "width" = largeur de l'image soit 1000px




Faire un lien


- Ceci est un lien => - Accueil -

*Le code à copier/coller



Explication de la balise url:
  1. - le href: indique l'emplacement, soit l'adresse du lien. là le lien est interne don le "./" indique la racine du ossier de la page. Sinon vous pouvez mettre l'adresse complète.
  2. - le title = cet attribut vous permet d'avoir des informations consultatives concernant le lien sur lequel il est placé. c'est une infobulle ^^



Listes à puces

  • » Accueil
  • » Produits
  • » Téléchargements
  • » Contact


*Le code à copier/coller



Listes à numéros

  1. Accueil
  2. Produits
  3. Téléchargements
  4. Contact


*Le code à copier/coller



Éléments de formulaire



* Editez la page avec Notepad++ pour en voir le code ..

Boutons



Listes et Choix

Case à cocher Option 1 Option 2


Insertion de texte