Click to edit Master title style
HTML5/CSS3
Enseignant : YA S S I N E M E R S N I
1
Click to edit Master title style
Objectifs
Explorer les éléments fondamentaux du langage HTML5/CSS3
qui permettront de structurer un contenu web.
Etudier en détail les éléments de premier niveau qui
définissent la structure globale de la page, les éléments de
structuration de texte et de média pour mettre en forme votre
contenu et y intégrer des images ou des vidéos.
2 2
Click to/edit
HTML5 CSS3Master title style
HTML un langage
de programmation ?
3 3
Click to edit DE
STRUCTURE Master
BASEtitle
D’UNstyle
DOCUMENT HTML5
<!DOCTYPE html>
<html lang= "fr">
<head>
<title> Apprendre</title>
</head>
<body>
<h1>Apprendre à programmer</h1>
<p>
Ma couleur préférée est bleu !
</p>
</body>
</html>
4 4
Click to edit DE
STRUCTURE Master
BASEtitle
D’UNstyle
DOCUMENT HTML5
• L'élément <title> définit le titre du
document (qui est affiché dans la barre
de titre du navigateur ou dans l'onglet
de la page).
• Ajouter la balise nécessaire pour
résoudre le problème d’encodage :
<meta charset= "UTF-8" >
5 5
Click to edit Master title style
• <meta name="description" • Cette META permet de fournir une description
content="Retrouvez toutes les infos courte (deux à trois phrases courtes) de la page
sur les ordinateurs HP"> web. Cette description est notamment utilisée
(dans certains cas) par les principaux moteurs de
recherche, pour fournir le court texte d’aperçu des
pages de résultats
• Voici quelques conseils pour la rédaction de cette
description :
• Elle doit être unique, et pas dupliquée sur d’autres
pages du site.
• Elle doit refléter fidèlement le contenu de la page.
• Elle doit être attractive pour l’utilisateur dont le
regard «scanne» une page de résultats de moteur
de recherche.
• Elle doit reprendre les principaux mots-clés de la
page et être plutôt brève (on recommande de ne
pas dépasser 200 caractères, bien qu’il ne s’agisse
pas d’une règle stricte).
6 6
Click to edit Master title style
• <meta name="viewport" • La fenêtre d'affichage est la zone visible
content="width=device-width, initial- d'une page Web par l'utilisateur. Elle varie
scale=1.0"> selon l'appareil : elle sera plus petite sur
un téléphone mobile (que sur un écran
d'ordinateur.
• Cela donne au navigateur des instructions
sur la façon de contrôler les dimensions et
la mise à l'échelle de la page.
• La width=device-width partie définit la
largeur de la page pour qu'elle suive la
largeur de l'écran de l'appareil (qui varie
en fonction de l'appareil).
7 7
Click
Le rôle
to de
edit
l’attribut
Master title
lang style
• Priorité : Si un élément hérite de plusieurs • Accessibilité : Il permet aux navigateurs,
valeurs lang, c'est la valeur la plus aux moteurs de recherche de comprendre la
spécifique qui prévaut (domine). langue du contenu. Cela est
• Conteneurs : L'attribut lang s'applique à particulièrement important pour les
tout le contenu d'un élément, y compris ses personnes ayant des difficultés visuelles ou
enfants. des troubles de la lecture.
• Internationalisation : Il facilite la traduction
<html lang="fr"> et l'adaptation de votre site web à
<head> différentes langues.
--------- • SEO : Les moteurs de recherche utilisent
</head> l'attribut lang pour mieux indexer votre
contenu et le présenter aux utilisateurs en
<body> fonction de leur langue préférée.
<p>Ce paragraphe est en français.</p>
• Fonctionnalités spécifiques : Certaines
<p lang="en">This paragraph is in English.</p> fonctionnalités CSS, comme la pseudo-
<p lang="es">Este es un bloque de cita en español.</p> classe : lang, s'appuient sur l'attribut lang
</body> pour appliquer des styles en fonction de la
</html>
langue.
8 8
Click to edit Master title style
Syntaxe
9 9
Click des
Type to edit
balises
Master title style
• Il y a deux types de balises :
• Les balises dites en bloc (block) : L’élément occupe toute la largeur
disponible. Lorsque 2 éléments blocs se suivent dans une page, ils sont
positionnés (par défaut) l’un sous l’autre.
• Les balises dites en ligne (inline) : L’élément n’occupe que la largeur
indispensable à l’affichage du contenu et ne provoque pas de retour à la
ligne. Lorsque 2 éléments en-ligne se suivent dans une page, ils sont
positionnés l’un à côté l’autre (si la largeur de page le permet).
Exemple : <strong> : inline
<h1> : block
Remarque : la balise <title> n’est ni une balise bloc ni balise en ligne.
1010
Clickbalises
Les to editdeMaster
titres title
<Hn>style
1111
Clickbalises
Les to editdeMaster
base title style
• <p> : représente un paragraphe
• <strong> : permet d’appliquer un effet de
gras sur le texte
• <em> : permet d’afficher le texte qu’elle
contient en italique
• <sub> : permet de mettre le texte en indice
• <sup> : permet de mettre le texte en
exposant
1212
Clickbalises
Les to editdeMaster
base title style
• <hr/> (block) : Cette balise crée une ligne horizontale,
• <br> (block) : Cette balise crée un saut de ligne (un retour chariot)
dans le texte (renvoie à la ligne),
• <span> (inline) : Elle est utilisée pour appliquer un style
personnalisé à un mot. Elle n'a pas de signification sémantique
particulière.
1313
Click
La balise
to edit
<cite>
Master
(inline)
title style
• Contient le titre
d'une œuvre telle
qu'un livre, une
chanson, un film,
une sculpture…
• Cet élément doit
inclure le titre de
l'œuvre.
1414
Click
La balise
to edit
<address>
Master title
(block)
style
• 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 la balise <address> élément est généralement rendu en
italique
1515
Click
La balise
to edit
<address>
Master title
(block)
style
1616
Click
La balise
to edit
<mark>
Master
(inline)
title style
• La balise <mark> est utilisée pour mettre en évidence un terme. Elle indique que ce mot est pertinent dans
le contexte de la recherche. Les navigateurs appliquent généralement un style par défaut à <mark>, comme
un arrière-plan jaune, pour attirer l'attention.
1717
Clicklistes
Les to edit Master title style
<ul>
<li>Tunisie </li>
<li>Italie</li>
<li>France</li>
</ul>
<ol>
<li>Tunisie </li>
<li>Italie</li>
<li>France</li>
</ol>
1818
Clicklistes
Les to edit Master title style
1919
Clicktables
Les to edit Master title style
2020
Clicktables
Les to edit Master title style
2121
Clicktables
Les to edit Master title style
2222
Clicktables
Les to edit Master title style
2323
Click
La balise
to edit
<a>Master
(inline)title style
• Crée un lien hypertexte vers des pages web, des fichiers, des
adresses e-mail, des emplacements se trouvant dans la même
page, ou tout ce qu'une URL peut adresser.
• 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
Syntaxe : <a href="chemin de la cible" Target=" "> Texte du lien </a>
2424
Click
La balise
to edit
<a>Master
(inline)title style
• L’attribut href : L'URL vers laquelle pointe l'hyperlien. Les liens ne
sont pas limités aux URL basées sur HTTP - ils peuvent utiliser
n'importe quel schéma d'URL pris en charge par les navigateurs :
• Sections d'une page avec des fragments d'URL
• Des morceaux de fichiers médias avec des fragments de médias
• Les numéros de téléphone avec l'URL tel:
• Les adresses électroniques avec l'URL mailto:
2525
Click to edit Master title style
2626
Click
La balise
to edit
<a>Master
(inline)title style
• L’attribut target : L'attribut target est utilisé dans le langage HTML pour spécifier où un
document lié doit être ouvert. Il est généralement associé à des éléments tels que les liens
(<a>)
• Son rôle principal est de contrôler l'ouverture d'une nouvelle page ou d'un nouvel onglet lorsque
l'utilisateur clique sur un lien.
• Les valeurs possibles de l'attribut target :
• _blank : Ouvre le document lié dans un nouvel onglet ou une nouvelle fenêtre. C'est la
valeur la plus couramment utilisée.
• _self : (Par défaut) Ouvre le document lié dans la même fenêtre ou le même onglet que
celui où se trouve le lien.
• _parent : Ouvre le document lié dans le cadre parent du lien (si le lien se trouve dans un
cadre).
• _top : Ouvre le document lié dans la fenêtre entière, en supprimant tous les cadres
éventuels.
• Un nom de fenêtre : Ouvre le document lié dans une fenêtre nommée spécifiquement.
Cette fenêtre doit avoir été préalablement ouverte avec la même valeur pour l'attribut name
dans une balise <a> ou <iframe>(conteneur).
2727
Click
La balise
to edit
<img>
Master title style
2828
Clickbalises
Les to edit<figure>,
Master title
<figcaption>
style
2929
Click to edit Master title style
3030
Click
La balise
to edit
<video>
Master title style
3131
Click
La balise
to edit
<video>
Master title style
• L’attribut controls dans la balise <video> permet d’afficher les
boutons de contrôle du lecteur.
• Texte à l'intérieur des balises d'ouverture et de fermeture (<video>
Les bases du html5 et du css </video>) :
• Message d’erreur : Si le navigateur ne supporte pas la balise <video> ou si
le fichier vidéo n'est pas trouvé, le texte contenu entre les balises sera
affiché à la place de la vidéo. C'est un message par défaut que vous pouvez
personnaliser.
• Contenu alternatif : Pour les utilisateurs d'assistants vocaux ou de lecteurs
d'écran, le texte peut fournir une description de la vidéo. Il est donc
important de le rendre le plus descriptif possible.
3232
Click to edit Master title style
3333
Click
La balise
to edit
<audio>
Master title style
3434
Click
La balise
to edit
<iframe>
Master title style
3535
Clickformulaires
Les to edit Master
en HTML5
title style
• Un formulaire est utilisé pour permettre aux utilisateurs d'envoyer
des informations à un serveur, comme remplir un formulaire de
contact, s'inscrire à un service, effectuer une recherche, etc.
3636
Clickformulaires
Les to edit Master
en HTML5
title style
3737
Click to edit Master title style
3838
Clickbalise
Les to edit
deMaster
regroupement
title style
fieldset et legend
3939
Clickboutons
Les to edit Master title style
4040
Clickboutons
Les to edit Master title style
4141
Click totype="text"/>
<input edit Master title style
4242
Click totype="number"/>
<input edit Master title style
4343
Click totype="email"/>
<input edit Master title style
4444
Click totype="tel"/>
<input edit Master title style
4545
Click totype="password"/>
<input edit Master title style
4646
Click
Le curseur
to editinteractif
Master title
<input
style
type="range"/>
4747
Click totype="date"/>
<input edit Master title
et <input
style type="time"/>
4848
Click
La balise
to edit
<textarea>
Master title style
4949
Clickcases
Les to edit
à cocher
Master<input
title style
type="checkbox"/>
5050
Clickboutons
Les to edit radios
Master<input
title style
type="radio"/>
5151
Click
La liste
to déroulante
edit Master<select>
title style
5252
Click
La balise
to edit
<div>
Master
(block)
title style
• La balise HTML div, pour « division », est un élément de bloc qui a
vocation à contenir d'autres éléments : un div HTML regroupe du
contenu à l'intérieur de ses balises < div > < /div >.
• Le div HTML est un conteneur générique : sa fonction est
structurante, il n'a aucune valeur sémantique.
• la balise HTML div n'indique rien, à moins de lui attribuer des
propriétés CSS destinées à styliser ce qu'elle contient.
5353
Clickbalises
Les to editsémantiques
Master title (structurantes)
style de HTML5
5454
Clickbalises
Les to editsémantiques
Master title (structurantes)
style de HTML5
• Cette partie présente les nouvelles
balises introduites par HTML5 pour
structurer les pages web
sémantiquement :
• <header> : en-tête ;
• <footer> : pied de page ;
• <nav> : liens principaux de navigation ;
• <section> : section de page ;
• <aside> : informations complémentaires ;
• <article> : article indépendant.
• Ces balises ne s'occupent pas de la
mise en page. Elles servent seulement
à indiquer le sens du texte qu'elles
contiennent. On pourrait très bien placer
l'en-tête en bas de la page, si on le
souhaitait.
5555
Clickbalises
Les to editsémantiques
Master title (structurantes)
style de HTML5
• Ces balises peuvent être imbriquées les unes
dans les autres. Ainsi, une section peut avoir
son propre en-tête.
5656
Click
La balise
to edit
<header>
Master title style
5757
Click
La balise
to edit
<footer>
Master title style
5858
Click
La balise
to edit
<nav>
Master title style
5959
Click
La balise
to edit
<aside>
Master title style
6060
Click
La balise
to edit
<section>
Master title style
6161
Click
La balise
to edit
<article>
Master title style
6262
Click to
C’est quoi
edit
le Master
CSS ? title style
• Le CSS est un langage qui permet de styliser une page HTML à l’aide d’un sélecteur, d’une
propriété et d’une valeur.
• Contrairement à l’HTML qui se reconnaît avec ses balises d’ouverture et de fermeture, le CSS
lui, se reconnaît simplement avec ses classes, une accolade précédant ses propriétés et un
double-point précédant ses valeurs et une accolade fermante.
6363
Click to edit
Comment appliquer
Master title
le CSS
style
a une page HTML ?
6464
Click
Le sélecteur
to edit Master
de typetitle style
• Ce groupe inclut les sélecteurs ciblant les élements HTML tels que
<h1> ou <p> par exemple :
6565
Click
Le sélecteur
to edit Master
id title style
• Le sélecteur id est utilisé pour
sélectionner un élément
HTML spécifique et doit être
unique pour l'ensemble du
document.
• Pour cibler un id en particulier
en CSS, on utilisera le
symbole dièse (#) suivi de la
valeur de l’id auquel on
souhaite lier des styles.
6666
Click
Le sélecteur
to edit Master
class title style
• Le sélecteur CLASS permet de
sélectionner plusieurs éléments avec
l’attribut CLASS.
• Pour utiliser l’attribut CLASS, on doit
écrire le caractère (.) suivi du nom de
CLASS
6767
Clickprincipales
Les to edit Master
catégories
title style
d'attributs CSS
• Pour finir cette présentation, nous allons parler des différents types
d'attributs CSS. En effet, CSS définit plus de 70 attributs de styles
utilisables pour un sélecteur quelconque.
6868
Clickprincipales
Les to edit Master
catégories
title style
d'attributs CSS
6969
Clickprincipales
Les to edit Master
catégories
title style
d'attributs CSS
7070
Clickprincipales
Les to edit Master
catégories
title style
d'attributs CSS
7171
Clickprincipales
Les to edit Master
catégories
title style
d'attributs CSS
7272
Click to editHTML5/CSS3
Validateurs Master title style
• [Link]
• [Link]
• [Link]
7373
Click to edit:Master
Application MICROSOFT
title style
EXPRESSION WEB 4
7474
Click to edit
Exemple de projet
MasterHTML5/CSS3
title style
7575
Click to edit IA
L'assistance Master
dans title
le navigateur
style Chrome
• Chrome DevTools est un outil
intégré à votre navigateur Chrome
qui permet d’inspecter les éléments
d’un site web.
• Les possibilités offertes par Chrome
DevTools sont nombreuses. Tout ce
dont vous avez besoin, c’est de
votre navigateur Chrome. En fait,
l’outil est déjà intégré au navigateur.
• Chrome DevTools lui-même prétend
être un moyen de vous aider à
construire votre site rapidement.
7676
Click to edit Master title style
Merci 77