Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

HTML CSS COURS THEORIQUE Antoine Lucsko Octobre 2011 Généralités Le HTML signif

HTML CSS COURS THEORIQUE Antoine Lucsko Octobre 2011 Généralités Le HTML signifie HyperText Markup Langage. C'est un langage de balisage, qui permet de créer de l'hypertexte et de structurer sémantiquement le contenu d'une page web. Le web trouve son origine dans les années 1989, lorsque Tim Berners-Lee rédige un document hypertexte au CERN. L'année suivante on pouvait compter dans le monde entier 130 sites web... À partir de 1990, Tim Berners-Lee développe les trois principales technologies du web : les adresses web, le Hypertext Transfer Protocol (HTTP) et le Hypertext Markup Language (HTML) . Puis dans la période de 1991 à 1994 un nombre considérable de sites Internet sont créés. Le W3C ( World Wide Web consortium ), naît sous l'impulsion de Tim Berners-Lee en 1994. Il a pour objectif de donner de la cohérence au projet de standardisation des langages pour le web comme le HTML, XML,CSS, PNG, SVG (graphique vectoriel adaptable ),... Les standards du web ont mis du temps à s'imposer et, on a pu assister durant toutes ces années à ce que l'on appelle « la guerre des navigateurs ». Aujourd'hui on peut dire que les standards définis par le W3C sont mieux intégrés par les navigateurs. En France le collectif Openweb, où l'on peut trouver Tristan Nitot, actuellement président de Mozilla-Europe, se charge de promouvoir les normes du W3C. ( Tristan Nitot sur le sujet du eG8 : http://vimeo.com/24178794 ) L'évolution des normes Le XHTML est né en 1998, c'est le langage que l'on utilise actuellement. Il a des aspects assez complexes, notamment il se veut une reformulation du XML pour donner le XHTML.. On peut cependant lui accorder un point fondamental : c'est la grande rigueur qu'il impose dans son écriture. A partir de 2004, un tournant s'est opéré, et un nouveau groupe de travail « dissident », le WHATWG ( Web Hypertext Application Technology Working Group ) se forme parallèlement au W3C. Il travaille sur une nouvelle version du HTML. Le W3C intègre en 2007 officiellement le WHAT afin de créer le HTML 5. Les travaux sur la norme du XHTML 2 sont alors abandonnés. La moralité de cette histoire, c'est que le XHTML demeure tout à fait standard et aura pour successeur le HTML 5. Les navigateurs Les navigateurs web ont évolué depuis le début du web. Microsoft s'implique dans les recommandations du W3C depuis 3 ans. Il sort en 2006 IE7 , puis IE8 en 2009, et aujourd'hui : IE9. Il faut se rappeler que IE6 s'est imposé pendant plus de 6 ans, sans réelle évolution... Depuis 2005, on observe cependant une baisse de l'utilisation d'IE au profit des navigateurs dits alternatifs comme Mozilla Firefox. Fin 2008 Google sort son propre navigateur : Chrome, basé sur le même moteur de rendu que Safari . Ces derniers navigateurs sont très respectueux des normes du W3C. On peut tester le bon respect des recommandations du W3C de son navigateur préféré à l'aide du test Acid3 (ce test est élaboré par le WaSP, groupe de concepteurs de site Internet professionnels qui respectent et promeuvent les normes du W3C). Il existe quatre groupes de navigateurs web : – IE qui est basé sur le moteur de rendu Trident – Mozilla Firefox,..basé sur Gecko – Opéra,.. basé sur Presto – Chrome, Safari,.. basé sur Webkit Remarques : Aujourd'hui IE6 n'est utilisé que par 5% des internautes. C'est un navigateur comportant un grand nombre de bugs, que l'on ne considérera pas dans ce cours. Organisation Pour l'écriture du code on utilisera Notepad++ Les documents seront en UTF-8 normal, il faut paramétrer Notepad++ pour que tous les nouveaux documents ouverts soient en UTF-8. Rappelons que l'UTF-8 est un format de codage des caractères. Pour configurer Notepad++, il faut aller dans paramétrages > préférences : Il faut ensuite créer un dossier html sur le bureau, dans lequel on créera les sous-dossiers correspondant aux différents chapitres du cours. Nommage des fichiers Pour qu'une page web et un fichier css soient reconnus par les navigateurs, il faut mettre les bonnes extensions aux fichiers HTML et CSS. Attention au nommage des fichiers, le nom des fichiers est en alphanumérique, sans espace, sans accent et ne commence pas par un chiffre. Pour créer un fichier HTML, il faut indiquer l'extension .html Pour les fichiers CSS on indiquera l'extension .css → exemple index.html pour un fichier HTML et global.css pour un fichier CSS Introduction Le cours porte sur le (X)HTML 1.0 strict. Ce langage de balise sert à structurer les pages web en parties ou blocs, ayant un sens précis : paragraphe, listes, tableaux, etc. Les CSS (Cascading Style Sheet ou feuille de style en cascade) décrivent la présentation, la forme et l'habillage du document HTML. Ces deux langages s'utilisent ensemble pour constituer des pages web graphiques. Initiation au HTML Structure d'une page HTML Un document HTML est constitué : – d'un DTD (voir définition ci-dessous), – d'un <head>, en-tête du document HTML, – d'un <body> corps du document ; Ces deux derniers étant contenus dans l'élément HTML <html>, racine du document. Définition DOCTYPE ou DTD C'est une contraction de Document Type Declaration. Il est nécessaire pour le bon fonctionnement des pages : il indique au navigateur la grammaire que l'on utilise pour construire les pages. Il informe, également, le validateur W3C de la version du HTML utilisée pour les pages. Si on a pas de DTD, les navigateurs se mettent en mode « Quirk », ce qui peut se traduire par « habitudes bizarres » en français ; dans ce cas les pages web ne s'affichent pas correctement. Les 5 règles du XHTML 1.0 strict – Chaque élément HTML comporte une balise ouvrante et fermante. Toute balise ouvrante doit obligatoirement être fermée. De même, les balises toute seule se ferme : <img />, <br />, <hr />,... – Les balises et les attributs de balises s’écrivent en lettres minuscules. <a href= ''page.html '' title=''aller à la page nom '' >Un nom de la page</a> – Les valeurs d’attributs de balise sont dans des côtes simples ou doubles <span class=''orange'' id='banane'>je suis une orange ou une banane</span> – Chaque attribut à une valeur <input type= ''radio '' checked='' checked'' /> – Les éléments doivent être correctement imbriqués. <p>Je suis un paragraphe <em>un peu long</em></p> Remarques Pour le XHTML1.0 strict les attributs et éléments de présentation ne sont plus autorisés. Ils doivent être remplacés par des styles CSS ; l’attribut target des liens et les iframe ne sont pas autorisés (ni frameset et frame). Encodage des caractères Les caractères sont encodés en UTF-8 (unicode). Il faut préciser l'encodage des caractères dans le <head> et enregistrer le fichier HTML en UTF-8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Et enregistrer le fichier dans le même encodage de caractères. → voir exemple 1 Entités HTML Les entités HTML servent à afficher des caractères spéciaux, ou des caractères du langage HTML lui-même. < : < ( lt : less than ) > : > ( gt : gretter than ) … : … On trouvera une liste des entités HTML ici → voir exemple 2 Les types des éléments HTML Il existe deux familles d'élément HTML, la famille de rendu de type en ligne et la famille de rendu de type bloc. Définition des éléments de type de rendu blocs (ou de type bloc) Ils distinguent des parties entières comme des paragraphes, titres, etc. Ils occupent/réservent tout l'espace de leur conteneur. Leur propriété permet de les dimensionner. On peut également les positionner, dans le flux du document. Définition des éléments de type de rendu en ligne (ou de type en ligne) Ils sont prévus pour enrichir localement des portions de texte (liens hypertextes, emphase, etc). Ils se dimensionnent par leur contenu. → voir exemple 3 Contenus autorisés selon les types des éléments HTML Un élément de type bloc peut contenir un ou plusieurs éléments de type bloc et/ou des éléments de type en ligne, à l'exception des éléments suivants : <p>,<h1>,<h2>,...En effet, ces derniers n'acceptent que des éléments de type en ligne. Un élément de type en ligne ne peut contenir que des éléments de type en ligne. Il existe deux sortes d'éléments de type en ligne : remplacés et non remplacés. Les éléments de type remplacés acceptent des attributs de dimensions ( height et width ). Il s'agit des éléments : <img />, <input />, <textarea>, <select> et <object> Les autres éléments n'ont pas de dimension à proprement parler, ils n'occupent que l'espace nécessaire à leur contenu. C'est le cas de <strong>, <em>, <a>. On peut passer d'une structure de type en ligne en type bloc à l'aide de la propriété CSS display, que l'on verra plus loin. Les principales balises HTML standards type en ligne <a> : lien hypertexte, elle s’accompagne de la balise href qui renferme la cible du lien et title qui renseigne la destination du lien. Exemple : <a href=''page.html'' title=''voir le contenu de page'' >Ouvrir la page</a> <em> mettre en emphase un texte Exemple : <em>important</em> <img /> inclut une image dans le document uploads/s1/ courscss-id1466.pdf