Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

PAPA DIOP Professeur d’Informatique certifié Ingénieur analyste-programmeur SIB

PAPA DIOP Professeur d’Informatique certifié Ingénieur analyste-programmeur SIBDR 1 République du Sénégal Ministère de l’Enseignement Supérieur et de la Recherche Unité de Formation et de Recherche en Sciences Et Technologies Département Informatique Qu’est-ce qu’est le HTML ? Hyper Text Markup Language ou langage hypertexte est le langage à partir duquel sont créées les pages du web. Un site web est constitué d’un ou de plusieurs documents HTML, appelées aussi pages. Pour se déplacer d’une page à une autre on passe par l’intermédiaire d’hyperliens. Un document HTML est un document qui a l’extension HTML ou HTM indifféremment. C’est un simple fichier texte avec l’extension htm ou html. Le HTML n’est pas un langage de programmation comme le C ou le C++. Il existe sur le web des langages autres que le HTML. C’est le cas des langages dynamiques comme le JavaScript (.js), le perl (.pl ou .cgi), le PHP (.php ou .php3) ou l’ASP (.asp). Certains de ces langages vont s’interpréter dans le navigateur, exemple du JavaScript et d’autres sur le serveur comme c’est le cas pour les autres cités précédemment. Certains de ces langages vont d’ailleurs générer des pages HTML statiques. Le langage HTML est un ensemble de règles qui indiquent à un navigateur (IE, Netscape par exemple) comment afficher une page sur le navigateur. Un groupe, le consortium WWW ou W3C se charge de normaliser ce langage en précisant les directives. La norme actuelle s’appelle HTML 4 (tendance HTML 5). Licence 2 Informatique INF 2432 : Développement Web ----------- Responsables CM - TD/TP : Papa DIOP COURS DE HYPERTEXT MAKEUP LANGUAGE HTML PROMO 15-16, Année académique : 2016-2017 PAPA DIOP Professeur d’Informatique certifié Ingénieur analyste-programmeur SIBDR 2 Chapitre 1 : Concepts de bases du HTML Une page web est un fichier texte qui est interprété par votre navigateur. Ce fichier est composé de deux types d’éléments : le contenu et les indications pour l’affichage du contenu. Ces dernières sont nommées balises. Pour être reconnaissable par le navigateur, elles sont entourées des signes < > exemple : <body> Leur but étant d’indiquer la manière dont les données doivent être affichées, elles entourent le texte à visualiser. On nomme balise entrante celle qui indique le début du formatage et balise sortante celle qui indique la fin du formatage. La balise sortante se distingue par le signe / qui se trouve juste après < comme par exemple Bonjour qui donne Bonjour. A toute balise entrante doit correspondre une balise sortante, sauf pour quelques rares exceptions. Le navigateur appliquera sur le reste de votre page la commande de la balise entrante, s’il ne trouve pas de balise sortante. Tout cela semble bien compliqué à lire, mais dans la pratique vous l’appliquerez sans même vous en rendre compte. 1. Les navigateurs Comme je l’ai dit plus haut, votre page web est un fichier texte qui sera interprété par le navigateur qui va la lire. C’est ici que commencent les difficultés. Il faut savoir que, même si des règles très précises, sont établies par un organisme international nommé le W3C, les navigateurs ne les suivent pas toujours. Ce qui implique que votre page peut avoir un aspect différent sur Netscape et sur Internet Explorer. En HTML, vous n’avez pas la maîtrise totale de votre document. Les outils dont vous avez besoin Tout ce dont vous avez besoin pour créer votre première page HTML est dans votre ordinateur. Il vous faut un éditeur de texte tel que le Bloc -notes ou Notepad de Windows. Attention, ne prenez pas un traitement de texte, car ce dernier va introduire un formatage de texte complètement illisible par le navigateur. Vous avez besoin d’un navigateur. Lorsque vous maîtriserez bien le HTML, vous réaliserez que vous avez besoin de plusieurs navigateurs pour contrôler l’affichage de votre page. Il vous est bien évidement possible d’utiliser un éditeur WYS WYG tel que Dreamweaver ou Front Page. Je ne veux pas lancer ici la bataille entre les puristes qui tapent leur texte dans un éditeur de texte et ceux qui n’utilisent que des éditeurs WYSWYG. Chacun utilise l’instrument qui lui convient le mieux. Si vous êtes sous Windows, la méthode la plus simple et la moins chère consiste à taper votre texte dans Notepad, d’enregistrer votre texte avec l’extension .htm (et non pas .txt) et de voir le résultat en le visionnant dans Internet Explorer. (je demande pardon aux utilisateurs Linux et Mac... mais ils sauront trouver les outils correspondants) PAPA DIOP Professeur d’Informatique certifié Ingénieur analyste-programmeur SIBDR 3 Un document HTML est délimité par la balise <html></html>. Il se compose de deux parties : - L’entête qui contient des informations destinées au navigateur tel que le titre, les styles ou les balises de référencement. Cette partie, à part le titre, est invisible au visiteur de la page. Elle est délimitée par la balise <head></head> - le corps de la page qui est délimité par la balise <body></body>. Il contient tout ce que vous désirez transmettre à votre visiteur. Votre première page en HTML peut se présenter comme ceci : <html> <head> <title>Ma première page</title> </head> <body> Bonjour </body> </html> Quelques explications sur vos premières balises  <html> Début du document de type HTML.  <head> Début de l’entête  <title> Début du titre de la page.  </title> Fin du titre de la page.  </head> Fin de la zone d’en-tête.  <body> Début du corps.  </body> Fin du corps.  </html> Fin du document de type HTML. Les balises ne sont pas "case sensitive". Il est donc possible d’écrire <HTML>, <html>, <Html>, etc. Dans l’exemple, les lignes sont incrémentées ou décrémentées selon que l’on rencontre une balise entrante ou sortante. C’est une bonne habitude à prendre. Lorsque les pages deviennent plus grandes, il est plus facile de se retrouver dans la source du document et d’y trouver, par exemple, la balise que n’a pas été refermée par oubli. Vous constaterez que le nom de la page est affiché dans la barre du navigateur et que Bonjour apparaît sur la page. 2. Syntaxe d’une balise HTML Comme on l’a défini ci-haut, une balise est un mot clé du langage HTML compris entre les caractères "<" et ">". Ce mot clé est peut être précéder de caractère /. Il s’agit dans ce cas d’une balise de fermeture qui indique la fin des actions d’une autre balise du même mot clé appelée balise d’ouverture. Toute paire de balises ouverture/fermeture est appelée balise conteneur, exemple <body>.</body>. Il existe des balises qui ne possèdent pas de correspondance en fermeture, on appelle ces balises ponctuelles, exemple . PAPA DIOP Professeur d’Informatique certifié Ingénieur analyste-programmeur SIBDR 4 Une balise peut posséder une ou plusieurs caractéristiques définies par des attributs. Un attribut possède une valeur ou non. Syntaxes de balise: - Cas d’une balise conteneur <nombalise attribut1="val1" attribut2="val2" attribut3> </nombalise> - Cas d’une balise ponctuelle <nombalise attribut1="val1" attribut2="val2" attribut3 > La balise <body>. Cette balise détermine le corps du document. C’est dans cette balise qu’on intègre les éléments d’une page web, donc les titres, textes, images, tableaux, liens etc... 3. Les attributs de <body>:  bgcolor : Définit la couleur du fond de l’écran  text : Définit la couleur du texte  link : Définit la couleur des liens  vlink : Définit la couleur des liens déjà visités  alink : Définit la couleur des liens activés, c’est à dire quand le pointeur de la souris passe dessus  background : Définit l’image (gif ou jpeg) à utiliser comme fond d’écran  bgproperties : Si définie comme "fixed", l’image de fond ne défile pas (uniquement avec I.Explorer)  leftmargin : Définit la largeur de la marge de gauche en pixels  topmargin : Définit la largeur de la marge du haut en pixels Exemples: Page avec couleur de fond en blanc (couleur par défaut) <body bgcolor="white" text="black" link="blue" vlink="green" alink="red"> Page avec image de fond référencée par le fichier "images/fond.jpg" <body background="images/fond.jpg" text="black" link="blue" vlink="green" alink="red"> 4. Les commentaires dans un document HTML Vous pouvez commenter votre code source sans que le navigateur affiche ce commentaire. Cela peut s’avérer pratique, si vous êtes plusieurs à travailler sur le même document. Cette instruction est aussi utilisée lors de l’écriture d’un script JavaScript pour cacher le code aux navigateurs non compatibles. Syntaxe : <!.Texte à commenter. --> PAPA DIOP Professeur d’Informatique certifié Ingénieur analyste-programmeur SIBDR 5 Chapitre 2 : Mise en forme du texte 1. Formatage de texte simple Votre page contiendra très certainement du texte. Pour ne pas lasser le lecteur, ou pour mettre un mot en évidence, vous voudrez changer le style de votre texte. Les balises suivantes vous seront utiles : Balises Signification Résultats  Oui Pour mettre un texte en caractère gras Oui  Non Vous pouvez également utiliser la balise Non  Vous Pour mettre un texte en italique Vous  Nous Vous pouvez également utiliser la balise Nous  hier Pour souligner un texte Hier Pour barrer un texte (1 et 2)  <del>hier</del> (1)  <srike>hier</strike> (2)  1er Mettre un texte uploads/s1/ html-ut.pdf