• Aucun résultat trouvé

Télécharger cours html 5

N/A
N/A
Protected

Academic year: 2021

Partager "Télécharger cours html 5"

Copied!
12
0
0

Texte intégral

(1)

Sommaire

Un langage de balisage...4 Attribut d'une balise...4

(2)

Emboîtement des balises...5

Type de balise...5

Mon premier document XHTML...6

Un document XHTML doit comporter 2 grandes parties :...6

Code XHTML :...7

Transitional ...7

Frameset ...7

Strict ...7

Les balises head...7

Le titre...7

Les références externes...7

La syntaxe pour inclure une feuille de style à l'entête du document XHTML...7

Afficher une petite icone pour les favoris du navigateur ...7

contenu et un pied de page....8

Mon premier document XHTML...8

Validation W3C...8

XHTML et mise en forme des textes...8

La balise <em>...8

La balise <strong>...9

Les extraits, citations, références...9

La balise <cite> pour les références...9

La balise <q> pour citations courtes...9

La balise <blockquote> pour citations de plusieurs lignes...9

Les acronymes, abréviations et définitions...10

La balise : <acronym>...10 La balise : <abbr>...10 La balise : <dfn>...10 La balise : <sub>...11 La balise : <sup>...11 Un langage de balisage

Afin de partir du bon pied, vous devez comprendre avant tout la notion de balise qui est la base de tout ce qu'on va faire par la suite. Dire que le XHTML est un langage de balisage revient à dire que la structure d'un document XHTML est créée à l'aide de balises.

(3)

Ces balises délimitent une fraction de code dans une page XHTML. Attribut d'une balise

A part le nom de la balise, un attribut pourra être spécifié dans une balise. Une balise peut avoir aucun, un ou plusieurs attributs. Aux attributs, on affecte une valeur qui permet de donner un comportement spécifique à l'élément contenu dans une balise ou à donner des caractéristiques à la balise elle-même. Exemple d'attribut :

Code XHTML :

<img src= "image.jpg" />

src est l'attribut de la balise img et il prend comme valeur "image.jgp". Ouverture et fermeture de balise

La balise principale à connaitre est la balise <html>< /html> qui délimite le contenu de la pageXHTML. Cette balise tout comme certaines balises, est composée d'une balise ouvrante <html> et d'une balise fermante < /html>.C'est entre ces deux balises qu'on mettra le contenu associé.

Toutefois, il existe d'autres balises spécifiques qui ne nécessitent pas une balise fermante. Comme la balise <img / > que l'on vient de voir tout à l'heure par exemple. C'est une balise qui est ouvrante et fermante à la fois. Ce genre de balise définit donc sont contenu en elle-même. Une balise ouverte doit être fermée, soit par la balise fermante associée (comme <p> et </p>), soit en se fermant elle-même (comme <img .... /> )

Emboîtement des balises

Lorsqu'une balise contient d'autres balises, il y a des règles à respecter. Une balise peut contenir aucune, une ou plusieurs autres balises. On appel donc le contenant : l'élément parent et le contenu : l'élément enfant. Un élément peut avoir plusieurs enfants, mais ne peut avoir qu'un parent direct.

De plus, un élément ouvert à l'intérieur d'un autre doit obligatoirement être refermé avant la fermeture de son élément parent. Autrement dit, les balises sont emboitées les unes dans les autres en respectant la syntaxe suivante :

Code XHTML :

<parent> <enfant> </enfant> </parent>

L'erreur à éviter serait donc de faire comme ceci : Code XHTML :

(4)

<parent> <enfant> </parent > </enfant>

Parfois, il existe une hiérarchie qui oblige certaines balises à contenir obligatoirement une balise d'un type donné. La balise <html> doit contenir les balises <head> et <body> et uniquement celles-ci. D'où l'ossature d'une page html :

Code XHTML : <html> <head> Entête Code XHTML : </head> <body> Corps Code XHTML : </body> </html> Type de balise

On va parler essentiellement de 2 types de balise XHTML tout au long des tutoriels :

 Les types bloc

 Les type en-ligne

Les balise de types bloc sont utilisées généralement pour structurer un document .Elle peuvent contenir d'autres éléments en bloc et/ou en-ligne, des données. Grosso modo, elles détiennent le rôle de conteneur.

Si un type bloc contient une phrase par exemple, un élément de type en-ligne dans le bloc peut par exemple être un mot. C'est pour cela qu'on utilise le plus souvent les éléments en-ligne ou inline pour donner une sémantique spécifique à quelques mots d'une phrase.

Un élément en-ligne peut être contenu dans un type bloc, mais l'inverse n'est pas valable. En effet, une balise de type en-ligne ne doit jamais contenir un élément en bloc. Syntaxes de base La grammaire du XHTML répond à certaines règles :

Bonne imbrication des balises

 Les balises doivent être correctement imbriquées les unes dans les autres en respectant leur hiérarchie.

(5)

Code XHTML :

<body><h1></body></h1> Minuscules

 Les noms et les attributs des balises doivent s'écrire tout en minuscules. Code XHTML :

<p>Ceci est correct</p> <P>Ceci ne l'est pas</P> Fermeture des balises

 Les balises ont soit des balises fermantes comme la balise <body></body>, soit elles n'en ont pas. Dans le cas où il n'y a pas de balise fermante, il doit y avoir un "/" slash à la fin. Code XHTML :

<input type="submit" /> Les attributs

 Les attributs doivent avoir une valeur explicite et la valeur doit être indiquée entre guillemets

Code XHTML :

<input type="checkbox" checked="checked" />

Mon premier document XHTML

Un document XHTML doit comporter 2 grandes parties :L'entête

Le corps

Ces deux grandes parties contiennent elles-mêmes, chacune, différentes parties. L'entête DOCTYPE

Le DOCTYPE ou Document Type est le premier élément de l'entête. Il déclare au navigateur la norme utilisée. Il doit être placé en tout début de la page avant la balise : Code XHTML :

(6)

<html>. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Certains éditeurs génèrent automatiquement ce code sinon, il suffit de faire un copier coller puisque ça reste le même pour toutes les pages.

Néanmoins, c'est bon de savoir à titre d'information qu'il y a différents normes XHTML 1.0 :

Transitional : permet d'utiliser des balises "décoratives" comme <font>, qui ne sont pas trop appréciées en XHTML Strict

Frameset : utilisé quand la page contient une ou plusieurs frames

Strict : est la norme recommandée

Les balises head

Les balises head contiennent les différents éléments, notamment le titre du document. Le titre

Le titre s'affiche tout en haut dans le navigateur. Il permet, aux visiteurs de pouvoir de reconnaître facilement chaque fenêtre quand ils naviguent. Le titre doit évoquer le contenu du document en donnant une description court et rapide. Il est contenu dans la balise <title> :

Code XHTML :

<title> Tutoriel XHTML</title>

Les références externes

Les références indiquent les liens entre le document et un fichier ou script extérieur, tel une feuille de styles par exemple. Pour faire référence à un script, il faut utiliser la balise <script>.On peut inclure des scripts javascript contenus dans un fichier à part

(monscript.js) dans le document. Code XHTML :

<script type="text/javascript" src="javascript/monscript.js"></script>

Si vous voulez inclure d'autres éléments, autres que le script, comme les feuilles de style par exemple, la balise <link> permet de faire référence à d'autres types de documents. Les plus utilisés sont les feuilles de style et le 'favicon'.

(7)

La syntaxe pour inclure une feuille de style à l'entête du document XHTML est : Code XHTML :

<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />

Pour afficher une petite icone pour les favoris du navigateur : Code XHTML :

<link rel="icon" type="image/png" href="images/favicon.png" />

Le corps du document XHTML

Le corps du document est en général le contenu principal de la page. Le corps d'un documentXHTML peut être subdivisé en quatre parties différentes. Une entête, un menu, un contenu et un pied de page.

L'entête : L'entête est commune à toutes les pages du site. Elle peut être une bannière, un logo, ou autre chose qui représente généralement le propriétaire du site

Le menu : Si on compare un site Internet à une maison, les pages XHTML sont comme des chambres accessibles via des portes. C'est le menu qui est la porte d'accès aux différentes pages du site

Le contenu : Le contenu constitue le point central du document. Sa conception mérite une attention particulière parce que c'est la base du site lui-même

Le pied de page : Le pied de page joue un rôle similaire à l'entête. Il contient souvent les informations d'ordre général comme le copyright, les liens vers les pages d'informations, etc

Mon premier document XHTML

Donc, voici notre premier document XHTML : Code XHTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="fr">

<head>

<title>Première page XHTML </title> </head>

(8)

<body>

<p>Bonjour tout le monde!Je vous présente ma première page valide</p> </body>

</html>

Validation W3C

Le W3C ou World Wide Web Consortium, est un organisme qui travaille sur la standardisation des applications Web. Ils ont un système de validation de code source qui permet de valider votre page.

En gros, cela consiste à vérifier si votre code est conforme aux règles établies par la normeW3C, le but étant d'avoir un code standard compatible avec les différents navigateurs. Vous pouvez vous rendre à cette adresse : http://validator.w3.org.

XHTML et mise en forme des textes

Avec HTML, on utilisait l'attribut de la balise <font> pour marquer un texte important. Mais cela était limité au niveau de la forme.

Maintenant, avec XHTML, nous insistons surtout sur la valeur du contenu. Ainsi, on a d'autres balises pour mettre des textes en exergue. Pour cela Il y a 2 balises différentes que l'on utilise selon le degré d'importance du texte.

La balise <em>

La balise em (emphase) permet de mettre en emphase du texte. Il s'agit de marquer qu'un passage dans le texte est important.

Exemple d'utilisation :

Il serait avantageux de savoir coder en XHTML avant de faire du CSS. Code XHTML :

Il serait <em> avantageux </em> de savoir coder en XHTML avant de faire du CSS. La balise <strong>

Cette balise est pareille que la balise em sauf qu'elle met un accent assez fort. Elle permet d'interpeler vivement le lecteur.

Exemple d'utilisation :

(9)

Code XHTML :

Il est <strong> indispensable </strong> de savoir coder en XHTML avant de faire du CSS. Les extraits, citations, références

Dans vos documents XHTML, il vous arrive parfois d'insérer des oeuvres de quelqu'un : un extrait d'un livre, d'un article etc. Il est nécessaire dans le contexte légal d'énoncer les sources des documents, ou de mentionner l'auteur. En XHTML, des balises spécifiques sont destinées à traiter ce genre de contenu.

La balise <cite> pour les références

Lorsque l'on cite une oeuvre, un livre, une référence, etc , on utilise la balise <cite>.

Attention, il ne s'agit pas d'une citation. Pour cela, on utilise les balises <q> et <blockquote>. Exemple d'utilisation :

Extrait du livre : Les Fleurs du Mal de Charles Baudelaire Code XHTML :

Extrait du livre : <cite> Les Fleurs du Mal </cite> de <cite> Charles Baudelaire </cite> La balise <q> pour citations courtes

On utilise cette balise pour mettre une citation courte. Le texte de citation est donc mis entre guillemets automatiquement quand on l'insère entre ces balises. Dans le cas des citations de plusieurs lignes, ou de plusieurs paragraphes, il est préférable d'utiliser la balise blockquote. A titre d'information, c'est une balise de type inline et les attributs pouvant être employés sont : lang, dir, title, cite.

Exemple d'utilisation : Comme le disait Rabelais : Science sans conscience n'est que ruine de l'âme

Code XHTML :

Comme le disait <cite>Rabelais</cite> : <q> Science sans conscience n'est que ruine de l'âme </q>

La balise <blockquote> pour citations de plusieurs lignes

La balise <blockquote> a le même sens que la balise <q> sauf que celle-ci est utilisée pour les extraits de plusieurs lignes.

Code XHTML :

<h5><cite>Le Renard et le Raisin</cite> de <cite>La Fontaine </cite></h5> <blockquote cite="http://www.domaine.com ">

(10)

<p> Certain renard gascon, <br /> d'autres disent normand, <br /> (1)Mourant presque de faim, <br /> vit au haut d'une treille (2)

<br /> Des raisins mûrs apparemment (3), <br /> Et couverts d'une peau vermeille.

<br /> Le galand (4) en eut fait volontiers un repas; <br /> Mais comme il n'y pouvait point atteindre:

<br />"Ils sont trop verts, dit-il, et bons pour des goujats.(5)" <br /> Fit-il pas mieux que de se plaindre ?

<br /> </p>

</blockquote>

Si vous souhaitiez faire des sites de tutoriels ou quelque chose de ce genre, le chapitre suivant pourra vous être très utile. Alors, bonne lecture.

Les acronymes, abréviations et définitions

Les sites de tutoriels, comme celui-ci par exemple, emploient souvent des abréviations, des acronymes. Des balises XHTML spécifiques permettent d'indiquer aux utilisateurs leur présence et leur signification.

La balise : <acronym>

La balise acronym sert à mettre un acronyme. Son utilisation n'a vraiment de sens que si l'on indique sa signification à l'aide de son attribut title.

Exemple d'utilisation :

Le XHTML est la fusion du HTML et du XML. Code XHTML :

Le <acronym title=" eXtensible HyperText Markup Language " lang="en"> XHTML </acronym> est la fusion du <acronym title=" HyperText Markup Language " lang="en"> HTML </acronym> et du <acronym title=" eXtensible Markup Language " lang="en"> XML </acronym>

Remarquez que les mots entre acronym sont légèrement soulignés. Dès que vous passez votre souris sur les acronymes, leur signification apparaît automatiquement.

(11)

La balise : <abbr>

Cette balise est utilisée pour indiquer que le texte en question est une abréviation. De même que pour les acronymes, on indique la signification de l'abréviation en question dans l'attribut title. Lorsque vous pointez la souris sur les mots, leur signification apparaît automatiquement. Exemple d'utilisation :

Les clts et les frns se sont mis d'accord. Code XHTML :

Les <abbr title="clients">clts</abbr> et les <abbr title="fourniseurs">frns</abbr> se sont mis d'accord.

La balise : <dfn>

La balise <dfn> est utilisée pour dire que le texte est consacré à la définition d'un mot. Le but est de pouvoir signaler que le texte en question est une définition. Plus exactement la balise dfn montre le mot à définir. Attention, il existe les listes de définitions <dl> qui peuvent être utilisées lorsqu'il s'agit de définitions détachées du texte et non de sa continuité.

Code XHTML :

Le maki est un mammifère du sous-ordre des lémuriens vivant à Madagascar.

Source : Le <dfn>maki</dfn> est un mammifère du sous-ordre des lémuriens vivant à Madagascar. Les exposants et indices.

Dans les sites des Matheux, on utilise souvent des expressions mathématiques. Le MathML est idéal pour ce genre de contenu. Pour autant, rien ne nous empêche de voir comment faire des indices et des exposants en XHTML. Cela pourra aussi servir à certains d'entre nous. La balise : <sub>

La balise sub est utilisée pour mettre un texte en indice Exemple d'utilisation :

Une suite géométrique de raison q est une suite de cette forme : Un = q * U0 Code XHTML :

Une suite géométrique de raison q est une suite de cette forme : U<sub>n</sub> = q * U<sub>0</sub>

La balise : <sup>

Cette balise permet de mettre un texte en exposant. Exemple d'utilisation :

(12)

La dérivée de x3 vaut 3x2. Code XHTML :

Références

Documents relatifs

Notez que dans notre exemple nous respectons bien cette règle « d'imbrication » des balises avec la balise &lt;p&gt; et la balise &lt;strong&gt;.. Il n’y a pas besoin de respecter

Voici ces caractères en code ISO 5589-1 (=ISO-Latin 1), ainsi que leur

 &lt;title&gt; et &lt;/title&gt; : informent votre navigateur qu'il s'agit du titre de votre page; ce titre sera placé dans la barre tout au-dessus de votre navigateur; ces

Vous venez de créer votre première page HTML ...Facile non ? :-) La plupart du temps une balise supplémentaire vient de greffer entre les balises &lt;head&gt;&lt;/head&gt;, c'est

Dans l’activité « 2-3 Le HTML – Activité 1 », on a vu que les pages Web sont écrites dans un langage à balises appelé HTML, et que la mise en forme se fait grâce à une

Il est affiché dans la barre de titre du

_parent : remplace le document de définition du frameset _top : remplace toutes les frames de la fenêtre ouverte. •

[r]