Encadrer du texte  en HTML pur code



Renvoyé vers le frameset ,  cadres avec word , cadres avec openoffice , cadres avec le PHP etcetera et même un cheval de Troie en prime sur un site en cherchant cette chose toute simple : comment encadrer du texte en .html . En espérant être référencé correctement par les moteurs de recherche voici le code en HTML pur code . Tout naturellement qui dit cadre dit tableau dit classement ......et puis les listes pour finir de ranger et classer

encadrer un texte

pour encadrer un texte
il suffit de faire un tableau
avec une seule cellule

  le code

<table width="100%" border ="1" cellspacing="1" cellpadding="1"><tr><td><div align=center>pour encadrer un texte<br>il suffit de faire un tableau<br>avec une seule cellule</div></td><tr></table>
CSS: Il est aussi possible d'entourer du texte avec des balises SPAN et du style

  Tableau avec 3 cellules

La première balise à insérer pour la création d'un tableau est <table></table>
<tr> </tr> crée une rangée alors que <td></td> crée une nouvelle colonne. A insérer entre les balises BODY , là où vous voulez que ce tableau apparaisse
cellule1
cellule2
cellule3


le code

<table width="100%" border="1" cellspacing="1" cellpadding="1" >
<tr><td><div align="center">cellule1 </div> </td>
<td><div align="center">cellule2</div> </td>
<td><div align="center">cellule3</div> </td></tr>
</table>

Faire une grille
3 rangées et 3 colonnes

<tr></tr>crée une rangée <th></th>une cellule en gras
Cellules du hautcellule1cellule 2
Cellules vides
cellules du bascellule 6

le code

<table border=1 width=100% cellspacing=1 cellpadding=1 <tr><th>Cellules du haut</th><td>cellule1</td><td>cellule 2</td></tr><tr><th>Cellules vides</th><td></td><td></td></tr><tr><th>cellules du bas</th><td></td><td>cellule 6</td></tr></table>

Un formulaire de contact

ce formulaire en HTML appelle une page en PHP nommée ici contact.php, que je n'ai pas installée car cette page est très fréquentée. À la place vous serez dirigé(e) vers un autre formulaire (fonctionnel celui-là)
nom:
email:
objet:
message:

le code

<form method=POST action=contact.php >
<input type=hidden name=subject value=contact>
<table border=1>
<tr><td>nom:</td>
<td><input type=text name=realname ></td></tr>
<tr><td>email:</td>
<td><input type=text name=email title="entrer une adresse valide" style="text-align:center;color:blue" value="@" /></td></tr>
<tr><td>objet:</td>
<td><input type=text name=title ></td></tr>
<tr><td colspan=2>message:<br>
<textarea COLS=30 ROWS=8 name=comments></textarea>
</td><tr>
<td> <input type=submit value=Envoyer >
</td></tr>
</table>
</form>

tableau avec un questionnaire

Pour ne pas voir les traits de séparation : table border=0  avec les boutons radio (ronds) vous n'avez qu'un seul choix avec les checkboxes (carrés) cochez autant de réponses que vous désirez . select vous offre un menu déroulant . Mais pour avoir le maximum d'efficacité et de sécurité il vaut mieux  coupler avec un fichier PHP comme le formulaire de contact plus haut.

(cours de yoga)

Enregistrement d'une inscription
Nom
Prénom
*email
Sexe Homme :
Femme:

Autre (précisez dans les motivations)
Fonction
Motivations
                                                                                                                                      retour haut de page

le code

<form name="yoga" method="post" action="mailto:toto@mail.fr">
<b>Enregistrement d'une inscription</b>
<table border=1>
<TR><TD>Nom</TD>
<TD><input type=text name="nom"></TD></TR>
<TR><TD>Prénom</TD>
<TD><input type=text name="prenom"></TD></TR>
<TR><TD>*email</td><td> <input type=text name="email"></TD></TR>
<TR><TD>Sexe</TD>
<TD>Homme : <input type=radio name="sexe" value="M">
<br>Femme: <input type=radio name="sexe" value="F">                                                                  <br><br>Autre (précisez dans le commentaire)<input type=checkbox name="sexe"value="A"
</TD></TR><TR><TD>Fonction</TD><TD><SELECT name="fonction">
<option value="enseignant">Enseignant</option>
<option value="etudiant">Etudiant</option>
<option value="ingenieur">Ingénieur</option>
<option value="retraite">Retraité</option>
<option value="autre">Autre</option>
</SELECT></TD></TR><TR><TD>motivations</TD>
<TD><textarea rows="3" name="motivations">
santé rencontres spiritualité</textarea></TD></TR>
<TR><TD COLSPAN=2><input type="submit" value="Envoyer"></TD></TR>
</TABLE>
</form>

Les listes et les puces

avec les balises <li>...</li> seulement

Titre de la liste
  • bla bla bla
  • ble ble ble
  • bli bli bli
  •                     

    code

    <Ih>Titre de la liste</Ih><li>bla bla bla</li><li>ble ble ble</li><li>bli bli bli</li>

    avec <ul> devant

    • bla bla bla
    • ble ble ble
    • bli bli bli

    code

    <ul><li>bla bla bla</li><li>ble ble ble</li><li>bli bli bli</li></ul>

    avec <ol> devant

    1. bla bla bla
    2. ble ble ble
    3. bli bli bli
    retour haut de page

    code

    <ol><li>bla bla bla</li><li>ble ble ble</li><li>bli bli bli</li></ol>

    avec <ul type=none> devant

    • bla bla bla
    • ble ble ble
    • blu blu blu

    code

    <ul type=none><li>bla bla bla</li><li>ble ble ble</li><li>blu blu blu</li></ul>

    avec <ul type=square> devant

    • bla bla bla
    • bli bli bli
    • blu blu blu

    code

    <ul type=square><li>bla bla bla</li><li>bli bli bli</li><li>blu blu blu</li></ul>

    avec <ul type=circle> devant

    • bla bla bla
    • bli bli bli
    • blu blu blu

    code

    <ul type=circle><li>bla bla bla</li><li>bli bli bli</li><li>blu blu blu</li></ul>

    Une image remplaçant les puces


    Certains codes issus de CSS vous proposent un list-style-image: url(puce.png); par exemple, à placer dans la partie HEAD de votre page. Mais là, vraiment CSS n'est pas d'une grande utilité, car les images remplaçant les puces sont lues différemment par les divers navigateurs.
    Vous faîtes un <li style="list-style-type:none"> et un <img src="url de l'image"> suivi de &nbsp;&nbsp;votre 1ere ligne</li>
    Pour centrer les lignes dans le paragraphe:
    <ul style="list-style-type:none">
    suivi de<li>autre ligne</li>

    Exemple avec <li style=


  •    ligne 1
  •    ligne 2
  •    ligne 3

  • Exemple avec <ul style=

    •   ligne 1
    •   ligne 2
    •   ligne 3

    Tableaux stylisés avec les balises SPAN


    notion de HTML en français



    statistiques

    who's.amung.us
      Partager

    Annonce Google


    www.wubijacq.com Cliquez ici pour vous abonner à ce flux RSS