Nom
: CHIKH
Prénom : Abderrahmane
Groupe : 01
Section : A
Email : abdou_chikh18@[Link]
Prof : [Link]
L2 Info, Université d’Alger 1
Dans ce rapport, nous allons vous donner plus de détails possible concernant ma
méthode de travail, ma structuration avec les codes sources étapes par étapes.
Exercice 1 :
J’ai fait la 2ème méthode du création d’un style CSS (dans le code
HTML en <head> utilisant <style> … </style>)
Pour la structuration de la page j’ai divisé la page en cinq divisions,
header, nav, article, aside, footer comme celui là :
Zone de navigation (menu) En-tête de la page
Contenue de la
page
1- CSS :
Pied de la page
Partie latérale
<style> </style> : la partie du création du style CSS
header {
background-color:red : Pour la couleur du font soit rouge
color:white : Pour la couleur du texte soit blanche
text-align:center : aligner le texte au milieu
}
nav {
background-color:#ffcc99 : la couleur du font, la couleur
FFCC99 est dans la liste qu’on a vu en cour
text-align:left : Pour l’alignement du texte au gauche
padding-left:30px : Pour ajouter un espace à notre menu à
gauche
}
Article {
float:right : Pour préciser que <Article> soit en droit quelque
soit se trouve au sous dessous
height: 380px : préciser la hauteur
width: 200px : préciser la largeur
color:white : la couleur du texte
background-color:#99cc99 : la couleur du font 99CC99
}
aside{
background-color:lightsteelblue : la couleur du font
lightsteelblue
}
footer {
background-color: #ffcc99 : la couleur du font
text-align:center : alignement du texte au centre
}
Img {
height: 200px : la hauteur de notre image
width: 200px : la largeur de notre image
}
a{
padding-right: 3px : Pour ajouter un espace entre les liens en
nav
}
2- HTML :
Passons maintenant au code HTML :
< !DOCTYPE html> : Pour préciser qu’il s’agit d’un document
HTML 5
<html> </html> : La racine du document, contient deux fils
head et body
<head> </head> : L’en-tête de la page, elle fournit des
renseignements sur la page
<meta charset="UTF-8"> : Pour l’encodage de caractères
<title> Exo 01 </title> : Pour le titre de la page
<body> </body> : Le corps, représente le contenu de la page
Ensuite, on commence par écrire notre code en ajoutant les
class qu’on a préparé au fichier
La partie header et nav :
La partie article :
La partie aside :
La partie footer :
Résultat final :
Exercice 2 :
Legend :
Couleur du
font : jaune
Input de
type
radio
Input de
type text
Text
area
Input de
Input de type
type text checkbox
Select
Premièrement, on doit commence par définir notre forme et le
regroupement des champs
Deuxièmement, je commence par structurer un tableau avec les
champs du formulaire
Ensuite, on répète le code avec les input nécessaires jusqu’à
on termine tout les champs (Dans le tableau) comme celui là :
Résultat :
Finalement, Il ne reste plus qu’à ajouter les boutons de
réinitialisation et de validation juste en bas de la fermeture du
fieldset
Réinitialisation :
<input type="submit" value="Valider">
Validation :
<input type="reset" value="Effacer">
Et on obtient la formulaire suivante :
