Remerciez-le!

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

Université Ibn Zohr Agadir Année universitaire: 2010-2011 Ecole Nationale des S

Université Ibn Zohr Agadir Année universitaire: 2010-2011 Ecole Nationale des Sciences Appliqué Section: ENSA -2 Département: Génie Informatique Module: Programmation Web Responsable: Prof. A. Elyousfi Le langage HTML (HyperText Markup Abderrahmane ELYOUSFI elyousfiabdo@ieee.org Département Génie Informatique 1 (HyperText Markup Language) Plan du cours Introduction Structure d’un document HTML La Mise en forme du texte Les Listes Les Liens Les Liens Les Images Les Tableaux Les Frames Les Formulaires Conclusion 2 Abdarrahmane ELYOUSFI Introduction au langage HTML HTML (HyperText Markup Language) est un langage de balisage qui permet de structurer le contenu des pages web. C’est un langage de description des données, et non un langage de programmation. Les instructions de ce langage sont interprétées par les différents Les instructions de ce langage sont interprétées par les différents navigateurs et les résultats apparaissent sur l’écran. le langage HTML est un standard, c’est-à-dire qu’il s’agit de recommandations publiées par un consortium international : le World Wide Web Consortium (W3C). Il existe à ce jour plusieurs versions différentes de ce langage ayant toutes une même base commune, il y a HTML 3 Abdarrahmane ELYOUSFI Historique du langage HTML Historiquement, les langages de balisage sont issus du langage SGML (Standard Generalized Markup Language) créé en 1986 pour structurer des contenus très divers. 1990 : HTML est crée par Tim Berner-Lee au Centre Europeen de Recherche Nucleaire (CERN) 1995 : HTML 2.0 normalisation par l'IETF (Internet Engineering Task Force) 1996 : HTML 3.2 ajout des tables, …, etc. 1998 : HTML 4.01 ajout des feuilles de styles, des frames, d'objets, etc. 2000 : XHTML 1.0 reformulation de HTML 4 en XML 1.0 2002 : XHTML 2.0 en cours de spécification 4 Abdarrahmane ELYOUSFI Visualisation du code source de la page g 5 Abdarrahmane ELYOUSFI Visualisation du code source de la page n 6 Abdarrahmane ELYOUSFI La séparation de la forme et du fond F Information textuelle Mise en forme HTML Navigateur Espace de visualisation 7 Abdarrahmane ELYOUSFI Sémantique du langage HTML Une balise est un mot clé, une commande du langage insérée dans le corps du document pour introduire un effet particulier. <balise> texte formaté</balise> Le caractère < indique le début d'une balise, Le caractère > indique la fin d'une balise, <balise>: balise ouvrante </balise>: balise fermante Les caractères en dehors d'une balise <...> sont traités en fonction de la balise qui les précède, 8 Abdarrahmane ELYOUSFI Règles syntaxiques d’écriture Pour chaque balise ouvrante doit correspondre une balise fermante : Si on imbrique plusieurs balises, elles doivent être refermées dans l'ordre inverse : <balise> texte formaté</balise> l'ordre inverse : En HTML, on trouve des balises qui n’ont pas de balise fermante. <b1> <b2> texte formaté</b2> </b1> <br/> <! Commentaire --> 9 Abdarrahmane ELYOUSFI Règles syntaxiques (Notion d’attribut) Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires. Voici un exemple d’attribut pour la balise <p> (balise définissant un paragraphe), permettant de spécifier que le texte doit être aligné sur la droite : Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant avoir (aucune,) une ou plusieurs valeurs. <p align="right"> Exemple de paragraphe </p> 10 Abdarrahmane ELYOUSFI Structure d’un document HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> Le doctype précise au navigateur les informations sur le document, la version du langage html, …., etc. L’élément <html> est le conteneur de Informations relatives au document </head> <body> Informations à présenter sur l’écran </body> </html> L’élément <html> est le conteneur de premier niveau placé en haut de la hiérarchie de tous les éléments du document. L’élément <head> englobe un certain nombre d’informations comme <title>, <base>, <link>, <meta>, <script>, <style> dont nous allons étudier les rôles respectifs. L’élément <body> est le conteneur de l’ensemble des éléments textuels et graphiques d’une page web. 11 Abdarrahmane ELYOUSFI Exemple de page HTML <html > <head> <title>Exemple d’une page web</title> </head> <body> <h1>Introduction à la programmation web</h1> <h2>Serveurs web</h2> <h2>Serveurs web</h2> <p>Chaque programme est écrit par un langage spécifique s’exécute par un type de programme serveur. Le type du programme serveur utilisé va conditionner les langages possibles. Voyons quelques exemples :</p> <ul> <li>serveur IIS (Internet Information Services) : langage ASP, ASP.NET</li> <li> serveur Sun Java System Web Server : langage JSP, ASP, PHP</li> <li> serveur Apache : PHP, Perl, Ruby, Python</li> </ul> <h2>Client web</h2> </body> </html> 12 Abdarrahmane ELYOUSFI Exemple de page HTML f 13 Abdarrahmane ELYOUSFI Exemple de page HTML <html> <head> <title> Titre externe du document </title> </title> <Meta NAME=“keywords” content=“liste des mots clés à l’attention des moteurs de recherchee”> </head> <body> Informations à présenter sur l’écran </body> </html> 14 Abdarrahmane ELYOUSFI Structure d’un document HTML L’entête du document contient des informations pour le référencement de la page. Ces données sont délimitées par les balises <HEAD> et </HEAD>, Le corps du document contient tous les éléments visibles à afficher dans le navigateur. Les éléments visibles sont compris entre les balises <BODY> et </BODY>, 15 Abdarrahmane ELYOUSFI Mise en forme Mise en forme 16 Abdarrahmane ELYOUSFI Mise en forme des titres de section <h1>Titre de niveau 1</h1> Titre de niveau 1 <h2>Titre de niveau 2</h2> Titre de niveau 2 Titre de niveau 2 <h3>Titre de niveau 3</h3> Titre de niveau 3 ... ... ... ... ... ... <h6>Titre de niveau 6</h6> Titre de niveau 6 17 Abdarrahmane ELYOUSFI Exemple de page HTML <html > <head> <title> Les différents niveaux de titre </title> </head> <body> <h1>Titre de niveau 1</h1> <h2>Titre de niveau 2</h2> <h3>Titre de niveau 3</h3> <h4>Titre de niveau 4</h4> <h5>Titre de niveau 5</h5> <h6>Titre de niveau 6</h6> </body> </html> 18 Abdarrahmane ELYOUSFI Exemples 19 Abdarrahmane ELYOUSFI Mise en forme des paragraphes Le format de document HTML permet de gérer la notion de paragraphe à l’aide des tags <p></p> La balise <p> provoque un saut de ligne avant le paragraphe, suivit de l’insertion d’une ligne vierge après la fin du paragraphe. paragraphe. Un paragraphe ne peut en contenir un autre (le navigateur les interprète comme des paragraphes successifs...), Cette balise peut utilisée l’attribut Align: Pour forcer un retour à la ligne dans un paragraphe il faut utiliser la balise <br>. Pour forcer le navigateur à interpréter l’espace il faut utiliser . Align = {left (par défaut), right, center, justify} 20 Abdarrahmane ELYOUSFI Exemple de page HTML <html > <head><title>Exemple d’une page web</title> </head> <body> <h1>Chapitre 1: Introduction à la programmation web</h1> <h2>Serveurs web</h2> <p>Chaque programme est écrit par un langage spécifique s’exécute par un <p>Chaque programme est écrit par un langage spécifique s’exécute par un type de programme serveur.</P> <P>Le type du programme serveur utilisé va conditionner les langages possibles. Voyons quelques exemples :</p> <h2>Client web</h2> <p align=″justify″>Le client est couramment appelé un navigateur. Les navigateurs les plus connus étant Netscape, Internet Explorer, Lynx, Mosaic, Opera,. </p> <p>Les plus courant acceptent des extensions (Plug-In) permettant d’étendre leurs capacités (lire des vidéo, recevoir du son ou des films en flot continu,...).</p> </body> </html> 21 Abdarrahmane ELYOUSFI Exemples b 22 Abdarrahmane ELYOUSFI Mise en forme du texte Emphasis <em> Voici un exemple de rendu de <em> Strong <strong> Voici un exemple de rendu de <strong> Voici un exemple de rendu de <strong> Indice <sub> Test Voici un exemple de rendu de <sub> Exposant <sup> Test Voici un exemple de rendu de <sup> 23 Abdarrahmane ELYOUSFI Mise en forme du texte Gras <b> Voici un exemple de rendu de <b> Italique <i> Voici un exemple de rendu de <i> Souligné <u> Souligné <u> Voici un exemple de rendu de <u> Barré <s> Voici un exemple de rendu de <s> Petit <small> / Grand <big> Voici un exemple de rendu de <small> Voici un exemple de rendu de <big> 24 Abdarrahmane ELYOUSFI Exemples de mise en forme “complexe” Les balises de mise en forme sont associatives et il est possible de les combiner... <em>texte important</em> <strong>texte très important</strong> <strong>texte très important</strong> <strong><em>texte encore plus important</em></strong> <strong><em>texte</em>encore plus important</strong> L’ordre de fermeture des balises doit être inverse à l’ordre d’ouverture de ces dernières. 25 Abdarrahmane ELYOUSFI Exemple de page HTML <html > <head> <title>Exemple d’une page web</title> </head> <body> <h1>Chapitre 1: Introduction à la programmation en langage C</h1> <h2>Exercice 1:</h2> <p>soit x<sub> 1</sub>, x<sub> 2</sub>, x<sub> 3 </sub> trois variables, : </p> <p>Ecrire un programme en langage C qui permet de :<br/> <p>Ecrire un programme en langage C qui permet de :<br/> -Donner à l’utilisateur de saisir trois valeurs du clavier<br/> -stocker ces valeurs dans les trois variables ci-dessus<br/> -afficher la valeur <em><strong>maximale</strong></em></p> <h2>Exercice 2:</h2> <p>soit a, b et c trois variables, : </p> <P>F(x)=aX<sup>2</sup>+bX+C</p> Ecrire un programme en langage C qui donne les <em><strong>solutions de l’&eacutequation:</em></strong><br> <p>F(x)=O</p> </body> </html> 26 Abdarrahmane ELYOUSFI Exemple b 27 Abdarrahmane ELYOUSFI Texte préformaté ... uploads/Ingenierie_Lourd/ 01-html-ensa.pdf