Rapport sur les travaux

Technologies web appliquées au E-commerce Pr. Khalid TATANE

2023/2024

Hind BOUHRIRA
CNE : D120012326
GRP : 1
1
 I. Les listes :
1) Les listes ordonnées :
Enoncé :
Les listes ordonnées sont conçues pour présenter des éléments dans une séquence spécifique,
avec chaque élément de la liste typiquement associé à un numéro ou un symbole séquentiel.
 Exemple1 :

1. Faire ramollir le chocolat dans une terrine

2. Séparer le blanc et le jaune d'œufs
3. Incorporer les jaune et le sucre
4. Battre le blanc en neige ferme et les ajouter délicatement au mélange à l'aide d'une
spatule
5. Mettre au frais de 1 à 2 heure minimum

 Exemple 2 :

Liste numéroté

1. Pèche
2. Abricot
3. Banane
4. Fraise

Liste avec numérotation alphabétique

A. Pèche
B. Abricot
C. Banane
D. Fraise

Liste numéroté avec les lettres minuscules

1. Pèche
2. Abricot
3. Banane
4. Fraise

Le code :
 Exemple1 :

2
  Exemple2 :

Explication :
On écrit ce code à l'aide de la balise <ol> (Ordered List), et chaque élément de la liste est
représenté par la balise <li> (List Item).

Résultat :
 Exemple1 :

3
  Exemple2 :

2) Les listes non ordonnées :

Enoncé :
Une liste non ordonnée est une structure de données utilisée pour représenter un
groupe d'éléments connexes qui n'ont pas besoin d'être ordonnés de manière
séquentielle.
 Exemple1 :

 3 œufs ;
 100g chocolat (noire ou au lait) ;
 1 sachet de sucre vanillé.

 Exemple 2 :

 Boissons gazeuses ;
 Boissons chaudes ;
 Glaciers

 Coca cola
 Fanta
 Thé glacé
4
o Coca cola ;
o Fanta ;
o Ici tea;

Le code :
 Exemple1 :

 Exemple 2 :

Explication :

La balise principale pour créer une liste non ordonnée est <ul>, et chaque élément de la
liste est défini par la balise <li>.

Résultat :
 Exemple1 :

5
  Exemple 2 :

3) Les liste de définition :

Enoncé :
Une liste de définition est une structure HTML utilisée pour présenter des termes
accompagnés de leurs définitions associées. Cette structure est particulièrement
adaptée pour organiser des informations.
Le code :

6
 Explication :
Les listes de définitions en HTML sont créées à l'aide de trois balises principales :
La balise <dl> englobe l'ensemble de la liste de définitions, et La balise <dt> est utilisée à
l'intérieur de la balise <dl> pour définir chaque terme de la liste de définitions.

Résultat :

II. Les images :

Enoncé :
En HTML, les images sont intégrées dans une page web à l'aide de la balise <img>,
L'utilisation de la balise <img> permet d'enrichir visuellement le contenu d'une page
HTML en intégrant des graphiques, des photographies, des icônes, etc.

Le code :

7
 Explication :
 La balise <img> est utilisée pour incorporer des images dans une page HTML.
 L’attribut principal est src, qui spécifie le chemin de l'image (URL ou chemin local).
 L’attribut alt fournit une description textuelle de l'image à des fins d'accessibilité et de
référencement.
 D’autres attributs optionnels, tels que width et height, permettent de définir la taille de
l'image.

Résultat :

8
III. Les liens :
Enoncé :
En HTML, les liens sont créés à l'aide de la balise <a> (anchor). Les liens permettent de
connecter différentes pages web entre elles, de relier des ressources, et de créer une
navigation cohérente sur un site.

Le code :

Explication :
La balise <a> est utilisée pour créer des liens hypertexte dans une page HTML ; et L'attribut
href indique l'adresse de destination du lien. Cela peut être une URL, un chemin local vers un
fichier, ou une adresse vers une autre ressource en ligne. Les liens sont un élément essentiel
pour la navigation sur le web, permettant aux utilisateurs de passer d'une page à une autre de
manière interactive. Il est important de créer des liens avec des descriptions significatives et
d'utiliser l'attribut alt pour les images afin d'améliorer l'accessibilité.

Résultat :

9
IV. Les ancres :

Enoncé :
En HTML, une ancre est une balise utilisée pour créer des liens internes à une page,
permettant aux utilisateurs de naviguer rapidement vers une section spécifique de la même
page.

Le code :

10
 Explication :
La balise <a> est utilisée pour créer des hyperliens dans les pages HTML.et L’attribut
principal est href (référence hypertexte), qui précise l'URL cible du lien.Il est souvent utilisé
pour créer des ancres vers d’autres pages ou sections de la même page.

Résultat :

11
V. Les css (Cascading Style Sheets) :
1) Les css avec la balise style :
Enoncé :
Les CSS permettent de contrôler la mise en page, la couleur, la police et d'autres aspects
visuels d'une page web, La balise <style> est utilisée dans le HTML pour inclure du code
CSS directement dans le document. Elle est généralement placée dans la section <head>
du document HTML.

Le code :

Explication :
À l'intérieur de la balise <style>, nous avons spécifié initialement le type de style,
puis pour l'attribut <div>, nous avons détaillé les propriétés telles que la couleur
d'arrière-plan, le remplissage (padding), la bordure supérieure (border-top), la bordure
inférieure (border-bottom), et la marge (margin).

Résultat :

12
 2) Les css avec l’attribut style :
Enoncé :
Nous pouvons définir des styles css directement dans la définition de l’attribut style
d’une balise html ; dans l’exemple ci-dessous, nous utilisons une balise <div> qui
permet de définir une boite à l’intérieur d’un contenu.
Le code :

Explication :
On constate que la valeur de l’attribut style est un ensemble de propriété séparées
par un caractère ; ce caractère est très important car il représente la fin de la
propriété.

Résultat :

13
 3) Les css avec la balise link :
Enoncé :
Une page html peut faire référence a plusieurs feuilles de styles en même temps. Dans
ce cas, les définitions contenues dans ces différence feuilles seront combinées entre
elles. Voici un exemple de styles définis dans un document séparé :

Le code :

Explication :

Dans cet exemple, la balise <link> est utilisée dans le fichier HTML pour lier la feuille de
style externe (mes style.css). Les styles définis dans le fichier CSS s'appliqueront aux
éléments correspondants dans le fichier HTML.

Résultat :

14
VI. Le positionnement :
Enoncé :
D’abord, La propriété position est utilisée pour spécifier le type de positionnement d'un
élément, en suite de cet exemple on va pratiquer le positionnement absolu il permet de
placer un élément n’importe où sur la page à partir du point d’origine.

Le code :
 Exemple 1 :

 Exemple 2 :

15
 Explication :
On a pratiqué 4 valeur pour ajuster le positionnement de l’élément, d’abord ; left pour
positionner à gauche de la page, en suite ; right positionner à droite de la page, et aussi on a
utilisé ‘top’ et ‘bottom’.et au sien de la balise <style> on a utilisé ‘float’ pour déplacer un
élément vers la gauche ou la droite et permettre au texte et aux autres éléments de s'entourer. Aussi
que ‘display’ pour modifier le type d'affichage d'un élément.

Résultat :
 Exemple1 :

16
 Exemple2 :

17
VII. Les tableaux :
1. Tableaux
structuré :
Enoncé :
Un tableau est constitué de
lignes et de colonnes dont
chaque interaction forme une
cellule, le tableau est défini
par la balise <table> et pour
marquer une interaction on
utilise une balise <td>, et
chaque ligne définie par une
balise <tr>.
Dans ces exemples on va
traiter les tableaux structuré
« et l’idée du tableau structuré
est de placer des limites
fictives dans le tableau comme le cas de l’exemple ».

Le code :
 Exemple 1 :

18
 Exemple2 :

19
20
 Explication :
Parmi les balises utilisées dans ces contextes, on utilise <thead> pour définir la zone d'en-tête,
ainsi que <tfoot> pour définir la zone de pied de page, et <tbody> pour le corps du tableau.
De plus, pour fusionner les cellules, on a recours aux attributs "colspan" et "rowspan". Pour
donner un titre au tableau, la balise "caption" est utilisée.

Résultat :
 Exemple1 :

 Exemple2 :

21
 2. Exemple de tableaux :
Le code :
 Exemple1 :

22
 Exemple2 :

Résultat :

23
VIII. Les sélecteurs de classe :

Enoncé :
En HTML, l'utilisation des sélecteurs de classe se fait en collaboration avec les feuilles
de style CSS afin de viser et d'appliquer des styles à des éléments spécifiques
possédant une classe particulière. Ces sélecteurs débutent par un point (.) suivi du nom
de la classe. Voici quelques exemple d’utilisation des sélecteurs de classe dans le
langage HTML :
Le code :
 Exemple1 :

24
  Exemple2 :

Explication :
L’utilisation des sélecteurs de classe se fait en collaboration avec les feuilles de style CSS afin
de viser et d'appliquer des styles à des éléments spécifiques possédant une classe particulière.
Ces sélecteurs débutent par un point (.) suivi du nom de la classe. Voici le resultats de notre
exemple d’utilisation des sélecteurs de classe dans le langage HTML.

25
 Résultat :

IX. Les audio et les vidéos :

1. Les audio :
Enoncé :
Pour incorporer des fichiers audio dans une page HTML, on utilise l'élément <audio>.et pour
diffuser de la musique ou n’importe quel son, il existe de nombreux formats.la plupart d’entre
eux sont compressés ce qui permet de réduire leurs poids soit mp3, aac,ogg,wav.

Voilà un exemple :

Le code :

26
 Explication :
On a utilisé la balise <audio>, cette balise permet de spécifier la source du fichier audio à
l’aide de l’attribut <src>. On a ajouté « controls » pour afficher les contrôles de lecture, et
« autoplay » pour démarrer automatiquement la lecture, et « loop » pour répéter la lecture en
boucle.

Résultat :

2. Les vidéos :
1) Insertion vidéo interne :

Enoncé :
Pour insérer une vidéo il suffit d’utiliser la balise <vidéo>. Et nous utilisons la balise
« source » a l’intérieur de la balise <vidio> pour proposer différente formats .et le
navigateur prendra qu’il reconnait.
Voilà exemple :
Le code :

27
 Explication :
Pour insérer une vidéo interne dans html on utilise la balise <vidéo>,et j’ai utilisé <src> pour
spécifier le chemin de la vidéo, et aussi pour personnaliser d’avantage la vidéo j’ai utilisé
d’autre attributs tels que « autoplay » pour démarrer automatiquement la lecture , « loop »
pour répéter la vidéo en boucle ,et « poster » pour spécifier image de couverture pour la vidéo.

Résultat :

28
 2) Insertion vidéo externe :

Enoncé :
Pour insérer une vidéo il suffit d’utiliser la balise <vidéo>. Et nous utilisons la balise
« source » à l’intérieur de la balise <vidio> pour proposer différente formats .et le
navigateur prendra qu’il reconnait.
Voilà exemple :
Le code :

Explication :
Pour insérer une vidéo externe, on utilise la balise <iframe> cette balise permet d’incorporer
du contenu provenant d’une autre source, comme cet exemple vidéo hébergée dans
YouTube .et il est nécessaire de spécifier la largeur et la hauteur de la vidéo par les attribut
« width » et « height » de la balise <iframe> tout cela pour garantir que la vidéo sera affichée
correctement sur la page.

Résultat :

29
X. Les formulaires :

Enoncé :
Un formulaire HTML est un élément de la programmation web qui permet aux
utilisateurs d'envoyer des informations à un serveur.
Voilà l’exemple ce dessous :

Le code :

30
 Explication :

Un formulaire est une section d'une page Web qui permet à l'utilisateur de saisir des
informations. Ces informations peuvent ensuite être envoyées à un serveur Web pour être
traitées. L'attribut action définit l'URL vers laquelle les données du formulaire seront

31
envoyées. L'attribut method définit la méthode HTTP utilisée pour envoyer les données. Les
deux méthodes HTTP les plus courantes sont get et post.

Le contenu du formulaire peut être constitué de différents éléments HTML, tels que des
champs de texte, des cases à cocher, des boutons radio, etc.

Résultat :

32
33
FIN DU RAPPORT.

34