Scribd
Importer
4 vues29 pages

Introduction au développement web HTML/CSS

Le document présente les bases du développement web, en se concentrant sur la création de pages HTML et l'utilisation de CSS pour la mise en forme. Il inclut des activités pratiques pour créer des fichiers HTML, insérer des balises, et appliquer des styles, tout en expliquant les rôles des différentes balises. Les activités sont conçues pour aider les étudiants à comprendre la structure et la syntaxe des documents web.

Transféré par

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

Introduction au développement web HTML/CSS

Le document présente les bases du développement web, en se concentrant sur la création de pages HTML et l'utilisation de CSS pour la mise en forme. Il inclut des activités pratiques pour créer des fichiers HTML, insérer des balises, et appliquer des styles, tout en expliquant les rôles des différentes balises. Les activités sont conçues pour aider les étudiants à comprendre la structure et la syntaxe des documents web.

Transféré par

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

2TI Ibn Rachik Ezzahra

Introduction:

 Un site web est ensemble de pages web reliées entre elles par des
liens hypertextes
 Une page web est un document texte ecrit en langage HTML et
enregistrée avec l'extension .HTML
 Le HTML décrit la structure de la page web (le squelette)
 Le CSS permet d'embellir (mise en forme) une page web

Les outils de developpement web:

Les éditeurs
Les navigateurs

Notepad++ VS Code

Activité 1 :

1. Créez un dossier avec le nom et le prénom dans documents


2. Ouvrez l’éditeur « Notepad++ », créez un nouveau document puis enregistrer dans le dossier de travail
sous le nom « [Link] ».
3. Dans le menu langage choisir "html" puis taper F5 et exécuter le fichier « [Link] ».
4. Le navigateur (Google chrome) par défaut de votre machine se lance, taper F12 et décrire le résultat

 Une page web est un fichier texte enregistré avec l'extension html (HyperText Mark-Up Language )
 Un document html est composé de balises (tags) tels que <html> <head> <body>
 Une balise s'écrit entre < et >
 Une balise est une commande permettant d'insérer ou mettre en forme un élément html
 Un fichier HTML commence par la balise: <html> et se termine par </html>
 La partie entête délimitée par <head> et </head> sert à définir des informations générales sur la
page
 La partie corps du document délimité par <body> et </body> est utilisée pour définir le contenu
de la page Web.
5. Lancer une page web existante puis taper sur F12 et déduire la structure d'un document html

Enseignante: Hajer Amri 1


2TI Ibn Rachik Ezzahra

La structure globale d'un document html

<! doctype html>

<html>
Entête du
<head> document
HTML
<meta charset="UTF-8">

Titre du <title>
document
………..

………..

</title>

</head> Corps du document


HTML

<body>

………..
………..
< /body>

</html>

6. Saisir le code html suivant et réenregistrer (Ctrl+S) le fichier tp1


<! DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title> ma premiere page </title>
</head>
<body>
Mon premier contenu
</body>
</html>

7. Visualiser la page dans le navigateur (ou taper F5 si la page est ouverte) et déduire le rôle des éléments
ajoutés
8. Modifier le contenu de body et saisir "ç é à et des lettres arabes ", supprimer <meta…>, taper Ctrl+S et
ouvrir le document avec le navigateur internet explorer, qu'est-ce que vous constatez?

Enseignante: Hajer Amri 2


2TI Ibn Rachik Ezzahra

 La déclaration <!DOCTYPE html> définit que ce document est un document html


 <meta charset="UTF-8">:Indique l’encodage du document permettant d'afficher toutes les langues
c'est une balise orpheline (n'a pas de balise fermante)
 La balise <title> sert à définir le titre de la page qui sera affiché dans la barre de titre du navigateur

9. Ajouter
 ce texte dans la partie body : <!--voici un commentaire --> et visualiser le travail dans le
navigateur
 , que remarquez-vous?

 Un commentaire est une note, information ou détail qui accompagne le code html mais ne sera pas
affiché sur la page web
 Permet une meilleure compréhension du code

Activité 2 :

1. Lancer l'éditeur VS code et saisir le code html suivant puis enregistrer dans votre dossier de travail
sous le nom tp2

<! DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title> tp2 </title>
</head>
<body>
<!- -phrase1 - ->
html: HyperText Markup Language est créé en 1991, son rôle est : donner du sens et
structurer le contenu d'une page web
<!- -phrase2 - ->
css : Cascading Style Sheets est créé en 1996,sa fonction est : mettre en forme le
contenu en lui ajoutant des styles
</body>
</html>

2. Visualiser le travail, que remarquez-vous?

Conseil: - Après chaque modification du fichier html taper Ctrl+S puis sur le navigateur déjà ouvert taper F5
- Minimiser la taille des 2 fenêtres et laisser côte à côte pour une meilleure visibilité

Enseignante: Hajer Amri 3


2TI Ibn Rachik Ezzahra

3. Mettre la 1ere phrase entre les balises <p> et </p> et la 2eme phrase de même, que constatez-vous?
4. Ajoutez la balise <br> entre les 2 phrases du texte. Que remarquez-vous ?

 La balise <p> représente un paragraphe et provoque un retour automatique à la ligne


 La balise <br> permet de créer un saut de ligne

5. Au début de la partie body ajouter les 2 lignes suivantes et déduire le rôle des nouvelles balises
<h1> html est css sont nécessaires pour le développement web</h1>
<h2> les rôles de html et css </h2>

 Les balises de h1 à h6 représentent 6 niveaux


de titres dans un document
 h1 est le plus grand
 h6 est le plus petit

6. Modifier le fichier tp2 en suivant les instructions suivantes et décrire le résultat obtenu:

- Délimiter la date 1991 entre <b> et </b>


- Délimiter la date 1996 entre <mark> et </mark>
- Délimiter les mots html et css entre <em> et </em>

 La balise em permet d'afficher le texte en italique


 La balise mark permet d'appliquer un style surligné jaune sur le texte
 La balise b permet d'afficher un texte en gras

Activité 3 :

1. Ouvrir le fichier [Link] avec vs code et ajouter les lignes suivantes puis enregistrer sous le nom tp3:

<h2> évolution du html </h2>


<ul>
<li>1989-1992:origine</li>

<li>1993:html 1.0</li>

<li>1995-1996:html 3.2 et 4.0</li>

<li> xhtml</li>
<li> de 2007 à nos jours: html5 et abandon du xhtml </li>

</ul>

2. Déduire le rôle de chaque balise


3. Remplacer la balise ul par ol et observer les changements

Enseignante: Hajer Amri 4


2TI Ibn Rachik Ezzahra

 La balise ul (unnumbred list) permet de créer une liste non ordonnée


 La balise ol (ordered list) permet de créer une liste numérotée
 La balise li (list item) définit un élément de la liste

4. Ajouter la modification suivante et observer le résultat

<ol start="5" type="A">

 L'attribut type permet de spécifier la numérotation (1, A, I,i) (disc, circle, square)
 L'attribut start indique la valeur initiale de la liste

5. Dans votre dossier de travail créer un dossier nommé ressources puis y copier l'image [Link]
depuis le dossier activités 2eme TI

6. Ajouter au fichier tp3 la ligne suivante puis visualiser le résultat

<img src="ressources/[Link]" alt="logo html" >

 La balise img permet d'insérer une image au document html


 L'attribut src permet d'indiquer l'emplacement de l'image
 L'attribut alt permet d'insérer un texte alternatif qui décrit l'image (en cas de problème de
connexion par exemple)

Activité 4 :

1. Ouvrir tp3 puis ajouter les lignes suivantes et enregistrer sous le nom tp4:

<P> lien externe </P>


<a href= "[Link] target="_blank"> [Link]</a>

<P> Envoyer un e-mail </P>


<a href="[Link] target="_blank">Nous contactez</a>

<P> Ouvrir une page Web dans le disque dur > </P>
<a href="[Link]" target="_blank"> Cliquer ici! </a>

Enseignante: Hajer Amri 5


2TI Ibn Rachik Ezzahra

 La balise a permet d'insérer un lien hypertexte vers des pages web, des fichiers, des
adresses emails, des emplacements se trouvant dans la même page
 L'attribut target permet de spécifier la fenêtre d'affichage du lien
 L'attribut href spécifie l'url du lien

2. Ajouter les lignes suivantes puis visualiser le résultat, que constatez-vous?

<body>
<h1 id="haut">html et css sont 2 langages de création de site web</h1>
…………….
<a href="#haut"> aller vers le haut</a>

</body>

La création d'un lien interne se fait en deux étapes :


1/-La création d'un signet (ou ancre) : l'endroit où le lien interne doit pointer :
<a id= " nom du signet "> texte </a>
2/-La création du lien interne :
<a href= " # nom du signet ">texte </a>

Activité 5 :

1. Lancer l'éditeur vs code


2. Dans votre dossier de travail créer et enregistrer un fichier html nommé tp5
3. Ecrire un code html permettant de réaliser la page web suivante

CSS:Cascading Style Sheets


Les feuilles de style en cascade généralement appelées CSS de l'anglais Cascading Style
Sheets forment un langage informatique qui décrit la mise en forme des pages web

4. Ajouter les modifications ci-dessous à la balise p

<p style="color:blue; font-size:24px; font-family: cambria, comic sans; text-align: center;">

5. Visualiser le travail, que remarquez-vous?


6. Supprimer les changements précédents puis ajouter les lignes suivantes dans la partie head

Enseignante: Hajer Amri 6


2TI Ibn Rachik Ezzahra

<style>
P
{
color:blue;
font-size:24px;
font-family:cambria,comic sans;
text-align: center;

</style>

7. sVisualiser le travail, que remarquez-vous?


8. Dans votre dossier de travail créer et enregistrer un fichier css nommé [Link]
9. Déplacer le contenu de la balise style dans le fichier [Link]
10. Dans le fichier [Link] ajouter la ligne suivante dans la partie head

<link rel="stylesheet" href="[Link]">

11. Visualiser le travail, que remarquez-vous?

3 méthodes pour ajouter du ccs au html:


 L’ajout de design directement sur la balise concernée en utilisant l’attribut style (méthode
non recommandée)
exemple : < h1 style ="color : red" >

élément attribut propriété valeur

 Ajouter du style CSS depuis la balise head du fichier html. (méthode moins recommandée)
<style> … </style>

 La méthode la plus recommandée: ajout de CSS dans un fichier séparé ([Link]) qui doit
être inclut dans le fichier html dans la partie head grâce à la ligne suivante:

< link rel = "stylesheet" href = "[Link]">

élément attribut Type de attribut Nom du


fichier fichier

Enseignante: Hajer Amri 7


2TI Ibn Rachik Ezzahra

Dans un code css on trouve 3 éléments différents:


 Le nom de la balise: on écrit les noms des balises dont on souhaite modifier leur apparence
 La propriété : les effets de style de page sont rangés dans des propriétés (color, font-size…)
 La valeur: pour chaque propriété css, on doit indiquer la valeur, par exemple pour la
propriété color on doit indiquer le nom de couleur
D'une façon générale, une feuille de style ressemble à cela:
Balise1
{
propriété1:valeur1;
propriété2:valeur2;
}
Balise2
{
propriété1:valeur1;
propriété2:valeur2;
propriété3:valeur3;
}
………….

12. Lancer une page web existante, taper F12 et découvrir la syntaxe du css.

Activité 6 :

1. Lancer vs code
2. Créer et enregistrer un fichier html nommé tp6 dans votre dossier de travail
3. Ecrire un code html permettant de réaliser la page web suivante

La syntaxe du CSS
La syntaxe css est simple, elle est composée d'un sélecteur et un propriété associée à une valeur:
Structure syntaxique: sélecteur {propriété: valeur}
Exemple: body {background-color: beige}

4. Créer un fichier css nommé [Link] et enregistrer dans votre dossier de travail

Enseignante: Hajer Amri 8


2TI Ibn Rachik Ezzahra

Les propriétés background-…


5. Copier plusieurs images dans votre dossier ressources à partir du dossier activités 2eme TI
6. Ajouter le code suivant dans le fichier [Link]

body
{
background-image: url (ressources/[Link]);
}

7. Sauvegarder et visualiser le travail


8. Remplacer le code précédent par le suivant dans le fichier css

body
{
background-image: url (ressources/logo [Link]);
background-repeat: repeat;
background-size: 100px;

9. Sauvegarder et visualiser le travail


10. Remplacer le code précèdent par le suivant dans le fichier css

body
{
background-color: azure;

11. Sauvegarder et visualiser le travail

 La propriété background-image permet de définir l'image de l'arrière-plan à associer à l'élément


Syntaxe css: background-image: url(image);

 La propriété Background-repeat indique la nécessité de répéter une image ou non et les axes de
répétition
Syntaxe css: background-repeat: no-repeat|repeat|repeat-x|repeat-y

 La propriété background-size: spécifie la taille d'une image d'arrière-plan


Syntaxe css : background-size: chiffre px (px: pixel ou %)

 La propriété Background-color permet de définir la couleur utilisée pour l'arrière-plan d'un élément
Syntaxe css: background-color: nom de couleur

 La propriété background est une super-propriété qui regroupe background-color, background-size,


background-image, background-repeat (l'ordre n'a pas d'importance)

Exemple: background: url(ressources/[Link]) 50px repeat-y bisque;

Enseignante: Hajer Amri 9


2TI Ibn Rachik Ezzahra

Les propriétés font-…..

12. Ajouter les lignes suivantes dans le fichier [Link]

h1
{
color: aqua;
font-family: georgia , serif;
font-size: 20px;
font-style:italic;
font-weight: bold;

13. Sauvegarder et visualiser le travail

 La propriété color permet de définir la couleur du texte de l'élément html


Syntaxe css: color: nom de couleur;

 La propriété font-family définit la police utilisée. Il est conseillé d'utiliser plusieurs noms de police
à fin d'éviter les problèmes liés à l'interprétation du navigateur
Syntaxe css: font-family: fontfamilyName, [fontfamilyName], […]

 La propriété font-size définit la taille d'une police en pixel ou %

 La propriété font-style définit le style d'un texte (normal; italic; oblique)

 La propriété font-weight spécifie la manière dont les caractères doivent être affichés (bold; bolder;
lighter)

 La super-propriété font combine font-family, font-size, font-style, font-weight

Syntaxe css: font-style font-weight font-size font-family

Exemple: font: italic lighter 20px georgia;

14. Modifier la mise en forme du reste du texte selon votre choix


15. Sauvegarder et visualiser le travail

Enseignante: Hajer Amri 10


2TI Ibn Rachik Ezzahra

Les propriétés text-…..


16. Ajouter les lignes suivantes au fichier [Link]

h1

{
text-align: center;
text-shadow: 5px 5px 30px purple;
text-transform: capitalize;

17. Sauvegarder et visualiser le travail

 La propriété text-align spécifie l'alignement horizontal d'un texte


Syntaxe css: text-align:center|left|right|justify;

 La propriété text-shadow définit une ombre au texte


Syntaxe css: text-shadow: x-shadow y-shadow rayon flou couleur

 La propriété text-transform permet de transformer les lettres en majuscule ou minuscule


Syntaxe css: text-transform: none|capitalize|uppercase|lowercase;

18. Modifier la mise en forme du reste de texte selon votre choix


19. Enregistrer et visualiser le travail

Activité 7 :

1. Lancer vs code
2. Créer et enregistrer un fichier html nommé tp7 dans votre dossier de travail
3. Ecrire un code html et CSS permettant de réaliser la page web suivante en suivant les indications

Enseignante: Hajer Amri 11


2TI Ibn Rachik Ezzahra

Couleur:teal

Police:papyrus
Couleur d'arrière-plan: cornsilk Style:italique

Taille:24px

Alignement: centré

Majuscule

gras

Ombre: 3px 4px 20px jaune

evolution du langage css


Le langage CSS sert à donner la forme à une page web alors que le html donne le fond
Le langage CSS a évolué à travers le temps Couleur: gris

Police:arial

Taille: 20 px
• 1996-1999:CSS1: Les bases: Couleur, police, marge, caractères
Gras
• 1999-2009:CSS2 et CSS2.1: Améliorer les positionnements sur la page
Style :oblique
• 2009-2013:CSS3: Nouveaux styles: les arrondies, dégradés, ombres, ...

Couleur:bleu

Police:papyrus

Taille:18px

Alignement: justifié

list-style-image: url(ressources/[Link])

4. Ecrire un code html permettant d'insérer une image nommée [Link] à la fin de la page
5. Ajouter au fichier css le code ci-dessous:

li
{
…………….
margin-top:40px;
margin-bottom:40px;
margin-left:70px;
margin-right:70px;
list-style-type: square

Enseignante: Hajer Amri 12


2TI Ibn Rachik Ezzahra

 La propriété margin-top: définit la marge appliquée en haut


 La propriété margin-bottom: définit la marge appliquée en bas
 La propriété margin-left: définit la marge appliquée en gauche
 La propriété margin-right: définit la marge appliquée en droite

Syntaxe css: margin-….: longueur px;

 La propriété margin: est un raccourci qui permet de définir les marges sur les 4 côtés de
l'élément

Syntaxe css: margin-top margin-right margin-bottom margin-left;

6. Ajouter au fichier css le code suivant:

li
{
…………….
padding-top:10px;
padding-bottom:10px;
padding-left:30px;
padding-right:30px;
list-style-type:upper-alpha;

}
7. Sauvegarder et visualiser le travail

Enseignante: Hajer Amri 13


2TI Ibn Rachik Ezzahra

 La propriété padding-top: définit l'espace en haut de l'élément


 La propriété padding-bottom: définit l'espace en bas de l'élément
 La propriété padding-left: définit l'espace à gauche de l'élément
 La propriété padding-right: définit l'espace à droite de l'élément

Syntaxe css: padding-….: longueur px;

 La propriété padding: est une propriété abrégée qui définit les écarts des 4 côtés d'un élément

Syntaxe css: padding-top padding-right padding-bottom padding -left

8. Ajouter au fichier css le code suivant:

img
{
width:250px;
height: 250px;
margin-left:450px;

 La propriété width: définit la largeur d'un élément


 La propriété height: définit la hauteur d'un élément

9. Dans le fichier css, ajouter le code suivant :

img
{ ……….

border-style: dashed;

border-color: coral;

border-width: 10px;

}
10. Sauvegarder et visualiser le travail

Enseignante: Hajer Amri 14


2TI Ibn Rachik Ezzahra

 La propriété border-style : définit le style des lignes utilisé pour les bordures des 4 côtés d'un élément

 La propriété border-color : définit la couleur de bordure utilisée pour les 4 côtés d'un élément

Syntaxe css: border-color: couleur;

 La propriété border-width : définit la largeur de bordure des 4 côtés

Syntaxe css: border-width: largeur px ou (thin,thick,medium);

11. Dans le fichier css, ajouter le code suivant :

12. Sauvegarder et visualiser le travail

13. Dans le fichier css, ajouter le code suivant puis sauvegarder et visualiser le résultat :

img
{ ……….
border: 10px dotted red ;
border-radius: 60px ;

Enseignante: Hajer Amri 15


2TI Ibn Rachik Ezzahra

 La propriété border: est une super- propriété qui combine les propriétés liées à la bordure

Syntaxe css: border: border-width border-style border-color ;

 La propriété border-radius: permet de définir les coins arrondis pour la bordure d'un élément
Syntaxe css: border-radius: largeur px;

14. Dans le fichier css, ajouter le code suivant puis sauvegarder et visualiser le résultat :

img
{ ……….

border-radius: 60px 0 60px 0 ;

 La propriété border-radius: permet de spécifier des arrondis différents de chaque coin


Syntaxe css:

border-radius: coin supérieur gauche coin supérieur droit coin inférieur droit coin inférieur gauche;

Activité 8 :

1. Lancer vs code
2. Créer et enregistrer un fichier html nommé tp8 dans votre dossier de travail
3. Créer et enregistrer un fichier css nommé style8
4. Saisir le code html suivant ci-dessous

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="[Link]">
<title>
tp8
</title>

</head>
<body>
<div>
<p>un premier paragraphe </p>
<p>un autre paragraphe</p>
</div>
<p>un troisième paragraphe</p>
<div>
<p>un dernier paragraphe</p>
</div>
</body>
</html>

5. Saisir le code css ci-dessous:

Enseignante: Hajer Amri 16


2TI Ibn Rachik Ezzahra

body
{
background-color: aliceblue;
}
div
{
color:white;
background-color: cadetblue;
}

6. sauvegarder et visualiser le travail

 La balise div a un rôle structurant


 C'est un élément de type block
 Le plus souvent il est utilisé comme conteneur pour encapsuler d'autres éléments

7. Ajouter la ligne suivante dans le fichier [Link]

………
<p>un premier <span>paragraphe</span> </p>
………….

8. Ajouter la ligne suivante dans le fichier [Link]

span
{
font-weight: bold ;
}

9. sauvegarder et visualiser le travail

 La balise span est de type inline


 Elle est utilisée pour apporter des modifications à une partie du texte

10. compléter le fichier [Link] pour obtenir l'affichage suivant:

Enseignante: Hajer Amri 17


2TI Ibn Rachik Ezzahra

11. Ajouter les modifications au fichier [Link] et [Link] pour obtenir le résultat suivant

[Link]:

……
<body>
<div>
<p>un premier <span class="gras">paragraphe</span> </p>
<p>un autre <span>paragraphe</span></p>
</div>
<p>un troisième <span class="gras" id="italique">paragraphe</span> </p>
<div>
<p>un dernier <span class="gras"> paragraphe</span> </p>
</div>
</body>
…..

[Link]:

body
{
background-color: aliceblue;
}
div
{
color:white;
background-color: cadetblue;

}
#italique
{
font-style: italic;
color:black;
}
.gras
{
font-weight: bold;
}

Enseignante: Hajer Amri 18


2TI Ibn Rachik Ezzahra

 Class: est un sélecteur qui s'applique à des éléments redondant dans la page
Syntaxe css:

. nom_de_classe
{
déclarations
}

 id: est un sélecteur qui ne peut être appliqué qu'une seule fois dans le fichier html
Syntaxe css:
#nom_id
{
déclarations

Activité9:

1. Lancer vs code
2. Créer et enregistrer un fichier html nommé tp9 dans votre dossier de travail
3. Créer et enregistrer un fichier css nommé style9
4. Ecrire un code html permettant de réaliser la page web suivante
Police: 'Goudy old style',serif
Image(hauteur:250px, largeur:1340px, marge bas:15px)
Alignement:centré style:italique

Ombre: 3px 3px 5px noir

Police:Cambria,serif

Taille:18px

Marge gauche:20px

Police:papyrus
taille:30px

Gras italique

gras

Image d'arrière-plan:
Gras, italique Position: en bas à droite,
police :'comic sans ms' répétition: non, taille:50%
Marge gauche:40px
Enseignante: Hajer Amri 19
2TI Ibn Rachik Ezzahra

Activité10:

1. Lancer vs code
2. Créer et enregistrer un fichier html nommé tp10 dans votre dossier de travail
3. Créer et enregistrer un fichier css nommé style10
4. Saisir le code html suivant:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="[Link]">
<title>
tp10
</title>

</head>
<body>
<table>
<caption> les balises en HTML</caption>
<thead>
<tr>
<th>les balises en paires</th> Résultat
<th>les balises orphelines</th>
</tr>
</thead>
<tbody>
<tr>
<td> html</td>
<td> img </td>
</tr>
<tr>
<td> p </td>
<td> br </td>
</tr>
</tbody>
<tfoot>
<tr >
<td colspan="2"> html5 et css3</td>
</tr>
</tfoot>
</table>

Enseignante: Hajer Amri 20


2TI Ibn Rachik Ezzahra

 La balise table: permet de représenter un tableau de données


 La balise caption: permet d'ajouter une légende au tableau
 La balise thead: définit un entête au tableau
 La balise tr: définit une ligne
 La balise th: définit une cellule d'entête dans un tableau
 La balise tbody: définit le corps d'un tableau qui peut regrouper plusieurs éléments tr
 La balise td: définit une cellule d'un tableau qui contient des données
 L'attribut colspan: permet de fusionner des cellules horizontalement
On peut fusionner verticalement des cellules par l'attribut rowspan
 La balise tfoot: définit le pied du tableau

5. Ajouter le nécessaire au fichier [Link] pour obtenir le résultat suivant:

Couleur d'arrière-plan: #FFFFE0 Légende:


couleur: olivedrab
police: cursive
taille: 48px
gras
alignement: centré

Tableau:
largeur:600px
marge gauche: 350px

Les cellules:
alignement: centré
gras
écart intérieur: 3px
police: candara,sans serif
taille: 20px
bordure: medium solid #05952A

Enseignante: Hajer Amri 21


2TI Ibn Rachik Ezzahra

Activité11:

1. Lancer vs code
2. Créer et enregistrer un fichier html nommé tp11 dans votre dossier de travail
3. Créer et enregistrer un fichier css nommé style11 Légende:
4. Ecrire un code html et css permettant de créer la page web présentée ci-dessouscouleur: rgb(112, 147, 199)

Couleur arrière-plan: #d1d1cb police:Cambria, Cochin


taille: 40px
gras
alignement: centré;
ecart intérieur haut: 10px;
écart intérieur bas : 10px;

Entête

tableau Style de bordure: solid

largeur:900px ; Couleur de bordure: #0d418f

marge gauche: 250px Largeur de bordure: medium


Police :'Courier New'
Les cellules:
Ecart interieur: 5px
alignement: centré
taille: 25px
ecart intérieur: 7px
gras
police :Impact, Haettenschweiler
couleur :rgb (240, 239, 236)
taille: 20px
alignement: centré
borudre: medium solid #0d418f
couleur d'arrière-plan: #657a8db2
couleur d'arrière-plan: #cad3dbb2
coin arrondi: 15%
coin arrondi: 15%

Enseignante: Hajer Amri 22


2TI Ibn Rachik Ezzahra

Activité 12:

1. Créer et enregistrer un fichier html nommé tp12 dans votre dossier de travail
2. Créer et enregistrer un fichier css nommé style12
3. Ecrire un code html et css permettant de réaliser la page web suivante

Couleur arrière-plan: rgb(207, 215, 221)

Titre de 1er niveau:


Titre de 2eme image:
alignement: centré niveau:
hauteur: 300px
taille :50px alignement: centré
largeur: 1300px
police: fantasy police:Cambria
marge bas: 20px

4. Ajouter la ligne ci-dessous dans le fichier [Link]

<body>
…
<video controls > <source src="ressources/Solo Leveling .mp4" ></video>
…
</body>

5. Sauvegarder et visualiser votre travail


6. Ajouter le code suivant au fichier [Link] puis visualiser le travail

video{
width:320px;
height: 240px;
margin-left: 500px;
}

Enseignante: Hajer Amri 23


2TI Ibn Rachik Ezzahra

 La balise vidéo: permet d'intégrer un contenu vidéo dans une page web
 Il peut contenir une ou plusieurs sources vidéo grâce à l'attribut src et la balise
source
 L'attribut controls : permet à l'utilisateur de contrôler le volume, mettre en pause...

7. Ajouter la ligne suivante au fichier [Link]

<audio controls> <source src="ressources/solo_leveling.mp3" > </audio>

8. Ajouter le code suivant au fichier [Link] puis visualiser le travail

audio
{
margin-left: 500px;
}

 La balise audio permet d'intégrer un contenu sonore à une page web


 L'attribut src et la balise source permettent de trouver le chemin d'accès
 L'attribut controls : permet à l'utilisateur de contrôler le volume, mettre en
pause, vitesse de lecture

Les formulaires
Les formulaires sont utilisées par les sites web pour interagir avec l'utilisateur. Ils permettent à
l'utilisateur d'envoyer des données au site web. Un formulaire est composé de plusieurs éléments.
Exemples: liste déroulante, case à cocher, champs de saisie, bouton radio…

La création des formulaires HTML :

 La déclaration d'un formulaire :

La définition des différents éléments du formulaire se fait en utilisant l'élément <form>. L'action à réaliser
pour traiter le formulaire doit être précisée en utilisant les deux attributs suivants :

 L'attribut action : Il indique l'action à exécuter lorsque lors de l'envoi des données.
 L'attribut method : Il permet de définir la méthode de transfert des données vers le
serveur. Les deux valeurs possibles sont get et post.

Enseignante: Hajer Amri 24


2TI Ibn Rachik Ezzahra

 Les éléments d'un formulaire :

Les éléments de formulaires sont répartis en 3 classes :

 Input
Champs de saisie de texte et différents types de boutons
 Select
Listes (menus déroulants et ascenseurs)
 Textarea
Zone de saisie de texte libre.

La balise <input > : Cet élément est utilisé pour définir des zones d'entrée de texte simple, des boutons, des
cases à cocher ou des boutons radio. Le type d'élément dont il s'agit sera précisé en utilisant l'attribut type.

type syntaxe exemple

texte <input type="text" name="prenom">

number <input type="number" name="age">

submit <input type="submit" value="Envoi">

reset <input type="reset" value="Efface">

checkbox <input type="checkbox" name="pfm" value="linux" checked>


Linux<BR> Linux
<input type="checkbox" name="pfm" value="dos"> Dos<BR> Dos
<input type="checkbox" name="pfm" value="win"> Windows
Windows

radio <input type="radio" name="media" value="cd" checked> CD-


ROM<BR> CD-ROM
<input type="radio" name="media" value="dk"> Disquette Disquette

L'élément <TEXTAREA> :

<textarea name="comm" rows=10 cols=40>

Tapez vos commentaires ici


</textarea>

La balise <SELECT> :

<select name="menu">
<option selected> Citron </option>
<option> Pomme</option>
<option> Banane</option>
</select>

Enseignante: Hajer Amri 25


2TI Ibn Rachik Ezzahra

c- Encadrement/groupage et légende d'un groupe de champs

 L'élément <fieldset> permet un regroupement de champs de saisie en catégories logiques


(thématiques).
 Ce regroupement rend les contrôles plus compréhensibles.

Activité 13:

1. Lancer vs code et saisir le code html suivant puis enregistrer sous le nom [Link]

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>
tp13
</title>

</head>
<body>
<form method=post action="..." >
<fieldset>
<legend > Informations personnelles </legend>

Nom : <Input name="nom_propre" type="text" > <br>


Prénom : <input name="prenom" type="text" ><br>
Adresse : <input name="adresse" type="text" >

</fieldset>
</form>
</body>
</html>

Activité 14:

1. Créer et enregistrer un fichier html nommé [Link] permettant de créer le formulaire suivant

Enseignante: Hajer Amri 26


2TI Ibn Rachik Ezzahra

2. Compléter le code html en suivant les consignes


<body>

<form action="" method="post">

<div>

<label for ="np">Nom et Prénom </label>

<input type="text" placeholder="votre nom et prénom" name="nom et prénom" id="np" >

</div>
<!--age et tel: input type number required -->
<!--combien de fruits: input type radio value:0 1 2 plus -->
<!--pourquoi faire le régime: textarea rows:5 cols 20-->
<!--comment vous contacter: input checkbox value: E-mail, tel, mailing -->

<!—envoyer: button, type: submit -->

<!—effacer: button, type: reset -->

3. Compléter le code css pour obtenir le résultat présenté ci-dessous

Body ( police: 'comic sans ms' taille: 14px)


Form( largeur: 500px hauteur: 500px couleur arriere plan:rgb(230, 226, 222) marge gauche: 450px)
Les boutons ( couleur arriere plan: darkgray marge gauche: 100px marge-haut: 50px)

Enseignante: Hajer Amri 27


2TI Ibn Rachik Ezzahra

Récapitulation

Les balises html:


Balise Description Attribut Effet

<b>…</b> Ecriture en gras

<br> Retour à la ligne

< ! … --> Commentaire

<p>…</p> Déterminer un paragraphe

décrire un bloc qui peut


<div> </div>
contenir un paragraphe

<body>…</body> Corps du document

<ul>…</ul> Liste non ordonné. type Type de puce (disc, circle, square)

<ol>…</ol> Liste ordonnée. type Type de numérotation (1, a, A, i, I)

<li> </li> Elément de la liste

href Cible du lien


<a>…</a> Lien hypertexte
target Indique la fenêtre d’affichage

src Adresse de l’image à insérer


<img> Insertion d’images
alt Texte alternatif activé

<title>…</title> Titre du document

Fusionner des cellules


colspan
<table>…</table> Définir un tableau horizontalement

rowspan Fusionner des cellules verticalement

action Définit où les données sont envoyées

get: les données passent par l'URL


<form>…</form> Définir un formulaire
method post:les données passent dans le
corps de la requête

src Définit la source de la vidéo


<video>…</video> Définit une vidéo
controls Affiche les contrôles

<tfoot>…</tfoot> Indique le bas du tableau

<thead>…</thead> Indique l'entête du tableau

Définit une ligne dans un


<tr>… </tr>
tableau

Définit une légende de


<caption>…</ caption>
tableau

Définit la relation entre le href Indique le chemin d'accès


<link> document html et une
ressource externe rel définit le type de relation

Enseignante: Hajer Amri 28


2TI Ibn Rachik Ezzahra

Quelques propriétés CSS

Propriété Valeurs possibles role


width Définit la largeur d'un élément
height Définit la hauteur d'un élément
color Définit la couleur du texte
background-color Définit la couleur d'arrière-plan d'un élément.
font-size Définit la taille de la police
font-family Définit la famille de police
font-weight Bold, bolder, lighter… Définit l'épaisseur de la police
text-align Left, right, center, justify Définit l'alignement du texte
Border Border-color, border-style, Définit les propriétés de la bordure
width
Padding Ajoute un espace à l'intérieur de la bordure de
l'élément
Margin Ajoute un espace à l'extérieur de la bordure de
l'élément
text-decoration Underline, Souligne un texte
List-style-type disc, circle, square,upper-roman, Définit le type de marqueur des elements de la
lower-alpha liste
List-style-position Outside ; inside Définit la position des marqueurs
List-style-image Spécifie une image comme marqueur
d'élements
List-style Super-propriété:combine list-style-type, List-
style-position, List-style-image

Enseignante: Hajer Amri 29

Vous aimerez peut-être aussi