Tps html5 css3

Prof : HAMMAMI Fatima classe : 4ème SI
Rappel( HTML5)
Généralement, un code HTML contient les balises suivantes :

<!DOCTYPE html>
<html>
Balise Rôle
<head> Html Elle englobe tout le contenu de la
<meta charset = "UTF-8"> page.
<title> Head Elle sert à définir quelques
…………………. informations générales sur la
</title>
</head> page(telque le titre,la langue ..etc).
<body> body Elle est utilisée pour définir le
contenu de la page Web.
</body>
</html>
Liste des balises en HTML5 :  Balises de tableau

• <table> Tableau
 Balises de premier niveau • <caption> Titre du tableau
• <html> Balise principale • <tr> Ligne de tableau
• <head> En-tête de la page • <th> Cellule d'en-tête
• <body> Corps de la page
• <td> Cellule
• <thead> Section de l'en-tête du tableau
 Balises d'en-tête • <tbody> Section du corps du tableau
• <link > Liaison avec une feuille de style • <tfoot> Section du pied du tableau
• <meta > Métadonnées de la page web
 Balises de formulaire
(charset, mots-clés, etc.) • <form> Formulaire
• <script > Code JavaScript • <fieldset> Groupe de champs
• <title > Titre de la page
• <legend> Titre d'un groupe de champs
• <label> Libellé d'un champ
 Balises de structuration du • <input > Champ de formulaire (texte, mot de
texte passe, case à cocher, bouton, etc.)
• <blockquote> Citation (longue) • <textarea> Zone de saisie multiligne
• <strong> Mise en valeur forte • <select> Liste déroulante
• <em> Mise en valeur normale • <option> Élément d'une liste déroulante
• <mark> Mise en valeur visuelle • <optgroup> Groupe d'éléments d'une liste
• <h1> Titre de niveau 1 déroulante
• <h2> Titre de niveau 2  Balises sectionnantes
• <h3> Titre de niveau 3 Ces balises permettent de construire le
• <h4> Titre de niveau 4 squelette de notre site web.
• <h5> Titre de niveau 5 • <header> En-tête
• <h6> Titre de niveau 6 • <nav> Liens principaux de navigation
• <img > Image • <footer> Pied de page
• <a> Lien hypertexte • <section> Section de page
• <br > Retour à la ligne • <article> Article (contenu autonome)
• <p> Paragraphe • <aside> Informations complémentaires
• <hr > Ligne de séparation horizontale
 Balises de listes
• <ul> Liste à puces, non numérotée  Quelques balises auto fermantes
• <ol> Liste numérotée (orphelines):
<br>,<hr>,<img>,<input>,<link>,<meta>
• <li> Élément de la liste à puces
• <dl> Liste de définitions
• <dt> Terme à définir
• <dd> Définition du terme
1
TP1 ( HTML5 et CSS3)

1) Lancer l’éditeur SublimeText3
2) Lancer un nouveau fichier
3) Enregistrer votre travail dans C:/votre dossier/html5 et css3/ tp1.html
4) Ecrire un code HTML permettant de réaliser la page web représentée ci-dessous.:
5) Ajouter les lignes suivantes à la fin du fichier tp5 et visualiser votre travail.
<h3> Évolution du langage : </h3>
<ul>
<li> 1989-1992 : Origine </li>
</ul>
</body>
 En déduire le rôle de chaque balise.
…………………………………………………………………………………………
…………………………………………………………………………………………
6) Compléter le reste de la liste sachant qu’elle contient aussi :
o 1993 : HTML 1.0
o 1995-1996 : HTML 2.0
o 1997 : HTML 3.2. et 4.0
o 2000 : XHTML
o De 2007 à nos jours : HTML 5 et abandon du XHTML 2
7) Effectuer les modifications présentées dans le tableau ci-dessous sur votre code
HTML.
Modification Résultat
<ul type="square">
<ul type="circle">
8) Remplacer la balise la balise ul par la balise ol et observer les résultats obtenus.

 En déduire le rôle de chaque balise ol.
…………………………………………………………………………………………………..
…………………………………………………………………………………………………
2
9) Effectuer les modifications présentées dans le tableau ci-dessous sur votre code
HTML.
N° Modification Résultat
1 <ol type="A">
2 <ol type="a">
3 <ol type="I">
4 <ol type="i">
 Le résultat final de la page est le suivant :
10) créer une feuille de style appelé « style.css » qui permet de faire les mises en forme
suivantes à la page web « TP1.html » :
 Couleur d’arrière-plan : rose
 Titre : centré , souligné , de couleur bleu , taille=40px , police= verdana
 Paragraphe : taille =20px ,
 La liste numéroté : Gras , Italique
11 ) Quelle est la balise qui nous permet de faire la liaison entre la page web et le fichier css ?
Quel est son emplacement dans le code HTML ?
3
TP2 ( HTML5 et CSS3)

3) Enregistrer votre travail dans C:/votre dossier/html5 et css3/ tp2.html
4) Ecrire un code HTML permettant de réaliser la page web représentée ci-dessous.:
5) Copier deux images d'extension jpg dans votre dossier de travail, et renommer-les
en image1.jpg et image2.jpg.
6) Ecrire la balise qui permet d’insérer les deux images de la façon suivante :
Image1 : aligné à gauche
Largeur = 200
Hauteur = 150
Info bulle de l’image : « première image »
Image2 : aligné à droite
Bordure = 4
Largeur = 100
Hauteur = 100
Info bulle de l’image : « deuxième image »
7) Comment peut-on mettre une image en arrière-plan de la page web?
4
8) ajouter à la fin de la page web le tableau suivant :

Image1 Image2
9) écrire le code qui construit les tableaux suivants :
 Table 1 :
Les types d’images
Image vectorielle Image bitmap Image animée
 Table 2 :
Bonjour Hello
bonsoir Hi
 Table 3 :
Voici deux colonnes fusionnées Hello
Bonjour bonsoir hi
5
TP 3 ( HTML5 et CSS3)
-Les liens hypertextes (externes et internes) + iframe

3) Enregistrer votre travail dans C:/votre dossier/html5 et css3/ liens.html
4) intégrer dans une page HTML le contenu d'une autre page HTML : créer une fenêtre qui
nous permet de faire une recherche sur google dans la page web « tp2.html ».
5) Lien hypertexte externe : Ecrire un code HTML permettant de réaliser la page
web liens.html qui contient deux liens hypertextes vers les deux pages tp1.html et tp2.html
(Ajouter des liens pour retournes des pages tp1 et tp2 vers la page « liens.html »)
6) Lien hypertexte interne :
a) Ajouter en haut de la page web tp2.html le mot « descendre vers le bas » qui sera
la source d’un lien hypertexte interne vers la fin de page.
b) Ajouter à la fin de page web tp2.html le mot « Remonter » qui sera la source d’un
lien hypertexte interne vers le début de page.
7) Ajouter à chaque balise a les propriétés suivantes, puis interpréter :
Propriété interpréter
<a href=” “ target=”_self”>
<a href=” “ target=”_parent”>
<a href=” “ target=”_blank”>
8) En se basant sur le « rappel des mises en forme des liens », appliquer les
mises en forme suivantes aux liens de la page web« liens.html »
Mises en forme demandées Code en CSS
Lien non visité : couleur rouge
Lien visité : souligné et de couleur bleu
Lien survolé par le pointeur de la souris :

couleur rose
Lien en cours d’activation : couleur jaune
6
Correction duTP 3 ( HTML5 et CSS3)

-Les liens hypertextes (externes et internes)
Q4) <iframe src=" www.google.com " title="description"></iframe>

Q5)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<p><a href="tp1.html" >TP 1</a></p>
<p><a href="tp2.html" >TP 2</a></p>
</body>
</html>
Q6)
 lien du bas vers le haut :
<a name="top"></a>
..
<a href="#top">top</a>
 Lien du haut vers le bas :

<p><a href="#down">cliquer ici pour descendre</a></p>
...

<h2 id="down">Section plus bas</h2>
Q7) Ajouter à chaque balise a les propriétés suivantes , puis interpréter :
Propriété interpréter
<a href=” “ target=”_self”> le contexte de navigation actuel. (Par défaut)
<a href=” “ target=”_parent”> le contexte de navigation parent de celui en cours. S'il n'y a pas de
parent, il se comporte comme _self.
<a href=” “ target=”_blank”> généralement un nouvel onglet, mais les utilisateurs peuvent
configurer les navigateurs pour ouvrir une nouvelle fenêtre à la place.
Q8)
Mises en forme demandées Code en CSS
Lien non visité : couleur rouge a :link{ color : red ; }
Lien visité : souligné et de couleur bleu a :visited{ text-decoratin : underline;

Color : blue; }
Lien survolé par le pointeur de la souris : rose a :hover{ color : pink ; }
Lien en cours d’activation : couleur jaune a : active { color : yellow ; }
7
Résumé :Les formulaires en HTML5
Les éléments d’un formulaire :

<input type="text" name=" " value=" " > Liste déroulante :
<input type="email" name=" " value=" ">
<input type="number" name=" " value=" "> Exemple:
<input type="tel" name=" " value=" ">
<input type="password" name=" " value=" "> <select name="profil">
<input type="date" name=" " value=" "> <option value="parti">Un
<input type="time" name=" " value=" "> particulier</option>
<input type="range" name=" " value=" "> <option value="profe" selected="selecte
<input type="button" name=" " value=" "> d">Un professionnel</option>
<option value="insti">Un
<input type="submit" name=" " value=" ">
institutionnel</option>
<input type="reset" name=" " value=" ">
</select>
</p>
<input type="checkbox" name=" " value=" "> Liste déroulante avancée :
Exemple : Exemple:
<p> Quel est votre sport préféré ?</p> <input list="nom">

<input type=″checkbox″ name=″CB″
value=″foot″>Football <datalist id="nom">
<input type=″checkbox″ name=″CB″
value=″course″>Course <option value="…….">
<option value="………">
<input type=″checkbox″ name=″CB″ </datalist>
value=″box″>Box Américain
<input type="radio"> <textarea id=" " name=" “ rows=”5”
cols=”33”>
Exemple :
</textarea>
<p> Groupe d’éléments d’un formulaire:
<input type="radio" name="civi" value="M <fieldset>
me" /> Madame <legend>nom du groupe </legend>
<input type="radio" name="civi" value="Mll .....
e" /> Mademoiselle </fieldset>
<input type="radio" name="civi" value="Mr
" /> Monsieur
</p>
Tous les elements d’un formulaire doivent être dans la balise :
<form action=" " method="post">
Elements du formulaire
</form>
8
TP 4( HTML5 et CSS3)
-Les formulaires

3) Enregistrer votre travail dans C:/votre dossier/html5 et css3/ liens.html
4) formulaire : Ecrire un code HTML permettant de réaliser la page web
formulaire1.html pour remplir les données suivantes :
 Créer la liste de sélection en utisant la balise « SELECT »
5) Recréer la liste déroulante en utilisant la balise « datalist »
9
Correction duTP 4( HTML5 et CSS3)

-Les formulaires
4) <form name="mon-formulaire1" action=" " method="get">

<p>
<input type="radio" name="civi" value="Mme" /> Madame
<input type="radio" name="civi" value="Mlle" /> Mademoiselle
<input type="radio" name="civi" value="Mr" /> Monsieur
</p>
<p>
Votre prénom :<br />
<input type="text" name="prenom" value="" />
</p>
<p>
Votre nom :<br />
<input type="text" name="nom" value="" />
</p>
<p>
Votre mot de passe :<br />
<input type="password" name="passe" value="" />
</p>
<p>
Vous êtes<br />
<select name="profil">
<option value="parti">Un particulier</option>
<option value="profe" selected="selected">Un professionnel</option>
<option value="insti">Un institutionnel</option>
</select>
</p>
<p>
Quel type de prestation recherchez vous ?<br />
<input type="checkbox" name="interet" value="loc" /> Location de
mobilier
<input type="checkbox" name="interet" value="achat" /> Achat de
mobilier
</p>
<p>
Votre message :<br />
<textarea name="le-message" rows="6" cols="40">Vous pouvez saisir ici
un message.</textarea>
</p>
<p>
<input type="submit" value="Envoyer" />
<input type="reset" value="Annuler" />
</p>
</form>
5) <input list="profil" id="myprofil" name="p"/>

<datalist id="profil">
<option value="Un particulier">
<option value="Un professionnel">
<option value="Un institutionnel">
</datalist>
10
TP 5( HTML5 et CSS3)
-Les balises sémantiques + Rappel (image, table, formulaire)

3) Enregistrer votre travail dans C:/votre dossier/html5 et css3/Projet1/ accueil.html
4) Ecrire un code HTML permettant de réaliser la page web représentée ci-dessous:
HEADER
SECTION
NAV aside
ARTICLE
ARTICLE
footer
5) choisir un sujet de votre site web et remplir les différentes parties de cette page web
6) Améliorer cette page, en ajoutant un code CSS pour bien organiser ces parties, et faire
des mises en forme.
7) créer une page qui contient des images, une page qui contient une table et une page qui
contient un formulaire
8) pour pouvoir naviguer dans votre site web, ajouter des liens hypertexte internes et
externes
11
Correction du TP 5( HTML5 et CSS3)

-Les balises sémantiques + Rappel (image, table, formulaire)
Q4) <body>
<header> <h1>bienvenue a mon site web</h1> </header>
<nav>
<p> <a href="page1.html" >pqge 1</a></p>
<p> <a href="page2.html" >pqge 2</a></p>
</nav>
<section>
<article>
......................
</article>
<article>
.....................
</article>
</section>
<aside> publicite </aside>
<footer>........................ </footer>
</body>
Q6) header{
border: 1px dashed;
top: 0%;
background-color: pink;
width: 100%;
height:20%; }
nav{
border:1px dashed;
float: left;
width: 20%;
position: absolute;
height: 65%;
top: 15%; }
section{
border: 1px dashed;
margin-left: 21%;
width: 60%;
12
 Autre méthode Q6) :

height: 65%;
position: absolute;
top: 15%; }
aside{
border: 1px dashed;
margin-left: 82%;
width: 17%;
height: 65%;
position: absolute;
top: 15%; }
footer{
border: 1px dashed;
bottom: 0%;
background-color: pink;
height: 20%;
width: 100%;
position: absolute;
13
CSS3 (mise en forme des textes)
couleurs Utilisation de la balise “div”

color: red; <div class="conteneur">
color: #00ff00; <h1>Un titre de niveau 1</h1>
color: rgb(34, 12, 64);
<p class="p1">Un premier paragraphe</p>
<p class="p2">Un autre paragraphe</p>
</div>
fontes ------CSS-----------
font-family: arial; /*On ajoute une bordure autour de l'élément conteneur.
*Le div fait 70% de la largeur de son parent (le body)*/
.conteneur{
font-size: 10px; border: 1px solid black;
width: 70%;
font-size: 2.6em; box-shadow: 5px 5px 0px red;
font-style: normal; padding: 10px 50px 100px 200px; /* top right bottom left*/
font-style: italic; margin: 20px 10px 10px 20px;
font-style: oblique; }
font-weight: 400;/*normal */ /*Le texte est centré p/r à l'élément parent (le div conteneur)*/
font-weight: normal; h1{
font-weight: bold; text-align: center;
}
/*Texte aligné à gauche p/r à l'élément parent (le div)*/
.p1{
text-align: left;}
Souligner ou surligner un texte Ombre d’un texte
h1{ /*Ombre noire en bas à droite, nette*/
text-decoration: underline; h1{
} text-shadow: 5px 5px;
.p1{ }
text-decoration: underline overline red;
} /*Ombre bleue en bas à gauche, nette*/
.p1{
.p2{ text-shadow: -5px 2px blue;
text-decoration: overline dashed; }
}
.p3{ /*Ombre rouge centrée sur le texte (décalement horizontal et vertical de
text-decoration: underline wavy; 0px), floue*/
} .p2{
a{ text-shadow: 0px 0px 5px red;
text-decoration: none; }
}
/*Double ombre de .p1 et de .p2*/
.p3{
text-shadow: -5px 2px 1px blue, 0px 0px 5px red;
Transformation d’un texte

h1{
text-transform: uppercase;}
NB : Ces mises en forme peuvent être appliquées
.p1{ aux balises de types textes (exemple : p , h1 , a…)
text-transform: lowercase;
}
.p2{
text-transform: capitalize;}
14
Les couleurs en CSS
 rgb(red, green, blue)

/*chaque valeur peut être entre 0 et 255 */
 C O DES DE C OUL E UR HE X
#XXXXXX
#454545
#999999
#FF0000
#00FF00
#0000FF
Liste des codes de couleur HTML commun

COLOR : NAME HEX CODE RGB CODE
White #FFFFFF rgb(255, 255, 255)
Gray #808080 rgb(128, 128, 128)
Black #000000 rgb(0, 0, 0)
Red #FF0000 rgb(255, 0, 0)
Maroon #800000 rgb(128, 0, 0)
Yellow #FFFF00 rgb(255, 255, 0)
Green #008000 rgb(0, 128, 0)
Aqua #00FFFF rgb(0, 255, 255)
Teal #008080 rgb(0, 128, 128)
Blue #0000FF rgb(0, 0, 255)
Navy #000080 rgb(0, 0, 128)
Fuchsia #FF00FF rgb(255, 0, 255)
Purple #800080 rgb(128, 0, 128)
15
CSS3 (mise en forme d’une table)
code résultat
bordures d’une table
table, th, td {
border: 1px solid black;
}
table {
width: 100%;
}
table {
border-collapse: collapse;
}
table {
border: 1px solid black;
}
th, td {
border-bottom: 1px solid
#ddd;
}
Styles d’une table
table {
width: 100%;
}
th {
height: 70px; }
table {
width: 50%;
box-shadow :5px 5px 2px grey;
}
Alignements d’une table
td {
text-align: center;
}
td {
height: 50px;
vertical-align: bottom;
}
th, td {
padding: 15px;
text-align: left; }
les styles de bordures : dotted (pointillé), dashed (tirets), solid (solide), double (double)
16
CSS3 (mise en forme d’un lien hypertexte)

(Quelques exemples)
a:link { text-align: center;
color: yellow; text-decoration:

} none;
} display: inline-block;}
/* visited link */ --------------A link styled as a button 2---------
a:visited { a:link, a:visited {
color: green; background-color: white;
} color: black;
/* mouse over link */ border: 2px solid green;
a:hover { padding: 10px 20px;
color: hotpink; text-align: center;
text-decoration: underline; text-decoration: none;
} display: inline-block;
/* selected link */ width: 100px;
a:active { }
color: blue; a:hover, a:active {
text-decoration: none; background-color: green;
} color: white;
-------A link styled as a button:-------- transition: width 2s; /*transition du largeur*/
a:link, a:visited { width: 300px;

}
background-color: #f44336;
color: white;
padding: 14px 25px;
17

Tps html5 css3

Transféré par

Droits d'auteur :

Formats disponibles

Tps html5 css3

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

Tps html5 css3

Transféré par

Droits d'auteur :

Formats disponibles

Prof : HAMMAMI Fatima classe : 4ème SI

Généralement, un code HTML contient les balises suivantes :

Liste des balises en HTML5 :  Balises de tableau

TP1 ( HTML5 et CSS3)

8) Remplacer la balise la balise ul par la balise ol et observer les résultats obtenus.

 Le résultat final de la page est le suivant :

TP2 ( HTML5 et CSS3)

1) Lancer l’éditeur SublimeText3

7) Comment peut-on mettre une image en arrière-plan de la page web?

8) ajouter à la fin de la page web le tableau suivant :

9) écrire le code qui construit les tableaux suivants :

1) Lancer l’éditeur SublimeText3

<a href=” “ target=”_parent”>

<a href=” “ target=”_blank”>

Lien non visité : couleur rouge

Lien visité : souligné et de couleur bleu

Lien survolé par le pointeur de la souris :

Lien en cours d’activation : couleur jaune

Correction duTP 3 ( HTML5 et CSS3)

Q4) <iframe src=" www.google.com " title="description"></iframe>

Lien visité : souligné et de couleur bleu a :visited{ text-decoratin : underline;

Lien en cours d’activation : couleur jaune a : active { color : yellow ; }

Résumé :Les formulaires en HTML5

Les éléments d’un formulaire :

<input type="checkbox" name=" " value=" "> Liste déroulante avancée :

<p> Quel est votre sport préféré ?</p> <input list="nom">

1) Lancer l’éditeur SublimeText3

5) Recréer la liste déroulante en utilisant la balise « datalist »

Correction duTP 4( HTML5 et CSS3)

4) <form name="mon-formulaire1" action=" " method="get">

5) <input list="profil" id="myprofil" name="p"/>

1) Lancer l’éditeur SublimeText3

Correction du TP 5( HTML5 et CSS3)

 Autre méthode Q6) :

border: 1px dashed;

CSS3 (mise en forme des textes)

couleurs Utilisation de la balise “div”

Transformation d’un texte

Les couleurs en CSS

 rgb(red, green, blue)

Liste des codes de couleur HTML commun

White #FFFFFF rgb(255, 255, 255)

Gray #808080 rgb(128, 128, 128)

Black #000000 rgb(0, 0, 0)

Red #FF0000 rgb(255, 0, 0)

Maroon #800000 rgb(128, 0, 0)

Yellow #FFFF00 rgb(255, 255, 0)

Green #008000 rgb(0, 128, 0)

Aqua #00FFFF rgb(0, 255, 255)

Teal #008080 rgb(0, 128, 128)

Blue #0000FF rgb(0, 0, 255)

Navy #000080 rgb(0, 0, 128)

Fuchsia #FF00FF rgb(255, 0, 255)

Purple #800080 rgb(128, 0, 128)

CSS3 (mise en forme d’une table)

CSS3 (mise en forme d’un lien hypertexte)

a:link { text-align: center;

color: yellow; text-decoration:

/* visited link */ --------------A link styled as a button 2---------

-------A link styled as a button:-------- transition: width 2s; /transition du largeur/