Formation HTML - Css Niveau 1

DÉVELOPPEMENT WEB
Présenté par: Messelmani Ines

Présentation
• HTML(HyperText Markup Language)
 Il a fait son apparition dès 1991 lors du lancement du
Web.
 Son rôle est de gérer et organiser le contenu
 C’est donc en HTML qu’on écrit ce qui doit être affiché
sur une page web: du texte, des liens, des images,…
• CSS(Cascading Style Sheets, aussi appelées feuilles de
style)
 Son rôle est de gérer l ’apparence de la page web
(positionnement, décoration, couleur, taille du texte,…)
 Ce langage est venu compléter le HTML en 1996.
2
HTML
HTML+CSS
3
Les éditeurs HTML
• Notepad ++
• Sublime Text
• Visual studio code
• BlueGriffon
• Jsbin
4
Eléments, balises et attributs
• Les instructions HTML sont exprimées dans des balises

délimitées par les signes < et >.
5
Concepts de base du HTML
• Les ﬁchiers HTML sont structurés en deux parties principales:
l’en-tête <head> et le corps <body>
• La déclaration <!DOCTYPE ...> précise la version d’HTML utilisée.

 HTML 4.01: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.example.com/TR/xhtml11/DTD/xhtml11.dtd">
 HTML 5: <!DOCTYPE html>
6
Concepts de base du HTML
• La balise <html>
• C'est la balise principale du code. Elle englobe tout le contenu de
votre page. Comme vous pouvez le voir, la balise fermante </html>
se trouve tout à la fin du code !
• L'en-tête <head> et le corps <body>
• Une page web est constituée de deux parties :
 L'en-tête : cette section donne quelques informations générales sur
la page comme son titre, l'encodage , etc.
 Le corps : c'est là que se trouve la partie principale de la page.
Tout ce que nous écrirons ici sera affiché à l'écran.
• L'encodage (charset) <meta charset="utf-8" />
 Cette balise indique l'encodage utilisé dans votre fichier .html
 L'encodage indique la façon dont le fichier est enregistré. C'est lui qui
détermine comment les caractères spéciaux vont s'afficher (accents,
idéogrammes chinois et japonais, caractères arabes, etc.).
 <meta name="viewport" content="width=device-width, initial-
scale=1.0">
7
Les balises de base d’un document HTML
8
Les balises de base d’un document HTML
suite
Les listes
<ol> : liste numérotée; <ul>: liste non-numérotée
les éléments de la liste sont : <li>…</li>
<dl> : liste de définition utilisé pour présenter des glossaires
les éléments de la liste <dt>…</dt> pour les termes à définir
Et <dd>..</dd> pour la définition des termes
9
Activité 1
10
Insertion des liens
 Syntaxe : <a href= "cible du lien " > texte du lien </a>
 On distingue 4 cas :
1er Cas : Un lien vers un site ou une page d'un site
<a href="adresse_de_la_page_a_visiter">Texte du lien vers le site</a>
2ème Cas : Un lien vers un fichier téléchargeable (.jpg , .pdf , .doc , .doc , .zip etc…)
<a href="formation.pdf">Version PDF</a>
3ème Cas : Un lien vers une adresse électronique
<a href="mailto:ines.mes2020@gmail.com">Nous contacter</a>
4ème Cas : Un lien vers un endroit de la page web en cours
<a name="nom"> la cible à atteindre</a> : (il s’agit de mettre une ancre à l’endroit que l’on veut atteindre)
<a href="#nom">Texte du lien vers la cible à atteindre </a> : (il faut pointer le lien vers l’ancre en la
précédant par une #)

11
Validation
• Différents navigateurs peuvent produire
différents résultats à partir d’un même code
• Le W3C met deux outils pour la vérification:

– Validateur HTML: https://validator.w3.org/
– Validateur CSS: https://jigsaw.w3.org/css-validator/
12
13
Sélecteurs, Propriétés, valeurs
• Le sélecteur est généralement l’élément
HTML auquel on applique un style
• Une propriété détermine le style qui va être
appliqué à un élément
• Une valeur détermine le comportement
d’une propriété
14
Sélecteurs, Propriétés, valeurs
• Exemple:
sélecteur p{
valeurs
color: blue;
propriétés
font-size: 16px;
}
OÙ ECRIT-ON LE CSS ?
• 3 possibilités :
– Dans l’élément <head >du document HTML,
– Dans la balise ouvrante d’un élément,
– Dans un fichier CSS séparé.
Il est recommandé d’utiliser la dernière méthode.
• Pour lier un fichier HTML avec un fichier CSS, on

écrit :
<link rel="stylesheet" href="fichiercss.css"/>
Question: Changer la couleur des titres en bleu en utilisant
Les trois méthodes en CSS.
17
CLASS & ID
• Class et Id sont deux attributs HTML, créés
pour pouvoir appliquer différents styles à des
éléments de même type.
• Class permet également d’appliquer le même

style à différents éléments HTML (en leur
appliquant la même valeur pour l’attribut
class).
Alors la différence c’est quoi?
id ne doit désigner qu'un seul objet du document.
Par exemple, il est possible d'avoir ce code :

<p class="para1"></p>
<p class="para1"></p>
Mais il n'est pas correct d'avoir ce code :
<p id="para1"></p>
<p id="para1"></p>
CLASS & ID dans la feuille de style
Dans la feuille de style CSS, les règles

seront écrites avec la syntaxe :
#nom_id pour les id
.nom_de_classe pour les class.
En utilisant class et id changer les couleurs comme l’illustre cette figure
Peut-on changer par exemple le mot langage avec une autre couleur?
21
Les éléments DIV et span
• Ces deux éléments HTML ne possèdent
aucune valeur sémantique, c’est-à-dire qu’ils
ne servent pas à préciser la nature d’un
contenu.
• Ils sont des conteneurs génériques qui ont
été créés pour nous permettre d’ordonner
nos pages plus simplement en CSS.
22
23
Eléments de type block & inline
• Tout élément, en HTML, est:
– De type block (Div)
– De type inline (span)
Eléments block Eléments inline
P em
H1, h2, h3,… strong
Header, article, footer… mark
Ol, ul,dl a
table img
24
SELECTEURS AVANCES
• Il est possible de combiner les sélecteurs
pour cibler précisément du contenu.
• Appliquer le même style à tous les éléments:
* { propriété: valeur; }
• Appliquer un style aux élément A et B :
A, B { propriété: valeur; }
• Sélectionner un élément B contenu dans A :
A B { propriété: valeur; }
Les couleurs
Nom des couleurs Notation hexadécimale Notation RGB
26
Activité 2
• En utilisant le document suivant:
– Mettre le premier paragraphe en rouge
– Modifier le 1er paragraphe avec la couleur
hexadécimale(#FF0000)
– Mettre le 2ème paragraphe en utilisant les couleurs RGB de
votre choix
– Le 4ème paragraphe en utilisant les couleurs RGB avec
opacité de 0,9
rgb(0..255,0..255,0..255)
rgba(0..255,0..255,0..255,opacité:0..1)
27
28
29
30
L’héritage
• Les éléments en HTML « héritent » des styles
de leurs parents, d’où le « cascading » de CSS
• En cas de conflit, le style le plus proche de
l’élément en question sera appliqué
31
Formater le texte et
positionner les éléments
32
Les propriétés de type font
Font-size (px,pt,em,ex,%)
Font-style(normal/italic/oblic/inherit)
Font-weight(lighter/normal/bold/bolder/lnherit
Font-family
33
Activité 3
• Reprendre l’activité 2 et mettre tout le texte
en italic, police arial
• Mettre le premier paragraphe en gras, taille
30, ce paragraphe ne doit pas être en italique
• Utiliser pour le 2ème paragraphe une valeur
relative pour la taille(%,em,ex)
• Mettre la police du dernier paragraphe calibri
34
35
Les propriétés de type text
Text-align (left,center, right,justify, inherit)
Text-decoration(underline/overline/linethrough/inherit/none
Text-indent(px:déclage vers la droite/vers la gauche)
Text-transform(uppercase/capitalize/lowercase/none/inherit)
Text-shadow(dep_h_O,dep_v_O,propagation,couleur)en px
36
Activité 3(suite)
• Aligner à droite le premier paragraphe
• Souligner le deuxième paragraphe et le
mettre en majuscule
• Décaler vers la droite de 10px le 3ème
paragraphe
• Mettre la police du dernier paragraphe calibri
• Ajouter un ombre au 3ème paragraphe avec les
paramètres suivants: 3px 2px 4px black
37
38
Le modèle de boîtes
• Un concept fondateur: tout élément d’une
page est une boite rectangulaire et peut avoir
un padding(marge inférieur),une marge
(extérieur)et des bordures
39
HEIGHT & WIDTH
• La hauteur par défaut est déterminé par son
contenu
• La largeur par défaut est déterminé par son
type
• Pour changer la hauteur et la largeur d’un
élément de type block, on utilise les
propriétés width et height
40
Les bordures
• On peut créer des bordures et les
personnaliser grâce aux propriété: border-
width, border-style et border-color et border-
radius
• La propriété border-style définit le style de la
bordure:
41
Margin & Padding
• La propriété margin permet de définir la taille
de l’espace entourant l’élément. Elle peut
être utilisée pour positionner les éléments
• La propriété padding permet de définir la
marge intérieur d’un élément
42
Définition d’une notation CSS raccourcie ou
notation « short hand »
• C’est une propriété à laquelle on va pouvoir
passer les valeurs d’un ensemble d’autres
propriétés et qui va donc nous permettre de
définir de valeur de plusieurs propriétés d’un
coup
43
Structurer et organiser le contenu
Nouveaux éléments HTML5
44
header et footer
• L'élément header définit l'en-tête d'un document,

d'une section ou d'un article.
• L'élément footer définit un pied de page dans un
document ou une section, et contient généralement
des informations sur le document ou la section, par
exemple le nom de l'auteur, les données de
Copyright, des liens, etc.
• Peut inclure plusieurs en-têtes et pieds de page
dans un document
45
nav
• Définit un bloc de liens de navigation et est
très utile pour créer les éléments suivants :
– Ensemble de liens de navigation pour la
navigation principale d'un document
– Table des matières
– Fil d'Ariane dans un pied de page
– Liens Précédent-Accueil-Suivant
• Exemple
46
aside
• est utilisé pour représenter le contenu qui est
liée à la teneur environnante faisant
référence à un article ou à la page web. Ce
type de contenu est souvent représenté dans
des encadrés.
47
aside
• Exemple
48
aside
• Exemple (suite)
49
Insertion des médias
la balise img
• Utilisez img pour ajouter des images à un
document HTML
• Exemple : <img src="images/redball.jpg"
alt="graphique de boule rouge" />
• Les attributs src et alt sont tous deux nécessaires
pour que le code soit pleinement valide.
• Le groupe W3C exige l'attribut alt pour faciliter
l'accessibilité des personnes présentant un
handicap.
50
les balises figure et figcaption
• L'élément figure spécifie le type de figure à ajouter
• L'élément figcaption ajoute une légende
à une image sur une page Web. Cette légende peut s'afficher avant ou
après l'image
51
les balises figure et figcaption(exemple2)
52
la balise video
• Permet d'incorporer des vidéos dans des
documents HTML en utilisant un minimum de code
• Exemple de balisage :
<video src="intro.mp4" width="400" height="300">
</video>
• les attributs de video
 poster : Affiche un fichier image statique avant le chargement de la vidéo
 autoplay : Démarre automatiquement
la lecture de la vidéo après le chargement de la page
 controls : Affiche un ensemble de contrôles utilisés pour lire, mettre en
pause ou arrêter la vidéo et régler le volume
 loop : Répète la vidéo
53
la balise video( exemple)
54
la balise audio
• Permet d'incorporer du contenu audio,
comme de la musique et d'autres sons,
dans des documents HTML en utilisant
un minimum de code
<audio src="sample.mp3"
controls="controls">
</audio>
55
la balise audio( exemple)
56
La table HTML
• <table> définit la table générale
• <tr> définit les lignes
• <th> définit les en-têtes de colonne
• <td> définit les cellules
• <caption> ajoute une légende au-dessus ou au-
dessous de la table
• <col> applique des styles CSS intralignes
• Les longues tables avec des barres de défilement
utilisent les balises <thead>, <tfoot> et <tbody>
57
La table HTML
• exemple1
58
La table HTML
 exemple2
59
Les formulaires
création
• Permettent d’interagir avec l’utilisateur en lui
proposant d’entrer des informations
• En HTML : uniquement l’interface de formulaire
• Un formulaire HTML est placé à l’intérieur d’une
balise <form>. Celle-ci prend les attributs suivants :
• action: URL du script auquel sera soumis le formulaire.
• method: Méthode HTTP, valant soit "get" soit "post" .
• exemple
<form action=“page.php“ method="get">…</form>
60
Les formulaires
les champs de saisie
• La balise <input> a une utilisation très vaste dans les formulaires. Elle
représente un champ de saisie.
• L’attribut type détermine le type (text, password, file, email, etc.) du
champ.
• L’attribut name est obligatoire sauf pour les types "reset" et "submit"
• HTML5 introduit plusieurs nouvelles entrées et attributs d'éléments, tels :
– url pour entrer une adresse Web unique
– email pour une ou plusieurs adresse email
– search pour inviter les utilisateurs à entrer le texte à rechercher
• Exemple
<input type="text" name=“login" value=“amira"
maxlength="50">
<input type="password" name="pwd" >
<input type=“reset" name=“annuler" >
<input type=“submit" name=“valider" > 61
Les formulaires
les cases à cocher
• type ="checkbox" permet de choisir plusieurs
éléments parmi une liste de possibilités sous
forme de cases à cocher.
• Exemple
<input type="checkbox" name="pub" value="site"
checked="checked" id="pub-site"> Recevoir des
offres
<input type="checkbox" name="pub1" checked="checked"
value="externe" id="pub-externe"> Recevoir des
offres externes
62
Les formulaires
les boutons radio
• type ="radio" permet de choisir un seul
élément parmi une liste de possibilités sous
forme de boutons radio.
• exemple
<input type="radio" name="pub" value="oui"
id="pub-oui“ checked="checked"> accepter
<input type="radio" name="pub" value="non"
id="pub-non"> refuser
63
Les formulaires
liste de sélection
• La balise <select> permet d’ajouter une liste
de sélection
• Exemple
<select name="age">
<option value="20">Moins de 20 ans</option>
<option value="35" selected="selected">21 à 35
ans</option>
<option value="50">36 à 50 ans</option>
<option value="51">Plus de 51 ans</option>
</select>
64
Les formulaires – liste de sélection
Structuration de la liste de sélection
 les balises <optgroup> et <label> permettent de regrouper plusieurs options
de même type sous un titre (label)
 La balise <optgroup> crée un décalage des options ainsi regroupées; le titre
du groupe n’est pas sélectionnable
<form> <select>
<optgroup label="Europe">
<option> France
</option>
<option> Belgique
</option>
<option> Suisse
</option>
</optgroup>
<optgroup label="Autres pays">

<option> USA </option>
<option> Canada 65
</option>
Les formulaires
étiquette
• La plupart des champs sont naturellement accompagnés
d’une étiquette ( <label> ).
• On peut la placer où on veut, en général juste à gauche ou à
droite du champ.
• Son attribut for, référence l’attribut id du champ
correspondant.
• Un clic sur l’étiquette d’un champ permet en général de
sélectionner le champ.
• exemple
<label for="taille">Taille :</label>
<input type="text" name="taille" id="taille">
66
Les formulaires
Création d'un formulaire avec Fieldset
• L'élément fieldset est utilisé avec de

nombreux formulaires pour grouper les
éléments connexes.
• La balise <fieldset> encadre les éléments
individuels et/ou le formulaire entier.
67
Les formulaires
Exemple de formulaire simple
68
Les formulaires – Organisation
<form> <fieldset>
<legend> Mentions obligatoires : </legend>
Nom: <input type="text" size="20" /> <br/>
Prenom: <input type="text" size="40" /> <br/>
</fieldset>
<fieldset>
<legend> Mentions facultatives : </legend>
Adresse email: <input type="text" size="20" /> <br/>
</fieldset> </form>
69
Les formulaires
Attribut de formulaire required
• L'attribut required rend obligatoire la saisie

d’informations dans un champ avant de soumettre
le formulaire.
<input type="email" required />
• exemple
70
Les formulaires
Attribut de formulaire placeholder
• L'emplacement réservé au texte correspond
au texte qui s'affiche à l'intérieur d'un champ
d'entrée lorsque le champ est vide. Il permet aux
utilisateurs de comprendre le type d'informations
à entrer ou sélectionner.
• Exemple
<input name="fName" placeholder=
"First Name" />
71
Les formulaires
Attribut de formulaire pattern
• L'attribut pattern offre un format
(expression régulière) pour un champ d'entrée
qui est utilisé pour valider le contenu du
champ.
<input type="text" id="empID"
name="EmployeeID" required
pattern="[A-Z]{2}[0-9]{4}"
title="ID d'employé commençant par
deux lettres majuscules suivies de
quatre chiffres">
72
Les formulaires
Attribut de formulaire pattern(suite)
• Vous pouvez utiliser l'attribut pattern avec

les types <input> suivants :
– text
– search
– url
– telephone
– email
– password
73
Les formulaires
la validation
• Processus qui permet de s'assurer que les

informations saisies dans un formulaire Web
présentent un format correct et sont utilisables
avant de transmettre les données au serveur.
• Certains éléments vérifiés au cours de la
validation :
– Les champs obligatoires sont vides
– Les adresses e-mail sont valides
– Les dates sont valides
– Le texte n'apparaît pas dans un champ numérique
ou vice versa
74
Les Formulaires
Exemple de validation
75
MERCI POUR VOTRE ATTENTION
76

Formation HTML - Css Niveau 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Formation HTML - Css Niveau 1

Transféré par

Droits d'auteur :

Formats disponibles

DÉVELOPPEMENT WEB

Présenté par: Messelmani Ines

• Visual studio code

• Les instructions HTML sont exprimées dans des balises

• La déclaration <!DOCTYPE ...> précise la version d’HTML utilisée.

1er Cas : Un lien vers un site ou une page d'un site

<a href="adresse_de_la_page_a_visiter">Texte du lien vers le site</a>

<a href="formation.pdf">Version PDF</a>

3ème Cas : Un lien vers une adresse électronique

<a href="mailto:ines.mes2020@gmail.com">Nous contacter</a>

4ème Cas : Un lien vers un endroit de la page web en cours

précédant par une #)

• Le W3C met deux outils pour la vérification:

• Pour lier un fichier HTML avec un fichier CSS, on

• Class permet également d’appliquer le même

id ne doit désigner qu'un seul objet du document.

Par exemple, il est possible d'avoir ce code :

Dans la feuille de style CSS, les règles

Nom des couleurs Notation hexadécimale Notation RGB

Text-align (left,center, right,justify, inherit)

Text-indent(px:déclage vers la droite/vers la gauche)

• L'élément header définit l'en-tête d'un document,

<optgroup label="Autres pays">

• L'élément fieldset est utilisé avec de

• L'attribut required rend obligatoire la saisie

• Vous pouvez utiliser l'attribut pattern avec

• Processus qui permet de s'assurer que les

Vous aimerez peut-être aussi