Cours webmaster : création et conception de site web
Création et conception de site web
Auteur : Alain Seigneur,
Droits de propriété intellectuelle : Alain Seigneur, UFR Mathématiques et Informatique Paris 5
Module offert au premier semestre en L2 et L3 de la licence MIA
Description du module
o Dernière date de la modification : 30 août 2006 (Version 4.0) o Volume de la formation : 18 heures de cours et 24 heures de TP o Contrôle des connaissances : un examen de TP (30%) + 1 projet final (70%) o Scénarisation : Présentiel (cours, TDM), contenu du cours en ligne o Objectifs : savoir concevoir et publier des pages web informatives et attrayantes.
o Résumé : Ce module offre un apprentissage du langage HTML et initie aux langages CSS et Javascript.
o Mots clés : HTML, XHTML, hyperlien, balise, tableau, formulaire, styles, CSS, Javascript
Feuille de route de la formation :
La navigateur de référence pour l'examen de TP et le projet final est Mozilla.
Merci de signaler à l'auteur les coquilles ou autres erreurs par courrier électronique
Pourquoi cet enseignement ?
§ Pour favoriser la maîtrise des technologies de l'information et de la communication qui permet à l'étudiant d'acquérir les savoir-faire indispensables à la poursuite d'études supérieures.
§ Pour amener l'étudiant à afficher sa personnalité et son savoir-faire à travers un média, le web, plus particulièrement à lui faire concevoir et publier un site web personnel.
§ Pour construire des sites web qui servent non seulement les intérêts de l'individu, mais aussi ceux des entreprises. Derrière, ce sont de nombreux métiers qui sont offerts : webmaster, webdesigner, graphiste, hébergeur, ..
§ Pour accompagner, en citoyen, l'entrée dans la société de l'information qui voit naître de nombreuses applications internet dans la vie courante comme dans la vie professionnelle (téléprocédures, cours en ligne, recherche d'emploi sur le web, ).
Plan du cours
L'environnement de travail de l'étudiant
I Introduction
Qu'est-ce qu'un site web ?
Les étapes de la création d'un site
Des pages web aux applications web
II Les premiers pas en HTML, plutôt en XHTML
Infrastructure et premiers éléments du langage HTML
Ecrire et tester du code HTML
Les images et les liens
III La représentation visuelle d'un document
Définitions : le langage CSS et les règles de style
L'intégration des styles et les propriétés de style
Le système de boites et le positionnement
IV Plus avant avec HTML
Les tableaux
Les formulaires
V Premières applications de Javascript
Le langage Javascript Objets et évènements
Applications aux formulaires
VI Conception de sites web
Conception adaptée au public et à l'écran
Structuration et navigation
Publication d'un site web
L'environnement de travail de l'étudiant
L'étudiant est positionné dans un environnement client-serveur. Le modèle client-serveur est la mise en présence d'un ordinateur-serveur (plus puissant et à l’écoute en permanence) et d'un ou plusieurs ordinateurs-clients (ordinateurs des étudiants en réseau).
Les processus serveurs sont souvent appelés "démons" (programmes ftpd, httpd) qui réalisent respectivement les services FTP, HTTP, .
Le poste utilisateur (étudiant) possède deux systèmes d'exploitation (Linux et Windows). Il est en réseau TCP/IP et possède sa propre adresse IP (c'est un ordinateur du réseau Internet) que l'on peut obtenir en mode console sous Windows ou sous Linux (ipconfig). La politique informatique de l'UFR
consiste à mettre toutes les applications sur le poste étudiant (client FTP, navigateur, suite bureautique, ) et le "compte" de l'étudiant sur un poste serveur (diamant en l'occurrence).
Chaque étudiant inscrit administrativement à l’université dispose automatiquement d’un compte informatique créé après la validation de l’inscription. Chaque compte est unique durant toute la période d’études et acessible par login (fourni par l'UFR de type h_+5 chiffres) et mot de passe (secret, choisi par l'étudiant). Le compte informatique permet d'accèder aux ordinateurs de l'UFR et à l’ensemble des services informatiques proposé (services de l'internet, bureautique, espace fichiers, espace web stocké dans le dossier spécifique public_html, …).
Dans le cadre de ce cours, on se restreint principalement à des échanges avec des serveurs web pour nous envoyer des pages web.
Les outils logiciels dont a besoin pour cette formation
• des navigateurs (Internet Explorer et Mozilla) pour lancer des requêtes via la barre d'adressage et pour interpréter le code de la page html renvoyée.
• des éditeurs pour le code html à écrire (gedit, bloc-notes, ) ou d'autres plus spécifiques
• un logiciel de traitement d'images (Gimp)
• un logiciel de compression et décompression (Powerarchiver)
• une suite bureautique (OpenOffice)
• un logiciel ftp (WinScp3, gftp)
Des ressources à disposition
• références pour le langage HTML : ,
• cours d'html : , et l'excellent
• un « dictionnaire » html et javascript : ,
• un cadre juridique et éthique :
• un dictionnaire technique :
• un guide pour les actions de recherche et de référencement :
• des règles pour la netiquette :
• une encyclopédie wikipedia :
• un moteur de recherche Google , sa recherche avancée et ses autres services
L'approche projet
On a essayé dans cette formation d'avoir une attitude pré-professionnelle, c'est-à-dire de sensibiliser l'étudiant au monde de l'entreprise qui a ses exigences de qualité, d'adaptabilité et d'autonomie, de relationnel aussi.
Pour aider à cette "autonomie", l’apprentissage est organisé dans un environnement spécifique : vous avez des outils et des ressources, vous travaillez à un projet final. Un projet se définit à travers un cahier de charges à respecter. Ce dernier inscrit le projet dans son contexte (l'existant en particulier), décrit son objectif, présente ses fonctionnalités (ce qu'il apporte), décrit les aspects techniques de sa réalisation dans les délais prévus [CF Annexes].
La nétiquette
Avant de vous plonger rapidement dans la publication de pages web, l'étudiant doit connaître un minimum de règles quant au contenu, au statut estudiantin, au fournisseur d'accès. En voici quelques unes :
§ Souvenez-vous que tous les services trouvés sur le web appartiennent à quelqu'un d'autre. Les gens qui paient les factures établissent les règles qui en régissent l'usage. L'information peut être libre ou peut ne pas l'être ! Vérifiez bien.
§ Ne supposez qu'aucune information que vous trouvez est à jour et/ou exacte. Souvenez-vous que les nouvelles techniques permettent à n'importe qui de devenir un éditeur, mais tout le monde n'a pas découvert les responsabilités liées à la publication.
§ Souvenez-vous que, à moins d'être sûr qu'une technique de sécurité et d'authentification est utilisée, toute information que vous soumettez à un système est transmise "en clair" sur l'Internet, sans protection contre les "renifleurs".
§ Comme l'Internet embrasse le globe, souvenez-vous que les services d'information peuvent refléter des cultures et styles de vie franchement différents de ceux de votre communauté. Des choses que vous trouvez choquantes peuvent provenir de régions où elles sont acceptables. Restez sans parti pris.
§ N'utilisez pas le site FTP de quelqu'un d'autre pour déposer des affaires que vous désirez voir repris par d'autres gens. Cela s'appelle du "dumping" et n'est pas un comportement acceptable.
§ Lorsque vous avez des problèmes avec un site et demandez de l'aide, veillez à fournir autant d'information que possible afin d'aider à résoudre le problème.
§ Lorsque vous installez votre propre service d'information, tel qu'une page d'accueil, veillez à vérifier avec le gestionnaire de votre système local, en quoi les règles de conduite locales sont concernées.
I Introduction
La création et la conception d'un site web est un processus qui implique plusieurs étapes qui peuvent, suivant l'importance du site, mettre en oeuvre des moyens importants et des compétences diverses.
I.1 Qu'est-ce qu'un site web ?
1 Définition
Un site Web est un ensemble de pages web et d'éventuelles autres ressources hyperliées en un ensemble cohérent, pouvant être consulté avec un navigateur à une adresse web donnée.
Un site est publié (entendons par là qu'il est mis en ligne sur un serveur web) par un propriétaire (une entreprise, une administration ou un particulier). Le propriétaire du site choisit l'adresse Web à laquelle le site est accessible. Il peut créer et maintenir le site à jour lui-même ou faire appel à une entreprise spécialisée, une agence web.
2 Les technologies mises en oeuvre pour un site web
Protocole de communication : HTTP, HTTPS
httpest un protocole qui permet le transfert de fichier (essentiellement au format HTML) localisé 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 utilisée en informatique pour représenter des données sous forme de nombres binaires. C'est une convention utilisée pour représenter des informations représentant un texte (UTF8, ASCII), une image (GIF, JPEG, et PNG), un son, un fichier exécutable. Lorsque ces données sont stockées dans un fichier (unité informationnelle stockée), on parle de format de fichier.
On distingue un format dont la spécification est publiquement accessible, un format ouvert (créé dans un but d'interopérabilité) d'un format propriétaire que seul un logiciel spécifique est capable d'exploiter (MSWord, PDF)
Formats de documents : HTML, XHTML, CSS, Javascript, .
3 Histoire
Tim Berners-Lee, l'inventeur du World Wide Web, a mis en ligne le tout premier site internet en 1991, faisant de lui le tout premier concepteur de site (web designer). Il utilisait le maillage de l'internet, non pas uniquement à travers ses différents chemins (gain en tolérance de panne) mais pour ses nœuds. Il proposait une ramification de documents stockés sur des serveurs et accessibles par des liens hypertexte (dispositif offrant une organisation non linéaire des informations).
Il a créé un système standard basé sur HTML,http et l'hypertexte. HTML est un dialecte du langage existant mais très complexe SGML (Standard Generalized Markup Language) véhiculant deux idées fondamentales : une approche descriptive, une structuration par classes de documents.
HTML est beaucoup plus simple : il structure grossièrement un document (titres et paragraphes), intègre des hyperliens et en permet une représentation à l'aide d'un navigateur.
Au fur et à mesure que l'Internet et la conception de site progressaient, le langage qui formait les pages, HTML devint plus fourni et flexible. Un nouvel élément, les tableaux, dans lesquels on peut afficher des données, furent vite détournés de leur objectif initial et furent utilisés comme moyen de mise en page.
Avec l'apparition du CSS (1996) et des feuilles de styles, la mise en page avec les tableaux fut vite considérée comme obsolète. Les technologies modernes qui utilisent des bases de données ont diversifié les outils de conception de site.
Javascript a été créé en 1995. C'est un langage de script côté client dont l'objectif est de manipuler de façon simple des objets fournis par une application hôte (exemple : contrôle des données saisies dans des formulaires).
L'apparition de Flash (1996 pour la création d'animations vectorielles interactives, Macromédia) a également changé l'apparence d'Internet, en offrant de nouvelles cartes aux concepteurs de sites. Toutefois, Flash est beaucoup plus restrictif que le HTML car c'est un format propriétaire nécessitant un plug-in pour être affiché.
Une technique assez récente appelée le codage à distance a permis une utilisation d'Internet de façon plus dynamique, sans nécessiter de plug-ins ou d'application spécialisées. Le chef de file de ces technologies est AJAX, mais ce n'est pas la seule technologie existante.
4 Les constituants des pages et le périmètre du contenu de ce cours
§ La structure de contenu de la page va être décrite en XHTML
§ La présentation (l'affichage) est assurée via des feuilles de style CSS.
§ Des objets multmédias peuvent être ajoutés et intégrés (GIF, JPG, PNG, FLASH)
§ Une première manipulation de scripts côté client à l'aide de Javascript
Ce cours se limite à une formation au langage HTML, englobant un langage de script (Javascript) et l'utilsation de feuilles de styles CSS. La programmation côté serveur (Java, PHP, ) ne relève pas de cet enseignement.
I.2 Les étapes de la création
En fonction du type de site, du contexte et des moyens disponibles pour le mettre en oeuvre certaines de ces étapes peuvent être optionnelles voire inutiles.
§ Réflexion sur l'objectif du site, sa rentabilité, les moyens financiers à engager
§ Réflexion sur l'autonomie souhaitée et le type de moyens humains pour faire la mise à jour.
Choix éventuel d'une agence web (qui peut s'occuper de tout ce qui suit).
§ Dépot d'un nom de domaine, choix éventuel d'un hébergeur.
§ Etablissement d'une structure de pages (contenu éditorial).
Choix et installation d'un système degestion de contenu (comme SPIP).
§ Mise au point d'une charte graphique.
§ Optimisation : préparation du site pour les moteurs de recherche.
Référencement : on doit le préparer dès le début et l'affiner à la dernière étape..
L'accessibilité comme le référencement du site sont à prendre en compte à chaque étape à partir de la mise au point de la structure des pages.
1.3 Des pages web aux dernières applications web
La métaphore de la page
Il y a plusieurs types de pages web : des sites institutionnels, des sites d'e-commerce éléctronique, des annuaires et moteurs de recherche, des messageries web, des forums internet, des wikis, des blogs,
Un wiki est un système de gestion de contenu de site web qui rend les pages web librement et également modifiables par tous les visiteurs autorisés. Les wikis sont utilisés pour faciliter l'écriture collaborative de documents avec un minimum de contrainte
Un blog est un site web sur lequel une ou plusieurs personnes s'expriment de façon libre, sur la base d'une certaine périodicité. Son expression est décomposée en unités chronologiques ; chaque unité est susceptible d'être commentée par les lecteurs. "Blog" est un mot-valise (néologisme), né de la contraction de «» (c'est-à-dire carnet de bord Web.) Contrairement au site personnel, le blog bénéficie d'une structure éditoriale pré-existante, sous la forme d'outils de publication plus ou moins formatés.
Pour les sites informatifs, les pages web se succèdent les unes aux autres dans la logique de l'hypertexte : un navigateur web contacte un serveur web, lui demande une page et ce dernier lui renvoie.
Une autre approche est celle d'envoyer des informations, via un formulaire par exemple, au serveur qui les traite à l'aide d'une application PHP (remote scripting). C'est le cas des sites de e-commerce. L'information est personalisée, mais toujours reçue à travers des pages. Ce type d'applications, certes fort répandues, est limité par la latence et la fiabilité du réseau, par le fait que la requête est toujours à l'initiative de l'utilisateur (le protocole HTTP de requête / réponse est à sens unique). Mais on peut aller plus loin en ouvrant une session (le serveur mémorise des informations),
On vous propose ici comme ouverture technologique à ce cours de repenser une application web, de décrire très sommairement un nouveau mode de conception. Aussi les quelques paragraphes en italiques qui suivent « Ajax et le client riche »ne sont pas au programme.
Ajax et le client riche
Un client riche est un client riche en ce sens qu'il offre une variété d'interactions (méthodes de saisie en particulier) qu'il est intuitif et réactif. Un exemple de bonne qualité d'interaction est le tableur (ou encore le traitement de texte). Mais ce n'est pas un client riche : la logique et le modèle des données sont enfermés dans un environnement (du moins jusqu'à l'arrivée d'XML).
Une réponse aux limites des applications web dont nous avons parlé serait de rendre les réponses aux requêtes indépendantes de l'activité réseau par une interaction asynchrone.
Prenons un exemple de la vie quotidienne, le début de la journée : réveiller les enfants, leur préparer le petit déjeuner, s'habiller soit-même et partir Vaste programme !
Première option
La mère reste à côté des enfants pour surveiller le « décollage ». Une fois la toilette et l'habillement fait, elle prépare le déjeuner et les fait manger, s'habille pendant qu'ils mangent et avale son café. Départ tendu ! Les enfants font de la résistance passive, la mère perd sont temps, s'habille mal et se brûle en prenant le café !!
Deuxième option
Les enfants s'habillent seuls, la mère prend sont temps pour s'habiller et préparer le petit déjeuner. Ensuite tous déjeunent ensemble. Départ organisé.
Où est la différence ? En termes informatiques, on désynchronise les activités : les enfants se préparent seuls et la mère accomplit ses tâches (les enfants se débrouillent en arrière plan). Les enfants seront prêts quand ils demanderont leur petit déjeuner
Une solution offrant un client riche se développe vite : c'est AJAX.Asynchronous Javascript And XML, est un acronyme désignant une méthode informatique de développement d'application web (la mise à disposition de services affichés dans des fenêtres).
Ajax n'est pas une technologie monolithique mais un terme qui évoque l'utilisation conjointe d'un ensemble de technologies déjà couramment utilisées sur le Web, incluant plus particulièrement celles qui nous intéressent pour cette formation :
§ XHTML pour la structure sémantique des informations ;
§ CSSpour la présentation des informations ;
§ DOMet Javascript pour afficher et interagir dynamiquement avec l'information présentée ;
§ XML et XSLT qui seront vu en master 1ère année
§ et le point fort XMLHttpRequest pour échanger et manipuler les données de manière asynchrone avec le serveur web donc traité ici car nous restons côté client.
Pour information,
DOMprésente la structure des pages web sous forme d'arbre dont les noeuds peuvent être manipulés par Javascript. Ainsi une application Ajax peut modifier l'interface utilisateur « à la volée » en redessinant les éléments visuels de la page affichée. XMLHttpRequest permet d'e récupérer des objets de données sur le serveur web dans le cadre d'une activité en arrière plan. Le format de données est XML (ou bien HTML « xmlisé ») ou encore du texte simple.
Les applications AJAX sont alors plus réactives, la quantité de données échangées entre le navigateur et le serveur HTTP étant fortement réduite. Le temps de traitement de la requête côté serveur est également légèrement réduit, une partie du traitement étant réalisé sur l'ordinateur d'où provient la requête. En contrepartie, le chargement de la première page peut être pénalisé si l'application utilise une bibliothèque AJAX volumineuse. De plus le référencement n'est plus assuré compte tenu que la page est générée en ligne. L'accessibilité pose aussi problème.
Pour illustrer ce cours, nous avons choisi une page web interactive personnelle, - un bureau qui peut être ouvert en n'importe quel point de la planète et à partir de n'importe quel navigateur -, conçu avec pouvez vous même le tester et l'utilser en vous connectant sur
Ce qu'on veut montrer ici, c'est qu'avec des technologies simples (XHTML, CSS, Javascript) que nous allons découvrir, on peut construire des applications puissantes.
Regardons le code source de cette page à deux endroits : tout ce dont nous avons parlé y est.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Netvibes
..
..
Voici du bon grain HTML à moudre .
II Les premiers pas en HTML, plutôt en XHTML
II.1 Infrastructure et premiers éléments du langage HTML
HTML est un langage de balisage universellement reconnu et diffusé. Il se distribue en flux « texte » écrits à partir d’un jeu de caractères particuliers.
1 A quoi sert HTML
Pour publier de l'information avec la distribution la plus large possible, on a besoin d'un langage universel que tous les ordinateurs puissent comprendre via une application : le navigateur.
HTML est ce langage hôte. Il donne les moyens de :
• publier des documents en ligne
• retrouver de l'information en ligne via un dispositif de cliquage et de liens
• concevoir des formulaires pour conduire des transactions avec des services éloignés (comme une opération de réservation)
• d'inclure des scripts
• d'inclure des applications directement dans un document (téléchargement par exemple)
Un document HTML est un flux de données textuelles, éventuellement combiné avec d'autres flux de données qu'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" vers cette image.
Undocument, étymologiquement, est un support pour l'instruction, plus généralement, pour l'information (pour se documenter). Il a uneidentité(pour la traçabilité), unfond(de l'information "pure"), uneforme(papier par exemple) et unformat(pour nous ici HTML).
2 HTML, langage de balisage et son dernier avatar XHTML
HTML est un langage de balisage (de marquage, markup language) recommandé par le World Wide web Consortium (W3C).
Le contenu textuel d'un document HTML est enrichi par des balises de la forme . Ce marquage avec des chevrons est une directive que le navigateur doit interpréter de manière appropriée.
Le contenu textuel renferme les données, le balisage apporte les métadonnées. Ces dernières sont des informations qui permettent la description de tous types de données : la nature, la définition, l'organisation, la présentation, ..
Syntaxiquement, une balise se présente dans le document entre les chevrons < et >.
Certaines balises délimitent une portion de texte ; dans ce cas elles sont formées d'une balise ouvrante et d'une balise fermante</portion>. La portion délimitée (balises comprises) se nomme un élément. Exemple
GROS TITRE
D'autres balises sont "vides", en ce sens qu'elles n'encadrent pas un contenu textuel mais pointent vers un contenu autre, par exemple une image /> ou un passage à la ligne
. Dans ce cas, le standard HTML préconise l’emploi d’un marquage à la fois ouvrant et fermant, avec un espace avant le caractère barre oblique (comme indiqué ci-dessus).
Chaque balise a un nom, éventuellement ou obligatoirement précisé par des attributs. Dans l'exemple :img est le nom de la balise, src est le nom de l'attribut obligatoire de la balise img, est la valeur de l'attribut src qui est en même temps le nom du fichier contenant l'image.
Le langage HTML a considérablement évolué depuis sa première formalisation (1992) et a montré ses
limites : il a méprisé la notion de classes de documents, il a sous-estimé la complexité des informations à représenter dans un document, il est tombé dans le piège de la compatibilité pour devenir très flexible sinon très tolérant.
Concluant que la meilleure façon d'avancer avec HTML (qui restera encore longtemps présent sur le web) consiste à le reconstruire en tant qu'application du langage XML, le W3C a créé la norme XHTML en 2000. Sa version 1.0 étend HTML 4.0 et c'est sa syntaxe que nous retiendrons pour l'écriture d’un code correct :
- le document commence par une DTD « déclaraction de type de document » : DOCTYPE .
- les attributs ont toujours une valeur suivant un signe = et placée entre guillemets
- les attributs sont séparés du nom de la balise, et séparés entre eux, par un espace
- les balises sont bien imbriquées (derrière, il ya la
- les balises et les attributs sont écrits en minuscules
- toute balise ouverte doit être fermée même celle qui n'a pas de fermeture (/>)
- l'attribut id prend de l'importance comme identifiant et tend à remplacer l'attribut name.
- Pour tous les caractères spéciaux (&, < …) destinés à être interprétés (comme le symbole inférieur par exemple), on utilise les "entités caractères" correspondantes(& , < …).
On peut se trouver dans des situations très particulières, par exemple
• pour insérer un caractère particulier le signe inférieur<dans un cours de maths. Il va falloir le déguiser pour qu'il ne soit pas pris comme le chevron ouvrant une balise. On l'insère commeréférence d'entité caractèreen écrivant<
• pour afficher une lettre particulière. On va l'insèrer dans uneentité numériquemarquant sa numérotation (décimale ou hexadécimale) dans un jeu de caractères unicode. Le caractère cyrillique pour le i majuscule estИ
Conversion de HTML en XHTML
Les syntaxes de HTML et XHTML sont très proches, celle de XHTML héritant de XML l'obligation de réaliser des documents bien formés, vérifiant en particulier les règles énoncées ci-dessus et la conformité à une DTD (définition de Type de Document). Ce qui implique la déclaration suivante
(toujours la même) en haut du document
suivi d'un élément racine précisant un espace de nom et une langue.
3 Structure d'un fichier HTML
Un fichier HTML commence par la balise particulière et se termine par la balise .
L'intérieur de ces balises englobantes est structuré sur deux niveaux :
• d'abord l'en-tête compris entre les balises et qui contient o le titre (title) du document,
o des informations méta-textuelles (des informations sur le document) introduites par une balise ,
o des scripts javascript, des styles, des liens vers d'autres fichiers de styles ou de scripts
• le corps du document compris entre les balises et où réside (en principe tout) le contenu du document.
Remarques :
o Ce qui figure dans le corps du document est visible dans la fenêtre d'affichage.
o Le titre, lui, vient s'inscrire dans la barre de titre de la fenêtre du navigateur o HTML est un conteneur pour d'autres langages (Javascript, CSS, PHP …) On arrive ainsi à l'ossature classique d'un document HTML :
</b>Ossature d'un document html<b>
<meta< b=""> name="keywords" content="HTML, balise, tableau, cadre" />
… ici le contenu du document détaillé par la suite
Remarques
- Les deux premières lignes ne sont pas à apprendre par coeur : elles sont à recopier.
- Le contenu de la balise n'est pas considéré comme du contenu textuel : il est affiché comme titre de la fenêtre du navigateur ou encore comme en-tête de feuille papier.
4 Caractères et encodages
Un document HTML contient du texte constitué à partir d’un jeu de caractères bien défini (si ce n’est que par défaut !). Les jeux utilisés sont le plus souvent une extension du code ASCII sur 7 bits qui recouvre 128 caractères. Le plus connu est Unicode qui représente tous les caractères écrits du monde et qui a deux encodages principaux : UTF-8 (choisi par défaut) sur un à quatre octets ; UTF-
16 sur deux octets. CF. ou encore une section concerne plus spécifiquement l'euro :
Un texte sur le web doit être transporté et reconnu sous sa forme initiale. Ce qui nécessite de donner à chaque caractère, à travers des tables de correspondances (encodages), un numéro "universel".
Par exemple, nos navigateurs sont pré-adaptés à la langue française et, quand on entre du code HTML, on ne ressent pas le besoin d'encoder les accents é, è, à. Si on le fait (par exemple avec l'encodage ISO - 8859 -1), le navigateur étranger fera la conversion. Si on ne le fait pas, sur un navigateur pré-adapté en anglais par exemple, le texte accentué ne s 'affichera pas comme souhaité.
Pour préciser l'encodage en HTML, on utilise une balise meta :
"text/html ; charset="iso-8859-1" />
5 Codage des couleurs
Une couleur qui s'affiche sur l'écran est le résultat d'un mélange de trois couleurs (canaux chromatiques) : rouge, vert et bleu (RVB, RGB en anglais). Chacune d'elles a une plage d'intensité codée sur un octet, c'est-à-dire allant de 0 (absence de couleur) à 255 ("plein phares").
Remarque : si les trois couleurs sont à zéro, on obtient du noir. Si tout est illuminé (les 3 couleurs à 255), on obtient un blanc éclatant.
Le langage HTML utilise des valeurs hexadécimales pour exprimer les trois couleurs fondamentales (RVB). Ainsi, les valeurs chromatiques sont représentées par 6 chiffres hexadécimaux (les deux premiers pour le rouge, …) précédés du symbole # (dièse).
On peut nommer les couleurs et les navigateurs reconnaissent les 16 couleurs ci-dessous.
white |
FFFFFF  |
silver |
C0C0C0 |
gray |
808080 |
black |
000000 |
red |
FF0000  |
maroon |
800000 |
yellow |
FFFF00 |
lime |
00FF00 |
green |
008000  |
olive |
808000 |
aqua |
00FFFF |
teal |
008080 |
blue |
0000FF  |
navy |
000080 |
fuchsia |
FF00FF |
purple |
800080 |
Exemple la codage #fc0277 mélange les trois couleurs de base et donne comme résultat
composantes :  |
Rouge |
Vert |
Bleu |
# |
FC |
02 |
77 |
couleur :  | |||
résultat : |
6 Exercices immédiats
De quel langage HTML est-il le sous-ensemble ?
Qu'est-ce qu'une balise obsolète ?
Que distingue principalement HTML d'XML ?
Donner des noms de couleurs
Si vous codez les couleurs sur 16 bits, de combien de couleurs disposerez-vous ?
Ecrire le code pour que l'en-tête du fichier comporte les informations suivantes : le nom de l'auteur du document et les mots clés de la page
II.2 Ecrire et tester du code HTML
Editeur et navigateur sont deux outils liés : l'éditeur permet la création de code HTML, mais ne le teste pas. C'est le travail du navigateur qui est encore malheureusement très changeant d'un poste à l'autre. Aussi une approche correcte de l'écriture web consiste à visualiser le résultat du code sur les principaux navigateurs.
1 Les éditeurs HTML et les navigateurs
Un fichier HTML est un fichier texte, éditer du code HTML se fait donc en utilisant un éditeur de texte. Un simple éditeur (bloc-notes sous Windows ou encore gEdit sous Linux) ne dispose pas de certaines facilités (recherche/remplacement ou dictionnaire), mais il permet d'éditer un texte propre, "manuel" (se souvenir que l'on doit savoir intervenir manuellement quand on retouche du code!).
Nous recommandons dans un premier temps l'utilisation de ces éditeurs de texte avant de passer à des éditeurs spécialisés (comme Dreamweaver, par exemple, un des plus connus). Mais vous pouvez même utiliser tout traitement de texte qui vous convertit son format en HTML. Pour votre information, un simple affichage de salutation (Bonjour) "pèse" 19456 octets avec Word et 44 octets en Ascii !.
Se souvenir alors que du code HTML est fait pour transiter sur les réseaux !!
Comment développe-t-on du code HTML ?
D'abord ouvrir un simple éditeur de texte. Une fois la première mouture de code rédigée, enregistrer, dans un dossier choisi, le fichier avec l'extension .htm ou .html. Attention aux sur-extensions .txt , à la casse et au nom des fichiers mêmes. Ces derniers, pour être valables sur tous systèmes, doivent avoir moins de 255 caractères et éviter certains caractères : / \ < > : * .
Puis lancer un navigateur (Mozilla, Internet Explorer ou encore un autre) et sélectionner votre fichier avec la commande Fichier Ouvrir : le contenu interprété de votre fichier va s'afficher dans la fenêtre du navigateur.
Si vous n'êtes pas satisfait de l'affichage, retournez dans l'é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'effet de vos modifications.
Remarques :
- l'indentation, dans l'écriture du code HTML, si elle n'est pas obligatoire, est fortement recommandée pour une meilleure lisibilité.
- même si votre code est incorrect, il a toutes les chances d'être réparé par votre navigateur, mais passera-t-il aussi bien sur les autres agents utilisateurs (PDA, téléphone, ..) ?
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).
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 (le texte du commentaire ne doit pas comporter en son milieu une de ces deux dernières marques).
2 Les premières balises de structuration du texte
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'est-à-dire à laisser des espaces libres.
Organiser un texte consiste d'abord à le structurer hiérarchiquement, à l'aide de titres, en parties, chapitres, sections, paragraphes. HTML dispose de six formats de titres (headings) : h1 à h6, du plus grand au plus petit.
Exemple :
Voici un gros titre! .
Voici un titre moyen
Remarque : il n'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 … en dur.
Passer à la ligne nécessite la balise vide
(break).
La balise
est différente de
: elle provoque un passage à la ligne et, en plus, décale la ligne suivante (espacement inter-paragraphes).
Gestion des espaces (blancs) ou "aération"
On appelle espace ou blanc les caractères "espace" (Code Unicode décimal 32), "tabulation" (9), "nouvelle ligne" (10), "retour chariot" (13).
Par défaut, les navigateurs fusionnent les séquences de blancs (3 espaces + une tabulation = 1 espace). Si l'on veut interdire la fusion, c'est-à-dire écrire directement le texte pré-formaté, on utilise les balises
.
Si l'on veut "aérer" le texte, on utilise l'entité pour insérer volontairement un espace supplémentaire (pour un alignement par exemple).
Exemple :
Voici un titre imposant
suivi de sa "traîne"
et un autre plus modeste
Voici le chiffre 1 suivi de 6 espaces et du chiffre 2 :
1 2
Voici un texte indenté
<html>
<head>
</head> <body>
bonjour le contenu de cet exemple de code
</body>
</html>
ce qui donne l’affichage suivant
Remarques :
- center est l'alignement par défaut d'un trait de division
- une balise provoque un passage à la ligne et un espacement d'interligne
? les entités sont interprétées à l'intérieur de la balise pre
?
3 Les listes
Les traitements de texte actuels manipulent les énumérations facilement, avec puces ou numéros :
- Toyota- Nissan
- Renault
1 Toyota
2 Nissan
3 Renault
La balise (unordered list définit une liste non numérotée. Les listes numérotées, elles, sont encadrées par (ordered list). Ces deux balises prennent pour attribut type qui indique soit le type de la puce, soit le type du numéro (chiffres arabes, romains, ..). Pour chaque type d'énumération, s'il y a un en-tête, il est inséré entre les balises et . Chaque article (item) qui suit est inséré entre les balises
Schéma syntaxique d'une liste
élément d'en-tête
- élément de l'énumération
- ….
- ….
Dans les énumérations ordonnées, on peut ajouter des attributs
• start à la balise
- pour définir la valeur de départ
• value à la balise
- pour interrompre la séquence et l'initialiser à une nouvelle valeur
Voici un exemple de liste non numérotée :
Marques d'autos
Il existe un autre type de liste, la liste de glossaire annoncée par
- : un mot (introduit par la balise
- ) suivi de sa définition (introduite par la balise
- ) comme dans un dictionnaire
Exemple
4 Les balises
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 :
•
•
• sert à changer la présentation d'une séquence de caractères ou de mots à l'intérieur d'une balise
La balise permet d'appliquer des styles à des éléments de texte d'un paragraphe ou si vous préférez à un morceau de paragraphe. Ainsi pour afficher « Un monde de géants » il faut écrire
Un monde de géants.
La balise
permet de regrouper plusieurs paragraphes ou si on préfére, de délimiter une zone comportant plusieurs paragraphes.
La balise <DIV>
Commentaire :
N'oubliez pas l'attribut class!
Donne comme résultat :
• La balise
• Commentaire :
• N'oubliez pas l'attribut class!
5 Balises de blocs et balise en ligne
Extrait de la spécification du HTML (W3C) : en HTML, on utilise des balises pré-définies afin de préciser à l'intérieur d'un fichier texte des éléments tels les titres, les paragraphes, .
Au sein de celles-ci, on distingue les balises définissant un bloc des balises en-ligne par :
- 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'idée inhérente à cette distinction structurelle, c'est que les éléments de bloc créent des structures
« plus grandes » que les éléments en-ligne.» le formatage
«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.»
Les feuilles de style fournissent les moyens de spécifier la restitution d'éléments arbitraires, y compris si l'élément est rendu comme étant de type bloc ou de type en-ligne.»
Exemples de balise de bloc :
,
,
Exemples de balise en ligne : , ,
6 Exercices immédiats
Que va afficher le code suivant :
Essai
a) Le mot Essai dans la page du navigateur
b) Le mot Essai dans la barre d'état du navigateur
c) Le mot Essai dans la barre de titre de la fenêtre du navigateur
Quels sont les avantages de l'examen d'un code source sur le web ?
Citer trois résolutions d'écran.
Comment va –t-on écrire correctement l'expression mathématique 0 < 1 ? (0 inférieur à 1)
a) 0
Quelle est l'entité correspondant au & (et commercial) ?
a) il n'y en a pas b) &&; c) &
Quelle ligne de code est correcte pour écrire La naïveté du mâle
a) La naïveté du mâle ?
b) La naïveté du mâle ?
c) La naï:veté: du mâ:le ?
Le code HTML suivant est-il correct :
a) Oui b) Non
La balise body affecte :
a) l'arrière-plan et le texte seulement
b) l'en tête (la partie déclarative)
c) tout ce qui est affichable dans le navigateur
L'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'écran : 'La balise ouvre le corps du document'
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'est-ce qu'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'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'un attribut ? b) le nom d'un attribut ? c) le nom d'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'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'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'un minutage pour élaborer une animation (on peut trouver divers logiciels d'animation GIF sur le site rubrique gif animator). Il n'est pas libre de droit.
Le format JPG ou JPEG
Il est doté d'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'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'intégrer une chaîne de caractères au sein même d'une image à des fins d'indexation (tatouage). Il n'est pas encore bien pris en compte par les navigateurs.
Remarque : ces formats d'images sont indépendants de la plateforme (comme html lui-même). Ceci veut dire qu'ils sont compris par tout navigateur.
2 Quelques points à savoir avant d'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'internaute impatient ! Limitez vous à 50Ko pour chacune.
• Tout le monde n'a pas un écran de 21 pouces ! Limitez vos dimensions d'images à une largeur de 700 pixels (points écran) et à une hauteur de 450 pixels pour éviter de forcer l'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'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'images sur le web. En particulier sur :
ClipArt Connection Yahoo's Clip Art, Barry's Clip Art Server et bien d'autres sites !
3 L'élément ![]()
et son alignement
La balise qui permet l'inclusion d'image est la balise vide . Elle est toujours complétée par l'attribut src qui donne l'adresse du fichier graphique contenant l'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'attribut src spécifie le chemin relatif pour accéder au fichier de limage. Exemple : .
Les images en html sont en ligne, c'est-à-dire qu'elles se coulent dans le flux du texte.
La balise admet l'attribut align qui permet de situer l'image par rapport à la ligne de texte courante. Ses valeurs sont :
- top pour aligner le haut de l'image avec la ligne courante
- middle pour aligner le milieu de l'image avec la ligne courante
- bottom pour aligner le bas de l'image avec la ligne courante
- left ou right si l'on veut couler du texte autour de l'image, à gauche ou à droite.
Voici des exemples de positionnement brut
Voici align="middle"/> des livres.
Voici encore des livres
width="50" height="100" align="bottom" />
