Cours sur le langage HTML.
Plan
Le langage HTML
le lien vers les supports de cours de Fabien Torre sur le langage HTML.
Qu'est ce que l'HTML?
HTML est le langage de balisage hypertexte utilisé dans le Web (HyperText Markup Language).
Ce n'est pas un langage de programmation proprement dit.
Ce sont "simplement" des balises pour mettre en forme (avec des liens, en tableau, etc ) du texte et des images.
Pour avoir une idée de l'aspect d'une page écrite en HTML, cliquez sur "Affichage" (ou "View") dans votre navigateur, puis sélectionnez "page source".
Qu'est ce qu'une balise?
Une balise est une "instruction" comprise entre crochets < > qui possède un nom et parfois des attributs.
<br> est, par exemple, la balise utilisée pour spécifier qu'il faut passer à la ligne.
La plupart des balises doivent être ouvertes puis refermées.
On retrouvera donc souvent une balise de début et une balise de fin.
La balise de fin porte le même nom que la balise de début mais est en plus précédée du signe /.
Nous aurons donc: (ouverture) <nom_de_balise> et (fermeture) </nom_de_balise>.
Par exemple: <b>mon texte en gras (bold)</b>.
Le nom de la balise (contenu entre les crochets) n'est pas sensible à la casse:
il peut être écrit indifféremment en majuscule, en minuscule ou en un mélange des 2.
L'attribut d'une balise est défini comme suit: nom_attribut="valeur"
Par exemple, la balise utilisée pour faire un lien a pour nom "a", et pour nom d'attribut "href".
Ainsi, <a href=""></a> permet de faire un lien vers la page principale du site de Google.
Dans ce cas, la valeur de l'attribut "href" est donc "".
De quoi avez-vous besoin ?
Pour créer une page Web en HTML, vous avez besoin de:
Présentation des balises usuelles
le lien vers des tutoriaux sur les balises de base.
Votre premier document
Explications des nouvelles balises utilisées:
Balises simples
Exemple
En tapant ça:
<center> <b> <u> Mon texte </u> </b> <br> Et la suite </center>
Vous obtenez ça:
Mon texte
Et la suite
Les commentaires
<!-- ceci est un commentaire dans mon fichier HTML -->
<!-- il n'apparaitra donc pas dans le texte de mon document -->
Balises de mise en forme
La balise de couleur
<font color="red">Mon texte</font>
<font color="#FF0000">Mon texte</font>
Le premier exemple est utilisable pour quelques couleurs prédéfinies: red, green, black
Sinon, vous pouvez utiliser le code commençant par #, basé sur le système "RGB" (Red-Green-Blue):
Par exemple, si vous voulez obtenir du rose, mélange du rouge et du bleu, tapez <font color="#FF00FF">Mon texte</font>
Choisissez vos couleurs à partir du suivant
La balise de taille
Les listes
En tapant ça:
<UL>
<LI> Ligne 1
<LI> Ligne 2:
<OL>
<LI> Sous-Ligne 2.1
<LI> Sous-Ligne 2.2
</OL>
</UL>
Vous obtenez ça:
? Ligne 1
? Ligne 2
Explication:
Enfin, vous pouvez également spécifier les types de numérotations ou de puces utilisées:
? <ul type="disc">
? <ul type="disc">
? <ul type="circle">
? <ul type="circle">
? <ul type="square">
? <ul type="square">
Les tableaux
Par exemple en tapant ça:
<table>
<caption>Mon titre</caption>
<tr>
<th>Nom 1
<th>Nom 2
</tr><tr>
<td>Cellule 1
<td>Cellule 2
</tr>
</table>
Vous obtenez ça:
| Mon titre | |
| Nom 1 | Nom 2 |
| Cellule 1 | Cellule 2 |
Options de la table:
Exemple
En remplaçant la balise <table> de l'exemple précédent par: <table border=1 cellpadding=2 cellspacing=5>, vous obtenez ça:
| Mon titre | |
| Nom 1 | Nom 2 |
| Cellule 1 | Cellule 2 |
Options des cellules:
Images et références
Les images
<IMG SRC="chemin_d_acces_a_l_image">
Attributs:
Les liens hypertextes
<A HREF="chemin_d_acces_a_la_page">Texte du lien</A>
Liens à l'intérieur d'une même page:
Les chemins d'accès
Les chemins d'accès peuvent être:
Dans ce cas:
Par exemple, dans votre répertoire nommé "site" se trouve un répertoire nommé "images" et un fichier nommé "".
Dans le fichier "", vous voulez faire référence à l'image nommée "" du répertoire "images".
La référence se fait alors comme suit: <img src="">
Maintenant, vous êtes dans un fichier du répertoire "images" et vous voulez faire référence à votre fichier "".
Alors la référence se fait comme suit: <a href="">Ma ref</a>
Options de la balise body
Nous avons maintenant assez d'éléments pour introduire les principales options de la balise body:
Organisation du texte
Les paragraphes
<p> bla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla bla</p>
<p align=justify> bla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla blabla blablabla blabla blablablabla blabla bla</p>
<p align=left>bla blablabla blabla blablablabla blabla bla</p>
<p align=center>bla blablabla blabla blablablabla blabla bla</p>
<p align=right>bla blablabla blabla blablablabla blabla bla</p>
L'indentation
<blockquote></blockquote>
<blockquote><blockquote></blockquote></blockquote>
Les titres
de <H1> à <H6>:
<H1>Mon texte</H1>
<H2>Mon texte</H2>
<H3>Mon texte</H3>
<H4>Mon texte</H4>
<H5>Mon texte</H5>
<H6>Mon texte</H6>
Les séparateurs
<HR>
<HR width="50%">
Les caractères spéciaux
Les caractères tels < et > étant interprétés par votre navigateur comme marqueurs de balises, comment faire pour les afficher dans un texte sans qu'ils ne soient interprétés?
Pour cela, il existe les caractères spéciaux. Ceux-ci commencent par le signe "&" et finissent par un point-virgule ";".
Ainsi, par exemple, il faut taper > pour obtenir le signe >.
Cette liste est également utile pour afficher des caractères n'existant pas sur notre clavier.
Ainsi, par exemple, pour obtenir le caractère €, il faut écrire €
une liste des caractères spéciaux en HTML.
Les frames
<FRAMESET> et <FRAME>
Exemple
<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET COLS="250,*">
<FRAME SRC="">
<FRAME SRC="" NAME="pagePrincipale">
<NOFRAMES>
<H1>No Frames? No Problem!</H1>
Take a look at our <A HREF="">no-frames</A> version.
</NOFRAMES>
</FRAMESET>
</HTML>
Référence entre pages
Si maintenant vous voulez qu'en cliquant sur un lien de la page "menu", ce soit la page "pagePrincipale" qui soit modifiée, vous écrivez:
<a href="maReference" target="pagePrincipale">
Map, area et images réactives
<img src="" usemap="#mymap" width="300" height="50">
<map name="mymap">
<area shape="rect" coords="0,0,100,50" href="" alt="zone 1">
<area shape="rect" coords="100,0,200,50" href="" alt="zone 2">
<area shape="rect" coords="200,0,300,50" href="" alt="zone 3">
</map>
3 types de formes peuvent être utilisées :
Exercice 1
Ecrire le code HTML permettant d'obtenir ceci:
BIG TITRE
Une petite intro
Ma liste de refs:
? Générale:
? Relative:
Et mon tableau:
| Titre | Texte 1 | Texte 2 | ||
| Texte 3 | Texte 4 | Texte 5 | ||
Exercice 2
Créez votre CV en HTML.
Le minimum qui doit y figurer est:
le but étant de simultanément:
HTML reste aujourd'hui le langage de publication sur le web par excellence.
Cependant, on note l'abandon des balises de pure mise en page, celles-ci étant avantageusement remplacées par les feuilles de style.
Celles-ci permettent de définir globalement les mises en page à effectuer. Ainsi, il est recommandé de ne plus utiliser de balises comme FONT, B, I, etc
De manière générale, les balises HTML ne doivent être utilisées que pour structurer le document, et non plus pour préciser son apparence.
Les feuilles de style CSS
le lien vers les supports de cours de Fabien Torre sur les feuilles de style CSS.
Et la feuille de style utilisée pour cette page.
Principe
L'idée de l'utilisation de feuilles de style (en anglais Cascading Style Sheets (CSS)) est de dissocier le contenu d'un document de sa mise en forme.
Les intérêts de cette séparation sont nombreux :
La feuille de style est donc un fichier externe à vos pages HTML. Ce fichier doit avoir comme extension .css
Et pour spécifier qu'une page HTML utilise une certaine feuille de style (qu'on nomme ici ), on écrit ceci dans l'en-tête de la page HTML (balises head):
<link rel="stylesheet" type="text/css" href="">
Remarque: les navigateurs gèrent souvent une même feuille de style de manière différente
Après avoir écrit une feuille de style, il conviendra donc de vérifier l'apparence du document avec un maximum de navigateurs.
Enfin, et surtout, il faut s'assurer impérativement que le document reste lisible même sans la feuille de style.
Utilisation
La syntaxe générale dans une feuille de style est la suivante:
nomClasse{
nomAttribut1: valeur1;
nomAttribut2: valeur2;
etc
}
Les commentaires sont inclus entre /* et */
Par exemple:
H1{
font-size: 20pt;
text-align: center;
text-decoration: underline;
color: red;
}
va permettre de définir que tout titre H1:
Liste des propriétés CSS
Une liste complète des propriétés CSS est accessible .
Voici une liste des plus utilisées: on présente ici d'abord le nom de l'attribut, sa signification, puis la liste de ses valeurs possibles:
Exemples
Pour définir de façon globale la mise en forme du corps du document:
body{
background-color: #CCFFCC;
font-size: 11pt;
color: #000000;
font-family: Helvetica, Arial, sans-serif;
}
Pour définir de façon globale la mise en forme des liens hypertextes:
A:link{
text-decoration: none;
color: #0000FF;
background-color: inherit;
}
Exercices sur les feuilles de style
Modifier vos pages précédemment créées en utilisant les feuilles de style.
Pour cela, vous pouvez utiliser les interfaces écrites par Dominique Gonzalez et récupérer les différents styles pour les inclure dans vos propres pages :
