IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML 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 Structure d un document 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 Balises HTML IFT1147 - HTML 5 Une balise HTML est composée d un mot clé placé entre deux chevrons <html>,,, <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 IFT1147 - HTML 6 1
Entités de caractères 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 Entités de caractères - exemples é è ê À ô ç Ç é è ê À ô ç Ç & & < < > > «» IFT1147 - HTML 9 IFT1147 - HTML 10 Titres et paragraphes Jeux de caractères Il existe 6 niveaux de titres <h1>, <h2>,, <h6> <h1> est le conteneur pour le titre le plus important. Le conteneur sert à définir un paragraphe. La balise <br> crée un retour à la ligne à l intérieur d un paragraphe. IFT1147 - HTML 11 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 12 2
Unicode et UTF8 Commentaires 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 13 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 14 Liens Listes 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 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>. IFT1147 - HTML 15 IFT1147 - HTML 16 Listes - exemple Tableaux <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 Conteneur de tableau: <table> Conteneur de ligne: Conteneur de cellule: <td> Conteneur de cellule de titre: <th> Les tableaux sont aussi souvent utilisés pour la présentation visuelle du contenu. IFT1147 - HTML 17 IFT1147 - HTML 18 3
Tableaux - <thead> et <tbody> Tableaux - exemple 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). <table> <th>nom</th> <th>devoir 1</th> <th>albert</th> <th>9.4</th> <th>alice</th> <th>10</th> </table> Nom Albert Alice Devoir 1 9.4 10 IFT1147 - HTML 19 IFT1147 - HTML 20 Tableaux - paramètres Images 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 > 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) IFT1147 - HTML 21 IFT1147 - HTML 22 Images - formats Redirection automatique 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 Le langage HTML permet de rediriger le navigateur vers une nouvelle page. Il faut écrire dans le conteneur <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 23 IFT1147 - HTML 24 4
Validation Ressources 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 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.google.com Comme d habitude IFT1147 - HTML 25 IFT1147 - HTML 26 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 27 Évitez les noms de fichiers contenant des espaces, des caractères accentués etc. Utilisez les descriptions de contenus et non pas les formattages. Pour ce qui est de la présentation visuelle, utilisez les feuilles de style (CSS). IFT1147 - HTML 28 5