Aujourd’hui je vous présente une petite fonction qui sert à tronquer un texte. Ça peut servir pour afficher un aperçu par exemple dans vos flux RSS ou encore pour ceux qui utilisent un blog où les articles sont tronqués à l’accueil. Bref pour ce que vous voulez… C’est une fonction que j’ai trouvé sur le net et que j’ai modifié pour ne pas découper les mots.

Paramètres

$text

Le texte à tronquer, ça c’était facile à deviner…

$count

Le nombre de caractères que l’on veut afficher.

$suffix

Une chaîne à afficher après le texte tronquer comme trois points de suspensions ou encore un lien vers la suite du contenu.

function xwords($text, $count, $suffix = "") {
  if (strlen($text) >= $count) {
    $text = substr($text, 0, $count);
    $space = strrpos($text, " ");
    if ($space) {
      $text = substr($text, 0, $space);
    }
  }
  return $text.$suffix;
}

Voilà c’est tout pour ce tuto, et n’oubliez surtout pas : BI-DOU-ILLEZ !

On a vu notre première page HTML, nous allons maintenant commencer à remplir cette page car vide elle ne nous sert pas à grand chose

Structurer son texte

Même si dans l’absolu on peut s’en passer il est tout de même important de placer son texte dans des éléments HTML. Ce afin de structurer son texte car c’est le but même du HTML et cela permettra également de pouvoir lui appliquer une feuille de style (CSS) plus facilement.

Les paragraphes

C’est la balise de base pour intégrer votre texte, il suffit juste de mettre tout ça entre les balises ‹p›…‹/p›.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vehicula, diam semper venenatis tincidunt, sapien risus vulputate velit, id porta nulla nunc eu dui. Nullam fermentum urna vel velit blandit ac varius neque scelerisque. Aenean non suscipit nulla. In pellentesque pretium eros, vitae vehicula quam luctus eu.</p>

Les titres

Il y a 6 niveaux de titre allant de ‹h1›…‹/h1› à ‹h6›…‹/h6›

<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>

Les liens

On peut avoir besoin de rediriger un internaute vers une autre page du site, un autre site internet, une ancre dans la page ou encore faire un lien vers une image ou un autre fichier. Pour cela rien de bien compliqué, il suffit de renseigner dans l’attribut href à l’aide de la cible du lien.

<a href="http://www.google.fr">Google</a>
<a href="http://www.web-petit.com/tutoriels">Tutoriels</a> ou <a href="/tutoriels">Tutoriels</a>
<a href="/wp-content/themes/wp-v2/images/ressource-32.png">Image ressources</a>

Les images

Pour mettre un peu de gaieté dans votre page vous pouvez décider d’y intégrer des images. L’attribut src permet de renseigner l’emplacement de l’image. L’attribut alt permet d’afficher un texte de remplacement au cas où l’image ne peut pas être chargé, par exemple si l’attribut src est mal renseigné. L’attribut alt est très important en terme d’accessibilité. Veillez à toujours le renseigner avec une description de l’image. C’est d’abord indispensable dans la validation W3C de votre page. Mais cela permet également aux personnes déficientes visuelles de savoir ce que représente l’image.

<img src="/wp-content/themes/wp-v2/images/ressource-32.png" alt="Ressources" />
<img src="" alt="Tutoriels" />

L’ élément HTML textarea permet de créer une zone de saisie de texte dans un formulaire. Il est utilisé avec l’élément form pour créer le formulaire.

<form>
<textarea>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</textarea>
</form>

Attributs

Attribut : disabled

Permet de bloquer la zone de saisie.

<form>
<textarea disabled="disabled">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</textarea>
</form>

Attribut : readonly

Change la zone de saisie, en zone d’affichage seulement.

<form>
<textarea readonly="readonly">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</textarea>
</form>

Attribut : name

Permet de récuperer les données de la zone de saisie.

<form>
<textarea name="texte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</textarea>
</form>

Attribut : cols

Permet de changer la largeur de la zone de saisie.

<form>
<textarea cols="50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.</textarea>
</form>

Attribut : rows

Permet de changer la hauteur de la zone de saisie.

<form>
<textarea rows="15">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.</textarea>
</form>

Attribut : class

Permet de spécifier la classe css à utiliser sur la zone de saisie .

<form>
<textarea class="texte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</textarea>
</form>

.texte{
background-color:chocolate;
}

Attribut : id

Permet de spécifier l’identifiant css à utiliser sur la zone de saisie.

<form>
<textarea id="texte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</textarea>
</form>

#corps{
background-color:yellow;
}

Attribut : title

Permet de mettre une infobulle sur le corps de la page HTML.

<form>
<textarea title="zone de saisie">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</textarea>
</form>

Attribut : dir

Permet de spécifier le sens d’écriture du texte. Elle prend 2 valeurs :
- ltr : Left To Right : de gauche à droite(valeur par défaut).
- rtl : Right To Left : de droite à gauche.

<form>
<textarea dir="rtl">أعلنت واندونيسيا،, الى حاملات الأمريكي، قد,</textarea>
</form>

Attribut : style

Permet d’appliquer un style à la zone de saisie directement dans le html, sans avoir besoin d’une feuille de style.

<form>
<textarea style="background-color:grey">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</textarea>
</form>

Attribut : lang

Permet de spécifier la langue à l’intérieur de la zone de saisie.

<form>
<textarea lang="en">
A person with Ubuntu is open and available to others, affirming of others, does not feel threatened that others are able and good, for he or she has a proper self-assurance that comes from knowing that he or she belongs in a greater whole and is diminished when others are humiliated or diminished, when others are tortured or oppressed.
</textarea>
</form>

La propriété CSS text-transform permet de mettre un texte en majuscule, ou en minuscule.

#mon_identifiant{
text-transform:uppercase;
}

Elle permet la capitalisation d’un bloc de texte.
Les valeurs possibles sont:

• capitalize: début des mots en majuscules.
• uppercase: tout mettre en majuscules.
• lowercase: tout mettre en minuscules.
• none: normal (par défaut).
• inhérit: hérite de son parent

Exemple :

CSS

p{
text-transform:uppercase;
}

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

La pseudo-classe CSS first-letter permet de modifier le style de la première lettre d’un texte des éléments sur lesquels elle est appliquée.

#mon_identifiant:first-letter {
color:chocolate;
font-weight:bolder;
font-size:10px;
}

First-letter est un pseudo-élément (qui fait référence à des parties de texte qui ne sont pas forcément délimités par des balises HTML).
Elle permet de modifier le style de la première lettre d’un texte,

Exemple :

CSS

#lettre:first-letter{
color:chocolate;
font-weight:bolder;
font-size:20px;
}

HTML

<div id="lettre">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</div>

La pseudo-classe CSS first-letter permet de modifier le style de la première ligne d’un texte des éléments sur lesquels elle est appliquée.

#mon_identifiant:first-line {
color:chocolate;
font-weight:bolder;
font-size:20px;
font-style:italic,
}

First-line est un pseudo-élément (qui fait référence à des parties de texte qui ne sont pas forcément délimités par des balises HTML).
Elle permet de modifier le style de la première ligne d’un texte,

Exemple :

CSS

#ligne:first-line{
color:chocolate;
font-weight:bolder;
font-size:20px;
font-style:italic;
}

HTML

<div id="ligne">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</div>

La propriété CSS text-shadow permet de créer une ombre sur les textes des éléments sur lesquels elle est appliquée.

#mon_identifiant {
text-shadow: 2px 2px 2px chocolate;
}

Elle permet de créer une ombre sur les textes.
Elle prend comme valeur :

Des nombres en pixel(px), point(pt), pourcentage(%), ou em,

• Le premier représente la projection de l’ombre à droite,
• Le deuxième représente la projection de l’ombre en bas,
• Le troisième représente le contour du texte

Suivi de la couleur de l’ombre renseigné en anglais( red, green,…), en héxadécimal(#fff,…), ou en rvb(rgb).

Exemple :

CSS

p{
text-shadow: 2px 2px 2px chocolate;
}

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

La propriété CSS text-indent permet de mettre un décalage à la première ligne d’un texte des éléments sur lesquels elle est appliquée.

#mon_identifiant {
text-indent:20px;
}

Elle permet de spécifier un décalage à la première ligne d’un texte.
Les valeurs possibles sont: numérique positive ou négative en pixel(px), en pourcentage(%),en point(pt) ou em.
Ou inherit hérite de son parent.La valeur mise par défaut est 0.

Exemple :

CSS

p{
text-indent:20px;
}

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

La propriété CSS text-decoration permet de modifier la décoration (soulignement,…) des éléments sur lesquels elle est appliquée.

p {
text-decoration:underline;
}

Elle permet de modifier la décoration d’un texte, dans cette exemple elle s’applique à un paragraphe.
Les valeurs possibles sont :

• underline: pour souligner
• overline: pour surligner
• line-through: pour barrer
• blink: pour faire clignoter (sauf Internet Explorer et safari).
• none: aucune décoration

Exemple :

CSS

p{
text-decoration:underline,
}

HTML

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.

La propriété CSS font-style permet de modifier le style du texte contenu de l’élément sur lequel il est appliqué.

p {
font-style: italic;
}

Elle prendre comme valeur : italic, oblique, normal ou inherit (hérite de son parent).

Exemple :

<p style="font-style: italic;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.