Scribd
Importer
174 vues5 pages

Programmation Web 1 TP 2 CSS PDF

Ce document présente un TP de programmation web axé sur la création d'une page d'accueil avec HTML et CSS. Il décrit les étapes pour structurer le code HTML et appliquer des styles CSS, en mettant l'accent sur la mise en forme du texte et le modèle en boîte. Des spécifications détaillées sont fournies pour le style des éléments, y compris le menu de navigation, les sections de contenu et le pied de page.

Transféré par

etbelkadi
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
174 vues5 pages

Programmation Web 1 TP 2 CSS PDF

Ce document présente un TP de programmation web axé sur la création d'une page d'accueil avec HTML et CSS. Il décrit les étapes pour structurer le code HTML et appliquer des styles CSS, en mettant l'accent sur la mise en forme du texte et le modèle en boîte. Des spécifications détaillées sont fournies pour le style des éléments, y compris le menu de navigation, les sections de contenu et le pied de page.

Transféré par

etbelkadi
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
Vous êtes sur la page 1/ 5

Université Mohammed Premier

Faculté des sciences Oujda


Département d’Informatique

Filière : GI S3 (MIP Info) Module : prog. web 1


TP 2 CSS
Objectif:
L'objectif de ce TP est de créer une page d’accueil de votre site en abordant les points
suivants:
- Les propriétés de mise en forme du texte
- Le modèle en boîte CSS

Résultat d’affichage :

1
Université Mohammed Premier
Faculté des sciences Oujda
Département d’Informatique

Filière : GI S3 (MIP Info) Module : prog. web 1


TP 2 CSS

Etape 1 : création du code HTML


Commencez par structurer le document index.html de la manière suivante :
<!DOCTYPE html>
<html>
<body>
<header>
<nav>
<ul> <li><a href="index.html">Accueil</a></li>
<li><a href="cv.html">À propos de moi</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="skills.html">Compétences</a></li>
<li><a href="agenda.html">Agenda</a></li>
<li><a href="contact.html">Contact</a></li> </ul>
</nav>
</header>
<main>
<section id="introduction">
<h1>Bienvenue sur mon site</h1>
<p>Je suis Mohammed Amine KASMI, développeur web fullstack, chercheur en data
& IA. Je suis également passionné par le domaine de la cybersécurité.</p>
<img src="photo.png" alt="Photo de profil">
</section>
<section id="services">
<h2>Services Offerts</h2>
<article class="service">
<h3>Développement Web</h3>
<p>Création de sites web adaptés aux besoins des clients.</p>
</article>
<article class="service">
<h3>Data Science & IA</h3>
<p>Analyse de données,création de solutions basées sur l'IA.</p>
</article>

<article class="service">
<h3>Cybersécurité</h3>
<p>Mise en place de stratégies de sécurité pour protéger les données sensibles.</p>
</article>

2
Université Mohammed Premier
Faculté des sciences Oujda
Département d’Informatique

Filière : GI S3 (MIP Info) Module : prog. web 1


TP 2 CSS
</section>
</main>
<footer>
<p>&copy; 2023 Votre Nom. Tous droits réservés.</p>
</footer>
</body>
</html>

Etape 2 : création du code CSS


Utiliser les propriétés de mise en forme du texte et le modèle en boîte CSS pour styler les
éléments suivants:
1. Style pour tous les éléments HTML
- Mettre une police de votre choix

2. Menu de Navigation
- Couleur de fond : rgba(0, 0, 0, 0.8) (noir semi-transparent).
- Espace intérieur : 15px
- Mettre la largeur du menu à 100%
- Supprimer les puces des éléments de la liste UL.
- Alignement des éléments de la liste au centre.
- Transformer les éléments de la liste <li> en balise inline
- Ajouter une marge entre les éléments de la liste de 20px
- Taille des liens : 18px et style du texte en gras.
- Couleur du texte des liens : #ffffff .
- Supprimer le soulignement des liens de la liste.

3. Section d'introduction
- Espace intérieur : 50px .
- Couleur de fond : #305e99 .
- Couleur du texte : #ffffff .
- Taille de l'image de profil : 150px en largeur et hauteur.
- Alignement du texte au centre.

4. Style commun à toutes les sections


- Espace entre les sections : 50px
- Largeur des sections : 70%
- Centrer les sections au centre de votre page (utilisez margin: auto, à voir plus tard dans le
cours)

3
Université Mohammed Premier
Faculté des sciences Oujda
Département d’Informatique

Filière : GI S3 (MIP Info) Module : prog. web 1


TP 2 CSS
5. Style du titre h2 de la section services
- Alignement du texte au centre
- couleur du texte en #305e99
- Une marge extérieure de 40px
- Une taille de police de 32px

6. Style des services


- Couleur de fond des services : #ffffff (blanc).
- Bordure : 1px solid rgba(0, 0, 0, 0.1) (légère).
- Espace intérieur des services : 20px .
- Alignement du texte au centre à l’intérieur de chaque service.
- Alignement des services : utiliser float: left (pour les aligner côte à côte).
- Marge entre les services : 20px
- Largeur des services : 350px
- Hauteur des services : 200px

7. Titres et paragraphes de la section des services


- Taille de police pour les titres h3: 24px.
- Couleur des titres h3 : #ff9f19.
- Taille de police pour les paragraphes : 16px.
- Couleur des paragraphes : #666666.
- Espacement entre les lignes : 1.6 des paragraphes.

8. Pied de page
- Alignement du texte : center
- Espace intérieur : 20px
- Couleur de fond : #696969 (gris foncé).
- Couleur du texte : #ffffff (blanc).
- Taille de police : 14px.
- Marge extérieure : 20px
- Supprimer l’effet du flottant

4
Université Mohammed Premier
Faculté des sciences Oujda
Département d’Informatique

Filière : GI S3 (MIP Info) Module : prog. web 1


TP 2 CSS

Annexe des propriétés CSS : Ce tableau inclut les propriétés CSS à utiliser

Propriété Description

color Définit la couleur du texte.

background-color Définit la couleur de fond d'un élément.

font-family Spécifie la police utilisée pour le texte.

font-size Définit la taille de la police.

font-weight Définit l'épaisseur du texte (normal, bold, etc.).

text-align Aligne le texte (left, right, center, justify).

text-decoration Définit la décoration du texte (none, underline, line-through).

line-height Définit la hauteur de la ligne, influençant l'espacement vertical.

margin Définit l'espacement extérieur d'un élément (haut, droite, bas, gauche).

padding Définit l'espacement intérieur d'un élément.

width Définit la largeur d'un élément.

height Définit la hauteur d'un élément.

border Définit la bordure d'un élément (largeur, style, couleur).

display Définit comment un élément est affiché (block, inline, flex, grid).

float Permet de faire flotter un élément à gauche ou à droite.

clear Contrôle le comportement de flottement d'éléments (left, right, both, none).

Vous aimerez peut-être aussi