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

Flash'Conso - Juillet 2024 : Les Français et les prospectus papier
Flash'Conso - Juillet 2024 : Les Français et les prospectus papierFlash'Conso - Juillet 2024 : Les Français et les prospectus papier
Flash'Conso - Juillet 2024 : Les Français et les prospectus papier
Enov
 
Plan de communication pour "Les 7 sens".
Plan de communication pour "Les 7 sens".Plan de communication pour "Les 7 sens".
Plan de communication pour "Les 7 sens".
kevmaufay
 
Les Français et la situation post élections législatives
Les Français et la situation post élections législativesLes Français et la situation post élections législatives
Les Français et la situation post élections législatives
contact Elabe
 
ELABE BFMTV Estimation 2nd tour élections législatives 2024
ELABE BFMTV Estimation 2nd tour élections législatives 2024ELABE BFMTV Estimation 2nd tour élections législatives 2024
ELABE BFMTV Estimation 2nd tour élections législatives 2024
contact Elabe
 
ELABE BFMTV Actualisation estimation 2nd tour élections législatives 2024
ELABE BFMTV Actualisation estimation 2nd tour élections législatives 2024ELABE BFMTV Actualisation estimation 2nd tour élections législatives 2024
ELABE BFMTV Actualisation estimation 2nd tour élections législatives 2024
contact Elabe
 
ELABE BFMTV Actualisation 23H59 estimation 2nd tour élections législatives 2024
ELABE BFMTV Actualisation 23H59 estimation 2nd tour élections législatives 2024ELABE BFMTV Actualisation 23H59 estimation 2nd tour élections législatives 2024
ELABE BFMTV Actualisation 23H59 estimation 2nd tour élections législatives 2024
contact Elabe
 
ELABE BFMTV Actualisation 21H37 estimation 2nd tour élections législatives 2024
ELABE BFMTV Actualisation 21H37 estimation 2nd tour élections législatives 2024ELABE BFMTV Actualisation 21H37 estimation 2nd tour élections législatives 2024
ELABE BFMTV Actualisation 21H37 estimation 2nd tour élections législatives 2024
contact Elabe
 
Les Français et les élections législatives
Les Français et les élections législativesLes Français et les élections législatives
Les Français et les élections législatives
contact Elabe
 
Projection de la participation ELABE pour BFMTV
Projection de la participation ELABE pour BFMTVProjection de la participation ELABE pour BFMTV
Projection de la participation ELABE pour BFMTV
contact Elabe
 
ELABE BFMTV Actualisation 23H20 estimation 2nd tour élections législatives 2024
ELABE BFMTV Actualisation 23H20 estimation 2nd tour élections législatives 2024ELABE BFMTV Actualisation 23H20 estimation 2nd tour élections législatives 2024
ELABE BFMTV Actualisation 23H20 estimation 2nd tour élections législatives 2024
contact Elabe
 

Dernier (10)

Flash'Conso - Juillet 2024 : Les Français et les prospectus papier
Flash'Conso - Juillet 2024 : Les Français et les prospectus papierFlash'Conso - Juillet 2024 : Les Français et les prospectus papier
Flash'Conso - Juillet 2024 : Les Français et les prospectus papier
 
Plan de communication pour "Les 7 sens".
Plan de communication pour "Les 7 sens".Plan de communication pour "Les 7 sens".
Plan de communication pour "Les 7 sens".
 
Les Français et la situation post élections législatives
Les Français et la situation post élections législativesLes Français et la situation post élections législatives
Les Français et la situation post élections législatives
 
ELABE BFMTV Estimation 2nd tour élections législatives 2024
ELABE BFMTV Estimation 2nd tour élections législatives 2024ELABE BFMTV Estimation 2nd tour élections législatives 2024
ELABE BFMTV Estimation 2nd tour élections législatives 2024
 
ELABE BFMTV Actualisation estimation 2nd tour élections législatives 2024
ELABE BFMTV Actualisation estimation 2nd tour élections législatives 2024ELABE BFMTV Actualisation estimation 2nd tour élections législatives 2024
ELABE BFMTV Actualisation estimation 2nd tour élections législatives 2024
 
ELABE BFMTV Actualisation 23H59 estimation 2nd tour élections législatives 2024
ELABE BFMTV Actualisation 23H59 estimation 2nd tour élections législatives 2024ELABE BFMTV Actualisation 23H59 estimation 2nd tour élections législatives 2024
ELABE BFMTV Actualisation 23H59 estimation 2nd tour élections législatives 2024
 
ELABE BFMTV Actualisation 21H37 estimation 2nd tour élections législatives 2024
ELABE BFMTV Actualisation 21H37 estimation 2nd tour élections législatives 2024ELABE BFMTV Actualisation 21H37 estimation 2nd tour élections législatives 2024
ELABE BFMTV Actualisation 21H37 estimation 2nd tour élections législatives 2024
 
Les Français et les élections législatives
Les Français et les élections législativesLes Français et les élections législatives
Les Français et les élections législatives
 
Projection de la participation ELABE pour BFMTV
Projection de la participation ELABE pour BFMTVProjection de la participation ELABE pour BFMTV
Projection de la participation ELABE pour BFMTV
 
ELABE BFMTV Actualisation 23H20 estimation 2nd tour élections législatives 2024
ELABE BFMTV Actualisation 23H20 estimation 2nd tour élections législatives 2024ELABE BFMTV Actualisation 23H20 estimation 2nd tour élections législatives 2024
ELABE BFMTV Actualisation 23H20 estimation 2nd tour élections législatives 2024
 

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