SlideShare une entreprise Scribd logo
M31 : Technologies du Web
LST-MI – S6
TP8 : CSS
FST Al-Hoceima
2021/2022 Pr : A.Zannou
Objective :
Mise en forme de votre mini-site
Préparation du TP
Vérifiez que le contenu de votre répertoire (images + index.html).
Exercice 1 :
Il est important de définir une "charte graphique", qui définira une apparence uniforme pour toutes les
pages de votre site. Pour cela, en utilisant les feuilles de style CSS, mettez en forme votre mini-site (sans
modifier le document index.html). Définir barre de navigation, comme montre le figure ci-dessous.
Exercice 2: Sélecteurs d'attributs
Le site peut contenir des images. Certaines images peuvent être des liens hypertextes, d'autres non. On
souhaite les distinguer selon qu'elles supportent un lien ou non. Ainsi toutes les images auront une bordure
de 10 pixels avec la couleur :
 Rouge pour les images ne supportant pas de lien,
 bleu ciel d'épaisseur pour les images supportant un lien vers Wikipédia,
 violette pour les images pour les images supportant un lien vers un site autre que Wikipédia,
Modifiez vos styles de façon à ce que image soient affichées comme indiqué ci-dessus (sans la
modification du document index.html).
Images avec un lien vers
Wikipédia (bordure blue ciel
#B6DCF6)
Images sans lien
(bordure rouge)
Images avec lien un
autre site que
Wikipédia (bordure
violette blueviolet)
M31 : Technologies du Web
LST-MI – S6
TP8 : CSS
FST Al-Hoceima
2021/2022 Pr : A.Zannou

Contenu connexe

Similaire à TP8_TechWeb.pdf

Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
tanokouakouludovic
 
Intégration #1 : introduction
Intégration #1 : introductionIntégration #1 : introduction
Intégration #1 : introduction
Jean Michel
 
On page comment_augmenter_seo-trafic_30_jours
On page comment_augmenter_seo-trafic_30_joursOn page comment_augmenter_seo-trafic_30_jours
On page comment_augmenter_seo-trafic_30_jours
Lotfi Ben Moussa
 
Formation web
Formation webFormation web
Formation web
Stéphane BIOKOU
 
Le SEO pour les gens normaux
Le SEO pour les gens normauxLe SEO pour les gens normaux
Le SEO pour les gens normaux
Itelios
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
MOHAMMED MOURADI
 
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdfCSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
adeljaouadi
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Mohammed JAITI
 
Psm master 1 - indexation et optimisation technique SEO
Psm   master 1 -  indexation et optimisation technique SEOPsm   master 1 -  indexation et optimisation technique SEO
Psm master 1 - indexation et optimisation technique SEO
JCD srcmontbeliard
 
Descriptif du travail - Fil de fer TIC-Coach
Descriptif du travail - Fil de fer TIC-CoachDescriptif du travail - Fil de fer TIC-Coach
Descriptif du travail - Fil de fer TIC-Coach
Basketball Phénix
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
Julien LE THUAUT
 
Conseils et bonnes pratiques
Conseils et bonnes pratiquesConseils et bonnes pratiques
Conseils et bonnes pratiques
crochemib
 
html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
RihabBENLAMINE
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
RihabBENLAMINE
 
Guide du référencement naturel - Copyright Google
Guide du référencement naturel - Copyright GoogleGuide du référencement naturel - Copyright Google
Guide du référencement naturel - Copyright Google
Guillaume Bertil
 
Composant optimisation seo
Composant optimisation seoComposant optimisation seo
Composant optimisation seo
UX_Claurent
 
Le SEO en 2021 : à quoi faut-il s'attendre ?
Le SEO en 2021 : à quoi faut-il s'attendre ?Le SEO en 2021 : à quoi faut-il s'attendre ?
Le SEO en 2021 : à quoi faut-il s'attendre ?
Semrush France
 
Chapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfChapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdf
AnouAr42
 
Rapport sur le site web de l'espace de coworking 111-cothink
Rapport sur le site web de l'espace de coworking 111-cothinkRapport sur le site web de l'espace de coworking 111-cothink
Rapport sur le site web de l'espace de coworking 111-cothink
Dagbouj Hatem
 
03 seo indexation et optimisation technique
03 seo    indexation et optimisation technique03 seo    indexation et optimisation technique
03 seo indexation et optimisation technique
JCDomenget
 

Similaire à TP8_TechWeb.pdf (20)

Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
Intégration #1 : introduction
Intégration #1 : introductionIntégration #1 : introduction
Intégration #1 : introduction
 
On page comment_augmenter_seo-trafic_30_jours
On page comment_augmenter_seo-trafic_30_joursOn page comment_augmenter_seo-trafic_30_jours
On page comment_augmenter_seo-trafic_30_jours
 
Formation web
Formation webFormation web
Formation web
 
Le SEO pour les gens normaux
Le SEO pour les gens normauxLe SEO pour les gens normaux
Le SEO pour les gens normaux
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
 
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdfCSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
 
Psm master 1 - indexation et optimisation technique SEO
Psm   master 1 -  indexation et optimisation technique SEOPsm   master 1 -  indexation et optimisation technique SEO
Psm master 1 - indexation et optimisation technique SEO
 
Descriptif du travail - Fil de fer TIC-Coach
Descriptif du travail - Fil de fer TIC-CoachDescriptif du travail - Fil de fer TIC-Coach
Descriptif du travail - Fil de fer TIC-Coach
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
Conseils et bonnes pratiques
Conseils et bonnes pratiquesConseils et bonnes pratiques
Conseils et bonnes pratiques
 
html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
 
Guide du référencement naturel - Copyright Google
Guide du référencement naturel - Copyright GoogleGuide du référencement naturel - Copyright Google
Guide du référencement naturel - Copyright Google
 
Composant optimisation seo
Composant optimisation seoComposant optimisation seo
Composant optimisation seo
 
Le SEO en 2021 : à quoi faut-il s'attendre ?
Le SEO en 2021 : à quoi faut-il s'attendre ?Le SEO en 2021 : à quoi faut-il s'attendre ?
Le SEO en 2021 : à quoi faut-il s'attendre ?
 
Chapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfChapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdf
 
Rapport sur le site web de l'espace de coworking 111-cothink
Rapport sur le site web de l'espace de coworking 111-cothinkRapport sur le site web de l'espace de coworking 111-cothink
Rapport sur le site web de l'espace de coworking 111-cothink
 
03 seo indexation et optimisation technique
03 seo    indexation et optimisation technique03 seo    indexation et optimisation technique
03 seo indexation et optimisation technique
 

Dernier

Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
M2i Formation
 
Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024
Friends of African Village Libraries
 
Iris van Herpen. pptx
Iris         van         Herpen.      pptxIris         van         Herpen.      pptx
Iris van Herpen. pptx
Txaruka
 
Iris van Herpen. pptx
Iris            van        Herpen.     pptxIris            van        Herpen.     pptx
Iris van Herpen. pptx
Txaruka
 
Iris van Herpen. pptx
Iris         van        Herpen.      pptxIris         van        Herpen.      pptx
Iris van Herpen. pptx
Txaruka
 
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
BenotGeorges3
 

Dernier (6)

Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
Formation M2i - Onboarding réussi - les clés pour intégrer efficacement vos n...
 
Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024Burkina Faso library newsletter May 2024
Burkina Faso library newsletter May 2024
 
Iris van Herpen. pptx
Iris         van         Herpen.      pptxIris         van         Herpen.      pptx
Iris van Herpen. pptx
 
Iris van Herpen. pptx
Iris            van        Herpen.     pptxIris            van        Herpen.     pptx
Iris van Herpen. pptx
 
Iris van Herpen. pptx
Iris         van        Herpen.      pptxIris         van        Herpen.      pptx
Iris van Herpen. pptx
 
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
Newsletter SPW Agriculture en province du Luxembourg du 12-06-24
 

TP8_TechWeb.pdf

  • 1. M31 : Technologies du Web LST-MI – S6 TP8 : CSS FST Al-Hoceima 2021/2022 Pr : A.Zannou Objective : Mise en forme de votre mini-site Préparation du TP Vérifiez que le contenu de votre répertoire (images + index.html). Exercice 1 : Il est important de définir une "charte graphique", qui définira une apparence uniforme pour toutes les pages de votre site. Pour cela, en utilisant les feuilles de style CSS, mettez en forme votre mini-site (sans modifier le document index.html). Définir barre de navigation, comme montre le figure ci-dessous. Exercice 2: Sélecteurs d'attributs Le site peut contenir des images. Certaines images peuvent être des liens hypertextes, d'autres non. On souhaite les distinguer selon qu'elles supportent un lien ou non. Ainsi toutes les images auront une bordure de 10 pixels avec la couleur :  Rouge pour les images ne supportant pas de lien,  bleu ciel d'épaisseur pour les images supportant un lien vers Wikipédia,  violette pour les images pour les images supportant un lien vers un site autre que Wikipédia, Modifiez vos styles de façon à ce que image soient affichées comme indiqué ci-dessus (sans la modification du document index.html). Images avec un lien vers Wikipédia (bordure blue ciel #B6DCF6) Images sans lien (bordure rouge) Images avec lien un autre site que Wikipédia (bordure violette blueviolet)
  • 2. M31 : Technologies du Web LST-MI – S6 TP8 : CSS FST Al-Hoceima 2021/2022 Pr : A.Zannou