docHMTL Exemple de fichier HTML Structure d`un document
download 
Plainte Transcription
HMTL Exemple de fichier HTML Structure d`un document
HMTL IFT1147 Programmation Serveur Web avec PHP 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 Un bref survol du langage HTML IFT1147 - HTML Exemple de fichier HTML Structure d’un document HTML 1. Définition du type de document; dans le cadre du cours, ce sera HTML 4.01 2. Conteneur 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> 1. <body> <h1>Exemple simple</h1> <p> Un fichier HTML très simple contenant un seul paragraphe. </p> </body> </html> IFT1147 - HTML 3 Exemple de fichier HTML 2. En-tête Le titre, l’auteur, la mise en page etc. Corps Le contenu principal de la page. IFT1147 - HTML 4 Balises HTML Une balise HTML est composée d’un mot clé placé entre deux chevrons <html>, </body>, <p>, <img> <!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 contenant un seul paragraphe. </p> </body> </html> IFT1147 - HTML 2 5 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 1 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 contenant un seul paragraphe. </p> </body> </html> IFT1147 - HTML 7 Entités de caractères - exemples é è ê À ô ç Ç é è ê À ô ç Ç & < > « » 8 <!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 contenant un seul paragraphe. </p> </body> </html> 9 Titres et paragraphes IFT1147 - HTML 10 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 <p> sert à définir un paragraphe. La balise <br> crée un retour à la ligne à l’intérieur d’un paragraphe. IFT1147 - HTML IFT1147 - HTML Exemple de fichier HTML & < > IFT1147 - HTML 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 ; 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. 11 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 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. 13 IFT1147 - HTML 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 IFT1147 - HTML 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>. 15 IFT1147 - HTML Listes - exemple <ul> <li>Lundi <ol> <li>17h30</li> <li>20h30</li> </ol> </li> <li>Mardi</li> <li>Mercredi</li> </ul> IFT1147 - HTML 14 Tableaux Conteneur Conteneur Conteneur Conteneur Lundi 1. 2. 16 17h30 20h30 Mardi Mercredi de de de de tableau: <table> ligne: <tr> cellule: <td> cellule de titre: <th> Les tableaux sont aussi souvent utilisés pour la présentation visuelle du contenu. 17 IFT1147 - HTML 18 3 Tableaux - <thead> et <tbody> Tableaux - exemple <table> <tr> <th>Nom</th> <th>Devoir 1</th> </tr> <tr> <th>Albert</th> <th>9.4</th> </tr> <tr> <th>Alice</th> <th>10</th> </tr> </table> 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 Horizontalement: <td colspan=“2“> Verticalement: <td rowspan=“2“> 21 Images - formats JPEG Le format de choix pour les photos GIF Pour les graphiques qui peuvent être animés PNG Aussi pour les graphiques IFT1147 - HTML 10 20 L’image n’est pas disponible L’usager ne souhaite pas afficher les images (si sa connexion est lente par exemple) IFT1147 - HTML 22 Redirection automatique Trois formats d’image sont supportés par la vaste majorité de navigateurs. Alice L’attribut obligatoire alt spécifie un texte à afficher à la place de l’image si: 9.4 La balise <img> permet d’insérer des images <img src=“fichier“ alt=“des“> Étendre les dimensions d’une cellule IFT1147 - HTML Albert Images Plusieurs paramètres permettent d’influencer la disposition des tableaux. Bordure: <table border=“1“> Devoir 1 IFT1147 - HTML Tableaux - paramètres Nom 23 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 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 IFT1147 - HTML http://www.w3.org http://www.htmlhelp.com Une façon simple d’obtenir des conseils d’utilisation sur chaque balise http://www.google.com 25 Bonnes pratiques - 1 Comme d’habitude … IFT1147 - HTML 26 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 Toutes les spécifications 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
