Site web

Partie 1 : Les bases du XHTML


• XHTML : c'est l'abréviation de eXtensible HyperText Markup Language.
Ce langage XHTML, c'est celui avec lequel vous taperez le contenu de votre site web. Il contient des informations logiques : vous direz par exemple "Ceci est mon titre, ceci est mon menu, là c'est le texte principal de la page, là il y a une image etc etc...".

• CSS : c'est l'abréviation de Cascading Style Sheets ("Feuille de style").
Ce langage nous sert uniquement à présenter la page web.


En résumé, on se sert de :

• XHTML pour écrire le contenu de nos pages web.
• CSS pour présenter ce contenu.

En fait, des logiciels qui permettent de créer un site web, il y en a des tonnes.
Mais pourquoi aller chercher un logiciel payant et compliqué, alors que vous avez déjà tout ce qu'il faut chez vous ?

Eh oui, accrochez-vous bien parce que... il s'agit de Bloc-Notes !

Sinon il y a un logiciel simple, en français et gratuit. Il s'appelle Notepad++, et je vous invite à le télécharger :
http://www.01net.com/telecharger/windows/Internet/editeur_de_site/fiches/29119.html

Bien, maintenant que nous sommes au point et que nous avons notre éditeur de pages web, nous allons pouvoir parler du dernier élément indispensable (que vous avez déjà là encore) : le navigateur.

Le navigateur, c'est le programme qui vous permet de voir des sites web. Si vous lisez ces lignes, c'est donc que votre navigateur est ouvert et que vous l'avez sous les yeux

Le travail du navigateur, c'est de lire le code XHTML / CSS que vous avez écrit, et d'afficher ce qu'il représente. Si votre code CSS dit "Les titres sont en rouge", alors le navigateur affichera les titres en rouge.

Parmi les navigateurs qui existent, citons :
> Internet Explorer
> Mozilla Firefox
> Opéra
> Netscape
> Konqueror (pour Linux)
> Lynx (pour Linux)
> Apple Safari (pour Mac)
etc...

La liste est longue, mais je vous ai cité les principaux.
Je vais vous présenter deux d'entre eux:
• Internet Explorer
• Mozilla Firefox

Avant de terminer cette petite partie théorique, je vais vous donner ici quelques règles pas bien compliquées qu'il faudra retenir si vous voulez faire une parfaite petite page web :

• Les balises existent soit par paires (<balise> </balise> ) ; soit toutes seules, mais dans ce cas il faut mettre un / à la fin de la balise (ex. : <balise> )
• Les noms des balises et attributs s'écrivent toujours en minuscules (ex. : "citation, auteur, date")
• Les valeurs des attributs peuvent contenir des majuscules (ex. : "Neil Armstrong")
• S'il y a des attributs dans une balise fonctionnant par paire, on ne les met que dans la balise ouvrante (cf : exemple ci-dessus).

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

<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.

<em> </em> : en italique
<strong> </strong> : en gras

Mettre en exposant ou en indice
 : Les mots seront alors affichés en hauteur.Les mots seront alors affichés en hauteur.
 : Pour mettre en indice (c'est-à-dire pour écrire le texte en bas de la ligne en petit)

Les citations
<q> </q> : Des citations courtes, dans un paragraphe
> les citations courtes s'effectuent à l'intérieur d'un paragraphe
<blockquote> </blockquote> : Des citations longues, hors d'un paragraphe
> mettre ces balises de paragraphe <p> à l'intérieur du blockquote

<acronym> : Un acronyme est une suite d'initiales utilisée généralement pour raccourcir certains noms, comme par exemple XHTML, FBI, CSA etc... <p>Le <acronym>XHTML</acronym> est le langage qui permet de créer un site web.</p>


<a> : Pour faire un lien, On doit ajouter l'attribut "href" pour indiquer l'adresse de la page cible

Un lien pour envoyer un mail
href="mailto:votrenom@bidule.com"

Un lien vers une ancre
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre par exemple.
Utilisez l'attribut id pour donner un nom à l'ancre, ce qui va vous servir ensuite pour faire le lien vers cette ancre. Par exemple :
<h2>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>


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.
En pratique 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#rollers">
... vous amènera sur la page cible.html, directement au niveau de l'ancre appelé "rollers".



<img> : Pour insérer une image <img src="images/hawai.jpg" alt="Photo de Hawaii">
Comme le texte, une image peut très bien servir de lien. Au lieu de mettre du texte entre les balises <a></a>, vous pouvez très bien mettre une balise <img> !

* Les liens internes à son site : normalement, votre site comportera plusieurs pages XHTML (ou alors il sera bien pauvre !). Si vous voulez faire un lien d'une page à une autre, vous ferez le plus souvent 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.siteduzero.com", ou vers un fichier précis (par exemple "http://www.siteduzero.com/fichier.html"). Ces liens sont appelés liens absolus et, contrairement aux liens relatifs, ils commencent souvent par "http://".

Une ancre, c'est une sorte de point de repère que vous pouvez mettre dans vos grosses pages XHTML.
En effet, 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 à la partie qui l'intéresse.

Les commentaires sont des informations que vous écrivez pour vous. Les commentaires n'apparaissent pas aux yeux des visiteurs.
Vous pouvez par exemple utiliser les commentaires pour marquer des repères si votre page XHTML est très grosse, ou pour vous servir de rappel.

Un commentaire est une balise un peu spéciale commençant par <!-- et terminant par -->

Partie 2 : C'est plus joli avec du CSS !

Comme en XHTML, il est possible de mettre des commentaires.
vous tapez /*, suivi de votre commentaire, puis */ pour terminer votre commentaire.




> font-family : permet d'indiquer la police
> color : couleur
> word-spacing : l'espace entre les mots (en pixels).
> letter-spacing : l'espace entre les lettres (en pixels).
> text-indent : text-indent: 30px;

> font-size : Taille

* xx-small : minuscule
* x-small : très petit
* small : petit
* medium : moyen
* large : grand
* x-large : très grand
* xx-large : euh... gigantesque

> text-align : les alignements

* left : le texte sera aligné à gauche (c'est le réglage par défaut).
* center : le texte sera centré.
* right : le texte sera aligné à droite.
* justify : le texte sera "justifié". Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont tout le temps justifiés.

<span> </span> : c'est une balise de type inline.C'est une balise qui se met à l'intérieur d'un paragraphe, comme <strong>, <em>, <q>. Cette balise s'utilise donc au milieu d'un paragraphe.
<div> </div> : c'est une balise de type block. Comme <p>, <h1> etc... Elle crée un nouveau "bloc" dans la page, et provoque donc obligatoirement un retour à la ligne.


Pour le moment donc, nous allons utiliser plutôt la balise <span>.
EX. Code : HTML
<p>Comme l'a dit <span class="nom">Neil Armstrong</span> un certain 20 juillet 1969...</p>

Les majuscules en CSS

Concrètement, pour mettre en italique en CSS on utilise font-style, qui peut prendre 3 valeurs :

* italic : le texte sera mis en italique.
* oblique : le texte sera mis en italique. Quoi là aussi ? o_O Euh, pour tout vous dire je n'en sais rien moi-même, mais tout ce que je constate c'est que "italic" et "oblique" reviennent au même. Choisissez donc l'un des deux ^^
* normal : le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique. Par exemple, si vous voulez que les textes entre < em > ne soient plus en italique.


La propriété CSS pour mettre en gras est font-weight, et prend les valeurs suivantes :

* bold : le texte sera en gras.
* normal : le texte sera écrit normalement (par défaut).



Commençons par la propriété font-variant, toute simple, qui prend uniquement 2 valeurs différentes :

* small-caps : le texte sera écrit en petites capitales.
* normal : le texte sera écrit normalement (par défaut).


il y a une seconde propriété CSS qui travaille sur les majuscules elle aussi : text-transform. Elle peut prendre ces valeurs :

* uppercase : tout le texte sera écrit en majuscules.
* lowercase : tout le texte sera en minuscules.
* capitalize : la première lettre de chaque mot sera en majuscules.
* none : pas de transformation (par défaut).

Un peu de déco ?

Cette propriété CSS porte bien son nom : text-decoration
* underline : souligné.
* line-through : barré.
* overline : ligne au-dessus.
* blink : clignotant. Attention, cette propriété ne marche pas sous Internet Explorer. Elle fonctionne en revanche bien sur tous les autres navigateurs, dont Mozilla Firefox.
* none : normal (par défaut).

Les couleurs

La notation hexadécimale
Un nom de couleur en hexadécimal, ça ressemble à ça : #FF5A28. Pour faire simple, c'est une combinaison de lettres et de chiffres qui indiquent une couleur.

La méthode RGB
Que signifie RGB ? En anglais, Rouge-Vert-Bleu s'écrit Red-Green-Blue, ce qui s'abrège en "RGB". Comme pour la notation hexadécimale, on doit définir une quantité de rouge, de vert et de bleu pour choisir une couleur.
La couleur de fond
Pour indiquer une couleur de fond, on utilise la propriété CSS background-color.

L'image de fond
La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on doit lui mettre url("nom_de_l_image.png"). Par exemple :
background-image:url("fond.png");
> Si on veut appliquer une image de fond à toute la page, on doit là encore utiliser la balise <body> .

La propriété concernée répond au doux nom de background-attachment et peut prendre 2 valeurs :
* fixed : l'image de fond reste fixe.
* scroll : l'image de fond défile avec le texte (par défaut).


La première d'entre elle est celle qui gère la répétition de l'image de fond. Cette propriété s'appelle background-repeat et peut prendre ces valeurs :

* no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page.
* repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement.
* repeat-y : le fond sera répété uniquement sur la première colonne, verticalement.
* repeat : le fond sera répété (par défaut).


On peut indiquer où doit se trouver l'image de fond avec background-position. Cette propriété n'est intéressante que si vous avez mis "background-repeat: no-repeat;" (un fond qui ne se répète pas).

top : en haut.
bottom : en bas.
left : à gauche.
center : centré.
right : à droite.

Par exemple, pour aligner une image en haut à droite, vous taperez :background-position: top right;