HTML Css Partie 2

Les interfaces utilisateurs statiques
PARTIE 2: HTML 5
1. Introduction :
Lorsque nous naviguons sur Internet, nous visitons différents sites et nous regardons des
pages avec notre navigateur internet. Ces pages sont écrites en langage HTML (Hyper Text
Markup Language) et c’est notre navigateur qui les interprète pour les afficher de manière
lisible à l’utilisateur.
2. Définition et évolution du HTML :
2.1 Définition :
 HTML veut dire : HyperText Markup Language = langage de marques hypertextes, est
un langage qui est utilisé pour créer des pages Web et des applications Web. Le HTML
décrit la structure et le contenu des pages webs.
 Comme son nom l'indique, c'est un langage qui permet de définir l'habillage d'un
document, c'est à dire la façon dont il doit s'afficher à l'écran d'un navigateur.
 Cette notion d'habillage est importante : elle signifie qu'une page écrite en HTML
comportera du texte, mais aussi des codes ou balises permettant de modifier l'affichage
de ce texte, à savoir sa forme, sa taille, sa couleur. Le HTML permet également
d'inclure des images, du son ou des animations dans une page web. Mais en réalité, le
fichier écrit dans ce langage de description n’est autre qu'un fichier texte interprété par
le navigateur.
 Le HTML (Hypertext Markup Language) signifie langage de balisage hypertexte. Le
HTML utilise des balises qui vont permettre de structurer le document et lui donner du
sens.
NB : Une balise HTML ( ou conteneur = tags en anglais ) est un élément que l'on va
ajouter au texte à afficher pour dire au navigateur de quelle manière l'afficher.
Elle n'est pas affichée telle quelle dans le navigateur, elle est interprétée par celui-
ci.
1
 Le HTML est généralement associé avec :

des feuilles de style CSS (Cascading Style Sheets) pour la mise en page (la
présentation, le design) des scripts en langage JavaScript pour obtenir un
comportement dynamique
 Les langages HTML et CSS font partie des langages de description ( présentation) de
données, et non des langages de programmation(contrairement à JavaScript qui est un
langage de programmation).
Le langage HTML décrit seulement

la structure du document.
Le langage CSS décrit la présentation des

éléments de la structure.
Important :
Nous pouvons créer un site Web statique uniquement en HTML.
Techniquement, HTML est un langage de balisage plutôt qu'un langage de programmation.
Comment écrire une page HTML ?
Une page HTML, c’est simplement un fichier texte. Une page HTML de son côté porte
l’extension “.html” ou “.htm”.
Exemple :
Pour que tout le monde soit bien au courant que nous sommes en train d’écrire une page
HTML, on débute toujours par deux balises :
2
<!DOCTYPE html> : déclarant l’utilisation du format HTML 5
<html> : déclarant le début de la page. On écrit la page, puis on referme avec la

balise </html>, afin que l’on comprenne que la page est terminée.
<!DOCTYPE html>
On a déclaré que ce fichier est une page HTML, par contre,
<html> actuellement elle est vide!
</html>
2.2 Evolution du HTML :
HTML est initialement dérivé d'un langage de description à balises : le SGML (Standard
Generalized Markup Language). Il a été inventé par Tim Berners-Lee dans les années 1990
et n'a jamais cessé d'évoluer.
Depuis les débuts du World Wide Web, il existe de nombreuses versions de HTML :
Version Année
HTML 1.0 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
1.0
HTML5 2012
XHTML5 2013
Remarque :
Dans la suite de ce cours, nous utiliserons la version HTML5 qui est actuellement la plus
utilisée.
HTML5 = HTML5 + CSS3 + Javascript
3
3. Structure d'un document HTML 5 :

Avant de créer des pages web et de leur donner un contenu, il faut déterminer une structure
générale commune à toute page en conformité avec les spécifications HTML 5.
Un document HTML est composé de nombreuses balises HTML et chaque balise HTML
contient un contenu différent.
Structure de base d’un fichier HTML
Une fois le bout de texte copié-collé dans votre éditeur de texte (exemple : VS CODE ), vous
devriez vous retrouver comme le screenshoot ci-dessous :
4
Explication du code :
 LE DOCTYPE : <!DOCTYPE HTML>
La toute première ligne d'un fichier HTML s'appelle le doctype. Cette première balise
est la déclaration de type document (appelée couramment doctype).
Elle est indispensable pour avoir un affichage correct de son fichier HTML. En effet,
c'est grâce à cette balise que le navigateur web traite correctement le fichier. Elle
précise la version du HTML que le fichier utilise. En l'occurrence, cette ligne précise
que l'on souhaite écrire en HTML5. Ce n'est pas vraiment une balise comme les autres
(elle commence par un point d'exclamation !).
Sans un DOCTYPE, vous ne pourrez pas faire passer votre page par un validateur.
NB :
Vous avez sûrement remarqué qu'il n'y a pas de / final. En effet, le DOCTYPE n'est
pas une balise, en fait, mais a un statut bien particulier.
5
 LA BALISE : <HTML>
Cette balise est la principale de votre fichier HTML. En effet, elle va englober toutes
les prochaines. La balise ouvrante est tout au début de votre fichier et la balise
fermante est tout à la fin. Un fichier HTML comporte automatiquement cette balise.
Cet élément est utilisé comme un container pour toutes les choses qui font partie de la
page HTML mais qui ne sont pas du contenu affiché. C'est dans cet élément qu'on
mettra des mots-clés, une description de la page qui apparaîtra sur les moteurs de
recherche, les liens vers les fichiers CSS à utiliser pour la mise en forme, les
déclarations des jeux de caractères à utiliser et ainsi de suite.
 LANGUE DE LA PAGE WEB : <html lang="fr">
Il est primordial d'indiquer au navigateur web la langue du contenu de la page. Les

informations données sur la langue du contenu sont notamment importantes pour les
moteurs de recherches, mais également pour les outils de traduction automatique.
Cette information n'est pas obligatoire mais fortement recommandée. Pour indiquer la
langue d'un fichier HTML, il faut préciser un attribut à la balise <html>. Pour notifier
la langue française pour une page HTML, il faut faire comme ci-dessous.
<html lang="fr">
 LA BALISE : <HEAD>
La balise <head> correspond à l'en-tête de votre fichier HTML. Cette zone ou section
contient les informations générales de votre page. Elle indique au navigateur web entre
autres, l'encodage des caractères spéciaux, des déclarations de fichiers, le titre de la
page, le lien vers la feuille de style , une description et des mots clés et plein
d'autres informations précieuses sur la page. Les informations contenues entre cette
balise ne sont pas affichées à l'utilisateur à l'exception de quelques balises, comme le
titre que l'on retrouve dans l'onglet du navigateur web.
6
 LA BALISE : < meta charset="utf-8" >
Cette balise indique l'encodage que votre fichier HTML utilise.
Avec la balise <meta charset=" ">, nous précisons au navigateur que notre fichier est
dans un encodage précis, en l'occurrence en UTF-8.
Cette méthode d'encodage permet d'afficher sans aucun problème tous les symboles
de toutes les langues de notre planète
NB :
Utf-8 : regroupe l'ensemble des caractères connus utilisés dans les différents langages
humains. Généralement, utf-8 permet d’afficher sans aucun problème
pratiquement tous les symboles de toutes les langues de notre planète.
 LA BALISE : <TITLE>
Cette balise correspond tout simplement au titre de votre page. Elle doit être dans
le <head> de votre page. Toutefois, ce dernier ne s'affiche pas dans la page mais dans
l'onglet de votre navigateur web.
 LA BALISE : <BODY>
La balise <body> est très importante car c'est dans cette balise que nous allons écrire
la majeure partie de notre code.
Cette balise ou cet élément est celui qui contient tout le contenu que vous souhaitez
afficher tels que : les textes, les liens, la référence des images et tout ce qu’un auteur
peut vouloir mettre dans un document HTML pour qu'il soit vu par les visiteurs ou les
utilisateurs : cela peut être du texte, des images, des vidéos, des jeux, des pistes audio
jouables, et ainsi de suite.
7
3.2 Le fonctionnement des balises HTML :
Il ne suffit pas simplement d’écrire du texte dans l’éditeur, il faut aussi donner des
instructions à l’ordinateur. En HTML, on passe pour cela par des balises. Les pages
HTML sont remplies de ce qu’on appelle des balises.
C’est quoi une balise ?
Une balise HTML est un élément que l'on va ajouter au texte à afficher pour dire au
navigateur de quelle manière l'afficher. Celle-ci est invisible à l’écran pour vos visiteurs (elle
est interprétée par le navigateur ), mais elle permet à l’ordinateur de comprendre ce qu’il doit
afficher.
Les balises sont au cœur du langage HTML, se sont elles qui vont vous permettre de
structurer vos pages. Ces balises se composent toutes de 2 éléments au minimum :
2 chevrons (un ouvrant et un fermant) : c'est-à-dire des symboles < et >
un nom.
Syntaxe : <Balise> // balise standard
Elles indiquent la nature du texte qu'elles encadrent.
Exemples : Code HTML
<titre> Ceci est le titre de la page</titre>
<p> Ceci est un paragraphe de texte</p>
Signifie « Fin du
Signifie « Début du
paragraphe »
paragraphe »
8
Il existe cependant deux types distincts de balises, les balises qui fonctionnent « par paire »
et celles qui sont « orphelines ».
a) Les balises en paire : ( balises doubles )
Ces balises sont utilisées par paire car elles encadrent un contenu (texte, d’autres balises,
…).
Exemple : Code HTML: <titre> Ceci est le titre de la page</titre>
On distingue une balise ouvrante (<titre>) et une balise fermante (</titre>) qui indique que le
titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux
Balises n'est pas un titre.
Exemple : Code HTML
Ceci n’est pas un titre <titre> Ceci est un titre </titre> Ceci n’est pas un titre
b) Les balises orphelines :
9
Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par
exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut
juste dire à l'ordinateur « Insère une image ici ». Autrement dit, Nous n'avons pas besoin de
délimiter une portion de texte, nous voulons juste insérer une image à un endroit précis.
Exemple : insertion d’une image
<img src="adresse_de_l’image"/>
<img src="images/montagne.jpg" alt="Photo de montagne" />
alt : cela signifie « texte alternatif ». On

<img ../> : balise qui permet src : il permet d'indiquer où se doit toujours indiquer un texte alternatif à
d'insérer une image. trouve l'image que l'on veut l'image, c'est-à-dire un court texte qui
insérer. décrit ce que contient l'image. Ce texte
sera affiché à la place de l'image
Remarque : Règle d'ouverture et de fermeture des balises
Une balise qui est ouverte à l’intérieur d’une autre doit aussi être fermée à l’intérieur.
<html><body></body></html> : correct
<html><body></html></body> : incorrect
Les balises s’entremêlent
c) Les attributs de balise HTML :
Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des
informations supplémentaires. Les attributs se placent après le nom de la balise et avant le
chevron fermant de celle-ci et sont associés à une valeur :
Syntaxe : <balise nom_attribut="valeur">
10
Exemple 1: <html lang="fr">
Exemple 2:
Prenons la balise <img /> que nous venons de voir. Seule, elle ne sert pas à grand
chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher :
<img src="fruits.jpg" />

L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le fichier fruits.jpg.
NB :
Dans le cas d'une balise fonctionnant « par paire », on ne met les attributs que dans la
balise ouvrante et pas dans la balise fermante.
Exemple : <html lang="fr"> …..</html>
Une balise peut comporter de zéro à plusieurs attributs.
d) Eléments HTML :
Un élément HTML peut être soit constitué d’une paire de balises (ouvrante et fermante) et
d’un contenu, soit d’une balise unique qu’on dit alors « orpheline ».
Exemple 1 :
L’élément p (qui sert à définir un paragraphe) est par exemple constitué d’une balise
ouvrante, d’une balise fermante et d’un contenu textuel entre les balises. L’idée ici est que le
texte contenu entre les deux balises va être le texte considéré par le navigateur comme étant
un paragraphe.
11
Remarque :
Certains éléments en HTML ne vont être constitués que d’une balise qu’on appelle alors
orpheline. Cela va être le cas pour certains éléments qui ne possèdent pas de contenu textuel.
Exemple 2: l’élément br qui sert simplement à créer un retour à la ligne en HTML et qui va
s’écrire comme ceci :
Remarque : voir le code HTML d’autres pages :
Chaque navigateur dispose de fonctions permettant de consulter le code source et
d’inspecter un site.
 Internet explorer : bouton droit + « afficher la source »

 Firefox : code source CTRL+U
 Google chrome : bouton droit + « afficher le code source de la page »
NB :
L’inspecteur est un élément puissant permettant d’analyser tous les éléments d’une
page web.
e) Validation d’une page :
La validation inspecte les erreurs et vérifie que la page est conforme. La validation permet de
vérifier la correction syntaxique.
La w3c met à disposition un site de validation : http://validator.w3.org

La validation d’un document produit doit être systématique.
12
3.3 Insérer un commentaire :
Les commentaires sont du texte écrit dans le code HTML qui est visible dans le code
source mais ignoré par le navigateur il sert à expliquer le code.
Un commentaire est une balise HTML qui commence par les caractères .

Exemple :
Important :
13
Tout le monde peut voir le code HTML de votre page une fois celle-ci mise en ligne sur le
Web. Il suffit de faire un clic droit sur la page et de sélectionner « Afficher le code source de
la page » (l'intitulé peut changer selon votre navigateur), comme le montre la figure suivante.
Exemple :
3.4 Insertion et mise en forme des contenu :(texte, paragraphes, titres…etc.)

a. Les paragraphes :
Lorsqu'on écrit du texte dans une page web, on le fait à l'intérieur de paragraphes. Le
langage HTML propose la balise <p> pour délimiter les paragraphes. La
balise <p> définit un paragraphe dans le texte.
La balise <p> permet la segmentation du texte en paragraphes.
La balise <p> est une balise de type block, c'est à dire qu'elle crée un bloc et engendre
automatiquement un retour à la ligne.
Précise où commence un paragraphe et où il se termine.
<p> signifie « Début du paragraphe »
</p> signifie « Fin du paragraphe »
Exemple : Faisons ensemble notre premier document Html:
14
 Ouvrir l'éditeur de texte ( VS CODE par exemple )

 Ecrire les codes Html ci-dessous
 Enregistrer le document avec l'extension .html ou .htm.
Code HTML
Le résultat :
 Sauter une ligne :
C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne : <br/>.
Vous devez obligatoirement la mettre à l'intérieur d'un paragraphe.
Ce qui donne :
15
Exemple :
Ou bien :
<p> Bonjour et bienvenue sur mon site ! <br> Ceci est mon premier test</p>
b. La mise en forme de texte :
 Alignement du texte :
On peut doter la balise <p> de l'attribut align qui permet d'aligner, à sa guise, le
contenu du paragraphe. Les différentes valeurs de l'attribut align sont:
<P align=center>...</P> :
Paragraphe centré équivaut à :
<CENTER>….. </CENTER>
<P align=right>...</P> :
Paragraphe aligné à droite
<P align=left>...</P> : Paragraphe

aligné à gauche
Exemple :
16
 Mettre le texte en gras :
La balise <b> met le texte en gras : <b> Ce texte est en Gras </b>
Exemple :
 Souligner le texte :
17
La balise <u> souligne le texte : <u> Ce texte est souligné </u>
Exemple :
18
 Mettre le texte en italique :
La balise <i> met le texte en italique : <i> Ce texte est souligné </i>
Exemple :
 Texte barré :
La balise < s > ou <strike> barre le texte : < s > Ce texte est barré < /s >
Exemple :
19
 Police plus grande et police plus petite :
Police plus grande : <BIG> … </BIG>
Police plus petite : <SMALL> ... </SMALL>
Exemple :
 Modifier la couleur du texte :
Elle se définit dans la balise <font> avec l'attribut color
<font color = nom_couleur >… </font>
la balise FONT permettra de modifier localement la couleur du texte.
Exemple :
<font color="#ff0000">texte en rouge</font>
Ou bien :
<font color="red">texte en rouge</font>
Propriétés de couleur et de fond :
 La couleur :
20
Les couleurs peuvent être écrites de trois manières :
a. La notation hexadécimale des couleurs :

C'est une combinaison de chiffres (0 à 9) et de lettres (A à F), de type RVB ,
précédée d'un dièse (#). Il y a 6 caractères, qui fonctionnent par deux dans la
notation (quantité de rouge, quantité de vert, quantité de bleu).
Exemple : #000000 : correspond à la couleur noire,
#FFFFFF : correspond à la couleur blanche.
Ensuite, on peut se servir des sites web comme :
http://www.code-couleur.com/ou http://colorschemedesigner.com/
(qui propose des règles thématiques, esthétiques, sur le choix de plusieurs
couleurs).
b. Textuelles en anglais US :
On peut utiliser les termes anglais pour choisir la couleur d'un texte ou d'un cadre,
mais cela se limite à 16 couleurs.
Exemples : red, yellow, green, pink.
La figure suivante vous montre les seize couleurs que vous pouvez utiliser en tapant
simplement leur nom.
21
Il y a d'autres méthodes, ainsi la notation hexadécimale et la méthode RGB( RedGreen

Blue ).
c. La méthode RGB :
Toute couleur peut être décomposée en trois couleurs : rouge,vert, bleu (Red, Green, Blue
d'où RGB) d'intensité convenable. Cette intensité est exprimée en un nombre compris entre 0 et
255. Ce nombre est codé en hexadécimal : il est alors compris entre 0 et FF.
22
Tableau récapitulatif :
 La couleur de fond de la page :
Pour une couleur de fond, on utilise la propriété « background-color » sur la
balise<body>:
 En utilisant des codes de couleurs Hex :
Coloriage un fond de page web est en fait assez simple. Le premier et le plus
populaire moyen est d'utiliser un code de couleur Hex avec la propriété
background-color. Ici, nous appliquons une couleur Hex directement sur le
HTML <body> en utilisant l'attribut de style.
<body style="background-color:#FF0000;">
</body>
23
 En utilisant des noms de couleur HTML :
Codes de couleur Hex peut être le plus populaire, mais ils sont juste une des
nombreuses méthodes disponibles pour colorer un élément HTML. Une
deuxième façon consiste à utiliser un nom de couleur HTML; il suffit de
remplacer le code Hex avec l'un des 140 noms de couleurs pris en charge et
vous êtes bon pour aller.
<body style="background-color:red;">
</body>
 En utilisant les valeurs des couleurs RGB :
Valeurs RGB peuvent également être utilisées pour ajouter une couleur de
fond à éléments HTML. En utilisant le même attribut de style comme avant,
remplacez le code Hex ou le nom de la couleur avec une valeur RGB
correctement formaté (assurez-vous de l'entourer de parenthèses et précéder par
une minuscule 'rgb').
<body style="background-color: rgb(255,0,0);">
</body>
Tableau récapitulatif :
24
Exercice d’application :
 Modifier la police du texte :
Elle se définit dans la balise <font> avec l'attribut face
<font face= nom_police >… </font>
Le nom de la police doit être indiqué entre guillemets.
Exemple :
<font face="Arial">texte en Arial</font>
<font face="Arial , times">Ce texte sera en Arial sinon en times</font>
 Modifier la taille du texte :
Elle se définit dans la balise <font> avec l'attribut size
<font size= taille du texte >… </font>
La taille du texte doit être indiqué entre guillemets.
25
Exemple :
<font size="12">Ce texte sera en taille 12</font>
Remarque :
Par défaut, la valeur de l'attribut size vaut "3".
Possible réunir les trois attributs (color, face, size) dans la même balise <font>.
Exemple :
Le résultat :
26
 Mettre le texte en exposant et indice :
La balise <sup> met le texte en exposant.
La balise <sub> met le texte en indice.
Exemple :
 Le formatage du texte :
La balise <pre> permet de conserver le texte tel que vous le saisissez. Ici un retour à la
ligne sans utiliser la balise <br>
<pre>….. </pre>
Exemple : le texte
27
Le résultat :
28
 La mise en valeur ( import sémantique) :
Pour mettre un texte (mots) en valeur en utilise les balises <em> ( peu important) et
<strong> ( important).
Exemple :
Le résultat :
 Marquer le texte :
La balise <mark> permet de faire ressortir visuellement une portion de texte.
29
Exemple :
 Les niveaux de titres:
Pour ne pas confondre entre les titres et les paragraphes en utilise les balises de titre
qui sont de six ( h1, h2, h3, h4, h5, h6) selon la taille.
Exemple :
30
 Lignes horizontale <hr>:
La balise <hr> permet de tracer une ligne horizontale.
NB : Définition du mot Pixel
 Le pixel est une unité de mesure ou de base de la définition d'une image numérique. Ce
mot provient de la locution anglaise picture element, qui signifie « élément
d'image ».
 Abrégée en px, ou p elle est souvent présentée comme un petit carré de couleur. Lorsqu'on
zoome sur une image numérique matricielle (les images vectorielles ne sont pas basées sur
les pixels), on aperçoit en effet que celle-ci se compose d'une multitude de petits carrés
colorés. Il s'agit des pixels. À noter qu'il n'existe pas de plus petit élément d'une surface
d'affichage que le pixel.
 C'est aussi l'unité utilisée pour spécifier les définitions d'affichage (largeur × hauteur).
31
Dans le monde du multimédia et de la photographie numérique, le pixel renseigne les

consommateurs sur la qualité d'affichage d'une image. Plus son nombre est élevé, meilleure est
la qualité de cette image. Cela a notamment une influence sur le choix d'un écran (télévision,
ordinateur, tablette numérique, Smartphone, etc.). On associe alors généralement le terme à
celui de définition (c'est le nombre de pixels qui composent une image) et de résolution (nombre
de pixels par unité de mesure).
Exemple :
Code HTML:
Le résultat :
32
Exercice d’application N°1: Mises en forme de paragraphes
Vous allez créer un dossier appelé : Exercices_HTML, à l’intérieur de ce dossier vous allez
créer un fichier html ou une page appelée page1.html, qui fera apparaître plusieurs mises en
forme de paragraphes et de titres. La page comprendra 3 parties.
Description de la page à créer :
 Le fond de la page : sera « pink » et le texte blanc.
 Le titre de la page sera : Mise en forme de base
1ère partie : 2ème partie : 3ème partie :

Un titre de niveau 1 centré : Un titre de niveau 2 centré : Un titre de niveau 3 centré :
PREMIERE PARTIE DEUXIEME PARTIE TROISIEME PARTIE

Un paragraphe avec le texte Un paragraphe centré Un paragraphe, à droite
suivant en bleu : constitué des 3 lignes comprenant le texte suivant
suivantes avec le texte vert et en taille 7 et la police Arial :
Je suis le premier de taille 5 :
paragraphe, je suis en bleu… Je suis le dernier paragraphe,
ème
Je suis le 2 paragraphe au je suis en taille 7 avec la
centre en taille 5 et en vert police Arial et à droite
Une ligne séparatrice de Une ligne séparatrice de

taille 4 et de couleur rouge taille 5, de 300 pixels de
longueur et de couleur rouge.
Solution : Code HTML
33
Le résultat :
34
Exercice d’application N°2: Mises en forme de paragraphes

On veut obtenir cette page :
35
Indication : que signifie la balise <adresse>
<adresse> : l'élément d'adresse de contact
L'élément HTML <address>indique des informations de contact pour une personne, un

groupe de personnes ou une organisation.
36
Solution : Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>exercice</title>
</head>
<body>
<h1>Département electronique et informatique (DEI) </h1>
<pre>
## ##### #####
# # # #
# # ##### #
# # # #
## ##### #####
</pre>
<h3>présentation </h3>
<p>le <em>département d'enformatique</em> (DEI) de la <em> faculté de
science</em> de <em>l'université des <br> science et de la technologie Houari
Boumediene USTHB</em> regroupe la plupart des enseignants- <br> cherchrurs en
informatique et mathémamatique appliquées intervenant dans lé cadre des
diferentes <br>
formations de la facult.</p>
<p>Le <em> Département d electronigue et d'ligormatigue</em> etravaille en
étroite collaboratiom atec le laboratoire <br> de recherche ERIC <em>(Equipe
de Recherche en lngenierie des connaissces)</em> pour assiurer une parfaite
<br> osmose entre l'univers de la fomation et celui de la recherche
fondanmentale et/ou appliquee</p>
<h3>historique</h3>
<p>Le département s'est crée en 1998 a partir d'un besoin de la faculté de
la science de disposer dun pole <br> informatque afin de concentrer des
enseignants specialises dans ces matiere et de créer ainsi des <br> formations
plurdisciplinaires dans ces domanes</p>
<h3>Historique des formation </h3>
<p>
<b>1986 :</b> creation du DES SSE <br>
<b>1991 :</b> creation du DES OSIE <br>
<b>1996 :</b> creation du IDE <br>
<b>1999 :</b> creation de l'IP ISA et du DEAED <br>
<b>2008 :</b> creation du Master d'Informatique <br>
</p>
<h3>Adresse Postale</h3>
37
<address>Université de science et de la technologie houari Boumediene <br>

faculé de science <br>
departement d'electronique et d'informatique <br>
BN N°32 Bab Ezzouar <br>
16111 Algérie
</address>
</body>
</html>
3.3Tags spéciaux :
3.4 Gestion des liens :
 Un site web est composé de plusieurs pages. Comment faire pour aller d'une page
vers une autre ? À l'aide d'un lien, dans cette partie du cours, nous allons justement
apprendre à créer des liens entre nos pages.
 Un lien est constitué par un mot, une suite de mots …
 Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web une toile.
 Cliquer sur un lien permet de naviguer vers :
 Un nouveau document HTML
 Un autre endroit du même document
 Un document quelconque
 des images
 du son
 des Vidéos……
Il est facile de reconnaître les liens sur une page : Le navigateur présente ce lien d'une
façon différente (par défaut, en bleu et soulignés) et un curseur en forme de main
apparaît lorsqu'on pointe dessus ou d'image encadrée que l'on appelle ancre ou lien.
38
Ce lien est soit un fichier local, soit une URL.
Pour faire un lien, on utilise la balise: <a>. Il faut cependant lui ajouter un attribut,
href, pour indiquer vers quelle page le lien doit conduire.
Structure d’un lien : Cible du lien

Balise lien
Contenu du lien
Il existe donc de nombreux cas d’utilisation de <a href que vous pouvez implémenter
sur votre site Web. Nous vous présentons ci-dessous quelques-uns des cas d’utilisation
les plus courants de href en HTML.
Exemple 1: lien vers un site
le code ci-dessous est un lien qui amène vers le Site du ministère.
39
Une des valeurs autorisées pour href est : une URL absolue :
l’URL absolue est l’exemple classique d’utilisation de <a href. Elle redirige
directement vers un site Web externe.
Exemple 2: Lien entre deux pages situées dans un même dossier :
On suppose que vous avez deux page et vous êtes dans la page1, les deux pages se
trouvent dans le même dossier ( nom du dossier : Test).
40
pour accéder à la page2, il suffit d'écrire comme cible du lien le nom du fichier vers lequel on
veut amener ( page2.html).
vous aller faire :
<a href="page2.html">. On dit que c'est un lien relatif (une URL relative).
NB :
Une URL relative redirige vers un fichier à l’intérieur d’un site Web.
Exemple : href="https://www.ionos.fr/digitalguidedefault.htm".
Exemple 3: Lien entre deux pages situées dans des dossiers différents :
Cas N°1 : sous dossier : Contenu
41
Remarque : S’il y avait plusieurs sous-dossiers, on écrirait ceci :
Cas N°2 : dossier parent : Test
Résumé :
42
Exemple 3: Un autre endroit du même document : (c.à.d : un lien vers une ancre)
En effet, il peut alors être utile de faire un lien amenant plus bas dans la même page
pour que le visiteur puisse sauter directement à la partie qui l'intéresse.
Ici on a deux étapes à suivre :
1. créer une ancre
2. créer un lien vers l’ancre
1. Créer une ancre :
Pour créer une ancre, il suffit de rajouter l'attribut « id » à une balise qui va alors
servir de repère d’une part pour donner un nom à l’ancre et d’autre part pour faire
un lien vers cette ancre). Ce peut être n'importe quelle balise.
Exemple : un titre par exemple
2. Créer un lien vers l’ancre :
Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href
contiendra un dièse (#) suivi du nom de l'ancre.
Exemple :
43
Remarque : Ajouter l’adresse de la page si l’ancre est sur une autre page :
<a href="page.htm #mon_ancre"> Lien vers page et une ancre </a>
Exercice d’application :
44
45
Exemple 4: Un lien qui affiche une info bulle au survol :
L'attribut title affiche une bulle d'aide lorsqu'on pointe sur le lien.
Exemple :
Bonjour pour accéder au site du ministère de la formation et de l’enseignement

professionnels
Exemple 5: Afficher le site dans une autre fenêtre : L’attribut target
Pour que le lien s'ouvre dans une nouvelle fenêtre, on doit ajouter l'attribut target, dont
la valeur est "_blank".
Une autre
fenêtre
46
Remarque :
On peut rajouter l’attribut : hreflang= FR afficher la page en français
Exemple 6: Un lien pour envoyer un email :
Recevoir des email à partir de votre page.
<a href= « karmer7171@gmail.com »> Envoyez-moi un e-mail </a>
Exemple :
Exemple 7: Un lien pour télécharger un fichier :
47
Exemple : On veut télécharger le fichier : essai.docs qui se trouve dans le dossier : Test
48
Exercice d’application : on veut obtenir cette page
Le code HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
49
<body style="background-color:rgb(167, 187, 113)">

<h1 style="color :rgb(30, 78, 11)">Mes sites préférés</h1>
<p>Clique sur l’un d’eux. Ferme ton paragraphe</p><br>
<a href='http://www.google.be/'>Recherche Google</a><br>
<a href='http://www.marmiton.org/'>Des recettes culinaires</a><br>
<a href='http://www.louvre.fr/'>Le musée du Louvre</a>
</body>
</html>
3.5 Images :
 Il existe plusieurs moyens pour faire apparaître une image sur une page web, le plus
simple est d’utiliser la balise <img>.
 Pour suivre cette partie, je vous invite également à créer un dossier “images” dans le
dossier “Test” présent sur le bureau de votre ordinateur, et à y insérer une image de
votre choix.
 Pour que ce soit plus simple pour vous, le nom de l’image ne doit pas comporter
d’espaces ni de caractères spéciaux.
50
 Un navigateur est susceptible de lire n'importe quelle image toutefois il est

fortement conseillé d'en utiliser certains formats bien adaptés pour le web comme
png, jpg ou gif.
 La taille de l'image ( en octets) doit être minimisée pour garantir un

téléchargement rapide surtout si la page html en contient plusieurs.
 Le navigateur mettra autant de temps à télécharger l'image. Donc il est conseillé

d'utiliser un logiciel de traitement d'image avant publication.
Les formats :
JPEG :
Les images au format JPEG (Joint Photographic Expert Group) sont très
répandues sur le Web. Ce format est conçu pour réduire le poids des photos (c'est-
à-dire la taille du fichier associé), qui peuvent comporter plus de 16 millions de
couleurs
Différentes. La figure suivante est une photo enregistrée au format JPEG.
PNG :
Le format PNG (Portable Network Graphics) est le plus récent de tous. Ce format
est adapté à la plupart des graphiques (je serais tenté de dire « à tout ce qui n'est
pas une photo »). Le PNG a deux gros avantages : il peut être rendu transparent et
il n'altère pas la qualité de l'image.
51
GIF :
C'est un format assez vieux, qui a été néanmoins très utilisé Aujourd'hui, le PNG
est globalement bien meilleur que le GIF : les images sont généralement plus
légères et la transparence est de meilleure qualité. Je
vous recommande donc d'utiliser le PNG autant que possible. Néanmoins, le GIF
conserve un certain avantage que le PNG n'a pas : il peut être animé.
Pour insérer une image à un document HTML :
Balise simple : <img>
 Pour insérer une image locale :
<img src="chemin de l’image" alt=" texte alternatif ">
 Pour insérer une image distante :
<img src="URL" alt=" texte alternatif ">
Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe (<p></p>).
Mais si une image illustre le texte (et n'est pas seulement décorative), il est conseillé de la
placer au sein d'une balise <figure>.
 La balise <figcaption> : permet d'écrire la légende de l'image.
Attributs de la balise <img> :

<img src="url"
width="w%"
52
height="h%"
alt="texte"
border="b" >
1. src : donne le chemin de l'image.  url : Adresse du fichier image à insérer.
2. alt : ALT="texte" affiche un texte alternatif à la place de l'image si celle-ci
ne peut pas être chargée (ne s’affiche pas).
 align : left, right, middle, bottom, top

 width : Largeur de l'image affichée. Si cette option n'est pas spécifiée, l'image est
affichée à sa taille réelle. On indique soit la valeur en pixel, soit enpourcentage de
la taille originale de l'image.
Width = n ou n%
 height : Hauteur de l'image affichée (mêmes remarques que pour WIDTH).
height= m (en px)
 border= n : pour tracer un cadre autour de l'image avec un trait de n pixels de
large.
53
- vspace=n hspace=m : espace vertical entre l’image et le texte en pixels
(vspace), espace horizontal image-texte (hspace).
Exemple :
Remarque : On place les deux images insfp.jpg et position.png dans un dossier appelé
par exemple : Images
54
3.6 Listes :
Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos
informations.
Nous allons découvrir ici trois types de listes :
 les listes à puces ou non ordonnées;
 les listes à puces ordonnées ou listes numérotées ou encore énumérations;
 Liste de description.
1. liste à puces non ordonnée :
55
Les listes non-ordonnées pourront vous servir à énumérer une suite d’informations ne
nécessitant pas forcément de classement alphabétique ou numérique.
Pour créer une liste non ordonnée (unordered list) en HTML, on utilise les balises
HTML <ul></ul>. Il faut l’ouvrir en début de liste et la fermer après le dernier
élément de la liste.
Pour remplir cette liste d’éléments on utilise les balises <li></li> pour créer ou
définir un élément de la liste.
Exemple :
2. liste à puces ordonnée :
Les listes ordonnées servent à classer des informations pour les lister dans un ordre
précis qui ne peut pas être changé.
56
Une liste ordonnée et numérotée en HTML se crée par l’utilisation des

balises <ol></ol> (par défaut dans le navigateur). Il faut l’ouvrir en début de liste et
la fermer après le dernier élément de la liste.
et tout comme pour les listes non-ordonnées vous pouvez remplir les listes ordonnées
d’éléments par l’utilisation des balises <li></li>.
Exemple :
Remarque :
57
Les éléments <ul> et <ol> ne peuvent contenir que des éléments <li>.
Chaque élément <li> peut contenir des éléments de bloc ou des éléments incorporés
(p, div, blockquote, h1, etc.).
On peut mélanger <ul> et <ol> à condition de les fermer correctement.
3. Créer une liste imbriquée :
Une liste imbriquée est simplement une liste dans une liste, le concept est simple et
son utilisation aussi. Que ce soit une liste ordonnée ou une liste non-ordonnée il suffit
d’ajouter un nouvel élément HTML « ul » ou « ol » dans un précédent élément de
liste.
Exemple1 : d’une liste imbriquée d’une liste ordonnée imbriquée dans une liste
non-ordonnée :
58
Exemple 2 : imbrication
4. liste de description :
Ce type de liste permet de donner une information descriptive et complémentaire sur

un élément précis.
Vous pouvez créer une liste de description (ou définition) en utilisant les balises
HTML <dl></dl>.
59
Contrairement aux autres précédentes listes, les éléments de celle-ci ne sera pas
définissable par l’élément HTML <li></li>.
Pour commencer, deux éléments différents peuvent être ajoutés à cette liste :
Le mot, le terme ou l’expression à définir ou décrire. On va utiliser les

balises <dt></dt> pour créer cet élément.
La définition (ou description) du terme. Les balises <dd></dd> seront à utiliser pour
cet élément.
Pour délimiter un
Pour délimiter la terme
liste
Pour délimiter la
définition de ce terme
Exemple :
60
Le résultat :
5. Modifier le style des listes :
L’apparence et la mise en forme des listes sont paramétrables à travers des paramètres
(attributs HTML ou propriétés CSS) propres aux éléments de liste.
Changer l’apparence des puces d’une liste non-ordonnée <ul> :
Vous pouvez changer l’apparence des puces d’une liste non-ordonnée, ajoutez la
propriété « list-style-type » à l’élément HTML < ul > et définissez la valeur qui
représentera le style que vous souhaitez donner aux puces de votre liste.
Il existe plusieurs styles possibles aux puces d’une liste non-ordonnée, voici quelques
possibilités :
Code CSS :
Disque noir : list-style-type: disc;
Cercle : list-style-type: circle;
Carré noir : list-style-type: square;
Chiffres (ce qui revient à créer une liste ordonnée) : list-style-type: decimal;
Caractère: list-style-type: '@';
Aucune puce : list-style-type: none;
61
Exemple :
Ajouter une image à la place des puces d’une liste non-ordonnée :
Il existe aussi une possibilité d’ajouter une image à la place des puces d’une liste. Grâce à la
propriété « list-style-image » vous allez pouvoir créer des listes à puces très personnalisées
en indiquant simplement l’url d’une image .
Voici un exemple avec une icône de trophée servant de puce à la liste :
62
Le résultat :
Changer l’apparence de la numérotation d’une liste ordonnée :
Nous allons réutiliser la propriété « list-style-type » avec l’élément HTML
<ol >. Plusieurs styles existent pour les puces d’une liste ordonnées, voici une partie des
valeurs possibles :
Code CSS :
Chiffres décimaux : list-style-type: decimal;

Chiffres décimaux avec un zéro devant : list-style-type: decimal-leading-zero;
Chiffres romains en majuscules : list-style-type: upper-roman;
Chiffres romains en minuscules : list-style-type: lower-roman;
Alphabet en majuscules : list-style-type: upper-alpha;
Alphabet en minuscules : list-style-type: lower-alpha;
Chiffres grecs : list-style-type: lower-greek;
63
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Style des Listes:icone </title>
</head>
<body>
<ol style="list-style-type: decimal">
<li>Élément</li>
<li>Élément</li>
<li>Élément</li>
</ol>
<ol style="list-style-type: decimal-leading-zero">
<li>Élément</li>
<li>Élément</li>
<li>Élément</li>
</ol>
<ol style="list-style-type: upper-roman">
<li>Élément</li>
<li>Élément</li>
<li>Élément</li>
</ol>
64
<ol style="list-style-type: lower-roman">
<li>Élément</li>
<li>Élément</li>
<li>Élément</li>
</ol>
<ol style="list-style-type: upper-alpha">
<li>Élément</li>
<li>Élément</li>
<li>Élément</li>
</ol>
<ol style="list-style-type: lower-alpha">
<li>Élément</li>
<li>Élément</li>
<li>Élément</li>
</ol>
<ol style="list-style-type: lower-greek">
<li>Élément</li>
<li>Élément</li>
<li>Élément</li>
</ol>
</body>
</html>
65
Le résultat :
Commencer une liste ordonnée à un nombre défini :
Si vous ne souhaitez pas commencer votre liste ordonnée par la valeur initiale par défaut (1
pour les valeurs décimales ou « a » pour l’alphabet latin par exemple) vous pouvez définir
l’attribut « start » d’une liste ordonnée et indiquer à partir de quelle valeur vous souhaitez
débuter avec une valeur numérique entière.
Exemple : d’une liste ordonnée alphabétique (latin) commençant par la lettre
«C»:
66
Option START="Nombre De Départ"

dans <OL> :
Permet de démarrer la numérotation à
une valeur spécifique nombre De

Départ) autre que 1.
Inverser l’ordre d’une liste :
L’attribut « reversed » d’une liste ordonnée va vous permettre d’inverser l’ordre d’une liste.
Une liste décimale commencera donc par la valeur la plus élevée et liste alphabétique
débutera par la dernière lettre de l’alphabet utilisé.
Exemple : d’une liste décimale inversée :
67
Des puces personnalisées

Nous avons vu que les listes à puces de base. Ces listes ne proposent que trois types de puces
différentes. Heureusement, il est possible d’en ajouter.
Pour cela, nous allons tout d’abord enlever les puces avec list-style-type:none;, puis grâce à la
pseudo classe ::before, nous allons ajouter un contenu avec le paramètre content (ici une
forme qui ressemble à une puce de type disc) et nous allons lui choisir une couleur verte.
Finalement, il suffit de faire quelques modifications au niveau des paddings et des marges.
Code : page1.html
<style>
ul{
list-style-type:none;
padding: 0;
margin: 0;
}
li{
padding-left: 16px;
}
li::before{
content: "•";
padding-right: 8px;
color: green;
68
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<ul>
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
</ul>
</body>
</html>
Sur le navigateur :
NB :
Dans le paramètre content, nous pouvons y mettre à-peu-près ce que nous voulons: du texte,
des icônes, des emojis. Imaginons que nous gérons un club de basket, voici ce que nous
pourrions faire à l’aide d’un emoji :
Code : page.html
69
<style>
ul{
list-style-type:none;
padding: 0;
margin: 0;
}
li{
padding-left: 16px;
}
li::before{
content: "🏀";
padding-right: 8px;
color: green;
}
</style>
<ul>
<li>Element_1</li>
<li>Element_2</li>
<li>Element_3</li>
</ul>
Sur le navigateur :
Remarque :
A noter que les emodjis s’afficheront différemment selon le navigateur web, réseaux sociaux,
etc.
Utiliser des images en guise de puces :
70
Nous avons vu qu’il était possible de créer nos propres puces en utilisant l’attribut content. Il
est également possible d’utiliser une image en jouant avec le background.
Code : page.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
ul{
list-style-type: none;
}
li::before{
display: inline-block;
position: relative;
width: 1em;
height: 1em;
top: 0.2rem;
margin-right: 0.4rem;
content: "";
background-image: url(top.png);
background-size: contain;
}
</style>
</head>
<body>
<ul>
<li>Element_1</li>
<li>Element_2</li>
<li>Element_3</li>
</ul>
</body>
</html>
Sur le navigateur :
71
Sélectionner manuellement le numéro de chaque entrée
En spécifiant la valeur du paramètre value de chaque entrée <li>, nous pouvons définir nous-
même la numérotation de la liste.
Code : page.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<ol>
<li value="2">Element_1</li>
</ol>
</body>
</html>
Sur le navigateur :
72
Numérotation avec décimales

Nous allons continuer d’utiliser le paramètre content pour pouvoir y afficher du contenu
personnalisé. Ici, grâce à notre compteur et à son incrémentation, nous pouvons afficher
dynamiquement une liste numérotée avec décimales.
Code : page.html
<style>
ol{
padding-left: 1.4em;
counter-reset: compteur;
}
ol li{
counter-increment: compteur;
}
ol li::before{
content: counters(compteur, ".") ". ";
}
</style>
<ol>
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3
<ol>
<li>Point 3.1</li>
<li>Point 3.2
<ol>
73
<li>Point 3.2.1</li>
</ol>
</li>
<li>Point 3.3</li>
</ol>
</li>
<li>Point 4</li>
<li>Point 5</li>
</ol>
Sur le navigateur :
Personnaliser la numérotation avec du texte

Nous allons réutiliser notre compteur, mais cette fois nous allons également ajouter un petit
texte à afficher.
Code : page.html
<style>
ol{
counter-reset: compteur;
}
ol li{
counter-increment: compteur;
}
74
ol li::before{
margin-right: 1rem;
content: "Etape " counter(compteur) ")";
color: green;
}
</style>
<ol>
<li>Faire ça</li>
<li>Puis faire ça</li>
<li>Et finalement faire ça</li>
</ol>
Sur le navigateur :
Ajouter des colonnes à ses listes
En utilisant la propriété CSS columns, nous pouvons très facilement ajouter des colonnes à
nos listes.
Code : page.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
75
max-width: 688px;
}
</style>
</head>
<body>
<ol style="columns:200px">
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
<li>Point 4</li>
<li>Point 5</li>
<li>Point 6</li>
<li>Point 7</li>
<li>Point 8</li>
<li>Point 9</li>
</ol>
</body>
</html>
Sur le navigateur :
3.7 Les tableaux et les DIV :

Un tableau en HTML représente un ensemble organisé de données.
76
Il se compose de lignes organisées elles-mêmes en cellules.
Un tableau va nous permettre de représenter les données sous une certaine forme pour les
structurer et les rendre compréhensibles pour les navigateurs, moteurs de recherche et
utilisateurs.
Pour créer un tableau en HTML nous allons utiliser l’élément table qui signifie « tableau
» en anglais.
Structure de base :
<TABLE> </TABLE> : indique au navigateur le début et la fin d'une table
(permet de créer des tableaux)
Il contient deux balise de base qui sont :
<tr> </tr> (Table Row): indique le début et la fin d'une ligne du tableau.
<td> </td>(Table Data) : indique le début et la fin du contenu d'une cellule.
Exemple :
77
Autres balises :
- <caption></caption> : permet d’ajouter une description du

tableau (attribuer un titre au tableau), cette balise se
place tout au début du tableau. Elle peut accueillir
l’attribut align avec deux option : top et bottom.
- <th></th> : pour créer les titres des colonnes, on utilisera cet élément dans
les lignes du tableau <tr> à la place des éléments de données
habituels <td> pour créer les titres de la table HTML.
Exemple :
78
Exemple : ( précédent )
<th> peut remplacer <td> pour créer une cellule d’entête au tableau.
79
Par défaut affiché en gras et centré dans les navigateurs.
80
Exemple : Donner un titre au tableau
On utilise <caption>
La balise se place au début du tableau.
81
Remarque :
On peut rajouter les bordures soit avec les attributs de la balise table ou bien avec le CSS.
 Attributs de <table> :
la balise <table> peut accueillir de nombreux attributs :
 border : définit, en pixels, la taille de la bordure entourant le tableau ( aussi les

cellules).
 width : définit en pixels ou en pourcentage (%) la largeur du tableau.

 height : définit en pixels la hauteur du tableau.
 cellspacing : définit en pixels ou en pourcentage l'espacement entre les différentes
cellules du tableau.
 cellpading : définit en pixels ou en pourcentage (%) la marge interne des cellules
82
 bgcolor : Cet attribut définit la couleur d'arrière-plan de toutes les cellules, soit en
hexadécimaux (code de 6 chiffres précédé d'un '#‘) comme #000000 pour
le noir, soit en spécifiant la couleur en anglais comme black, green….
 align : aligner (horizontalement) le contenu de la colonne :

align=right (droit)
align=center (centre)
align=left (gauche)
Exemple : <table border=1 cellpading=5 cellspacing=5 width="50%">
83
Exemple : <caption align="bottom"> Les tableaux en HTML 5</caption>
84
 Attributs de <tr> :
La balise <tr> peut accueillir ces attributs :
 height : la hauteur de la ligne

 bgcolor : la couleur de fond des cellules de cette ligne
 align : aligner le contenu des cellules de la ligne :
- align=left : (par défaut) toutes lescellules de la ligne sont cadrées à
gauche
- align=center : toutes les cellules de la ligne sont centrées
- align=right : toutes les cellules de la ligne sont cadrées à droite.
 Attributs de <td> :
85
La balise <td> peut accueillir ces attributs :

 width : la largeur de la colonne en pixel ou en pourcentage par rapport à la
largeur du
tableau.
 height : la hauteur en pixel de la colonne.
 bgcolor : la couleur de fond de la colonne.
 align : aligner (horizontalement) le contenu de la colonne :
• align=right (droit)
• align=center (centre)
• align=justify (justifier)
valign : aligner (verticalement) le contenu de la colonne :

valign=middle (milieu)
valign=top (haut)
valign=bottom (bas)
Exemple : les bordures avec les attributs de la balise <table>, <th>, <td>
86
Exemple :
<!DOCTYPE html>
<html>
87
<head>
<title>les bordures avec les attributs de la balise table</title>
</head>
<body bgcolor="#00ff00">
<center>
<table border=5 bordercolor=red cellspacing=10 cellpadding=10 width=80%

heigth="80">
<tr bgcolor=yellow>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr bgcolor=blue>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr bgcolor=black>
<td><font color=white>3-1</td>
88
</tr bgcolor=yellow>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
</center>
</body>
</html>
89
 La fusion de colonnes :
Les lignes des tableaux réalisés précédemment avaient le même nombre de cellules. Il
est cependant très fréquent de devoir définir une cellule sur plusieurs lignes ou sur
plusieurs colonnes. Pour cela il faut fusionner des cellules. On utilise les attributs «
colspan » (on étend une cellule sur plusieurs colonnes) et « rowspan » (on étend une
cellule sur plusieurs lignes).
L’attribut colspan de la balise <td> va faire la fusion des cellules horizontalement.
Exemple :
Cellule 2 est
supprimée
 La fusion des cellules horizontalement :
<!DOCTYPE html>
<html>
<head>
<title>la fusion de colonnes</title>
</head>
90
<body>
<pre><caption><strong>Tableau initial</strong></caption></pre>
<table border="1" >
<tr >
<td>Cellule 1 </td>
<td>Cellule 2</td>
</tr> <tr>
<td>Cellule 3</td>
<td>cellule 4</td>
</tr>
<tr>
<td >Cellule 5</td>
<td >Cellule 6</td>
</tr>
</table>
<pre><caption><strong>la fusion de colonnes</strong></caption></pre>
<table border="1" >
<tr>
<td colspan="2">Cellule 1 et Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td >cellule 4</td>
</tr>
<tr>
<td >Cellule 5</td>
<td >Cellule 6</td>
</tr>
91
</table>
</body>
</html>
Le résultat :
Nombre de cellules 2 à
fusionnées
l’attribut rowspan de la balise <td> va faire la fusion des cellules verticalement.
Exemple :
 La fusion des cellules verticalement:
<!DOCTYPE html>
<html>
<head>
92
<title>la fusion de colonnes</title>
</head>
<body>
<pre><caption><strong>Tableau initial</strong></caption></pre>
<table border="1" >
<tr >
<td>Cellule 1 </td>
<td>Cellule 2</td>
</tr> <tr>
<td>Cellule 3</td>
<td>cellule 4</td>
</tr>
<tr>
<td >Cellule 5</td>
<td >Cellule 6</td>
</tr>
</table>
<pre><caption><strong>la fusion de colonnes verticalement</strong></caption></pre>
<table border="1" >
<tr>
<td >Cellule 1</td>
<td >Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td rowspan="2">Cellule 4 et Cellule 6</td>
</tr>
<tr>
93
<td>Cellule 5</td>
</tr>
</table>
</body>
</html>
Le résultat :
 Diviser un gros tableau : ( un tableau structuré )
On peut diviser un gros tableau en trois parties avec les trois balises suivantes :
<thead></thead> : L'en-tête (en haut)  définit les cellules d’entête en haut

directement, peut contenir <tr> et <th> (<th> au lieu de
<td>)
<tbody></tbody> : Le corps (au centre)  définit les cellules de corps, peut

contenir <tr> et <td>.
<tfoot></tfoot> : Le pied du tableau (en bas)  définit les cellules de pied
94
directement en bas, peut contenir <tr> et <td>.
Remarque :
On utilise cette division surtout si votre tableau est assez gros et que vous avez besoin de
l'organiser plus clairement. Il est conseillé d'écrire les balises dans l'ordre suivant :
1. <thead>
2. <tfoot>
3. <tbody>
Le navigateur se chargera d'afficher les éléments au bon endroit.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Diviser un gros tableau</title>
</head>
<body>
<table align="left" bgcolor="#FFFFFF" border="1" width="40%" height="100"

cellspacing="0" cellpadding="5">
95
<caption align="top"><strong>Table : Commande des produits </strong></caption>
<thead> <!– entête -->
<th bgcolor="purple" align="center">Commande</th>
<th bgcolor="purple" align="center">Prix (DA)</th>
</thead>
<tfoot> <!– pied-->
<tr>
<td bgcolor="yellow"width="40%" align="center"> <b>Total</b> </td>
<td width="40%" align="center"><b>24900<b></b> </td>
</tr>
</tfoot>
<tbody> <!– corps -->
<tr>
<td width="40%" align="center">souris</td>
<td width="40%" align="center">900 </td>
</tr>
<tr>
<td width="40%" align="center">pc</td>
<td width="40%" align="center">24000 </td>
</tr>
</tbody>
</table>
</body>
</html>
96
Le résultat :
97

HTML Css Partie 2

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML Css Partie 2

Transféré par

Droits d'auteur :

Formats disponibles

Les interfaces utilisateurs statiques

2. Définition et évolution du HTML :

 Le HTML est généralement associé avec :

Le langage HTML décrit seulement

Le langage CSS décrit la présentation des

Techniquement, HTML est un langage de balisage plutôt qu'un langage de programmation.

Comment écrire une page HTML ?

<!DOCTYPE html> : déclarant l’utilisation du format HTML 5

<html> : déclarant le début de la page. On écrit la page, puis on referme avec la

2.2 Evolution du HTML :

HTML 1.0 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

HTML5 = HTML5 + CSS3 + Javascript

3. Structure d'un document HTML 5 :

Structure de base d’un fichier HTML

 LE DOCTYPE : <!DOCTYPE HTML>

 LANGUE DE LA PAGE WEB : <html lang="fr">

Il est primordial d'indiquer au navigateur web la langue du contenu de la page. Les

 LA BALISE : < meta charset="utf-8" >

Cette balise indique l'encodage que votre fichier HTML utilise.

humains. Généralement, utf-8 permet d’afficher sans aucun problème

pratiquement tous les symboles de toutes les langues de notre planète.

3.2 Le fonctionnement des balises HTML :

C’est quoi une balise ?

2 chevrons (un ouvrant et un fermant) : c'est-à-dire des symboles < et >

Syntaxe : <Balise> // balise standard

Elles indiquent la nature du texte qu'elles encadrent.

Exemples : Code HTML

<titre> Ceci est le titre de la page</titre>

<p> Ceci est un paragraphe de texte</p>

a) Les balises en paire : ( balises doubles )

Exemple : Code HTML: <titre> Ceci est le titre de la page</titre>

Balises n'est pas un titre.

Exemple : Code HTML

b) Les balises orphelines :

Exemple : insertion d’une image

<img src="images/montagne.jpg" alt="Photo de montagne" />

alt : cela signifie « texte alternatif ». On

Remarque : Règle d'ouverture et de fermeture des balises

Les balises s’entremêlent

c) Les attributs de balise HTML :

Syntaxe : <balise nom_attribut="valeur">

Exemple 1: <html lang="fr">

chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher :

<img src="fruits.jpg" />

Exemple : <html lang="fr"> …..</html>

Une balise peut comporter de zéro à plusieurs attributs.

Remarque : voir le code HTML d’autres pages :

Chaque navigateur dispose de fonctions permettant de consulter le code source et

 Internet explorer : bouton droit + « afficher la source »

e) Validation d’une page :

La w3c met à disposition un site de validation : http://validator.w3.org

3.3 Insérer un commentaire :

3.4 Insertion et mise en forme des contenu :(texte, paragraphes, titres…etc.)

Précise où commence un paragraphe et où il se termine.

<p> signifie « Début du paragraphe »

</p> signifie « Fin du paragraphe »

Exemple : Faisons ensemble notre premier document Html:

 Ouvrir l'éditeur de texte ( VS CODE par exemple )

 Sauter une ligne :

b. La mise en forme de texte :