TP BDR & Development Web
Encadré : Yahya BOUGTEB
Compte
Rendu
Réalisé par : Mohamed SABER
Akram CHBOURK
Akram CHBOURK
1
TABLE DES MATIERES
Objectifs de TP ......................................................................................................... 1
Les exercices de HTML ........................................................................................... 2
Les exercices en CSS ............................................................................................ 3
Le curriculum vitae .................................................................................................... 4
2
Objectifs
Objectifs de cette séance de TP :
Ecrire du texte simple et formatée
Tableaux
Listes ordonnées, non ordonnées
Liens externes et internes
Intégration des images
Feuille de Style CSS
Formulaires
HTML (Hypertext Markup Language) est un langage informatique utilisé pour créer des
pages Web. Il permet de structurer et de présenter le contenu d'une page Web en
utilisant des balises, des éléments et des attributs.
3
Exercices de HTML
Dans cet exercice, on utilise la structure basique d’un document HTML, dans la
partie head on inclut le titre (title) de document qui s’affiche come nom d’onglet de
page Web, et ne s’affiche pas dans la page Web, en partie body on affiche le
message qui s’affiche dans la page Web.
4
Dans cet exercice, on utilise les balises <h1,2,3…>, qui décroit en taille et en position
avec h1 étant le plus large et le premier dans la page Web, et en continuant la taille
diminue en descendant dans la page Web.
5
EXERCICE 3
Dans cet exercice on utilise les balises d’édition ce qui nous permet de contrôler le
format et la police de texte affiché.
EXERCICE 4
Dans cet exercice on utilise la balise style pour personnaliser les texte et centrer
pour afficher le message au milieu de notre page Web.
6
EXERCICE 5
Exercice 6
Exercice 7
7
EXERCICE 8
EXERCICE 9 :
8
NB : Il faut mentionner que il faut enregistrer l’image dans notre disque dur, et
entrer le nom de l’image dans<img src=..>
Exercice 10 :
EXERCICE 11 :
9
EXERCICE 12 :
EXERCICE 13 :
10
Mini-projet :
Le code HTML :
<html>
<head>
<title> Akram Chbourk </title>
<style >
div.test1{width:1000px ;
height:220px ;
border:2px solid;
}
div.test2 {width:125px ;
height:135px ;
border:2px solid;
position:ABSOLUTE ;
right: -350px;PAGE 2
}
div.test3{width:1000px ;
height:170px ;
border:2px solid;
}
11
div.test4{width:1000px ;
height:180px ;
border:2px solid;
}
div.test5{width:1000px ;
height:160px ;
border:2px solid;
}
div.test6{width:1000px ;
height:150px ;
border:2px solid;
}
h1{
color:green;
}
</style>
</head>
<body>
<h1> Curriculum Vital (CV)</h1>
<div class=test1>
<h2> Informations Personnels <br> </h2>
<div class=test2> <img src="[Link]" width= "125px" height="135px"><br></div>
<b> Prénom:</b> Akram <br>
<b> Nom:</b> Chbourk <br>
<b> Adresse:</b> Témara <br>
<b> Date de Naissance :</b> 26/12/2005 <br>
<b>Site Web :</b><a href="[Link]
83008022b/">Mon Profil </a> <br>
<h2> Formation </h2></div>
<div class=test3> <ul type=circle >
<li><b><u>Année :</u></b></li>
<li>2023-2024</li>
<li><b><u>Formation :</u></b></li>
<li>Réseaux et Télécommunication </li><br></ul>
<h2> Expérience professionnelle </h2> </div>
<div class=test4> <ul type=circle >
<li><b><u> Période :</b></u>
<li>2023-2024 </li>
<li><b><u> Entreprise :</b></u></li>
<li>CBI </li>
<li><b><u>Poste occupé</li></b></u>
<li>Technicien réseau</li></ul>
<h2> Compétences</h2> </div>
<div class=test5> <ol type=1>
<li><b><u>Langages de programmation :</b></u></li>
12
<li>HTML, CSS, C , JavaScript , PHP
<li><b><u> Logiciels :</b></u></li>
<li>Mysql , Word , Acces , Excel , Adobe Photoshop </li><br></ol>
<h2> Informations Complémentaires</h2> </div>
<div class=test6> <ul type=circle >
<li><b><u> Langues :</b></u></li>
<li> Français , Anglais , Arabe </li><br></ul> </div>
</body>
</html>
Execution :
13