Introduction au langage (X)HTML-CSS
Table des matières 1 La syntaxe du HTML 3 1.1 Principe d un langage descriptif............................ 3 1.2 Les balises HTML................................... 3 1.2.1 La syntaxe................................... 3 1.2.2 Le cas des accents et des caractères spéciaux................ 4 1.2.3 Les commentaires............................... 4 1.2.4 Les erreurs courantes à ne pas reproduire.................. 5 2 Structure d une page HTML 5 2.1 Première page HTML................................. 5 2.2 Les en-têtes....................................... 6 2.2.1 Les balises META............................... 6 2.2.2 Autres en-têtes................................. 7 2.3 Le corps de la page................................... 7 2.3.1 Les éléments de base.............................. 7 2.3.2 Les liens hypertextes.............................. 9 2.3.3 Utiliser des styles pour améliorer la page................... 10 3 Mettre vos pages en ligne 12 3.1 Avoir un hébergeur................................... 12 3.2 Définir la page d accueil................................ 13 3.3 Gérer le problème de l encodage UTF-8....................... 13 4 Références 13 2
1 La syntaxe du HTML 1 LA SYNTAXE DU HTML 1.1 Principe d un langage descriptif Le HTML est un langage dit descriptif. Celà signifie que le langage décrit quelque chose de statique, afin d organiser de l information lisible par une personne. En HTML, il n y a pas de boucles, pas de conditions, pas de compilation. La finalité d une page web est son code source HTML. Durant cette formation, nous apprendrons les bases de ce code source, qui peut être écrit directement dans n importe quel éditeur de texte. 1.2 Les balises HTML 1.2.1 La syntaxe La syntaxe du langage HTML est très simple. L information de la page est organisée par ce qu on appelle des balises. Chaque balise peut ne contenir rien, ou contenir du texte, ou contenir d autres balises. Une balise est composée de deux éléments : un marqueur d ouverture et un marqueur de fermeture. <nomdelabalise> Contenu </ nomdelabalise> Syntaxe des balises Une balise peut comporter un ou plusieurs attributs. Ce sont des valeurs qui permettent de régler son comportement par exemple. <nomdelabalise a t t r i b u t 1= valeur1 a t t r i b u t 2= v aleur2 > Contenu </ nomdelabalise> Balises avec attributs Certaines balises particulières n ont pas de contenu. Elle se suffisent à elles-même. Le marqueur de début et celui de fin sont fondus dans un seul marqueur. Leur syntaxe est la suivante. 3
1 LA SYNTAXE DU HTML <nomdelabalise /> <nomdelabalise a t t r i b u t 1= valeur1 a t t r i b u t 2= v aleur2 /> Balises sans contenu 1.2.2 Le cas des accents et des caractères spéciaux En HTML, les accents et certains caractères comme &,< ou > doivent être écrits avec un code particulier. Celà est très contraignant pour les accents et nous apprendrons des astuces pour outrepasser cette limite. Néanmmoins, vous devez connaître la manière de s y prendre. Voici dans l ordre, le à, le é, le è, le ô, le &, le < et le > : à ; é ; è ; &o c i r c ; & ; &l t ; > ; Les accents en HTML Vous trouverez aisément sur internet la liste des tous les caractères spéciaux disponibles. 1.2.3 Les commentaires Les commentaires servent à mettre du texte qui n apparaît pas dans le navigateur. C est utile pour décrire le code source. Leur syntaxe est la suivante. <! Texte de v o t r e commentaire > <! Des commentaires p l u s l o n g s avec des r e t o u r s à l a l i g n e > Les commentaires 4
Attention : Vous ne pouvez pas utiliser de commentaires à l intérieur même d une balise ou d un attribut. Ils doivent être impérativement placés comme un contenu dans une balise. En revanche, les commentaires peuvent contenir des balises, qui ne seront bien sûr pas prises en compte. 1.2.4 Les erreurs courantes à ne pas reproduire Vous pouvez voir sur internet de trop nombreux exemples à ne pas respecter. Notez en particulier que : Les noms des balises et des attributs doivent être écrits en minuscules. Les balises sans contenu doivent impérativement être fermées avec />. Vous devez mettre les valeurs des attributs entre des double-quotes. Les navigateurs peuvent dans une certaine mesure outrepasser ces erreurs et afficher un résultat correct, néanmmoins, le document ne respecte dans ce cas pas les standards et ses données sont mal formatées. 2 Structure d une page HTML 2.1 Première page HTML L ensemble de la page HTML doit être contenu à l intérieur d une balise <html>. Nous verrons qu il existe parfois des choses avant cette balise mais il ne s agit pas de balises. Cette balise doit contenir deux autres balises, <head> et <body> dans cet ordre et rien d autre. Notez que le HTML ne tient pas compte des retours à la ligne, des tabulations et des suites d espaces (si vous tapez 3 espaces, un seul sera pris en compte). Vous pouvez à votre guise organiser les balises les unes par rapport aux autres avec des retours à la ligne et des espaces. Ouvrez un éditeur de texte (gedit par exemple) et tapez un code similaire à celui-ci : <html> <head> <t i t l e>ma première page HTML</ t i t l e> </head> <body> V o i c i du t e x t e. Des r e t o u r s à ; l a l i g n e pour v o i r l e ré ; s u l t a t dans l e navigateur. Vous v e r r e z que HTML ne prend pas en compte vos r e t o u r s à ; l a l i g n e et vos e s p a c e s. </body> </html> Première page HTML 5
Enregistrez ceci dans un fichier appelé par exemple mapage.htm. Enregistrez ce fichier dans un répertoire de votre compte INP-Net. Puis ouvrez un navigateur, effectuez l action Fichier -> Ouvrir un fichier et sélectionnez votre fichier. Admirez le résultat. 2.2 Les en-têtes On appelle en-têtes le contenu de la balise <head>. Les informations que cette section contient n apparaîtront pas directement sur la page. Comme vous avez pu le voir, le navigateur affiche le contenu de la balise <title> dans la barre de titre de sa fenêtre, mais pas sur la page. C est un choix des codeurs du navigateur et en rien une norme. Ces informations, appelées métadonnées, servent à renseigner le navigateur et le réseau sur divers éléments qui n ont pas besoin d apparaître sur la page. Par exemple, le nom de l auteur, ou bien une liste de mot-clés, en encore la période de validité de la page. Ce genre d informations s écrivent à l aide de la balise <meta>. Ces informations sont utiles pour les moteurs de recherche par exemple. Ces en-têtes servent aussi à lier à la page des fichiers ou du code contenant des styles CSS ou des programmes en Javascript par exemple. Celà se fait à l aide de balises rel,style ou encore <script>. 2.2.1 Les balises META Les balises <meta> sont riches et l utilité de certaines est parfois discutable. Voici quelques exemples : <html> <head> <t i t l e>les b a l i s e s META</ t i t l e> <! <meta http equiv= Content Type content= t e x t /html ; c h a r s e t=iso 8859 15 /> > <meta http equiv= Expires content= 0 /> <meta name= Author content= Votre Nom /> <meta name= keywords content= trustonme html xhtml formation formations net7 INP Net /> <meta name= d e s c r i p t i o n content= Formation pour l a c r é a t i o n de pages Web /> </head> <body>... é </body> </html> Les balises META 6
Tapez ces balises dans votre page ou copiez-les dans le fichier balisesmeta.htm. Enregistrez dans un fichier différent du précédent puis ouvrez-le dans un nouvel onglet de votre navigateur, afin de conserver l autre affiché pour le moment. Faites un clic droit dans la première page et puis cliquez sur Informations de la page. Une fenêtre s ouvre. Faites de même sur la seconde page. Vous pouvez voir que le navigateur lit les données Meta et vous permet de les consulter. Vous pouvez aussi voir qu une balise est commentée. Cette balise permet de décrire l encodage utilisé pour la page. L encodage est la manière dont les caractères sont codés par des bits. L encodage n a aucune importance tant que vous n utilisez que des caractères ASCII, soit un jeu très limité de caractères, sans accents. Les accents ne sont utilisables proprement que via les codes HTML décrit précédemment. Nous allons maintenant utiliser une astuce pour afficher correctement de vrai accents. Décommentez la balise <meta> concernée. Puis taper des mots avec accents dans la balise <body>. Actualisez votre page et observez le résultat. A présent, remplacez la balise <meta> concernée par <meta http-equiv="content-type" content="text/html ; charset=utf-8" />. Notez que seule la valeur de l attribut content change. Enregistrez, actualisez la page et observez le résultat. Vos accents s affichent correctement dans un cas et pas dans l autre. Celà dépend de l encodage de votre fichier. Normalement, les éditeurs de texte vous permettent de choisir l encodage au moment d enregistrer le fichier. Dans le cas des sites en ligne, si vous voulez utiliser un encodage UTF-8, une manipulation supplémentaire est nécessaire. Si vous utilisez l encodage iso8859, vous ne devriez avoir aucun problème. Nous décrirons la manipulation pour UTF-8 plus tard. Si vous utilisez windows, il est pour le moment recommandé d utiliser l encodage iso, car c est l encodage par défaut. 2.2.2 Autres en-têtes Vous avez pu constater dans les en-têtes la présence de la balise <title>. Cette balise est obligatoire. Nous ajouterons d autres en-têtes au cours de la formation. 2.3 Le corps de la page 2.3.1 Les éléments de base Vous l avez deviné, le corps de la page est tout ce qui se trouve dans la balise body. Nous allons décrire le contenu à l aide de différents délimiteurs. Voici une page d exemple. <html> <head> <t i t l e>faire un corps à notre page</ t i t l e> </head> <body> <h1>un grand t i t r e</h1> <h2>un t i t r e plus p e t i t</h2> <h6>le plus p e t i t t i t r e</h6> 7
<div>du t e x t e l i b r e</div> <div style= text a l i g n : c e n t e r ; > Du t e x t e c e n t r é <br /> Avec r e t o u r à l a l i g n e </ div> <div style= text a l i g n : r i g h t ; >Du t e x t e a l i g n é à d r o i t e</div> <! Un s é p a r a t e u r > <hr /> <div> On peut a u s s i rendre l e t e x t e <span style= font weight : bold ; >gras</span>,<span style= font s t y l e : i t a l i c ; >i t a l i q u e</span> ou encore <span style= text d e c o r a t i o n : u n d e r l i n e ; >s o u l i g n é.</span> </ div> <div> <p>on peut u t i l i s e r des paragraphes</p> <p>i n t e r has ruinarum v a r i e t a t e s a N i s i b i quam tuebatur a c c i t u s Vrsicinus, c u i nos obsecuturos i u n x e r a t i m p e r i a l e praeceptum, d i s p i c e r e l i t i s e x i t i a l i s certamina cogebatur abnuens et reclamans, adulatorum o b l a t r a n t i b u s turmis, b e l l i c o s u s sane milesque semper et militum ductor sed f o r e n s i b u s i u r g i i s longe d i s c r e t u s, qui metu s u i d i s c r i m i n i s anxius cum a c c u s a t o r e s q u a e s i t o r e s q u e s u b d i t i v o s s i b i c o n s o c i a t o s ex isdem f o v e i s c e r n e r e t emergentes, quae clam palamve agitabantur, o c c u l t i s Constantium l i t t e r i s edocebat i n p l o r a n s s u b s i d i a, quorum metu tumor n o t i s s i m u s C a e s a r i s e x h a l a r e t.</p> <p><span style= c o l o r :#0000 f f >Et mettre de l a c o u l e u r</span></p> </ div> </body> </html> Corps de la page Ce code source est disponible dans le fichier corps.htm. Vous pouvez constater que pour les styles de texte, comme la couleur, la syntaxe est assez lourde. Nous allons voir plus loin des moyen plus aisé de gérer celà. Vous voyez qu il y a un certain nombre de conteneurs <div>. Les DIV sont les conteneurs de base. Il est déconseillé de mettre du texte libre en dehors d un DIV, car celà rend sa manipulation par des styles moins facile. Vous comprendrez celà plus tard. 8
2.3.2 Les liens hypertextes Toute la magie du web vient du fameux lien hypertexte. Un lien hypertexte pointe vers un emplacement dans une page web. Il est bien écrit un emplacement. En effet, vous pouvez faire pointer un lien sur la page dans laquelle il se trouve, pour orienter le visiteur sur un paragraphe particulier lorsque la page est longue, ou bien pointer vers une autre page web, ou bien encore pointer vers un emplacement dans une autre page web. Ces emplacements sont appelés des ancres. Les liens se gèrent avec la balise <a>. Il y a deux types de ces balises. Celles qui pointent vers une page ou une ancre et celles qui définissent une ancre vers laquelle d autres liens peuvent pointer. Pour définir une ancre, on utilise la syntaxe <a id="nomdelancre"></a>. Pour définir un lien, on utilise une des trois syntaxes suivantes, selon le besoin : <a href="urldelapage">texte du lien</a> <a href="#nomdelancre">texte du lien</a> <a href="urldelapage#nomdelancre">texte du lien</a> urldelapage est l adresse de la page. Ce peut être soit une page désignée par un chemin relatif par rapport à la page consultée (comme sousrepertoire/autrepage.htm) ou une URL externe (comme http ://www.google.fr). Faisons un petit test. Créons deux fichiers appelés page1.htm et page2.htm dans le même répertoire et plaçons-y respectivement les codes suivants. <html> <head> <t i t l e>une première page</ t i t l e> </head> <body> <a href= http : / /www. g oogle. f r >Un l i e n v e r s Google</a> <br /> <a href= page2. htm >Un l i e n v e r s une page de mon s i t e</a> </body> </html> Page numéro 1 <html> <head> <t i t l e>une deuxième page</ t i t l e> </head> <body> 9
<a href= page1. htm >Retour v e r s l a première page</a> </body> </html> Page numéro 2 Tester un peu tout ça en ouvrant page1.htm dans vote navigateur. Pour tester le comportement des ancres, je vous invite à consulter le fichier ancres.htm. Son listing n est pas présenté ici en raison de la grande quantité de texte qu il contient. 2.3.3 Utiliser des styles pour améliorer la page Nous allons ici ajouter une balise d en-tête. C est une balise particulière puisqu elle contient du texte, qui n est pas du HTML mais du langage CSS comme Cascading Style Sheet ou feuille de style en cascade. Bien que ce terme puisse effrayer, CSS est un langage simple et fort puissant. Jugez-en par vous-même avec le listing suivant, que vous trouverez dans le fichier css.htm. <html> <head> <t i t l e>u t i l i s a t i o n de s t y l e s CSS</ t i t l e> <style content= t e x t / c s s > / Ceci va a f f e c t e r t o u t e s l e s b a l i s e s body. I l n y en a qu une ce qui s i m p l i g i e l e problème / body { / Ceci va donner une c o u l e u r de fond. / background c o l o r :# bbbbff ; font s i z e : 1 0 pt ; font f a m i l y : Verdana ; c o l o r :#220000; / I c i on s oiccupe du s t y l e par défaut des b a l i s e s courantes / div { / T a i l l e de l a marge en haut, à d r o i t e, en bas, à gauche / / La marge e s t l a d i s t a n c e e n t r e l e bord du div et ce qui l entoure / margin : 1 0 px 100px 10px 100px ; h1 { text d e c o r a t i o n : u n d e r l i n e ; 10
/ On d é f i n i t i c i ce qu on a p p e l l e des c l a s s e s / / Celà permet d a f f e c t e r un s t y l e p a r t i c u l i e r à c e r t a i n s éléments /. encadre { margin : 5 0 px 200px 50px 200px ; / Le padding e s t l a d i s t a n c e e n t r e l e t e x t e et l e s bords du DIV / padding : 2 0 px ; / Ceci c r é e une bordure p l e i n de 2 p i x e l s d é p a i s s e u r et de c o u l e u r blanche / border : 2 px s o l i d # f f f f f f ; / On a l i g n e l e t e x t au m i l i e u / text a l i g n : c e n t e r ; / des l i e n s hypertext plus sympas / / S t y l e du l i e n par défaut / a { c o l o r :#550000; text d e c o r a t i o n : none ; / S t y l e du l i e n s i déjà v i s i t é / a : v i s i t e d { c o l o r :#550000; text d e c o r a t i o n : none ; / S t y l e du l i e n l o r s du s u r v o l avec l e c u r s e u r de l a s o u r i s / a : hover { c o l o r :#aa0000 ; text d e c o r a t i o n : u n d e r l i n e ; </ style> </head> <body> <h1>uraphe</h1> <div> Sed quid e s t quod in hac causa maxime homines admirentur et reprehendant meum consilium, cum ego idem antea multa decreverim, que magis ad hominis dignitatem quam ad r e i p u b l i c a e n e c e s s i t a t e m p e r t i n e r e n t? 11
3 METTRE VOS PAGES EN LIGNE </ div> Supplicationem quindecim dierum d e c r e v i s e n t e n t i a mea. Rei p u b l i c a e s a t i s e r a t t o t dierum quot C. Mario ; d i s immortalibus non e r a t exigua eadem g r a t u l a t i o quae ex maximis b e l l i s. Ergo i l l e cumulus dierum hominis e s t d i g n i t a t i t r i b u t u s. </body> </html> <div class= encadre > Ce div e s t a f f e c t é à une c l a s s e CSS pour l u i donner un look d i f f é r e n t. <a href= >Des l i e n s plus sympas</a> </ div> <h1>un autre paragraphe</h1> <div> Adolescebat autem obstinatum propositum erga haec et s i m i l i a multa scrutanda, s t i m u l o s admovente regina, quae abrupte m a r i t i f o r t u n a s trudebat in exitium praeceps, cum eum p o t i u s l e n i t a t e feminea ad v e r i t a t i s humanitatisque viam reducere u t i l i a suadendo deberet, ut in Gordianorum a c t i b u s f a c t i t a s s e Maximini t r u c u l e n t i i l l i u s i m p e r a t o r i s r e t t u l i m u s coniugem. </ div> Utilisation des styles CSS Comme vous pouvez le voir, celà libère le code HTML de toute description de couleur et de disposition. C est la philosophie du Web de l avenir. Le code (X)HTML définit des données, puis on les met en forme avec d autres outils. Ici, l outil est le langage CSS. Celà suffit à gérer un site web même riche, car un site web n utilise jamais trop de styles différents, sans quoi il deviendrait très vite illisible. Il est possible d utiliser CSS directement dans les balises (X)HTML à l aide de l attribut style. Consulter la sous-section corps de la page pour voir de petits exemples avec les textes en gras, italique et souligné. Par exemple, avoir un bout de texte rouge souligné, on peut utiliser <span style="color :#ff0000 ;text-decoration :underline ;">Du texte rouge souligné</span>. 3 Mettre vos pages en ligne 3.1 Avoir un hébergeur Pour mettre vos pages en ligne, vous devez disposer d un hébergeur. INP-Net vous offre un service d hébergement avec votre compte. Déposez simplement vos pages web dans le répertoire www public de votre compte INP-Net. Vous accéder à votre site et à vos pages via l adresse http ://bde.enseeiht.fr/~votrelogin/unepage.htm. 12
4 RÉFÉRENCES 3.2 Définir la page d accueil Par mesure de sécurité et de confort, il convient que l adresse http ://bde.enseeiht.fr/~votrelogin/ tombe directement sur une page, de surplus celle de votre choix. Pour ce faire, il suffit de placer un fichier nommé index.htm ou index.html dans le répertoire www public. Ce fichier sera la page d accueil. 3.3 Gérer le problème de l encodage UTF-8 Si vos fichiers sont encodés en UTF-8, il est possible que les accents s affichent mal. Si vous rencontrez ce problème, vous pouvez éditer le fichier.htaccess (ou le créer s il n existe pas) et y ajouter les lignes : AddCharset UTF-8.html AddCharset UTF-8.htm 4 Références 13