Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Plan du cours
Les langages de programmation
Introduction au langage HTML
Le langage HTML
Motivation
Pour tre compris par un ordinateur, un algorithme doit tre traduit dans un langage spcifique, quon appelle langage de programmation. On obtient ainsi ce quon appelle un programme informatique qui contient lensemble des actions conscutives que lordinateur doit excuter. Ces actions sont appeles instructions. Le langage utilis par le processeur de lordinateur est appel langage machine. Un programme en langage machine est uniquement constitu dune suite de 0 et de 1 (du binaire) .
Demba SOW / Doctorant en Cryptologie 5
Motivation
Il est difficile de comprendre et dcrire des programmes en langage machine. Ainsi il est plus pratique de raliser un programme dans un langage plus comprhensible par lhomme et de le traduire ensuite en langage machine laide dun programme spcialis. Selon la mthode de traduction, on distingue les langages interprts et compils.
Langages interprts
Un programme crit dans un langage interprt a besoin, pour chaque excution, dun programme annexe appel interprteur qui va lire le code source pour traduire et faire excuter une une, chacune des interprteurs. Dans ce cas, il ny a pas de gnration de programme excutable.
Exemple: C, Pascal .
Effectivement, la prsentation d'une page Web sur le modle du DOS ne serait certainement gure apprcie. C'est pourquoi, l'organisme W3C(World Wide Web Consortium) charg de la standardisation des technologies du Web, a labor un langage de dveloppement appel HTML (Hyper Text Market Language) fonctionnant sur l'ensemble des plateformes existantes ; Windows, Linux, MacOS, etc., mais galement des navigateurs (browsers) comme Netscape Communicator, Internet Explorer, Mozilla, etc.
Depuis l'adoption de la quatrime version en 1997, HTML est devenu un outil de dveloppement puissant et incontournable. La conception des pages Web est devenue d'une extrme simplicit condition de connatre au minimum les bases de ce langage.
Demba SOW / Doctorant en Cryptologie 9
11
12
Prsentation de HTML
Le langage HTMLHyper Text Markup Langage est dfini par le World Wide Web Consortium (W3C) comme un langage de description de document. Il permet de concevoir des pages internet et dtablir des liens entre elles afin de raliser un site internet complet. HTML est le langage de balisage hypertexte utilis dans le Web (HyperText Markup Language). Ce n'est pas un langage de programmation proprement dit. Ce sont "simplement" des balises pour mettre en forme (avec des liens, en tableau, etc...) du texte et des images.
13
Les Outils
De nombreux logiciels de dveloppement HTML sont apparus sur le march permettant parfois de concevoir un site Web complet sans une matrise parfaite du langage HTML. Bien qu'un document HTML peut-tre rdig dans n'importe lequel des diteurs de texte comme Notepad puis de renommer le fichier *.txt en *.htm ou *.html quand vous serez aguerris il est conseill d'utiliser un logiciel ddi cet emploi afin de profiter des fonctionnalits et des assistants que la plupart offre.
14
Les Outils
Voici quelques uns des diteurs HTML:
WebExpert est pris par les professionnels et constitue le meilleur rapport qualit/prix.
Les Outils
En bref pour crer une page Web en HTML, vous avez besoin de:
Un diteur HTML (Notepad ou WordPad fera trs bien l'affaire par exemple), pour crer votre page HTML;
Un navigateur (Internet Explorer, Netscape, Mozilla, etc...), pour visualiser le rsultat;
NB: vous n'aurez pas besoin d'tre connect Internet pour crer votre site.
16
17
Dfinitions
Les balises sont des instructions HTML. Elles sont reconnaissables leur forme particulire. En effet, chacune est encadre par les signes
infrieur (" < ") suprieur (" > "). <Instruction HTML>
18
Dfinitions
Le nom de la balise (contenu entre les crochets) n'est pas sensible la casse. Il peut tre crit indiffremment en majuscule, en minuscule ou en un mlange des deux. L'attribut d'une balise peut tre dfini comme une variable qui existe lintrieur da la balise. Il se met sous la forme suivante: nom_attribut="valeur"
Exemple:
La balise utilise pour faire un lien, a pour nom "a", et pour nom d'attribut "href".
Ainsi, <a href="http://www.google.fr">Google</a> permet de faire un lien vers la page principale du site de Google. Dans ce cas, la valeur de l'attribut "href" est donc "http://www.google.fr".
19
<title>Mon titre</title>
</head> <body> Voici mon premier document!
</body>
</html>
Sauvegardez le document avec comme extension ".htm" ou ".html", et comme type "texte seulement" ; puis doublecliquez sur le document: votre navigateur par dfaut sera alors ouvert sur la page.
Demba SOW / Doctorant en Cryptologie 20
22
Balises simples
<br>: passage la ligne. Cette balise na pas de balise de fermeture;
Les commentaires:
<! -- ceci est un commentaire dans mon fichier HTML --> <!-- il n'apparaitra donc pas dans le texte de mon document -->
Demba SOW / Doctorant en Cryptologie 23
24
Cette balise nous affiche une phrase Mon texte en couleur rouge. Dautres couleurs sont disponibles mais lcriture se fait en anglais. Exemple:
<font color=" yellow"> Mon texte </font>
25
Lattribut de cette balise body nous affiche une page en couleur rouge Dautres couleurs sont disponibles mais lcriture se fait en anglais. Exemple:
<body bgcolor=" yellow"> Mon texte </body>
26
Taille relative:
<font size=-2>Mon texte</font> <font size=-1>Mon texte</font> <font size=+1>Mon texte</font> <font size=+2>Mon texte</font>
Demba SOW / Doctorant en Cryptologie 27
<H2>Mon texte</H2>
<H3>Mon texte</H3> <H4>Mon texte</H4> <H5>Mon texte</H5> <H6>Mon texte</H6>
Demba SOW / Doctorant en Cryptologie 28
29
30
31
<ul type="disc"> <ul type="disc"> <ul type="circle"> <ul type="circle"> <ul type="square"> <ul type="square">
Demba SOW / Doctorant en Cryptologie 32
<marquee>instructions</marquee> Cette balise nous permet de dfiler les instructions saisies au clavier.
Exemple: <marquee bgcolor="yellow" width="40%" direction="right" loop="0"> Bonjour Monde </marquee>
<blink>instructions</blink> Cette balise nous permet de clignoter les instructions saisies au clavier.
33
Donne une couleur au fond du document HTML. Indique le nom du document Indique le type de bouton choisi
34
35
36
A. Historique B. Prsentation
II.CHAPITRE 2: Les langages 1. Introduction 2. Objectifs Dmarche Mthodologie
Ecrire un programme HTML qui nous permet dafficher la page web cidessus en couleur jaune.
37
38
Les liens
Les chemins daccs Dfinition et intrts des liens Types de liens
40
Les liens
Les chemins daccs Les chemins d'accs peuvent tre: absolus: c'est--dire qu'on spcifie l'adresse complte de ce quoi on fait rfrence.
Exemple: C:\Images\mon_image.gif pour une image ou http://www.google.fr pour un site.
41
Les liens
Dfinition et intrts des liens Les liens sont des panneaux dindicateurs qui nous permettent de parcourir des pages web lis.
En consquence, les liens prennent une place prpondrante et essentielle dans le fonctionnement global du World Wide Web.
Les liens assurent, donc, la fonction de guider l'internaute dans ses navigations et de lui donner les moyens de mener ses investigations en allant recueillir des informations au travers d'une multitude de pages ou de sites. Cela demeure le principe fondamental d'Internet.
Demba SOW / Doctorant en Cryptologie 42
Les liens
Types de liens Il existe plusieurs types de liens:
Les liens hypertextes Les liens hyper images Les liens locaux
43
Les liens
Les liens hypertextes Les liens hypertextes sont des liens construits sur du texte. L'utilisateur devra cliquer sur un mot ou un groupe de mot pour activer un renvoi vers un document cible. La commande <a href=" chemin daccs "> Texte </a> dfinit le lien vers une page sur le Web.
44
Les liens
Les liens hyper images
Les liens hyper images sont des images qui servent de liens vers un document cible.
Ces liens fonctionnent exactement de la mme manire que les liens hypertextes.
La commande suivante dfinit le lien vers une page sur le Web : <a href="Adresse cible"> <img src="Adresse de l'image"> </a>
45
Les liens
Les liens hyper images Exemple:
Aprs avoir cr une page web, saisissez le programme suivant qui nous permet daller dans la premire page travers un lien image .
<html> <head>
<title> Page de liens des images</title> </head> <body> <a href =" chemin daccs "><img src="Adresse de l'image"></a> </body> </html>
46
Les liens
Objectif des liens hyper images
En effet, les images offrent l'utilisateur une surface cliquable plus ou moins large selon leurs dimensions. Par consquent, un dcoupage en zones distinctes d'un lment graphique peut tre un atout indniable.
Imaginons un utilisateur ayant besoin de fabriquer des liens par rapport aux rgions du Sngal, dans cette optique, il lui suffirait de trouver une image adquate puis de lui appliquer des zones de sensibilits diffrentes afin de crer une multitude de liens cliquables partir d'une seule image.
Demba SOW / Doctorant en Cryptologie 47
Les liens
Les images en coordonnes: La balise map entame la dfinition des zones sensibles de l'image.
La balise area permet de dcrire une zone sensible. Les attributs de cette balise sont:
shape="Forme" coords="Coordonnes" href="Adresse cible"
48
Les liens
Les images en coordonnes
Forme Description
Dfinit une zone rectangulaire Dfinit une zone circulaire
Coordonnes
X1, Y1 = Coin suprieur gauche X2, Y2 = Coin infrieur droit X, Y = Centre du cercle R = Rayon du cercle
Exemple
<area shape="rect" coords="X1, Y1, X2, Y2 href="doc.htm"> <area shape="circle" coords="X, Y, R" href="doc.htm"> <area shape="polygon" coords="X1,Y1,X2,Y2 ,X3,Y3 href="doc.htm">
rect circle
polygon
X1, Y1 = Premier point du polygone X2, Y2 = Second point du polygone Xn, Yn = Nime point du polygone
49
Les liens
Les liens locaux Les liens internes permettent de crer des renvois l'intrieur du mme document HTML. Pour faire fonctionner ces liens, il suffit de dclarer une ancre dans le document puis de crer le renvoi vers cette ancre. La commande <a name="Nom d'ancre"> dfinit l'ancre atteindre.
La commande <a href="#Nom d'Ancre"> dfinit le lien. La commande </a> ferme le lien.
Demba SOW / Doctorant en Cryptologie 50
Les liens
Les liens locaux
Les tableaux
Dfinition
Les tableaux sont dfinis avec la balise <table>. Le tableau est divis en lignes par la balise <tr>. Chaque ligne est divise en cellules par la balise <td>. <table> et </table> servent respectivement ouvrir une nouvelle table, et fermer la table courante; <tr> et </tr> servent dfinir une ligne du tableau; <td> et </td> servent dfinir une cellule du tableau ( noter que </TD> n'est pas indispensable, pour la mme raison que </LI>). <th> et </th> servent dfinir un titre de ligne ou de colonne (le texte apparat alors centr en gras dans la cellule correspondante); <caption> et </caption> servent dfinir un titre pour le tableau.
52
Les tableaux
Les attributs de la balise <table>
Dans cette partie nous allons numrer les attributs de la balise table qui sont les plus utiliss:
Lattribut border qui nous permet de dfinir la bordure dun tableau. Cet attribut prend comme valeur les nombres entiers (0,1,2,3, . . .). Lattribut bordercolor nous permet de dfinir la couleur de la bordure du tableau. Cet attribut prend comme valeur les couleurs en anglais. Lattribut bgcolor nous permet de donner une couleur de fond du tableau.
Demba SOW / Doctorant en Cryptologie 53
Les tableaux
Exemple:
Saisissez le programme suivant qui nous permet dafficher un tableau:
<html> <head> <title>Page tableau</title> </head> <body> <table border=1 bgcolor="red "> <caption>Mon tableau</caption> <tr> <th>Nom 1</th> <th>Nom 2 </th> </tr> <tr> <td>Cellule 1 </td> <td>Cellule 2 </td> </tr> </table> </body> </html>
Demba SOW / Doctorant en Cryptologie 54
Les formulaires
Dfinition
Le formulaire dans une page HTML, permet de transmettre des informations fournies par l'utilisateur vers un serveur. Le formulaire au sein d'un site Web peut tre utilis pour rcuprer des informations sur l'utilisateur dans le but de faire des statistiques sur le type de frquentation ou le taux de satisfaction. La commande <form> marque le dbut du formulaire. La commande </form> marque la fin du formulaire.
Demba SOW / Doctorant en Cryptologie 55
Les formulaires
Les attributs de la balise <form>
La balise <form> possde diffrents attributs spcifiant son nom, un cadre de destination aprs la soumission du formulaire.
L'attribut name="Nom du formulaire" dfinit un nom pour le formulaire courant. L'attribut target="Nom du cadre" dfinit le cadre destinataire qui doit afficher les rsultats du formulaire. L'attribut method="Type de transmission" dfinit le type de transmission. L'attribut action="Adresse cible" dfinit l'adresse destinatrice sur le site.
Demba SOW / Doctorant en Cryptologie 56
Les formulaires
Les types de transmission
Il y a deux mthodes d'accs au serveur http, GET et POST La mthode GET fait en sorte que l'information passe par la variable QUERY_STRING pour interprter les donnes. Elle permet de transfrer une faible quantit de donnes au serveur. La mthode POST permet d'envoyer des informations plus importantes au serveur avec une quantit de donnes importantes, et cela en toute confidentialit. Remarque: Dans tous nos programme nous utilisons que de la mthode POST
57
Les formulaires
Exemple:
Saisissez le programme suivant qui nous permet dafficher un formulaire
<html> <head> <title>Page formulaire</title> </head> <body> <form action=page1.html method=post> <center><input type=submit value=Voir la page></center> </form> </body> </html>
Remarque: Vous devez construire la page1.html qui est la valeur de lattribut action .
Demba SOW / Doctorant en Cryptologie 58
Les formulaires
Les zone de texte multi-lignes
Les balises <textarea> instructions </textarea> nous permettent de dfinir une zone de texte avec plusieurs lignes. Les attributs de la balise <textarea> les plus importants sont:
Lattribut rows dfinit le nombre de lignes.
Lattribut cols dfinit le nombre de colonnes.
59
Les formulaires
Les zone de texte multi-lignes
Exemple: Changez le programme prcdent en mettant une zone de saisie.
<html> <head> <title>Page formulaire</title> </head> <body> <form action=page1.html method=post> <center> <h1>La zone de texte pour saisir</h1><br> <textarea rows=15 cols=15></textarea><br><br><br> <input type="submit" value="Voir a page1"> </center> </form> </body> </html>
Demba SOW / Doctorant en Cryptologie 60
Les formulaires
Les select
Les select dfinissent une liste de choix affichant une srie d'items sous forme soit de liste droulante, soit de liste simple.
61
Les formulaires
Les select
Les formulaires
Les select
Les balises <option> choix </option> La balise <option> dclare une entre dans la liste. La balise </option> ferme l'entre prcite. Lattribut selected est un attribut de la balise <option> qui nous permet de dfinir une slection par dfaut.
63
Les formulaires
Les select
Exemple: La liste droulante Saisissez le programme suivant :
<html> <head> <title>Page formulaire</title> </head> <body> <select > <option selected> Premier item </option> <option> Second item </option> <option> Troisime item </option> <option> Quatrime item</option> <option> Cinquime item </option> </select> </body> </html>
64
Les formulaires
Les select
Exemple: La liste simple
Saisissez le programme suivant : <html> <head> <title>Page formulaire</title> </head> <body> <select size=6> <option selected> Premier item </option> <option> Second item </option> <option> Troisime item </option> <option> Quatrime item</option> <option> Cinquime item</option> </select> </body> </html>
65
Les frames
La structure
Les cadres (frames) permettent de fractionner la surface d'affichage en plusieurs parties afin d'afficher diffrentes pages HTML simultanment dans le navigateur. Ces cadres servent notamment afficher d'un ct une srie de liens comme un menu ou un sommaire et de l'autre ct des pages contenant des informations en relation. La commande <frameset> marque le dbut de la dfinition des cadres.
Les frames
La cration Les cadres sont crs au sein des balises <frameset>. La balise <frame> cre un cadre dans le document HTML. Cette balise possde deux attributs essentiels, un spcifiant la page cible et l'autre dfinissant un nom pour le cadre.
L'attribut src="Adresse du contenu" dfinit le contenu du cadre. L'attribut name="Nom du cadre" permet de nommer le cadre.
67
Les frames
Quelques attributs de <frameset>
L'attribut cols="Largeur1,Largeur2"dfinit une largeur pour les cadres. L'attribut rows="Hauteur1,Hauteur2" dfinit une hauteur pour les cadres. Remarque:
Les valeurs de ces attributs sont en pourcentage.
Lorsquon utilise les frameset, on nutilise pas la balise <body>
Demba SOW / Doctorant en Cryptologie 68
Les frames
Exemple: <html> <head> <title>Un titre pertinent</title> </head> <frameset cols="20%,80%"> <frame> </frameset> </html>
69
70
Projet
71
Fin du cours
72