Programmation PHP Septembre 2010

Transcription

1 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 IFT HTML 2 Exemple de fichier HTML Structure d un document HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>exemple simple</title> </head> <body> <h1>exemple simple</h1> <p> Un fichier HTML très simple avec un seul paragraphe. </p> </body> </html> IFT HTML 3 1. Définition du type de document; dans le cadre du cours, ce sera HTML Conteneur HTML 1. En-tête Le titre, l auteur, la mise en page etc. 2. Corps Le contenu principal de la page. IFT HTML 4 Alain Pilon

2 Exemple de fichier HTML Balises HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>exemple simple</title> </head> <body> <h1>exemple simple</h1> <p> Un fichier HTML très simple avec un seul paragraphe. </p> </body> </html> IFT 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> IFT HTML 6 Exemple de fichier HTML Entités de caractères <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>exemple simple</title> </head> <body> <h1>exemple simple</h1> <p> Un fichier HTML très simple avec un seul paragraphe. </p> </body> </html> IFT 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 ; IFT HTML 8 Alain Pilon

3 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 & IFT HTML 9 IFT HTML 10 Exemple de fichier HTML Titres et paragraphes <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>exemple simple</title> </head> <body> <h1>exemple simple</h1> <p> Un fichier HTML très simple avec un seul paragraphe. </p> </body> </html> IFT 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. IFT HTML 12 Alain Pilon

4 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. IFT 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! IFT HTML 14 Commentaires Liens Vous pouvez insérer des commentaires dans le code source HTML  Un commentaire peut inclure plusieurs lignes. Soyez conscients que les commentaires sont visibles (dans le code source HTML) pour les usagers de votre site. IFT HTML 15 Un lien est un pointeur vers un autre document <a href="url"> </a> L URL peut prendre trois formes: Lien externe: Lien relatif:../../index.html Position interne: index.html#position IFT HTML 16 Alain Pilon

5 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. 17h h30 Mardi Mercredi IFT HTML 17 IFT 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). IFT HTML 19 IFT HTML 20 Alain Pilon

6 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 > IFT HTML 21 IFT 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 IFT HTML 23 IFT HTML 24 Alain Pilon

7 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= Ceci est très utile si vous devez déménager un site vers une nouvelle adresse. IFT 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 IFT HTML 26 Validation avec Firefox Ressources Le navigateur Firefox ( 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. Toutes les spécifications HTML Une façon simple d obtenir des conseils d utilisation sur chaque balise Un ensemble de tutoriels pour l apprentissage des langages Web Comme d habitude IFT HTML 27 IFT HTML 28 Alain Pilon

8 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. IFT 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. IFT 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 page accédée le 28/08/04 Birdhouse de Justin Vilela IFT HTML 31 IFT HTML 32 Alain Pilon

9 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; IFT 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 > IFT 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> IFT HTML 35 IFT HTML 36 Alain Pilon

10 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 IFT HTML 37 IFT 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 IFT HTML 39 IFT HTML 40 Alain Pilon

11 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. IFT HTML 41 IFT 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> IFT HTML 43 IFT HTML 44 Alain Pilon

12 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é IFT 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. IFT HTML 46 Alain Pilon