IFT1147 Programmation Serveur Web avec PHP Un bref survol de HTML et CSS HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre, paragraphe, etc.) Les standards HTML sont créés par le World Wide Web Consortium. Nous utiliserons la définition HTML 4.01 IFT1147 - HTML 2 Exemple de fichier HTML Structure d un document HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>exemple simple</title> </head> <body> <h1>exemple simple</h1> <p> Un fichier HTML très simple avec un seul paragraphe. </p> </body> </html> IFT1147 - HTML 3 1. Définition du type de document; dans le cadre du cours, ce sera HTML 4.01 2. Conteneur HTML 1. En-tête Le titre, l auteur, la mise en page etc. 2. Corps Le contenu principal de la page. IFT1147 - HTML 4 Alain Pilon 2000-2010 1
Exemple de fichier HTML Balises HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>exemple simple</title> </head> <body> <h1>exemple simple</h1> <p> Un fichier HTML très simple avec un seul paragraphe. </p> </body> </html> IFT1147 - HTML 5 Une balise HTML est composée d un mot clé placé entre deux chevrons <html>, </body>, <p>, <img> Dans le cas des conteneurs, la balise terminale est identique à la balise initiale à la différence qu elle commence par /, par exemple <html> et </html> IFT1147 - HTML 6 Exemple de fichier HTML Entités de caractères <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>exemple simple</title> </head> <body> <h1>exemple simple</h1> <p> Un fichier HTML très simple avec un seul paragraphe. </p> </body> </html> IFT1147 - HTML 7 Les entités de caractères permettent d utiliser des caractères qui ne sont pas nécessairement disponibles sur le clavier (par exemple des caractères accentués). Toutes les entités de caractères commencent par le symbole & et se terminent par le symbole ; IFT1147 - HTML 8 Alain Pilon 2000-2010 2
Entités de caractères - exemples Entités de caractères - important é è ê À ô ç Ç é è ê À ô ç Ç & & < < > > «» Les symboles < et & sont utilisés pour indiquer le début d un balise et le début d une entité de caractères. S ils doivent apparaître dans notre texte HTML, il faut les remplacer systématiquement par leur entité de caractères correspondante: < et & IFT1147 - HTML 9 IFT1147 - HTML 10 Exemple de fichier HTML Titres et paragraphes <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>exemple simple</title> </head> <body> <h1>exemple simple</h1> <p> Un fichier HTML très simple avec un seul paragraphe. </p> </body> </html> IFT1147 - HTML 11 Il existe 6 niveaux de titres <h1>, <h2>,, <h6> <h1> est le conteneur pour le titre le plus important. Le conteneur <p> sert à définir un paragraphe. La balise <br> crée un retour à la ligne à l intérieur d un paragraphe. IFT1147 - HTML 12 Alain Pilon 2000-2010 3
Jeux de caractères Unicode et UTF8 Chaque fichier est enregistré selon un jeu de caractères. Les plus fréquents (au Québec) sont du type iso-latin (iso-8859) ou unicode. Il faut spécifier dans l en-tête du document HTML le jeu de caractères approprié afin que le navigateur puisse afficher le document correctement. IFT1147 - HTML 13 Utf8 est un jeu de caractères unicode qui enregistre les caractères les plus fréquents en moins d octets que les caractères moins fréquents. La taille de fichiers utf8 est donc relativement petite. Tout traitement de chaîne de caractères devient plus difficile! IFT1147 - HTML 14 Commentaires Liens Vous pouvez insérer des commentaires dans le code source HTML <!-- le code du commentaire --> Un commentaire peut inclure plusieurs lignes. Soyez conscients que les commentaires sont visibles (dans le code source HTML) pour les usagers de votre site. IFT1147 - HTML 15 Un lien est un pointeur vers un autre document <a href="url"> </a> L URL peut prendre trois formes: Lien externe: http://www.umontreal.ca Lien relatif:../../index.html Position interne: index.html#position IFT1147 - HTML 16 Alain Pilon 2000-2010 4
Listes Listes - exemple HTML permet de créer facilement des listes à puces ainsi que des listes numérotées. Conteneur de liste à puces: <ul> Conteneur de liste numérotée: <ol> Chaque article de la liste est indiqué par le conteneur <li>. <ul> <li>lundi <ol> <li>17h30</li> <li>20h30</li> </ol> </li> <li>mardi</li> <li>mercredi</li> </ul> Lundi 1. 17h30 2. 20h30 Mardi Mercredi IFT1147 - HTML 17 IFT1147 - HTML 18 Tableaux Tableaux - <thead> et <tbody> Conteneur de tableau: <table> Conteneur de ligne: <tr> Conteneur de cellule: <td> Conteneur de cellule de titre: <th> Les tableaux sont aussi souvent utilisés pour la présentation visuelle du contenu. Les conteneurs <thead> et <tbody> peuvent être utilisés afin de séparer les lignes de l en-tête de celles du contenu. Dans plusieurs navigateurs, la partie <thead> sera répétée, lors de l impression, au début de chaque page (si le tableau s imprime sur plusieurs pages). IFT1147 - HTML 19 IFT1147 - HTML 20 Alain Pilon 2000-2010 5
Tableaux - exemple Tableaux - paramètres <table> <tr> <th>nom</th> <th>devoir 1</th> </tr> <tr> <td>albert</td> <td>9.4</td> </tr> <tr> <td>alice</td> <td>10</td> </tr> </table> Nom Devoir 1 Albert 9.4 Alice 10 Plusieurs paramètres permettent d influencer la disposition des tableaux. Bordure: <table border= 1 > Étendre les dimensions d une cellule Horizontalement: <td colspan= 2 > Verticalement: <td rowspan= 2 > IFT1147 - HTML 21 IFT1147 - HTML 22 Images Images - formats La balise <img> permet d insérer des images <img src= fichier alt= des > L attribut obligatoire alt spécifie un texte à afficher à la place de l image si: L image n est pas disponible L usager ne souhaite pas afficher les images (si sa connexion est lente par exemple) Trois formats d image sont supportés par la vaste majorité de navigateurs. JPEG Le format de choix pour les photos GIF Pour les graphiques qui peuvent être animés PNG Aussi pour les graphiques IFT1147 - HTML 23 IFT1147 - HTML 24 Alain Pilon 2000-2010 6
Redirection automatique Validation Le langage HTML permet de rediriger le navigateur vers une nouvelle page. Il faut écrire dans le conteneur <head> <meta http-equiv="refresh" content= "5;url=http://www.example.com"> Ceci est très utile si vous devez déménager un site vers une nouvelle adresse. IFT1147 - HTML 25 Afin d être bien affiché dans tout navigateur, un document HTML ne devrait jamais contenir d erreurs. Il existe plusieurs logiciels qui permettent de vérifier si un document est conforme à la spécification HTML. Dans le cours, nous utiliserons http://validator.w3.org IFT1147 - HTML 26 Validation avec Firefox Ressources Le navigateur Firefox (http://www.mozilla.org) permet l intégration d extensions. Une extension très utile est Web Developer qui permet de valider le contenu d une page HTML directement, à travers un menu du navigateur. http://www.w3.org Toutes les spécifications HTML http://www.htmlhelp.com Une façon simple d obtenir des conseils d utilisation sur chaque balise http://www.w3schools.com Un ensemble de tutoriels pour l apprentissage des langages Web http://www.google.com Comme d habitude IFT1147 - HTML 27 IFT1147 - HTML 28 Alain Pilon 2000-2010 7
Bonnes pratiques - 1 Bonnes pratiques - 2 Créez du code HTML simple. Vérifiez l affichage des pages dans le plus grand nombre de navigateurs. Vérifiez l affichage sous différentes résolutions d écran. Une façon simple d y arriver est de créer un fond d écran avec les bornes pour une résolution de 800x600 pixels et de 1024x768 pixels. IFT1147 - HTML 29 Évitez les noms de fichiers contenant des espaces, des caractères accentués etc. Utilisez les descriptions de contenus et non pas les formatages. Pour ce qui est de la présentation visuelle, utilisez les feuilles de style (CSS). Validez vos pages avec un outil de validation. IFT1147 - HTML 30 CSS (Cascading Style Sheet) CSS - Example Contrôle centralisé de la mise en page de documents HTML (polices de caractères, couleurs etc.). Intérêt: Séparation entre contenu et présentation Une seule feuille de style peut être utilisée par plusieurs fichiers HTML Un excellent exemple d utilisation de CSS est le site http://www.csszengarden.com page accédée le 28/08/04 Birdhouse de Justin Vilela IFT1147 - HTML 31 IFT1147 - HTML 32 Alain Pilon 2000-2010 8
Instructions CSS Style lié Une instruction CSS est composée d un mot clé d une (ou plusieurs) balise HTML suivie d une liste de propriétés que l on souhaite y appliquer. h1, h2, h3 { } color: red; background-color: yellow; IFT1147 - HTML 33 Lorsque utilisé comme style lié, fichier HTML et fichier CSS sont deux fichiers séparés. On ajoute alors une référence au fichier CSS à l en-tête (<head>) du fichier HTML <link rel= stylesheet type= text/css href= fichier.css > IFT1147 - HTML 34 Style incorporé Style intégré Une définition de style peut aussi être incorporée dans le fichier HTML grâce au conteneur <style> (dans le <head>) <head> <title>titre</title> <style> p { text-align: justify } </style> </head> Finalement, une définition de style peut être intégrée dans une balise HTML grâce à l attribut style <p style= text-align:justify > Mon paragraphe </p> IFT1147 - HTML 35 IFT1147 - HTML 36 Alain Pilon 2000-2010 9
Lié, incorporé ou intégré? Propriétés de couleurs Style lié: présentation globale du site Style incorporé: présentation de la page courante Style intégré: modification du style déjà défini Précédence: intégré > incorporé > lié color: couleur de l écriture background-color: couleur de l arrière-fond 3 façons de spécifier les couleurs: par leur nom (pour quelques couleurs) rgb(rouge, vert, bleu) #RRVVBB IFT1147 - HTML 37 IFT1147 - HTML 38 Propriétés de l arrière-fond Propriétés du texte Image en arrière-fond: background-image: url(nomfichier) Répétition de l image: backgroundrepeat qui peut prendre comme valeurs: Repeat-x Repeat-y No-repeat text-align spécifie l alignement du texte left right center justify text-decoration peut prendre comme valeurs none underline overline line-through blink IFT1147 - HTML 39 IFT1147 - HTML 40 Alain Pilon 2000-2010 10
Polices de caractères Dimensions font-family permet de spécifier la ou les polices de caractères à utiliser. Mieux vaut utiliser une référence générique puisque toutes les polices ne sont pas disponibles sur tous les ordinateurs serif sans-serif monospace width et height permettent de spécifier respectivement la largeur et la hauteur d un objet Très utile pour spécifier par exemple qu un tableau doit prendre la largeur de la page, ou qu un titre doit être entouré d une bordure utilisant 75% de la page. IFT1147 - HTML 41 IFT1147 - HTML 42 Divisions Classes Les conteneurs <div> et <span> permettent de regrouper respectivement des paragraphes et des caractères. Ainsi regroupés, on peut facilement leur associer une présentation. On veut souvent associer un certain style à quelques objets, mais pas à tous. Il suffit d associer une classe à tous les objets concernés. <style> p.important {color: red; background-color: white } </style> [ ] <p class= important > </p> IFT1147 - HTML 43 IFT1147 - HTML 44 Alain Pilon 2000-2010 11
Pseudo-classes Pseudo-classes - attention a:link un lien qui n a pas encore été visité a:visited un lien qui a déjà été visité a:hover la souris se trouve au-dessus du lien a:active le lien a été cliqué IFT1147 - HTML 45 Remarquez que plusieurs pseudo-classes peuvent être «vrais» en même temps. Par exemple, on pourrait se trouver au dessus d un lien qui a déjà été visité. Les présentations spécifiées dans a:hover et dans a:visited s appliquent alors en même temps. IFT1147 - HTML 46 Alain Pilon 2000-2010 12