Sélectionner une page


30 août 2006

Création et conception de sites Web

Auteur: Alain Seigneur,

Droits de propriété intellectuelle : Alain Seigneur, UFR Mathématiques et Informatique Paris 5

Le module est proposé au premier semestre de L2 et L3 par la licence MIA

Description du module

o Date de dernière modification: 30 août 2006 (version 4.0) o Volume de formation: 18 heures de cours et 24 heures de travaux pratiques o Test de connaissances: un examen de travaux pratiques (30%) + 1 projet final (70%) o Manuscrit: Face à face (cours, TDM), le contenu du cours en ligne o Objectif: savoir concevoir et publier des pages Web informatives et attrayantes.

o Résumé: ce module propose une formation en HTML et introduit les langages CSS et Javascript.

o Mots-clés: HTML, XHTML, hyperlien, balise, tableau, formulaire, styles, CSS, Javascript

Carte de formation:

Le navigateur de référence pour l'examen TP et le projet final est Mozilla.

Signaler toute erreur ou autre erreur à l'auteur par e-mail

Pourquoi cet enseignement?

§ Promouvoir la maîtrise des technologies de l'information et de la communication qui permettent à l'étudiant d'acquérir des compétences important pour la poursuite des études supérieures.

§ Demander à l'élève de montrer son personnalité et son savoir-faire à travers un média, Internet, plus précisément pour le faire concevoir et publier une page Web personnelle.

§ Construire des sites Web qui servent non seulement les intérêts de l'individu mais aussi ceux des entreprises. Derrière, il y a de nombreux métiers proposés: webmaster, web designer, graphiste, hébergeur etc.

§ Accompagner, en tant que citoyen, l'accès à la société de l'information, qui voit naître de nombreuses applications Internet au quotidien comme dans la vie professionnelle (procédures de téléphonie, cours en ligne, recherche d'emploi sur le web,).

L'environnement de travail de l'étudiant

Introduction

Qu'est-ce qu'un site Web?

Les étapes de la création d'un site Web

Des pages Web aux applications Web

II Les premiers pas en HTML plutôt qu'en XHTML

Infrastructure et premiers éléments du HTML

Écrire et tester du code HTML

Photos et liens

III La représentation visuelle d'un document

Définitions: langage CSS et règles de style

Intégration de styles et de styles

Système de caisse et positionnement

IV Plus loin avec HTML

Les tables

Les formulaires

V Premières applications de Javascript

Langage Javascript Objets et événements

Les formulaires de demande

VI Conception de site Web

Conception adaptée au public et à l'affichage

Structuration et navigation

Publication d'un site Internet

L'élève est placé dans un environnement client-serveur. Le modèle client-serveur est la présence d'un serveur informatique (plus puissant et à l'écoute constante) et d'un ou plusieurs ordinateurs clients (ordinateurs étudiants en réseau).

Les processus serveur sont souvent appelés "démons"(Programmes Ftp, http) qui effectue respectivement prestations de service FTP. HTTP ,.

Le lecteur utilisateur (étudiant) possède deux systèmes d'exploitation (Linux et Windows). Il se trouve sur un réseau TCP / IP et possède sa propre adresse IP (c'est un ordinateur sur Internet), accessible en mode console sous Windows ou sous Linux (ipconfig). Politique informatique de l'UFR

consiste à placer toutes les applications sur l'ordinateur de l'étudiant (client FTP, navigateur, suite bureautique) et le "compte" de l'étudiant sur un ordinateur serveur (losange dans ce cas).

Chaque étudiant inscrit administrativement à l'université en a automatiquement un compte d'ordinateur créé après validation de l'inscription. Chaque compte est unique tout au long de la période d'étude et est disponible lors de la connexion (fourni par le type UFR h_ + 5 chiffres) et mot de passe (secret, sélectionné par l'étudiant). Le compte informatique donne accès aux ordinateurs de l'UFR et à tous les services informatiques proposés (services Internet, bureautique, espace fichier, espace web stocké dans l'annuaire spécifique public_html, …).

Dans le cadre de ce cours, nous nous limitons principalement à échanger avec des serveurs web pour nous envoyer des pages web.

Les outils logiciels nécessaires à cette formation

• des navigateurs (Internet Explorer et Mozilla) pour lancer des requêtes via la barre d'adresse et interpréter le code sur la page html retournée.

• éditeurs du code HTML à écrire (gedit, bloc-notes,) ou autre plus spécifique

• Logiciel d'imagerie (Gimp)

• Logiciel de compression et de décompression (Powerarchiver)

• une suite bureautique (OpenOffice)

• logiciel ftp (WinScp3, gftp)

Ressources disponibles

• Références HTML:

• cours html:, et l'excellent

• un "dictionnaire" html et javascript :,

• un cadre juridique et éthique:

• un dictionnaire technique:

• un guide de recherche et de référence aux actions:

• règles pour les chaînes de réseau:

• une encyclopédie Wikipédia :

• moteur de recherche Google , sa recherche avancée et ses autres services

L'approche projet

Dans cette formation, nous avons essayé d'avoir une attitude pré-professionnelle, c'est-à-dire sensibiliser l'étudiant en affaires qui a son exigences qualité, adaptabilité et autonomiede relationnel ainsi que.

Pour favoriser cette «autonomie», l'apprentissage est organisé dans un environnement spécifique: vous disposez des outils et des ressources sur lesquels vous travaillez. projet enfin. Un projet est défini à travers un Caractéristiques respecter. Ce dernier inscrit le projet dans son contexte (notamment l'existant), décrit ses objectifs, présente ses fonctionnalités (ce qu'il apporte), décrit les aspects techniques de sa réalisation dans délais prévu (annexe FC).

netiquette

Avant de vous plonger dans la publication rapide de pages Web, l'étudiant doit connaître un minimum de règles de contenu, le statut d'étudiant, le fournisseur d'accès. Voici quelques-uns:

§ N'oubliez pas que tous les services disponibles sur le réseau appartiennent à quelqu'un d'autre. Les personnes qui paient les factures fixent les règles de leur utilisation. Les informations peuvent ne pas être gratuites! Vérifiez-le.

§ Supposons seulementn'importe qui les informations que vous trouvez sont à jour et / ou exactes. N'oubliez pas que les nouvelles techniques permettent à quiconque de devenir éditeur, mais tout le monde n'a pas découvert ce qu'est la responsabilité de la publication.

§ N'oubliez pas que si vous n'êtes pas sûr qu'une technique de sécurité et d'authentification est utilisée, toutes les informations que vous envoyez à un système "clair" sont transmises sur Internet sans protection contre les "renifleurs" ".

§ Alors qu'Internet embrasse le monde, souvenez-vous que les services d'information peuvent refléter des cultures et des modes de vie radicalement différents de ceux de votre communauté. Les choses que vous trouvez choquantes peuvent provenir de zones où elles sont acceptables. Devenez objectif.

§ N'utilisez pas le site FTP de quelqu'un d'autre pour placer une entreprise que vous souhaitez que d'autres prennent le relais. Ceci est appelé "dumping" et n'est pas un comportement acceptable.

§ Lorsque vous rencontrez des problèmes avec un site et demandez de l'aide, assurez-vous de fournir autant d'informations que possible pour aider à résoudre le problème.

§ Lorsque vous créez votre propre service d'information, par ex. Pour une page d'accueil, assurez-vous de vérifier auprès de votre gestionnaire de système local comment les codes de conduite locaux sont affectés.

La création et la conception d'un site Web est un processus qui comprend plusieurs étapes qui, selon l'importance du site, peuvent mettre en œuvre des ressources importantes et des compétences différentes.

I.1 Qu'est-ce qu'un site Web?

1 Définition

UNE site Internet est un ensemble de pages Web et d'autres ressources hypertextes possibles dans un ensemble cohérent, qui peut être vu avec un Navigateur à une adresse Web donnée.

Un site Web est publié (nous entendons par là qu'il est mis en ligne sur un serveur Web) par un propriétaire (une entreprise, une administration ou une personne). Le propriétaire du site choisit l'URL où le site est disponible. Il peut créer et maintenir le site à jour ou faire appel à une entreprise spécialisée, une agence web.

2 Technologies mises en œuvre pour un site Web

Protocole de communication: HTTP, HTTPS

httpest un protocole qui permet de localiser le transfert de fichiers (principalement au format HTML) grâce à une chaîne de caractères appelée url entre un navigateur (le client) et un serveur.

Formats de données

C'est la manière dont l'informatique est utilisée pour représenter les données sous forme de nombres binaires. Il s'agit d'une convention utilisée pour représenter des informations représentant un texte (UTF8, ASCII), une image (GIF, JPEG et PNG), un audio, un fichier exécutable. Lorsque ces données sont stockées dans un fichier (unité d'information stockée) on parle de format de fichier.

Il existe un format dont la spécification est accessible au public, un format ouvert (créé à des fins d'interopérabilité) par un format propriétaire que seuls des logiciels spécifiques peuvent utiliser (MSWord, PDF)

Formats de document: HTML, XHTML, CSS, Javascript,.

3 Histoire

Tim Berners-Lee, l'inventeur du World Wide Web, a lancé le tout premier site Web en 1991, faisant de lui le tout premier concepteur de sites Web. Il a utilisé le réseau sur Internet, non seulement par ses différents chemins (augmentation de la tolérance aux pannes) mais pour ses nœuds. Il a suggéré de ramifier les documents qui étaient stockés sur domestiques et accessible via des liens hypertexte (entité qui propose une organisation non linéaire de l'information).

Il a créé un système standard basé sur HTML,http et hypertexte. HTML est un dialecte du langage existant mais très complexe Standard Generalized Markup Language (SGML), qui véhicule deux idées de base: une approche descriptive, une structuration des classes de documents.

Le HTML est beaucoup plus simple: il structure grossièrement un document (titres et paragraphes), intègre des hyperliens et permet une représentation à l'aide d'un navigateur.

À mesure que la conception du site Web et du site Web progressait, le langage qui formait les pages devenait HTML plus flexible et plus flexible. Un nouvel élément, peintures, où les données peuvent être affichées, a été rapidement redirigé de leur objectif d'origine et utilisé comme une forme de mise en page.

Avec l'apparition de CSS (1996) et les feuilles de style, la disposition des tableaux a rapidement été considérée comme dépassée. Les technologies modernes qui utilisent des bases de données ont différents outils de conception de sites Web.

Javascript a été créé en 1995. Il s'agit d'un langage de script côté client dont le but est de manipuler les objets fournis par une application hôte de manière simple (exemple: vérification des données saisies dans les formulaires).

L'apparence de Éclat (1996 pour la création d'animations vectorielles interactives, Macromedia) a également changé l'apparence d'Internet en offrant de nouvelles cartes aux concepteurs de sites. Cependant, Flash est beaucoup plus restrictif que HTML car il s'agit d'un format propriétaire qui nécessite l'affichage d'un plug-in.

Une technique assez récente appelée codage à distance a permis d'utiliser Internet de manière plus dynamique sans nécessiter de plug-ins ni d'applications spécialisées. AJAX est leader dans ces technologies, mais ce n'est pas la seule technologie disponible.

4 Les composants des pages et la portée du contenu de ce cours

§ Cette structure du contenu la page sera décrite en XHTML

§ Cette présentation (affichage) est sécurisé via des feuilles de style CSS.

§ Des objets multimédias peuvent être ajoutés et intégrés (GIF, JPG, PNG, FLASH)

§ Une manipulation initiale des scripts côté client en utilisant Javascript

Ce cours est limité à la formation HTML, y compris un langage de script (Javascript) et l'utilisation de feuilles de style CSS. La programmation côté serveur (Java, PHP,) ne relève pas de ce tutoriel.

I.2 Les étapes de création

Selon le type de site, le contexte et les moyens disponibles pour le mettre en œuvre, certaines de ces étapes peuvent être facultatives, voire inutiles.

§ Réflexion sur le but du site, sa rentabilité, les moyens financiers à engager

§ Réflexion sur autonomie le désir et le type de moyens humains à mettre à jour.

Choix possible d'une agence web (qui peut gérer tous les éléments suivants).

§ Dépôt d'un nom de domaine, choix possible d'hébergeur.

§ Établir une structure de page (contenu éditorial).

Sélection et installation d'un système de gestion de contenu (tel que SPIP).

§ Développement d'un charte graphique.

§ Optimisation: préparation du site pour les moteurs de recherche.

SEO : nous devons le préparer dès le départ et l'affiner à la dernière étape.

L'accessibilité en tant que référence au site doit être prise en compte à chaque étape de l'évolution de la structure des pages.

1.3 Des pages Web aux dernières applications Web

La métaphore de la page

Il existe plusieurs types de pages la toile: sites institutionnels. sites de commerce électronique électronique, répertoires et moteurs de recherche, messages Web, forums Internet, wikis, blogs,

UNE wiki est commesystème de gestion de contenu site qui rend les pages Web gratuites et également modifiables par tous les visiteurs autorisés. Les wikis sont utilisés pour faciliterécriture collaborative de documents avec un minimum de restriction

UNE Blog est un site où une ou plusieurs personnes s'expriment librement sur la base d'une périodicité particulière. Son expression est divisée en unités chronologiques ; chaque appareil est susceptible d'être commenté par les lecteurs. "Blog" est un tronc (néologisme) né de la contraction de "»(C'est-à-dire weblog.) Contrairement au site personnel, le blog bénéficie d'une structure éditoriale déjà existante sous forme d'outils de publication plus ou moins formatés.

Pour les sites d'information, les pages web se succèdent dans la logique de l'hypertexte: un navigateur web contacte un serveur web, demande une page, et ce dernier la renvoie.

Une autre approche consiste à envoyer des informations via un formulaire, par exemple, au serveur qui les traite à l'aide d'une application PHP (script externe). C'est le cas des sites e-commerce. Les informations sont adaptées, mais toujours reçues via des pages. Ce type d'application, très répandu, est limité par la latence du réseau et la fiabilité du fait que la requête est toujours à l'initiative de l'utilisateur (le protocole de requête / réponse HTTP est à sens unique). Mais on peut avancer en ouvrant une session (le serveur se souvient des informations),

Nous vous proposons ici en ouverture technologique de ce cours d'envisager très brièvement une application web pour décrire un nouveau mode de conception. De plus, les quelques paragraphes en italique qui suivent "Ajax et le client riche" ne sont pas au programme.

Ajax et le riche client

Un client riche est un client riche, offrant une variété d'interactions (en particulier les méthodes de saisie) qui sont intuitives et réactives. Un exemple de bonne qualité d'interaction est les feuilles de calcul (ou même le traitement de texte). Mais ce n'est pas un client riche: la logique et le modèle de données sont enfermés dans un environnement (au moins jusqu'à l'arrivée de XML).

Une réponse aux limites des applications Web dont nous parlions serait de répondre à des demandes indépendantes de l'activité réseau d'un interaction asynchrone.

Prenons un exemple de la vie quotidienne, du début de la journée: réveiller les enfants, préparer le petit déjeuner, s'habiller et partir.

Première option

La mère reste à côté des enfants pour voir "commencer". Lorsque les toilettes et les vêtements sont terminés, elle prépare le déjeuner et les fait manger, s'habille pendant qu'ils mangent et avalent son café. Début excité! Les enfants résistent à la résistance passive, la mère perd du temps, s'habille mal et se brûle en buvant du café !!

Autre option

Les enfants s'habillent seuls, la mère prend le temps de s'habiller et de préparer le petit déjeuner. Ensuite, tout le monde prend son petit déjeuner ensemble. Départ organisé.

Où est la différence? En termes informatiques, nous synchronisons les activités: les enfants se préparent et la mère exécute ses tâches (les enfants réussissent bien en arrière-plan). Les enfants sont prêts quand ils demandent le petit déjeuner

Une solution qui offre un client riche évolue rapidement: elle est AJAX.SURsynchrone Javascript SURnd XML, est un acronyme qui désigne une méthode informatique pour le développement d'applications Web (fournissant des services affichés dans des fenêtres).

Ajax n'est pas une technologie monolithique, mais un terme qui évoque son utilisation époux d'un ensemble de technologies déjà largement utilisées sur Internet, notamment celles qui nous intéressent dans cette formation:

§ XHTML à la structure d'information sémantique;

§ CSSpour présenter des informations;

§ JUGEMENTet Javascript pour afficher et interagir dynamiquement avec les informations présentées;

§ XML et XSLT vus dans le maître 1temps an

§ et le point fort XMLHttpRequest pour échanger et manipuler des données manière asynchrone le serveur web est traité ici car nous restons côté client.

Pour information,

JUGEMENTprésente la structure des pages Web sous la forme d'un arbre dont les nœuds peuvent être manipulés par Javascript. Ainsi, une application Ajax peut modifier l'interface utilisateur "on the go" en dessinant les éléments visuels sur la page affichée. XMLHttpRequest vous permet de récupérer des objets de données du serveur Web dans le cadre d'une activité en arrière-plan. Le format des données est XML (ou HTML "xmlisé") ou même du texte simple.

Les applications AJAX sont alors plus réactives, réduisant considérablement la quantité de données échangées entre le navigateur et le serveur HTTP. Le temps de traitement de la demande côté serveur est également légèrement réduit, certains traitements étant effectués sur l'ordinateur d'où provient la demande. En revanche, le chargement de la première page peut être pénalisé si l'application utilise une grande bibliothèque AJAX. De plus, le référencement n'est plus garanti car le site est généré en ligne. L'accessibilité est également un problème.

Pour illustrer ce cours, nous avons choisi un site Web interactif personnel – un bureau qui peut être ouvert n'importe où sur la planète et à partir de n'importe quel navigateur – conçu avec vous pour tester et & # 39; & # 39; utiliser en vous connectant

Ce que nous voulons montrer ici, c'est qu'avec des technologies simples (XHTML, CSS, Javascript) que nous voulons découvrir, nous pouvons construire des applications puissantes.

Regardons le code source de cette page à deux endroits: tout ce dont nous avons parlé est là.

<méta http-equiv = "Content-Type" content = "text / html; charset = UTF-8" />

</b>Netvibes<b>

... Voici le contenu du document décrit ci-dessous

commentaires

- Il ne faut pas se souvenir des deux premières lignes: elles doivent être copiées.

- Le contenu de la balise Ce n'est pas seulement une considération de contenu textuel: la page de titre de l'affiche est le navigateur du navigateur et le papier le plus sécurisé.</i> </p> <h3> 4 Personnages et encodages </h3> <p> Un document HTML vous fournit des éléments constitutifs <b>jouer les personnages</b> bien définis (ils ne sont pas par défaut!). En savoir plus à ce sujet ainsi que l'extension supplémentaire du code ASCII avec 7 bits pour récupérer 128 caractères. Le plus connu est <b>Unicode</b> en termes de représentativité des caractères, vous devez pouvoir encoder ces principes: UTF-8 (choix du défaut) sur un octet carré; UTF </p> <p> 16 sur deux octets. <i>CF. </i><i> ou encore une section concerne plus la spécification l & # 39; euro:</i> </p> <p> Un texte sur le Web assure le transport et la reconnexion afin qu'ils soient initiaux. La nécessité du tonnerre en caractères chaotiques, en traversant les tableaux de correspondances (encodages), jusqu'au nombre "universel". </p> <p> Par exemple, certains navigateurs sont pré-adaptés à la langue française, ainsi qu'au code HTML, sans besoin particulier ni encodeur pour les accents é, è, à. Ils sont en fait (par exemple avec l'encodage ISO - 8859 -1), le navigateur istranger pour la conversion. Ils ne sont pas un fait, juste un navigateur pré-adapté et lié à titre d'exemple, le texte est accentué sans affirmation de communication. </p> <p> Pour un encodage et un HTML plus précis, en utilisant une méta balise: </p> <p> <meta http-equiv = "content-type" content =<b>"text / html; charset =" iso-8859-1 "/</b>> </p> <h3> 5 Codage de couleurs </h3> <p> Affiche Una couleur qui s à l'écran et résultat du mélange de trois couleurs (canaux chromatiques): rouge, vert et bleu (RVB, RGB en anglais). Chacune d ell's et une plage d & # 39; intensité codée sur un octet, c & # 39; est-à-dire allant de 0 (absence de couleur) à 255 ("square phares"). </p> <p> <i>Remarque: ils ont trois coupleurs, donc si vous êtes noir. Elle est illuminée (lire 3 distiques de 255), à un revendicateur blanc.</i> </p> <p> Le HTML long utilise la valeur hexadécimale pour les principes fondamentaux de couche expressifs (RVB). Ainsi, les valeurs chromatiques sont représentées par 6 chiffres hexadécimaux (le premier pour le rouge,…) précède le symbole # (ce). </p> <p> Sur le bon nombre de coupleurs et navigateurs reconnaissent les 16 coupleurs ci-dessous. </p> <table border="0" cellspacing="0" cellpadding="0" width="282"> <tr> <td width="105" valign="top"> <p> blanc </p> </td> <td width="94" valign="top"> <p> FFFFFF </p> </td> </tr> <tr> <td width="105" valign="top"> <p> argent </p> </td> <td width="94" valign="top"> <p> C0C0C0 </p> </td> </tr> <tr> <td width="105" valign="top"> <p> gris </p> </td> <td width="94" valign="top"> <p> 808080 </p> </td> </tr> <tr> <td width="105" valign="top"> <p> noir </p> </td> <td width="94" valign="top"> <p> 000000 </p> </td> </tr> <tr> <td width="105" valign="top"> <p> rouge </p> </td> <td width="94" valign="top"> <p> FF0000 </p> </td> </tr> <tr> <td width="105" valign="top"> <p> bordeaux </p> </td> <td width="94" valign="top"> <p> 800000 </p> </td> </tr> <tr> <td width="105" valign="top"> <p> Jaune </p> </td> <td width="94" valign="top"> <p> FFFF00 </p> </td> </tr> <tr> <td width="105" valign="top"> <p> citron vert </p> </td> <td width="94" valign="top"> <p> 00FF00 </p> </td> </tr> <tr> <td width="105" valign="top"> <p> vert </p> </td> <td width="94" valign="top"> <p> 008000 </p> </td> </tr> <tr> <td width="105" valign="top"> <p> olive </p> </td> <td width="94" valign="top"> <p> 808000 </p> </td> </tr> <tr> <td width="105" valign="top"> <p> aqua </p> </td> <td width="94" valign="top"> <p> 00FFFF </p> </td> </tr> <tr> <td width="105" valign="top"> <p> sarcelle </p> </td> <td width="94" valign="top"> <p> 008080 </p> </td> </tr> <tr> <td width="105" valign="top"> <p> bleu </p> </td> <td width="94" valign="top"> <p> 0000FF </p> </td> </tr> <tr> <td width="105" valign="top"> <p> marine </p> </td> <td width="94" valign="top"> <p> 000080 </p> </td> </tr> <tr> <td width="105" valign="top"> <p> fuchsia </p> </td> <td width="94" valign="top"> <p> FF00FF </p> </td> </tr> <tr> <td width="105" valign="top"> <p> violet </p> </td> <td width="94" valign="top"> <p> 800080 </p> </td> </tr> </table> <p> Exemple de code <b># fc0277</b> mélange les trois couleurs de base et donne comme résultat </p> <table border="0" cellspacing="0" cellpadding="0" width="262"> <tr> <td width="100" valign="top"> <p> composantes: </p> </td> <td width="50" valign="top"> <p> Rouge </p> </td> <td width="50" valign="top"> <p> Vert </p> </td> <td width="62" valign="top"> <p> Bleu </p> </td> </tr> <tr> <td width="100" valign="top"> <p> <b>#</b> </p> </td> <td width="50" valign="top"> <p> <b>FC</b> </p> </td> <td width="50" valign="top"> <p> <b>02</b> </p> </td> <td width="62" valign="top"> <p> <b>77</b> </p> </td> </tr> <tr> <td width="100" valign="top"> <p> Couleur: </p> </td> </tr> <tr> <td width="100" valign="top"> <p> résultat : </p> </td> <td width="50" valign="top"/> <td width="62" valign="top"/> </tr> </table> <h3> 6 exercices immédiats </h3> <p> Le quel langage HTML est-il le sous ensemble? </p> <p> Qu & # 39; est-ce qu & # 39; une balise obsolète? </p> <p> Que distinguer principalement HTML en XML? </p> <p> Les couples du jeudi soir </p> <p> Si vous codez les couleurs sur 16 bits, combien de couleurs disposerez-vous? </p> <p> Saisissez le code de votre fichier et de vos fichiers avec les informations suivantes: selon l'auteur du document et la clause de la page </p> <h2> II.2 Ecrire et tester votre code HTML </h2> <p> <b>Editeur</b> et <b>navigateur</b> lit seulement: L'éditeur permet la création du code HTML, mais ne passe pas le test. Vous êtes un navigateur et un navigateur, et vous devez changer votre façon de faire les choses et les publier. De plus, nous abordons correctement le critère Web pour visualiser les résultats du code sur les principaux navigateurs. </p> <h3> 1 Lire le code HTML de l'éditeur et lire les navigateurs </h3> <p> Un fichier HTML est un fichier texte, sinon vous codez HTML est en fait un utilitaire pour l'éditeur de texte. Un simple éditeur (bloc notes sous Windows ou encore edus Linux) ne dispose pas de certaines fonctionnalités (recherche / remplacement ou dictionnaire), mais permet un "texte uniquement", "manuel" (voir souvenir que l & # 39; on doit savoir intervenir manual when on retouche du code!). </p> <p> Nous recommandons de danser au premier temps pour utiliser les éditeurs des textes en fonction des spéciaux des éditeurs (Dreamweaver, par exemple, et les plus connus). Cependant, vous pouvez utiliser le texte pour convertir le texte à convertir au format HTML. Pour l'information des électeurs, un simple affichage de salutation (Bonjour) "pèse" 19456 octets avec Devenez un 44 octets et Ascii!. </p> <p> Voir des souvenirs même si vous codez HTML est le fait de transit sur les réseaux !! </p> <p> Commentez-vous développer du code HTML? </p> <p> D & # 39; abandonner ouvrir un simple éditeur de texte. De la première mouture de l'éditeur de code, registraire, danse et sélection de fichiers, fichier <b>avec</b> l & # 39; extension .htm ou .html. Attention aux sur-extensions .txt, à la casse et au nom des fichiers. Certes, pour plus de deux systèmes, il y a 255 aventures et plus de certifications: / < > : *. </p> <p> Puis lancer un navigateur (Mozilla, Internet Explorer ou encore un autre) et sélectionner votre fichier avec la commande Fichier Ouvrir : le contenu <b>interprété</b> de votre fichier va s&#39;afficher dans la fenêtre du navigateur. </p> <p> Si vous n&#39;êtes pas satisfait de l&#39;affichage, retournez dans l&#39;éditeur sans fermer le navigateur et corrigez le code HTML (Internet Explorer permet la correction directe avec affichage de la source). Reprendre la fenêtre du navigateur et utiliser la commande (recharger ou actualiser) pour apprécier l&#39;effet de vos modifications. </p> <p> <i>Remarques :</i> </p> <p> - <b class="c1">l&#39;indentation</b><i>, dans l&#39;écriture du code HTML, si elle n&#39;est pas obligatoire, est fortement recommandée pour une meilleure lisibilité.</i> </p> <p> - <i>même si votre code est incorrect, il a toutes les chances d&#39;être réparé par votre navigateur, mais passera-t-il aussi bien sur les autres agents utilisateurs (PDA, téléphone, ..) ?</i> </p> <p> Une première bonne pratique de développement de code HTML consiste à ouvrir une page web et à regarder son code source (clic droit sur le contenu et valider Afficher la source). </p> <p> Une autre, pour rendre le code produit lisible, consiste à insérer des commentaires. Ces derniers ne sont pas interprétés par le navigateur (donc non affichés) et sont placés entre les séquences de caractères <b><! -</b> et <b>--></b> (le texte du commentaire ne doit pas comporter en son milieu une de ces deux dernières marques). </p> <h3> 2  Les premières balises de structuration du texte </h3> <p> Une page web est avant tout un contenu textuel à diffuser sur un écran (ce qui en rend plas fastidieux la lecture). Mais remplir la page web ne se fait pas comme pour une page imprimée. Originellement, le flux textuel est sur une seule ligne !  Aussi va-t-il falloir, pour une meilleure lisibilité, penser à une "aération" du texte, c&#39;est-à-dire à laisser des espaces libres. </p> <p> Organiser un texte consiste d&#39;abord à le structurer hiérarchiquement, à l&#39;aide de titres, en parties, chapitres, sections, paragraphes. HTML dispose de six formats de titres (headings) : h1 à h6, du plus grand au plus petit. </p> <p> Exemple : <b></p> <h1></b> Voici un gros titre<b>! </h1> <p>.</b> </p> <h3> Voici un titre moyen </h3> </p> <p> <i>Remarque : il n&#39;y a pas automatiquement de numérotation hiérarchique du genre I.1, I.2, I.3. Si vous voulez la créer, il faut la coder … <b>en dur</b>.</i> </p> <p> Passer à la ligne nécessite la balise vide <b><br /></b> (break). </p> <p> La balise <b></p> <p /></b> est différente de <br /> : elle provoque un passage à la ligne et, en plus, décale la ligne suivante (espacement inter-paragraphes). </p> <h3> Gestion des espaces (blancs) ou "aération" </h3> <p> On appelle espace ou blanc les caractères "espace" (Code Unicode  décimal 32), "tabulation" (9), "nouvelle ligne" (10), "retour chariot" (13). </p> <p> Par défaut, les navigateurs fusionnent les séquences de blancs (3 espaces + une tabulation = 1 espace). Si l&#39;on veut interdire la fusion, c&#39;est-à-dire écrire directement le texte pré-formaté, on utilise les balises <b></p> <pre>.</b> </p> <p> Si l&#39;on veut "aérer" le texte, on utilise l&#39;entité <b>&nbsp;</b> pour insérer volontairement un espace supplémentaire (pour un alignement par exemple). </p> <p> Exemple : </p> <p> <html> <body> </p> <h3> <h1>Voici un titre imposant</h1> suivi de sa "traîne" <hr size="5"  width="70%" align="center" /> </h3> <p> <h2>et un autre plus modeste </h2> <hr size="2" width="30%" /> <p /> </p> <p> Voici le chiffre 1 suivi de 6 espaces et du chiffre 2 : <br /> </p> <p> 1<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>2 <p /> <b><pre></b> </p> <p> Voici un texte indenté </p> <h3> &lt;html&gt; </h3> <p> &lt;head&gt; </p> <p> &lt;/head&gt;     &lt;body&gt; </p> <p> bonjour le contenu de cet exemple de code </p> <p> &lt;/body&gt; </p> <p> &lt;/html&gt; </p> <p> <b></pre> <p></b> </body> </html> </p> <p> ce qui donne l’affichage suivant </p> <p> <i>Remarques :</i> </p> <p> - <i>center est l&#39;alignement par défaut d&#39;un trait de division</i> </p> <p> - <i>une balise <hi> provoque un passage à la ligne <b>et</b> un espacement</i> d&#39;interligne </p> <p> ? les entités sont interprétées à l&#39;intérieur de la balise pre </p> <p> ? </p> <h4> 3 Les listes </h4> <p> Les traitements de texte actuels manipulent les énumérations facilement, avec puces ou numéros : </p> <p> -  Toyota- Nissan </p> <p> -  Renault </p> <p> 1  Toyota </p> <p> 2  Nissan </p> <p> 3  Renault </p> <p> La balise <b></p> <ul></b> (<b>u</b>nordered list définit une liste non numérotée. Les listes numérotées, elles, sont encadrées par <b></p> <ol></b> (<b>île</b>rdered list). Ces deux balises prennent pour attribut <b>type</b> qui indique soit le type de la puce, soit le type du numéro (chiffres arabes, romains, ..). Pour chaque type d&#39;énumération, s&#39;il y a un <b>en-tête</b>, il est inséré entre les balises <b><lh></b> et <b></lh>.</b> Chaque <b>article</b> (item) qui suit est inséré entre les balises <b></p> <li></b> et <b></li> <p>.</b> </p> <p> Schéma syntaxique d&#39;une liste </p> <p> <balise d'ouverture de la liste ul  ou  ol  avec l'attribut type="valeur"> </p> <p> <lh> élément d&#39;en-tête </lh> </p> <li> élément de l&#39;énumération </li> <li> ….</li> <li> ….</li> <p> <balise de fermeture ul  ou  ol> </p> <p> Dans les énumérations ordonnées, on peut ajouter des attributs </p> <p> • <b>start</b> à la balise </p> <ol> pour définir la valeur de départ </p> <p> • <b>value</b> à la balise </p> <li> pour interrompre la séquence et l&#39;initialiser à une nouvelle valeur </p> <p> Voici un exemple de liste non numérotée : </p> <p/> <p> <b></p> <ul></b> </p> <p> <b><lh></b>Marques d&#39;autos<b></lh></b> </p> <p> <b></p> <li></b>Renault<b></li> <p></b> </p> <p> <b></p> <li></b>Peugeot<b></li> <p></b> </p> <p> <b></p> <li></b>Toyota<b></li> <p></b> </p> <p> <b></p> <li></b>Nissan<b></li> <p></b> </p> <p> <b></ul> <p></b><!-- fin de liste, fin de fichier --> </p> <p> </body> </html> </p> <p> Il existe un autre type de liste, la liste de glossaire annoncée par </p> <dl> : un mot (introduit par la balise </p> <dt>) suivi de sa définition (introduite par la balise </p> <dd>) comme dans un dictionnaire </p> <p> Exemple </p> <h4> 4  Les balises </p> <div> et <span> </h4> <p> Pour structurer un contenu, sans passer par les balises classiques du HTML, il existe des balises génériques créées spécialement pour être utilisées avec des feuilles de style : elles vont tout simplement "déconnecter" certains morceaux de paragraphe ou encore de mots sur une ligne. Ce sont les balises : </p> <div> et <span>. </p> <p> • </p> <div> peut contenir toutes les autres balises HTML et donc servir à mettre en forme toute une section d&#39;une texte (un paragraphe par exemple) </p> <p> • </p> <div> avec l&#39;attribut class peut servir à faire des "custom tags" (voir plus loin) </p> <p> • <span> sert à changer la présentation d&#39;une séquence de caractères  ou de mots à l&#39;intérieur d&#39;une balise </p> <p> La balise <span> </span> permet d&#39;appliquer des styles à des éléments de texte d&#39;un paragraphe ou si vous préférez à un morceau de paragraphe. Ainsi pour afficher  « Un monde de géants » il faut écrire <html> </p> <p> <head> </p> <h3> <STYLE type="text/css"> .element {font-size: x-large; color: navy} </STYLE> </h3> <p> </head> </p> <p> <body> </p> <p><p>Un monde de <b><span class= « element »>géants</span></b>.</p> <p> </body> </html> </p> <p> La balise </p> <div> </div> <p> permet de regrouper plusieurs paragraphes ou si on préfére, de délimiter une zone comportant plusieurs paragraphes. </p> <p> <htm> <head> </p> <p> <STYLE type="text/css"> <b>.</b><b>zone</b> {font-size: x-small} </STYLE> </p> <p> </head> </p> <p> <body> </p> <p> La balise &lt;DIV&gt; </p> <div class= « zone »> <p><p>Commentaire :</p> </p> <p><p>N&#39;oubliez pas l&#39;attribut class!</p> </p> </div> </p> <p> </body> </html> </p> <p> Donne comme résultat : </p> <p> • <i>La balise <DIV></i> </p> <p> • <i>Commentaire :</i> </p> <p> • <i>N&#39;oubliez pas l&#39;attribut class!</i> </p> <h4> 5   Balises de blocs et balise en ligne </h4> <p> <i>Extrait de la spécification du HTML (W3C) :  e</i>n HTML, on utilise des balises pré-définies afin de préciser à l&#39;intérieur d&#39;un fichier texte des éléments tels les titres, les paragraphes, . </p> <p> Au sein de celles-ci, on distingue les balises définissant un <b>bloc</b> des balises <b>en-ligne</b> par : </p> <p> -  le modèle de contenu  les éléments de bloc peuvent contenir à la fois données, éléments de bloc et éléments en-ligne ; les éléments en-ligne ne peuvent contenir que des éléments en-ligne et des données. «L&#39;idée inhérente à cette distinction structurelle, c&#39;est que les éléments de bloc créent des structures </p> <p> « plus grandes » que les éléments en-ligne.» le formatage </p> <p> «Par défaut, les éléments de bloc sont formatés différemment des éléments en-ligne. En général, les éléments de bloc commencent sur une nouvelle ligne, et non les éléments enligne.» </p> <p> Les feuilles de style fournissent les moyens de spécifier la restitution d&#39;éléments arbitraires, y compris si l&#39;élément est rendu comme étant de type bloc ou de type en-ligne.» </p> <p> Exemples de balise de bloc : </p> <p>. </p> <pre>. <div> </p> <p> Exemples de balise en ligne : <img  >. <b>. <span> </p> <h4> 6  Exercices immédiats </h4> <p> Que va afficher le code suivant : </p> <p> <html> <head> <title> Essai

a)  Le mot Essai dans la page du navigateur

b)  Le mot Essai dans la barre d&#39;état du navigateur

c)  Le mot Essai dans la barre de titre de la fenêtre du navigateur

Quels sont les avantages de l&#39;examen d&#39;un code source sur le web ?

Citer trois résolutions d&#39;écran.

Comment va –t-on écrire correctement l&#39;expression mathématique 0 < 1 ? (0 inférieur à 1)

a) 0<1              b) 0 &lt 1                     c) 0&lt;1

Quelle est l&#39;entité correspondant au & (et commercial) ?

a) il n&#39;y en a pas         b) &&;             c) &amp;

Quelle ligne de code est correcte pour écrire La naïveté du mâle

a)  La na&iumlvet&eacute du m&acircle ?

b)  La na&iuml;vet&eacute; du m&acirc;le ?

c)  La na&iuml:vet&eacute: du m&acirc:le ?

Le code HTML suivant est-il correct :

a) Oui              b) Non

La balise body affecte :

a)  l&#39;arrière-plan et le texte seulement

b)  l&#39;en tête (la partie déclarative)

c)  tout ce qui est affichable dans le navigateur

L&#39;adresse de certaines pages web se termine par aucune extension (.htm, .html, .php, .jsp, …) : vrai ou faux ?

Comment allez-vous entrer dans le code de votre page web le caractère ç si vous avec un clavier anglais ?

Comment code-t-on les couleurs noir et blanc ?

Ecrire le code qui affiche à l&#39;écran :  &#39;La balise ouvre le corps du document&#39;

Donnez deux ou trois exemples des polices les plus répandues sur le web.

Dans la balise , quel attribut permet de changer la taille du texte : a) width      b) fontsize c) size       d) height Comment décrivez-vous rapidement la couleur cyan ?

Qu&#39;est-ce qu&#39;une police sans Serif ?

Créer une page web simple en suivant les instructions suivantes :

-  le fond de la page est bleu clair

-  le titre de la page s&#39;intitule "Première page en HTML"

-  la police générale est de couleur bleu marine

-  la marge de droite est positionnée à 40 pixels

Square est-il

a) la valeur d&#39;un attribut ?   b) le nom d&#39;un attribut ?            c) le nom d&#39;une balise ?

Quelle balise sert à introduire un libellé dans une liste de définition : a) dd b) dl   c) dt           d) li

Ecrire une énumération ordonnée et numérotée avec des chiffres romains.

Ecrire le code pour deux énumérations ordonnées imbriquées.

II.3    Les images

1  les formats d&#39;image

Les images numériques destinées  à être affichées sur l’écran d’un ordinateur se divisent en deux catégories : les images matricielles et les images vectorielles (en Flash).

L’image matricielle (image bitmap) se représente sous forme d’une matrice de points allumés ou non, chacun d’une seule couleur ou de plusieurs. Le mécanisme d’affichage est simple et le calcul matriciel facilite le traitement de l’image. Ce type d’image contient un nombre fixé de points rapporté à une unité de longueur appelée résolution. La modification spatiale d’une image matricielle peut poser problème (perte d’information, effet d’escalier).

Les images matricielles sont très « lourdes » en stockage mémoire. Aussi, pour en réduire la taille mémoire, on les compresse. Ce processus de compression a été normalisé et a permis d’arriver aux formats du web : JPEG, GIF et PNG

Le format GIF

Il est doté d&#39;une profondeur chromatique de 8 bits (256 couleurs possibles).

Il autorise la transparence dans les zones désignées (avec un éditeur) comme telles.

Il peut réunir plusieurs images accompagnées d&#39;un minutage pour élaborer une animation (on peut trouver divers logiciels d&#39;animation GIF  sur le site rubrique gif animator). Il n&#39;est pas libre de droit.

Le format JPG ou JPEG

Il est doté d&#39;une profondeur chromatique de 24 bits (16 millions de couleurs possibles) Il permet des compressions importantes et de bons dégradés. Il est parfaitement adapté aux photographies.

Le format PNG

C&#39;est un format spécialement conçu pour le web, libre de droit. Il possède de très bons taux de compression et autorise la transparence. Il est capable d&#39;intégrer une chaîne de caractères au sein même d&#39;une image à des fins d&#39;indexation (tatouage). Il n&#39;est pas encore bien pris en compte par les navigateurs.

Remarque : ces formats d&#39;images sont indépendants de la plateforme (comme html lui-même). Ceci veut dire qu&#39;ils sont compris par tout navigateur.

2  Quelques points à savoir avant d&#39;utiliser les images

Si vos pages web doivent inclure des images, vous avez à tenir compte de ce qui suit :

•    de grandes images peuvent être "super", mais elle peuvent frustrer l&#39;internaute impatient ! Limitez vous à 50Ko pour chacune.

•    Tout le monde n&#39;a pas un écran de 21 pouces ! Limitez vos dimensions d&#39;images à une largeur de 700 pixels (points écran) et à une hauteur de 450 pixels pour éviter de forcer l&#39;utilisateur à "scroller".

•    Une grande palette de couleurs peut faire beau, mais souvenez-vous que les images ne sont pas si bien compressées !

•    Plutôt que d&#39;afficher toutes les images sur votre page, mettez-les en fichiers attachés (liés). (voir ci-après)

•    Le plus important, assurez-vous que les images apportent un plus à la compréhension de vos pages web.

Passées ces considérations, on trouve énormément d&#39;images sur le web. En particulier sur :

ClipArt Connection  Yahoo&#39;s Clip Art,  Barry&#39;s Clip Art Server et bien d&#39;autres sites !

3  L&#39;élément et son alignement

La balise qui permet l&#39;inclusion d&#39;image est la balise vide . Elle est toujours complétée par l&#39;attribut src qui donne l&#39;adresse du fichier graphique contenant l&#39;image. Ce dernier est de préférence dans le même répertoire que celui du document HTML ou bien dans un sous-répertoire image.

La valeur de l&#39;attribut src spécifie le chemin relatif pour accéder au fichier de limage.  Exemple : .

Les images en html sont en ligne, c&#39;est-à-dire qu&#39;elles se coulent dans le flux du texte.

La balise admet l&#39;attribut align qui permet de situer l&#39;image par rapport à la ligne de texte courante. Ses valeurs sont :

- top pour aligner le haut de l&#39;image avec la ligne courante

- middle pour aligner le milieu de l&#39;image avec la ligne courante

- bottom pour aligner le bas de l&#39;image avec la ligne courante

- left ou right si l&#39;on veut couler du texte autour de l&#39;image, à gauche ou à droite.

Voici des exemples de positionnement brut

Voici <img src="http://www.cours-gratuit.com/"align="middle"/> des livres.

Voici encore des livres <img src="http://www.cours-gratuit.com/"

width="50" height="100" align="bottom" />


Voici un positionnement mieux intégré

<img src="http://www.cours-gratuit.com/" width="400" height="100" border="2"

align="right" hspace="5" />

ppppppppffffffff!!!!! pppppfff!!! pppfff!!!! …etc …

Il ne faut pas jouer avec le feu, c&#39;est très     dangereux car très douloureux

blablabla   blablabla  blablabla blablabla …

Remarques

- ici, on utilise les attributs vspace et hspace pour spécifier les possibilités d&#39;écartement de l&#39;espace entre le texte et l&#39;image

- si l&#39;on veut que l&#39;image soit seule "sur une ligne", on insère sa balise au sein des balises de paragraphe

.

4  La largeur et la hauteur d&#39;une image

On peut forcer les dimensions d&#39;une image, en sachant que ceci peut nuire à sa qualité, avec les attributs width et height prenant pour valeurs un nombre de pixels. Ceci se fait alors en proportion.

On utilise des programmes graphiques pour redimensionner les images.

On peut aussi dimensionner les images en pourcentage de la taille de la fenêtre du navigateur

On peut aussi choisir une image comme fond de page. On utilise alors l&#39;attribut background de la balise . Syntaxe :

Remarque : quand on choisit un fond de page, le choix de l&#39;image est important. La texture de l&#39;image doit être simple et relativement monochrome pour préserver la lisibilité du texte affiché. De plus, la taille en octet du fichier de l&#39;image doit être faible pour ne pas retarder le chargement.

5  Les attributs alt et title

Pour les utilisateurs qui n’auraient pas de navigateur graphique, pour éviter un vide béant (la place de l&#39;image), il est recommandé de spécifier, dans la balise d&#39;insertion de l&#39;image, un texte substituable à l&#39;image. Ceci se fait comme valeur de l’attribut alt (alternative) : en lieu et place de l’image, l&#39;internaute trouvera un texte.

(IMAGE)

Sur ce schéma, vous  .

pour le code   <img alt="Sur ce schéma, vous " src="http://www.cours-gratuit.com/">

Si l’on veut afficher une bulle lorsque la souris s’arrête sur l’image, on utilise l’attribut title avec pour valeur le contenu textuel de la bulle

Exemple :Photo de famille" <b>title= " bulle ! "</b> />. </p> <p> <i>Remarques : ces deux attributs peuvent améliorer le référencement de la page.</i> </p> <h4>    6   Exercices immédiats </h4> <p>    Que signifie "image en ligne" ? </p> <p>    Que font les attributs alt et title ? </p> <p>    Donner le nom de deux logiciels de traitement d&#39;images. </p> <p>    A l’affichage d’une page web, on peut parfois voir à la place d’une image un petit carré avec un dessin affiché à l’intérieur. Pourquoi ? </p> <p>    Mettre dans une page web une image comme fond d’écran. </p> <p>    Si l&#39;on redéfinit la hauteur d&#39;une image, qu&#39;arrivera-t-il à sa largeur ? </p> <p>    Un pouce (inch) vaut :  a) 3,1 cm ? b) 2,57 cm ?      c) 2,54 cm ? </p> <p>    Sur combien de pixels va s&#39;afficher une image de 2,5x2,5 pouces de résolution 100 dpi sur un écran de définition 80 dpi : a) 250 x 250 points ?  b) 40 x 40 points ? c) 200 x 200 points ? </p> <p>    Combien peut-on définir de couleurs avec le modèle RGB ? </p> <p>    a) 256              b) 65536          c) 16777216 </p> <p>    Quel le rapport entre la longueur et la hauteur de l&#39;affichage à l&#39;écran </p> <p>    a) 1,33                        b) 1,2                                      c) 1,5 </p> <p>    Que signifie le code <img src=

a)   que , quand l&#39;utilisateur appuie sur la touche alt, le mot voiture est affiché ?

b)   que l&#39;image a une hauteur de 20 pixels seulement ?

c)   que si l&#39;image ne s&#39;affiche pas, voiture s&#39;affiche à sa place ?

Quelle est la bonne réponse ?

a)  le format JPG permet d&#39;obtenir des images transparentes et très compressées

b)  le format JPG peut dégrader des images et le format GIF permet les images animées

c)  le format GIF ne dégrade pas les images et ne permet pas les images transparentes.

Votre écran de téléviseur est un 82 cm. Sa largeur (horizontale) est environ :

a) 70 cm                    b)  60 cm                    c)  50 cm

Remarque finale : on peut aussi intégrer du son à une page web avec la balise embed et ses attributs src = « » ; autostart, loop et hidden  prenant la valeur « true » ou « false », width et height en pixels et control= « console ».

II.3    Les liens

1  L&#39;hypertexte

Les chapitres précédents étaient essentiellement axés sur la structuration et l&#39;intégration d&#39;éléments textuels et d&#39;images au sein d&#39;un document HTML. On restait en dimension 1 ("sur papier") alors que le web est multidimensionnel : lorsque l&#39;internaute consulte le Web, il veut surtout naviguer d&#39;un document à un autre. Il peut le faire par le biais d&#39;un simple clic sur des liens activables dénommés hyperliens qui sont externes s&#39;ils pointent vers d&#39;autres pages ou internes si l&#39;on reste au sein d&#39;une même page.

L&#39;idée de l&#39;hypertexte est qu&#39;un document contiennent des liens vers d&#39;autres document , c&#39;est-à-dire un point de départ (source ou zone activable par un clic de souris) vers un point de destination (ressource pointée par le lien qui peut être un texte, une image, un son …).

La zone activable de départ peut être un caractère, un mot, un groupe de mots ou encore une image. Elle est matérialisée par le navigateur qui lui donne un aspect particulier (couleur bleu et soulignement pour du texte, bordure bleue pour une image) et "cache" sous elle un lien vers une ressource désignée par une url.

L&#39;élément HTML qui correspond à la notion de lien est l&#39;ancre. Elle est désignée par le marquage et peut encadrer presque n&#39;importe quel type de contenu. L&#39;uri de la destination est précisée dans la balise par l&#39;attribut obligatoire href (hyper-reference).

En voici la syntaxe : zone source cliquable

Remarques

-  Les liens hypertextuels sont habituellement en bleu et soulignés.

-  Une image peut être un hyperlien. Pour ce faire, on code Pour aller au document X

Attention, le fichier image doit se trouver dans le dossier du fichier html. Sinon vous risquer de voir afficher l&#39;icone suivante :

2  Liens vers des fichiers "locaux"

On veut "poser une ancre " vers une autre page qui se trouve sur la même machine que la page appelante "http://www.cours-gratuit.com/".

Si cette deuxième page est dans le même dossier, il suffit d&#39;écrire

texte cliquable

Ancre vers une image

texte cliquable si l&#39;image est dans le même dossier.

Maintenant, si le fichier appelant est dans le dossier de travail (work area) et l&#39;image appelée, ,  est dans le dossier pictures, on doit écrire le code suivant : texte cliquable.

work area

pictures

Ancre vers un dossier parent

Les liens que nous construisons sont des liens relatifs : l&#39;url est basée sur le localisation de la page html du lien appelant .

Ici, le lien invoqué nous conduit dans un dossier parent.

Retour à la page d&#39;accueil

vers une image placée dans le dossier pictures

Remarques :

- on a pris l&#39;habitude de placer les images dans un autre dossier parent ou non ; tout dépend de l&#39;usage fait.

- si l&#39;on change en , un lien pointant vers ce fichier est tout simplement. Ceci parce que les serveurs web ont un nom standard pour la page par défaut d&#39;un dossier.

3  Lien vers une ressource n&#39;importe où sur l&#39;internet On utilise une adresse absolue :

Belle image

Un lien peut aussi pointer vers un autre service de l&#39;Internet (messagerie, transfert de fichiers, …) que le web via de nouveaux url (pseudo-url) :

? ftp : cette url permet d&#39;offrir à travers un serveur Web une connexion vers les serveurs de fichiers anonymes.  Exemple : et si on active le lien, on est redirigé vers le document ciblé par l&#39;url .

6  Exercices immédiats

Comment faire pour supprimer la bordure hypertexte autour d&#39;une image ?

Que signifie le code

a)  que l&#39;image   apparait si n&#39;est pas trouvé ?

b)  qu&#39;un lien est créé vers la page ?

c)  qu&#39;un lien est créé vers l&#39;image ?

Qu&#39;est-ce qu&#39;une adresse relative

a)  une adresse vers une ressource externe ?

b)  une adresse vers une ressource qui se trouve sur le même serveur ?

c)  aucune de ces réponses ?

Réaliser un mécanisme de notes de bas de page.

Exemple de TP à faire : une image réactive

On peut souhaiter, en cliquant sur des zones spécifiques d’une image (représentant une carte géographique par exemple), obtenir différentes informations liées à l’endroit du clic. On utilise alors ce qu’on appelle une image réactive. Pour la construire, le premier travail consiste à délimiter chaque zone cliquable en la repérant dans le référentiel habituel (origine en haut et à gauche, séries de points définis en pixels).

La délimitation des zones se fait à l&#39;aide de formes géométriques prédéfinies (shapes) :

Rectangle (rectangle dont on donne les sommets supérieur gauche et inférieur droit),

Circle (cercle dont on donne le centre et un point quelconque de la circonférence),

Poly (ligne polygonale fermée dont on donne les coordonnées des extrémités des côtés).

Pour ensuite coder, on définit l&#39;image réactive avec la balise dotée d&#39;un attribut supplémentaire usemap :  <img source="http://www.cours-gratuit.com/" usemap="#nomCarte" />

Le code de description de la carte se situe entre les balises et .

Entre ces deux balises, on dispose de plusieurs balises

<area  shape="TypeFigure" href="url" coords="x0, y0, x1, y1, .."  />

Pour réaliser concrètement une image réactive, deux éléments sont indispensables : un fichier image (.gif ou .jpg) et la définition des zones cliquables. Pour ces dernières, on utilise un logiciel spécifique (gimp ou mieux mapedit).

On choisit de cliquer sur les yeux  (et d&#39;ouvrir une image, ) ou de tirer la barbe (et d&#39;ouvrir une nouvelle page, )

C&#39;est un patient qui doit subir une intervention chirurgicale très lourde genre quadruple pontage coronarien et il est mort de trouille.

Son chirurgien qui s&#39;en aperçoit décide de le rassurer avant que l&#39;anesthésiste ne l&#39;endorme. - Ne vous en faites pas, tout va très bien se passer. Tenez, vous voyez cette barbe ? (Nota : le chirurgien est barbu) Et bien quand vous vous réveillerez, vous la retrouverez.

Sur ce, un peu rassuré, notre patient se laisse endormir en pensant à la barbe. À son réveil, notre patient aperçoit, dès qu&#39;il ouvre l&#39;oeil, une silhouette penchée sur lui. Et, il lui semble reconnaître une barbe!! Alors, il se rappelle de ce que lui avait dit son chirurgien et, fou de joie, commence à caresser la barbe.

-   Oh, merci docteur ! Je savais que je pouvais vous faire confiance. Je suis si heureux de retrouver cette barbe.

-   ça va, ça va. Lâchez-moi Et puis d&#39;abord, je ne suis pas docteur, je suis Saint Pierre

Pour obtenir cet effet, voici le code html  :

Image cliquable  ou réactive

<img src="http://www.cours-gratuit.com/identité"usemap="#idAS" alt="http://www.cours-gratuit.com/" style="border-style:none" />

<map id="idAS" name="idAS">

<area shape="rect" #Quels beaux yeux bleux coords="67,94,157,121" href="http://www.cours-gratuit.com/" title="Quels beaux yeux bleux" />

<area shape="circle"#Barbant coords="108,186,44" href="http://www.cours-gratuit.com/"

title="Barbant" />

http://www.cours-gratuit.com/

Les coordonnées des points de l&#39;image sont définies en pixels suivant les axes x et y, l&#39;origine étant le point en haut et à gauche de l&#39;image.

30

III.1  Définitions

1  le document HTML et ses éléments On a vu :

*     Un document HTML est un flux de données textuelles, éventuellement combiné avec d&#39;autres flux de données qu&#39;il référence alors (le plus souvent, il est multimédia). Quand on veut insérer une image dans le document, on utilise un "pointeur" (sous forme d&#39;élément vide).

*     Le document est structuré en éléments (terme issu de SGML) composés : - d&#39;une balise ouvrante,

-  d&#39;un contenu

-  d&#39;une balise fermante.

.Exemple d&#39;élément en HTML :

Ceci est un contenu de paragraphe.

Un élément unique introduit et encapsule le document : c&#39;est l&#39;élément racine qui lui donne une cohésion sémantique.

2  L&#39;arbre de document

Ayant un seul élément racine car doté d&#39;une bonne imbrication des éléments, un document peut avoir une représentation arborescente et ordonnée définie à partir de la structure de ses éléments.

Voici un exemple de document source dans le langage HTML :

Ma page personnelle

Ma page personnelle

Bienvenue sur ma page personnelle ! Voici mes compositeurs préférés :

  • Elvis Costello
  • Johannes Brahms
  • Georges Brassens

et maintenant sa représentation arborescente :

Les éléments se positionnent les uns par rapport aux autres dans l&#39;arbre, dans l&#39;ordre où ils apparaissent dans le document et suivant leur imbrication.

L&#39;arbre se dessine bien car chacun des éléments a exactement un seul parent à l&#39;exception de l&#39;élément racine qui n&#39;en a pas.

3 Le Modèle Objet Document (en deuxième lecture pour une utilisation ultérieure avec Javascript)

Le Modèle Objet de Document (DOM) est une interface de programmation d&#39;applications (API) pour documents HTML et XML. Il permet de reconstruire en mémoire la structure logique d&#39;un document et fournit une batterie de fonctionnalités pour le manipuler.

Cette interface ressemble étroitement à la structure des documents qu&#39;elle modélise. Par exemple, si l&#39;on considère le tableau suivant, extrait d&#39;un document HTML :

Shady Grove Aeolian
Over the River, Charlie Dorian

DOM le représente comme ceci :

Le nom "Modèle Objet de Documents" a été choisi parce qu&#39;il s&#39;agit d&#39;un "modèle objet" au sens traditionnel de la conception orientée objet. Le modèle ne contient pas uniquement la structure du document mais également son comportement et celui des objets dont il est composé. En d&#39;autres

termes, les noeuds du dessin ci-dessus ne représentent pas une structure de données, ils représentent des objets ayant des fonctions et une identité.

En tant que modèle objet, DOMidentifie :

les interfaces et les objets utilisés pour représenter et manipuler un document

la sémantique de ces interfaces et objets - incluant le comportement et les attributs

les relations et collaborations entre ces interfaces et ces objets

4  L&#39;utilisation du DOM

Avec le Modèle Objet de Document, les programmeurs peuvent construire des documents, naviguer dans leur structure, et ajouter, modifier, ou supprimer soit des éléments soit du contenu. Tout ce qui peut être trouvé dans un document HTML ou XML peut être accédé, changé, détruit, ou ajouté en utilisant le Modèle Objet de Document, à quelques exceptions près.

Nous en verrons une implémentation avec Javascript.

Symboliquement, on pourrait changer la valeur de la deuxième cellule de la première ligne dans l&#39;exemple ci-dessus : (1).TD(2).valeur="White shade of pale"

III. 2  Le langage CSS

L’idée directrice de ce chapitre est la séparation du contenu et de sa présentation (sur différents médias).

1  Le langage CSS

Dans ce cours, on a retenu le langage CSS, bien implémenté dans les dernières versions des principaux navigateurs et utilisable avec les deux principaux langages de balisage, HTML et XML. Ici, il s’intègre à son langage hôte, HTML, soit dans une balise de style (insertion de règles de style), soit via un fichier associé.

Le langage HTML "classique" les valeurs par défaut des propriétés de style du langage CSS.

CSS signifie Cascading Style Sheets. Lorsqu&#39;un élément est défini avec un certain style,  ce style se répercutera non seulement dans toutes les occurrences de l&#39;élément mais encore dans la plupart des éléments enfants (héritage au sens de l&#39;inclusion des balises). Dans le cas où plusieurs entrent en jeu dans la présentation de la page, des règles de priorité jouent (lesquelles ?).

Le langage CSS est un langage déclaratif non sensible à la casse qui a sa propre syntaxe. Le W3C en a publié deux versions, CSS1, en 1996 qui a défini beaucoup de règles de styles et CSS2, en 1998, qui a ajouté une prise en charge des styles autres que visuels et placé HTML et XML sur le même pied d&#39;égalité.

Il permet la composition de fichiers texte sauvegardés avec l’extension .css


Les commentaires s’affichent à l’aide des marqueurs /*   …. */ comme en PHP et Java.

2  Un langage de style pourquoi faire ?

Avant tout, pour fournir un outillage destiné à représenter un contenu sur des médias en continu ou paginé.

Les feuilles de styles offrent une nouvelle façon d&#39;intervenir dans la présentation d&#39;une page Web. Le langage HTML intégrait auparavant des balises de présentation typographiques ou de mise en couleur (. , …) pour les pages web. Cette façon de procéder était dispersée, dépendante du navigateur (par exemple, le style

marquant un titre de niveau 1 s’affiche par défaut dans une police Times Roman de 24 pts) et limitée à quelques ornements (gras, italiques, titres, couleurs).

L’intérêt premier des feuilles de styles est la séparation du contenu et de son rendu : l’utilisateur reçoit l’information  en fonction du terminal utilisé (un contenu pourra avoir plusieurs présentations suivant sa destination : téléviseur, imprimante, téléphone, …).

Un second apport est de donner via des fichiers de styles .css une charte graphique à l&#39;ensemble d&#39;un site web et partant, non seulement une cohérence graphique aux pages web mais aussi une symbolique pour l’entreprise.

Un troisième point est le positionnement des éléments dans une page à l’aide de boites et conteneurs.

3  Le modèle visuel

Ce modèle va transcender les modèles précédents qu&#39;étaient l&#39;utilisation de la structure de tableaux en tant que grille de la page ou encore l&#39;utilisation de pages de frames. Ces derniers modèles étaient rigides, mais surtout liés directement au contenu du document.

Le nouveau modèle de boites décrit des rectangles générés pour les éléments de l&#39;arbre document en accord avec le modèle de rendu visuel.

Dans ce modèle, chaque élément de l&#39;arbre produit zéro, une ou plusieurs boîtes. La mise en place des boîtes est gouvernée par

-  la dimension de la boite,

-  le type de la boite,

-  son schéma de positionnement (flux normal, positionnement flottant, absolu ou fixe),

-  la position des éléments dans l&#39;arbre du document et les informations externes

Ces éléments de contrôle dans la génération des boites seront vus plus loin. D&#39;ores et déjà, on peut dire que l&#39;élément racine génère une boite qui sert de conteneur initial pour les autres boites à venir.

En CSS2, les positions et les tailles d&#39;un grand nombre de boîtes sont calculées en fonction des bords d&#39;une boîte rectangulaire ; on l&#39;appelle un bloc conteneur. La plupart des boîtes générées se comportent comme des blocs conteneurs pour les boîtes qui en sont les descendantes. L&#39;expression "le bloc conteneur d&#39;une boîte" signifie "le bloc conteneur dans lequel se trouve la boîte", et non la propre boîte que celle-ci génère.

4  Les agents utilisateurs

On donne le nom d&#39;agent utilisateur à tout logiciel capable d&#39;interpréter un document dans un langage donné et de mettre en œuvre les feuilles de style qui lui sont associées selon cette spécification. Celui-ci peut afficher un document, le lire en synthèse vocale, l&#39;imprimer, le convertir vers un autre format, etc.

Les agents utilisateurs pour médias continus offrent généralement une zone de visualisation (une fenêtre ou une autre zone d&#39;affichage sur un écran) grâce à laquelle l&#39;utilisateur peut consulter un document. Les agents utilisateurs peuvent changer l&#39;affichage du document quand cet espace est redimensionné.

5  Exercices immédiats

Positionner des boites dans une zone de visualisation (reprendre l&#39;exemple de « ma page personnelle ci-dessus).

Décrivez vos boites (texte, image) et leur positionnement dans le flux du document

III.3 Les règles de style

Le mécanisme de base pour associer une partie sélectionnée du document à un rendu visuel stylisé repose sur un jeu derègles de styles.

1  A telle partie, telle apparence Une règle de style se compose :

-  d&#39;un sélecteur qui indique l&#39;élément auquel elle s&#39;applique,

-  d&#39;une ou de plusieurs couples propriété / valeur entre accolades.

sélecteur         {propriete1: valeur ;

propriete2: valeur ;

proprieten: valeur ;

}

Les couples propriete: valeur forment ce que l&#39;on appelle la déclaration de style. On peut mettre entre accolades autant de déclarations que nécessaire en les séparant par des points-virgules.

Remarques :

- A tout élément de la structure du document, on peut associer sa ou ses déclarations de style.

- Attention : on ne met plus de guillemets autour des valeurs !

2  Sélection et sélecteur du passage à styliser

Il s&#39;agit de découper le document (fabriquer des sélecteurs) sans impliquer obligatoirement et uniquement les balises HTML vues jusqu&#39;ici. Comme on l&#39;a vu, pour délimiter à volonté la partie à "styliser", on va utiliser les deux balises génériques (div et span) qui vont spécifier n&#39;importe quelles divisions logiques au sein d&#39;un document et les doter de noms et de styles propres.

agit au niveau de blocs délimités par des retours à la ligne (comme

.

…). agit dans le flux du texte (comme . . ).

Par exemple, pour mettre en rouge le mot danger dans la phrase "Attention, il y a dangerici …", on utilise la règle de style span {color: red;}

Les deux balises (

et ) vont introduire les deux types principaux de boites.

Les attributs id et class

Ces attributs vont permettre de spécifier les éléments de "découpe", de les affiner. De plus, la valeur nominative de l&#39;attribut va permettre de regrouper un certain nombre d’éléments, ceux qui justement appartiennent à la même "classe" (attention : le nom donné à cet attribut n’a rien à voir avec une classe en Java).

Prenons un exemple. Certains paragraphes du document qui ont un fond bleu sont repérés dans le document par des balises dotées de l’attribut class prenant comme valeur « enbleu » :

Dans la définition de la règle de style correspondante, on note ce sélecteur par un point suivi immédiatement du nom de la classe.

Remarque : on pouvait aussi le faire directement en utilisant

, mais si ce type de paragraphe est répété dix fois, si l’on veut par la suite que le fond soit vert, il faudra modifier le codage à dix endroits. D’où l’intérêt d’un regroupement en classe.

La définition d&#39;une classe peut être encore insuffisante si l&#39;on veut régler un grand nombre de paramètres. Imaginons que l&#39;on veut définir deux types de paragraphe de la même classe (premier) dont seule la couleur de la police diffère. On va faire appel à un autre attribut id qui va autoriser une particularité ou une exception dans une classe (il est unique).

Exemples :

Ce texte sera en caractères de 20 points et en gras

Ce texte sera en caractères de 20 points et en gras, mais aussi en vert

.

Dans la définition de la règle de style correspondante, on introduit ce sélecteur par le caractère # (dièse) suivi immédiatement de la valeur nominative de l’attribut id.

Au niveau de la définition du style (dans la balise ou le fichier), pour reprendre le dernier exemple, on écrira :

3  Regroupement de sélecteurs ou de déclarations

Pour condenser la rédaction d&#39;un style et en accroître la lisibilité, on peut regrouper les sélecteurs en

les séparant par une virgule : h1, h2, h3, .premier {font-family: arial} Les textes contenus entre les balise h1, h2, h3 ou div class="premier" sont affichés en Arial.

De la même façon on peut regrouper plusieurs déclarations de styles.

h1 {font-weight: bold; font-size: 12pt; line-height: 14pt; }

Il est possible aussi de préciser le contexte dans lequel le style va s&#39;appliquer, par exemple

uniquement à "l&#39;intersection" de deux sélections : b i {color: blue}

Un élément en italique (i) est coloré en bleu si cet élément est lui-même situé au sein d&#39;un élément en gras (b) (autrement dit si l&#39;élément italique (i) est un descendant de l&#39;élément gras (b).

Remarque : s&#39;il s&#39;agit de l&#39;intersection de deux sélecteurs, le séparateur est l&#39;espace et non plus la virgule.

4  Sélections particulières (à l&#39;aide de « pseudos » ou d&#39;attributs)

Les pseudo-éléments et pseudo-classes

Un pseudo-élément permet de sélectionner non des éléments entiers mais des parties d&#39;élément comme par exemple la première lettre d&#39;un paragraphe (p:first-letter)

La syntaxe d’utilisation est : sélecteur:pseudo-element  { propriété:valeur }. Exemple :

Les premiers mots d&#39;un article de journal, les voici : jdhuzd ndheouidh hofhoi iodjdjeidfeifj f,nijeic rjfr"jr&#39;oàfjkop ckfrofkropfk koperkfopkvopevk kfrookojk lefpelkpêlkdcvpêkl kf&#39;riopjfer dk riojerov ifjioj jkvjhnreiovjn rifj nijev iervjioev …………….

Une pseudo-classe permet d&#39;attacher un événement à un élément, par exemple le passage de la souris sur une ancre (a:hover).

Autre exemple de style : a:visited {background-color :navy ;color :gray ;}

La sélection à l&#39;aide d&#39;un attribut pour sélectionner un élément qui possède un attribut, on met ce dernier entre crochets.

Pour faire apparaître en bleu les éléments p  ayant un attribut align, on écrit : p(align) {color:blue} apparaissent en bleu

Sélection d&#39;un élément qui possède un attribut de telle valeur : p(align="center") {color:blue}

5  Exercices immédiats

Nommer les deux composants d&#39;une règle de style

Nommer les deux composants d&#39;une déclaration de style

Quel est l&#39;intérêt majeur de l&#39;utilisation d&#39;un langage de style ?

Pourquoi utiliser une règle de style pour spécifier des types de caractères plutôt qu&#39;une balise ?

Que signifie CSS ?

- Creative Style Sheets

- Colorful Style Sheets

- Computer Style Sheets

- Cascading Style Sheets

Pourquoi n’utilise-t-on pas en CSS la même syntaxe de commentaire qu’en HTML ? Ecrire la règle qui met en rouge les mots en italiques des titres de niveau 2.

Ecrire la règle qui met en gras et en rouge un seul mot d&#39;un texte donné.

Ecrire une règle qui formate les éléments en rouge uniquement lorsqu&#39;ils sont présents dans une balise

Ecrire une règle qui formate un titre de niveau 1 en inversé (blanc sur fond noir).

Quelle différence voyez-vous entre les balises

et ?

Quelle différence voyez-vous entre la déclaration d&#39;un sélecteur lié à l&#39;attribut id et à l&#39;attribut class ?

III.4  L’intégration des styles dans une page web

Il s&#39;agit ici de savoir associer des styles au langage HTML.

1  Par l&#39;utilisation d’une balise de style

C’est l’utilisation classique. La balise de style s’écrit dans l’en-tête du document : elle associe sélecteurs à des déclarations de style pour la page web associée.

Exemple :

<body bgcolor="yellow">

TITRE DU JOUR
Ce livre est d’unecouleur magnifique.

Il est …

On voit affiché "unecouleur" Comment décoller le e du c?

2  Par l&#39;association d’une feuille de style

C&#39;est l&#39;utilisation à privilégier pour homogénéiser la présentation des pages web. Une feuille de style est un document externe au document web : c’est un fichier .css relié au fichier HTML par la balise qui doit se trouver dans l’en-tête du fichier HTML. C’est une approche plus globale (le même fichier .css peut être relié à plusieurs pages) qui permet de construire une charte graphique pour un site entier.

Cette balise prend plusieurs attributs : rel, type et href.

- rel indique soit la feuille par défaut (stylesheet) ou une feuille accessoire (alternate stylesheet) car il peut y avoir plusieurs feuilles de styles associées.

- type indique le type MIME de la feuille de style. - href indique l&#39;url de la feuille de style.

Exemple de fichier HTML

Fichier avec CSS

Voici un exemple de fichier HTML avec
une déclaration de style dans un fichier externe

Ce texte de niveau 1 est en rouge

Ce texte de niveau 3 est en vert

Mais ce texte de niveau 2 est bleu

Exemple de fichier (texte) de style associé :

/**/ h1 {color: #ff0000} #bleu {color: blue} h3 {color: green}

Remarques :

- Dans une feuille de style .css, seules sont inscrites les règles de style : il n&#39;y a pas de balise style à ajouter.

- Plusieurs feuilles de styles  peuvent être reliées à un même document (une pour l&#39;affichage, une pour l&#39;impression, …). Dans ce cas, certaines règles  peuvent entrer en concurrence.

3 Utilisation de l’attribut style Cette utilisation est désuète.

Si, par exemple, à un seul paragraphe comportant des consignes très dangereuses, on veut donner un style particulier, on dote la balise du paragraphe d&#39;un attribut style :

DANGER

Cette utilisation de l&#39;attribut style est désuète.

4  Règles de priorité

Il se peut qu’avec l’introduction de styles à plusieurs niveaux il y ait des déclarations de style contradictoires comme dans l&#39;exemple suivant :

Fichier avec CSS

Voici un exemple de fichier HTML avec


une déclaration de style dans un fichier externe


et une autre locale

Ce texte de niveau 1 n&#39;est donc plus en rouge !

Ce texte de niveau 3 est en (vert) fuchsia

et ce texte de niveau 2 est en bleu

avec le  fichier de style

h1 {color: #ff0000} // couleur rouge

#bleu {color: blue} h3 {color: green}

ce qui donne

Remarque : la déclaration de style la plus proche de la portion de texte sur laquelle elle porte a priorité.

5  Exercices immédiats

Reprenez le fichier HTML suivant en supprimant les balises obsolètes et en respectant la syntaxe

XHTML

Fontes

Ce texte est affiché dans la police par défaut du navigateur avec sa taille

courante Affichage de la plus petite taille

Affichage de la plus grande taille

Texte en taille 3 et en rouge

Augmentation relative de la taille et passage en arial

Quelle est la différence d’effet entre p:first-letter {float:left; font-size:48pt} et span { font-size:48pt }

Pour se référer à une feuille de style, où placer le code dans le document HTML?  - A la fin du document

-  Dans le corps du document

-  En haut du document

-  Dans l&#39;en-tête du document

Ecrire le code à l’aide déclarations de style pour l’image suivante :

III.5  Les premières propriétés de style

Objectif : connaître quelques propriétés de styles les plus usuelles (il y en a plusieurs centaines)

1  Les unités dans les valeurs de déclaration de styles

On a vu que pour attribuer une valeur à une propriété dans le langage CSS, on utilise la symbole deux-points (:) et non pas le symbole = comme on le fait pour les valeurs d&#39;attributs. La valeur affectée à une propriété peut être numérique, alphanumérique ou spécifique. On ne la place pas en général entre guillemets sauf par exemple si la valeur attribuée est en plusieurs mots.

Le langage CSS propose différentes unités de mesure (système décimal avec point ; valeur absolue ou relative) :

Unités absolues :on peut utiliser mm (millimètre), cm. inch (25,4 mm), pt (point) qui vaut 1/72 d&#39;inch, mais la plus répandue est px (pixel).

Unités relatives : % (pourcentage) de quelque chose défini dans son &#39;parent&#39;, em qui représente la taille de la police courante (en général la largeur du m minuscule) ce qui peut  être utile pour indenter des textes.

Nombres hexadécimaux : pour les couleurs (codées sur trois octets. Exemple : color:#FF0000 ).

2  Les propriétés typographiques

Le contenu HTML est essentiellement du texte. Il est donc normal qu’une partie importante de CSS soit consacrée à sa mise en forme. On va donc s&#39;intéresser successivement aux familles de polices, aux graisses de police, aux hauteurs de ligne, au crénage, aux retraits de texte, aux couleurs

Familles de policesfont-size permet de déterminer la taille de la police de caractères.

font-family permet de définir une famille de police de caractères qui sera utilisée pour un élément

Exemple : p {font-family: arial, "courrier new"}

Celle-ci doit être installée sur l&#39;ordinateur. Dans la négative, le navigateur utilise sa police par défaut à moins que l&#39;on mentionne une police de substitution (comme ici Courrier New).

Graisses de police

font-weight permet de définir la "graisse" d&#39;une police (de 100 à 900) ou avec des valeurs prédéfinies. Exemple : font-weight : bold;

Remarque : on peut utiliser en raccourci la propriété font avec plusieurs valeurs des propriétés précédentes : font : 20pt bold arial

Hauteurs de ligne,

Une valeur absolue ou un pourcentage (du corps de la police employée) permet de spécifier la hauteur d&#39;un ligne.  Exemple : line-height :30pt ;

Crénage

Le crénage désigne en imprimerie l&#39;espace entre les lettres : letter-spacing: 2 pt; Retraits de texte et alignements

text-align permet de déterminer l&#39;alignement horizontal du texte d&#39;un élément : left, center, right. text-indent permet de déterminer le retrait de la première ligne d&#39;un paragraphe (valeur ou %) Couleurs et arrière-planscolor définit la couleur du texte

background-color définit la couleur de l&#39;arrière plan background-image propose via son url une image d&#39;arrière plan. Background-repeat répète ou non l&#39;image dans le fond.

margin permet de définir la largeur des marges invisibles autour des quatre côtés d&#39;un bloc. Elle peut prendre une des deux valeurs (largeur en px  ou  auto, option par défaut) répétée de une à quatre fois. Exemple : p {margin : 15px 25px}. Cette propriété peut être déclinée individuellement : margin-top, margin-left, …

padding permet de définir l&#39;espace qui se trouve entre le bord extérieur d&#39;un élément et sa bordure (même utilisation et syntaxe que margin).

La plupart des règles de bordure prennent en charge trois propriétés (style, width et color) et peuvent admettre de une à quatre formes suivant qu&#39;elles s&#39;appliquent aux quatre côtés en même temps (1), aux côtés deux par deux (bas-haut, droite-gauche) (2), au haut, aux cotés droite-gauche et aux bas (3), aux quatre côtés pris individuellement dans le sens des aiguilles d&#39;une montre (4).

border-color définit la couleur de la bordure du bloc : h2 {border-color: red} border-style définit le style de la bordure : double, none, solid, (même syntaxe)

border-width définit l&#39;épaisseur de la bordure : thin, medium, thick, n pixels (même syntaxe) border seulement avec 3 arguments successifs : la largeur, le style et la couleur (le plus utilisé). width, height permettent de définir respectivement la largeur et la hauteur d&#39;un bloc

Autres exemples :

.p {background-color: yellow ; width:200} h1 {bakground-image:url();background-repeat:no-repeat;}

Remarque : quand on utilise des couleurs, il faut savoir que 5 à 10% des visiteurs distinguent mal les couleurs.

Ceci n&#39;est pas une liste exhaustive, il y a  encore d&#39;autres propriétés : font-style définit un style (italique par exemple).

text-decoration permet de présenter le texte de l&#39;élément biffé (line-through), souligné (under-line), surligné (over-line) ou clignotant (blink). Exemple : p {text-decoration: underline} text-transform permet le passage de majuscules (uppercase) en minuscules (lowercase)

3  Exercices immédiats

Quand on donne une valeur a une propriété, doit-on utiliser des guillemets ?

Qu&#39;apporte la propriété backgound-repeat ? Sur quels éléments s&#39;applique-t-elle ?

Laquelle de ces syntaxes CSS est correcte?

-  body:color=black

-  {body:color=black(body}

-  body {color: black} - {body;color:black}

Comment insérer un commentaire dans une "partie" CSS?

// Ceci est un commentaire //

&#39; Ceci est un commentaire  &#39;

/* Ceci est un commentaire */ // Ceci est un commentaire

Comment ajouter une couleur de fond pour tous les éléments h1 de votre page ? {background-color:#FFFFFF} h1 {background-color:#FFFFFF} all.h1 {background-color:#FFFFFF}

Comment changer la couleur de texte d&#39;un élément textuel ?  text-color:    text-color= color:  fgcolor:

Quelle est la syntaxe correcte pour mettre en gras le contenu de l&#39;élément

?

p {text-size:bold}   p {font-weight:bold}

Comment changer la marge de gauche d&#39;un élément?

- text-indent:               - margin:                     - indent:                      - margin-left:

4   Ressources : index des principales propriétés

Toutes les propriétés en CSS ont une valeur par défaut.

Guide de références

Propriété

Valeurs                                     Description

BACKGROUND

background-color          Définition des caractéristiques du fond d’écran background-image         Répétition : repeat-x, repeat-y, no-repeat background-repeat   Position d&#39;une image de fond : taille, pourcentage, background-position            top, left …

BORDER

border-width, border-style          Définition de l&#39;ensemble des caractéristiques border-color, ..-top, … spacing   d&#39;une bordure right, , … top-color, top-style, …

BOTTOM

Taille, Pourcentage, auto           Spécification de l&#39;alignement par rapport au bas

CAPTION-SIDE

top, bottom, left, right                 Définition d&#39;une légende pour un tableau

CLEAR

none, left          Spécification du comportement d&#39;un élément par right, both            rapport à un boîte flottante

CLIP

auto      Définition d&#39;une région de découpage pour Forme           l&#39;affichage d&#39;un élément

COLOR

Couleur                                     Spécification d&#39;une couleur de texte

DIRECTION

ltr, rlt                                         Spécification de la direction du texte

DISPLAY

none, inline       Définition de l&#39;affichage des éléments block, list-item run-in, compact marker, table

inline-table, table-column-group

table-column table-cell table-caption

EMPTY-CELLS

show hide

Définition des cellules vides

FLOAT

left right

none

Définition du flottement des éléments

FONT

.

/ , caption status-bar

Définition des caractéristiques de la police

FONT-FAMILY

nom_de_la_police nom_famille_police, nom_police_générique

Définition de la famille de la police

FONT-SIZE

xx-small, x-small small, medium

large, x-large, x-large Taille, Pourcentage

Définition de la taille de la police

FONT-STYLE

normal

italic

oblique

Définition du style de la police

FONT-VARIANT

normal

italic

oblique

Définition de caractères en petites majuscules

FONT-WEIGHT

normal, bold, bolder, lighter 100 à 900

Définition de l&#39;épaisseur des caractères

HEIGHT

auto, Longueur, Pourcentage

Définition de la hauteur d&#39;un élément

LEFT

Taille, Pourcentage, auto

Positionnement d&#39;un élément par rapport à la gauche de la fenêtre

LETTER-SPACING

normal, Taille

Définition de la taille de l&#39;espace entre les lettres

LINE-HEIGHT

normal, Nombre Longueur, Pourcentage

Définition de la hauteur des lignes

LIST-STYLE

list-style-type list-style-position list-style-image

Définition du style de puces d&#39;une liste

LIST-STYLE-IMAGE

Adresse URL none

Définition d&#39;une image pour les puces d&#39;une liste

LIST-STYLE-POSITION

inside outside

Spécification de la position de la liste

LIST-STYLE-TYPE

disc, circle, square

decimal

lower-roman, upper-roman lower-greek, lower-alpha lower-latin, upper-alpha upper-latin, hebrew, etc… none

Définition du type de puces d&#39;une liste

MARGIN

Taille, Pourcentage, auto

Définition des marges d&#39;un élément

MAX-HEIGHT MAX-WIDTH

auto, Longueur, Pourcentage

Définition d&#39;une hauteur, largeur maximum pour un élément

MIN-HEIGHT MIN-WIDTH

Longueur

Pourcentage

Définition d&#39;une hauteur, largeur minimum pour un élément

OVERFLOW

auto, visible, hidden, scroll

Définition du comportement d&#39;un contenu en cas de dépassement

PADDING

Taille, Pourcentage

Définition de l&#39;espace de remplissage

PAGE

auto

Identificateur

Spécification d&#39;un type particulier de page

PAGE-BREAK-AFTER

auto, always, avoid, left, right

Définition d&#39;un saut de page après (avant)

PAGE-BREAK-INSIDE

auto avoid

Définition d&#39;un saut de page à l&#39;intérieur

PAUSE

Temps Temps

Pourcentage Pourcentage

Définition d&#39;une pause

PAUSE-AFTER

Temps

Pourcentage

Définition d&#39;une pause après

PAUSE-BEFORE

Temps

Pourcentage

Définition d&#39;une pause avant

PLAY-DURING

Adresse URL

Adresse_URL mix Adresse_URL repeat auto, none

Lecture d&#39;un fichier audio en fond

POSITION

static, relative absolute, fixed

Définition de la position d&#39;un élément

QUOTES

Chaîne de caractères none

Définition des guillemets

RIGHT

Taille, Pourcentage, auto

Positionnement d&#39;un élément par rapport à la droite de la fenêtre

SIZE

auto, Taille, portrait landscape

Définition de la taille d&#39;un élément

TABLE-LAYOUT

auto, fixed

Définition du type d&#39;affichage d&#39;un tableau

TEXT-ALIGN

left, right, center, justify

Spécification de l&#39;alignement du texte

TEXT-DECORATION

none, underline, overline line-through, blink

Définition du type de décoration du texte

TEXT-INDENT

taille, pourcentage

Définition de l&#39;indentation d&#39;un texte

TEXT-SHADOW

none, {Couleur Taille_à_droite

Taille_en_bas rayon,

Couleur Taille_à_droite

Taille_en_bas rayon}

Définition d&#39;un ombrage du texte

TEXT-TRANSFORM

none, capitalize uppercase, lowercase

Spécification de la casse du texte

TOP

Taille, Pourcentage, auto

Positionnement d&#39;un élément par rapport au haut de la fenêtre

VERTICAL-ALIGN

baseline, sub, super, top, text-

Alignement vertical du texte

top, middle, bottom, text-bottom, Longueur, Pourcentage

VISIBILITY

visible, hidden, collapse             Définition de la visibilité d&#39;un élément

VOLUME

Nombre, Pourcentage    Définition du volume sonore silent, x-soft

soft, medium, loud, x-loud

WHITE-SPACE

normal, pre, nowrap                   Définition d&#39;un espace blanc

WIDOWS

Nombre entier                            Spécification du nombre de lignes en haut de la page

WIDTH

auto, Longueur, Pourcentage     Définition de la largeur d&#39;un élément

WORD-SPACING

normal, Taille                            Définition de la taille de l&#39;espace entre les mots

Z-INDEX

auto      Définition d&#39;un niveau de l&#39;élément dans la pile Nombre entier            d&#39;affichage

Sites intéressants

Document sur les propriétés CSS

III.6 Le système des boites

1  Génération de boites

La manière dont les boîtes s&#39;agencent pour composer le rendu graphique d&#39;une page Web dépend de

•    de données « extérieures » :

1.    l&#39;organisation du document HTML, c&#39;est à dire la succession des éléments générateurs de boîtes ;

2.    des dimensions déterminées : la taille de la zone d&#39;affichage (la fenêtre), la taille des images …

•    des facteurs CSS propres :

3.    le type de boîtes  : bloc, en ligne, en enfilade ;

4.    le flux dans lequel sont placées les boites

2  Les boites

Comme on l&#39;a vu, une boîte CSS est constituée :

•      d&#39;un contenu (le texte d&#39;un paragraphe par exemple) ;

•      d&#39;un rembourrage (padding) : l&#39;espace entourant le paragraphe) ; •   d&#39;une bordure (border) : encadrement du paragraphe ;

•      d&#39;une marge (margin) : espace entourant le tout.

Il y a plusieurs types de boites dont les principaux sont les boites en ligne et les boites bloc.

*    Les principaux éléments créant des boîtes en ligne sont : l&#39;élément span ; le lien a ; l&#39;image img.

*    Les principaux éléments créant des boîtes bloc sont : div ; les titres h1, h2, h3, h4, h5, h6 ; le paragraphe p ; les listes et éléments de liste ul, ol, li, dl, dd ; le bloc de citation blockquote ; le texte pré-formaté pre ;

Les propriétés CSS permettent de déterminer :

? les dimensions de la zone de contenu, son arrière-plan (image, couleur) et sa couleur d&#39;avantplan ;

? les dimensions, la couleur et le style des bordures ; ? les dimensions de la zone de remplissage ; ? les dimensions de la marge.

En CSS2, les positions et les tailles d&#39;un grand nombre de boîtes sont calculées en fonction des bords d&#39;une boîte rectangulaire ; on l&#39;appelle un bloc conteneur. La racine de l&#39;arbre du document génère une boîte qui fait office de bloc conteneur initial pour les constructions subséquentes. On peut spécifier la largeur (ou la hauteur) du bloc conteneur initial de l&#39;élément racine avec la propriété width (height). Quand celle-ci a la valeur "auto", c&#39;est l&#39;agent utilisateur qui fournit cette largeur (hauteur) initiale.

3  Les boites en flux normal

Le flux normal , c&#39;est un traitement linéaire (dans l&#39;ordre d&#39;arrivée des balises) du contenu de la page. L&#39;alignement des boîtes bloc est vertical ; l&#39;alignement des éléments en-ligne dans les boîtes bloc est horizontal.

Prenons par exemple deux blocs différenciés par leur couleur  décrits en HTML par :

<p class="jaune">Une boîte jaune

Une boîte verte

et en CSS par

.jaune { background-color: #ffff00; } .verte { background-color: #00ff00; } Ceci donne :

Le navigateur traite successivement les deux éléments rencontrés. Comme il s&#39;agit d&#39;éléments de type bloc, il aligne la marge gauche de chaque élément sur la marge gauche de l&#39;élément conteneur, c&#39;est à dire ici le bloc conteneur initial.

Par défaut, les boîtes de type en-ligne sont affichées dans une succession horizontale. Prenons par exemple deux portions de texte différenciées par leur couleur  décrites en HTML  par :

<span class="jaune">Une boîte jaune

Une boîte verte

Et en CSS  par :

.jaune { background-color: #ffff00;} .verte { background-color: #00ff00; } Ceci donne :

4  La propriété display

Elle sert à afficher ou non une boite et aussi à transformer une boite bloc en boite en ligne et réciproquement. Elle prend principalement les valeurs block, inline, none, list-item, table …

block force la génération d&#39;une boite block. Ce peut être utile pour transformer une séquence de liens en un menu avec des options encadrées. inline force la génération d&#39;une boite en ligne. Ce peut être utile pour afficher les éléments d&#39;une liste en une seule ligne. none empêche l&#39;affichage d&#39;une boite

5  Exercices immédiats

Présenter des boites en ligne avec marges, padding et bordures. Les valeurs des paramètres sont différentes pour chaque boîte.

Présenter des boites bloc avec marges et padding. Leurs textes ont des couleurs différentes

Afficher les articles d&#39;une liste sur une seule ligne et une série de liens dans des boites bloc.

A partir du code

Gros titre :

paragraphe en embuscade

comment afficher :   Gros titre : paragraphe en embuscade ?

III.7  Le positionnement en CSS

Objectif : savoir positionner les boites engendrées par les éléments de différentes façons dans la zone de visualisation.

1  Les schémas de positionnement

En CSS2, cinq schémas de positionnement peuvent déterminer l&#39;emplacement d&#39;une boîte avec les propriétés de style position ou float : le flux normal, la position relative, les flottants, la position absolue, la position fixe

Remarques :

Chaque boîte se voit attribuer une position vis-à-vis de son bloc conteneur.

Le bloc conteneur initial ne peut pas être positionné ou être flottant (c.à.d., les agents utilisateurs ignorent les propriétés &#39;position&#39;et &#39;float&#39;de l&#39;élément racine).

Les valeurs de la propriété position sont :

static (par défaut) : La boîte est placée selon le flux normal (haut/bas, gauche/droite .. pour nous européens de l&#39;ouest). Les propriétés &#39;left&#39;, &#39;top&#39;, &#39;right&#39;et &#39;bottom&#39;ne s&#39;y appliquent pas ;

relative : l&#39;emplacement de la boîte est calculé selon le flux normal. Ensuite la boîte est déplacée relativement à cette position dans le flux normal. Quand une boîte B a une position relative, l&#39;emplacement de la boîte suivante est calculé comme si B n&#39;avait pas été déplacée ;

absolute : l&#39;emplacement de la boîte (et éventuellement sa taille) est déterminé par les propriétés left, right, top, bottom. Celles-ci spécifient les déplacements en fonction du bloc conteneur. Les boîtes en position absolue se situent hors du flux normal. Elles n&#39;ont ainsi aucune influence sur la mise en forme des autres éléments de même degré de parenté. Bien que les boîtes en position absolue aient également des marges, celles-ci ne fusionnent pas avec d&#39;autres marges.

fixed (encore mal implémenté) : l&#39;emplacement de la boîte est calculé comme pour &#39;absolute&#39;, mais la boîte est en plus fixe par rapport à une référence donnée.

Pour les médias continus, par rapport à la zone de visualisation (la boîte ne bouge pas lors d&#39;un défilement). Pour les médias paginés, par rapport à la page, même si celle-ci apparaît dans une zone de visualisation (par exemple lors d&#39;un aperçu avant impression).

Les valeurs de la propriétés float (voir développement plus loin) sont left et right.

2  Les décalages des boîtes

On dit qu&#39;un élément est positionné quand la valeur de sa propriété position est autre que &#39;static&#39;. Ces éléments génèrent des boîtes positionnées qui sont disposées selon les quatre propriétés suivantes : top. right. bottom et left (décalage en haut, à droite, en bas ou à gauche).

Ces propriétés prennent les valeurs longueur, pourcentage ou auto : longueur: le décalage est représenté par un nombre fixe à partir du bord de référence ; pourcentage : le décalage est représenté par un pourcentage de la largeur du bloc conteneur (pour les propriétés left ou right) ou la hauteur de celui-ci (pour les propriétés top ou bottom). Si la hauteur du bloc conteneur n&#39;est pas spécifiée explicitement (par exemple celle-ci dépendant de la hauteur du contenu), les propriétés &#39;top&#39; et &#39;bottom&#39; sont censées avoir la valeur &#39;auto&#39; ;

auto : l&#39;effet de cette valeur dépend des propriétés associées, lesquelles ont aussi cette même valeur

&#39;auto&#39;

3  Le fonctionnement en position relative

Le positionnement relatif permet d&#39;inscrire un contenu en flux normal, puis de le décaler horizontalement et/ou verticalement. Le contenu suivant n&#39;est pas affecté par ce déplacement, qui peut donc entraîner des chevauchements.

Soit par exemple un positionnement relatif indice qui stipule un décalage vers le haut de 5 pixels et un arrière-plan jaune. En HTML :

Lorem

boîte en position relative

ipsum dolor

et en CSS :

.jaune {  position: relative;  bottom: 5px;  background-color: #ffff00;}  Ce qui donne

Pour illustrer le risque de chevauchement, ajoutons un décalage vers la droite. En CSS : .jaune {  position: relative;  bottom: 5px; left: 3em; background-color: #ffff00;} Ce qui donne :

Autre exemple avec div.

Texte de référence ……

Texte décalé deux fois de 20px par rapport au texte de référence

4  Le fonctionnement "flottant"

Une boîte flottante est retirée du flux normal, et placée le plus à droite (float: right) ou le plus à gauche (float: left) possible dans son conteneur. Le contenu suivant cette boîte flottante s&#39;écoule le long de celle-ci, dans l&#39;espace laissé libre. Exemple en HTML :

Une boîte jaune flottante

Une boîte verte doté d&#39;un contenu plus long…

et en CSS :

.jaune {  background-color: #ffff00; float: right; width: 100px; margin: 0;}

.verte {  background-color: #00ff00;}

Ce qui donne

Le navigateur place tout d&#39;abord la boîte jaune, alignée sur le bord droit de cette partie de notre page, puis reprend le cours normal du flux dans l&#39;espace laissé libre à sa gauche pour afficher la boîte verte. Le flux occupe tout l&#39;espace disponible: la boîte verte reprend donc toute la largeur de la page sitôt passée la limite inférieure de la boîte flottante jaune.

Une autre propriété clear peut interdire à un contenu d&#39;être adjacent à une boite flottante. Ses valeurs sont left, right, none (qui n&#39;impose pas de poursuite dessous, réglage normal). Exemple :

clear

<div style="float:left; margin-right:20px; margin-bottom:20px; border:solid

1px red; text-align:center; font-size:20pt; color:red">

Bloc
flottant
à gauche

Cette partie de place à droite du bloc flottante

Avec clear:left, le texte se replace en dessous du bloc flottant déclaré avec float.

5  Le fonctionnement en absolu

Une boîte en positionnement absolu peut être placée n&#39;importe-où dans le code HTML et s&#39;afficher à l&#39;endroit de votre choix. Ceci s&#39;avère très utile en particulier pour :

•      placer les menus de navigation en fin de page, pour améliorer l&#39;accessibilité de votre site en donnant un accès immédiat à son contenu dans les navigateurs textes, tout en les faisant apparaître en haut de page ou encore dans une colonne pour les navigateurs graphiques ;

•      créer plusieurs colonnes au positionnement indépendant de l&#39;ordre dans lequel elles se trouvent en HTML.

Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. Celui-ci peut-être :

•      une boîte elle-même positionnée (position relative ou absolue) ;

•      le bloc conteneur initial, à défaut de boîte positionnée, c&#39;est à dire en pratique le plus souvent la fenêtre du navigateur.

Définissons un conteneur verte en position relative et un positionnement absolu jaune :

.verte {  position: relative; background-color: #00ff00;  width: 15em;}

.jaune {  position: absolute;  top: 1em; right: 1em;  background-color: #ffff00;}

Et appliquons ces styles :

Boîte jaune en position absolue

Ce qui donne

Ménager un espace pour la boîte en position absolue

Inévitablement, la boîte en position absolue recouvre le contenu de notre paragraphe. Pour l&#39;éviter, dotons la boîte conteneur verte d&#39;un remplissage supérieur suffisant :

.verte { padding-top: 5em;}

Nous pourrions aussi bien fixer la largeur de la boîte jaune et doter le texte de la boîte verte d&#39;un remplissage à droite : .verte {  padding-right: 7em;}.jaune {  width: 4em;} Ce qui donne

Utilisation : une mise en page à trois colonnes

La position absolue offre donc une alternative aux flottants pour réaliser des mises en pages à plusieurs colonnes. Le cas typique est celui des trois colonnes dont voici le code :

En CSS :

.centre { margin: 1em 25%;}

.gauche {position: absolute;  top: 1em;  left: 1%;  width: 18%;} .droite {position: absolute;  top: 1em;  right: 1%;  width: 18%;}

En HTML :

Ce qui donne

6  Le positionnement fixe Eventuellementen seconde lecture

Comme dans un positionnement absolu, le contenu concerné est retiré totalement du flux. Mais il est cette fois positionné uniquement par rapport aux limites de la zone de visualisation, autrement dit la fenêtre du navigateur. Le défilement de la page n&#39;a aucun effet sur un contenu en position fixe.

Remarque : le positionnement fixe n&#39;étant pas reconnu par Internet Explorer 5 et 6, un positionnement absolu doit s&#39;y substituer dans ce navigateur. Le code est :

.fixe {  position: absolute;  top: 10px;  left: 10px;} html>body .fixe {  position: fixed;}

Le navigateur MSIE ne lira que la première définition de .fixe et ignorera la seconde car il ne comprend pas la syntaxe html>body. Les navigateurs supportant la position fixe liront les deux positionnements, mais le second se substituera au premier car il est placé après celui-ci dans la feuille de style.

Tout comme le positionnement absolu, le positionnement fixe est susceptible de provoquer des chevauchements. On emploiera donc des méthodes similaires pour l&#39;exploiter.

7  Autres propriétés (superposition, visibilité, dépassement)

Une propriété permet de rendre visible ou invisible une boite : respectivement visibility et hidden). Cette propriété est proche de display, mais contrairement à display :none, visibility :hidden met de côté la zone de contenu : elle ne l’ignore pas complètement.

Une autre, z-index,  permet de déterminer l&#39;ordre d&#39;empilement des éléments : 1, 2, 3 …. Le plus haut (donc visible) est celui d&#39;index le plus élevé.

Exemple :

ceci est le dessous

ceci est le dessus

Overflow contrôle la hauteur et la largeur d’un bloc avec les valeurs scroll, auto, visible ou hidden : elle définit ce qui se produit lorsque le contenu d’un champ dépasse les bords.

III.8  Les différentes sorties média (éventuellement en seconde lecture)

Objectif : savoir fournir une couche de présentation associant du contenu balisé à un média spécifique.

1  Les différents média

Une des propriétés les plus importantes des feuilles de styles est de spécifier comment un contenu est représenté sur divers média (papier, écran, lecteur braille, …). Ceux actuellement reconnus sont :

All

tous types de média

Aural

synthétiseurs vocaux

Braille

périphériques tactiles     et Embossed  imprimante Braille

Handheld

ordinateurs de poche

impression

imprimantes

Projection

vidéoprojecteur

Screen

écrans couleur

Tty

certains dispositifs tels que télex

Tv

téléviseurs

Par exemple, à l’aide d’une feuille de style aural, on peut « lire » une page web de vive voix à partir de son téléphone portable.

Remarques :

- un médium CSS est un ensemble de propriétés. Certaines de ces dernières peuvent être partagées en plusieurs média sans prendre les mêmes valeurs (exemple de font-size)

- il y a deux façons de d’indiquer les médias dans les feuilles de styles. Elles sont indiquées dans ce qui suit immédiatement.

2  Médiatisation à l’aide de l’attribut media dans une balise link

Une feuille de style va être appelée par une balise link qui va déjà préciser le médium visé grâce à la valeur de l’attribut media. . En voici un exemple :

Un lien vers les média cibles

<link rel="stylesheet" type="text/css" media="print" href="http://www.cours-gratuit.com/" />

<link rel="stylesheet" type="text/css" media="screen" href="http://www.cours-gratuit.com/" />

<link rel="stylesheet" type="text/css" media="aural" href="http://www.cours-gratuit.com/" />

Le corps du document sera affiché, imprimé ou entendu comme indiqué

dans la feuille de style respective.

L&#39;intérêt d&#39;une feuille de style pour l&#39;impression est d&#39;avoir une page imprimée sémantiquement claire et graphiquement sobre (on peut vérifier le résultat avec les options du menu Fichier : imprimer ou aperçu).

Remarque : si on déclare des feuilles de styles "alternate" avec un attribut title, elles peuvent être identifiées par le navigateur (Mozilla ou Firebird) et même appelées (respectivement option du menu Affichage / Feuille de style ou icône dans la barre d&#39;état).

3  Médiatisation avec une autre syntaxe CSS (en seconde lecture)

La directive @media permet de cibler différents média dans une feuille de style ou au sein d’une balise de style. Voici un exemple dans ce dernier cas :

Un lien vers les média cibles

L’impression se fera en noir sur blanc

dans la feuille de style respective.

Avec la directive @media, on peut non seulement définir le média selon le type de périphérique, mais aussi selon les caractéristiques de rendu : continuous (en flux comme une page web ou des paroles) ou paged (en pages distinctes comme pour l’impression), visual (pour tout ce qui est visualisable).

Remarque : on peut préciser l’impression avec une autre directive @page qui permet de définir par exemple la taille des feuilles de papier, la première page  … @page {size :21cm 29.7cm ;margin :2.5cm}

Autres exemples :

La directive @import ) permet de gérer  l’importation des feuilles de style. Elle s’inscrit soit dans une balise de style, soit dans une feuille externe comme suit : @import url ().

On peut utiliser deux éléments stylises différemment suivant le media de sortie :

@media screen { H1#first { position: fixed } }    ou @media print {   H1#first { position: static }}

4  Exercices immédiats

Quelle est la syntaxe HTML correcte qui désigne l&#39;importation d&#39;un fichier CSS?

-

-

Recent Posts

Voila voila