[PDF] Apprendre la Création de site Web avec le langage XHTML | Cours informatique

(1)

Mathieu Legault

Collège de l’Outaouais Hiver 2011

Web 01

: cours 06

Révision pour l’examen

(vous trouverez toute l’information sur le site 1)

1.

/5 Que veux dire xhtml ? et quel type de langage est-il ?

Le xhtml (« extensible Hyper Text MarkUp Language ») est un langage dit de « marquage

» (de « structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un

document avec des balises de formatage. Les balises permettent d'indiquer la façon dont

doit être présenté le document et les liens qu'il établit avec d'autres documents.

2. /5 À quoi sert le World Wide Web Consortium (W3C) ?

Il sert à établir les standards web. C’est un organisme indépendant.

3. /10 Distinguer xhtml et css? Quel est le rôle de chacun ?

La page xhtml (.html) défini la structure de la page web. La page css (.css) défini la présentation de la page web.

CSS : c'est l'abréviation de Cascading Style Sheets « Feuille de style ». Ce langage nous sert uniquement à présenter la page web. C'est en CSS que l'on va déclarer: « Mon titre est bleu, mes liens sont...».

4. /10 Nommer 5 règles d'écriture du XHTML ?

 Écrire les noms de balise en bas de casse (minuscules).

 Écrire les noms d'attribut en bas de casse (minuscules).

 Refermer toute balise ouvrante avec une balise de fin. (<h2> 2.1 Signification des acronymes <img/>).

 Terminer toute balise vide avec une barre oblique précédée d'une espace (<img />

et non <img>).

 Encadrer les valeurs d'attribut de guillemets droits.

 Expliciter les valeurs d'attribut (<input ... checked="checked" /> et non <input ... checked>).

 Remplacer l'identificateur partiel NAME par ID.

 Assortir toute image d'un attribut ALT, même de valeur nulle.

(2)

5. /10 Que veux dire balise ? comment fonctionnent-elles (paire vs auto fermantes) ?

Le XHTML utilise des balises (aussi appelées « éléments ») pour distinguer les éléments logiques de la page.

Toute balise doit être ouverte (sans quoi elle n'existe pas, évidemment) ; et toutes les balises doivent également être fermées.

1. Par paire afin d'agir sur les éléments qu'elles encadrent. La première est appelée « balise d'ouverture » et la seconde « balise de fermeture » (ou fermante). La balise fermante est précédé du caractère /).

<balise d'ouverture> du texte </balise de fermeture > ou

2. Les balises seules (ou auto fermantes) : elles sont un peu plus rares, mais il y en a quand même. Il existe des cas où la balise n'a pas besoin d'une balise de fermeture.

6. /10 Distinguer : Attributs et valeur ?

Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires. Les attributs se présentent la plupart du temps comme une paire clé=valeur, mais certains attributs ne sont parfois définis que par la clé. Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant avoir une ou plusieurs valeurs.

7. /10 Il existe 2 types de balises : bloc et ligne. Pourriez-vous les distinguer ?

En XHTML, il y a 2 types de balises :

Les balises de type ligne « inline » : ce sont des balises que l'on utilise à l'intérieur d'un paragraphe et elles ne peuvent contenir que des éléments de d'autres balises ligne, mais pas de balises de type BLOC.C'est le cas notamment des balises <strong>, <em>, <q> etc... Par exemple :

Les balises de type bloc « blocs » : ces balises servent à structurer la page en plusieurs "blocs". Chacune de ces balises constitue un bloc séparé et peuvent contenir d'autres éléments bloc ou ligne. Par exemple :

8. /10 Pourquoi Votre document doit déclarer son « Document Type Definition (DTD) » ?

Il précise au navigateur quelle version de XHTML vous utilisez. Lors de validation sur le site du W3C par exemple, cette déclaration est très importante afin de valider

correctement vos pages xhtml.

9. /10 Que retrouvons-nous dans l’en-tête d’un document (<head>) ? Décrivez les particularités de la balise <title>.

L’en-tête du document se situe après la balise <html> Elle est délimitée par les balises <head> et </head>.

(3)

Elle contient certaines informations qu'un fureteur n'affichera pas, mais qui pourront être utilisées à plusieurs fins.

Par exemple, lier le document à une feuille css externe.

De plus, les « meta» sont utilisés par les moteurs de recherche : récolter de l'information, traiter et comparer ces informations, poursuivre leur parcours. La balise <Title>

Cet élément est obligatoire en xhtml. Ne pas dépasser 69 caractères.

Il est impératif de prévoir un titre qui soit parlant car : il identifie ainsi clairement la page;

il est utilisé par les moteurs de recherche pour parcourir les pages et présenter les listes de résultats;

il est utilisé pour le classement des signets/favoris.

10. /20 À quoi servent les balises suivantes ?

Balises Type Description de la balise

<p> bloc Cette balise sert à décrire un paragraphe.

<h1>à<h6> bloc pour déterminer des titres. _{Le niveau 1 étant le plus grand et le niveau 6 le plus petit;}

<pre> bloc Cette balise permet de laisser le texte formatter comme il l'a été dans _{votre éditeur}

<hr /> bloc ligne de séparation

<blockquote> bloc pour bloc de citations

<br /> ligne Cette balise sert à aller à la ligne sans provoquer un nouveau _paragraphe.

<strong> ligne mise en forme générale du texte - en gras

<em> ligne mise en forme générale du texte - en italique (pas toujours)

<!--> pour commenter votre code

<sup> ligne Pour mettre en exposant certains mots ou caractères

Question en prévision de l’examen

11. /6 Les spécifications du xhtml contiennent des balises pour la création de listes d'items. Nommez-les :

listes ordonnées <ol> (ordered list) listes non ordonnées <ul> (unordered list) Items de listes <li> (list item)

(4)

<dl> (definition list) <dt> (Defined Term) <dd> (Definition Data)

12. /4 Nous avons vu que la présentation sous forme de liste permet une bonne structuration de l'information. Elles ont une très grande utilité en CSS. Laquelle ?

De plus, les listes sont très utilisées pour faire des menus en utilisant des css. Il est donc primordial de bien comprendre les listes, car très bientôt vous allez les utiliser pour organiser votre contenu et surtout pour créer des menus intéressants dont le poids est minuscule (ce qui est important lors de l'intégration d'un site Web).

13. /10 Qu’est-ce que « les caractères spéciaux » et pourquoi les utiliser ?

Commande xhtml qui permet l'utilisation de caractères réservés ou de caractères typographiques qui n'appartiennent pas au jeu de caractères ASCII standard, codé sur 7 bits, en les remplaçant par un code alphabétique défini.

De nombreuses langues contiennent des signes qui n'existent pas dans la plupart des autres. Par exemple le français a une utilisation abondante des caractères accentués "é", "è", "à", "î" ou des cédilles "ç", signes qu'on ne retrouve que très peu (voire pas du tout) en anglais.

Ces caractères, dans le code source xhtml, devraient (doivent) être remplacé par un code (les entités xhtml) afin que les navigateurs paramétrés pour d'autres langues que le français les reconnaissent et les affichent correctement.

14. /5 À quoi sert La balise <a>

La balise <a> est une balise standard permettant la création d'un lien.

15. /15 Quels sont Les attributs (de base) de la balise <a> ?

* href : Contient l'URL du document cible. * title : Pour ajouter une info-bulle.

* name="texte", où texte représente le nom de l'ancre désigné par le lien. * id="texte", où texte représente le nom de l'ancre désigné par le lien.

»»»»»»»»»ATTENTION : la recommandation xhtml pour les ancres est d'utiliser l'attribut id, mais si vous voulez que cela fonctionne dans tous les fureteurs (surtout les anciennes versions), vous devez utiliser également l'attribut name.

(5)

* target = texte, où texte est une série de caractères représentant le non du cadre visé pour l'affichage.

»»»»»»»»» ATTENTION : CETTE BALISE EST DÉPRÉCIÉE.

16. /8 Nommez les 4 types de liens

• Lien interne • Lien Local • Lien externe • Lien d’application

17. /12 À quoi servent les balises suivantes ?

Balises Type Description de la balise

<ol> b liste ordonnée <ol> (ordered list)

<ul> b listes non ordonnées <ul> (unordered list)

<li> Item _list Cette balise permet de d'insérer un élément de liste

<dl> b Cette balise permet de d'insérer une liste de définitions

<dt> b Les balises <dt> représente ici l'identificateur de l'élément de la liste _{(Defined Term), qui sera suivit par la définition}

<dd> b

bloc La balise <dd> (Definition Data) débute le paragraphe de la définition, et fera l'identation de toutes les lignes de celui-ci jusqu'à la rencontre d'une nouvelle balise <dt>, ou de la fin de la liste avec la balise </dl>.

18. /10 Nommer 5 règles d'écriture du XHTML ?

• Écrire les noms de balise en bas de casse (minuscules). • Écrire les noms d'attribut en bas de casse (minuscules). • Refermer toute balise ouvrante avec une balise de fin.

(<h2> 2.1 Signification des acronymes <img/>).

• Terminer toute balise vide avec une barre oblique précédée d'un espace (<img /> et non <img>).

• Encadrer les valeurs d'attribut de guillemets droits.

19. /10 Il existe 2 types de balises : bloc et ligne. Pourriez-vous les distinguer ?

En XHTML, il y a 2 types de balises :

Les balises de type ligne « inline » : ce sont des balises que l'on utilise à l'intérieur d'un paragraphe et elles ne peuvent contenir que des éléments de d'autres balises ligne, mais

(6)

pas de balises de type BLOC.C'est le cas notamment des balises <strong>, <em>, <q> etc... Par exemple :

Les balises de type bloc « blocs » : ces balises servent à structurer la page en plusieurs "blocs". Chacune de ces balises constitue un bloc séparé et peuvent contenir d'autres éléments bloc ou ligne. Par exemple :

20. /20 À quoi servent les balises suivantes ?

Balises Type Description de la balise

<p> bloc Cette balise sert à décrire un paragraphe.

<h1><h2><h3 ><h4><h5><h

6> bloc

pour déterminer des titres.

Le niveau 1 étant le plus grand et le niveau 6 le plus petit;

<pre> bloc Cette balise permet de laisser le texte formatter comme il l'a été dans _{votre éditeur}

<hr /> bloc ligne de séparation

<blockquote> bloc pour bloc de citations

<br /> ligne Cette balise sert à aller à la ligne sans provoquer un nouveau _paragraphe.

<strong> ligne mise en forme générale du texte - en gras

<em> ligne mise en forme générale du texte - en italique (pas toujours)

<!--> pour commenter votre code

(7)

Question en prévision de l’examen 21. Comment utiliser des tableaux ?

Les tableaux sont destinés aux données tabulaires ! (C'est-à-dire aux données spécifiquement classables dans un tableau.)

22. Pourquoi utiliser des css ? (source :

http://www.siteduzero.com/tuto-3-2660-1-tableaux-vs-css-une-question-de-mise-en-page.html)

- Un code allégé. En effet, grâce au CSS, vos pages seront grandement

allégées : entre 30 et 60% de poids en moins. Qui dit poids en moins, dit chargement plus rapide pour les visiteurs.

- Une facilité de modification et une modularité non

négligeable. Le style de votre site étant contenu dans une page unique, une

fois cette dernière modifiée, le style de toutes les pages du site sera modifié sans autres changements.

- Un respect des normes du W3C. Même si le validateur ne condamne

pas l'utilisation de tableau (en effet, ce dernier ne vérifie pas la sémantique : l'utilisation des balises spécifiques pour un usage déterminé, à savoir l'emploi de la balise <p> pour les paragraphes, de la balise <hx> pour les titres, les tableaux ne sont pas valides dans le cas de leurs utilisations pour une mise en page.

- Une meilleure accessibilité. Les tableaux imbriqués ne permettent pas

à des navigateurs spécialisés (tablette brail, navigateur en mode texte ou console, navigateur oral,...) de déterminer la place de chaque élément ou son importance (titre, donnée, paragraphe, etc...)

- Un codage simplifié. En effet, une fois la CSS élaborée et mise en place,

plus besoin d'y toucher.

- Une meilleure impression. Un site codé en tableaux ne peut être

facilement imprimable et il faut faire un deuxième code qui coûte beaucoup en travail, ressources et énergie, alors qu'une seconde CSS pour l'impression est facile et rapide à faire.

23. À quoi sert …

La balise <table>

L'élément essentiel dans la création de tableaux est <table>, c'est lui le conteneur qui

renferme tous les éléments d'un tableau. C'est une balise de type Bloc, il est donc inséré directement dans le corps du document.

(8)

L'attribut summary

L'attribut summary est obligatoire. Il est recommandé de toujours l'employer en y

ajoutant un texte descriptif du tableau pour les personnes malvoyantes.

La balise <caption>

Cette balise est utilisée pour attribuer un titre général pour le tableau. Il sera situé au-dessus du tableau.

La balise <thead>

la balisea<thead>(non obligatoire), sert à structurer l'information de l'en-tête du tableau.

La balise <th> C'est une cellule d'en-tête qui sera utilisée lorsque l'on veut déclarer

un titre d'une colonne ou d'une ligne.

La balise <tbody>

la balisea<tbody>(non obligatoire), sert à structurer l'information du corps du tableau.

La balise <tr>sera utilisée lorsque l'on veut déclarer une ligne d'un tableau. La balise <td>sera utilisée lorsque l'on veut déclarer une cellule.

24. Fusion des cellules colonnes

Fusion des cellules colonnes

La fusion de colonnes : La fusion s'effectue horizontalement. On utilisera l'attribut colspan.

Fusion des lignes

La fusion de lignes : La fusion s'effectuera verticalement. On utilisera l'attribut rowspan.

25. Validation des sites web, à quoi sert-elle ?

À faire une auto correction et surtout de se conformer aux normes actuelles.