Licence Informatique L2 - TD/TP Langage Web "côté client" Les Feuilles de Style CSS Tout d'abord, pour vous persuader de la puissance des feuilles de styles CSS, allez faire un tour sur le site de démonstration : http://www.csszengarden.com/ . Toutes les différentes version de cette page sont faites avec le même code HTML !! Seule la feuille de style change. Ensuite pour les règles de syntaxe et la description des principaux attributs de style, vous pouvez consulter le site de G. Chagnon : http://www.gchagnon.fr/cours/html/cssintro.html (ou bien sur un autre site similaire, les tutoriaux et autres sites de référence sur HTML/CSS sont très nombreux sur le WEB). Par exemple, de très nombreux tutoriaux sur HTML5 et CSS3 sont disponibles sur le site : http://www.alsacreations.com/ Nous allons utiliser, dans cette planche de TP, des feuilles de style externe qui seront définies dans l'entête du document HTML de la manière suivante: <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr"> <head> <title>Premiers pas en CSS</title> <link rel="stylesheet" type="text/css" href="mafeuille.css"> <meta httpequiv="ContentType" content="text/html; charset=utf8"> </head> <body> (...) </body> </html> Le fichier « mafeuille.css » contiendra les règles de style CSS s'appliquant au document. Définition de styles simples Vous allez dans cette partie utiliser les programmes réalisés lors de la première séance de TP permettant de générer une page HTML à partir d'un fichier numérique contenant des informations météorologiques. Exercice 1 Vous allez, dans cet exercice, modifier la génération de la page HTML de l'exercice 2 (sur les listes et sous-listes) afin de rajouter des attributs de classes différentes à la liste principale sur les années et les sous-listes sur les mois. Vous allez ensuite définir des règles CSS de présentation (par exemple de couleur, italique, gras, première lettre différente, etc.) différente pour chaque classe de listes. Exercice 2 Vous allez, dans cet exercice, modifier la génération de la page HTML de l'exercice 3 (sur les tables). Tout d'abord vous spécifierez des attributs de présentation particulier aux titres (mois et années) de la table. Ensuite vous rajouterez un attribut de classe particulier à chaque case de la table, en fonction de la température indiquée : – les cases de température < 5 seront de classe « INF5 » – les cases de température < 10 seront de classe « INF10 » – les cases de température < 15 seront de classe « INF15 » – les cases de température < 20 seront de classe « INF20 » – les cases de température < 25 seront de classe « INF25 » – les cases de température < 30 seront de classe « INF30 » – les cases de température >= 30 seront de classe « SUP30 » Vous définirez ensuite, dans votre feuille de style, des couleurs de fond différentes selon la « température » de la case: du bleu au rouge en passant par l'orangé (du froid vers le chaud !!). Définition de styles complexes Nous allons ici réaliser une page CV WEB et un générateur de page CV WEB utilisant les styles CSS. On considère qu'un CV est composé de 5 parties principales : – un entête, contenant le nom, la photo, ainsi que les infos « administratives » tels que date de naissance, adresse et téléphone ; – la description du parcours éducatif suivi ; – la description du parcours professionnel ; – une éventuelle partie « personnelle » contenant des informations sur les langues parlées, le type de permis, etc. – une partie « liens » contenant des liens vers d'autres pages liées au CV ou d'autres sites. Exercice 1 Proposez une structure pour les pages CV intégrant ces 5 parties, chacune dans un objet bloc (<div>) différent. Toutes la page CV sera également dans un bloc. Définissez les objets HTML nécessaires pour représenter l'information codée dans chaque bloc. Chaque objet aura une classe ou un identifieur défini comme attribut de l'objet. Ecrivez un exemple de CV implémentant la structure proposée, aucun information de présentation ne sera spécifiée. Affichez le dans votre navigateur. Exercice 2 Vous allez maintenant écrire une feuille de style permettant d'améliorer la présentation de votre CV. Pour cela vous définirez des styles complexes en utilisant les types d'objets et les noms de classes, afin que chaque partie de votre CV (éducation, professionnel, etc.) soit identifié par un style différent. Exercice 3 Nous allons maintenant positionnez ces différents éléments dans la page grâces aux attributs de positionnement relatif et absolus définis dans CSS2. Vous trouverez un tutorial sur le sujet à l'adresse : http://www.gchagnon.fr/cours/html/css2.html Définissez plusieurs feuilles de style différentes générant des CV avec des positionnement différents des 5 grandes parties et des éléments à l'intérieur de chacune d'elle. Exercice 4 Vous allez écrire un générateur de pages CV prenant en entrée un fichier texte ayant la syntaxe suivante: NOM = ''Jacques Toto'' DATE_NAISSANCE = ''10 octobre 1892'' ADRESSE = ''14 bd Tata, Titi'' TELEPHONE = ''06554422'' EMAIL = ''[email protected]'' PHOTO = ''nomfichier'' DESC_EDUCATIF Ceci est la description de mon parcours éducatif. J'ai la possiblité de faire des listes en commençant une ligne par le symbole '-'. Par exemple: - c'est le premier item de ma liste - c'est le deuxième item de ma liste je peux aussi mettre des liens hypertexte avec la commande URL(''http://monsite.html''). Je laisse une ligne vide pour signifier la fin de cette section de ma page. DESC_PRO Même syntaxe que DESC_EDUCATIF DESC_PERSO Même syntaxe que DESC_EDUCATIF DESC_LIENS - description URL(''http://monsite.html'') - description URL(''http://monsite.html'')