Partie 1 : Généralités
Le langage HTML apparaît vers 1990, inventé par Berners-Lee.
HTML signifie
Le html est un langage interprété par le navigateur, il "lit" le code que vous avez écrit et affiche ce qu'il représente
Avant de commencer à écrire notre première page web, il faut que je vous présente à quoi ressemble ce fameux langage HTML. Par exemple, pour écrire "Bienvenue sur mon site !" en HTML, comment on fait ? Bah, il suffit de le taper : Bienvenue sur mon site !
Non, c'est pas si simple, mais vous verrez pas si compliqué non plus, il va nous falloir simplement "donner des indications" au langage. Ces "indications" sont en fait des balises.
Les balises sont invisibles pour le visiteur, elles servent de marqueurs pour indiquer quelque chose au navigateur. Par exemple, une balise permet d'indiquer que tel texte est le titre de votre page, cet autre texte est une citation etc etc...
Il existe 2 types de balises : certaines balises apparaissent toujours par paire, d'autres au contraire sont toutes seules.
| Les Balises |
Avant toute chose, il faut savoir qu'il existe des balises de type block et de type inline. Simplement, les balises de type block sont des balises qui, sur votre page web, crées automatiquement un retour à la ligne avant et après. Il suffit d'imaginer tout simplement un bloc. Votre page web sera en fait constituée d'une série de blocs à la suite les uns des autres. Mais vous verrez qu'en plus, il est possible de mettre un block à l'intérieur d'un autre.
Quant aux balises de type inline , elles se trouvent obligatoirement à l'intérieur d'une balise "block". Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur la même ligne (c'est pour cela que l'on parle de balise "en ligne").
Un petit schéma pour mieux visualiser :
Sur fond bleu, vous avez tout ce qui est de type block.
Sur fond jaune, vous avez tout ce qui est de type inline.
Comme vous pouvez le voir, les blocks sont les uns en-dessous des autres. La balise inline se trouve à l'intérieur d'une balise block (c'est obligatoire), et le texte vient s'insérer sur la même ligne.
Il existe 2 types de balises : les balises qui marchent par paire, <balise> </balise>, une balise ouvrante puis la balise fermante, ou bien les balises seules, ce sont les balises que l'on ferme en même temps de l'ouvrir, comme par exemple <balise />. Les balises sont des indications à la page web, ainsi avec les balises ont dit au navigateur "il faut écrire ici, j'insere une image là, etc ...".
| <p><u>attention à l'ordre de fermeture des balises.</u></p> |
| Les Attributs |
Les attributs permettent de donner des précisions sur une balise. Ils peuvent se trouver sur les balises existant par paire ou sur les balises seules. Ainsi, voyons un exemple sur chaque type de balises.
Balises seules
| <balise attribut:"valeur de l'attribut"/> |
| <img align:"center" /> |
Ici, l'attribut est align, il permet de placer l'image dans la page, dans ce cas là, l'image sera au milieu.
Balises par paire
Dans le cas des balises marchant par paire, l'attribut ne s'applique qu'à la balise ouvrante.
| <balise attribut:"valeur de l'attribut"> </balise > |
| <p color:"red"> </p > |
Ici, l'attribut est color et il permet de mettre en rouge tout ce qui se trouve entre les balises <p> et </p>.
Tout d'abord il faut savoir que tout document html commence par :
une balise <html>.
Puis on ouvre une balise <head> , dans cette balise on mettra des informations "invisibles" à l'écran, concernant des propriétés de la page.
Ensuite arrive une balise <title> cette balise vous permet d'indiquer le titre de votre page. Nous pouvons la fermer de suite comme ceci </titleE>
encore après arrivent les balises <meta> celles-ci nous ne les verront pas mais sachez qu'elles servent à donner des informations sur le document (comme l'auteur,les mots-clés pour la recherche par moteur de recherche etc ...)
Nous pouvons donc maintenant fermer la balise <head> comme ceci </head>
Maintenant la balise qui va nous permettre de mettre du contenu dans notre page <body>
et pour finir n'oublions pas de fermer les balise <body> et <html> respectivement comme cela </body> et </html> à la fin de votre page.
Exemple :
|
<html> <head> <title>le titre de votre page</title> </head> <body> </body> </html> |
Il existe dans le langage html la possibilité de commenter son code, c'est à dire donner des indications qui n'apparaitront pas à l'écran et qui ont pour but d'expliquer ce que vous faites à telle ligne par exemple.
Autre chose de très important dans le codage d'une page html, c'est l'indentation. On appelle indentation le fait "d'organiser la construction de la page", c'est à dire qu'il est préférable de décaler d'une tabulation vers la droite lorsque que l'on ouvre une nouvelle balise puis inversement lorsque l'on en ferme une. Sachez tout d'abord qu'il n'y a aucune règles à respecter en html concernant les commentaires et l'indentation, cela sert juste à avoir un code plus clair lorsque celui ci est assez conséquent et croyez moi il va vite le devenir donc prenez dès le début cette habitude qui ne coute pas très cher et vous sera très utile par la suite.
| Les Commentaires |
Les commentaires vont permettre à une autre personne de comprendre un peu mieux ce que vous avez voulu faire a tel endroit, mais en premier lieu cela va vous servir car lorsque que vous coderez plusieurs pages ou sites en même temps ou lorsque vous reprendrez le codage d'un site datant de 6 mois, vous gagnerez du temps grâce à vos commentaires, cela vous evitera de passer plusieurs minutes à essayer de comprendre ce que vous avez bien pu vouloir faire, ainsi avec vos commentaires vous saurez exactement ce que vous avez fait à cet endrtoit précis.
Un commentaire en html se fait comme ceci :
on l'ouvre ainsi <!-- et on le ferme comme cela -->
|
<html> <head> <title> le titre de votre page</title> <!-- Ceci est un commentaire --> </head> <body> </body> </html> |
Voilà je n'ai rien de plus à ajouter pour les commentaires, c'est tout ce qu'il y a à savoir et surtout abusez en !!
| L'Indentation |
Bon, pour l'indentation je crois que rien ne vaut un bon exemple alors voilà :
|
<html> <head> <title> le titre de votre page</title> </head> <body> </body> </html> |
Comme vous le voyez chaque balise ouverte dans une autre balise est décalé d'une tabulation vers la droite et chaque balise de type paire est fermée au même niveau que sa balise ouvrante. De même on ferme les balises en les décalant vers la gauche cette fois-ci.
