Recherche personnalisée

Le langage XHTML

Apprendre comment créer un site Web pour les débutants.
C'est un cours pour réaliser un site Web.
Dans ce cours nous allons apprendre pas à pas ce que c'est que la programmation XHTML et comment créer un site Web.

Au programme de ce cours nous allons voir dans une première partie les chapitres suivants:
Chapitre 1: Introduction et Historique du XHTML
Chapitre 2: Généralité forme d'une page Web
Chapitre 3: Les balises et attributs
Chapitre 4: Organisation du texte
Chapitre 5: Insertion d'image
Chapitre 6: Créer des liens

Chapitre 1: Introduction

Dans ce cours pas de connaissances requises. On apprend pas à pas comment ça fonctionne.

Le langage XHTML est un langage de formatage de texte adapté à la conception de pages web. Ce n'est pas un langage de programmation, mais un langage de mise en forme de données d'une page Web
Il décrit une structure statique, tandis qu'un programme est un processus dynamique.
Vous n'avez aucunement besoin d'avoir des bases de programmation pour écrire du XHTML ! Avant de commencer je tiens à vous préciser que dans ce cours je ne prétends pas vous apprendre tout à devenir pro.
C'est un cours qui vous initieras aux bases du langage XHTML et vous donneras les outilles nécessaires pour apprendre à créer un site Web et c'est à vous d'approfondir vos connaissance par la suite.

Conseille:

Ne brusquer pas les choses en lisant tous ce cours en une fois, vous risquez de ne rien comprendre ou mal comprendre.
Lisez un chapitre puis relisez le 2 ou 3 fois, faites des exercices que je vous conseille même d’inventer si possible avant de passer au chapitre suivant car c’est en manipulant le langage que l’en apprend.

Historique du XHTML

La famille du XHTML est une famille nombreuse, et elle n'a pas fini de s'étendre ! L'aïeul s'appelle SGML ; il eut deux enfants, le HTML puis le XML. Le XML eut à son tour un enfant, qui s'appelle XHTML et ressemble comme deux gouttes d'eau à son oncle HTML. Le SGML est un méta-langage : il permet de définir des langages balisés. Le HTML est l'un de ces langages balisés, fondé en particulier sur la notion de lien hypertexte, qui permet de naviguer confortablement d'une page à une autre. Le HTML a très vite remporté un grand succès. Mais il a aussi rencontré certaines limites. En particulier, il n'est pas extensible. Aussi a-t-il reçu un petit frère, le langage XML, précisément fondé sur la notion d'extensibilité ; comme le SGML, le XML est un méta-langage. Le problème, c'est que le HTML n'était pas compatible avec le XML ; c'est pourquoi l'on a conçu le langage XHTML, qui est dérivé du XML, mais conserve les principes fondamentaux du HTML, dont il hérite également de nombreuses spécificités
Au début du Web Tim Berners-Lee a créé la première version du langage HTML (Hyper Text Markup Langage) et depuis plusieurs versions ont vu le jour voilà un résumé :

HTML 1,0 : Créé en 1991 par Tim Berners-Lee
HTML 2,0 : Créé en 1994 elle posera les bases des version qui l'ont suivi. Les règles et le fonctionnement ont été donnés par le W3C (word with web consortium)
HTML 3,0 : Apparue en 1998 elle a rajouté de nombreuses fonctionnalités au langage comme les tableaux, les scriptes, les Applets, etc...
HTML 4,0 : Apparue en 1998 elle amène parmi d'autres les frames (découpage de la page en plusieurs parties) mais la plus importante c'est les feuille de style le CSS

Et depuis, d’autres versions on vu le jour à tel point que c'est que la confusion s'est installée. En effet de nouvelles balises ont été créé par les navigateurs Internet explorateur et netscape et que ces balises marchent sur l'un et pas sur l'autre. Alors pour mettre fin à cela , le W3C décide d'arrêter le développement du HTML et crée un nouveau langage le XHTML (Extensible Hyper Text Markup Langage ) qui devient le standard qui fonctionne sur tous les navigateurs et personne n'a le droit de créer de nouvelles balises sans l'autorisation du W3C. C'est ce langage que nous allons voir dans ce qui va suivre.
La norme du XHTML est définie par le W3C, qui encourage les concepteurs de pages Web à passer du HTML au XHTML. L'avantage du XHTML sur le HTML est son extensibilité, qui lui vient du langage XML. C'est pourquoi nous vous recommandons très fortement de préférer le XHTML au HTML. Le site des tuteurs observe scrupuleusement les spécifications de ce langage. À terme, le HTML est appelé à disparaître

Retourner au haut de la page.. haut de page…

Chapitre 2: Généralité forme d'une page Web

Passons aux choses sérieuses. La page Web. Le code d'une page Web est constitué comme suit

Partie déclaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0/EN">
Partie page entiére<html></html>
Partie entête: <head></head>
Partie texte <body></body>

Si vous écrivez ce code dans un éditeur de pages Web vous obtiendrez une page html vide.
Oui je sais je ne l'est pas oublié vous êtes débutants. Soyez passion je vais y venir.

Question 1 : mais quelle éditeur de page Web je vais utiliser?
Repense : tout éditeur de texte bloc note, word, word pad etc...

Question 2 : et qu'est ce que c'est que ce code ?
Repense : c’est ce que nous allons apprendre dans ce qui suit.

Si vous êtes tenté de faire un essai alors taper le code suivant dans le bloc note de windows

Code xhtml:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0/EN">
<html>
<head></head>
<body></body>
</html>

Je suppose que c'est fait.
Alors faite Fichier Enregistrer et dans la zone du texte Nom du fichier saisissez "essai.html" n'oubliez pas les guillemets pour le bloc note .
Pour le word de microsft ofice ne mettez pas de guillemets mais choisissez html dans Type de fichier.
Ouvrez le fichier enregistré, vous constater en effet une page Web vide, remarquez la barre du titre rien que le nom de votre explorateur.
Parfait ma première page html.

Avants de continuer je vous conseille de télécharger l'éditeur suivant il est très bon est gratuit.
Le lien de téléchargement ici : Téléchargement de Notepad++ Téléchargez la vertion installer.exe
Parfait ma première page html.

voilà 2 captures d'ecrant pour faire une comparaison entre bloc note et notepad++
Image bloc note ..........................................................................................................Image notepad++
image de bloc note… image de notepad…

Revenons à notre code de tout à l'heur.
La première ligne :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0/EN">
Elle contient une déclaration qui donne les informations suivantes :
1, Type du document PUBLIC
2, La version du langage XHTLM 1.0
3, La langue de la page html FR pour le français EN pour l'anglais etc...
Toute page html doit contenir cette ligne à son début.
Les lignes restantes nous allons les voir dans ce qui va suivre.

Retourner au haut de la page.. haut de page…

Chapitre 3 : Les balises et attributs:

Les blises

Pour créer un site web, on utilise un langage qui doit donner des informations à l'ordinateur. Il ne suffit pas simplement de taper le texte qu'il y aura dans sa page, il faut aussi savoir placer ce texte lui donner un format, insérer des images, faire des liens etc... Organiser tout ça joliment.
C'est les langages XHTML et CSS, qui vont servir précisément pour créer des sites web, et ils ont été créés de manière à être simples à utiliser. Le rôle de ce cours sera de vous apprendre à vous en servir. Ces deux langages se complètent pour donner un site web :
Le langage XHTML, contient des informations logiques : vous direz par exemple <<Ceci est le titre, ceci est le menu, ça c'est le texte principal de la page, là il y a une image etc...>>.
Le langage CSS sert pour présenter ce contenu et lui donner une belle apparence vous direz par exemple <<les titres sont en rouge, le texte de taille 12 pixel etc...>>.
l e langage XHTML est constitué de balises. Une balise a cette forme : < balise>
Exemple : <head> </head>

/!\ Important !!!

Tout ce qui est écrit dans une balise doit être écrit en minuscule, pour quoi ? eh bien parce que si windows ne différencie pas les majuscules et les minuscules d’autres systèmes le font
Il existe 2 types de balises : certaines balises apparaissent toujours par paire, d'autres au contraire sont toutes seules.
Toute balise doit être ouverte (sans quoi elle n'existe pas, évidemment) ; et toutes les balises doivent également être fermées.
L'obligation de fermer chaque balise est l'une des principales différences entre le HTML et le XHTML ; c'est une caractéristique que le XHTML hérite du XML. • Les balises existant par paire : On écrit la première balise <balise>, on tape du texte, puis on "ferme" la balise en la réécrivant avec un slash devant "/" </balise>.
Par exemple : <balise>quelque chose </balise>
Les balises seules : Elle sert en général pour insérer un élément dans une page (image ou autre...)
Ce type de balise se termine toujours par un slash "/", mais cette fois le slash se trouve à la fin de la balise elle même.
Exemple : <chose/ > cet balise indique juste qu’il y a une chose à cet endroit image par exemple Il est donc facile de reconnaître à quel type de balise on a affaire :
• Si vous voyez <paragraphe>, c'est qu'il s'agit d'une balise existant par paire, et donc que vous allez trouver un </paragraphe> un peu plus loin, pour indiquer la fermeture de la balise.
• Si vous voyez <truc />, c'est une balise seule.

Toutes les balises doivent être refermées. Donc n’oubliez surtout pas de le faire Si non la balise n’aura aucun sens voir aucune existence.
Les balises doivent être ouvertes et refermées dans l'ordre. Il ne faut donc pas écrire :
<balie1> Attention ça, c'est <balise2>non.</balie1></balie2>
Mais écrire:
<alise1> Alors que ça, c'est <balise2>oui.</balise2> </balise2>

Les balises du xhtml

1. Balise principale de toute page web.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr.">
On lui donne généralement 2 attributs :
• xmlns : la liste des balises xhtml existantes (appelée espace de noms).
xml:lang : la langue utilisée sur votre page web. Utilisez "fr" pour un document en français.
Normalement la balise principale d’une page Web doit ressembler à ce ci :
1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
2 </html>

Tout le code xhtml de la page Web doit être écrit entre les deux lignes ci-dessus
c'est-à-dire entre <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
et entre </html>

2. Balise d’entête

<head> </head>
Dans cette balise c'est-à-dire entre <head> et </head> on met le titre du site et d’autres informations que nous verrons par la suite dans ce cours
<head>
<title>Titre du site</title>
</head>

3. Balise du corps

<body></body>
Dans cette balise c'est-à-dire entre <body> et </body> on met le corps de la page : le texte, les images, les liens, les tableaux etc…

Les attributs

Ce sont les des précisions qu’on donne sur une balise par exemple si on insère une image il faut donner son nom son emplacement Exemple :<image nom= "Image1" emplacement="bla bla" taille="bla bla" position sur la page="bla bla" /> Nom c’est l’attribut "Image" est la valeur de l’attribut Pour les balises par paire les attributs ne sont mets que dans la balise ouvrante <balise> et pas dans la balise fermante</balise>

Conclusion

Nous avons fait un peu de théorie pour ne pas être déboussolé par la suite.
Les noms de balises que j’ai utilisé <balise>, <truc> ,<image /> n’existe pas nous aurons tout le temps de voir les vrais noms par la suite.
• Les balises existent soit par paires (<balise> </balise> ) ; soit toutes seules,(ex. : <balise /> )
• Les noms des balises et attributs s'écrivent toujours en minuscules
• Les valeurs des attributs peuvent contenir des majuscules
• S'il y a des attributs dans une balise par paire, on ne les met que dans la balise ouvrante

Vous allez me dire mais nous ne savons pas encor faire de page Web
Eh bien ouvrez votre éditeur nous y mettons tout de suite

Tapez le code suivant dans votre éditeur :

Enregistrez le sous un nom, exemple : essai.html
Gardez ce fichier nous en aurons besoin.
Si vous travaillez avec notepad++ avant d’enregistrer allez dans le menu LANGAGE et choisir l’option HTML
Ouvrez le fichier enregistré vous devez avoir quelque chose comme ça :
La barre du titre porte maintenant le titre que vous lui avez donné tout en haut à gauche de la fenêtre : " mon site ! ".
Sur la page apparu le texte que vous avez indiqué dans la balise <body></body>

Explication du code ligne par ligne :

La première ligne est une ligne obligatoire pour toute page html. C’est une déclaration "Doctype". C'est une balise particulière, et c'est la seule qui n'obéit pas aux règles que je vous ai données. Cette balise sert à dire aux navigateurs que votre page est une page XHTML, et qu’elle utilise la version 1.0 du langage XHTML.
La seconde ligne c’est la balise <html> . C'est la balise principale qui englobera toute votre page (x)HTML. On ne la ferme qu'en dernier avec </html> , qui indique que votre page (x)HTML s'arrête là. Il n'y a donc rien après le </html> .
La balise <html> contient 2 attributs :
o xmlns : cet attribut, obligatoire, indique une adresse traitant du xHTML. Ne vous en occupez pas et laissez comme elle est, ça ne nous intéresse pas particulièrement.
o xml:lang : cet attribut indique la langue dans laquelle est rédigée votre page web. Si vous écrivez une page web en français, mettez "fr" comme je l'ai fait. Si la page est en anglais, mettez "en", en arabe"ar", espagnol "es" etc.
La troisième linge. La balise <head> les informations d'en-tête pour votre page web. Elle est refermée un peu plus loin </head>.
o A l'intérieur de la balise <head> , vous trouvez notamment la balise <title>: c'est elle qui contient le titre de votre page web. Ici, le titre est " mon site !"
o D’autre balises peuvent être dans la balise <head> . Il existe beaucoup de balises de ce type, mais je ne vous en parlerai que plus tard elles ne sont pas indispensables.
Seule celle que nous avons utilisé dans notre code est indispensable <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> : elle indique que vous allez taper des caractères spécifiques au français (é è à ê etc...).
Enfin, la 6ème linge et après la fermeture de la balise <head> une nouvelle balise : <body>
C'est entre <body> et </body> que vous taperez le contenu de votre page web.
En clair, c'est entre ces 2 balises que nous allons passer 99% de notre temps
Pour le moment, il y entre ces 2 balises un très court texte « C’est mon site », la page a un fond blanc, nous allons voire comment on peut le changer.
Remarque :
Pour le réouverture de votre page avec notepad++ click droit sur son icône et choisir l’option Edit with notepad++.
image de notepad…
Avant de quitter cette partie du cours, sachez qu’on peut écrire un commentaire dans un code xhtml.
Le commentaire sert à nous guider dans le code si le code par exemple est long. Le commentaire ne sera pas visible aux visiteurs du site, il est écrit pour l’éditeur, vous.
La balise du commentaire est la suivante :
<!—- commentaire -->.

Ajoutez cette linge à votre code de tout à l’heur, remplacez le mot commentaire par : un commentaire que vous voulez exemple :
<!—- ce ci est un commentaire -->. Enregistrez et constatez ce qui ce passe.

Alors si vous avez assimilé cette partie du cours on passe à la suivante si non relisez la encor une ou deux fois jusqu’à ce que vous l’assimilez. Car c’est là tout la base du code d’une page
Et surtout faites des exercices.

Retourner au haut de la page.. haut de page…

Chapitre 4: Organisation du texte :

Pour remplir votre site il faut écrire du texte, l’organiser lui donner une forme.
Nous allons voir dans ce chapitre :
• Comment rédiger des paragraphes
• La façon dont fonctionnent les titres
• Comment souligner certains mots de son texte

Les paragraphes :

Les paragraphe se trouve entre les balises <p> et </p> (qui signifient "paragraphe").
• <p> signifie "Début du paragraphe"
• </p> signifie "Fin du paragraphe"
Code html :

<p> ceci est un paragraphe </p>

Retore à la linge :

Si vous appuyez sur la touche entrer ça ne va pas créer une nouvelle ligne comme vous avez l'habitude.
Tepez ce code, je dit bien tapez, pour apprendre (n’utilisez pas le copier coller).
Si à l’ouverture de votre page html vous ne trouvez pas ce que vous attendez, alors sachez que vous avez des erreurs dans votre code, révisez le voir vos balises et leurs attributs
car l'oublie d'une petite chose( ; ou > ou < ou / )peut donner un mauvais résultat:
Code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title> Mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p> Bonjour et bienvenue sur mon site !
Avant de quitter cette partie du cours, sachez qu’on peut écrire un commentaire dans un code xhtml.
Le commentaire sert à nous guider dans le code si le code par exemple est long. Le commentaire
ne sera pas visible aux visiteurs du site, il est écrit pour l’éditeur, vous, la balise du commentaire est
la suivante :
</p>
</body>
</html>

En effet nous avons écrit plusieurs linges mais sur notre page il n’y a que 2.
Il existe une balise "Aller à la ligne" !
C'est une balise seule qui sert juste à indiquer qu'on doit aller à la ligne :
<br />.
Vous devez obligatoirement la mettre à l'intérieur d'un paragraphe C’es à dire:
entre <p> et </p>. Reprenons notre code mais cette fois avec des balises retour à la linge.
Code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title> Mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p> Bonjour et bienvenue sur mon site ! <br />
Avant de quitter cette partie du cours, sachez qu’on peut <br /> écrire un commentaire dans un code xhtml. <br />
Le commentaire sert à nous guider dans le code si le code par exemple est long. Le commentaire<br />
ne sera pas visible aux visiteurs du site, il est écrit pour l’éditeur, vous, la balise du commentaire est<br />
</p>
</body>
</html>

cette fois ça marche.

Conclusion.

• <p> </p> : pour organiser son texte en paragraphes.
• <br /> : pour aller à la ligne.

Les titres

Votre texte doit avoir un titre .
En XHTML on a le droit d'utiliser 6 niveaux de titres différents.
On peut dire "Ceci est un titre très important", "Ceci est un titre un peu moins important", "Ceci est un titre encore moins important" etc...
On a donc 6 balises de titre différentes que l'on peut utiliser :
• <h1> </h1> : signifie "titre très important". En général, on s'en sert pour afficher le titre de la page en haut.
• <h2> </h2> : signifie "titre important". Utilisez-les par exemple pour organiser vos paragraphes et leur donner un titre.
• <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un "sous-titre" si vous voulez)
• <h4> </h4> : titre encore moins important.
• <h5> </h5> : titre pas important.
• <h6> </h6> : titre vraiment pas important du tout.
Dans le code suivant nous allons tester les 2 premiers niveaux mai faite des testes avec les autre pour voir le résultat que ça donne.
Code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title> Mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Bonjour et bienvenue sur mon site !</h1>
<h2>LE CRIQUET </h2> <p>
On entend souvent son chant dans les régions herbacées. Ceux que l'on <br/>
trouve en France ne sont que des cousins des criquets tropicaux<br/>
</p>
</body>
</html>

Alors je vous laisse découvrir par vous-même ce que donne les autres niveaux.

Mettre en forme le texte

Si, à l'intérieur de vos paragraphes, il y a un ou plusieurs mots que vous aimeriez mettre en valeur, XHTML met à votre disposition 2 balises :
• La première permet de mettre "un peu" en valeur les mots de votre texte.
• La seconde permet de mettre en valeur les mots mai plus fort.
La balise <em> </em>
Il y a aussi la balise <strong></strong> qui fait la même chose mai plus fort.
Entourez le ou les mots à mettre en valeur par cette balise
Code html :

les mots "cousins des criquets tropicaux" que nous avons mit dans la balise<em> est maintenant en forme.
Dans la suite de ce cours je ne donnerai plus le code en entier de la page car c’est très long, je ne donnerai que la partie du code concerné.

types de balises

En XHTML, on distingue 2 types de balises :
• Les balises de type inline : ce sont des balises que l'on utilise à l'intérieur d'un paragraphe.
C'est le cas notamment des balises <strong>, <em> etc... Ces balises ne générent pas de retoure à la ligne (c'est à dire que si on met une balise de type in line au milieu d'une ligne le contenu de la balise sera placé dans la ligne
• Les balises de type bloc : ces balises servent à structurer la page en plusieurs "blocs".
La première qu'on a appris, c'est la balise <p>, mais il y a aussi les balises de titre <h1>, <h2> ...Vous ne devez PAS mettre de titre à l'intérieur d'un paragraphe. Chacune de ces balises constitue un bloc séparé. Ces balises provoque toujour un retoure à la ligne

Important:

Il est important D'avoir compris :
• Comment on structure la page en paragraphes, et comment on revien à la ligne.
• Comment se servir des titres (selon leur importance, on utilise <h1>, ou <h2> etc...).
• De savoir mettre en valeur votre texte à l'aide de <em> (insistance faible)
et <strong> (insistance forte).

Retourner au haut de la page.. haut de page…

Chapitre 5 : Insertion des images :

Avant de commencer, je vous demande de créer un dossier sur votre disque dur.
Nommez le "mon site", dans ce dossier créez un sous-dossier nommez le "images".
Lorsque vous nommez un dossier, un fichier, une image ou une page html utilisez toujours des minuscules.
Dans le sous-dossier images placez une image de votre choix, vérifiez que son nom et son extension sont en minuscule,les nom ne doivent contenir ni espace ni caractère spéciaux( é è ê ä ç etc… ).
vous pouvez utiliser tirée ou sous tirée ("-" ou "_" )
Dans le dossier "mon site" placez votre page "essai.html" que vous avez créez au cours de ce cours.
A partir de ce moment enregistrez tous vos exercices et testes que vous allez faire dans ce dossier, un peu d’organisation ou quoi ?

Pour incérer une image dans une page Web, on doit choisir un format qui s’adapte le mieux avec le Web.
Les formats d'images que l'on utilise sur le Web sont :

JPEG : le format JPEG est très répandu. Il est particulièrement adapté pour les photos,Les images de type JPEG ont généralement l'extension ".jpg", mais aussi parfois ".jpeg" . PNG : le format PNG est le plus récent de tous. Ce format est adapté à la plupart des graphiques. L'avantage du PNG, c'est qu'il peut être rendu transparent, ce qui est très appréciable. GIF : c'est un vieux format, qui a été très utilisé.

Le format GIF est limité à 256 couleurs. Si je je vous parle du GIF, c'est qu'il conserve quand même un avantage que le PNG n'a pas : il peut être animé

Résume :

les formats à adopter en fonction de l'image que vous avez :
• Une photo (ou une image avec beaucoup de couleurs) : utilisez un JPEG ou PNG 24 bits.
• Un graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits si possible, sinon utilisez un GIF.
• Une image animée : utilisez un GIF animé.
Revenons à notre code xhtml
Pour insérer une image, on utilise la balise <img />.
C'est une balise de type seule (comme <br />).
Elle peut prendre plusieurs attributs, et 2 d'entre eux sont indispensables :

• src : il permet d'indiquer la source où se trouve l'image que l'on veut insérer.
Vous pouvez soit mettre :

1. un chemin en absolu (exemple : "http://www.site.com/image.png").
2. soit mettre le chemin en relatif (c’est le cas le plus souvent utilisé).
Ainsi, si votre image est dans un sous-dossier "images" vous devrez taper :
src="images/mon_image.png"

• alt : qui signifie "texte alternatif". On doit toujours indiquer un texte alternatif à l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée (et ça arrive).
Si vous ne faites pas de texte alternatif, votre page ne sera plus une page XHTML valide et votre site sera détecté comme non conforme aux normes.
exemple d'insertion d'image :

Dans le code suivant remplacez le mot "mon_image" par le nom de l’image que vous voulez insérer, n’oubliez pas L’extension.(.jpeg , .gif , .png)
Insérez ce code dans le code de votre page Web, vous vous souvenez click droit sur l’icône de la page Web puis faite Edit with notepad++
Code : HTML

<p>
Voici une image :<br />
<img src="images/image.jpg" alt="image de…" />
</p>

C’est très facile.

Rappelle :

Evitez à tout prix les accents, majuscules et espaces dans vos noms de fichiers et de dossiers. Si votre image ne s'affiche pas, c'est souvent parce que le chemin est incorrect ! Simplifiez au maximum vos noms de fichiers et de dossiers et tout ira bien. Les images se mettent à l'intérieur d'un paragraphe (<p></p>).

Retourner au haut de la page.. haut de page…

Chapitre 6:Créer des liens

On distingue 2 types de liens :

• Les liens internes à son site : normalement, votre site comportera plusieurs pages XHTML . Si vous voulez faire un lien d'une page à une autre, vous ferez ce qu'on appelle des liens relatifs. Un lien relatif est assez court, par exemple "fichiers/cible.html".
• Les liens vers d'autres sites : ce sont par exemple des liens vers "http://www.site.com", ou vers un fichier précis (par exemple "http://www.site.com/fichier.html"). Ce sont des liens absolus et, contrairement aux liens relatifs, ils commencent souvent par "http://".
Je vais maintenant vous demander de créer une page Web en utilisant les connaissances acquises dans les chapitres précédents. Enregistrer cette page dans le dossier monsite de tout à l’heur sous le nom "essai2.html".
Maintenant vous avez 2 pages XHTML qui se trouvent dans le même dossier sur votre disque dur :
c:\monsite\essai.html
c:\monsite\esai2.html

Les liens internes à son site

Vous voulez faire un lien de essai.html (Source) vers essai2.html. (Cible)
C'est simple, comme les fichiers se trouvent dans le même dossier il suffira d'écrire juste "cible.html" !
Si votre fichier cible.html se trouve dans un sous-dossier que je nomme ici dossier, par exemple :
c:\monsite\dossier\cible.html
Il faudra écrire le nom du dossier d'abord "dossier/cible.html". S'il y a plusieurs sous-dossiers, il suffit de les écrire à la suite :
"dossier1/dossier2/cible.html"

Lien vers une autre page :

Nous avons 2 pages : source.html et cible.html dans le même dossier monsite.
essai.html contient un lien vers essai2.html, et les 2 pages se trouvent dans le même dossier. Voici comment nous allons faire :
Code : HTML

<h1>source.html</h1>
<p>Nous somme ici sur essai.html<br />
Nous Souhaitons visiter essai2.html <a href="essai2.html">le fichier essai2.html</a> ?
</p>

Vous mettez le texte du lien entre les balises <a> et </a>
et vous indiquez l'adresse de la page dans le href="" Un lien vers un Site :
Code : HTML

<p> Je connais un site super : le
<a href=" http://carabde.carrefourinternet.com">Site carrefourinternet</a><br />
N'hésitez pas à aller le visiter, il vaut <em>vraiment</em> le coup </p>

Un lien vers une page d'un autre site :
Code : HTML

<p> visitez cette page
<a href=" http://www.opportunite-argent.com/index.php?ref=carabde">Site carrefourinternet</a><br />
N'hésitez pas ça vaut <em>vraiment</em> le coup
</p>

Un lien pour envoyer un mail

Si vous voulez que vos visiteurs puissent vous envoyer un mail, vous pouvez utiliser des liens "mailto".
Vous devez simplement modifier la valeur de l'attribut href comme ceci :
href=mailto:votrenom@hotmail.com par exemple.
Commencer le lien par "mailto:" puis écrire l'adresse e-mail où on peut vous contacter :
Code : HTML

<h2>Me contacter</h2>
<p>Pour me contacter, <a href="mailto:carabd@hotmail.com">cliquez ici</a> !</p>

Un lien vers une ancre

Une ancre, c'est un point de repère que vous pouvez mettre dans vos grosses pages XHTML.
Si votre page est très grande il peut être utile de faire un lien amenant plus bas dans la même page pour amener le visiteur directement à une partie qui l'intéresse.

Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère, n'importe quelle balise, un titre par exemple.
Utilisez l'attribut id pour donner un nom à l'ancre, ce qui va servir ensuite pour faire le lien vers cette ancre.
Par exemple :
<h2 id="mon_ancre">Titre</h2>
Ensuite, il suffit de faire un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre.
Exemple :
<a href="#mon_ancre">Aller vers l'ancre</a>
Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la même page (à condition que la page comporte suffisamment de texte pour que les barres de défilement se déplacent automatiquement).

Lien vers une ancre située dans une autre page

L'idée, c'est de faire un lien qui ouvre une nouvelle page ET qui amène directement à une ancre située plus bas sur cette page.
C’est assez simple à faire : il suffit de taper le nom de la page, suivi d'un dièse (#), suivi du nom de l'ancre.
Par exemple :

<a href="cible.html#ancre">

Ce lien vous amènera sur la page cible.html, directement au niveau de l'ancre appelé "ancre".

Retourner au haut de la page.. haut de page…

...Précèdent...		Vous êtes ic: le langage xHTML			Voir la suite…

Vous pouvez copier, modifier des copies de cette page, tant que cette note apparaît clairement
Vous devez citer le nom de l'auteur original et faire un lien hypertexte vers http://apprendre.uuuq.com