Oltana.net - [Programmation] HTML.

Introduction

Le XHTML est un langage permettant de créer un site web : on y met le contenu de son site, avec une mise en page basique (pas de couleurs, de positionnement précis,?. : pour une mise en forme plus complexe, il faut utiliser le CSS). C'est un système de balises, entre lesquelles on met ses textes / images.
Pour créer sa page .html, en XHTML, on peut utiliser le blocnote, où l'on tapera son code puis on enregistrera avec l'extension .html, ou des logiciels spéciaux comme Notepad ++(gratuit) ou dreamweaver (là on peut taper le code ou mettre directement en forme ses pages grâce à une interface graphique, le code est crée tout seul, mais c'est un logiciel payant), ?
Le XHTML doit répondre à certaine normes, pour que le langage soit le même pour tous (plus d'infos : en anglais ou en français).

Différents types de balises et attributs.

-Les balises sont des marqueurs.

-Elles peuvent étre seules (souvent pour insérer quelque chose dans la page) : <balise /> ou par paires (les plus courantes) : <balise>.......</balise>.

-Balises block et inline : les balises block créent de réels blocs que l'on pourra positionner, matérialiser avec des bordures,.... avec retour à la ligne avant et après, et possibilité d'imbriquer des blocs dans d'autres.
les balises inline concernent surtout le style (taille, type de police,?), elles ne sont ni précédées ni suivies d'un saut de ligne.

Néammoins on pourra avec CSS transformer une balise inline en block et inversement, selon ce qu'on veut faire et les parties que l'on veut regrouper en blocs.

-Les attributs sont des informations ajoutées à une balise, de cette façon : <balise attribut1="valeur" attribut2="valeur"?.>, ils peuvent être un titre, une dimension, ?

Structure du code

Structure générale, les premières et dernières lignes seront :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>

</body>
</html>

Signification :

Dans <head> :
-Le "titre" (à remplacer par le titre qu'on veut) entre <title> s'affichera dans la barre de titre.

-Si on utilise un document.css pour le graphisme du site, ajouter

Code:

en remplaçant "exemple" par ce qu'on veut et "adresse.css" par le repertoire ou se trouve le .css.

Nous écrirons nos lignes de code entre les balises <body>.

Balises, signification et effet.

Les balises permettent d'indiquer à quoi correspondent les textes, et de faire une mise en page basique. Elles servent aussi de références dont on se servira pour le CSS : les changements s'appliqueront à certaines balises.

Voici une liste des balises les plus utiles, et avec lesquelles on peut déjà faire beaucoup.

Présentation : <balise>, à quoi elle sert (ce qu'elle fait).
Si la balise n'est pas de la forme <balise/>, c'est à dire juste <balise> : elle doit être fermée par </balise> après son contenu.

Les attributs obligatoires sont indiqués directement dans la balises, ceux pouvant être utiles en-dessous.

Balises de base.

<p> : pour faire des paragraphes, on mettra le texte entre les deux balises.

<h1> à <h6>: pour mettre des titres, de plus au moins important -> applique une police de la plus grande à la normale.

<img src="adresse.jpg" alt="description" /> : insère une image.
Pour indiquer une adresse : on met son url si elle est sur le web, ou son repertoire sur le disque dur / ftp par rapport à celui où se trouve la page que l'on écrit : si elles sont dans le même dossier, on met juste "nom.extension" (sans préciser C:/?). C'est une balise inline : pas de retour à la ligne.

<a href="adresse.extension"> crée un lien.
"adresse.extension" =
-url
-repertoire
-"mailto:adresse@fai.fr" (par exemple pour créer un lien "pour me contacter")
-"#ancre1" : renvoie à la balise où on aura préalablement placé comme attribut id="ancre1".

: renvoie à la ligne, saute une ligne si déjà en début de ligne.

Balises de style

A mettre autour du texte que l'on veut changer ou dont on veut préciser la nature.

[/b] : texte barré.

[/b] : texte souligné.

<code> : pour du code de programmation, réduit la police et augmente l'espacement entre les lettres.

<var> : pour une variable dans un code, met en italique.

<adress> : pour indiquer une adresse (nom, numéro, rue, code postal, ?.), met en
italique.

<q> : petite citation, met des guillemets.

<cite> : citation plus longue, met en italique.

[
/b] : longue citation, crée un bloc en retrait (balise block).

<sup> : met en exposant.

<sub> : met en indice.

<small> : écrit en plus petit que le reste.

<big> : ecrit en plus gros que le reste.

<center> : centre le texte sur la page.

<dfn> : pour une définition, met en italique.

[/b] : texte un peu important, met en italique.

<strong> : texte important, met en gras.

[/b][/color] : trace une ligne horizontale.

Balises pour faire une liste.

Liste non ordonnée : chaque ligne commence par une puce (rond noir par défaut) :
<ul> en début de liste, <li> pour chaque élement

Code:

<ul>
<li> element1 </li>
<li> element2 </li>
<li> element3 </li>
</ul>

Liste ordonnée : commence par 1., 2., 3., ?..
Remplacer <ul> de la liste non-ordonnée par <ol>.

Liste de définitions : <ul> remplacé par <dl>, <li> remplacé par <dt> pour le mot à définir et <dd> pour sa définition : la définition sera placée à la ligne suivante et en retrait.

Balises pour faire un tableau.

Sans CSS, les tableaux n'auront pas de bordures.
Délimité par <table>,
<tr> définit chaque ligne,
<td> chaque cellule (<th> pour la ligne d'en tête),
<caption> donne le titre :

Code:

<table>
<caption>Grands monuments</caption>
<tr>
<th>monument</th>
<th>lieu</th>
</tr>

<tr>
<td>tour eiffeil</td>
<td>paris</td>
</tr>

<tr>
<td> big ben</td>
<td> londres </td>
</tr>
</table>

Donnera :

Grands monuments

monument_lieu
tour eiffel__paris
big ben___londres

Pour fusionner deux cellules : attribut colspan="nb de colonnes à fusionner" sur <td> pour fusion horizontale, ou rowspan="nb" pour verticale :

Code:

<table>
<caption>Grands monuments</caption>
<tr>
<th>monument</th>
<th>lieu</th>
</tr>

<tr>
<td>tour eiffeil</td>
<td>paris</td>
</tr>

<tr>
<td colspan="2"> cellule fusionnée</td>
</tr>
</table>

Balises universelles.

Ce sont des balises sans foncion particulière, sans attribut elles ne font rien :
<div>, balise bloc, on s'en sert pour crée un bloc et lui donner une classe : <div class = "class1">, que l'on pourra ensuite modifier en CSS.

<span>, idem mais version inline : pour donner une classe à un groupe de mot (pas de saut de ligne) et pouvoir le modifier.

Autres.

<applet> pour mettre un applet java.

<acronym title="titre"> texte </acronym> souligne "texte" en pointillés et affiche bulle d'aide avec "titre" quand on pointe la souris sur "texte".

Idem pour <abbr> (sert à donner la signification des abbréviations).

Attributs.

Certains attributs peuvent être appliqués à toutes les balises :

class="nom" : juste utile pour le CSS.

id="nom" : comme "class", mais on ne peut se servir du nom qu'une seule fois.

langue="fr" : indique la langue, "de" pour allemand, "en" pour anglais. Sert pour les moteurs de recherches, c'est donc bien d'indiquer le changement de langue dans un code qui en comporte plusieurs.

title="titre" : pour décrire l'élement de la balise.

==>Voilà de quoi, je pense, maîtriser les bases du XHTML. Bien sûr sans le CSS, les possibilités au niveau graphique sont très restreintes. Un tuto sur le CSS est disponible ici.

En attendant : -Compléments sur le xhtml :
http://fr.selfhtml.org/html/index.htm
http://giminik.developpez.com/xhtml/
http://www.siteduzero.com/xhtml-css/
http://www.openweb.eu.org/xhtml/
http://www.ccim.be/ccim328/index.htm
http://www.allhtml.com/xhtml/index.php