tutorial XHTML/CSS
Langage HTML
Pré requis :
- Vous devez savoir ce qu’est un format de fichier ou une extension de fichier
- Savoir afficher et modifier l’extension de fichier
- de préférence Connaître comment fonctionne une URL
LE HTML est un langage de balise qui permet d'afficher un contenue statique
ce contenue pourra être principalement des images, des liens, des paragraphes, des sons, je pourrai cité aussi des cases a cochée, des champ ou l’ont pourra renseigner des information ou même des bouton pour envoyer un fichier mais le problème c’est que pour utiliser ces élément la il faudrai introduire le langage PHP pour traiter ces information donnée donc faite attention au limite du html qui SEUL ne fournis aucun contenue dynamique.
La Balise
On dit que c’est un langage de balise mais a quoi ressemble une balise ? :
Par exemple je veux dire au navigateur que je vais écrire du code html alors j’utiliserai une balise html comme ceci <HTML> Tout ce qui écrit après cette balise sera du html et pour indiqué au navigateur la fin du code html nous ajouterons un slash </HTML>
Un autre exemple : imaginons que je veux centrer mes éléments html (images, texte…) j’écrit la balise <CENTER> donc tout ce que j’écrit ici sera centrer puis pour délimité jusqu’où l’ont ne centre plus on utilise une balise de fermeture avec le slash au début </CENTER>.
Nous venons de voir ce que représente une balise mais il existe une dernière balise qui ce termine a l’endroit même ou elle a commencer par exemple il serais complètement inutile pour la balise de retour a la ligne de précisé où le retour a la ligne s’arrêtera, regardez bien le slash n’est pas au même endroit <BR/> . Petite précision, les balises que j’ai écrites sont en majuscule mais vous pouvez très bien le écrire en minuscule.
Code Minimal
Le code minimal pour commencer une page html :
<html>
<head>
</head>
<body>
</body>
</html>
En tête de page
L’entête du document est représenter par les balises head perméttant de données des information relatif au document comme : la page est française ou si on a besoins de tel ou tel feuille en plus pour afficher correctement la page ou bien pour les information pour le moteur de recherche ect… . et si vous avez compris le principe de ce langage, il faudra ecrire tout cela entre <head> et </head>
Corp de Page
La balise body représente ce que l’ont doit voir c’est la page web en elle-même.
Afficher une Phrase
Par exemple je veux afficher un phrase sur ma page blanche par défaut alors il suffit de faire comme ça :
<html>
<head>
</head>
<body>
Une phrase affiché sur une page blanche !
</body>
</html>
Teste du Code
Pour tester ce code il faut creer un fichier texte au format .txt et changer son extension .txt en .html. Ce fichier devra être modifier avec un éditeur de texte comme bloc note mais je préférer largement un éditeur de texte spécialisé programmation comme notepad++
Une fois ce texte enregistrer toujours avec l’extension .html vous pouvez le lancer avec votre navigateur (firefox, internet explorer, safari, chrome ect…)
Vous verrez la phrase s’afficher sur fond blanc.
Retour a la Ligne
Essayer de faire un retour a la ligne comme ceci :
<html>
<head>
</head>
<body>
Une phrase affiché sur <br/>
une page blanche !
</body>
</html>
N’oublier pas de bien enregistrer la modification du texte ou code source puis actualiser votre page web.
Là si vous avez inséré la balise <br/> , enregistrer la fichier .html et rafraîchi votre page web, vous devriez voir la phrase avec un retour a la ligne.
Couleur en CSS
Nous allons maintenant nous amuser a changer la couleur de la page , j’avais expliquer plus haut que body représentai notre page web donc si j’attribut un style a cette balise je devrai voir ma page utiliser ce style (quand je parle de style c’est de la mise en forme utilisant le langage CSS)
Pour paramétrer une balise html on utilise des attributs, pour l’exemple qui va suivre, le seul attribut qui nous intéresse est l’attribut style qui permet d’insérer du code css.
Voici un exemple d’arrière plan (background-color) orange (en anglais) et la couleur du texte (color) en bleu (aussi en anglais)
<html>
<head>
</head>
<body style="background-color:orange; color:blue;">
Une phrase affiché sur <br/>
une page orange !
</body>
</html>
Attention au point virgule il faut séparer les commandes comme en c++ ou java
Vous pouvez retrouvez ces fonctions css de niveau 1 a cette adresse :
http://www.w3.org/TR/REC-CSS1/
Il existe 3 façon de coder ces couleurs :
-écrire le nom de la couleur désirer
-écrire la fonction RGB avec des valeurs décimales limitées jusqu'à 255 par couleur
Exemple :
RGB(0,255,0) ici la couleur verte sera afficher au maximum
-écrire en hexadécimal
Exemple :
#00FF00 ici la couleur verte sera afficher au maximum
le Lien
Passons a la balise de lien qui permet de ce diriger dans un site en passant d’une page a une autre. Cette balise c’est : <a></a> , entre ces balises on met ce qui va nous permettre de cliquer dessus. Dans notre exemple on utilisera le mot clic mais vous pouvez mettre le mot que vous voulez. On utilisera aussi l’attribut HREF pour dire vers quelle adresse ce diriger.
<html>
<head>
</head>
<body style="background-color:orange; color:blue;">
<a href="http://www.google.fr" >Clic</a>
</body>
</html>
Vous venez de voir comment allez sur google mais concrètement Quand l’on créer notre propre site web nous devon faire le lien entre les différentes pages que nous avons créer.
Exemple :
<html>
<head>
</head>
<body style="background-color:orange; color:blue;">
<a href='page2.html' >Clic vers la page2</a>
</body>
</html>
copier et enregistrer ce code dans un fichier nommé page1.html
ensuite
<html>
<head>
</head>
<body style="background-color:black; color:white;">
<a href='page1.html' >Retour vers la page1</a>
</body>
</html>
Copier et enregistrer ce code dans un fichier nommé page2.html
Tester la page1.html et vous pourrez allez de la page1 vers la page2
L’image
La balise image est comme ceci : <IMG/>
C’est une balise qui commence là où elle ce fini
Pour paramétrer cette balise nous avons besoins essentiellement de l’attribut SRC comme source qui permet d’afficher l’image demander. Prenez une image pas trop grande et copier la a coté de votre page html de préférence au format gif , png ou jpg. Dans mon exemple remplacez image.jpg par le nom de votre image avec l’extention.
Exemple :
<html>
<head>
</head>
<body style="background-color:orange; color:blue;">
<IMG SRC="Image.jpg" />
</body>
</html>
La taille :
En CSS on peut changer la taille de l’image avec width ou heigth
Exemple :
<html>
<head>
</head>
<body style="background-color:orange; color:blue;">
<IMG SRC="Image.jpg" STYLE="width:50px;" />
</body>
</html>
Là si vous avez testé, vous avez due voir que l’image est petite comme une icône de grande taille car l’image fait 50 pixels horizontaux (px) sur 50 pixel vertical. Si l’on ne définis pas la taille vertical avec height alors l’image restera proportionnelle a elle-même.
Autre exemple avec height :
<html>
<head>
</head>
<body style="background-color:orange; color:blue;">
<IMG SRC="Image.jpg" STYLE="width:50px; height:150px;" />
</body>
</html>
La normalement l’image est complètement déformer.
On peut aussi la décaler du bord de l’écran grâce a la marge.
magin-top pour la marge du haut
margin-left pour la marge de droite
Exemple :
<html>
<head>
</head>
<body style="background-color:orange; color:blue;">
<IMG SRC="Image.jpg" STYLE="width:50px; height:150px; margin-left:300px; margin-top:300px;" />
</body>
</html>
L’image cliquable
Rien de compliquer, en faite vous avez déjà les connaissance, il suffit de mettre la balise <IMG> entre les balise de lien <a></a>
Pour faire une image GOOGLE cliquable,
Telecharger l’image a cette adresse :
http://dream3d.informatique.free.fr/Data/images/bouton3.PNG
et copier la a coté de votre fichier html
<html>
<head>
</head>
<body style="background-color:black; color:white;">
<A href="http://www.google.fr">
<IMG SRC="bouton3.PNG" />
</A>
</body>
</html>
Le Menu
Nous allons faire un menu sans passer par les balise <UL><LI> car nous n’avons pas encore ces connaissances.
Nous allons faire simple, il suffit de coller a la suite plusieurs images que nous rendron cliquable comme l’exemple du dessus avec google.
Télécharger les images a cette adresse :
http://dream3d.informatique.free.fr/Data/images/bouton1.PNG
http://dream3d.informatique.free.fr/Data/images/bouton2.PNG
http://dream3d.informatique.free.fr/Data/images/bouton3.PNG
Je vais ajouter le bouton yahoo et ebay il suffi de rajouter :
<a href= l’url yahoo>image du bouton yahoo</a>
<a href= l’url ebay>image du bouton ebay</a>
Exemple :
<html>
<head>
</head>
<body style="background-color:black; color:white;">
<A href="http://fr.yahoo.com">
<IMG SRC="bouton1.PNG" />
</A>
<A href="http://www.ebay.fr">
<IMG SRC="bouton2.PNG" />
</A>
<A href="http://www.google.fr">
<IMG SRC="bouton3.PNG" />
</A>
</body>
</html>
Il manque le centrage du menu, on peut utiliser la balise <center></center>
<html>
<head>
</head>
<body style="background-color:black; color:white;">
<center>
<A href="http://fr.yahoo.com">
<IMG SRC="bouton1.PNG" />
</A>
<A href="http://www.ebay.fr">
<IMG SRC="bouton2.PNG" />
</A>
<A href="http://www.google.fr">
<IMG SRC="bouton3.PNG" />
</A>
</center>
</body>
</html>
La balise div
Pour l’instant notre menu est constituer de plusieurs images indépendantes les une des autres
Pour que notre menu soit considéré comme un ensemble d’image pouvant ne faire qu’un élément HTML alors, je dois insérer mes images ou autre élément html entre les balises <div></div> et l’identifier par un mot unique grâce a l’attribut ID.
<html>
<head>
</head>
<body style="background-color:black; color:white;">
<center>
<div style="width:800px; height:50px; background-color:white;">
<A href="http://fr.yahoo.com">
<IMG SRC="bouton1.PNG" />
</A>
<A href="http://www.ebay.fr">
<IMG SRC="bouton2.PNG" />
</A>
<A href="http://www.google.fr">
<IMG SRC="bouton3.PNG" />
</A>
</div>
</center>
</body>
</html>
J’ai mis en blanc (white) notre menu pour bien voir la place qu’il occupe et j’ai l’est agrandit en largueur (width), parce que par défaut , la taille de notre div menu serai aussi grande que la taille total des images donc nous ne verrions pas quelle effet aurai été ajouter.
Pour améliorer l’exemple j’ai ajouter une bordure rouge a notre div
Exemple :
<html>
<head>
</head>
<body style="background-color:black; color:white;">
<center>
<div style="width:800px; height:50px; background-color:white; border-style:solid;
border-width:5px; border-color:red;">
<A href="http://fr.yahoo.com">
<IMG SRC="bouton1.PNG" />
</A>
<A href="http://www.ebay.fr">
<IMG SRC="bouton2.PNG" />
</A>
<A href="http://www.google.fr">
<IMG SRC="bouton3.PNG" />
</A>
</div>
</center>
</body>
</html>
Le Formulaire
Attention un formulaire doit être afficher / créer grâce au langage HTML mais ne pourra pas fonctionner car il doit être analyser /traiter grâce au langage PHP c’est pour c’est raisons la que l’attribut Name et Value serons le moin possible utilisé
Voici les éléments que nous allons voir pour créer un formulaire :
-un champ pour saisir son nom
- un bouton de validation
-un champ pour entrer un mot de passe
-une case a coché
-une liste de choix
-un champ de texte
Tout ces élément que je viens de cité devra être écrit entres ces balises <form></form>
qui représente un formulaire
Un champ pour saisir son nom :
Exemple :
<html>
<head>
</head>
<body style="background-color:black; color:white;">
<form>
Entrer votre nom :<input />
</form>
</body>
</html>
Un bouton de validation
Il suffit juste de créer input avec un type submit
L’attribut value va nous permettre d’écrire dans ce bouton
Vous pouvez tester aussi l’attribut value dans un input text
Exemple :
<html>
<head>
</head>
<body style="background-color:black; color:white;">
<form>
Entrer votre nom :<input type="text" /><br/>
<input type="submit" value="Valider" />
</form>
</body>
</html>
Un champ pour entrer un mot de passe
la c’est pareil que ce que l’on viens de faire il suffit de changer le type text en password
Exemple :
<html>
<head>
</head>
<body style="background-color:black; color:white;">
<form>
Entrer votre mot de passe :<input type="password" /><br/>
<input value="Valider" />
</form>
</body>
</html>
Une case a coché plusieurs choix
Même principe pour la case a coché, remplacer password par checkbox
Exemple :
<html>
<head>
</head>
<body style="background-color:black; color:white;">
<form>
cochez a volonter :<br/>
<input type="checkbox" /><br/>
<input type="checkbox" /><br/>
<input type="checkbox" /><br/>
<input type="submit" value="Valider" />
</form>
</body>
</html>
Une case a coché un seul choix
Exemple :
<html>
<head>
</head>
<body style="background-color:black; color:white;">
<form>
cochez une seul case :<br/>
Choix1 : <INPUT ><br/>
Choix2 : <INPUT ><br/>
Choix3 : <INPUT ><br/>
Choix4 : <INPUT ><br/>
</form>
</body>
</html>
Normalement l’attribut NAME est obligatoire pour récupérer les valeurs de tel ou tel champ en php. Pour l’exemple ci dessus il est aussi obligatoire car cela permet de savoir a quelle question appartiens chaque radio
Une liste de choix
là par contre nous n’avons plus besoin de mettre l’attribut NAME a Chaque fois car la balise
<select></select> regroupe toute nos option dans le même NAME c’est quand même plus logique.
Exemple :
<html>
<head>
</head>
<body style="background-color:black; color:white;">
<form>
<SELECT name="Groupe2">
<OPTION >2000</OPTION>
<OPTION >2001</OPTION>
<OPTION >2003</OPTION>
<OPTION >2004</OPTION>
<OPTION >2005</OPTION>
<OPTION >2006</OPTION>
<OPTION >2007</OPTION>
<OPTION >2008</OPTION>
<OPTION >2009</OPTION>
<OPTION >2010</OPTION>
</SELECT>
</form>
</body>
</html>
Un champ de texte
Il permet de saisir du texte sur plusieurs lignes, il prend en compte la touche entrer pour le retour a la ligne. La taille est fixe mai on peut l’agrandir grâce a l’attribut ROWS pour sa taille en hauteur et COLS pour sa taille en largueur
<html>
<head>
</head>
<body style="background-color:black; color:white;">
<form>
<TEXTAREA rows="10" cols="105" >
Tapez ici votre texte
</TEXTAREA>
</form>
</body>
</html>
Le Tableau
La balise sera <TABLE></TABLE>
Pour faire une séparation de ligne on utilise :
<TR></TR>
Pour faire une séparation de colonnes on utilise :
<TD></TD>
Exemple d’un tableau sur une seul ligne :
<html>
<head>
</head>
<body style="background-color:black; color:white;">
<form>
Tableau de colonnes;<br/>
<Table style=" background-color:red;">
<td style="background-color:orange;">appartement1</td>
<td style="background-color:orange;">appartement2</td>
<td style="background-color:orange;">appartement3</td>
</Table>
</form>
</body>
</html>
Exemple complet d’un tableau sur plusieurs lignes :
<html>
<head>
</head>
<body style="background-color:black; color:white;">
<form>
Tableau complet<br/>
<Table style=" background-color:red;">
<tr>
<td style="background-color:orange;">etage2 appartement1</td>
<td style="background-color:orange;">etage2 appartement2</td>
<td style="background-color:orange;">etage2 appartement3</td>
</tr>
<tr>
<td style="background-color:orange;">etage1 appartement1</td>
<td style="background-color:orange;">etage1 appartement2</td>
<td style="background-color:orange;">etage1 appartement3</td>
</tr>
<tr>
<td style="background-color:orange;">RDC appartement1</td>
<td style="background-color:orange;">RDC appartement2</td>
<td style="background-color:orange;">RDC appartement3</td>
</tr>
</Table>
</form>
</body>
</html>
Code Minimal Mis au norme W3C
Pour être plus précis, si vous ne respecter pas un minimum les normes pour fabriquer un site web, les navigateurs vont interpréter le code de votre page web, de manière inattendu ce qui rendra votre page incompatible entre les différents navigateurs. Je vous montre le code minimal imposé par le w3c.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>
</html>
Nous retrouvons toujours nos balises html head et body par contre, il y a une étrange balise au tout début du code,
On dit que c'est le doc type, c'est cette balise qui indique au navigateur, la norme que vous avez respecté, ainsi le navigateur sera obliger d'interpréter au mieux votre code selon les normes du W3C. Quand vous commencer a bien vous débrouiller, rappelez vous de ceci.