Projet de Raphaël

Cours de création de site web

Le langage HTML :

HTML est l'abréviation de HyperText Markup Language, qui peut être traduit par "langage de balisage dhypertexte". Cest un langage de description de document qui se présente sous la forme d'un langage de balisage. Il permet décrire de lhypertexte, et ainsi de créer des pages web.

Le HTML a été développé par le britannique Tim Berners-Lee, connu comme étant le principal inventeur du World Wide Web. C'est en 1989 que Tim Berners-Lee développe les trois principales technologies du web : les adresses web, le Hypertext Transfer Protocol (HTTP) et le HTML. Il développe aussi le premier navigateur web et le premier serveur HTTP.

Le HTML en est aujourd'hui à sa 4^ème version, et une 5^ème (le HTML 5) est en cours de développement (elle proposera encore de nouvelles balises et attributs, qui répondront mieux aux attentes d'aujourd'hui). Le HTML est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (CSS).

Concrètement, le HTML se présente comme ceci :

Le code source :
<html>
 <head>
 <title> Un titre </title>
 </head>

 <body>
Voici une phrase avec un <a href="index.html">hyperlien vers la page d'accueil</a>.

 Ceci est un paragraphe.
 </body>

</html>

Une page HTML est donc un ensemble de balises qui s'ouvrent et qui se ferment, et s'assemblent les unes aux autres pour former et afficher une page web.
Le code est tapé à la main dans un logiciel de traitement de texte (léger de préférence) et est enregistré en format .html. Cette extension va permettre d'ouvrir ce même fichier dans un navigateur internet qui va interpréter le code source et le "transformer" en page web.

Voici ce qu'on obtient avec l'exemple donné :

Le résultat :
Voici une phrase avec un hyperlien vers la page d'accueil.
Ceci est un paragraphe.

Parmi ces balises, on peut distinguer 2 catégories : les balises inline et les balises block.
Cette distinction est importante, elle permet aux gens de bien comprendre le comportement des balises et leur rendu visuel dans la page. Par exemple, concernant l'imbrication de balises : on ne peut pas insérer une block dans une inline.

Les balises block : Ce sont des balises qui servent à structurer la page en plusieurs blocs. Avec ces balises on pourra par exemple créer une page web constituée des blocs suivant : Un titre de niveau 1 suivi d'un titre de niveau 2 puis un texte ou une citation ou encore une liste ordonnée ou désordonnée.
Ces éléments de type bloc ont la particularité de créer un retour à la ligne avant et après et occupent par défaut la largeur la plus possible et par conséquent n'autorisent pas à ce qu'un autre bloc soit placé à côté d'eux

Les balises inline : Elles ne créent pas de retour retour à la ligne, et elles se situent à l'intérieur d'un bloc comme un paragraphe ou un tableau. Par exemple la balise i qui sert à mettre en italique peut être insérée à l'intérieur d'une ligne d'un paragraphe sans provoquer un retour à la ligne. C'est le même cas pour la balise IMG, elle reste au même niveau que la ligne où elle est insérée.

Source : Lien

Les balises dont on ne voit pas d'effets visibles directement sur la page sont des balises d'en-têtes, elles sont insérées dans la balise <head>. La balise <body> est une balise qui permet d'afficher le corps de la page, tout ce qui est visible de la page doit se trouver entre ces balises. Les balises <html> <head> <title> et <body> sont les balises obligatoires, elles sont le minimum nécessaire pour afficher une page HTML.

Exemples et applications de balises HTML :

(exemples de balises)

<q>

 ou 
<h1> <h2> jusqu'à <h6>


 ou 
<center>

<blink>

<hr>
<acronym>
<blockquote>
<a href="lien"></a>
<img src="lien">
<ul> (puis <li>)
<table>

faire un retour à la ligne
faire une citation
faire un paragraphe
mettre en gras (strong est plus compatible)
balises de titres (6 niveaux de titres)
afficher des exposants (en haut)
afficher des exposants (en bas)
mettre en italique (em est mieux reconnu)
centrer
souligner
faire clignoter
mettre en petit
créer une ligne
afficher la signification d'un acronyme
faire une grande citation décalée
lien hypertexte
afficher une image
afficher des puces
afficher un tableau

Exemple d'application :

Code source :

Voici une phrase avec des mots en gras, une <q>citation</q> et un retour à la ligne. 
<center>Puis une autre, centrée, avec des mots soulignés et <blink>d'autres qui clignotent</blink>.</center> 

Enfin, une flèche est insérée dans la ligne <img src="images/fleche1.PNG"> et la fin est écrite en italique.

Ce qui donne :

Voici une phrase avec des mots en gras, une citation et un retour à la ligne.
Puis une autre, centrée, avec des mots soulignés et d'autres qui clignotent.
Enfin, une flèche est insérée dans la ligne

et la fin est écrite en italique.

Ancres et attributs :
1. Les attributs sont des informations qui viennent s'ajouter dans une balise pour la compléter, lui apporter plus de précisions.
 
 Exemple :
 
 La balise peut devenir 
 La balise <body> peut se compléter par <body bgcolor="white" text="black">
 Ou encore la balise <img> peut contenir <img src="image" alt="légende de l'image" title="titre de l'image">
2. Les ancres sont des indicateurs de destination de la page. Concrètement, ce sont des marqueurs que l'on place quelque part sur une page qui vont nous permettre d'y retourner directement via un lien hypertexte (comme si on avait jeté une ancre de bateau à un endroit donné pour pouvoir y retourner plus tard). Une ancre peut mener à un endroit précis de la page actuelle, mais aussi à un endroit précis d'une autre page du site.
 
 Exemple :
 
 J'ai inséré sur cette page une ancre dans le titre des exemples de balises.
 J'ai procédé ainsi : . L'ancre est nommée exemple et sera l'indicateur à donner dans un lien hypertexte.
 
 Voici le lien hypertexte : <a href="#exemple">Aller aux exemples de balises</a>, ce qui donne : Aller aux exemples de balises
 
 Pour rejoindre une ancre d'une autre page, il faudra noter :
 <a href="autrepage.html#exemple">
 
 Ce sont les ancres qui permettent de retourner en haut de la page via la flèche en bas de chaque page.