Créer une page web
Observons un site... Une entête Le corps de la page Un à-côté Un pied de page
Un logo Un menu Un autre menu Une entête La fenêtre de gauche La partie principale de la page Plusieurs sections
Un machin Un bidule Un fourbi Un zinzin Un truc Un engin Une chose Un bazar
Des titres Des liens Une image Un site bien présenté...
Moralité : Dans une page web, les différentes parties sont clairement identifiables. Une partie d une page web peut elle-même contenir des sous-parties, elles aussi clairement identifiables. Certaines parties de page web se retrouvent souvent dans de nombreuses pages web : entête, bas de page, menu... Pour une meilleure lisibilité, les objets de même nature apparaissent sous la même forme : les titres sont de la même taille, écrits avec la même police, de la même couleur, les liens sont mis en valeur de la même façon... Conséquences : Les langages que nous allons utiliser permettent de distinguer chaque partie. Ces langages permettent que des parties de même nature apparaissent sous une forme semblable.
Deux langages Le langage Html5 s occupe du contenu en distinguant les différentes parties. Ce langage utilise des balises qui donnent à l ordinateur des indications sur la nature du texte. Le CSS3 est le langage qui permet de mettre en forme une page web. Chaque partie définie dans le fichier html est décrite à l aide de ce langage. Html Le contenu CSS La forme
Une page Html
L entête Le menu de navigation L article principal L à-côté (pas très à côté!) Deux titres dans l article (de même forme) Le pied de page Deux paragraphes
L entête Le menu dans une liste à puces L à-côté Voilà comment obtenir un retour à la ligne Un article Deux titres et deux paragraphes Le pied de page
Comment utiliser les balises : La balise ouvrante La balise associée fermante Une balise auto-fermante
Le DOCTYPE précise la version du Html utilisé La balise donnant des informations sur la page : <head> Réduction des lignes La balise englobant toutes les autres : <html> La balise englobant tout ce que la page affiche : <body>
Le DOCTYPE Le DOCTYPE précise la version du Html utilisé. La dernière version utilisée est le Html5. Dans ce cas, il suffit d écrire :<!DOCTYPE html> (Mais ce n est pas encore un standard...) Mais on peut utiliser des versions plus anciennes, on a alors : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> Ou bien : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> Ou bien : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
Des balises imbriquées les unes dans les autres La balise <header> (l entête) contient : La balise <nav> (le menu) qui contient : La balise <ul> (une liste à puces) qui contient : Des balises <li> (les différentes puces) qui contiennent : Une balise <a> (pour faire un lien).
Les attributs des balises La balise <meta /> est une balise auto-fermante qui permet de donner des informations aux navigateurs et aux moteurs de recherches. A l intérieure de cette balise se trouvent des informations : ce sont les attributs de la balise. Exemples : La balise <a> est la balise permettant de faire des liens. Entre la balise ouvrante et la balise fermante doit apparaître le texte sur lequel il faudra cliquer. Dans la balise ouvrante, on indique en attribut la page sur laquelle le navigateur doit se rendre.
Les liens : <a> L adresse Le texte Avec une info-bulle Envoyer un e-mail Avec un sujet prédéfini Pour voyager dans la page, on utilise un point d ancrage repéré par le # L ancre est repéré par un identifiant unique indiqué en attribut
Les liens : adresse de la cible On dispose de l arborescence suivante dans laquelle les dossiers sont représentés en jaune et les fichiers en noir : www CoursISN CoursMath Images Index MonCV Première Seconde Terminale PrésentationMath NombresComplexes Probabilités Partant de Index.html, pour aller vers MonCV.html : Il s agit d une adresse relative : le fichier se trouve dans le même dossier que Index.html
Les liens : adresse de la cible www CoursISN CoursMath Images Index MonCV Première Seconde Terminale PrésentationMath NombresComplexes Probabilités Partant de Index.html, pour aller vers Présentation.html : Il s agit encore d une adresse relative : le fichier se trouve dans un sous-dossier de celui contenant Index.html
Les liens : adresse de la cible www CoursISN CoursMath Images Index MonCV Première Seconde Terminale PrésentationMath NombresComplexes Probabilités Partant de Index.html, pour aller vers NombresComplexes.html : Il s agit encore d une adresse relative : le fichier se trouve dans un sous-sous-dossier de celui contenant Index.html
Les liens : adresse de la cible www CoursISN CoursMath Images Index MonCV Première Seconde Terminale PrésentationMath NombresComplexes Probabilités Partant de Probabilités.html, pour aller vers PrésentationMath.html : Il s agit encore d une adresse relative : le fichier se trouve dans le dossier précédent de celui contenant Probabilités.html Remarquer la notation :../
Les liens : adresse de la cible www CoursISN CoursMath Images Index MonCV Première Seconde Terminale Présentation Math Nombres Complexes Probabilités? Partant de Index.html, pour aller vers : http://euler.ac-versailles.fr/ Il s agit d une adresse absolue : Les deux pages ne sont pas reliées de façon proche. Nous devons utiliser l adresse complète.
Et la balise pour les images? Une balise auto_fermante : <img /> L attribut indispensable : src Un texte de remplacement Une info-bulle Une balise <a>... et une balise <img />... donnent une image cliquable!
Les balises génériques Parmi toutes les balises, il y a en deux qui n ont aucun sens... On les utilise quand aucune autre ne convient! La balise <div> est une balise de type bloc comme <section>, <header>, <article>... La balise <span> est une balise de type ligne comme <a>, <strong> (pour mettre en valeur)... Pour donner du sens à ces balises, on utilisera les attributs id et class. L attribut id permet d attribuer un identifiant unique à une balise alors que l attribut class permet d attribuer un identificateur réutilisable. Un traitement unique pour la mise en forme Dans la mise en forme, ces deux blocs auront la même allure
Des commentaires? Quand notre page web est longue et très chargée, il est peut-être difficile de s y repérer. Heureusement, comme dans tout langage de programmation, il est possible et même recommandé, d incorporer des commentaires dans le fichier source qui resteront invisibles sur la page web. On utilise pour cela une balise auto-fermante : <!-- le commentaire --> Ici, un commentaire
The Validator Comme on peut le lire sur WikipédiA : «le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de normalisation à but non-lucratif, fondé en octobre 1994 chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML...» Le W3C met à la disposition de tous un outil permettant de vérifier que votre page web respecte les normes édictées.
The Validator On trouve ce validateur de page web à l adresse : http://validator.w3.org/ Après avoir validé votre travail, vous pouvez inclure, par exemple dans le pied de page de votre travail, l une des icônes disponibles sur : http://www.w3.org/qa/tools/icons en prenant soin de rendre cette icône cliquable vers le validateur! Remarque : pour l instant le HTML5 n est pas encore un standard. Le validateur fonctionne, mais il n existe pas encore l icône adaptée... Si on veut utiliser un validateur pour HTML5, on pourra se rendre à l adresse : http://html5.validator.nu/
Des sources : Openclassrooms: http://fr.openclassrooms.com/ (ex: le site du zéro) Développez.com : http://xhtml.developpez.com/cours/ Start Your Dev : http://www.startyourdev.com/html/tag-html-index Et beaucoup d autres sites quand on googlelise : «html»