Notes de cours :
Technologies Moernes de
l’information et de la
communication: HTML &
CSS
Année universitaire 2020-2021
Fatima Bourebaa
LANGAGE HTML 1
1. HTML
Le HyperText Markup Language, généralement abrégé HTML ou dans sa dernière
version HTML5, est le langage de balisage conçu pour structurer et construire des pages
web. Plus précisément, il permet de coder les éléments :
– le texte de la page,
– les instructions de mise en forme,
– les appels aux aux pages liées ou les appels aux fichiers externes
Une page web est composé du texte et de balises. Une balise est une commande à
l’intention du navigateur (Chrome, Firefox, Internet explorer, Safari, …), saisie entre les
signes (<) et (>). En général, à toute balise d’ouverture (par exemple <body>) correspond
une balise de fermeture ( </body> pour le même exemple précédent) sauf pour les balises
orphelines comme <img> , <br>, <form> . La balise d’ouverture marque le début de la
commande et celle de fermeture indique sa fin. Les balises HTML ne sont pas sensibles
aux majuscules et minuscules (insensibles à la casse ou case insensitive), par exemple
<TITLE>, <Title> et <title> sont toutes correctes. Voici quelques exemples de balises:
Balise Sémantique
<b> b pour bold ou gras
<i> i pour italique
<p> paragraph
<li> list item ou élément d’une
liste
Une page web est saisie dans un éditeur de texte (bloc-notes, notepad++, sublime
texte, …) et est visualisée dans un navigateur web.
1.1 Structure d’une page web
Toute page web commence avec la déclaration <!DOCTYPE html> indiquant au
navigateur qu’il s’agit d’une page HTML5. Cette déclaration est suivie de la balise
<html> pour l’activation de l'interprète HTML.
Examinons le code source suivant:
<!DOCTYPE html>
LANGAGE HTML 2
<html>
<head>
<title>HTML</title>
</head>
<body>
<H1>Le langage HTML</H1>
Ceci est ma première page web.
</body>
</html>
On distingue deux partie majeures composant le document : l’entête et le corps. La
balise <head> indique l’entête du document HTML, partie élaborée à l’intention des
navigateurs, et la balise <body>, contenant le corps du document, destinée aux
utilisateurs web. Entre la balise de début <head> et la balise de fin </head>, on trouve les
informations sur le document courant, tels que le titre, les mots-clés que les moteurs de
recherche peuvent exploiter et d'autres données qui ne sont pas considérées comme
faisant partie du contenu du document.
Dans cet exemple, l’entête comporte une seule commande <title> pour préciser le
titre de la fenêtre dans laquelle la page s’affiche.
<head>
<title>HTML</title>
</head>
Dans la partie entête, si la balise <meta> est présente, elle permet en fonction des
options déclarées, de faciliter la recherche de la page ou de rechercher la page par certains
moteurs de recherche en se basant sur les noms des auteurs indiqués.
<head>
<title>HTML</title>
<meta name=" Keywords " content="mot-clé1[,mot-clé2,…]">
<meta name="Author" content="auteur1[,auteur2,…] ">
</head>
Dans le corps du document HTML, la balise h1 <H1>Le langage HTML</H1>
précise que le texte « Le langage HTML » est un titre de niveau 1 de notre document et
que le texte « Ceci est ma première page web » est un texte ordinaire de la page.
<body>
<H1>Le langage HTML</H1>
Ceci est ma première page web.
</body>
LANGAGE HTML 3
Si nous éditons cette page avec Notepad++
ou autre éditeur de texte, et l’enregistrons sous
[Link], et ouvrons cette page avec un
navigateur, nous obtenons le résultat suivant:
1.2 Les Titres (Headings)
Il existe 06 niveaux de titres produits par les balise de h1 à h6. <h1>définit le titre le plus
important. <h6>définit le titre le moins important.
<body>
<H1>Titre de niveau 1</H1>
<H2>Titre de niveau 2 </H2>
<H3>Titre de niveau 3</H3>
<H4>Titre de niveau 4</H4>
<H5>Titre de niveau 5</H5>
<H6>Titre de niveau 6 </H6>
</body>
ce qui produira le contenu suivant:
1.3 Les listes (Lists)
Il existe deux types de listes: les listes non numérotées (à puces) et les listes
numérotées.
LANGAGE HTML 4
• Les listes à puce : les éléments de la listes ne sont pas numérotés et sont incluses
entre les balises <ul> et </ul>.
<body>
<ul>
<li> HTML </li>
<li> CSS </li>
<li> HTML </li>
</ul>
</body>
• Les listes numérotées : cette liste est numérotée et est délimitée entre les balises
<ol> et </ol>.
<body>
<ol>
<li> HTML </li>
<li> CSS </li>
<li> HTML </li>
</ol>
</body>
les deux exemples précédents donnent le résultat:
Exercice 1:
Créer un document html contenant des listes numérotées et des listes à puce comme
illustré ci-après.
LANGAGE HTML 5
1.4 Les images
La balise <img>permet d’insérer une image dans une page HTML. Les images ne
sont pas techniquement incorporées dans une page Web; elles y sont seulement liées.
La <img>balise a deux attributs obligatoires:
• src - Spécifie le chemin vers l'image
• alt - Spécifie un autre texte pour l'image, si l'image pour une raison quelconque
(erreur de chargement, débit trop faible, …) ne peut pas être affichée.
<body>
<img src= "[Link]" alt= "ensc constantine">
</body>
Si on veut spécifier une taille différente, on le précise au niveau de l’attribut width.
<img src= « [Link]" alt= "ensc constantine" width="300">
Exercice 2: Ecrire le code permettant de réaliser le résultat suivant:
1.5 Les liens hypertextes
La balise anchor <a> définit un lien hypertexte, qui est utilisé pour créer un lien
d'une page à une autre. L'attribut le plus important du lien est href, qui indique la
destination du lien. Le texte qui apparait souligné dans la page est inclus entre le signe >
et la balise fermante </a>.
la balise:
< a href== " [Link] [Link]" alt= "Ecole Normale de Constantine"> Ecole
Normale de Constantine </a>
crée un lien vers l’école normale supérieure de constantine.
LANGAGE HTML 6
1.6 Les tableaux (Tables)
Pour insérer un tableau dans un document HTML , on utilise l'élément TABLE . Les
deux balises de cet élément sont obligatoires et délimitent le tableau. On définit l’entête du
tableau dans la partie <thead>. Ensuite, on définit les différentes lignes du tableau avec
l'élément TR (table row).
<body>
<table>
<thead>
<th> Etudiant </th>
<th> Spécialité </th>
<th> Moyenne </th>
</thead>
<tbody>
<tr>
<td> Mohamed Amine </td>
<td> Phisique </td>
<td> 15.64 </td>
</tr>
<tr>
<td> Abderrahmane</td>
<td> Mathématiques </td>
<td> 16.32 </td>
</tr>
</tbody>
</body>
avec:
<table> – balise d’ouverture et fermeture du tableau
<tr> – permet de créer une ligne.
<th> – permet de créer un titre de colonne.
<td> – permet de créer une cellule dans la
ligne.
Voici le résultat de l ‘interprétation de ce
code:
Pour ajouter des bordures à notre tableau, on peut spécifier sa mise en forme dans la
partie entêté en incluant une style à ce tableau et aux cellules du tableau:
LANGAGE HTML 7
<STYLE>
table {border: thick solid; padding: none}
td {border: thin solid; margin: none}
</STYLE>
donnant le résulta suivant:
Un tableau avec une bordure fine est obtenu avec le code:
table {border: thin solid; padding: none; border-collapse: collapse;}
Exercice 3: Utiliser les balises tableau (table, tr, …) pour afficher les données dans un
tableau structuré comme suit:
LANGAGE HTML 8
1.7 Les formulaires (Forms)
Jusqu’à ce point du cours, les élément que nous avons vus sont tous statiques. HTML
permet aussi de prendre en charge l’interaction avec l’utilisateur via la commande
<input>.
1. Le champs de saisi (input)
Le premier élément d’interaction est le champs de saisi, obtenu avec la commande
<input/>
Nous examinons ci-après les autres éléments de l’interaction:
2. La case à cocher ou Checkbox
Avec la checkbox, on peut cocher les plusieurs éléments. Une page web contenant :
<input type="checkbox" /> code HTML
<input type="checkbox" /> code Javascript
<input type="checkbox" /> code CSS
<input type="checkbox" /> code pascal
produira: :
Il existe un autre input qui permet de choisir une seule réponse, c’est la bouton radio.
3. Le bouton Radio
Cet élément est produit en spécifiant que le type de l’input est un radio. Le bouton radio
permet de choisir une seule réponse parmi plusieurs choix.
Par exemple:
123 est divisible par 3 ?
<input name="question1" type="radio" /> OUI
LANGAGE HTML 9
<input name="question1" type="radio" /> NON
produit le résultat:
Par défaut aucun des boutons radio ou checkbox n'est coché. Pour cocher la réponse
"oui" (par défaut), il faut l'indiquer avec l'attribut checked.
123 est divisible par 3 ?
<input checked name="question1" type="radio" /> NON
<input name="question1" type="radio"/> OUI
Résultat:
4. Zone de texte ou Textarea
Ce type d'input permet d'écrire du texte sur plusieurs lignes:
<textarea>L’École normale supérieure de Constantine, créée en Septembre
1981, est un établissement public à caractère scientifique, culturel et
professionnel, assurant la formation des futurs enseignants destinés à
l’enseignement des différents paliers : primaire, collège et lycée</textarea>
Résultat:
LANGAGE HTML 10
Il est conseillé de changer la taille de la zone en CSS, mais on peut le faire au niveau de la
balise même en précisant le nombre de colonnes et de lignes.
<textarea cols="70" rows="6">L’École normale supérieure de
Constantine</textarea>
Résultat:
5. La liste déroulante
Lorsque l'on propose à l'utilisateur de sélectionner une valeur stricte, on lui propose une
liste déroulante:
Ceci est un exemple de liste déroulante:
Wilaya
<select>
<option>Constantine</option>
<option>Alger</option>
<option>Oran</option>
<option>Blida</option>
<option>Annaba </option>
<option>jijel</option>
</select>
dont voici le résultat d’interprétation:
6. Le formulaire
La commande <FORM> permet de créer un formulaire. Prenons l’exemple suivant:
<body>
Ceci est mon premier formulaire:
<form>
LANGAGE HTML 11
<input type="text" name="nom" placeholder="Entrer ici votre nom">
<input type="password" name="password" placeholder="Saisir ici votre mot
de passe">
<input type="submit">
</form>
</body>
Ce qui produit:
L’attribut type permet de spécifier si l’élément de l’interaction est un champs de saisie
(text), un mot de passe (password), un bouton envoyer (submit) ou autre. L’attribut name
permet de nommer l’élément et de récupérer sa valeur. L’attribut placeholder permet de
saisir le texte à afficher par défaut.
Autres balises formulaire : <legend>, <fieldset> et <label>. <legend> permet d’ajouter une
légende, <label> permet de saisir un texte devant l’élément de l’interaction et <fieldset>
permet de regrouper les éléments du formulaire dans un cadre.
Le code html:
<form>
<fieldset>
<legend>Par quel cours commence-t-on l'étude du développement
web?</legend>
<input type="radio" name="html">
<label> HTML</label><br/>
<input type="radio" name="css">
<label >CSS</label><br/>
<input type="radio" id="js" name="js">
<label >Javascript</label>
</fieldset>
</form>
produit:
LANGAGE HTML 12
Exercice 4: Réaliser le formulaire ci-dessous (Utiliser la balise Table pour formater
l'affichage du formulaire )
LANGAGE HTML 13
1.8 Pages en Arabe
Il existe trois attributs qui permettent l’internationalisation du HTML :
• « lang » (language) ;
• « dir » (direction) ;
• « charset » (ensemble de caractères).
Lang:
L’attribut s’écrit : lang = « language-code" . Cet attribut défini la langue de base.
Dans le cas de l’arabe, on écrit lang="ar". Si la langue primaire de la page est l’arabe,
l’attribut est ajouté à la balise <html> du document, ç-à-d : <html lang="ar ">. Si la langue
primaire de la page n’est pas l’arabe, l’attribut s’ajoute à la balise qui défini le contenu
arabe, par exemple : <p lang="ar">.
Dir:
L’attribut s’écrit : dir = " ltr | rtl " (left to right- valeur par défaut - ou right to left). Il
défini la direction de base d’un texte. Cet attribut permet aux langues qui s’écrivent de
droite à gauche comme l’arabe ou l’hébreu d’apparaître dans le navigateur effectivement
de droite à gauche. Comme pour l’attribut « lang », il existe deux cas de figure : La
direction par défaut de toute la page est de droite à gauche, l’attribut s’ajoute alors à la
balise <html> : <html dir="rtl">. Si le texte est de gauche à droite mais comporte une
partie de droite à gauche, l’attribut s’ajoute aux valeurs des attributs de l’élément qui
contient le texte de droite à gauche : Par exemple <p dir="rtl">.
Charset:
UTF est un codage de caractères informatiques conçu pour coder l’ensemble des
caractères du « répertoire universel de caractères codés (y compris l’arabe, le chinois, …» .
Pour coder les caractère en arabe, on utilise la balise meta au niveau de l’entête:
<meta http-equiv="Content-Type" content=« text/html" charset= UTF8 ">
Exemple:
<!DOCTYPE html>
<HTML lang="ar" dir="rtl">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
<TITLE> < املدرسة العليا لألساتذة/TITLE>
</HEAD>
<BODY>
<h1> < املدرسة العليا لألساتذة/h1>
تتمتع بالشخصية االعتبارية، املدرسة العليا لألساتذة بقسنطينة هي مؤسسة علمية وثقافية ومهنية عامة
واالستقالل املالي.
LANGAGE HTML 14
وتطوير التعليم والبحث العلمي، املدرسة مسؤولة عن تدريب املعلمني في املستقبل.
<BODY>
</HTML >
1.9 Codage des couleurs
le codage des couleurs en HTML s'appuie sur le modèle RVB (Rouge - Vert - Bleu).
Chaque couleur affichée est décomposable en 3 couleurs primaires. Chaque couleur
primaire prend sa valeur entre 0 et 255, par exemple, la couleur décrite par (0,0,0) est le
noir. Le blanc est le (255,255,255). Le rouge est décrit par (255,0,0). La palette complète des
couleurs est décrite par toutes les valeurs de triplet possible entre le noir et le blanc.
Le codage se fait en hexadécimal (2 chiffres entre 0 et F (F est le 15 en hexadécimal)
précédés par le caractère #. Le noir est représenté par #000000, le blanc par #FFFFFF et le
rouge par #FF0000.
Le code suivant :
<HTML>
<head>
<title>Cours</title>
<style>
body {
background-color: #93B874;
}
</style>
</head>
<body>
Permet d’obtenir la couleur d’arrière plan
#93B874 pour tout le corps de la page :
LANGAGE HTML 15
2. Structure d’un site
Les fichiers HTML ont deux extensions : .htm ou .html. La première page d'un site est en
général appelée [Link]. Si aucun fichier n'est précisé lors de la visite d'un site, c'est ce
fichier qui est recherché par défaut.
Les pages Web , les images affichées, les sons ou vidéo joués à l'aide de plugins sont les
constituants d’un site web.
Les fichiers images sont de plusieurs types( jpeg, gif, bmp, …etc), les plus utilisés sont :
• Les images JPEG, principalement pour les images de qualité photographique. Leur
extension est .jpg. Elles offrent une possibilité de compression intéressante pour
connexion à faible débit.
• Les image GIF, pour les images animé[Link] extension est .gif. Elles sont plus lourdes.
Si le fichier de la page web est stocké sur site web différent du site de la page appelante, il
faut utiliser la notation absolue et toujours commencer le nom du fichier par [Link] en
reprenant ce qui est affiché dans la barre d'adresse du navigateur. voir figure ci-dessous.
LANGAGE HTML 16
Les à puces
l'option type="disc|circle|square" dans <ul> permet de choisir le format de la puce.
Exemple :
<ul type="circle">.
LANGAGE HTML 17