Nous allons passer aux choses un peu plus sérieuses, mais comme d'habitude, préparons un peu le terrain en réalisant pas à pas les principales actions que vous effectuerez (peut-être de très nombreuses fois qui sait !) lors de la création d'une page xhtml.
Rien de bien compliqué, mais il y a des choses avec lesquelles il faut savoir faire attention.

● Commencez donc par ouvrir Notepad++ (comment ça vous ne l'avez toujours pas téléchargé ?! XD)
● Enregistrez (oui déjà) votre document (ctrl+alt+s), donnez lui un nom de page valide. J'entends par valide qu'il faut désormais proscrire des noms tous les caractères spéciaux, tous les caractères accentués, tous les espaces et éléments de ponctuation, ainsi que les majuscules ! Si vous construisez la page d'accueil de votre site, je vous conseille de la nommer "index", nom auquel nous rajouterons le langage que nous allons utiliser, à savoir le xhtml... sauf que l'on pourra utiliser uniquement deux extensions : ".html" ou ".htm", qui sont équivalents. Ainsi vous devrez taper dans le nom de fichier : "index.html". Validez.

Tous les fichiers qui serviront à la conception d'un site devront désormais respecter les mêmes règles concernant leurs noms ! (image, fichier pdf, fichier flash etc...)

Il vous est possible cependant d'utiliser l'extension ".php" tout en ne codant qu'en xhtml dans votre document ! Cela s'adresse généralement aux codeurs qui envisagent par la suite de concevoir des modules en PHP. Quoiqu'il en soit, je ne pense pas que nous en soyons déjà là :p

● Bien, maintenant que nous avons notre document html fin prêt, nous allons pouvoir commencer à construire la structure de celui-ci
Commençons par le début...

Il s'agit ici d'annoncer le type de document que l'on va traiter... (en fait c'est une référence pour les navigateurs, ainsi ils savent quel type de document ils sont en train de lire)
Certains l'auront remarqué, l'annonce ici traite de langage (XHTML 1.0), mais aussi de la référence normative (nom pompeux, il s'agit simplement de l'adresse du site w3.org qui est la référence pour le standard utilisé (ici XHTML 1.0)
Ne paniquez pas ! Si vous ne retenez pas ça ce n'est pas grave, ce qu'il faut retenir c'est que cette ligne de code signifie que votre document peut enfin commencer, si vous ne saisissez pas cette ligne les navigateurs ne sauront pas comment réagir avec votre document (certains le liront, d'autres plus ou moins bien, et peut-être enfin que d'autres pas du tout... qui sait :p).

Ici nous annonçons simplement que notre document commence, nous allons donc pouvoir taper du code HTML :p
Vous avez remarqué la petite précision sur le langage utilisé, ainsi que les marques bizarre "xml". Ceci ne nous intéresse pas pour le moment, c'est un petit point pointu que nous n'aborderons que si j'en vois l'intérêt plus tard. Sachez qu'il faut quand même les préciser pour que votre document soit valide aux normes du W3C (je ferai une parenthèse plus tard là dessus aussi).
Notre document doit maintenant contenir une tête, et un corps ! Non non je ne plaisante pas, ainsi nous allons simplement commencer par... ?
La tête :p ! Normal !

Head... ben quoi HEAD ? Oo
Quoi vous ne me croiyez pas ? Oui, "tête" en anglais. Il s'agit ici d'annoncer l'ouverture de la tête du document, c'est ici que nous allons insérer les éléments qui ne composeront pas l'aspect (le contenu visible sur la page par le visiteur) de celui-ci. Pourrons y figurer le titre de la page, des informations pour les moteurs de recherche (description, catégorie, langage etc...), des liens vers d'autres documents (javascript, CSS, RSS, ...), etc etc...

J'en parlais juste avant, il s'agit du titre de la page. Ce titre apparait dans l'angle de votre fenêtre de navigateur (sur l'onglet probablement aussi), il suffit de zieuter le titre de cette page vite fait, vous verrez :p
Vous constaterez qu'il s'agit d'une double balise, il y a un donc une balise ouvrante, et une fermante !

Meta... meta... metaphore ?
Non non meta tout court, il s'agit de balises d'informations utilent principalement aux moteurs de recherche. Il en existe une multitude dont je vous ferai part dans un annexe prochainement.
Celle-ci annonce le type de contenu de votre document de manière plus précise, ici du texte au format html dont le charset (manière de lire votre code) est iso-8859-1. Cela ne vous dit peut-être rien, mais je vous invite à faire une recherche sur notre ami google (mots clefs : charset + html)

Certaines de ces metatags (entendez "Balise Meta") sont devenues obsolètes et une grande majorité ne rapporte plus grand chose au référencement à cause de leur mauvaise utilisation et de leur abus. Cependant ne pas renseigner l'essentiel peut encore causer du tort à la visibilité de votre site Internet... (cf. cours Metatags Bientôt en ligne).

Eh oui ! Nous en avons fini avec la tête, pour le moment elle n'est pas très remplie, mais vous verrez par la suite que son contenu peut facilement être enrichi. Passons maintenant au corps !

N'allez pas chercher plus loin la traduction, il s'agit bien du mot "corps" en anglais. C'est ici que notre structure HTML va vraiment donner un début d'apparence et de contenu à notre site Internet. La balise body n'est pas toujours vierge d'attribut, mais je ne vais pas vous en mettre plein les neurones dès maintenant. C'est donc à la suite de cette balise que tout notre site Internet va être construit.

Je ne commente volontairement pas les deux dernières balises de cette image, qui, vous l'aurez compris, annonce simplement la fin du corps (</body>) ainsi que la fin du document html (</html>)

Votre document xhtml doit forcément contenir :
- L'annonce de votre doctype
- L'ouverture de votre structure html (<html>) et sa fermeture en fin de document (</html>)
- Une tête (<head> et </head>) contenant les informations invisibles pour les visiteurs et utilent pour le navigateur et les moteurs de recherche.
- Un corps (<body> et </body>) qui contient la structure et le contenu visible de votre site Internet

Notre document est donc fin prêt à accueillir un contenu xhtml, et pour vous montrez que l'on peut vite y intégrer du contenu visible nous allons nous amuser à le remplir.
Enregistrez donc votre travail (ctrl+S)

Afin de bien préparer notre site, nous allons réserver un dossier sur notre ordinateur pour le site et ses différents fichiers. Ainsi créez un dossier nommé "Site1" ou n'importe quel nom qui vous conviendra et placez-y "index.html".
Toujours dans ce dossier créez un nouveau dossier nommé "images". C'est ici que nous placerons toutes les images de notre site.

Le dossier comprenant l'index de votre site s'appelle la racine (ou root en anglais). Ainsi lorsque l'on vous dit de placer un élément à la racine de votre site, il vous faut simplement le placer à côté de votre fichier "index.html". Ici je vous ai ainsi demandé de créer un dossier "images" à la racine de votre site.

● Je vais maintenant commencer à vous marteler de nouvelles balises et de manières de les utiliser. Mais pour avoir un aperçu de ce que nous allons faire je vous invite à vous rendre dans le dossier où se situe votre document "index.html". Double-cliquez dessus afin de l'ouvrir sous votre navigateur (Firefox pour moi... et j'espère pour vous aussi !). Normalement votre navigateur s'ouvre avec comme adresse une locale un peu sous cette forme :
"file:///C:/Users/NomUtilisateur/Documents/Sites/Never-Utopia Site/cours-nu.html"
C'est ce qu'on appelle travailler en local. Pour le moment cela ne pose aucun problème... et vous devriez voir une page blanche, puisque nous n'avons rien mis de concret dans le document html !

Nous allons tout de suite commencer par écrire un titre sur notre page... à ne pas confondre avec le title entre les balises de tête qui ne sert qu'à donner un titre à la page (et non sur la page) !
Les balises de titre sont composées de la balise de base <h> ainsi que du numéro du rang d'importance allant de 1 à 6, le 1 étant le titre 1^er, le plus important donc.
Pour notre titre d'en-tête de site, nous allons donc utiliser un titre de rang 1 :

Bien entendu vous avez placé ce titre entre les balises de corps (body) de votre document...
Juste en dessous nous allons y mettre un petit texte descriptif d'introduction. Pour cela nous allons créer un paragraphe. Plus simplement ce paragraphe s'annonce grâce à la balise <p>

Vous remarquerez bien assez rapidement que sauter des lignes en appuyant sur la touche Entrée de votre clavier n'apportera pas grand chose sur votre page (sous votre navigateur en somme). Enregistrez (ctrl+S), retournez sous votre navigateur et faites F5 pour actualiser le contenu de la page. Maintenant retournez sous Notepad++, sautez des lignes en appuyant sur Entrée au sein de votre paragraphe, enregistrez, retourner sous votre navigateur et actualisez... rien n'a changé.

En effet vous ne vous trouvez pas sous traitement de texte. Un saut de ligne s'annonce lui aussi avec du code. En xhtml il s'agit d'une monobalise :

L'insertion d'une de ces balises provoquera un retour à la ligne, l'insertion de deux de ces balises consécutivement provoquera un saut de ligne.
Prenons un exemple, ce texte :
"Bienvenue !
Nous voici sur un cours de xHTML proposé par la communauté de Never Utopia.

Pour toute réclamation ou question nous vous invitons à passer sur le forum.
Cordialement
- Riku -"
Pour écrire ceci avec ces retours et sauts de lignes, voici le contenu codé :

Attention ! Si vous ressentez le besoin d'inscrire 2 br, peut-être est-il plus judicieux de séparer le contenu en deux paragraphes.

Prenez de bonnes habitudes ! Ce n'est pas parce que les sauts de ligne ne servent pas à la présentation de votre page, que votre code doit être sur une seule et même ligne. Vous pouvez (et devriez même) combiner un saut de ligne en code et une présentation aéré sous notepad++. Ainsi une fois votre titre écrit, sautez une ligne, faites un alinéa (tab) et commencez votre paragraphe. A chaque saut de ligne (<br />) sautez aussi une ligne sous Notepad++ etc... Un seul mot : aérez !

Oui d'accord c'est bien beau, mais pourquoi après mon titre H1 il y a un saut à la ligne alors que je n'ai pas mis de <br /> ?

Excellente question ! Et ce sera justement l'objet d'une prochaine partie de cours, mais avant, voyons ce que nous pouvons faire de ce texte. En effet maintenant que vous savez créer du contenu textuel facilement nous allons voir comment le modifier rapidement avec de la mise en forme ponctuelle (termes barbares mais vous verrez... :p)

Mise en forme ponctuelle

Vous connaissez certainement les principales mise en forme du texte : Italique, gras, souligné. Nous allons voir comment les utiliser simplement, et nous irons même plus loin avec certaines mises en forme bien pratiques.

Donnera :
Normal (aucun code)
Italique (i = italic)
Italique 2 (em = emphasis)
Gras (b = bold = gras)
Gras (strong = fort)
Souligné (u = underline = souligné)

On appelle cela une mise en forme ponctuelle car elle est attribuée directement sur un mot et non sur une balise bien précise contrôlée par la feuille de style CSS. Car d'après l'introduction de ce cours, la mise en forme se fait normalement depuis une feuille de style en langage CSS, cependant vous venez de voir que l'on peut ponctuellement faire autrement.

Ces balises n'ont pas toute une valeur sémantique. La sémantique c'est un terme un peu barbare pour signifier qu'un élément HTML donne un sens au contenu. Par exemple, le paragraphe P a une valeur sémantique de paragraphe, l'élément H1 a une valeur sémantique de titre de niveau 1. L'élément i, u et b n'ont pas de valeur sémantique, les éléments em et strong ont des valeurs sémantiques. C'est une nuance un peu complexe à ce niveau, mais sachez que si vous souhaitez juste faire une mise en style ponctuelle, utilisez i et b en lieu et place de em et strong.

Voyons quelques autres balises qui peuvent être utiles :

- Je suis 1^er
- Never-Utopia _TM
- Un texte plus petit
- Un texte plus gros

Et si je veux combiner du ponctuel ? J'ai un texte à mettre en Italique, gras, petit et indice...

Soit ! Vous êtes armés pour mettre ça en forme... je vous laisse faire ?
Allez-y, utilisez si besoin est les listes précédentes, et surtout n'oubliez rien : Italique, gras, petit et indicé.

Vous avez fini ? Bien, j'espère que vous avez respecté un point crucial en xhtml qui est l'ordre d'encadrement. Votre code doit ressembler à cela :

Cela vous donne donc : "_{Mon texte}"
C'est un peu un effet poupée Russe qu'il faut respecter, imaginez une bille dans une poupée Russe, il va de soit que la plus petite tête de votre poupée doit être refermée avec la plus petite base de celle-ci, ainsi de suite.
Ainsi ces deux codes n'ont pas la même valeur, même si pour la plupart des navigateurs la mise en forme passe quand même :

Attribut STYLE - Un semblant de CSS

Nous allons commencer à complexifier la chose en injectant un semblant de CSS mais en reprenant les mises en forme précédentes... tout du moins une partie, et nous progresserons vers l'attribution de couleur à notre texte. Seulement après nous verrons un point crucial à notre questionnement concernant les sauts de lignes "automatiques".

Avant toute chose, sur quoi allons nous mettre cet attribut ?... sur une balise, soit ! Mais laquelle à votre avis ?
La balise de paragraphe ?... oui pourquoi pas, c'est tout à fait envisageable, mais bien souvent nous aurons besoin de mettre en forme uniquement un tout petit morceau de texte dans un paragraphe, il va donc nous falloir utiliser une balise spécifique. Dans le temps, nous avions la balise font qui permettait de porter ce type d'attribut. Cette balise a cependant été dépréciée et n'est donc plus utilisée. Nous utiliserons la balise span, une balise neutre sémantiquement.
Nous pourrions donc avoir un code dans ce style :

Résultat : Un petit texte ici, et une mise en forme par là

Vous me croirez ou pas, nous venons d'aborder le CSS !
Eh oui ! La valeur de l'attribut style est en fait du CSS sous la même forme (ou presque) que celui que nous mettrons bientôt dans une feuille de style CSS.

Vous verrez probablement d'autres manières d'écrire cela, comme par exemple celle-ci : "<span color="blue">mon texte</span>", cette façon de faire donne le même résultat, cependant elle est obsolète dans les versions nouvelles du langage. Je vous conseille donc l'utilisation de l'attribut style qui vous oblige par la même à utiliser du CSS.

L'on va donc retrouver nos différents styles précédents comme par exemple le soulignement, le gras, l'italique, le surlignement, etc...
Je vais vous donner un exemple sans détailler la valeur de l'attribut style. En effet je vous donnerai plus de détails dans le cours de CSS. Ceux qui souhaitent prendre un peu d'avance peuvent chercher des informations par eux-mêmes sans problème :p

Résultat : "Un texte et une mise en forme"

Ainsi la combinaison de mise en forme se fait dans une seule et même balise, span. Ne prenez pas peur en voyant cela, nous le reverrons plus tard lorsque nous aborderons en détail le CSS. Sachez simplement retenir l'utilisation de la balise span et le type de valeur de l'attribut style

Pour la petite histoire l'attribut style est en quelque sorte le tout début du CSS, avant même que son utilisation sous forme de feuille de style externe ne devienne LA manière de coder par excellence.

Aujourd'hui, l'attribut style n'est quasiment plus utilisé (sauf dans l'e-mailing), il est cependant important de savoir qu'il a existé. L'attribut style est compatible avec la plupart des balises HTML.

Différence entre block et inline

Nous en venons donc à notre questionnement précédent : Pourquoi à certains moments je dois utiliser un <br /> pour sauter une ligne, et à d'autres moment non ?

Je préviens d'avance les intimes du concret, c'est un aspect un peu technique que nous abordons ici, mais aussi un des plus important concernant la logique de disposition des éléments en HTML, il s'agit du positionnement en CSS. Nous allons voir tout d'abord quelques définitions et termes précis qu'il vous faudra assimiler si vous souhaitez concevoir un site Internet propre et digne de ce nom.
Commençons :

- Le flux : il s'agit de l'agencement logique (ou "naturel") d'un élément par rapport à un autre tout au long de la lecture d'un document HTML par le navigateur. C'est un peu "l'ordre logique des choses".
- Inline : on parle plus précisément de balises de type inline en opposition aux balises de type block. Une balise de type inline ne provoque pas de retour à la ligne automatique (ex : balises span, balises de mise en forme (italique, gras, etc...), balise img que nous verrons plus tard, etc...). Elles sont "en une ligne" (in line) et passent à la ligne automatiquement lorsqu'elle arrive en bout de page ou de bloc (comme un texte sur la page d'un livre)
- Block : à l'inverse des balises de type inline, celles de type block forment un bloc. Le bloc passe tout seul à la ligne et occupe 100% de la largeur disponible, par défaut. Rien ne peut donc être aligné à côté. Les balises de paragraphe (<p>), de titre (<h1>), etc...) provoquent ce type de "saut de ligne automatique".
- Contenu : nous l'avons déjà vu en introduction à ce cours, il s'agit de ce qui se trouve entre deux balises. (ex: le texte dans un paragraphe)

Voilà pour l'essentiel du vocabulaire, c'est léger, mais il faut à tout prix vous le greffer aux neurones. Le terme de flux vous est peut-être encore un peu vague, sachez simplement que l'organisation de block et de inline composent ce flux, c'est la place que prend chacun des éléments, et la manière dont il agit en présence d'un autre élément. Ce terme un peu vague peut s'illustrer avec ce que nous avons précédemment écrit dans notre document : un titre, un paragraphe, du texte. Nous avons donc 2 éléments : titre (block) et paragraphe (block), et du contenu (texte). Le flux nous dit que chaque élément a sa place : ici le texte sera dans un bloc (paragraphe) lui-même situé en dessous d'un autre bloc (puisque deux blocs ne peuvent pas être alignés naturellement) qui est le titre. Nous venons donc de détailler le flux de notre page.

A quoi ça sert de savoir ça ? Tu nous plombes le cerveau avec choses qui se font toutes seules, on finira bien par le voir de nos propres yeux !

Pas faux ! Le flux c'est le flux, on ne peut a priori pas le changer, puisque les éléments se placent par eux-mêmes sans nous en demander l'avis. Et puis vous ne voyez certainement pas encore à quoi tout cela va bien pouvoir servir... je vous comprends.
Mais si je vous demande de placer un paragraphe sur la gauche de votre page, et un autre sur la droite, le tout sur la même ligne ?
Maintenant que vous savez qu'un paragraphe est de type block, et que deux block ne peuvent pas se trouver sur la même ligne, inutile de vous lancer dans l'impossible... enfin, impossible pour le moment.

Nous nous dirigeons progressivement vers ce qu'on appelle le positionnement. Connaitre la manière dont agit une balise nous permettra par la suite de jouer avec la disposition des éléments !

- Dorénavant lorsque je vous présenterai une nouvelle balise, je vous préciserai si celle-ci est de type block on inline
- Deuxième point important : la plupart des balises de type block ne peuvent contenir que des balises de type inline (ex: balises de titre ou de paragraphe). Aucune balise de type inline ne peut contenir de type block, mais une balise de type inline peut contenir d'autres inlines.

Nous allons faire une petit pause côté théorie et revenir un peu sur la pratique avec deux éléments très importants dans le contenu d'un site Internet. Nous reviendront juste après sur un aspect pratique et théorique toujours en rapport au flux.

Lien et image

Enfin ! Nous allons en parler ! Même si vous connaissez déjà la forme de la balise image pour avoir abordé le code en début de cours, nous allons mettre ceci en pratique dans notre document XHTML. Il en sera de même avec la balise de lien.

Voici un code plutôt complet d'insertion d'image. La balise img est de type inline.
Récupérez une image sur Internet ou fabriquez en une sous un logiciel adapté, enregistrez-là dans votre dossier "images" qui se trouve normalement à la racine de votre site Internet (sur votre ordinateur). Je vous rappelle qu'à l'instar d'une page html, le nom de votre image ne doit contenir aucun caractère spécial, espace, etc... Je l'ai nommé "image1" d'extension .jpg, mais je vous invite à trouver un nom explicite qui vous permette de facilement reconnaître l'image.

Copiez le code ci-dessous et insérez-le dans votre document html à la suite du contenu déjà en place, puis enregistrez.

Actualisez votre page sous navigateur. Votre image apparait en bas de page.
Bien ! Une petite explication s'impose.

L'attribut src possède pour valeur le chemin de l'image. Ce chemin doit partir de l'emplacement de votre document HTML, et se diriger vers le dossier et fichier de l'image. Nous savons que notre document HTML se trouve à la racine du site, et l'image dans un dossier nommé "images". Il nous suffit donc de signifier le dossier "images" : "images/" et le fichier "image1.jpg" de ce dossier : "images/image1.jpg".

L'attribut alt propose un contenu alternatif à l'image dans le cas où elle ne s'afficherait pas ou ne serait pas vue par le visiteur. Ainsi la valeur de cet attribut s'affiche à la place de l'image si besoin est. Cet attribut est obligatoire si vous voulez rendre valide votre code et si vous souhaitez bien faire les choses.

Les attributs width (largeur) et height (largeur) précise les dimensions de l'image en pixels. Il est important de les renseigner (avec les bonnes valeurs !)

Une image étant de type inline, il est donc possible de coller une image après l'autre en répétant simplement le code d'insertion. Il est aussi possible de répéter plusieurs fois la même image, bien entendu.

Copiez et collez à la suite de votre document HTML le code ci-dessus.
Créez un nouveau document HTML nommé "page2.html" à la racine de votre site Internet. Connaissant le contenu de base d'une page HTML vous savez désormais ce qu'il vous reste à faire. Placez le contenu textuel que vous souhaitez, cela servira simplement de test pour le lien que nous avons fait.

Enregistrez bien vos deux pages, passez sous votre navigateur et actualisez votre page index.html en local (F5). Un lien apparait en fin de document, en cliquant dessus vous devriez être renvoyé sur votre deuxième page nommé "page2.html".

Comme d'habitude, commentons rapidement le code d'un lien :

L'attribut href possède pour valeur la page ciblée par le lien. En cliquant le lien on tombe sur le page mentionnée dans le href. La page est ciblée de la même manière que le chemin d'une image.

L'attribut title offre toujours un texte en infobulle, c'est un texte qui doit apporter un complément au texte cliquable.

Il existe un attribut devenu obsolète en XHTML Strict, mais toujours utilisable en XHTML Transitionnel, l'attribut target, qui permet de savoir comment ouvrir le lien, à savoir la cible du lien. Il existe plusieurs valeurs :
   - _blank : ouvre le lien dans une nouvelle fenêtre/onglet, en fonction de la configuration de votre navigateur.
   - _self : valeur par défaut d'un lien, ouvre le lien dans le même onglet/fenêtre/cadre.
   - _parent : ouvre le lien dans le cadre de niveau supérieur (le parent le plus proche)
   - _top : Ouverture de la page cible dans la fenêtre hôte (par-dessus le reste)
   - _search : (disponible seulement avec IE 6 ou ultérieur) Ouverture de la page cible dans le volet d'exploration (rechercher) du navigateur
   - nom du cadre : Ouverture de la page cible dans le cadre portant le nom cité ( valeur de l'attribut name )

Vous avez certainement remarqué que la balise de lien est une balise de type inline. Avec un peu de réflexion sur le type de balise, vous devriez commencer à comprendre comment les images-liens (les images sur lesquelles on peut cliquer, qui sont donc aussi des liens) fonctionnent.
Vous ne comprendrez certainement pas l'utilité de certaines valeurs de l'attribut target, mais revenez-y plus tard, peut-être que ça passera mieux. Certaines valeurs ne vous serviront jamais, donc je n'explique pas plus ici.

Le texte entre les deux balises a(de lien) est simplement remplacé par le code d'insertion d'une image.

Le contenu de l'attribut alt lorsqu'il est renseigné sur une image servant de lien doit ressembler au texte que vous mettriez si vous n'aviez pas d'image. Exemple : vous remplacez le lien "Forum" par une image, l'attribut alt aura pour valeur "Forum".

Cours précédent : HTML, comment ça marche ? Cours suivant : Les tableaux en HTML