Scribd
Importer
15 vues165 pages

Cours HTML-4

Ce document est un cours d'introduction au HTML, expliquant les bases du langage de balisage utilisé pour créer des pages Web. Il couvre la structure d'un document HTML, les éléments, les balises, les attributs, ainsi que des exemples pratiques pour créer une page Web simple. Le cours aborde également l'historique du HTML et les outils nécessaires pour apprendre à coder en HTML.

Transféré par

Chantal
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
15 vues165 pages

Cours HTML-4

Ce document est un cours d'introduction au HTML, expliquant les bases du langage de balisage utilisé pour créer des pages Web. Il couvre la structure d'un document HTML, les éléments, les balises, les attributs, ainsi que des exemples pratiques pour créer une page Web simple. Le cours aborde également l'historique du HTML et les outils nécessaires pour apprendre à coder en HTML.

Transféré par

Chantal
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

COURS HTML

INTRODUCTION

• Qu'est-ce que le HTML ?


• HTML signifie Hyper Text Markup Language
• HTML est le langage de balisage standard pour la création de pages Web
• HTML décrit la structure d'une page Web
• HTML se compose d'une série d'éléments
• Les éléments HTML indiquent au navigateur comment afficher le contenu
• Les éléments HTML étiquettent des éléments de contenu tels que "ceci est un titre", "ceci est
un paragraphe", "ceci est un lien", etc.
UN DOCUMENT HTML SIMPLE

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
UN DOCUMENT HTML SIMPLE

• Exemple expliqué
• La déclaration <!DOCTYPE html> définit que ce document est un document HTML5
• L' élément <html> est l'élément racine d'une page HTML
• L' élément <head> contient des méta-informations sur la page HTML
• L’ élément <title> spécifie un titre pour la page HTML (qui s'affiche dans la barre de titre du navigateur ou
dans l'onglet de la page)
• L' élément <body> définit le corps du document et est un conteneur pour tous les contenus visibles, tels que
les titres, les paragraphes, les images, les hyperliens, les tableaux, les listes, etc.
• L' élément <h1> définit un grand titre
• L' élément <p> définit un paragraphe
QU'EST-CE QU'UN ÉLÉMENT HTML ?

• Un élément HTML est défini par une balise de début, du contenu et une balise de fin :
• < tagname > Le contenu va ici... </ tagname >
• L' élément HTML est tout, de la balise de début à la balise de fin :
• < h1 > Ma première rubrique </ h1 >
• < p > Mon premier paragraphe. </ p >
QU'EST-CE QU'UN ÉLÉMENT HTML ?

Start tag Element content End tag


<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none

Remarque : Certains éléments HTML n'ont pas de contenu (comme l'élément <br>). Ces
éléments sont appelés éléments vides. Les éléments vides n'ont pas de balise de fin !
NAVIGATEURS WEB

• Le but d'un navigateur web (Chrome, Edge, Firefox, Safari) est de lire des documents
HTML et de les afficher correctement.
• Un navigateur n'affiche pas les balises HTML, mais les utilise pour déterminer comment
afficher le document :
NAVIGATEURS WEB
STRUCTURE DES PAGES HTML

• Ci-dessous, une visualisation d'une structure de page HTML :


STRUCTURE DES PAGES HTML

• Remarque : Le contenu de la section <body> (la zone blanche ci-dessus) sera affiché
dans un navigateur. Le contenu de l'élément <title> sera affiché dans la barre de titre du
navigateur ou dans l'onglet de la page.
HISTORIQUE HTML

Depuis les débuts du World Wide Web, il existe de nombreuses versions de HTML :
Ce cours suit la dernière norme HTML5.
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2


1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1

2017 W3C Recommendation: HTML5.1 2nd Edition

2017 W3C Recommendation: HTML5.2


ÉDITEURS HTML

• Un simple éditeur de texte est tout ce dont vous avez besoin pour apprendre le HTML.
• Apprendre le HTML à l'aide du Bloc-notes ou de TextEdit
• Les pages Web peuvent être créées et modifiées à l'aide d'éditeurs HTML professionnels.
• Cependant, pour apprendre le HTML, nous recommandons un simple éditeur de texte comme Notepad
(PC) ou TextEdit (Mac).
• Nous pensons que l'utilisation d'un simple éditeur de texte est un bon moyen d'apprendre le HTML.
• Suivez les étapes ci-dessous pour créer votre première page Web avec le Bloc-notes ou TextEdit.
•
ÉDITEURS HTML

• Étape 1 : Ouvrir le Bloc-notes (PC)


• Windows 8 ou version ultérieure :
• Ouvrez l' écran de démarrage (le symbole de la fenêtre en bas à gauche de votre
écran).Tapez Bloc -notes .
• Windows 7 ou antérieur :
• Ouvrez Démarrer > Programmes > Accessoires > Bloc -notes
ÉDITEURS HTML

• Étape 1 : Ouvrez TextEdit (Mac)


• Ouvrez Finder > Applications > TextEdit
• Modifiez également certaines préférences pour que l'application enregistre correctement
les fichiers. Dans Préférences> Format> choisissez "Texte brut"
• Ensuite, sous "Ouvrir et enregistrer", cochez la case "Afficher les fichiers HTML sous
forme de code HTML au lieu de texte formaté".
• Ouvrez ensuite un nouveau document pour placer le code.
ÉDITEURS HTML

• Étape 2 : Écrivez du code HTML


• Écrivez ou copiez le code HTML suivant dans le Bloc-notes :
• <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
ÉDITEURS HTML

• Étape 3 : Enregistrer la page HTML


• Enregistrez le fichier sur votre ordinateur. Sélectionnez Fichier > Enregistrer
sous dans le menu Bloc-notes.
• Nommez le fichier "[Link]" et définissez l'encodage sur UTF-8 (qui est l'encodage
préféré pour les fichiers HTML).
•
ÉDITEURS HTML

Astuce : Vous pouvez utiliser .htm ou .html comme extension de fichier. Il n'y a pas de
différence, c'est à vous de décider.
• Étape 4 : Afficher la page HTML dans votre navigateur
• Ouvrez le fichier HTML enregistré dans votre navigateur préféré (double-cliquez sur le
fichier ou faites un clic droit - et choisissez "Ouvrir avec").
• Le résultat ressemblera beaucoup à ceci :
ÉDITEURS HTML
DOCUMENTS HTML

• Tous les documents HTML doivent commencer par une déclaration de type de document : <!DOCTYPE html>.
• Le document HTML lui-même commence par <html> et se termine par </html>.
• La partie visible du document HTML se situe entre <body> et </body>.
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
LA DÉCLARATION <!DOCTYPE>

• La déclaration <!DOCTYPE> représente le type de document et aide les navigateurs à


afficher correctement les pages Web.
• Il ne doit apparaître qu'une seule fois, en haut de la page (avant toute balise HTML).
• La déclaration <!DOCTYPE> n'est pas sensible à la casse.
• La déclaration <!DOCTYPE> pour HTML5 est :
• <!DOCTYPE html>
EN-TÊTES HTML

• Les titres HTML sont définis avec les balises <h1> à <h6>.
• <h1> définit la rubrique la plus grande. <h6> définit la rubrique la plus petite :
• <h1>This is heading 1</h1>
• <h2>This is heading 2</h2>
• <h3>This is heading 3</h3>
• <h4>This is heading 4</h4>
• <h5>This is heading 5</h5>
• <h6>This is heading 6</h6>
PARAGRAPHES HTML

• Les paragraphes HTML sont définis avec la balise <p> :


• Exemple
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
LIENS HTML

• Les liens HTML sont définis avec la balise <a> :


• Exemple
• <a href="[Link] is a link</a>
• La destination du lien est spécifiée dans l'attribut href.
• Les attributs sont utilisés pour fournir des informations supplémentaires sur les éléments
HTML.
• Vous en apprendrez plus sur les attributs dans un chapitre ultérieur.
IMAGES HTML

• Les images HTML sont définies avec la balise <img>.


• Le fichier source (src), le texte alternatif (alt), width et height sont fournis en tant
qu'attributs :
• Exemple
• <img src="[Link]" alt="[Link]" width="104" height="142">
COMMENT AFFICHER LA SOURCE HTML ?

• Avez-vous déjà vu une page Web et vous êtes-vous demandé « Hé ! Comment ont-ils fait ça ?
• Afficher le code source HTML :
• Faites un clic droit dans une page HTML et sélectionnez "Afficher la source de la page" (dans Chrome)
ou "Afficher la source" (dans Edge), ou similaire dans d'autres navigateurs. Cela ouvrira une fenêtre
contenant le code source HTML de la page.
• Inspectez un élément HTML :
• Faites un clic droit sur un élément (ou une zone vide), et choisissez "Inspecter" ou "Inspecter l'élément"
pour voir de quels éléments sont constitués (vous verrez à la fois le HTML et le CSS).Vous pouvez
également modifier le code HTML ou CSS à la volée dans le panneau Éléments ou Styles qui s'ouvre.
•
ÉLÉMENTS HTML

• L' élément HTML est tout, de la balise de début à la balise de fin :


• < tagname > Le contenu va ici... < /tagname >
• Exemples de certains éléments HTML :
• < h1 > Ma première rubrique < /h1 >
• < p > Mon premier paragraphe. < /p >
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
ÉLÉMENTS HTML

• Remarque : Certains éléments HTML n'ont pas de contenu (comme l'élément


<br>). Ces éléments sont appelés éléments vides. Les éléments vides n'ont pas de balise
de fin !
ÉLÉMENTS HTML IMBRIQUÉS

• Les éléments HTML peuvent être imbriqués (cela signifie que les éléments peuvent contenir d'autres
éléments).
• Tous les documents HTML sont constitués d'éléments HTML imbriqués.
• L'exemple suivant contient quatre éléments HTML (<h1>,<p>,<html>et <body>)
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
ÉLÉMENTS HTML IMBRIQUÉS

• Exemple expliqué
• L' élément <html> est l'élément racine et il définit l'ensemble du document HTML.
• Il a une balise de début <html>et une balise de fin </html>.
• Ensuite, à l'intérieur de l' élément <html>, il y a un élément <body> :
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
ÉLÉMENTS HTML IMBRIQUÉS

• L' élément <body> définit le corps du document.


• Il a une balise de début <body>et une balise de fin </body>.
• Ensuite, à l'intérieur de l' élément <body> il y a deux autres éléments : <h1>et <p>:
• <h1>My First Heading</h1>
<p>My first paragraph.</p>
• L' élément <h1> définit un titre.
• Il a une balise de début <h1> et une balise de fin </h1>:
• <h1>My First Heading</h1>
ÉLÉMENTS HTML IMBRIQUÉS

• L' élément <p> définit un paragraphe.


• Il a une balise de début <p>et une balise de fin </p>:
• <p>My first paragraph.</p>
• Ne sautez jamais la balise de fin
• Certains éléments HTML s'afficheront correctement, même si vous oubliez la balise de
fin :
ÉLÉMENTS HTML IMBRIQUÉS

• <html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>
Cependant, ne vous fiez jamais à cela ! Des résultats inattendus et des erreurs
peuvent se produire si vous oubliez la balise de fin !
ÉLÉMENTS HTML VIDES

• Les éléments HTML sans contenu sont appelés éléments vides.


• La balise <br> définit un saut de ligne et est un élément vide sans balise fermante :
• Exemple
• <p>This is a <br> paragraph with a line break.</p>
• HTML n'est pas sensible à la casse
• Les balises HTML ne sont pas sensibles à la casse : <P> signifie la même chose que <p>.
• La norme HTML ne nécessite pas de balises en minuscules, mais le W3C recommande les minuscules
en HTML et exige des minuscules pour les types de documents plus stricts comme XHTML.
• Dans ce cours, nous utilisons toujours des noms de balises en minuscules.
ATTRIBUTS HTML

• Les attributs HTML fournissent des informations supplémentaires sur les éléments
HTML.
Attributs HTML
• Tous les éléments HTML peuvent avoir des attributs
• Les attributs fournissent des informations supplémentaires sur les éléments
• Les attributs sont toujours spécifiés dans la balise de début
• Les attributs viennent généralement en paires nom/valeur comme : nom="valeur"
ATTRIBUTS HTML

L'attribut href
• La balise <a> définit un lien hypertexte. L' attribut href spécifie l'URL de la page vers laquelle
le lien va :
• <a href="[Link] Orange</a>
L'attribut src
• La balise <img> est utilisée pour intégrer une image dans une page HTML. L' attribut src
spécifie le chemin vers l'image à afficher :
• <img src="img_girl.jpg">
ATTRIBUTS HTML

• Il existe deux manières de spécifier l'URL dans l'attribut src :


• 1. URL absolue - Liens vers une image externe hébergée sur un autre site Web. Exemple: src="
[Link] " .
• Remarques : Les images externes peuvent être sous copyright. Si vous n'obtenez pas la permission de
l'utiliser, vous pourriez être en violation des lois sur le droit d'auteur. De plus, vous ne pouvez pas contrôler les
images externes ; il peut soudainement être supprimé ou modifié.
• 2. URL relative - Liens vers une image hébergée sur le site Web. Ici, l'URL n'inclut pas le nom de domaine. Si
l'URL commence sans barre oblique, elle sera relative à la page en cours. Exemple : src="img_fille.jpg". Si l'URL
commence par une barre oblique, elle sera relative au domaine. Exemple : src="/images/img_fille.jpg".
• Conseil : Il est presque toujours préférable d'utiliser des URL relatives. Ils ne se briseront pas si vous changez
de domaine.
LES ATTRIBUTS LARGEUR ET HAUTEUR

• La balise <img> doit également contenir les attributs width et , qui spécifient la largeur et la
hauteur de l'image (en pixels) : height
• Exemple
• <img src="img_girl.jpg" width="500" height="600">
L'attribut alt
• L'attribut alt requiert la balise <img> pour spécifier un texte alternatif pour une image, si
l'image ne peut pas être affichée pour une raison quelconque. Cela peut être dû à une
connexion lente, ou à une erreur dans l'attribut src, ou si l'utilisateur utilise un lecteur
d'écran.
LES ATTRIBUTS LARGEUR ET HAUTEUR

• Exemple
• <img src="img_girl.jpg" alt="Girl with a jacket">
• Exemple
• Voyez ce qui se passe si nous essayons d'afficher une image qui n'existe pas :
• <img src="img_typo.jpg" alt="Girl with a jacket">
L'ATTRIBUT DE STYLE

• L’ attribut style est utilisé pour ajouter des styles à un élément, tels que la couleur, la
police, la taille, etc.
• Exemple
<p style="color:red;">This is a red paragraph.</p>
Vous en apprendrez plus sur les styles dans notre chapitre Styles HTML
L'ATTRIBUT LANG

• Vous devez toujours inclure l'attribut lang à l'intérieur de la balise <html>, pour déclarer la
langue de la page Web. Ceci est destiné à aider les moteurs de recherche et les navigateurs.
• L'exemple suivant spécifie l'anglais comme langue :
• <!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
L'ATTRIBUT LANG

• Les codes de pays peuvent également être ajoutés au code de langue dans l'attribut [Link],
les deux premiers caractères définissent la langue de la page HTML, et les deux derniers
caractères définissent le pays.
• L'exemple suivant spécifie l'anglais comme langue et les États-Unis comme pays :
• <!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
L’ATTRIBUT TITLE

• L'attribut title définit des informations supplémentaires sur un élément.


• La valeur de l'attribut title s'affichera sous forme d'info-bulle lorsque vous passerez la souris sur
l'élément :
• <p title="I'm a tooltip">This is a paragraph.</p>
• Nous vous suggérons de toujours utiliser des attributs en minuscules
• La norme HTML n'exige pas de noms d'attributs en minuscules.
• L'attribut title (et tous les autres attributs) peut être écrit en majuscules ou en minuscules
comme title ou TITLE .
• Cependant, le W3C recommande des attributs en minuscules dans HTML et exige des attributs en
minuscules pour des types de documents plus stricts comme XHTML.
L’ATTRIBUT TITLE

• Nous vous suggérons de toujours citer les valeurs d'attribut


• La norme HTML n'exige pas de guillemets autour des valeurs d'attribut.
• Cependant, le W3C recommande des guillemets en HTML et exige des guillemets
pour des types de documents plus stricts comme XHTML.
• Bien:
• <a href="[Link] pour visiter notre site</a>
• Mal:
• <a href=[Link] pour visiter notre site</a>
L’ATTRIBUT TITLE

• Parfois, vous devez utiliser des guillemets. Cet exemple n'affichera pas correctement
l'attribut title, car il contient un espace :
• Exemple
• <p title=About W3Schools>
L’ATTRIBUT TITLE

• Citations simples ou doubles ?


• Les guillemets doubles autour des valeurs d'attribut sont les plus courants en HTML,
mais les guillemets simples peuvent également être utilisés.
• Dans certaines situations, lorsque la valeur de l'attribut elle-même contient des
guillemets doubles, il est nécessaire d'utiliser des guillemets simples :
• <p title='John "ShotGun" Nelson'>
• Ou vice versa:
• <p title="John 'ShotGun' Nelson">
RÉSUMÉ DU CHAPITRE

• Tous les éléments HTML peuvent avoir des attributs


• L' attribut href de <a> spécifie l'URL de la page vers laquelle le lien va
• L' attribut src de <img> spécifie le chemin vers l'image à afficher
• Les attributs width et height fournissent des informations sur la taille des images <img>
• L' attribut alt de <img> fournit un texte alternatif pour une image
• L' attribut style est utilisé pour ajouter des styles à un élément, tels que la couleur, la police, la taille, etc.
• L' attribut lang de la balise <html> déclare la langue de la page Web
• L' attribut title définit des informations supplémentaires sur un élément
EN- TÊTES HTML

• Les titres HTML sont des titres ou des sous-titres que vous souhaitez afficher sur une
page Web.
• <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
• Remarque : Les navigateurs ajoutent automatiquement un espace blanc (une marge)
avant et après un titre.
EN- TÊTES HTML

• Les titres sont importants


• Les moteurs de recherche utilisent les titres pour indexer la structure et le contenu de
vos pages Web.
• Les utilisateurs parcourent souvent une page par ses titres. Il est important d'utiliser des
en-têtes pour montrer la structure du document.
• Les en-têtes <h1> doivent être utilisés pour les en-têtes principaux, suivis des en-têtes
<h2>, puis les moins importants <h3>, et ainsi de suite.
• Remarque : Utilisez les en-têtes HTML uniquement pour les en-têtes. N'utilisez pas
d'en-têtes pour rendre le texte BIG ou bold .
EN- TÊTES HTML

• Titres plus gros


• Chaque titre HTML a une taille par défaut. Cependant, vous pouvez spécifier la taille de
n'importe quel titre avec l'attribut style, en utilisant la propriété CSS font-size :
• Exemple
• <h1 style="font-size:60px;">Heading 1</h1>
PARAGRAPHES HTML

• Un paragraphe commence toujours sur une nouvelle ligne et est


généralement un bloc de texte.
Exemple
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
AFFICHAGE HTML

• Vous ne pouvez pas être sûr de la façon dont HTML sera affiché.
• Des écrans grands ou petits et des fenêtres redimensionnées créeront
des résultats différents.
• Avec HTML, vous ne pouvez pas modifier l'affichage en ajoutant des
espaces ou des lignes supplémentaires dans votre code HTML.
• Le navigateur supprimera automatiquement tous les espaces et lignes
supplémentaires lors de l'affichage de la page :
AFFICHAGE HTML

Exemple
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
STYLES HTML

• L'attribut HTML style est utilisé pour ajouter des styles à un élément,
tels que la couleur, la police, la taille, etc.

• Exemple
• je suis rouge
• Je suis bleu

• Je suis grand
L'ATTRIBUT DE STYLE HTML

La définition du style d'un élément HTML peut être effectuée avec


l'attribut style.
L'attribut HTML style a la syntaxe suivante :
<tagname style="property:value;">
La propriété est une propriété CSS. La valeur est une valeur
CSS.
• Vous en apprendrez plus sur CSS plus loin dans ce cours.
COULEUR DE L'ARRIÈRE PLAN

• La propriété CSS background-color définit la couleur d'arrière-plan d'un élément


HTML.
• Exemple
• Définissez la couleur d'arrière-plan d'une page sur powderblue :
•
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
COULEUR DE L'ARRIÈRE PLAN

Exemple
• Définissez la couleur d'arrière-plan pour deux éléments différents :
<body>

<h1 style="background-color:powderblue;">This is a heading</h1>


<p style="background-color:tomato;">This is a paragraph.</p>

</body>
COULEUR DU TEXTE

• La propriété CSS color définit la couleur du texte d'un élément HTML :


Exemple
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
POLICES

• La propriété CSS font-family définit la police à utiliser pour un


élément HTML :
Exemple
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
TAILLE DU TEXTE

• La propriété CSS font-sizedéfinit la taille du texte d'un élément


HTML :
Exemple
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
ALIGNEMENT DU TEXTE

• La propriété CSS text-align définit l'alignement horizontal du texte


pour un élément HTML :
Exemple
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
RÉSUMÉ DU CHAPITRE

•Utiliser l'attribut style pour styliser les éléments HTML


•Utiliser background-color pour la couleur de fond
•Utiliser color pour les couleurs du texte
•Utiliser font-family pour les polices de texte
•Utiliser font-size pour les tailles de texte
•Utiliser text-align pour l'alignement du texte
FORMATAGE DU TEXTE HTML

• HTML contient plusieurs éléments pour définir le texte avec une


signification particulière.
Exemple
• This text is bold
• This text is italic
• This is subscript and superscript
ÉLÉMENTS DE FORMATAGE HTML

Les éléments de mise en forme ont été conçus pour afficher des types de
texte spéciaux :
•<b>- Texte en gras
•<strong>- Texte important
•<i>- Texte en italique
•<em>- Texte accentué
•<mark>- Texte marqué
•<small>- Texte plus petit
•<del>- Texte supprimé
•<ins>- Texte inséré
•<sub>- Texte en indice
•<sup>- Texte en exposant
ÉLÉMENTS HTML <B> ET <STRONG>

• L'élément HTML <b> définit le texte en gras, sans aucune importance


supplémentaire.
Exemple
<b>This text is bold</b>
• L' élément HTML <strong> définit le texte avec une forte
importance. Le contenu à l'intérieur est généralement affiché en gras.
Exemple
<strong>This text is important!</strong>
ÉLÉMENTS HTML <I> ET <EM>

• L'élément HTML <i> définit une partie de texte dans une voix ou une
humeur alternative. Le contenu à l'intérieur est généralement affiché en
italique.
Astuce : Le <i> tag est souvent utilisé pour indiquer un terme technique,
une expression d'une autre langue, une pensée, un nom de navire, etc.
Exemple
<i>This text is italic</i>

• L'élément HTML <em> définit le texte mis en évidence. Le contenu à


l'intérieur est généralement affiché en italique.
Conseil : Un lecteur d'écran prononcera les mots <em> avec emphase, en
utilisant l'accent verbal.
Exemple
<em>This text is emphasized</em>
ÉLÉMENT HTML <PETIT>

• L'élément HTML <small> définit un texte plus petit :


Exemple
<small>This is some smaller text.</small>
ÉLÉMENT HTML <MARQUE>

• L'élément HTML <mark> définit le texte qui doit être marqué ou mis en
surbrillance :
Exemple
<p>Do not forget to buy <mark>milk</mark> today.</p>
ÉLÉMENT HTML <DEL>

• L' élément HTML <del> définit le texte qui a été supprimé d'un
document. Les navigateurs barrent généralement une ligne à travers le
texte supprimé :
Exemple
<p>My favorite color is <del>blue</del> red.</p>
ÉLÉMENT HTML <INS>

• L' élément HTML <ins> définit un texte qui a été inséré dans un
document. Les navigateurs souligneront généralement le texte inséré :
Exemple
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
ÉLÉMENT HTML <SUB>

• L'élément HTML <sub> définit le texte en indice. Le texte en indice


apparaît un demi-caractère sous la ligne normale et est parfois rendu
dans une police plus petite. Le texte en indice peut être utilisé pour les
formules chimiques, comme H 2 O :
Exemple
<p>This is <sub>subscripted</sub> text.</p>
ÉLÉMENT HTML <SUP>

• L'élément HTML <sup> définit le texte en exposant. Le texte en


exposant apparaît un demi-caractère au-dessus de la ligne normale et
est parfois rendu dans une police plus petite. Le texte en exposant peut
être utilisé pour les notes de bas de page, comme WWW [1] :
Exemple
<p>This is <sup>superscripted</sup> text.</p>
CITATION HTML ET ÉLÉMENTS DE CITATION

• Dans ce chapitre, nous passerons en revue les éléments HTML :


• <blockquote>,
• <q>,
• <abbr>,
• <address>,
• <cite>,
• <bdo>.
HTML <BLOCKQUOTE> POUR LES CITATIONS

• L'élément HTML <blockquote> définit une section qui est citée à partir d'une autre source.
Les navigateurs indentent généralement les éléments <blockquote>.
<p>Here is a quote from WWF's website:</p>
<blockquote cite="[Link]
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
HTML <Q> POUR LES CITATIONS COURTES

• La balise HTML <q> définit une courte citation.


• Les navigateurs insèrent normalement des guillemets autour de la citation.
• <p>WWF's goal is to: <q>Build a future where people live in
harmony with nature.</q></p>
HTML <ABBR> POUR LES ABRÉVIATIONS

• La balise HTML <abbr> définit une abréviation ou un acronyme, comme "HTML", "CSS",
"Mr.", "Dr.", "ASAP", "ATM".
• Les abréviations de marquage peuvent donner des informations utiles aux navigateurs,
aux systèmes de traduction et aux moteurs de recherche.
• Conseil : Utilisez l'attribut de titre global pour afficher la description de l'abréviation/de
l'acronyme lorsque vous passez la souris sur l'élément.
• <p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>
HTML <ADRESS> POUR LES INFORMATIONS DE
CONTACT
• La balise HTML <address> définit les coordonnées de l'auteur/propriétaire d'un document ou d'un
article.
• Les informations de contact peuvent être une adresse e-mail, une URL, une adresse physique, un numéro
de téléphone, un identifiant de réseau social, etc.
• Le texte de l'élément <address> s'affiche généralement en italique et les navigateurs ajoutent toujours un
saut de ligne avant et après l'élément <address>.
• <address>
Written by John Doe.<br>
Visit us at:<br>
[Link]<br>
Box 564, Disneyland<br>
USA
</address>
HTML <CITE> POUR LE TITRE DU TRAVAIL

• La balise HTML <cite> définit le titre d'une œuvre créative (par exemple un livre, un
poème, une chanson, un film, une peinture, une sculpture, etc.).
• Remarque : Le nom d'une personne n'est pas le titre d'une œuvre.
• Le texte de l'élément <cite> s'affiche généralement en italique.
• <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
HTML <BDO> POUR LE REMPLACEMENT
BIDIRECTIONNEL

• BDO est l'abréviation de Bi-Directional Override.


• La balise HTML <bdo> est utilisée pour remplacer la direction actuelle du texte :

<bdo dir="rtl">This text will be written from right to left</bdo>


COMMENTAIRES HTML

• Les commentaires HTML ne sont pas affichés dans le navigateur, mais ils
peuvent aider à documenter votre code source HTML.
Balise de commentaire HTML
• Vous pouvez ajouter des commentaires à votre source HTML en utilisant la
syntaxe suivante :
• <!-- Write your comments here -->
• Notez qu'il y a un point Dd'exclamation (!) dans la balise de début, mais
pas dans la balise de fin.
• Remarque : Les commentaires ne sont pas affichés par le navigateur,
mais ils peuvent aider à documenter votre code source HTML.
COMMENTAIRES HTML

Ajoutez des commentaires


• Avec les commentaires, vous pouvez placer des notifications et des
rappels dans votre code HTML :
<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->


COMMENTAIRES HTML

Masquer le contenu
• Les commentaires peuvent être utilisés pour masquer le contenu.
• Ce qui peut être utile si vous masquez temporairement du contenu :
<p>This is a paragraph.</p>

<!-- <p>This is another paragraph </p> -->

<p>This is a paragraph too.</p>


COMMENTAIRES HTML

Masquer le contenu
Vous pouvez également masquer plus d'une ligne, tout ce qui se trouve entre le <!-- et le --
> sera masqué à l'écran.
Masquez une section de code HTML :
<p>This is a paragraph.</p>
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>
COMMENTAIRES HTML

Masquer le contenu
Les commentaires sont également parfaits pour le débogage HTML, car
vous pouvez commenter les lignes de code HTML, une à la fois, pour
rechercher les erreurs.
Masquer le contenu en ligne
• Les commentaires peuvent être utilisés pour masquer des parties au
milieu du code HTML.
• Masquez une partie d'un paragraphe :
• <p>This <!-- great text --> is a paragraph.</p>
COULEURS HTML

• Les couleurs HTML sont spécifiées avec des noms de couleurs


prédéfinis ou avec des valeurs RVB, HEX, HSL, RGBA ou HSLA.
• Noms des couleurs
• En HTML, une couleur peut être spécifiée en utilisant un nom de
couleur :
COULEURS HTML

• HTML prend en charge 140 noms de couleurs standard.

Couleur de l'arrière plan

• Vous pouvez définir la couleur d'arrière-plan des éléments HTML :

• <h1 style="background-color:DodgerBlue;">Hello World</h1>


<p style="background-color:Tomato;">Lorem ipsum...</p>

Couleur du texte

• Vous pouvez définir la couleur du texte :

• Bonjour le monde

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.

• Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
COULEURS HTML

• <h1 style="color:Tomato;">Hello World</h1>


<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
COULEURS HTML

Couleur de la bordure
• Vous pouvez définir la couleur des bordures :
• <h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
COULEURS HTML

Valeurs de couleur
• En HTML, les couleurs peuvent également être spécifiées à l'aide de
valeurs RVB, de valeurs HEX, de valeurs HSL, de valeurs RVBA et de
valeurs HSLA.
• Les trois éléments <div> suivants ont leur couleur d'arrière-plan
définie avec les valeurs RVB, HEX et HSL :
COULEURS HTML

Valeurs de couleur
• Les deux éléments <div> suivants ont leur couleur d'arrière-plan
définie avec les valeurs RGBA et HSLA, ce qui ajoute un canal Alpha à
la couleur (ici, nous avons 50 % de transparence) :
COULEURS HTML

Valeurs de couleur
• <h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>


<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
STYLES HTML - CSS

• CSS(Cascading Style Sheets) signifie feuilles de style en cascade.


• CSS économise beaucoup de travail. Il peut contrôler la mise en page de plusieurs pages Web à la
fois.
Qu'est-ce que CSS ?
• Les feuilles de style en cascade (CSS) sont utilisées pour formater la mise en page d'une page Web.
• Avec CSS, vous pouvez contrôler la couleur, la police, la taille du texte, l'espacement entre les
éléments, la manière dont les éléments sont positionnés et disposés, les images d'arrière-plan ou les
couleurs d'arrière-plan à utiliser, différents affichages pour différents appareils et tailles d'écran, et
beaucoup plus!
• Conseil : Le mot cascade signifie qu'un style appliqué à un élément parent s'appliquera également à
tous les éléments enfants du parent. Ainsi, si vous définissez la couleur du corps du texte sur "bleu",
tous les titres, paragraphes et autres éléments de texte du corps auront également la même couleur
(sauf si vous spécifiez autre chose) !
STYLES HTML - CSS

Utiliser CSS
CSS peut être ajouté aux documents HTML de 3 manières :
• Inline - en utilisant l'attribut style à l'intérieur des éléments HTML
• Interne - en utilisant un élément <style> dans la section <head>
• Externe - en utilisant un élément <link> pour créer un lien vers un fichier
CSS externe

La façon la plus courante d'ajouter du CSS est de conserver les styles


dans des fichiers CSS externes. Cependant, dans ce cours, nous
utiliserons des styles en ligne et internes, car cela est plus facile à
démontrer et plus facile à essayer par vous-même.
STYLES HTML - CSS

CSS en ligne
Un CSS en ligne est utilisé pour appliquer un style unique à un seul élément
HTML.
Un CSS en ligne utilise l'attribut style d'un élément HTML.
L'exemple suivant définit la couleur du texte de l'élément <h1> sur bleu et la
couleur du texte de l'élément <p> sur rouge :

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>


STYLES HTML - CSS

CSS interne
• Un CSS interne est utilisé pour définir un style pour une seule page
HTML.
• Un CSS interne est défini dans la section <head> d'une page HTML, au
sein d'un élément <style>.
L'exemple suivant définit la couleur du texte de TOUS les éléments <h1>
(sur cette page) sur bleu et la couleur du texte de TOUS les éléments
<p> sur rouge. De plus, la page s'affichera avec une couleur de fond
"powderblue":
STYLES HTML - CSS

CSS interne
• <!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
STYLES HTML - CSS

CSS externe
• Une feuille de style externe est utilisée pour définir le style de
nombreuses pages HTML.
• Pour utiliser une feuille de style externe, ajoutez un lien vers celle-ci
dans la section <head> de chaque page HTML :
STYLES HTML - CSS

CSS externe
• <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
STYLES HTML - CSS

CSS externe
• La feuille de style externe peut être écrite dans n'importe quel éditeur de texte. Le fichier ne doit
contenir aucun code HTML et doit être enregistré avec une extension .css.
• Voici à quoi ressemble le fichier "[Link]":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Astuce : Avec une feuille de style externe, vous pouvez changer l'apparence de tout un site Web, en
changeant un seul fichier !
STYLES HTML - CSS

Couleurs, polices et tailles CSS

Ici, nous allons démontrer certaines propriétés CSS couramment


utilisées. Vous en apprendrez plus à leur sujet plus tard.
La propriété CSS color définit la couleur du texte à utiliser.
La propriété CSS font-family définit la police à utiliser.
La propriété CSS font-size définit la taille du texte à utiliser.
STYLES HTML - CSS

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
STYLES HTML - CSS

Bordure CSS
• La propriété CSS border définit une bordure autour d'un élément
HTML.
• Conseil : Vous pouvez définir une bordure pour presque tous les
éléments HTML.
• p {
border: 2px solid powderblue;
}
STYLES HTML - CSS

Rembourrage CSS
• La propriété CSS padding définit un rembourrage (espace) entre le
texte et la bordure.

•p {
border: 2px solid powderblue;
padding: 30px;
}
STYLES HTML - CSS

Marge CSS
• La propriété CSS margin définit une marge (espace) à l'extérieur de la
bordure.
• p {
border: 2px solid powderblue;
margin: 50px;
}
STYLES HTML - CSS

Lien vers le CSS externe


Les feuilles de style externes peuvent être référencées avec une URL complète ou avec un
chemin relatif à la page Web en cours.
Cet exemple utilise une URL complète pour créer un lien vers une feuille de style :
<link rel="stylesheet" href="[Link]
Cet exemple établit un lien vers une feuille de style située dans le dossier html du site Web
actuel :
<link rel="stylesheet" href="/html/[Link]">
Cet exemple établit un lien vers une feuille de style située dans le même dossier que la
page actuelle : <link rel="stylesheet" href="[Link]">
STYLES HTML - CSS

Résumé du chapitre

•Utiliser l'attribut HTML style pour le style en ligne


•Utilisez l' élément HTML <style> pour définir le CSS interne
•Utilisez l'élément HTML <link>pour faire référence à un fichier CSS externe
•Utilisez l'élément HTML <head>pour stocker les éléments <style> et <link>
•Utiliser la propriété CSS colorpour les couleurs du texte
•Utiliser la propriété CSS font-familypour les polices de texte
•Utiliser la propriété CSS font-sizepour les tailles de texte
•Utiliser la propriété CSS borderpour les bordures
•Utilisez la propriété CSS paddingpour l'espace à l'intérieur de la bordure
•Utilisez la propriété CSS margin pour l'espace en dehors de la bordure
LIENS HTML

• Les liens se trouvent dans presque toutes les pages Web.

• Les liens permettent aux utilisateurs de cliquer sur leur chemin d'une
page à l'autre.
LIENS HTML

Liens HTML – Hyperliens


• Les liens HTML sont des hyperliens.
• Vous pouvez cliquer sur un lien et passer à un autre document.
• Lorsque vous déplacez la souris sur un lien, la flèche de la souris se
transforme en une petite main.
• Remarque : Un lien ne doit pas nécessairement être du texte. Un lien
peut être une image ou tout autre élément HTML !
LIENS HTML

Liens HTML – Syntaxe


• La balise HTML <a> définit un lien hypertexte. Il a la syntaxe suivante :
• <a href="url">link text</a>
• L'attribut le plus important de l'élément <a> est l'attribut href, qui
indique la destination du lien.
• Le texte du lien est la partie qui sera visible pour le lecteur.
• Cliquer sur le texte du lien enverra le lecteur à l'adresse URL spécifiée.
LIENS HTML

Liens HTML – Syntaxe


• Cet exemple montre comment créer un lien vers [Link] :
• <a href="[Link] [Link]!</a>
• Par défaut, les liens apparaîtront comme suit dans tous les navigateurs :
• Un lien non visité est souligné et bleu
• Un lien visité est souligné et violet
• Un lien actif est souligné et rouge

• Astuce : Les liens peuvent bien sûr être stylisés avec CSS, pour avoir un
autre look !
LIENS HTML

Liens HTML - L'attribut cible


• Par défaut, la page liée sera affichée dans la fenêtre actuelle du navigateur. Pour changer
cela, vous devez spécifier une autre cible pour le lien.
• L' attribut target spécifie où ouvrir le document lié.
• L' attribut target peut avoir l'une des valeurs suivantes :
• _self- Défaut. Ouvre le document dans la même fenêtre/onglet que celui où il a été cliqué
• _blank- Ouvre le document dans une nouvelle fenêtre ou un nouvel onglet
• _parent- Ouvre le document dans le cadre parent
• _top- Ouvre le document dans tout le corps de la fenêtre
• Utilisez target="_blank" pour ouvrir le document lié dans une nouvelle fenêtre ou un
nouvel onglet de navigateur :
• <a href="[Link] target="_blank">Visit Orange!</a>
LIENS HTML

URL absolues vs URL relatives


• Les deux exemples ci-dessus utilisent une URL absolue (une adresse Web
complète) dans l'attribut href.
• Un lien local (un lien vers une page du même site Web) est spécifié avec une URL
relative (sans la partie "[Link] :
• <h2>Absolute URLs</h2>
<p><a href="[Link]
<p><a href="[Link]

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/[Link]">CSS Tutorial</a></p>
LIENS HTML

Liens HTML - Utiliser une image comme lien


• Pour utiliser une image comme lien, il suffit de mettre la balise <img> à
l'intérieur de la balise <a>:
• <a href="[Link]">
<img src="[Link]" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>
LIENS HTML

Lien vers une adresse e-mail


• Utilisez [Link] l'intérieur de l'attribut href pour créer un lien qui
ouvre le programme de messagerie de l'utilisateur (pour lui permettre
d'envoyer un nouvel e-mail) :
• <a href="[Link] email</a>
LIENS HTML

Bouton en tant que lien


• Pour utiliser un bouton HTML comme lien, vous devez ajouter du code
JavaScript.
• JavaScript vous permet de spécifier ce qui se passe lors de certains
événements, comme un clic sur un bouton :
• <button onclick="[Link]='[Link]'">HTML
Tutorial</button>
LIENS HTML

Titres des liens


• L'attribut title spécifie des informations supplémentaires sur un
élément. Les informations sont le plus souvent affichées sous forme de
texte d'info-bulle lorsque la souris se déplace sur l'élément.
• <a href="[Link] title="Go to W3Schools
HTML section">Visit our HTML Tutorial</a>
LIENS HTML

Résumé du chapitre
• Utiliser l'élément <a> pour définir un lien
• Utilisez l'attribut href pour définir l'adresse du lien
• Utilisez l'attribut target pour définir où ouvrir le document lié
• Utilisez l'élément <img> (à l'intérieur <a>) pour utiliser une image
comme lien
• Utilisez le schéma mailto: à l'intérieur de l'attribut href pour créer un
lien qui ouvre le programme de messagerie de l'utilisateur
LIENS HTML - DIFFÉRENTES COULEURS

• Un lien HTML s'affiche dans une couleur différente selon qu'il a été
visité, qu'il n'est pas visité ou qu'il est actif.
Couleurs des liens HTML
• Par défaut, un lien apparaîtra comme ceci (dans tous les navigateurs) :
• Un lien non visité est souligné et bleu
• Un lien visité est souligné et violet
• Un lien actif est souligné et rouge
• Vous pouvez modifier les couleurs de l'état des liens en utilisant CSS :
LIENS HTML - DIFFÉRENTES COULEURS

• Ici, un lien non visité sera vert sans soulignement. Un lien visité sera
rose sans soulignement. Un lien actif sera jaune et souligné. De plus,
lorsque vous passez la souris sur un lien (a:hover), il devient rouge et
souligné :
LIENS HTML - DIFFÉRENTES COULEURS

<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}

a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
LIENS HTML - DIFFÉRENTES COULEURS

Boutons lien
• Un lien peut également être stylisé comme un bouton, en utilisant CSS :
• <style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
</style>
LIENS HTML - CRÉER DES SIGNETS

• Les liens HTML peuvent être utilisés pour créer des signets, afin que les
lecteurs puissent accéder à des parties spécifiques d'une page Web.
Créer un signet en HTML
• Les signets peuvent être utiles si une page Web est très longue.
• Pour créer un signet, créez d'abord le signet, puis ajoutez-y un lien.
• Lorsque le lien est cliqué, la page défilera vers le bas ou vers le haut
jusqu'à l'emplacement avec le signet.
LIENS HTML - CRÉER DES SIGNETS

• Tout d’abord, utilisez l’attribut id pour créer un signet :


• <h2 id="C4">Chapter 4</h2>
• Ensuite, ajoutez un lien vers le signet ("Aller au chapitre 4"), à partir
de la même page :
• <a href="#C4">Jump to Chapter 4</a>
• Vous pouvez également ajouter un lien vers un signet sur une autre
page :
• <a href="html_demo.html#C4">Jump to Chapter 4</a>
LIENS HTML - CRÉER DES SIGNETS

Résumé du chapitre
• Utilisez l'attribut id (id=" value ") pour définir des signets dans une
page
• Utilisez l'attribut href (href="# value ") pour créer un lien vers le
signet
LIENS HTML - CRÉER DES SIGNETS

HTML Images
• Les images peuvent améliorer la conception et l'apparence d'une page
Web.
• <img src="pic_trulli.jpg" alt="Italian Trulli">
• <img src="img_girl.jpg" alt="Girl in a jacket">
LIENS HTML - CRÉER DES SIGNETS

Syntaxe des images HTML


• La balise HTML <img> est utilisée pour intégrer une image dans une page Web.
• Les images ne sont pas techniquement insérées dans une page Web ; les images
sont liées à des pages Web. La balise <img> crée un espace de maintien pour
l'image référencée.
• La balise <img> est vide, elle ne contient que des attributs et n'a pas de balise
fermante.
• La balise <img> a deux attributs obligatoires :
• src - Spécifie le chemin vers l'image
• alt - Spécifie un texte alternatif pour l'image

<img src="url" alt="alternatetext">


LIENS HTML - CRÉER DES SIGNETS

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src="[Link]" alt="HTML5 Icon" width="128" height="128">

<img src="[Link]" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>
LIENS HTML - CRÉER DES SIGNETS

Images animées
• HTML autorise les GIF animés :
• <img src="[Link]" alt="Computer
Man" style="width:48px;height:48px;">
Image en tant que lien
• Pour utiliser une image comme lien, insérez la balise <img> à l'intérieur de
la balise <a> :
• <a href="[Link]">
<img src="[Link]" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>
LIENS HTML - CRÉER DES SIGNETS

• Image flottante
• Utilisez la propriété CSS floatpour laisser flotter l'image à droite ou à
gauche d'un texte :
• <p><img src="[Link]" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="[Link]" alt="Smiley


face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
LIENS HTML - CRÉER DES SIGNETS

Image flottante
• Utilisez la propriété CSS floatpour laisser flotter l'image à droite ou à
gauche d'un texte :
• <p><img src="[Link]" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="[Link]" alt="Smiley


face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
LIENS HTML - CRÉER DES SIGNETS

Résumé du chapitre
• Utiliser l' élément HTML <img> pour définir une image
• Utilisez l' attribut HTML src pour définir l'URL de l'image
• Utilisez l'attribut HTML alt pour définir un texte alternatif pour une image, si elle
ne peut pas être affichée
• Utilisez le HTML width et les height attributs ou le CSS width et
les height propriétés pour définir la taille de l'image
• Utilisez la propriété CSS float pour laisser l'image flotter vers la gauche ou vers la
droite
CARTES D'IMAGES HTML

• Avec les images cliquables HTML, vous pouvez créer des zones
cliquables sur une image.
• Images cliquables
• La balise HTML <map>définit une image cliquable. Une image cliquable
est une image avec des zones cliquables. Les zones sont définies avec
une ou plusieurs <area>balises.
• Essayez de cliquer sur l'ordinateur, le téléphone ou la tasse de café
dans l'image ci-dessous :
CARTES D'IMAGES HTML

• <img src="[Link]" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="
[Link]">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="p
[Link]">
<area shape="circle" coords="337,300,44" alt="Coffee" href="cof
[Link]">
</map>
ICÔNE DE FAVORI HTML

• Un favicon est une petite image affichée à côté du titre de la page dans
l'onglet du navigateur.
Comment ajouter un favicon en HTML
• Vous pouvez utiliser n'importe quelle image que vous aimez comme
favicon. Vous pouvez également créer votre propre favicon sur des
sites comme [Link]
• Conseil : Un favicon est une petite image, il doit donc s'agir d'une
image simple avec un contraste élevé.
ICÔNE DE FAVORI HTML

• Une image favicon s'affiche à gauche du titre de la page dans l'onglet du navigateur,
comme ceci :

• Pour ajouter un favicon à votre site Web, enregistrez votre image favicon dans le
répertoire racine de votre serveur Web ou créez un dossier dans le répertoire racine
appelé images et enregistrez votre image favicon dans ce dossier. Un nom commun pour
une image favicon est "[Link]".
• Ensuite, ajoutez un élément <link> à votre fichier "[Link]", après l'élément <title>,
comme ceci :
ICÔNE DE FAVORI HTML

<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/[Link]">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
TABLEAUX HTML

• Les tableaux HTML permettent aux développeurs Web d'organiser les


données en lignes et en colonnes.
• Définir un tableau HTML
• Un tableau en HTML se compose de cellules de tableau à l'intérieur de
lignes et de colonnes
TABLEAUX HTML

• <table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
TABLEAUX HTML

• Cellules du tableau
• Chaque cellule du tableau est définie par un <td>et une balise </td>.
• td représente les données de table.
• Tout ce qui se trouve entre <td>et </td>est le contenu de la cellule du tableau.
• <table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
TABLEAUX HTML

• Remarque : les éléments de données du tableau sont les conteneurs


de données du tableau.
Ils peuvent contenir toutes sortes d'éléments HTML ; texte, images,
listes, autres tableaux, etc.
Lignes du tableau
• Chaque ligne du tableau commence par un <tr> et se termine par
une balise </tr>.
• tr signifie ligne de tableau.
TABLEAUX HTML

<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
TABLEAUX HTML

Vous pouvez avoir autant de lignes que vous le


souhaitez dans un tableau, assurez-vous
simplement que le nombre de cellules est le même
dans chaque ligne.
Remarque : Il peut arriver qu'une ligne ait plus ou moins de cellules
qu'une autre. Vous apprendrez cela dans un chapitre ultérieur.
TABLEAUX HTML

• En-têtes de tableau
• Parfois, vous voulez que vos cellules soient des en-têtes,
dans ces cas, utilisez la <th>balise au lieu de la <td>balise :
• Laissez la première ligne être des en-têtes de tableau :

• Par défaut, le texte des <th>éléments est en gras et centré,


mais vous pouvez modifier cela avec CSS.
TABLEAUX HTML

• <table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
TABLEAUX HTML

• Bordures de tableau HTML


• Les tableaux HTML peuvent avoir des bordures de styles et de formes
différents.
• table, th, td {
border: 1px solid black;
}
• Bordures de tableau réduites
border-collapse Pour éviter d'avoir des bordures doubles comme dans
l'exemple ci-dessus, définissez la propriété CSS sur collapse.
Cela fera s'effondrer les bordures en une seule bordure :
TABLEAUX HTML

• table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Style des bordures de tableau
• Si vous définissez une couleur d'arrière-plan pour chaque cellule et
donnez à la bordure une couleur blanche (la même que l'arrière-plan
du document), vous obtenez l'impression d'une bordure invisible :
TABLEAUX HTML

• table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
TABLEAUX HTML

• Bordures de table ronde


• Avec la propriété border-radius, les bordures ont des coins arrondis :
• table, th, td {
border: 1px solid black;
border-radius: 10px;
}
• Ignorez la bordure autour du tableau en tableomettant le sélecteur CSS :
• th, td {
border: 1px solid black;
border-radius: 10px;
}
TABLEAUX HTML

• Bordures de tableau en pointillés


• Avec la propriété border-style, vous pouvez définir l'apparence de la bordure.
• Les valeurs suivantes sont autorisées :
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden
TABLEAUX HTML

• th, td {
border-style: dotted;
}
• Couleur de la bordure
• Avec la border-colorpropriété, vous pouvez définir la couleur de la
bordure.
• th, td {
border-color: #96D4D4;
}
TABLEAUX HTML

• Tailles des tableaux HTML


• Les tableaux HTML peuvent avoir des tailles différentes pour chaque
colonne, ligne ou pour l'ensemble du tableau.
• Utilisez l'attribut style avec les propriétés width ou height pour
spécifier la taille d'un tableau, d'une ligne ou d'une colonne.
• Définissez la largeur du tableau sur 100 % :
TABLEAUX HTML

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
FORMULAIRES HTML

• Un formulaire HTML est utilisé pour collecter les entrées des


utilisateurs. L'entrée de l'utilisateur est le plus souvent envoyée à un
serveur pour traitement.
FORMULAIRES HTML

• L'élément <form>
• L'élément HTML <form> est utilisé pour créer un formulaire HTML pour
la saisie de l'utilisateur :
• <form>
.
form elements
.
</form>
FORMULAIRES HTML

L' élément <form> est un conteneur pour différents types d'éléments


d'entrée, tels que : champs de texte, cases à cocher, boutons radio,
boutons d'envoi, etc.
Tous les différents éléments de formulaire sont traités dans ce
chapitre: Éléments de formulaire HTML .
FORMULAIRES HTML

• L'élément <input>
• L'élément HTML <input>est l'élément de formulaire le plus utilisé.
• Un élément <input> peut être affiché de plusieurs façons, selon
l'attribut type.
• Voici quelques exemples:
FORMULAIRES HTML

Taper La description
<type d'entrée="texte"> Affiche un champ de saisie de texte sur une seule ligne
<type d'entrée="radio"> Affiche un bouton radio (pour sélectionner l'un des
nombreux choix)
<type d'entrée="case à cocher"> Affiche une case à cocher (pour sélectionner zéro ou
plusieurs choix)
<type d'entrée="soumettre"> Affiche un bouton de soumission (pour soumettre le
formulaire)
<type d'entrée="bouton"> Affiche un bouton cliquable
FORMULAIRES HTML

• Champs de texte
• Le <input type="text"> définit un champ de saisie sur une seule ligne pour la
saisie de texte.
• Un formulaire avec des champs de saisie pour le texte :
• <form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
• Remarque : Notez également que la largeur par défaut d'un champ de saisie est
de 20 caractères.
FORMULAIRES HTML

L'élément <label>
• Remarquez l'utilisation de l' élément <label> dans l'exemple ci-dessus.
• La balise <label> définit une étiquette pour de nombreux éléments de formulaire.
• L' élément <label> est utile pour les utilisateurs de lecteurs d'écran, car le lecteur
d'écran lira à haute voix l'étiquette lorsque l'utilisateur se concentrera sur l'élément
d'entrée.
• L' élément <label> aide également les utilisateurs qui ont des difficultés à cliquer
sur de très petites régions (telles que des boutons radio ou des cases à cocher) -
car lorsque l'utilisateur clique sur le texte dans l' élément <label>, il bascule le
bouton radio/case à cocher.
• L' attribut for de la balise <label> doit être égal à l' attribut id de
l' élément <input> pour les lier ensemble.
FORMULAIRES HTML

Boutons radio
• Le <input type="radio"> définit un bouton radio.
• Les boutons radio permettent à un utilisateur de sélectionner UN parmi un nombre limité
de choix.
• <p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
FORMULAIRES HTML

Cases à cocher
• Le <input type="checkbox"> définit une case à cocher .
• Les cases à cocher permettent à un utilisateur de sélectionner ZÉRO ou
PLUS d'options parmi un nombre limité de choix.
• <form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
FORMULAIRES HTML

Le bouton Soumettre
• Le <input type="submit"> définit un bouton pour soumettre les
données du formulaire à un gestionnaire de formulaire.
• Le gestionnaire de formulaire est généralement un fichier sur le serveur
avec un script pour le traitement des données d'entrée.
• Le gestionnaire de formulaire est spécifié dans l'attribut action du
formulaire.
FORMULAIRES HTML

• <form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
FORMULAIRES HTML

• L'attribut de nom pour <input>


• Notez que chaque champ de saisie doit avoir un attribut name pour être
soumis.
• Si l'attribut name est omis, la valeur du champ de saisie ne sera pas
envoyée du tout.
• <form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
FORMULAIRE DE SAISIE HTML * ATTRIBUTS

• Ce chapitre décrit les différents attributs form* de l' élément HTML


<input>
• L'attribut de formulaire
• L' attribut form input spécifie la forme <input>à laquelle appartient
l'élément.

Vous aimerez peut-être aussi