Contenu | Recherche | Plan du site | Accessibilité | Contact

Org #!/open/source

• Flux d'actualités
• À propos de nous
• Projets
• # SliTaz GNU/Linux
• Services
• # Formations
• # Install party
• # Atelier récup
• Debian
• # Vente de CD/DVD
• Documentation
• # Commandes shell
• # Debian guides
• # Coding source
• # Handbook
• Développeurs

Documentation

Coding - xHTML

• Utiliser des paragraphes.
• Créer des liens.
• Placer des listes.
• Créer des formulaires web.
• Mini manuel du webmaster. - Créer un site web de A à Z, fichier robots.txt et favicon.

Cette petite page donne juste quelques bouts de code xHTML à copier/coller, et quelques déscriptions. Le code est aussi utilisable avec du HTML 4.01, le code donné en exemple respect les normes et standards publié par le W3C (www.w3.org). Les prérequis pour commencer à devenir webmaster peuvent se résumer en: Savoir utiliser un navigateur web et un simple éditeur de texte.

Utiliser des paragraphes

Mettre son texte dans un paragraphe en utilisant la balise <p> permet une bonne structure du contenu de la page, et une facilité d'accès aux navigateurs web en mode texte tels que Lynx ou Retawq, l'utilisateur peut simplement et rapidement passer de paragraphe en paragraphe. Exemple:

<p>
Ce paragraphe décrit...
</p>

Créer un lien

Les hyperliens sont la base du web, ils permetent de lier les pages entre elles via la balise <a> et la valeur href="". Dans une page xHTML/HTML un lien peut pointer vers un fichier local ou un URL distant tel que http://www.liborux.org/. Pour un site web il est possible d'utiliser des liens absolus en spécifiant le chemin complet vers la page à lier tel que /doc/index.php et/ou d'utiliser le ../../chemin/ relatif vers une pages ou un répertoire. Il est aussi possible d'utiliser une #ancre pour créer un lien au sein même d'une page. Exemple d'un lien relatif vers un répertoire cmdline situé dans le répertoire parent:

Les commandes GNU/Linux.

<a href="../cmdline/">Les commandes GNU/Linux.</a>

Placer des listes

Les listes sont très souvents utilisée dans les pages web, elle permettent par exemple de bien structurer le document et d'accueillir des liens en haut de page pointant sur des ancres placés dans le contenu. Les listes sont aussi utilisées pour créer des menus, stylisé par du CSS. Il existe plusieurs type de listes, tels que les listes à puces propulsées par la balise <ul>. Exemple:

<ul>
    <li>Liste à puce.</li>
    <li>Liste à puce.</li>
    <li>Liste à puce.</li>
</ul>

Les listes ordrées avec des nombres sont aussi très pratiques, elle se mettent dans l'ordre automatiquement, idéales pour les manuels linéaires, et facilement affichable via les balises <ol> et <li>. Exemple:

<ol>
    <li>Liste à puce.</li>
    <li>Liste à puce.</li>
    <li>Liste à puce.</li>
</ol>

Exemple d'un petit mélange, avec liste à puce comprenant des sous-listes numérotées:

<ul>
    <li>Liste à puce.</li>
    <li>Liste à puce.
    <ol>
        <li>Introduction.</li>
        <li>Convention.</li>
        <li>Auteurs.</li>
    </ol></li>
    <li>Liste à puce.</li>
</ul>

Créer des formulaires web

Le langage HTML/xHTML fournit divers possibilités pour créer des formulaires web de toutes sortes. Le type text affiche un champs de saisie de texte, select permet d'afficher des listes à choix, le type checkbox fournit des cases à cocher et radio des cases à option, password permet de saisir un mot de passe et le type file permet de parcourir et séléctionner un fichier. Il est possible de créer des formulaire très complet en utilisant les différents types de possibilités offertes et en utilisant un script PHP ou Perl pour traiter les données d'un formulaire HTML/xHTML. Pour intégrer les formulaire au graphisme du site web, il faut simplement utiliser un peu de style CSS.

text - Champs de texte

Pour saisir toute sorte de texte, nom, prénom, adresse, messages. Dans l'exemple les informations récoltées iront dans le fichier text.php contenant un script PHP permettant de récupérer les donnée pour les traiter:

<form action="text.php" method="post">
    <p>
    Nom:<br />
    <input name="nom" type="text" size="40" maxlength="40" />
    <br />
    Message:<br />
    <input name="nom" type="text" size="40" maxlength="40" />
    </p>
</form>

select - Listes de choix en séléction

<form action="choix.php" method="post">
    <div>
    <select name="version">
        <option>Stable</option>
        <option>Testing</option>
        <option>Unstable</option>
    </select>
    </div>
</form>

checkbox - Cases proposant plusieurs possibilités

<form action="checkbox.php" method="post" enctype="text/plain">
    <div>
    <input type="checkbox" name="composant" value="i386" />i386<br />
    <input type="checkbox" name="composant" value="arm" />arm<br />
    <input type="checkbox" name="composant" value="powerpc" />powerpc
    </div>
</form>

radio - Cases proposant une seule option

<form action="radio.php" method="post" enctype="text/plain">
    <div>
    <input type="radio" name="dons" value="10to20" />de 10 à 20<br />
    <input type="radio" name="dons" value="20to30" />de 20 à 30<br />
    <input type="radio" name="dons" value="40to50" />de 30 à 40<br />
    </div>
</form>

password - Mot de passe

Les formulaire de mot de passe on un type spéciale de champ de saisie ou les caractères sont masqués par des étoiles grâce la balise <input> de type password:

<form action="password.php" method="post">
    <p>
    Mot de passe :<br />
    <input name="motdepasse" type="password" size="15" maxlength="10" />
    </p>
</form>

file - Parcourir et séléctionner un fichier

Afin que l'utilisateur puisse joindre ou uploader un fichier depuis sont disque dur. Cette fonction peut être utilisée pour joindre un fichier à un mail ou pour transférer des fichiers d'une machine à une autre via un formulaire web:

<input type="file" name="fichier" size="40" maxlength="40" />

---