Le langage HTML Hyper Text Markup Language Préambule HTML: Langage structuré utilisé pour le développement des pages Web Langage interprété: interprété par le navigateur de l’internaute Il suffit d’un simple éditeur de texte pour développer une page Balises Le format HTML est défini par des balises (tags) délimités par les signes inférieur "<" et supérieur ">" et marchant par paires. Pour une balise d'ouverture, il correspond toujours une balise de fermeture, définissant une zone interprétée par le navigateur. La balise de fermeture est identique à celle d'ouverture, si ce n'est qu'elle est précédée d'un slach "/". Une page web est composée d’éléments (textes, images, liens hypertextes, …) à afficher selon une présentation définie par les balises Balises Les balises peuvent être écrites en minuscules ou majuscules et vont (presque toutes) par paire : une balise ouvrante <truc> et une balise fermante </truc> leur action porte sur les éléments placés entre la paire balises simples <truc> balises avec attributs <truc attribut="valeur">….</truc> Les balises doivent être imbriquées hiérarchiquement <truc> <machin> … </machin> </truc> <truc> <machin> … </truc> </machin> Balises Structure générale d’une page web <!DOCTYPE> <HTML> <HEAD> … …… <TITLE> Titre du document </TITLE> … </HEAD> <BODY> … Contenu de la page Web … </BODY> </HTML> Le paragraphe HEAD Contient des informations relatives au document, notamment sur les scripts et les feuilles de style Ces informations ne sont pas affichées par les navigateurs Facultatif mais très conseillé Balises du paragraphe HEAD <SCRIPT> Contient le code du programme appelé dans une balise de <BODY> <STYLE> Définit les styles de présentation balises <TITLE> C'est le titre du document affiché dans la barre de titre du navigateur. Il est nécessaire au référencement par les robots d'indexation Le paragraphe BODY Contient ce qui sera effectivement affiché dans votre navigateur Regroupe les balises de définition des textes, images, liens, formulaires…formant le corps du document La balise BODY elle-même accepte plusieurs paramètres définissant les attributs de présentation toute la page Cette balise est optionnelle dans les nouvelles versions d’HTML, mais fortement conseillée Le paragraphe BODY Attributs de la balise BODY background = nom bgcolor = rrggbb text = rrggbb link = rrggbb vlink = rrggbb alink = rrggbb image de fond de la page couleur de fond de page couleur du texte couleur des liens couleur des liens visités couleur des liens actifs Exemple <body link="3300FF" alink="FF3366" vlink="3399FF" text="000000" bgcolor="CCCCCC"> Mise en page Les retours à la ligne, les tabulations, et la succession de plusieurs espaces ne sont pas pris en compte par les navigateurs Pour une meilleure lisibilité du code, pensez à bien indenter les balises Une meilleure lisibilité permet une meilleure mise à jour de votre travail <HTML><HEAD><TITLE>Titre</TITLE></HEAD><BODY>Texte</B ODY></HTML> Bien crade comme code, mais juste… Mise en page <div> …</div>: division du texte sur votre page, comme un bloc <center> … </center>: centrer votre contenu <p…> … </p>: paragraphe align=right, left, justify <p> seul marque une fin de paragraphe et donc un retour à la ligne avec alinéa <br> ou <br />: saut de ligne <hr …>: trace une ligne horizontale sur la page size=N: N pixels d’épaisseur width=…% ou width=… largeur de la ligne Mise en forme des caractères <BIG>gros</BIG <SMALL>petit</SMALL> <B>gras</B> <I>italique</I> <U>Souligné</U> <SUP>mise en exposant</SUP> <SUB>mis en indice</SUB> <PRE>texte pré formaté</PRE> <H1>titre de niveau 1 </H1> (idem avec <H2>, …, <H6> pour des titres de niveaux inférieurs) Mise en forme des caractères <FONT> texte</FONT>, attributs possibles : FACE="Arial,Helvetica" pour spécifier d'abord Arial, disponible alors Helvetica SIZE="N" | "+N"(N compris entre 1 et 7) N valeur absolue N valeur relative par rapport à la taille standard COLOR="#RGB"(idem BODY) <alt=“ Commentaire sur passage de la souris“> Les listes z La balises <OL>, <UL>, <DL> déterminent 3 type des listes (ordonnée, non ordonnée et définition de liste). z Associée à ces balises, une autre balise <LI> … </LI> précise quels sont les différents éléments de la liste. z Une liste peut être imbriquée dans une autre liste: le décalage se fera alors vers la droite z Syntaxe: <OL> <LI> </OL> liste numérotée élément de liste Les listes z <OL> <LI> … </LI> … </OL> Liste ordonnée : les éléments de la liste sont numérotés et décalés vers la droite z <UL> <LI> … </LI> … </UL> Liste non ordonnée : les éléments de la liste sont décalés vers la droite et précédés d'une puce z <DL><DT> <DD>… </DD></DT> … </DL> Définition de listes. DT permet de spécifier les termes, DD permet de définir la description Les listes z La balise <OL> accepte les attributs suivants : indices en majuscules A,B… indices en minuscules a,b… numéros en chiffres romains majuscules I,II… {TYPE = i numéros en chiffres romains minuscules i,ii… numéros en chiffres 1,2… {TYPE = 1 { START définit la valeur à laquelle doit commencer la numérotation de la liste {TYPE = A {TYPE = a {TYPE = I z Ex : <OL TYPE=i START=4> Les listes z La balise <UL> accepte les attributs suivants : {TYPE = disc {TYPE = square {TYPE = circle cercle plein carré plein cercle vide z Syntaxe pour les listes de définition <DL> <DT>...</DT> <DD>...</DD> </DL> Liste de glossaire Terme de glossaire Définition du terme Les listes z La balise <UL> accepte les attributs suivants : {TYPE = disc {TYPE = square {TYPE = circle cercle plein carré plein cercle vide z Syntaxe pour les listes de définition <DL> <DT>...</DT> <DD>...</DD> </DL> Liste de glossaire Terme de glossaire Définition du terme Les listes Les tableaux z Un tableau HTML est délimité par les marqueurs <TABLE> et </TABLE>. z On définit ensuite les lignes une par une, et pour chacune, on définit les cellules formant les colonnes. <table> <tr> <td> <td> </tr> <tr> <td> <td> </tr> </table> </td> </td> </td> </td> Les tableaux z <TABLE> </TABLE> Création d'un tableau z <TR> … </TR> Ligne de tableau z <TD> … </TD> L'attribut COLSPAN=nombre cellules Cellule d'un tableau permet de fusionner des z <TH> … </TH> Entête de tableau Ils sont affichés avec des caractères différents de ceux des autres lignes Les tableaux z La balise <table> accepte les attributs suivants : { border="n" { width="x" { cellspacing="x" { cellpadding="x" épaisseur de la bordure, en pixel (0 donne un tableau sans cadre) largeur du tableau, en pixels ou en % espace entre les cellules espace entre la bordure intérieure d’une cellule et son contenu. Les tableaux z Attributs communs à <TR>,<TD> et<TH> { BGCOLOR="couleur"pour fixer la couleur du fond { ALIGN= "left" | "right" | "center"pour l'alignement horizontal { VALIGN= "bottom" | "middle" | "top"pour l'alignement vertical• z Attributs de <TD> { COLSPAN="N"permet à la cellule de recouvrir N colonnes { ROWSPAN="N"permet à la cellule de recouvrir N lignes Les tableaux Exemple Les éléments html5 De nouveaux éléments spécifiques HTML5 existent afin de faciliter la mise en page de vos sites <section>, <nav>, <article>, <header>, <footer>, <aside> Exemple <body> <header> … </header> <div> <nav>…</nav> <section> <article>…</article> <aside>…</aside> </section> </div> <footer>…</footer> </body> Les liens hypertextes <A HREF="url"> texte</A> crée un lien qui renvoie vers l'url spécifié lorsque l'utilisateur clique sur le texte soit une page web d'url U contenant<A NAME="toto"> X</A>qui définit une ancre toto positionnée sur X, alors le lien <A HREF="U#toto">Y </A>renvoie vers l'endroit où est placé X dans la page web U lorsque l'on clique sur Y (utile pour la navigation à l'intérieur d'une page) Exemples: <a href=”fichier2.html”>Acces au fichier</a> <a name=“toto”></a> ……. <a href=“#toto”>Lien vers même page mais placé sur l’ancre toto</a> Les liens hypertextes Exemples: Lien vers un autre site web Lien vers une adresse mail <A NAME="sommaire">Sommaire de la page</A> Lien interne vers l’ancre précédente (même page Web) <A HREF="mailto:[email protected]">Courrier au Prof</A> Déclaration d'une ancre dans une page Web page1.htm Accès au site de l'<A HREF="www.clermont.inra.fr/urh">UMRH</A> <A HREF="#sommaire">Retour Sommaire</A> Lien externe vers l’ancre précédente (à partir d'autre page Web) <A HREF="../page1.htm#sommaire">Retour Sommaire</A> Les images <IMG SRC="url"> insère l'image contenue dans le fichier (format jpeg, gif ou png) dont l'url est spécifié, attributs : ALT="texte" texte à afficher si le navigateur n'affiche pas les images, également affiché lorsque la souris passe au-dessus l'image WIDTH="N"largeur de l'image en pixels HEIGHT="N"hauteur de l'image en pixels ALIGN="left" | "right" | "top" | "middle" | "bottom"pour aligner l'image par rapport au texte HSPACE="N“ N pixels d'espacement horizontal autour de l'image VSPACE="N“ N pixels d'espacement vertical autour de l'image BORDER=N épaisseur de la bordure Il n’y a pas de balise fermante </img> On peut l’utiliser comme image de lien <a href=”fichier2.html”><img src=”image.png”></a> HTML – subtilités é &eacute; è &egrave; ê &ecirc; à &agrave; ç &ccedil; ë &euml > &gt < &lt; Espace &nbsp; HTML – subtilités Exemple Le matin de noël, le prof de PHP est venu tôt faire cours, et là, à 10h, a remarqué qu’il n’y avait pas âme qui vive de levée, si ce n’est les gens éméchés. Le matin de no&euml;l, le prof de PHP est venu t&ocirc;t faire cours, et l&agrave;, &agrave; 10h, a remarqu&eacute; qu’il n’y avait pas &acirc;me qui vive de lev&eacute;e, si ce n’est les gens &eacute;m&eacute;ch&eacute;s. Ou alors il faut utilizer la balise <meta charset=“utf-8”> dans le <head> Les formulaires Un formulaire inclus dans une page web permet à l'utilisateur de saisir des données, faire des choix, … pour envoyer au serveur web les données saisies par l'utilisateur pour passer en arguments à une fonction Javascript les données saisies par l'utilisateur une même page peut contenir plusieurs formulaires mais on ne peut pas imbriquer un formulaire dans un autre Une même page peut contenir plusieurs formulaires mais on ne peut pas imbriquer un formulaire dans un autre <FORM> éléments du formulaire</FORM> Les formulaires <form action="fichier2.php" method="get"> Action: page sur laquelle l’utilisateur sera redirigé en validant le formulaire Méthode: méthode utilisée pour transférer les informations méthode GET : les paramètres sont envoyés concaténés à la fin de l'urlU méthode POST: les paramètres sont envoyés dans un flux indépendant entre le navigateur et le serveur web l'action sera déclenchée par le clic sur un bouton de type submit On peut nommer un formulaire avec l’attribut name (utile principalement pour le javascript) Les formulaires Tous les éléments peuvent contenir un attribut NAME="toto" s'il y a besoin de les nommer VALUE="titi" s'il y a besoin de lui donner une valeur <TEXTAREA ROWS="R" COLS="C">valeur par défaut</TEXTAREA> affiche une zone de saisie de texte de R lignes et caractères de large Les formulaires <INPUT TYPE="text"> affiche une boite de saisie de texte SIZE="N" de N caractères de large VALUE="toto" avec "toto" comme valeur par défaut MAXLENGTH="N"saisie limitée à N caractères Disabled: empêche d’écrire dans le champ Les formulaires <input TYPE="password"> affiche une boite de saisie de texte à l'aveugle (les caractères entrés sont affichés sous forme d‘étoiles), mêmes attributs que "text" <input TYPE="hidden"> crée une “zone mémoire“ invisible dans la page web <input TYPE="reset"> affiche un bouton permettant de réinitialiser le formulaire lorsque l'on clique dessus Les formulaires <INPUT TYPE="checkbox">affiche une case d'une boite à cocher CHECKED pour forcer (indiquer que) la boite à être (été) cochée <INPUT TYPE="radio">affiche un bouton radio, lorsque plusieurs boutons de même nom existent un seul peut être coché (ou exclusif entre tous les boutons) CHECKED pour forcer (indiquer que) le bouton à être (été) coché Les formulaires <INPUT TYPE="button" value="toto" ONCLICK="action"> affiche un bouton portant le texte "toto" et lançant action lorsque l'on clique dessus <INPUT TYPE="submit" value="toto">affiche un bouton portant le texte "toto" et soumettant le formulaire lorsque l'on clique dessus (active l'url spécifiée dans l'attribut ACTION du formulaire) Les formulaires • <input type=”number”> affiche un champ texte au format nombre • <input type=”range”> affiche une règle de défilement pour définir les valeurs d’un champ • <input type=”color”> affiche une palette de couleurs • <input type=“file”> affiche un champ fichier (attention il faut un formulaire de type POST avec l’attribut enctype) Les formulaires • <input type ="tel"> affiche un numéro de téléphone • <input type="url”> affiche un champ texte au format URL • <input type=”email”> affiche un champ texte au format email <input type=”date”> affiche un champ texte au format date • Les formulaires <select name=“sel”> <option VALUE="toto1">texte1</option>… </select> affiche un menu déroulant permettant de sélectionner l'une des options, chaque ligne du menu a une valeur spécifique <OPTION VALUE="toto1"SELECTED> texte1permet de choisir cette ligne comme option par défaut <SELECT SIZE="N" MULTIPLE>... </SELECT> affiche une fenêtre de N lignes et permet la sélection simultanée de plusieurs lignes Possibilité de rajouter des groupes <optgroup></optgroup> Les formulaires Les formulaires Les feuilles de style en HTML CSS CSS: feuilles de style en cascade Permettent d’appliquer une mise en page à l’ensemble d’un site très simplement Permettent la modification de cette mise en page sans avoir à corriger tous les fichiers du site Déclarations des CSS 3 façons de faire: Intégré au cœur même des balises HTML de la page : Intégré au header de la page (balises HEAD) sous forme de bloc. Il affecte alors toute la page. Ex : <p style="font-size:16pt;"> Ex : <style type="text/css"> …… </style> Sous forme d'un fichier de style séparé, portant l'extension ".css" : il faut créer un fichier de mise en page auquel toutes les pages du site font appel, au travers de la ligne suivante, à insérer entre <head> et </head> : <link href="style.css" rel="stylesheet" type="text/css"> Déclarations des CSS On définit d’abord les styles de la page (couleur de fond, …) et du texte des paragraphes: body { background-color : FFFFFF; } p{ font-size : 12pt; font-family : Arial, Helvetica, Geneva, sans-serif; color : 000000; } Déclarations des CSS Les couleurs des liens (non visité, déjà visité et pendant le clic) sont définis comme suit : a:link {color: 00FFFF; text-decoration:underline;} a:visited {color: 808080; text-decoration:underline;} a:hover {color:FF0000; text-decoration:none;} De la même façon, les tableaux peuvent être homogénéisés : table { border-style:solid; border-width:1px; border-color:000000; width:50%;} Table { border: 1px solid black;} td { border-style:solid; border-width:1px; border-color:FF0000; width:50%; } Déclarations des CSS On peut également définir des styles prédéfinis pour les titres: h1 { font-size : 18pt; font-family : Arial, Helvetica, Geneva, sans-serif; color : 0099FF; text-align: center; } h2 { font-size : 14pt; font-family : Arial, Helvetica, Geneva, sans-serif; color : FF0000; padding-left:15px; } Les classes Si on veut définir plusieurs styles de tableaux, on passe par la création de plusieurs classes de tableaux. Une classe porte le nom que l'on veut, elle doit être déclarée dans le fichier CSS et doit être impérativement précédée d'un point "." : Exemple: .grise { border-style:solid; border-width:1px; border-color:000000; background-color:999999; } .none { border-style:none; } Les classes Il existe plusieurs style de bordures: "solid" (trait plein), "outset" (relief) ou "inset" (pointillés), "dotted"... On peut aussi avoir les 4 côtés différents puisque chaque bord peut être détaillé : border-style-left, border-color-right, border-width-top … Les classes Dans ce cas, il faudra modifier un peu le code html des pages, pour choisir entre tel et tel style de tableau. <table> <tr> <td class="grise"><p>Cellule 1</td> <td class="bleue"><p>Cellule 2</p></td> </tr> <tr> <td class="none"><p>Cellule 3!</p></td> <td><p>Cellule 4</p></td> </tr> </table> Les classes Les classes L'utilisation des CSS permettant de dissocier le style du contenu, cela autorise la gestion complète de la mise en page : .banniere { .menu{ position:absolute; position:absolute; top : 10px; top : 110px; left : 10px; left : 10px; width : 710px; width : 150px; height : 90px; height : 400px; border-style : solid; border-style : solid; border-width : 1px; border-width : 1px; border-color : 0000FF; border-color : 00FF00; background-color : F0F0F0; background-color : F0F0F0; } } Les classes .conteneur { <html> top : 110px; <head> left : 170px; <title> ma page de test des css</title> width : 550px; <link href="style.css" rel="stylesheet" type="text/css"> height : 400px; </head> position : absolute; <body> border-style : solid; <div class="banniere"><h2>banniere</h2></div> border-width : 1px; <div class="menu"><h2>menu</h2></div> border-color : FF0000; <div class="conteneur"><h2>conteneur</h2></div> background-color : F0F0F0; </body> } </html> Les identifiants Il est possible de faire la même chose que les classes mais avc des identifiants Dans le fichier css on n’aura plus .grise mais #grise Ne peut s’appliquer qu’à un élément dans la page Exemple: <div class=red> <div id=red> <div class=red> <div id=red> Les balises block et inline block : crée automatiquement un retour à la ligne avant et après. Il suffit d'imaginer tout simplement un bloc. Votre page web sera en fait constituée d'une série de blocs les uns à la suite des autres. il est possible de mettre un bloc à l'intérieur d'un autre augmente les possibilités pour créer le design du site Ex: p, article, footer, h1, h2, … inline : se trouve obligatoirement à l'intérieur d'une balise block. ne crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur la même ligne c'est pour cela que l'on parle de balise « en ligne ». Ex: a, img, strong, font Les dimensions et les dispositions Width, height: par défaut, un bloc prend 100% de la largeur disponible Mise en page possible Float: permet de fixer un bloc (ex nav) assez complexe Soucis: si 2 div, il y aura un décalage utilisation de margin On peut modifier le comportement des blocs (display:inline;) ou des inline (display:block;) On peut même faire disparaître des éléments (display:none) Les dimensions et les dispositions Inline-block: mélange de inline et block Les éléments se mettent les uns à la suite des autres mais se comportent comme des blocs Les éléments se positionnent par défaut sur la même ligne de base, on joue sur le vertical-align pour modifier ça Positionnement absolute Positionnement fixed Fixe le bloc à un endroit de la page (ex: en haut à gauche) Fixe le bloc à un endroit que la page défile ou pas Positionnement relatif Permet de décaler un élément inline par rapport à sa position de départ Création de notre site 1ère chose à faire: le squelette du site 2ème chose: mettre en place le css de notre site Il faut commencer à structurer nos blocs et définir les principales grandes sections de notre site On écrit notre html directement sur ces bases On met en place le CSS 1: les font-face (à récupérer sur des sites spécialisés) 2: Les différents blocs On modifie le CSS pour la compatibilité avec les vieilles versions d’IE Installer un serveur local sous windows Installer un serveur local sous windows Il existe plusieurs logiciels pour windows Les plus connus/utilisés sont: WAMP XAMPP Le principe du serveur local est de vous permettre de développer vos sites sur votre ordinateur, en installant Apache, ainsi que PHP et MySQL Pour accéder au serveur local, il faut aller dans votre navigateur et taper: http://localhost ou http://127.0.0.1 dans la majeure partie des cas Installer un serveur local sous windows Installer un serveur local sous windows Installer un serveur local sous windows Installer un serveur local sous windows Installer un serveur local sous windows Installer un serveur local sous windows Si l’icône reste orange, c’est qu’un autre programme utilise ce port, par exemple Skype. Il faut modifier le fichier httpd.conf Recherchez la ligne contenant Listen 80 Remplacez 80 par autre chose (ex: 8183) Redémarrez le serveur Installer un serveur local sous windows XAMPP Permet d’installer un serveur web, un serveur de bases de données et le package Perl/DBI Installation Téléchargez la dernière version de XAMPP (https://www.apachefriends.org/fr/download.html) Exécutez le fichier téléchargé Il proposera d’installer le répertoire xampp dans c:\ La racine de votre serveur web est c:\xampp\htdocs Utilisation L’icône est présenté dans votre barre des tâches (bas droite), il suffit de cliquer sur pour l’afficher Installer un serveur local sous windows Installer un serveur local sous windows Pour démarrer les services, il suffit de cliquer sur les boutons situés sous « action » Il est possible de mettre en place des services, c’est-à-dire de faire en sorte que XAMPP démarre tout seul au démarrage de windows. Il faut pour cela (1 fois pour toutes): Démarrer xampp en mode admin Arrêter les services au cas où ils tournent Cocher les cases « services » de apache et de mysql C’est tout! Pour accéder aux services de perl/dbi il faut utiliser la ligne de commande de xampp (à droite sur le panneau de config) Installer un serveur local sous linux Installation d’un serveur Lamp avec apt Lamp = Linux Apache Mysql Php Serveur de base pour générer des sites web sur un serveur linux Paquets nécessités: apache2 créera une arborescence dans /var/www php5 mysql-server php5-mysql phpmyadmin libapache2-mod-php5 Installer un serveur local sous linux Installation d’un serveur Lamp avec apt sudo apt-get install apache2 php5 mysql-server libapache2mod-php5 php5-mysql Démarrage du serveur apache2 sudo service apache2 start OU /etc/init.d/apache2 start