Software">
[Go to site: main page, start]
Scribd
Importer
182 vues108 pages

Code HTML pour Exposants et Éléments

Ce document décrit les bases de la programmation web côté client en HTML et CSS. Il présente les éléments et attributs HTML de base pour structurer une page web, comme les titres, paragraphes, listes, tableaux, liens et images.

Transféré par

NANO BIKER
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 PPTX, PDF, TXT ou lisez en ligne sur Scribd
182 vues108 pages

Code HTML pour Exposants et Éléments

Ce document décrit les bases de la programmation web côté client en HTML et CSS. Il présente les éléments et attributs HTML de base pour structurer une page web, comme les titres, paragraphes, listes, tableaux, liens et images.

Transféré par

NANO BIKER
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 PPTX, PDF, TXT ou lisez en ligne sur Scribd

PROGRAMMATION WEB COTÉ CLIENT

HTML et CSS
Plan du cours
ENVIRONNEMENT ET STRUCTURE
1 Le concept des balises - Le bon usage des balises - Particula-
rités et pièges du HTML

MISE EN FORME DU DOCUMENT


2 Le texte simple - Les objets d'un document - L'en-tête d'un do-
cument HTML

MISE EN FORME DU TEXTE


3 Les titres - Les paragraphes de texte - Le formatage du texte -
L'alignement - Les commentaires …

LES LISTES
4 Numérotées - A puces - Imbriquées - Les listes de définition

LES TABLEAUX
5 Les cellules de tableau - La fusion des cellules - Gestion de la
taille du tableau - -En-tête et légende - Les bordures …

LES NOUVELLES BALISES


6 <mark>, <meter>, <time>, <figure>, <picture>
Plan du cours
STRUCTURATION DE LA PAGE
7 Balise <DIV> - Balise <span> - Balises <header>, <footer>,
<nav>, <article>

LES HYPERTEXTES
8 La balise de liens - Liens vers une autre page - Liens à l'inté-
rieur d'une page - Liens vers un autre site Web - Les Target …

INSERTIONS D'IMAGES
9 Les images du Web - L'insertion d'une image - L'espace au-
tour d'une image - L'alignement d'une image …

LES FORMULAIRES
10 La déclaration de formulaire - Menu déroulant - Bouton radio -
Bouton checkbox - Bouton d'envoi - Bouton d'annulation …

INTÉGRER LES VISUELS, LA VIDÉO ET LE SON


11 Les formats du son et de la vidéo pour le Web - Intégrer du son
avec la balise audio - Intégrer de la vidéo avec la balise vidéo
ENVIRONNEMENT ET STRUCTURE

Qu'est-ce que le HTML signifie Hyper Text Markup Language

HTML? HTML est le langage de balisage standard pour la création de


pages Web

HTML décrit la structure d'une page Web


<HTML \>
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.
ENVIRONNEMENT ET STRUCTURE
<!DOCTYPE html>
Un document <html>
HTML simple <head>
<title>Page Title</title>
<HTML \> </head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
ENVIRONNEMENT ET STRUCTURE

Un document •La <!DOCTYPE html>déclaration définit que ce document est


un document HTML5

HTML simple
•L' <html> élément est l'élément racine d'une page HTML
•L' <head> élément contient des méta-informations sur la
page HTML
•L' <title>élément spécifie un titre pour la page HTML (qui
<HTML \> est affiché dans la barre de titre du navigateur ou dans
l'onglet de la page)
•L' <body> élément définit le corps du document et est un
conteneur pour tous les contenus visibles, tels que les en-
têtes, les paragraphes, les images, les hyperliens, les
tableaux, les listes, etc.
•L' <h1>élément définit un grand titre
•L' <p>élément définit un paragraphe
ENVIRONNEMENT ET STRUCTURE

Navigateurs Un élément HTML est défini par une balise de début, du


contenu et une balise de fin:

Web < tagname > Le contenu va ici ... < / tagname >

<HTML \> L' élément HTML est tout, de la balise de début à la balise de
fin:
< h1 > Mon premier cap < / h1 >
< p > Mon premier paragraphe. Fghgfhgf
fgghfghfghhgghgh gfhfgh < / p >
Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none


ENVIRONNEMENT ET STRUCTURE

Navigateurs Le but d'un navigateur Web (Chrome, Edge, Firefox, Safari)


est de lire les documents HTML et de les afficher correcte-

Web ment.

<HTML \>
ENVIRONNEMENT ET STRUCTURE
Structure de la
page HTML
<HTML \>
ENVIRONNEMENT ET STRUCTURE
Éditeurs HTML

 Un simple éditeur de texte est tout ce dont vous avez besoin pour apprendre le
HTML.

 Apprendre le HTML en utilisant Notepad


 Les pages Web peuvent être créées et modifiées à l'aide d'éditeurs HTML pro-
fessionnels.

 Cependant, pour apprendre le HTML, nous recommandons un éditeur de texte


simple comme Notepad (PC)

 Voici le lien de téléchargement : NotePad++


ENVIRONNEMENT ET STRUCTURE
Éditeurs HTML
Suivez les étapes ci-dessous pour créer votre première page Web avec Notepad

Windows 7 ou version antérieure:


Etape 1 Ouvrez Démarrer > Programmes> Accessoires> Bloc-notes

Enregistrez la page HTML <!DOCTYPE html>


<html>
<body>

ETAPE 2 Étape 2: rédigez du HTML <h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Enregistrez la page HTML

Etape 3 Enregistrez le fichier sur votre ordinateur. Sélectionnez Fichier>


Enregistrer sous dans le menu Notepad.

Nommez le fichier "[Link]"

Affichez la page HTML dans votre navigateur


Ouvrez le fichier HTML enregistré dans votre navigateur préféré
ETAPE 4 (double-cliquez sur le fichier ou cliquez avec le bouton droit de
la souris - et choisissez «Ouvrir avec»).

Le résultat ressemblera beaucoup à ceci:


Exemples de base 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 est comprise entre <body>et </
body>.

Exemple
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Éléments HTML
Éléments 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

Éléments HTML
Exemple

<h1> Mon premier cap </h1>

<p> Mon premier paragraphe.</p>


Éléments HTML
É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 ( 


<html>, <body>, <h1> et <p>):

Exemple
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Éléments HTML
Ne sautez jamais la balise de fin
 Certains éléments HTML s'afficheront correctement, même si vous ou-
bliez la balise de fin:

Exemple
<!DOCTYPE html>
<html>
<body>

<p>My First paragraph


<p>My second paragraph

</body>
</html>

Cependant, ne vous fiez jamais à cela! Des résultats inattendus et


! des erreurs peuvent survenir si vous oubliez la balise de fin!
Éléments HTML
Éléments HTML vides
 Les éléments HTML sans contenu sont appelés éléments vides.
 La  <br> balise définit un saut de ligne et est un élément vide sans balise
de fermeture:

Exemple
<p> Ceci est un paragraphe <br> avec
un saut de ligne.</p>
Éléments HTML
Le HTML n'est pas sensible à la casse
• Les balises HTML ne sont pas sensibles à la casse: <P>signifie la
même chose que <p>.

• Le standard HTML n'exige pas de balises minuscules

Exemple

<p> Ceci est un paragraphe.</p>

<P> avec un saut de ligne.</P>


Attributs 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 se présentent généralement sous forme de paires nom / valeur
comme: name = "value"
Éléments HTML
L'attribut href
 La <a>balise définit un lien hypertexte. L' href attribut spécifie
l'URL de la page vers laquelle le lien va:

Exemple

<a href="[Link]
vers Ofppt</a>
Éléments HTML
L'attribut src
 La <img>balise est utilisée pour incorporer une image dans une
page HTML. L' attribut src spécifie le chemin d'accès à l'image à
afficher:

Exemple
<!DOCTYPE html>
<html>
<body>

<h2> L'attribut src </h2>


<p> Les images HTML sont définies avec la balise img et le nom
de fichier de la source d'image est spécifié dans l'attribut
src: </p>
<img src="img_nature.jpg">

</body>
</html>
Éléments HTML
Les attributs de largeur et de hauteur
 La <img>balise doit également contenir les attributs width et
height, qui spécifient la largeur et la hauteur de l'image (en
pixels):

Exemple
<!DOCTYPE html>
<html>
<body>

<h2> L'attribut src </h2>


<p> Les images HTML sont définies avec la balise img et le nom
de fichier de la source d'image est spécifié dans l'attribut
src: </p>
<img src="img_nature.jpg ">
<img src="img_nature.jpg " width="500" height= 300">
<img src="img_nature.jpg " width=« 100" height="60">

</body>
</html>
Éléments HTML
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 Résultat
<! DOCTYPE html>
<html>
<body>

<h2 style = "color: blue;"> L'attribut de style </h2>


<p> L'attribut style est utilisé pour ajouter des
styles à un élément, comme la couleur: </p>

<p style = "color: red;"> Ceci est un paragraphe


rouge. </p>

</body>
</html>
Éléments HTML
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 Résultat

<! DOCTYPE html>


<html>
<body>

<h2 style = "color: blue;"> L'attribut de style </h2>


<p> L'attribut style est utilisé pour ajouter des
styles à un élément, comme la couleur: </p>

<p style = "color: red;"> Ceci est un paragraphe


rouge. </p>

</body>
</html>
Éléments 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.

Exemple Résultat
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

<!DOCTYPE html>
<html lang=“fr">
<body>
...
</body>
</html>
Éléments HTML
L'attribut de titre
L' attribut title définit des informations supplémentaires sur un élément.
La valeur de l'attribut title sera affichée sous la forme d'une info-bulle lorsque vous passerez la souris sur l'élément:

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<h2 title = "Je suis un entête"> L'attribut title </h2>

<p title = "Je suis une info-bulle"> Passez la souris


sur ce paragraphe pour afficher l'attribut title sous
la forme d'une info-bulle. </p>

</body>
</html>
En- têtes HTML
En-têtes HTML
Les en-têtes HTML sont définis avec les balises <h1>to <h6>.
<h1>définit le titre le plus important. <h6>définit le titre le moins important.

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<h1 > Titre H1 sans style </h1>


<h1 style = "font-size: 60px;"> Titre H1 avec
style</h1>
<p> Vous pouvez modifier la taille d'un en-tête
avec l'attribut style, en utilisant la propriété
font-size. </p>

</body>
</html>
Paragraphes HTML
Paragraphes HTML
 L' élément HTML <p> définit un paragraphe.
 Un paragraphe commence toujours sur une nouvelle ligne et les navigateurs ajoutent automatiquement un espace blanc
(une marge) avant et après un paragraphe.

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<p> Ceci est un paragraphe. </p>


<p> Ceci est un autre paragraphe. </p>

</body>
</html>
Paragraphes HTML
Paragraphes HTML
 L' élément HTML <p> définit un paragraphe.
 Un paragraphe commence toujours sur une nouvelle ligne et les navigateurs ajoutent automatiquement un espace blanc
(une marge) avant et après un paragraphe.

Exemple Résultat
<! DOCTYPE html>
<html>
<body>
<p> Ce paragraphe
contient beaucoup de lignes dans le code source,
mais le navigateur l'ignore. </p>

<p> Ce paragraphe
contient beaucoup d'espaces dans le code
source, mais le navigateur l'ignore. </
p>

</body>
</html>
Paragraphes HTML
Affichage HTML
 L' élément HTML <p> définit un paragraphe.
 Un paragraphe commence toujours sur une nouvelle ligne et les navigateurs ajoutent automatiquement un espace blanc
(une marge) avant et après un paragraphe.

Exemple Résultat
<! DOCTYPE html>
<html>
<body>
<p> Ce paragraphe
contient beaucoup de lignes dans le code source,
mais le navigateur l'ignore. </p>

<p> Ce paragraphe
contient beaucoup d'espaces dans le code
source, mais le navigateur l'ignore. </
p>

</body>
</html>
Paragraphes HTML
Règles horizontales HTML
 La balise <hr> définit une coupure thématique dans une page HTML et est le plus souvent affichée sous forme de règle
horizontale.
 L'élément <hr> est utilisé pour séparer le contenu (ou définir une modification) dans une page HTML:

Exemple Résultat
<! DOCTYPE html>
<html>
<body>
<h1> C'est l'en-tête 1 </h1>
</p> Voici du texte. </p>
<hr>

</p> C'est l'en-tête 2 </h2>


<p> Voici un autre texte. </p>
<hr>

</p> C'est l'en-tête 2 </h2>


<p> Voici un autre texte. </p>

</body>
</html>
Paragraphes HTML
Le problème du poème
 La balise <hr> définit une coupure thématique dans une page HTML et est le plus souvent affichée sous forme de règle
horizontale.
 L'élément <hr> est utilisé pour séparer le contenu (ou définir une modification) dans une page HTML:

Exemple Résultat
<! DOCTYPE html>
<html>
<body>
<h1> C'est l'en-tête 1 </h1>
</p> Voici du texte. </p>
<hr>

<h2> C'est l'en-tête 2 </h2>


<p> Voici un autre texte. </p>
<hr>

<h2> C'est l'en-tête 2 </h2>


<p> Voici un autre texte. </p>

</body>
</html>
Paragraphes HTML
Le problème du poème
 Ce poème s'affichera sur une seule ligne:

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<p>les espaces et les nouvelles lignes sont ignorés: </p>

<p>
L'enfant avait cinq ans, et, près de la fenêtre,
Ses rires et ses jeux faisaient un charmant bruit ;
Et la mère, à côté de ce pauvre doux être
Qui chantait tout le jour, toussait toute la nuit.
</p>

</body>
</html>
Paragraphes HTML
Solution - L'élément HTML <pre>
L' élément HTML <pre> définit le texte préformaté.
Le texte à l'intérieur d'un élément <pre> est affiché dans une police de largeur fixe (généralement Courier), et il préserve
à la fois les espaces et les sauts de ligne:

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<p>les espaces et les nouvelles lignes sont ignorés: </p>

<pre>
L'enfant avait cinq ans, et, près de la fenêtre,
Ses rires et ses jeux faisaient un charmant bruit ;
Et la mère, à côté de ce pauvre doux être
Qui chantait tout le jour, toussait toute la nuit.
</pre>

</body>
</html>
Styles HTML
Couleur du texte
 L'attribut HTML style est utilisé pour ajouter des styles à un élément, tels que la couleur, la police, la taille, etc.
 La propriété color définit la couleur du texte d'un élément HTML:

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<h1 style="color: blue;"> Ceci est un titre </h1>


<p style="color: red;"> Ceci est un paragraphe. </p>

</body>
</html>
Styles HTML
Couleur de l'arrière plan
 La propriété background-color définit la couleur d'arrière-plan d'un élément HTML.

Exemple Résultat
<! DOCTYPE html>
<html>
<body style="background-color: powderblue;">

<h1 style="background-color: blue;"> Ceci est un titre </h1>


<p style="background-color: red;"> Ceci est un paragraphe. </p>

</body>
</html>
Styles HTML
Polices
• La propriété font-family définit la police à utiliser pour un élément HTML:

Exemple Résultat
<! DOCTYPE html>
<html>
<body style="background-color: powderblue;">

<h1 style="font-family: verdana;"> Ceci est un titre </h1>


<p style="font-family: courier;"> Ceci est un paragraphe.
</p>

</body>
</html>
Styles HTML
Taille du texte
• La propriété font-size définit la taille du texte d'un élément HTML:

Exemple Résultat
<! DOCTYPE html>
<html>
<body style="background-color: powderblue;">

<h1 style="font-size: 300%;"> Ceci est un titre </h1>


<p style="font-size: 160%;"> Ceci est un paragraphe. </p>

</body>
</html>
Styles HTML
Alignement du texte
• La text-alignpropriété CSS définit l'alignement horizontal du texte pour un élément HTML:

Exemple
<! DOCTYPE html>
<html>
<body style="background-color: powderblue;">
Résultat
<h1 text-align style="text-align: center;"> En-tête cen-
tré </h1>
<p style="text-align: center;"> Paragraphe centré. </p>

</body>
</html>
Formatage de texte HTML
Éléments de formatage HTML
• HTML contient plusieurs éléments pour définir du texte avec une signification particulière.

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<b> Ce texte est en gras </b> <br />


<strong> Ce texte est important! </strong> <br />
<i> Ce texte est en italique </i> <br />
<em> Ce texte est mis en valeur </em>
<small> Ceci est un texte plus petit. </small>
<p> N'oubliez pas d'acheter du <mark> lait </mark> aujourd'hui. </p>
<p> Ma couleur préférée est le <del> bleu </del> rouge. </p>
<p> Ma couleur préférée est <del> bleu </del> <ins> rouge </ins>. </p>
<p> Ceci est un texte <sub> indice </sub>. </p>
<p> Ceci est un texte <sup> exposant </sup>. </p>

</body>
</html>
Éléments de citation HTML
HTML <q> pour les citations courtes
• La <q>balise HTML définit une courte citation.
• Les navigateurs insèrent normalement des guillemets autour de la citation.

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<p> Les navigateurs mettent généralement en retrait les


éléments blockquote. </p>

<blockquote cite="[Link]
[Link]">
Depuis près de 60 ans, le WWF protège l'avenir de la nature.
Première organisation mondiale de conservation, le WWF tra-
vaille dans 100 pays et est soutenu par plus d'un million de
membres aux États-Unis et près de cinq millions dans le monde.
</blockquote>

</body>
</html>
Éléments de citation HTML
HTML <blockquote> pour les citations
• L' élément HTML <blockquote> définit une section citée d'une autre source.
• Les navigateurs mettent généralement en retrait les éléments <blockquote> .

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<p> Les navigateurs insèrent généralement des guille-


mets autour de l'élément q. </p>

<p> L'objectif du WWF est de: <q> Bâtir un avenir où


les gens vivent en harmonie avec la nature. </q> </p>
</body>
</html>
Éléments de citation HTML
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".

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<p> L '<abbr title="Organisation mondiale de la Santé">


OMS </abbr> a été fondée en 1948. </p>

<p> Le marquage des abréviations peut donner des informa-


tions utiles aux navigateurs, aux systèmes de traduction et
aux moteurs de recherche. </p>

</body>
</html>
Éléments de citation HTML
HTML <address> 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.

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<p> L'élément d'adresse HTML définit les informations de


contact (auteur / propriétaire) d'un document ou d'un article.
</p>

<address>
Écrit par John Doe. <br>
Rendez-nous visite sur: <br>
[Link] <br>
Boîte 564, Disneyland <br>
+212 6 55 55 88 88 <br>
Etats-Unis
</address>

</body>
</html>
Éléments de citation HTML
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.).

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<p> L'élément HTML cite définit le titre d'une œuvre. </p>


<p> Les navigateurs affichent généralement les éléments de
citation en italique. </p>

<img src="img_oeuvre.jpg" width="220" height="277" alt="The


Scream">
<p> <cite> Le Dernier Jour d'un condamné </cite> par Victor
Hugo. publié en 1829. </p>

</body>
</html>
Éléments de citation HTML
HTML <bdo> pour le remplacement bidirectionnel
• BDO signifie Bi-Directional Override.
• La balise HTML <bdo> est utilisée pour remplacer la direction actuelle du texte:

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<p> Si votre navigateur prend en charge le remplacement bi-


directionnel (bdo), la ligne suivante sera écrite de droite à
gauche (rtl): </p>

<bdo dir = "rtl"> Cette ligne sera écrite de droite à


gauche </bdo>

</body>
</html>
Commentaires HTML
Balises de commentaire HTML
• Vous pouvez ajouter des commentaires à votre source HTML en utilisant la syntaxe suivante:

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<!-- Ceci est un commentaire -->


<p> Ceci est un paragraphe. </p>
<!-- Les commentaires ne sont pas affichés dans le naviga-
teur -->

<!-- Ne pas afficher cette image pour le moment


<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
</body>
</html>
Couleurs HTML
Noms de couleur
• En HTML, une couleur peut être spécifiée en utilisant un nom de couleur:

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<h4 style="background-color: Tomato;"> Tomate </h4>


<h4 style="background-color: Orange;"> Orange </h4>
<h4 style="background-color: DodgerBlue;"> DodgerBlue </h4>
<h4 style="background-color: MediumSeaGreen;"> MediumSeaGreen </h4>
<h4 style="background-color: Grey;"> Gris </h4>
<h4 style="background-color: SlateBlue;"> SlateBlue </h4>
<h4 style="background-color: Violet;"> Violet </h4>
<h4 style="background-color: LightGray;"> LightGray </h4>
</body>
</html>
Couleurs HTML
Couleur de l'arrière plan
• Vous pouvez définir la couleur d'arrière-plan des éléments HTML:

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<h1 style="background-color: DodgerBlue;"> Bonjour tout le monde </h1>

<p style="background-color: Tomato;">


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volut-
pat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcor-
per suscipit lobortis nisl ut aliquip ex ea commodo conséquat.
</p>
</body>
</html>
Couleurs HTML
Couleur du texte
• Vous pouvez définir la couleur du texte:

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<h3 style="color: Tomato;"> Bonjour tout le monde </h3>

<p style="color: DodgerBlue;"> Lorem ipsum dolor sit amet, consectetuer


adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. </p>

<p style="color: MediumSeaGreen;"> Ut wisi enim ad minim veniam, quis


nostrud exercice ullamcorper suscipit lobortis nisl ut aliquip ex ea commo-
do conséquat. </p>
</body>
</html>
Couleurs HTML
Couleur de la bordure
• Vous pouvez définir la couleur des bordures:

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;"> Bonjour tout le monde </h1>


<h1 style="border: 2px solid DodgerBlue;"> Bonjour tout le monde </h1>
<h1 style="border: 2px solid Violet;"> Bonjour tout le monde </h1>

</body>
</html>
Styles HTML - CSS
Qu'est-ce que CSS?
• CSS signifie « Cascading Style Sheets »
• Les feuilles de style en cascade (CSS) sont utilisées pour formater la mise en page d'une page Web.

• Le 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
Styles HTML - CSS
CSS Inline (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.

Exemple Résultat
<! DOCTYPE html>
<html>
<body>

<h1 style="color: blue;"> Ceci est un titre </h1>


<p style="color: red;"> Ceci est un paragraphe. </p>

</body>
</html>
CSS interne
Styles HTML - CSS
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>.

Exemple Résultat
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: powderblue;
}

h1 {
color: blue;
}

p {
color: red;
}
</style>
</head>
<body>
<h1> Ceci est un titre </h1>
<h2>Ceci est un titre</h2>
<p> Ceci est un paragraphe. </p>
</body>
</html>
CSS externe
Styles HTML - CSS
• 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:

Exemple Résultat
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1> Ceci est un titre </h1>
<h2>Ceci est un titre</h2>
<p> Ceci est un paragraphe. </p>
</body>
</html>

Le fichier "[Link]":
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}
Styles HTML - CSS
Couleurs, polices et tailles CSS
La propriété color définit la couleur du texte à utiliser.
La propriété font-family définit la police à utiliser.
La  propriété font-size  définit la taille du texte à utiliser.

<!DOCTYPE html>
<!DOCTYPE html>
Résultat
<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> Ceci est un titre </h1>
<h2>Ceci est un titre</h2>
<p> Ceci est un paragraphe. </p>
</body>
</html>
Styles HTML - CSS
Bordure CSS
La propriété border définit une bordure autour d'un élément HTML.

Exemple Résultat
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
}
</style>
</head>
<body>
<h1> Ceci est un titre </h1>
<h2>Ceci est un titre</h2>
<p> Ceci est un paragraphe. </p>
<p> Ceci est un paragraphe. </p>
<p> Ceci est un paragraphe. </p>
</body>
</html>
Styles HTML - CSS
Remplissage CSS ( padding )
• La propriété padding définit un remplissage (espace) entre le texte et la bordure.

Exemple Résultat
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 2px solid red;
padding: 20px;
}
p {
border: 2px solid powderblue;
padding: 40px;
}
</style>
</head>
<body>
<h1> Ceci est un titre </h1>
<h2>Ceci est un titre</h2>
<p> Ceci est un paragraphe. </p>
</body>
</html>
Styles HTML - CSS
Marge CSS (margin)
• La propriété margin définit une marge (espace) à l'extérieur de la bordure.

Exemple Résultat
<!DOCTYPE html><html>
<head>
<style>
h1 {
border: 2px solid red;
margin: 20px;
}
p {
border: 2px solid powderblue;
margin: 60px;
}
</style>
</head>
<body>
<h1> Ceci est un titre </h1>
<h2>Ceci est un titre</h2>
<p> Ceci est un paragraphe. </p>
</body>
</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' <a> élément est l' hrefattribut, qui indique la destination du lien.

Exemple Résultat

<a href="[Link]
vers Ofppt</a>
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' targetattribut peut avoir l'une des valeurs suivantes: Résultat
• _self- Défaut. Ouvre le document dans la même fenêtre / onglet 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 le corps entier de la fenêtre

Exemple

<a href="[Link] tar-
get="_blank">Lien vers Ofppt</a>
Liens HTML
URL absolues et URL relatives Résultat

Exemple
<!DOCTYPE html>
<html>
<body>
<h2> URL Absolute </h2>
<a href="[Link] target="_blank">Visitez
ofppt!</a>

<h2> URL Relatives</h2>


<p><a href="html_images.htm">HTML Images</a></p>

</body>
</html>
Liens HTML
Liens HTML - Utiliser une image comme lien
• 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.

Exemple Résultat
<!DOCTYPE html>
<html>
<body>

<h2> Image en tant que lien </h2>

<p> L'image ci-dessous est un lien. Essayez de cliquer


dessus. </p>

<a href="html_images.htm"><img src="[Link]" alt="HTML


tutorial" style="width:42px;height:42px;"></a>

</body>
</html>
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):

Exemple Résultat
<!DOCTYPE html>
<html>
<body>

<h2> Lien vers une adresse e-mail </h2>

<p> Pour créer un lien qui s'ouvre dans le programme de


messagerie de l'utilisateur (pour lui permettre d'envoyer un
nouvel e-mail), utilisez mailto: à l'intérieur de l'attribut
href: </p>
<p><a href="[Link] un mail</
a></p>

</body>
</html>
Liens HTML
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:
Exemple Résultat

Liens HTML
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent; a:link
text-decoration: none;
}

a:visited {
color: blue;
background-color: transparent;

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

a:active {
color: yellow; a:active
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="[Link] target="_blank">Visitez
ofppt!</a>
</body> a:visited
</html>
Images HTML
Syntaxe des images HTML
• La balise HTML <img> est utilisée pour incorporer une image dans une page Web.

Exemple Résultat
<!DOCTYPE html>
<html>
<body>

<h2> L'attribut src </h2>


<p> Les images HTML sont définies avec la balise img et
le nom de fichier de la source d'image est spécifié dans
l'attribut src: </p>
<img src="img_nature.jpg ">
<img src="img_nature.jpg " width="500" height=« 300">
<img src="img_nature.jpg " width=« 100" height="60">

</body>
</html>
Images HTML
Largeur et hauteur, ou style?
Les attributs width, height et style sont valides en HTML.

Exemple Résultat
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<img src="images/[Link]"  alt="HTML5 Icon"
 style="width:20px;height:20px;">

</body>
</html>
Images HTML
Images dans un autre dossier
• Si vous avez vos images dans un sous-dossier, vous devez inclure le nom du dossier dans l'attribut src:

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

<img src="/images/[Link]" alt="HTML5
Icon" style="width:128px;height:128px;">
ssay
</body>
</html>
Images HTML
Images animées
• HTML autorise les images en mouvement:

Exemple Résultat
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h2> Images animées </h2>

<p> HTML autorise les images en mouvement: </p>

<img src="[Link]" alt="Computer man"


style="width:48px;height:48px;">

</body>
</html>
Images HTML
Image comme lien
• Pour utiliser une image comme lien, placez la balise <img> à l'intérieur de la balise <a> :

Exemple Résultat
<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h2> Image en tant que lien </h2>

<p> L'image est un lien. Vous pouvez cliquer dessus. </p>

<a href="[Link] ">


<img src="[Link]" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>

</body>
</html>
Image flottante Images HTML
• Utilisez la propriété float pour laisser l'image flotter à droite ou à gauche d'un texte:

<! DOCTYPE html>


<html> Résultat
<body>

<h2> Images flottantes </h2>


<p> <strong> Faire flotter l'image vers la droite: </strong> </p>

<p>
<img src="[Link]" alt="Smiley face" style="float: right;
width: 42px; height: 42px; border: 2px solid;">
Un paragraphe avec une image flottante. Un paragraphe avec une
image flottante. Un paragraphe avec une image flottante.
</p>

<p> <strong> Faire flotter l'image vers la gauche: </strong> </p>


<p>
<img src="[Link]" alt="Smiley face" style="float: left;
width: 42px; height: 42px; border: 2px solid;">
Un paragraphe avec une image flottante. Un paragraphe avec une
image flottante. Un paragraphe avec une image flottante.
</p>

</body>
</html>
Images d'arrière-plan HTML
Image d'arrière-plan sur un élément HTML
• Pour ajouter une image d'arrière-plan sur un élément HTML, utilisez l'attribut  style et la propriété CSS background-
image :
<html><!DOCTYPE html>
Résultat
<body>

<h2>Background Image</h2>

<p>A background image for a p elememt:</p>

<p style="background-image: url('[Link]');">


Vous pouvez spécifier des images d'arrière-plan <br>
pour tout élément HTML visible. <br>
Dans cet exemple, l'image d'arrière-plan <br>
est spécifié pour un élément p. <br>
Par défaut, l'image d'arrière-plan <br>
se répète dans la ou les directions <br>
où il est plus petit que l'élément <br>
où il est spécifié. (Essayez de redimensionner le <br>
fenêtre du navigateur pour voir comment le <br>
l'image d'arrière-plan se comporte.
</p>

</body>
</html>
Images d'arrière-plan HTML
Image d'arrière-plan sur un élément HTML
• Vous pouvez également spécifier l'image de fond dans l' <style> élément, dans la <head> section:

<style>
p { Résultat
  background-image: url('img_girl.jpg');
}
</style>
Images d'arrière-plan HTML
Image d'arrière-plan sur une page
• Si vous souhaitez que la page entière ait une image d'arrière-plan, vous devez spécifier l'image d'arrière-plan sur
l'élément <body>:
<style>
body { Résultat
  background-image: url('img_girl.jpg');
}
</style>

Si l'image d'arrière-plan
est plus petite que l'élé-
ment, l'image se répéte-
ra, horizontalement et
verticalement, jusqu'à ce
qu'elle atteigne la fin de
l'élément:
Images d'arrière-plan HTML
Image d'arrière-plan sur une page
• Pour éviter que l'image d'arrière-plan ne se répète, définissez la background-repeatpropriété sur no-repeat.

<style>
body { Résultat
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>
Images d'arrière-plan HTML
Couverture de fond
• Si vous souhaitez que l'image d'arrière-plan recouvre tout l'élément, vous pouvez définir la propriété background-size
sur cover.
• De plus, pour vous assurer que tout l'élément est toujours couvert, définissez la propriété background-attachment sur
fixed:

Exemple
<style>
body {
background-image: url('[Link]');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Tableaux HTML
Définir un tableau HTML
• La <table>balise définit un tableau HTML.
• Chaque ligne du tableau est définie avec une <tr>balise. Chaque en-tête de tableau est défini avec
une <th>balise. Chaque donnée / cellule du tableau est définie avec une <td>balise.
• Par défaut, le texte des <th>éléments est en gras et centré.
• Par défaut, le texte des <td>éléments est régulier et aligné à gauche.
Tableaux HTML
<! DOCTYPE html>
<html>
<body>

<h2> Tableau HTML de base </h2>

<table >
<tr>
<td> Prénom </td>
table
<td> Nom </td>
<td> Âge </td>
</tr>
<tr>
<td> Hassan </td>
<td> bellami </td>
<td> 33 </td>
</tr>
<tr>
<td> yassir </td>
Tr
<td>
<td>
abid </td>
50 </td>
(ligne)
</tr>
<tr>
<td> sayfeddine </td>
<td> ghazi </td>
<td> 20 </td>
</tr>
</table>

</body> Td
</html>
(cellules)
Tableaux HTML
Tableau HTML - Ajouter une bordure
• Pour ajouter une bordure à un tableau, utilisez la propriété CSS border:

<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
Tableaux HTML
Tableau HTML - alignés au centre
Pour aligner à gauche les en-têtes du tableau, utilisez la propriété text-align :

<head>
<style>
table, , td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
</style>
</head>
Tableaux HTML
Tableau HTML - Ajouter un espacement de bordure
• L'espacement des bordures spécifie l'espace entre les cellules.
• Pour définir l'espacement des bordures d'un tableau, utilisez la propriété border-spacing :
<head>
<style>
table, td {
border: 1px solid black;
text-align: center;
}
table {
border-spacing: 5px;
}
</style>
</head>

<head>
<style>
table, td {
border: 1px solid black;
text-align: center;
}
table {
border-spacing: 20px;
}
</style>
</head>
Tableaux HTML
Tableau HTML - Cellule qui s'étend sur plusieurs colonnes
• Pour qu'une cellule s'étende sur plusieurs colonnes, utilisez l'attribut colspan:

<table style="width:60%">
<tr>
<td>Name</td>
<td colspan="2">Telephone</td>
</tr>
<tr>
<td>Hassan Alami</td>
<td>0655577854</td>
<td>0644477844</td>
</tr>
</table>
Tableaux HTML
Tableau HTML - Cellule qui s'étend sur plusieurs lignes
• Pour qu'une cellule s'étende sur plusieurs lignes, utilisez l' attribut rowspan:

<table style="width:60%">
<tr>
<td>Name:</td>
<td>Hassan Alami</td>
</tr>
<tr>
<td rowspan="2">Telephone:</td>
<td>0655577854</td>
</tr>
<tr>
<td>0644477844</td>
</tr>
</table>
La ligne d'en-tête Tableaux HTML
• La ligne d'en-tête se crée avec un <tr> comme on l'a fait jusqu'ici, mais les cellules qu'elle contient sont, cette fois,
encadrées par des balises <th>  et non pas <td>  !

<table style="width:60%">
<tr>
<th> Prénom </th>
<th> Nom </th>
<th> Âge </th>
</tr>
<tr>
<td> Hassan </td>
<td> Alami </td>
<td> 33 </td>
</tr>
<tr>
<td> Yassir </td>
<td> Ghazi </td>
<td> 50 </td>
</tr>
<tr>
<td> Ahmad </td>
<td> Ben </td>
<td> 20 </td>
</tr>
</table>
Tableaux HTML
Tableau HTML - Ajouter une légende
• Pour ajouter une légende à un tableau, utilisez la balise <caption>:
<table style="width:60%">
<caption>Liste des personnes</caption>
<tr>
<th> Prénom </th>
<th> Nom </th>
<th> Âge </th>
</tr>
<tr>
<td> Hassan </td>
<td> Alami </td>
<td> 33 </td>
</tr>
<tr>
<td> Yassir </td>
<td> Ghazi </td>
<td> 50 </td>
</tr>
<tr>
<td> Ahmad </td>
<td> Ben </td>
<td> 20 </td>
</tr>
</table>
Listes HTML
Listes HTML non ordonnées
• Une liste non ordonnée commence par la balise <ul>. Chaque élément de la liste commence par la balise <li>.
• Les éléments de la liste seront marqués par des puces (petits cercles noirs) par défaut:

<! DOCTYPE html>


<html>
<body>

<h2> Une liste HTML non ordonnée </h2>

<ul>
<li> Café </li>
<li> Thé </li>
<li> Lait </li>
</ul>

</body>
</html>
Listes HTML
Listes HTML non ordonnées
<! DOCTYPE html>
<html>
<body>

<h2> Une liste HTML non ordonnée </h2>

<ul style="list-style-type:disc;">
<li> Café </li>
<li> Thé </li>
<li> Lait </li>
</ul>
<hr />
<ul style="list-style-type:circle;">
<li> Café </li>
<li> Thé </li>
<li> Lait </li>
</ul>
<hr />
<ul style="list-style-type:none;">
<li> Café </li>
<li> Thé </li>
<li> Lait </li>
</ul>

</body>
</html>
Listes HTML
Listes HTML imbriquées non ordonnées
• Les listes peuvent être imbriquées (liste dans la liste):

<! DOCTYPE html>


<html>
<body>

<h2> Une liste imbriquée </h2>


<p> Les listes peuvent être imbriquées (liste dans
la liste): </p>
<ul>
<li> Café </li>
<li>
Thé
<ul>
<li> Thé noir </li>
<li> Thé vert </li>
</ul>
</li>
<li> Lait </li>
</ul>
</body>
</html>
Listes HTML
Listes HTML imbriquées non ordonnées
• Les listes peuvent être imbriquées (liste dans la liste):

<! DOCTYPE html>


<html>
<body>

<h2> Une liste imbriquée </h2>


<p> Les listes peuvent être imbriquées (liste dans
la liste): </p>
<ul>
<li> Café </li>
<li>
Thé
<ul>
<li> Thé noir </li>
<li> Thé vert </li>
</ul>
</li>
<li> Lait </li>
</ul>
</body>
</html>
Listes HTML
Listes HTML ordonnées
• Une liste non ordonnée commence par la balise <ul>. Chaque élément de la liste commence par la balise <li>.
• Les éléments de la liste seront marqués par des puces (petits cercles noirs) par défaut:

<! DOCTYPE html>


<html>
<body>

<h2> Une liste HTML non ordonnée </h2>

<ol>
<li> Café </li>
<li> Thé </li>
<li> Lait </li>
</ol>

</body>
</html>
Listes HTML
Listes HTML ordonnées - L'attribut de type
• L' attribut type de la balise <ol> définit le type du marqueur d'élément de liste:

Type Description

type="1" Les éléments de la liste seront numérotés (par défaut)

type="A" Les éléments de la liste seront numérotés avec des lettres


majuscules

type="a" Les éléments de la liste seront numérotés avec des lettres


minuscules

type="I" Les éléments de la liste seront numérotés avec des chiffres


romains majuscules

type="i" Les éléments de la liste seront numérotés avec des


nombres romains minuscules
Listes HTML
<! DOCTYPE html>
<html>
<body>

<h2> Une liste HTML ordonnée </h2>

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<hr />
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<hr />
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<hr />
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<hr />
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
Listes HTML
Listes HTML imbriquées
• Les listes peuvent être imbriquées (liste dans la liste):

<! DOCTYPE html>


<html>
<body>

<h2> Une liste HTML ordonnée </h2>

<ol>
<li> Café
<ol>
<li> Noir </li>
<li> Au lait</li>
</ol>
</li>
<li>
Thé
<ol>
<li> Thé noir </li>
<li> Thé vert </li>
</ol>
<!DOCTYPE html>
<html>

Listes HTML - CSS


<head>
<style>
ol {
background: #ff9999;
padding: 20px;
list-style-image: url('[Link]');
}
ul {
background: #3399ff;
padding: 20px;
list-style-image:
url('[Link]');
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}
</style>
</head>
<body>
<h1>Styliser les listes avec des cou-
leurs:</h1>
<ol>
<li> Café </li>
<li> Thé </li>
<li> Coca Cola </li>
</ol>
<ul>
<li> Café </li>
<li> Thé </li>
<li> Coca Cola </li>
</ul>
</body>
</html>
Listes HTML - CSS
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none; <body>
margin: 0;
padding: 0; <h2> Menu de navigation </h2>
overflow: hidden; <p> Dans cet exemple, nous utilisons CSS pour styliser la liste horizontale-
background-color: #333333; ment, pour créer un menu de navigation: </p>
}
<ul>
li { <li> <a href="#home"> Accueil </a> </li>
float: left; <li> <a href="#news"> Actualités </a> </li>
} <li> <a href="#contact"> Contact </a> </li>
<li> <a href="#about"> À propos </a> </li>
li a { </ul>
display: block;
color: white; </body>
text-align: center; </html>
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color:
#111111;
}
</style>
</head>
Bloc HTML et éléments en ligne
L'élément <div>
• L' élément <div> est souvent utilisé comme conteneur pour d'autres éléments HTML.

<! DOCTYPE html>


<html>
<body>
<h2> Londres </h2>

<div style="background-color: black; color: white;


padding: 20px;">

<p> Londres est la capitale de l'Angleterre.


C'est la ville la plus peuplée du Royaume-Uni, avec
une zone métropolitaine de plus de 13 millions d'habi-
tants. </p>
<p> Située sur la Tamise, Londres est une co-
lonie majeure depuis deux millénaires, son histoire
remonte à sa fondation par les Romains, qui l'ont bap-
tisée Londinium. </p>
</div>

</body>
</html>
Bloc HTML et éléments en ligne
L'élément <span>
• L' élément <span> est un conteneur en ligne utilisé pour marquer une partie d'un texte ou une partie d'un document.

<! DOCTYPE html>


<html>
<body>

<h1> L'élément span </h1>

<p> Ma mère a les yeux <span style="color: blue;


font-weight: bold"> bleus </span> et mon père a les
yeux <span style="color: cyan;background-color:blue;
font-weight: bold"> vert foncé </span> yeux. </p>

</body>
</html>
Attribut class et id
• L'attribut HTML class est utilisé pour spécifier une classe pour un élément HTML.
• L' attribut HTML id est utilisé pour spécifier un identifiant unique pour un élément HTML.

<!DOCTYPE html> <body>


<html>
<head> <h2> Différence entre la classe et l'ID </h2>
<style> <p> Un nom de classe peut être utilisé par plu-
/* Style the element with the id "myHeader" */ sieurs éléments HTML, tandis qu'un nom d'identifiant
#myHeader { ne doit être utilisé que par un élément HTML de la
background-color: lightblue; page: </p>
color: black;
padding: 40px; <! - Un élément avec un identifiant unique ->
text-align: center; <h1 id="myHeader"> Mes villes </h1>
}
<! - Plusieurs éléments avec la même classe ->
/* Style all elements with the class name "c- <h2 class="city"> Londres </h2>
ity" */ <p> Londres est la capitale de l'Angleterre. </p>
.city {
background-color: tomato; <h2 class="city"> Paris </h2>
color: white; <p> Paris est la capitale de la France. </p>
padding: 10px;
} <h2 class="city"> Tokyo </h2>
</style> <p> Tokyo est la capitale du Japon. </p>
</head>
</body>
</html>
Attribut class et id
Iframes HTML
• Un iframe HTML est utilisé pour afficher une page Web dans une page Web.
• La balise HTML <iframe> spécifie un cadre en ligne.
• Un cadre en ligne est utilisé pour incorporer un autre document dans le document HTML actuel.

Le fichier [Link]
<!DOCTYPE html>
<html>
<body>

<h2> Iframes HTML </h2>


<p> Vous pouvez également utiliser les propriétés
CSS de hauteur et de largeur pour spécifier la taille
de l'iframe: </p>

<iframe src="demo_iframe.htm"
style="height:200px;width:300px" title="Iframe
Example"></iframe>

</body>
</html>
Iframes HTML
Le fichier [Link]
<!DOCTYPE html>
<html>
<body>

<h2> Iframes HTML </h2>


<p> Vous pouvez également utiliser les propriétés
CSS de hauteur et de largeur pour spécifier la taille
de l'iframe: </p>

<iframe src="demo_iframe.htm"
style="height:200px;width:300px" title="Iframe
Example"></iframe>

</body>
</html>
Le fichier demo_iframe.htm
<!DOCTYPE html>
<html>
<body>

<h2> Iframes Demo</h2>


<p> Cette page est affichée dans une iframe</p>
</body>
</html>
Mise en page HTML
Éléments de mise en page HTML

•<header> - Définit un en-tête pour un document ou une section


•<nav> - Définit un ensemble de liens de navigation
•<section> - Définit une section dans un document
•<article> - Définit un contenu indépendant et autonome
•<aside> - Définit le contenu en dehors du contenu (comme une barre
latérale)
•<footer> - Définit un pied de page pour un document ou une section
•<details> - Définit les détails supplémentaires que l'utilisateur peut ouvrir
et fermer à la demande
•<summary>- Définit un titre pour l' élément <details>
Mise en page HTML
Éléments de mise en page HTML

•<header> - Définit un en-tête pour un document ou une section


•<nav> - Définit un ensemble de liens de navigation
•<section> - Définit une section dans un document
•<article> - Définit un contenu indépendant et autonome
•<aside> - Définit le contenu en dehors du contenu (comme une barre
latérale)
•<footer> - Définit un pied de page pour un document ou une section
•<details> - Définit les détails supplémentaires que l'utilisateur peut ouvrir
et fermer à la demande
•<summary>- Définit un titre pour l' élément <details>
Mise en page HTML
header

section
nav
article

footer
<!DOCTYPE html>

Mise en page HTML


<html lang="en">
<body>

<header>
<h2>Cities</h2>
</header>

<section>
<nav>
<ul>
<li> <a href="#"> Londres </a> </li>
<li> <a href="#"> Paris </a> </li>
<li> <a href="#"> Tokyo </a> </li>
</ul>
</nav>

<article>
<h1> Londres </h1>
<p> Londres est la capitale de l'Angleterre. C'est la ville la plus peuplée du Royaume-Uni, avec une zone
métropolitaine de plus de 13 millions d'habitants. </p>
<p> Située sur la Tamise, Londres est une colonie majeure depuis deux millénaires, son histoire remonte à
sa fondation par les Romains, qui l'ont baptisée Londinium. </p>
</article>
</section>

<footer>
<p>Footer</p>
</footer>

</body>
</html>
HTML + CSS
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
nav {
float: left;
width: 30%;
height: 300px;
background: #ccc;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
HTML + CSS
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>

Vous aimerez peut-être aussi