Cours 2 Interface G-24-25

INF273
DÉVELOPPEMENT D’INTERFACES GRAPHIQUES
COURS 2 CONCEPTION INTERFACES WEB

M. YNSUFU ALI
HTML5 ET CSS
Prérequis :
 Ordinateur,
 Editeur de texte(vs code, Notepad++, etc.)
 Navigateur(Google chrome, Edge, Mozilla Firefox, etc.)
HTML5 ET CSS
Comprendre le rôle du HTML
 Le HTML (HyperText Markup Language) a fait son apparition dès
1991 lors du lancement du Web. Son rôle est de gérer et
d’organiser le contenu.
 C'est donc en HTML qu’on écrit ce qui doit être affiché sur la
page : du texte, des liens, des images…
 On très bien créer une interface web uniquement en HTML…

Mais celle-ci ne sera pas très beau car l'information apparaîtra
“brute” et sans aucune mise en forme. C'est pour cela que le
langage CSS vient toujours le compléter.
HTML5 ET CSS
Comprendre le rôle du CSS
 Le CSS (Cascading Style Sheets, aussi appelées feuilles de style)
a pour rôle de gérer l'apparence de la page web (agencement,
positionnement, décoration, couleurs, taille du texte…).
 Ce langage est venu compléter le HTML en 1996, et il est toujours

au fondement même du style du Web de nos jours.
 Le CSS a besoin d'une base en HTML pour fonctionner. C'est pour

cela qu’il faut d'abord apprendre à coder en HTML avant de
s’occuper du style en CSS.
HTML5 ET CSS
Comprendre le rôle du navigateur
 Les rôles du HTML et du CSS se complètent.
 Mais ensuite, c’est le navigateur web qui fait le reste du travail :

lire le code HTML et CSS pour afficher un résultat visuel à l'écran.
Si le code CSS dit “Les titres sont en rouge”, alors le navigateur
affichera les titres en rouge.
 Le rôle du navigateur est donc essentiel !
 On ne dirait pas comme ça, mais un navigateur est un

programme extrêmement complexe. En effet, comprendre le
code HTML et CSS n'est pas une mince affaire.
HTML5 ET CSS
Interface graphique Web avec HTML
 Pour créer une page web en HTML, il suffit de créer un fichier
ayant l'extension .html.
 Ce fichier s'ouvre dans le navigateur web simplement en faisant
un double-clic dessus.
 Le langage HTML utilise ce qu'on appelle des balises. On les écrit
entre chevrons < et >
Exemple : <p> Mon élément </p>
Ici, Mon élément est interprété par le navigateur comme un
paragraphe.
 Les balises indiquent la nature du texte qu'elles encadrent. Elles

permettent au navigateur de comprendre ce qu'il faut afficher à
l'écran pour les visiteurs d'un site web.
HTML5 ET CSS
 Si elles pouvaient parler, elles diraient :
 <title> </title> : “Ceci est le titre de la page”,
 <img> ou encore <img/>: “Ceci est une image”,
 <p> </p>: “Ceci est un paragraphe de texte”,
 etc.
 On distingue deux types de balises :
 Les balises en paires (une balise ouvrante et une balise fermante)
Elles s'ouvrent, contiennent du texte, et se ferment plus loin.
exemple : <title>Ceci est le titre de ma page</title>
 Les balises orphelines (une seule balise). Ce sont des balises qui
servent le plus souvent à insérer un élément à un endroit précis (par
exemple une image). on veut juste dire à l'ordinateur “Insère une
image ici”. Exemple: <img src=”log.jpg” alt=”Mon logo” />
HTML5 ET CSS
 Structure balise paire
HTML5 ET CSS
 Structure balise orpheline
HTML5 ET CSS
Structure de base d'une page HTML
 Pour écrire la première vraie page web en HTML, ouvrir le fichier .html
exemple index.html sous Visual Studio Code et écrire le code ci-dessous.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Le titre de ma page</title>
</head>
<body>
</body>
</html>
 l'ordre des balises est important dans cette structure de base Les balises
s'ouvrent puis se ferment, et elles s'emboitent les unes dans les autres dans
un ordre précis.
HTML5 ET CSS
HTML5 ET CSS
 La première ligne <!DOCTYPE html> est une balise orpheline
indispensable : elle indique qu'il s'agit d'une page HTML.
 La balise en paire <html> </html> englobe tout le contenu de la page
web. A l'intérieur, il y a les balises en paire <head> </head> et <body>
</body>.
 Pour rappel, c’est dans la balise <html> </html> qu'on peut préciser la langue par défaut
du site web :
<html lang=”fr”> pour le français ;
<html lang=”en”> pour l’anglais ;
<html lang=”es”> pour l’espagnol…
 La balise en paire <head> </head> contient deux balises qui donnent

des informations au navigateur : l’encodage et le titre de la page.
HTML5 ET CSS
 La balise orpheline <meta charset="utf-8"> indique l'encodage utilisé
dans le fichier .html : cela détermine comment les caractères spéciaux
s'affichent (accents, idéogrammes chinois et japonais, etc.).
 La balise en paire <title> </title> indique au navigateur le titre de la
page web.
 Toute page doit avoir un titre qui décrit ce qu'elle contient, il
s'affichera dans l'onglet du navigateur, et apparaîtra dans les
résultats de recherche, comme sur Google.
 La balise en paire <body> </body> contient tout ce qui sera affiché à
l'écran sur la page web.
 Commentaire: En HTML, c’est un texte qui sert simplement de mémo. Il
n'est pas affiché, il n'est pas lu par l'ordinateur, cela ne change rien à
l'affichage de la page. Syntaxe: 
HTML5 ET CSS
Organisation de texte
 C'est donc dans <body> </body> que l’on va écrire du texte à afficher
en utilisant des balises HTML pour le structurer grâce à
 des paragraphes,
 des titres,
 des listes
 ou encore mettre en avant du texte important.
 Paragraphes avec les balises <p> </p>

Les balises <p> </p> permettent de délimiter des paragraphes
en HTML .
HTML5 ET CSS
 Paragraphes avec les balises <p> </p>
Les balises <p> </p> permettent de délimiter des paragraphes
en HTML .
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Ma page</title>
</head>
<body>
<p>Ceci est le contenu de mon premier paragraphe</p>
<p>Ceci est le contenu de mon deuxième paragraphe</p>
</body>
</html>
HTML5 ET CSS
 Revenez à la ligne avec la balise orpheline <br>
Pour revenir à la ligne, on utilise la balise orpheline <br>
(pour break)
<!DOCTYPE html>
<html lang="fr">
<head>
</head>
<body>
<p>Ceci est le contenu de mon premier paragraphe, <br> dont le contenu est
particulièrement long.</p>
<p>Ceci est le contenu de mon deuxième paragraphe</p>
</body>
</html>
HTML5 ET CSS
 Des titres
Les balises de titres vont de <h1> </h1> jusqu'à <h6> </h6>, ce qui permet de
hiérarchiser et structurer le texte dans différentes sections, du niveau le plus grand,
au niveau le plus petit. <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Voilà mon sous-titre 1</h1>
</body>
</html>
HTML5 ET CSS
 balisez les éléments d'une liste avec <li> </li>
Pour baliser les éléments qu'on veut mettre dans une liste, on utilise <li> </li> (pour
"listed item" ou "élément de la liste" en français). Puis on les insère tous à l'intérieur
d'une autre balise pour indiquer s'il s'agit d'une liste à puces ou d'une liste
numérotée.
 insérez la liste dans des balises <ul> </ul> ou <ol> </ol>

 Les balises <ul> </ul>(pour "unordered list") permettent d'indiquer qu'on
démarre une liste non ordonnée, c'est-à-dire, ce que l'on appelle en français
une liste à puces.
 Les balises <ol> </ol>(pour "ordered list") permettent d'indiquer qu'on démarre
une liste ordonnée, autrement dit en français une liste numérotée.
HTML5 ET CSS
 Liste
exemple
<h1>Les fruits rouges</h1>
<ul>
<li>Fraises</li>
<li>Framboises</li>
<li>Groseilles</li>
</ul>
<h1>Ma journée</h1>
<ol>
<li>Je me lève.</li>
<li>Je mange et je bois de l'eau.</li>
<li>Je retourne me coucher.</li>
</ol>
HTML5 ET CSS
Mettez en valeur du texte important
 <mark> </mark> Surligner le texte.
 <em> </em> Mettre le texte en italique.
 <strong> </strong> Mettre le texte en gras.
 <U> </U> Souligner le texte

HTML5 ET CSS
lien hypertexte en HTML

 Un lien hypertexte (ou simplement lien) est un élément d'un
document numérique qui permet de naviguer d'une page web à
une autre ou d'accéder à d'autres ressources, comme des images,
des fichiers ou des vidéos.
 On reconnaît facilement un lien hypertexte (ou hyperlien) sur une
page web : par défaut, il est en bleu et souligné dans le navigateur
et un curseur en forme de main apparaît lorsqu'on pointe dessus ;
mais on peut modifier ce style en CSS.
 Pour créer un lien hypertexte, on utilise la balise <a> et l'attribut href
 Syntaxe : <a href="Contact.html">Nous Contacter</a>
<a href="https://fs-univ-dla.com/">Fac Sciences</a>
HTML5 ET CSS
 <a href="Contact.html">Nous Contacter</a> montre le lien vers la

page contact du même projet. Cette devrait être dans le même
dossier que les autres pages.
 <a href="https://fs-univ-dla.com/">Fac Sciences</a> lien vers le site

de la Faculté des Sciences
HTML5 ET CSS
 <a href="Contact.html">Nous Contacter</a> montre le lien vers la
page contact du même projet. Cette devrait être dans le même
dossier que les autres pages.
 <a href="https://fs-univ-dla.com/">Fac Sciences</a> lien vers le site

de la Faculté des Sciences
 ancre avec les attributs id et href
 Une ancre est un repère que l'on peut mettre dans une
page HTML si elle est très longue, cela aide à la navigation
et rend un contenu plus facile à parcourir.
 Cela permet par exemple aux visiteurs d'un site web d'aller
directement à la partie qui les intéresse.
 Pour créer une ancre, il suffit de rajouter l'attribut id à une
balise qui va alors servir de repère.
HTML5 ET CSS
 ancre avec les attributs id et href exemple
<h1>Ma grande page</h1>

<p>
Découvrez nos conseils d’aménagement pour :<br>
<a href="#cuisine">La cuisine</a><br>
<a href="#jardin">Le jardin</a><br>
<a href="#salon">Le salon</a><br>
</p>
<h2 id="cuisine">La cuisine</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="jardin">Le jardin</h2>
<h2 id="salon">Le salon</h2>
HTML5 ET CSS
 Insertion image
 La balise qui permet d'insérer une image est une balise orpheline :
<img>
 Pour fonctionner correctement, la balise <img> doit être
accompagnée de deux attributs :
 src : cet attribut permet d'indiquer la source de l'image.
 alt : cet attribut permet de donner à l'image une description
alternative.
<p>
Voici une très belle photo que j'ai trouvée :<br>
<img src="images/image.jpg" alt="Photo de plage vue du dessus" />
</p>
HTML5 ET CSS
Intégrez le CSS dans la page HTML
CSS permet de styliser les éléments HTML pour rendre les pages web plus
esthétiques. Voici les concepts clés de CSS.
 Incorporer CSS dans une page HTML.
 CSS en ligne (dans l’attribut style)
Ex: <p style="color: red;">Ceci est un texte rouge.</p>
 CSS interne (dans l’élément <style> du <head>)
Ex: <head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
HTML5 ET CSS
Intégrez le CSS dans la page HTML
 CSS externe (dans un fichier .css)
on Cree un fichier .css dans le dossier du projet et on y met
le style.
<head>
<link href="style.css" rel="stylesheet">
</head>
 Voir annexe cours pour la suite de css

HTML5 ET CSS
Appliquez une propriété CSS à une balise HTML
 Soit la syntaxe suivante : cela applique la couleur bleue au
titre h1
h1 {
color: blue;
}
 Detail
HTML5 ET CSS
Appliquez un style à un élément isolé avec
l'attribut class
 marquez un élément avec l'attribut class dans le fichier .html class est
un attribut que l'on peut mettre sur n'importe quelle balise HTML :
<body>
<h1>Titre principal</h1>
<p class="ma-classe">Ceci est le contenu de mon deuxième
paragraphe</p>
<h2>Voilà mon sous-titre h2</h2>
</body>
.
 appelez le nom de l'attribut class via un dans le fichier .css Pour faire
cela, on va indiquer dans le fichier .css le nom de notre classe précédée
d'un point
HTML5 ET CSS
Appliquez un style à un élément isolé avec
l'attribut class
.
 appelez le nom de l'attribut class via un dans le fichier .css Pour faire
cela, on va indiquer dans le fichier .css le nom de notre classe précédée
d'un point <body>
<h1>Titre principal</h1>
<p class="ma-classe">Ceci est le contenu de mon deuxième
paragraphe</p>
<h2>Voilà mon sous-titre h2</h2>
</body>
 CSS
.ma-classe {
color: blue;
}
HTML5 ET CSS
Créez un tableau en HTML et CSS

 La balise en paire <table> </table> indique le début et la fin d'un tableau.
Cette balise est de type .
 Indiquez les valeurs du tableau avec les balises HTML <tr> et <td>
 Pour construire un tableau ligne par ligne, on indique pour chaque ligne,
<tr> (pour table row ou "rangée du tableau"), le contenu des différentes
cellules,<td> (pour table data ou "donnée" ou "entrée") :
 <tr> </tr> indique le début et la fin d'une ligne du tableau ;
 <td> </td> indique le début et la fin du contenu d'une cellule.
HTML5 ET CSS

HTML5 ET CSS

<table>
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Pays</th>
</tr>
<tr>
<td>Carmen</td>
<td>33 ans</td>
<td>Espagne</td>
</tr>
<tr>
<td>Michelle</td>
<td>26 ans</td>
<td>États-Unis</td>
</tr>
</table>

Cours 2 Interface G-24-25

Transféré par

Droits d'auteur :

Formats disponibles

Cours 2 Interface G-24-25

Transféré par

Informations du document

Titre original

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

Cours 2 Interface G-24-25

Transféré par

Droits d'auteur :

Formats disponibles

INF273

DÉVELOPPEMENT D’INTERFACES GRAPHIQUES

COURS 2 CONCEPTION INTERFACES WEB

 On très bien créer une interface web uniquement en HTML…

 Ce langage est venu compléter le HTML en 1996, et il est toujours

 Le CSS a besoin d'une base en HTML pour fonctionner. C'est pour

 Mais ensuite, c’est le navigateur web qui fait le reste du travail :

 Le rôle du navigateur est donc essentiel !

 On ne dirait pas comme ça, mais un navigateur est un

 Les balises indiquent la nature du texte qu'elles encadrent. Elles

 La balise en paire <head> </head> contient deux balises qui donnent

 Paragraphes avec les balises <p> </p>

 insérez la liste dans des balises <ul> </ul> ou <ol> </ol>

 <em> </em> Mettre le texte en italique.

 <strong> </strong> Mettre le texte en gras.

 <U> </U> Souligner le texte

lien hypertexte en HTML

 <a href="Contact.html">Nous Contacter</a> montre le lien vers la

 <a href="https://fs-univ-dla.com/">Fac Sciences</a> lien vers le site

 <a href="https://fs-univ-dla.com/">Fac Sciences</a> lien vers le site

 ancre avec les attributs id et href exemple

<h1>Ma grande page</h1>

 Voir annexe cours pour la suite de css

Créez un tableau en HTML et CSS

Créez un tableau en HTML et CSS

Créez un tableau en HTML et CSS

Vous aimerez peut-être aussi