Comprendre la structure d'une page Web statique : cette page web est déstinée aux élèves de Terminale S qui suivent la spécialité ISN. Le but est de découvrir la structure du code HTML et du code CSS en analysant des pages web existantes et de faire un CV à partir d'une template fournie.
Les productions des élèves sont accessibles en fin de page. Pour consulter les c.v. suivre le lien : les CV des élèves
Pour télécharger le dossier papier qui reprend le contenu du site, suivre le lien : télécharger le dossier en format pdf.
HyperText Markup Language, généralement abrégé, HTML : le langage HTML est le langage qui permet de publier des informations sur Internet.
Le contenu des pages web que l'on peut consulter sur internet provient de l'interprétation de fichiers HTML par un navigateur. (Exemples de navigateurs : Firefox, Chrome, Internet Explorer, Safari, Opera, …).
Le langage HTML permet de décrire les éléments qui sont présents dans la page web (texte, images, liens vers d'autres pages web) grâce à un système de balisage. Ce n'est pas un langage de programmation.
Le HTML permet dans un même fichier de décrire le contenu d'une page web et de mettre en forme cette page. Mais maintenant, suivant les recommandations du W3C, il est conseillé de distinguer le contenu d'une page web (stocké dans un fichier html) et la mise en forme de ce contenu. Cette mise en forme (qui donne l'apparence de la page sur le web) est maintenant prise en charge par un langage spécifique, le CSS.
Plusieurs versions de HTML se sont succédées et la dernière évolution est le XHTML : eXtensible Hyper Text Mark Langage.
Vous pouvez consulter l'article suivant : wikipedia
EXtensible HyperText Markup Language, dit XHTML, est un langage de balisage servant à écrire des pages pour le World Wide Web. Conçu à l'origine comme le successeur d'HTML, XHTML se fonde sur la syntaxe définie par XML, plus récente, mais plus exigeante que celle définie par SGML sur laquelle repose HTML : il s'agit en effet de présenter un contenu affichable non seulement par les ordinateurs classiques, mais également sans trop de dégradation par des PDA bien moins puissants.
Vous pouvez consulter l'article suivant : wikipedia
Cascading Style Sheets, généralement abrégé, CSS : le CSS est un langage qui définit des règles permettant d'organiser la présentation d'une page web. Ces règles influent sur le positionnement des éléments qui constituent la page (titres, paragraphes, etc.), les polices de caractères, les couleurs du texte, la couleur de l'arrière plan, … (tout ce qui donne l'apparence de la page web interprétée par le navigateur)
Le but de CSS est séparer la structure d'un document HTML et sa présentation. L'association du HTML et du CSS, permet de créer une page web où la structure du document se trouve dans un fichier HTML alors que sa présentation est dans un fichier CSS. Ce fichier CSS pouvant servir pour plusieurs fichiers HTML.
Vous pouvez consulter l'article suivant : wikipedia
World Wide Web Consortium, généralement abrégé W3C, est une organisation à but non lucratif qui a pour but de définir des normes pour les technologies liées au web. Les normes proposées sont des recommandations et non des normes impératives.
Pour accéder au site du W3C, suivre le lien suivant : site du w3c.fr
Pour écrire des pages en HTML et en CSS, on peut utiliser un éditeur de code, par exemple notepad++. Source : notepad++
Un exemple de code HTML pour une page web à l'état brut. (sans mise en forme à l'aide d'une page de styles CSS)
Cliquer sur le lien suivant pour voir le code dans un fichier PDF: code html sans CSS.
Pour visualiser la page web qui correspond au code HTML de la page donnée au paragraphe précédent, cliquer sur le lien suivant : affichage page web sans CSS. La page s'affiche sans mise en forme...
Pour mettre en forme une page écrite en code HTML, il faut lui associer une page de style écrite en code CSS. Pour que la page web tienne compte du code de mise en forme, elle doit être reliée à la page de style CSS. Cette association est faite en incorporant mettant dans la partie head de la page HTML un lien avec la page de style de style <HTML.
Pour voir cette instruction, cliquer sur le lien : associer la page HTML à un style CSS
Pour visualiser la page de code CSS qui servira à mettre en forme la page HTML, cliquer sur le lien suivant : la page CSS
Pour visualiser la page HTML après sa mise en forme dictée par la page de style CSS, cliquer sur le lien suivant : la page HTML formatée par du CSS
Validation du code HTML : pour s'assurer que le code HTML écrit respecte les standard du W3C, on soumet le fichier à un validateur en ligne. Suivre le lien suivant : validator.w3.org/
Validation du code CSS : pour s'assurer que le code CSS écrit respecte les standard du W3C, on soumet le fichier à un validateur en ligne. Suivre le lien suivant : w3.org/css
Essai de validation d'une page web : télécharger le fichier prixmagix.zip et décompresser l'archive dans un dossier.
1 - Ouvrir le fichier prixmagix.html avec firefox pour visualiser la page web.
2 - Passer le fichier prixmagix.html aux tests de validation HTML et CSS du W3C.
3 - Ouvrir le fichier prixmagix.html avec notepad++
4 - Et essayer de corriger les erreurs signalées.
Explorer et modifier une page web : télécharger le fichier cv_creakaz.zip et décompresser l'archive dans un dossier.
1 - Ouvrir le fichier cv1_creakaz.html avec firefox pour visualiser la page web.
2 - Ouvrir le fichier cv2_creakaz.html avec firefox pour visualiser la page web.
3 - Dans firefox, avec la combinaison des touches [ctrl] + [maj] + [i] , vous pouvez inspecter la structure de la page web.
4 - Déterminer dans quel bloc se trouve la photo qui s'affiche dans le CV et comment faire pour que ce bloc s'affiche sur la droite de la page.
Deux memento bien pratiques sur HTML et CSS pris sur le site d'un développeur web : Eric Bellot :
1 - HTML: memento_xhtml
2 - CSS: memento_css
Du faux texte pour tester la mise en page : LOREM IPSUM.
Pour tester la mise en forme d'une page web, on utilise souvent du "faux texte latin" pour remplir les paragraphes. En voici un exemple :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi,
non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat
libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.
Pour plus de renseignements : bindtext generator
Les C.V. des élèves , d'après une template "gratuite" de creakaz.com
Le cv original : lien vers le CV original.
Eliot Chauvineau : lien vers le CV d'Eliot.
Victor Landais : lien vers le CV de Victor.
Delphine Poupon : lien vers le CV de Delphine.
Marouane Dhimine : lien vers le CV de Marouane.
Agathe Guillemot : lien vers le CV d'Agathe.
Sylvain Cottanceau : lien vers le CV de Sylvain.
Brendan Guével : lien vers le CV de Brendan.
Kévin Autin-Martineau : lien vers le CV de Kévin.
