Beruflich Dokumente
Kultur Dokumente
D
ans le Chapitre 1, nous avons parlé de • Les fichiers HTML utilisent l’extension .html
l’anatomie d’un site web. Nous avons,
• Les noms de page sont sensibles à la casse : en
en particulier, appris que la majorité des
d’autres termes, showroom.com est différent de
serveurs web sont configurés pour reconnaître
ShowRoom.html.
index.html (ou quelque chose de similaire) en tant
que ‘page d’accueil’ par défaut de chaque dossier du • Utilisez uniquement des lettres et des chiffres.
site. Vous devez toutefois vérifier cette information La simplicité prévaut, évitez donc les caractères
auprès de votre hébergeur avant de commencer. spéciaux tels que les traits d’union (qui peuvent
facilement être confondus avec un tiret bas), les
Après avoir confirmé la configuration du serveur,
espaces ou autre ponctuation.
vous pouvez commencer à créer la structure basique
de votre site, en utilisant Dreamweaver, ou votre outil Commencer avec le code ou le design ?
de développement web favori. Nous traiterons plus en
détail de la structure d’un site dans les Chapitres 7 et Avant de plonger dans le HTML, nous devrions
8. (Pour le moment, envisagez la création de dossiers tout d’abord attirer l’attention sur le syndrome
fictifs juste pour vous aider à obtenir un ressentir de de la ‘poule ou de l’œuf’ de l’apprentissage de la
la manière dont cela fonctionne.) conception de site. À chaque fois que quelqu’un
essaie d’apprendre la conception de site, l’enseignant
Au début de tout nouveau projet de développement, doit décider s’il couvre tout d’abord le codage ou le
il est commun de mettre un dossier en place sur design. Des arguments existent en faveur des deux
votre système pour héberger tous les fichiers liés. À méthodes.
l’intérieur du dossier principal, vous pourriez créer
un dossier appelé ‘images’ (pour tous les fichiers Si vous enseignez tout d’abord le design, vous mettez
images). Si vous vous attendez à avoir de multiples l’emphase sur le design et le format du contenu, sans
fichiers d’aide non HTML, tels que des planches et limiter les étudiants avec les contraintes du code.
Mais, ce faisant, vous pourriez pousser les étudiants à
créer des designs impossible à atteindre, simplement
parce qu’ils ne comprennent pas encore le code.
Si vous enseignez le code en premier, vous insistez,
au contraire, sur le plan et la structure des pages,
permettant aux concepteurs de réaliser des décisions
de design plus éduquées qui adoucissent le processus
de codage. L’inconvénient de cette méthode est que
les étudiants apprennent le code avant de réellement
posséder des designs sur lesquels s’entraîner.
Nous avons choisi la seconde option, consistant à
enseigner les méthodes de codage avant de couvrir
les tenants et les aboutissants de la conception de
site. Nous pensons qu’au long cours, cette méthode
permet de faire de vous de meilleurs concepteurs,
La vue locale de ce site web montre sept fichiers même si cela peut créer une légère confusion au
HTML, un fichier CSS et un dossier d’images à
l’intérieur du dossier principal du site. cours du processus d’apprentissage. Pour aider à
soulager un peu de cette confusion, nous fournissons
des scripts, vous pourriez également envisager de des fichiers d’exercice sur lesquels vous entraîner.
créer un autre dossier appelé ‘aide’ pour héberger ces
fichiers. La Figure 5-1 montre, sous Dreamweaver, la 5.1 Comprendre la syntaxe et la
structure des dossiers d’un site web basique. configuration de base d’une page
Lorsque vous pensez à la manière de nommer vos Lorsque vous voyez des pages HTML sur un
pages web, voici quelques remarques relatives aux
navigateur, ce dernier agit comme un traducteur, après la balise d’ouverture elle-même, mais avant
prenant le code et le traduisant en une série de mots le chevron final. Dans l’exemple précédent, href
et d’images pour vous donner une page web. Si, à est l’attribut utilisé pour spécifier la référence en
l’opposé, vous ouvriez cette même page dans un hypertexte de la page en lien. Notez que les attributs
éditeur de texte ou un outil de développement web, sont uniquement placés dans la partie d’ouverture de
vous verriez uniquement le code. la balise, et pas dans la partie de fermeture.
<br />
Table 5-1: Un élément comprend la balise d’ouverture et la balise de fermeture ainsi que l’ensemble du contenu situé entre.
Comme vous pouvez le voir, toutes les balises sont En mai 2012, de 60% à 80% des spécifications
comprises entre des chevrons gauche et droit et les HTML5 existantes sont supportées par les
balises de fermeture sont précédées d’une barre navigateurs modernes. Dans ce chapitre, nous
oblique. Le texte situé entre les deux balises est le couvrirons donc le codage HTML de base en
contenu devant être affiché sur la page. Dans ce cas, utilisant autant de HTML5 que possible et en
la phrase ‘Rechercher sur Google’ est ce sur quoi les indiquant chaque balise qui n’est soit pas encore
utilisateurs doivent cliquer pour activer le lien. totalement supportée, soit programmée pour être
Certaines balises possèdent des caractéristiques progressivement supprimée.
supplémentaires pour les personnaliser si besoin est.
Les attributs, comme ils sont appelés, sont placés
attributs avec des balises méta pour spécifier avec que la stylisation et le positionnement se réalisent
exactitude quelles informations sont référencées. mieux avec CSS. Une des premières étapes consiste
Dans ce cas, l’attribut charset indique au navigateur, à identifier toutes les divisions naturelles de
avec l’encodage du caractère, que UTF-8 est le jeu de contenu. Donc, si nous revenons à notre analogie
caractères Unicode standard. de rénovation de cuisine, les divisions naturelles de
contenu existent entre placards au sol et placards
Le contenu de l’en-tête peut également contenir des au mur. Si nous devions coder cette division, cela
éléments additionnels tels que ceux listés dans le pourrait ressembler à quelque chose comme ça :
Tableau 5-2.
Corps
La partie du corps est une autre zone clé de tout <div id=”haut”>Placards du
fichier HTML puisqu’elle contient le contenu réel
affiché sur la page, dont les images, le texte, les haut vont là.</div>
liens et ainsi de suite. Les trois prochaines parties
évoquent plus en détail les éléments du corps.
<div id=”bas”>Placards du
5.1 Structurer le contenu
bas vont là.</div>
Lorsque vous êtes prêt à travailler sur le contenu
d’une page, la première étape consiste à définir la
structure. Pour utiliser une analogie, supposez que Puisque nous travaillons avec du contenu de page
vous rénovez votre cuisine. Vous devez tout d’abord web plutôt qu’avec des placards, un exemple plus
planifier, mesurer, acheter ou construire les placards réaliste serait:
appropriés, tout comme vous devez planifier et
construire la structure du contenu de votre page.
Ensuite, vous peignez ou teignez ces placards de <div id=”navigation”>La page
cuisine, tout comme vous stylisez le contenu de la
de navigation va ici.</div>
page. Finalement, vous installez les placards dans
la cuisine, tout comme vous positionnez le contenu
dans la page.
<div id=”TextePrincipal”>La boîte
Divisions naturelles de contenu
du texte principal va ici.</div>
Structurer le contenu se fait avec HTML, alors
• Par défaut, lorsqu’ils affichent une page web, Le deuxième élément le plus commun utilisé à
certains navigateurs insèrent un saut de ligne l’intérieur des zones de contenu est l’élément de titre.
unique (c’est-à-dire comme si vous aviez pressé Il existe six différents éléments de titre pour identifier
la touche Entrée de votre clavier) avant et après six différents niveaux d’importance. C’est identique
chaque élément div. Il est toutefois facile de à créer un plan dans un outil de traitement de texte.
l’ajuster à l’aide d’une feuille de style. La balise h1 (titre en anglais se dit headings) spécifie
le plus important des titres de la page alors que les
• À part ce saut de ligne, l’élément div ne possède titres h6 sont les moins importants.
aucune autre propriété d’affichage. Ceci le rend
bien adapté pour contenir uniquement du <div id=”TextePrincipal”>
contenu ayant été stylisé et positionné avec CSS.
<h1>Titre le plus important</h1>
Enfin, chaque attribut id doit posséder une valeur
unique. Vous ne pouvez donc pas créer deux <p>Paragraphe 1</p>
divisions de contenu de votre page portant le même
nom. (Nous évoquerons ce sujet plus en détail dans <p>Paragraphe 2</p>
le prochain chapitre.)
<h2>Titre secondaire</h2>
Le reste du contenu de la page est ensuite placé à
<p>Paragraphe 3</p>
l’intérieur des éléments div.
</div>
Paragraphes
L’élément le plus commun utilisé à l’intérieur des
zones de contenu est celui contenant les paragraphes Par défaut, lorsque la page est affichée, les
de texte. Grâce au fait que le codage HTML soit navigateurs insèrent automatiquement un saut
plutôt intuitif, nous utilisons la balise p pour de ligne avant et après chaque élément de titre.
contenir les paragraphes : L’espacement est facile à ajuster à l’aide d’une feuille
de style.
<div id=”TextePrincipal”> Listes
<p>Paragraphe 1</p> Qui n’apprécie pas une bonne liste ? La plupart
d’entre nous conservons des listes partout, y compris
<p>Paragraphe 2</p> sur les pages web. Lorsque vous structurez vos pages,
<p>Paragraphe 3</p> utilisez un des trois différents types d’éléments
Glossaire:
Liste de définition, Glossaire:
ou Definition list <dl>
HTML
(dl)
<dt>HTML</dt>
Hypertext markup language
<dd>Hypertext
HREF
markup language</dd>
Hypertext reference
<dt>HREF</dt>
<dd>Hypertext reference</dd>
</dl>
Instructions:
Liste ordonnée, ou Instructions:
Ordered list (ol) <ol>
1. Étape 1…
<li>Étape 1…</li>
2. Étape 2…
<li>Étape 2…</li>
3. Étape 3…
<li>Étape 3…</li>
</ol>
Grocery list:
Liste désordonnée, Grocery list:
ou Unordered list <ul>
• Lait
(ul)
<li>Lait</li>
• Pain
<li>Pain</li>
• Œufs
<li>Œufs</li>
</ul>
<th> Le texte du titre de la colonne va </th> Contient une cellule dans le rang de
ici titre d’un tableau
<td> Les données de la cellule vont ici </td> Contient une cellule dans n’importe
quel rand non désigné en tant que rang
de titre
Table 5-4: Balises de tableau
<form action="form.php" Tout le reste des balises et des </form> Contient les contôles du
name="application"> contenus du formulaire vont ici. formulaire – L’attribut
d’action spécifie où
envoyer l’entrée après
que soit pressé le bouton
soumettre
Commentaires : <textarea Tout texte inclus ici sera affiché </textarea> Définit un champ de texte
name="commentaires" à l’intérieur du champ de texte plus grand dans lequel
rows="10" cols="40"> lorsque la page est chargée les utilisateurs peuvent
entrer des données
d’entrée sont les boîtes à cocher, les boutons Notez, dans le Tableau 5-4, lorsque de multiples
soumettre, les boîtes de texte, les boutons radio, les champs d’entrée sont nécessaires pour obtenir une
champs de mot de passe et les téléchargements de entrée unique – comme pour les boîtes à cocher et
fichiers. les boutons radio – chaque entrée de la série doit
posséder le même nom. Afin de différencier les deux
Tous les éléments du formulaire devraient utiliser entrées (nommées genre, par exemple), nous ajoutons
l’attribut de nom pour identifier clairement chaque un attribut de valeur.
entrée utilisateur. Ainsi, nous pouvons, plus tard,
référencer les données en identifiant tout d’abord Genre :
le nom du formulaire, puis le nom de l’entrée.
<a href=”http://www.w3c.
Livres:
• HTML: A Beginner’s Guide by Wendy Willard
• HTML: The Definitive Guide by Chuck
Musciano, Bill Kennedy, and Estelle Weyl
• HTML: The Complete Reference by Thomas
Powell
PROCHAINE
NEXT L‘UNITÉ 6 Introduction au CSS