TP Informatique Personnalisation de page web HTML avec le langage CSS Objectifs : - Approfondir ses connaissances au langage HTML - Changer le style et la présentation d une page HTML grâce au langage CSS «Cascading Style Sheets» Page 1 sur 8
Aujourd hui nous allons découvrir un langage informatique qui permet de personnaliser les pages web HTML, il s agit de CSS (Cascading Style Sheets). 1- La page HTML : Commencez par ouvrir Bloc-notes et copier le code HTML ci-dessous : <html> <head> <title>ma première page avec du style</title> </head> <body> <!-- Menu de navigation du site --> <ul class="navbar"> <li><a href="index.html">home page</a> <li><a href="reflexions.html">réflexions</a> <li><a href="ville.html">ma ville</a> <li><a href="liens.html">liens</a> </ul> <!-- Contenu principal --> <h1>ma première page avec du style</h1> <p>bienvenue sur ma page avec du style! <p> Il lui manque des images, mais au moins, elle a du style et elle a des liens, même s'ils ne mènent nulle part... <p>je devrais étayer, mais je ne sais pas comment encore. <address>fait le 12 janvier 2016<br> par moi.</address> </body> </html> Enregistrez ce fichier sous «index.html», ensuite exécutez-le avec un navigateur web. Que voyez-vous? 2- Ajouter de la couleur : Afin de personnaliser cette page web, on doit ajouter une balise <style> au fichier HTML. Le code CSS de style sera entre cette balise et la balise fermée </style>. Retournez à la fenêtre de votre éditeur et ajoutez les cinq lignes suivantes dans la partie <head> de votre fichier HTML. Les lignes à ajouter sont celles affichées en rouge. Page 2 sur 8
La première ligne indique qu'il s'agit d'une feuille de style et qu'elle est écrite en CSS ("text/css"). La seconde ligne indique que nous ajoutons du style à l'élément "body" de la page web. La troisième ligne indique la couleur du texte et la couleur du fond. Enregistrez le fichier et exécutez-le avec un navigateur web. Qu en pensez-vous? 3- Ajouter des fontes : Ici on va ajouter une fonte de type «Comic Sans MS» pour le texte de la page web. Ainsi qu une fonte de type «Chiller» pour le titre de cette page web. Dans votre fichier Bloc-notes ajoutez les lignes en rouge suivantes : Enregistrez le fichier et exécutez-le avec un navigateur web. Que remarquez-vous? Page 3 sur 8
4- Positionner la barre de navigation : Ici on va personnaliser la barre de navigation contenant les liens Hypertextes de notre page web. Copiez et collez dans votre fichier «index.html» le code en rouge suivant : Dans le code CSS ci-dessus : Le padding-left représente l espace entre le texte et le bord de la page (ici 11em = 11 espaces). Le texte de la page sera donc décalé de 11 espaces. On veut positionner la barre de navigation «en haut à gauche» de la page web : - top : définit le nombre d espaces au dessus de la barre, - left : le nombre d espaces à gauche de la barre, - width : détermine la largeur de la barre de navigation, - Position : «absolute» signifie que la barre de navigation peut se positionner indépendamment du texte de la page web. - Padding et margin : le nombre d espaces avant et après la barre de navigation. Exécutez le code de votre fichier HTML et visualisez le résultat. Page 4 sur 8
5- Personnaliser la barre de navigation : Ici on va personnaliser la barre de navigation contenant les liens Hypertextes de notre page web. Copiez et collez dans votre fichier «index.html» le code en rouge suivant : Dans «ul.navbar» on définit un arrière plan blanc, une marge d un demi-espace entre les liens, et un bord rouge de largeur de 0.5 espace pour chacun des liens. On souhaite aussi afficher les liens en «bleu» (par défaut), et les liens déjà visités en «violet». Que constatez-vous après l exécution de ce code? Page 5 sur 8
6- Personnalisation de la signature : Ici on va personnaliser la signature de cette page web, on va donc la séparer du texte avec des pointillés et changer sa fonte et sa couleur. «Border-top» : permet de tracer une ligne au-dessus de la signature. Page 6 sur 8
7- Fichier CSS externe : Nous disposons d'un fichier HTML avec une feuille de style intégrée. Mais si notre site se développe, nous voulons probablement que plusieurs pages partagent le même style. Il existe une meilleure méthode que de copier la feuille de style dans chaque page: si nous mettons la feuille de style dans un fichier à part, toutes les pages peuvent pointer sur celuici. Pour créer un fichier de feuille de style, nous devons créer un autre fichier texte vide. Vous pouvez ouvrir de nouveau «Bloc-notes» afin de créer un nouveau fichier texte vide ; Ensuite, coupez et collez le code CSS copris entre les deux balises <style> et </style> depuis le fichier HTML vers la nouvelle fenêtre. N.B. Ne copiez pas les éléments <style> et </style>. Ils appartiennent au langage HTML, pas à CSS. Enregistrez le nouveau fichier de feuille de style sous le nom de «style.css», et ce dans le même dossier que le fichier «index.html». Afin d accéder à la feuille de style en ouvrant la page web, il faut insérer dans le fichier «index.html» un lien qui permet d exécuter le fichier «style.css». Ce lien est indiqué en rouge dans le code suivant : Page 7 sur 8
Vous pouvez personnaliser vos pages web créées dans les séances précédentes en changeant les polices (trouver les noms sur word ou libre office), ainsi qu en utilisant les couleurs suivantes : Pour accéder au tutoriel complet sur le langage CSS, cliquer sur le lien suivant : http://www.w3.org/style/examples/011/firstcss.fr.html Page 8 sur 8