Introduction à la programmation web

Introduction à la programmation web
Nouvelles Technologies
Dr. Thé Van LUONG
[email protected]
HEIG-VD Switzerland
7 octobre 2016
1/34
7 octobre 2016
1 / 34
Plan
1
État de l’art des langages orientés web
2
Le langage HTML
2/34
7 octobre 2016
2 / 34
Plan
1
État de l’art des langages orientés web
2
Le langage HTML
2/34
7 octobre 2016
2 / 34
Plan
1
État de l’art des langages orientés web
2
Le langage HTML
3/34
État de l’art des langages orientés web
7 octobre 2016
3 / 34
État de l’art des langages orientés web
Technologies web
Voici les différentes techniques de programmation web :
Le langage HTML
Les feuilles de style CSS
Le langage Javascript
Le langage PHP
Macromedia Flash / HTML 5
Les applets Java
Ajax
XHTML, XML et Java
4/34
État de l’art des langages orientés web
7 octobre 2016
4 / 34
État de l’art des langages orientés web
Le langage HTML
Qu’est-ce que c’est le HTML ?
HTML (Hypertex Markup Language) est le langage universel utilisé
pour communiquer sur le Web. Il s’agit d’un langage constitué de
balises conçu pour écrire des pages webs.
Le HTML omniprésent sur le web.
La majorité des pages web sont au format HTML. Le navigateur
internet interprète le code HTML de chaque page web, pour le
transmettre sous forme d’informations visuelles.
5/34
État de l’art des langages orientés web
7 octobre 2016
5 / 34
État de l’art des langages orientés web
Le langage HTML
Qu’est-ce que c’est le HTML ?
HTML (Hypertex Markup Language) est le langage universel utilisé
pour communiquer sur le Web. Il s’agit d’un langage constitué de
balises conçu pour écrire des pages webs.
Le HTML omniprésent sur le web.
La majorité des pages web sont au format HTML. Le navigateur
internet interprète le code HTML de chaque page web, pour le
transmettre sous forme d’informations visuelles.
5/34
État de l’art des langages orientés web
7 octobre 2016
5 / 34
État de l’art des langages orientés web
A quoi ressemble du code HTML ?
On appelle balise tout ce qui est de la forme <blabla> ... </blabla>.
6/34
État de l’art des langages orientés web
7 octobre 2016
6 / 34
État de l’art des langages orientés web
A quoi ressemble du code HTML ?
Et le résultat de ce code interprété :
6/34
État de l’art des langages orientés web
7 octobre 2016
6 / 34
État de l’art des langages orientés web
Le langage CSS
HTML = fond
Dans le langage HTML, on va se concentrer sur le texte et le fond.
CSS = forme
Dans le langage CSS (Cascading Style Sheets), on se concentra sur la
forme, c’est à dire tout ce qui correspond à la mise en page et au style.
7/34
État de l’art des langages orientés web
7 octobre 2016
7 / 34
État de l’art des langages orientés web
Le langage CSS
7/34
État de l’art des langages orientés web
7 octobre 2016
7 / 34
État de l’art des langages orientés web
Le langage Javascript
A quoi cela sert ?
Javascript est un langage de scripts qui permet d’ajouter des
programmes simples à une page HTML.
Les programmes sont exécutés du « côté client ».
Interactivité côté client
Contrairement au langage HTML, on peut parler de programmation
dynamique. L’action de l’utilisateur entraine l’affichage à l’écran de
nouveaux menus.
8/34
État de l’art des langages orientés web
7 octobre 2016
8 / 34
État de l’art des langages orientés web
Le langage PHP
Qu’est-ce que c’est ?
PHP est aussi un langage de scripts, mais cette fois cela se passe du
« côté serveur ». Il y a souvent une interaction avec une base données.
Interactivité côté serveur
Par exemple imaginez un site amateur de sondages qui stocke dans
une base de données tous les avis des utilisateurs.
9/34
État de l’art des langages orientés web
7 octobre 2016
9 / 34
État de l’art des langages orientés web
Le langage PHP
9/34
État de l’art des langages orientés web
7 octobre 2016
9 / 34
État de l’art des langages orientés web
Le langage Flash / HTML 5
Qu’est-ce que c’est ?
En bref, Flash / HTML 5 sont des technologies web permettant de
créer des sites interactifs très soignés.
Par exemple, on peut trouver HTML 5 dans toutes les vidéos en
Streaming (historique Flash). Mais aussi dans des sites très soignés
comme les sites de cinéma.
10/34
État de l’art des langages orientés web
7 octobre 2016
10 / 34
État de l’art des langages orientés web
Le langage Flash / HTML 5
10/34
État de l’art des langages orientés web
7 octobre 2016
10 / 34
État de l’art des langages orientés web
Les applets java
Qu’est-ce que c’est ?
Java est un langage de programmation, permettant de concevoir des
vrais programmes informatiques. Le principe des applets Java est de
mettre ces programmes Java directement sur le web.
11/34
État de l’art des langages orientés web
7 octobre 2016
11 / 34
État de l’art des langages orientés web
Le langage Ajax
Qu’est-ce que c’est ?
Ajax est une nouvelle technologie web, qui se base sur du Java et du
Javascript. Elle permet de gérer une plus forte dynamicité des pages
web côté client.
Exemples
Gmail et Facebook sont des sites fortement conçus en Ajax : Le fait de
cliquer sur des onglets fait apparaitre des menus déroulants.
12/34
État de l’art des langages orientés web
7 octobre 2016
12 / 34
État de l’art des langages orientés web
Le langage XML
Qu’est-ce que c’est ?
Le XML est un langage pour informaticiens experts. Ce langage
associé à du Java, permet de générer dynamiquement des pages web.
Exemple : Moteur de recherche
Lorsqu’on tape une recherche sur Google, une page HTML est
générée automatiquement et nous renvoye les résultats de la
recherche.
13/34
État de l’art des langages orientés web
7 octobre 2016
13 / 34
Plan
1
État de l’art des langages orientés web
2
Le langage HTML
14/34
Le langage HTML
7 octobre 2016
14 / 34
Le langage HTML
Fonctionnement
La majorité des pages web sont au format HTML. Le navigateur
internet interprète le code HTML de chaque page web, pour le
transmettre sous forme d’informations visuelles.
Votre travail
Il ne s’agit plus d’utiliser le navigateur internet pour naviguer, mais
d’écrire du code HTML.
15/34
Le langage HTML
7 octobre 2016
15 / 34
Le langage HTML
Fonctionnement
La majorité des pages web sont au format HTML. Le navigateur
internet interprète le code HTML de chaque page web, pour le
transmettre sous forme d’informations visuelles.
Votre travail
Il ne s’agit plus d’utiliser le navigateur internet pour naviguer, mais
d’écrire du code HTML.
15/34
Le langage HTML
7 octobre 2016
15 / 34
Le langage HTML
Langage interprété
Un outil de traitement de texte comme Word, restitue exactement votre
document au moment où vous le tapez avec telle police de caractères.
HTML : langage interprété
En HTML au moment où vous écrivez le code, vous ne saurez jamais
exactement ce que le navigateur affichera à l’écran.
Conséquences logiques
Vous n’avez pas la maîtrise totale du document. La mise en page et le
style d’un document en HTML sont des opérations fastidieuses.
16/34
Le langage HTML
7 octobre 2016
16 / 34
Le langage HTML
Langage interprété
Un outil de traitement de texte comme Word, restitue exactement votre
document au moment où vous le tapez avec telle police de caractères.
HTML : langage interprété
En HTML au moment où vous écrivez le code, vous ne saurez jamais
exactement ce que le navigateur affichera à l’écran.
Conséquences logiques
Vous n’avez pas la maîtrise totale du document. La mise en page et le
style d’un document en HTML sont des opérations fastidieuses.
16/34
Le langage HTML
7 octobre 2016
16 / 34
Le langage HTML
Langage interprété
Un outil de traitement de texte comme Word, restitue exactement votre
document au moment où vous le tapez avec telle police de caractères.
HTML : langage interprété
En HTML au moment où vous écrivez le code, vous ne saurez jamais
exactement ce que le navigateur affichera à l’écran.
Conséquences logiques
Vous n’avez pas la maîtrise totale du document. La mise en page et le
style d’un document en HTML sont des opérations fastidieuses.
16/34
Le langage HTML
7 octobre 2016
16 / 34
Le langage HTML
Définition de code
On appelle balise tout ce qui est de la forme <blabla> ... </blabla>.
17/34
Le langage HTML
7 octobre 2016
17 / 34
Le langage HTML
Définition de code
Et le résultat de ce code interprété :
17/34
Le langage HTML
7 octobre 2016
17 / 34
Le langage HTML
Editeur web ?
Le langage html semble fastidieux et réservé à première vue pour des
informaticiens.
Pourquoi ne pas utiliser plutôt un éditeur web ? On peut ainsi discuter
longtemps sur plusieurs points :
Intérêts pédagogiques d’apprendre à se servir d’un éditeur web
en Master 2 ?
Logiciel gratuit aussi performant que DreamWeaver/FrontPage ?
Code généré compatible entre les navigateurs ? (Internet
Explorer, Mozilla Firefox, Chrome, Opera, Safari . . . )
Si je veux intégrer du code javascript, php et flash pour mon site
web, comment je fais çà facilement ?
18/34
Le langage HTML
7 octobre 2016
18 / 34
Le langage HTML
Editeur web ?
Le langage html semble fastidieux et réservé à première vue pour des
informaticiens.
Pourquoi ne pas utiliser plutôt un éditeur web ? On peut ainsi discuter
longtemps sur plusieurs points :
Intérêts pédagogiques d’apprendre à se servir d’un éditeur web
en Master 2 ?
Logiciel gratuit aussi performant que DreamWeaver/FrontPage ?
Code généré compatible entre les navigateurs ? (Internet
Explorer, Mozilla Firefox, Chrome, Opera, Safari . . . )
Si je veux intégrer du code javascript, php et flash pour mon site
web, comment je fais çà facilement ?
18/34
Le langage HTML
7 octobre 2016
18 / 34
Le langage HTML
Editeur web ?
Le langage html semble fastidieux et réservé à première vue pour des
informaticiens.
Pourquoi ne pas utiliser plutôt un éditeur web ? On peut ainsi discuter
longtemps sur plusieurs points :
Intérêts pédagogiques d’apprendre à se servir d’un éditeur web
en Master 2 ?
Logiciel gratuit aussi performant que DreamWeaver/FrontPage ?
Code généré compatible entre les navigateurs ? (Internet
Explorer, Mozilla Firefox, Chrome, Opera, Safari . . . )
Si je veux intégrer du code javascript, php et flash pour mon site
web, comment je fais çà facilement ?
18/34
Le langage HTML
7 octobre 2016
18 / 34
Le langage HTML
Editeur web ?
Le langage html semble fastidieux et réservé à première vue pour des
informaticiens.
Pourquoi ne pas utiliser plutôt un éditeur web ? On peut ainsi discuter
longtemps sur plusieurs points :
Intérêts pédagogiques d’apprendre à se servir d’un éditeur web
en Master 2 ?
Logiciel gratuit aussi performant que DreamWeaver/FrontPage ?
Code généré compatible entre les navigateurs ? (Internet
Explorer, Mozilla Firefox, Chrome, Opera, Safari . . . )
Si je veux intégrer du code javascript, php et flash pour mon site
web, comment je fais çà facilement ?
18/34
Le langage HTML
7 octobre 2016
18 / 34
Le langage HTML
Editeur web ?
Le langage html semble fastidieux et réservé à première vue pour des
informaticiens.
Pourquoi ne pas utiliser plutôt un éditeur web ? On peut ainsi discuter
longtemps sur plusieurs points :
Intérêts pédagogiques d’apprendre à se servir d’un éditeur web
en Master 2 ?
Logiciel gratuit aussi performant que DreamWeaver/FrontPage ?
Code généré compatible entre les navigateurs ? (Internet
Explorer, Mozilla Firefox, Chrome, Opera, Safari . . . )
Si je veux intégrer du code javascript, php et flash pour mon site
web, comment je fais çà facilement ?
18/34
Le langage HTML
7 octobre 2016
18 / 34
Le langage HTML
Editeur web ?
Quel est vraiment l’avantage de faire du code HTML ? On peut là aussi
discuter longtemps :
Difficile d’apprentissage seul mais une compétence recherchée
dans le monde industriel.
Si respects standards W3C, code compatible sur tous les
navigateurs.
Un simple éditeur texte comme notepad suffit et code compatible
tout système d’exploitation (Mac, Windows, Linux).
Conception du document de A à Z (chirurgie) => Compréhension
totale du document web.
Intégration de code dans des sites web populaires (myspace,
ebay, . . . ).
19/34
Le langage HTML
7 octobre 2016
19 / 34
Le langage HTML
Editeur web ?
Quel est vraiment l’avantage de faire du code HTML ? On peut là aussi
discuter longtemps :
Difficile d’apprentissage seul mais une compétence recherchée
dans le monde industriel.
Si respects standards W3C, code compatible sur tous les
navigateurs.
Un simple éditeur texte comme notepad suffit et code compatible
tout système d’exploitation (Mac, Windows, Linux).
Conception du document de A à Z (chirurgie) => Compréhension
totale du document web.
Intégration de code dans des sites web populaires (myspace,
ebay, . . . ).
19/34
Le langage HTML
7 octobre 2016
19 / 34
Le langage HTML
Editeur web ?
Quel est vraiment l’avantage de faire du code HTML ? On peut là aussi
discuter longtemps :
Difficile d’apprentissage seul mais une compétence recherchée
dans le monde industriel.
Si respects standards W3C, code compatible sur tous les
navigateurs.
Un simple éditeur texte comme notepad suffit et code compatible
tout système d’exploitation (Mac, Windows, Linux).
Conception du document de A à Z (chirurgie) => Compréhension
totale du document web.
Intégration de code dans des sites web populaires (myspace,
ebay, . . . ).
19/34
Le langage HTML
7 octobre 2016
19 / 34
Le langage HTML
Editeur web ?
Quel est vraiment l’avantage de faire du code HTML ? On peut là aussi
discuter longtemps :
Difficile d’apprentissage seul mais une compétence recherchée
dans le monde industriel.
Si respects standards W3C, code compatible sur tous les
navigateurs.
Un simple éditeur texte comme notepad suffit et code compatible
tout système d’exploitation (Mac, Windows, Linux).
Conception du document de A à Z (chirurgie) => Compréhension
totale du document web.
Intégration de code dans des sites web populaires (myspace,
ebay, . . . ).
19/34
Le langage HTML
7 octobre 2016
19 / 34
Le langage HTML
Editeur web ?
Quel est vraiment l’avantage de faire du code HTML ? On peut là aussi
discuter longtemps :
Difficile d’apprentissage seul mais une compétence recherchée
dans le monde industriel.
Si respects standards W3C, code compatible sur tous les
navigateurs.
Un simple éditeur texte comme notepad suffit et code compatible
tout système d’exploitation (Mac, Windows, Linux).
Conception du document de A à Z (chirurgie) => Compréhension
totale du document web.
Intégration de code dans des sites web populaires (myspace,
ebay, . . . ).
19/34
Le langage HTML
7 octobre 2016
19 / 34
Le langage HTML
Editeur web ?
Quel est vraiment l’avantage de faire du code HTML ? On peut là aussi
discuter longtemps :
Difficile d’apprentissage seul mais une compétence recherchée
dans le monde industriel.
Si respects standards W3C, code compatible sur tous les
navigateurs.
Un simple éditeur texte comme notepad suffit et code compatible
tout système d’exploitation (Mac, Windows, Linux).
Conception du document de A à Z (chirurgie) => Compréhension
totale du document web.
Intégration de code dans des sites web populaires (myspace,
ebay, . . . ).
19/34
Le langage HTML
7 octobre 2016
19 / 34
Le langage HTML
Editeur web ?
En ce qui concerne le projet final de création de site web ?
Tolérance quant à la création d’un site web à l’aide d’un éditeur
web.
Intolérance quant à la qualité du code généré et compatibilité
navigateurs.
Est-ce que l’utilisation d’un éditeur web produit de meilleurs sites
internet ?
20/34
Le langage HTML
7 octobre 2016
20 / 34
Le langage HTML
Editeur web ?
En ce qui concerne le projet final de création de site web ?
Tolérance quant à la création d’un site web à l’aide d’un éditeur
web.
Intolérance quant à la qualité du code généré et compatibilité
navigateurs.
Est-ce que l’utilisation d’un éditeur web produit de meilleurs sites
internet ?
20/34
Le langage HTML
7 octobre 2016
20 / 34
Le langage HTML
Editeur web ?
En ce qui concerne le projet final de création de site web ?
Tolérance quant à la création d’un site web à l’aide d’un éditeur
web.
Intolérance quant à la qualité du code généré et compatibilité
navigateurs.
Est-ce que l’utilisation d’un éditeur web produit de meilleurs sites
internet ?
20/34
Le langage HTML
7 octobre 2016
20 / 34
Si les discussions sont terminées, on peut maintenant passer à la
partie dure . . .
21/34
Le langage HTML
7 octobre 2016
21 / 34
Le langage HTML
Balises
Une balise est une instruction qui marque une action à interpréter pour
le navigateur.
<html>
<head>
< t i t l e > T i t r e de l a page < / t i t l e >
< / head>
<body>
<h2> Un document HTML < / h2>
V o i c i un <b> exemple s i m p l e < / b> de < i > ce que l ’ on
peut f a i r e < / i > avec l e langage HTML.
< / body>
< / html>
22/34
Le langage HTML
7 octobre 2016
22 / 34
Le langage HTML
Balises propriétés
Une balise s’ouvre et se ferme toujours. ex : <html> ... </html>.
Une balise peut être écrite en minuscules ou en majuscules. ex :
<B> ... </b>
Les espaces et sauts de lignes sont ignorés. Dans le HTML, il n’y
a pas de mise en page.
23/34
Le langage HTML
7 octobre 2016
23 / 34
Le langage HTML
Balises propriétés
Une balise s’ouvre et se ferme toujours. ex : <html> ... </html>.
Une balise peut être écrite en minuscules ou en majuscules. ex :
<B> ... </b>
Les espaces et sauts de lignes sont ignorés. Dans le HTML, il n’y
a pas de mise en page.
23/34
Le langage HTML
7 octobre 2016
23 / 34
Le langage HTML
Balises propriétés
Une balise s’ouvre et se ferme toujours. ex : <html> ... </html>.
Une balise peut être écrite en minuscules ou en majuscules. ex :
<B> ... </b>
Les espaces et sauts de lignes sont ignorés. Dans le HTML, il n’y
a pas de mise en page.
23/34
Le langage HTML
7 octobre 2016
23 / 34
Le langage HTML
Balises de structure de document
Voila les trois balises obligatoires qui définissent le document HTML :
1
La balise <html>. Tout page HTML doit débuter par <html> et se
finir par </html>. Cette balise définit le type du document.
2
La balise <head>. Il s’agit de l’entête du document HTML. On peut
y ajouter des informations diverses (exemple CSS ou Javascript).
3
La balise <body>. Il s’agit du corps du document. C’est ici que
l’on va mettre tout le contenu du document.
24/34
Le langage HTML
7 octobre 2016
24 / 34
Le langage HTML
Balises de structure de document
Voila les trois balises obligatoires qui définissent le document HTML :
1
La balise <html>. Tout page HTML doit débuter par <html> et se
finir par </html>. Cette balise définit le type du document.
2
La balise <head>. Il s’agit de l’entête du document HTML. On peut
y ajouter des informations diverses (exemple CSS ou Javascript).
3
La balise <body>. Il s’agit du corps du document. C’est ici que
l’on va mettre tout le contenu du document.
24/34
Le langage HTML
7 octobre 2016
24 / 34
Le langage HTML
Balises de structure de document
Voila les trois balises obligatoires qui définissent le document HTML :
1
La balise <html>. Tout page HTML doit débuter par <html> et se
finir par </html>. Cette balise définit le type du document.
2
La balise <head>. Il s’agit de l’entête du document HTML. On peut
y ajouter des informations diverses (exemple CSS ou Javascript).
3
La balise <body>. Il s’agit du corps du document. C’est ici que
l’on va mettre tout le contenu du document.
24/34
Le langage HTML
7 octobre 2016
24 / 34
Le langage HTML
Balises de structure de document
<html>
<head>
i c i du code css / j a v a s c r i p t . . .
< / head>
<body>
Tout l e contenu de n o t r e page web va ê t r e i c i .
< / body>
< / html>
25/34
Le langage HTML
7 octobre 2016
25 / 34
Le langage HTML
création d’un document HTML
Document HTML
La création se fait avec un éditeur de texte (exemple : Notepad)
Étape de création
1
Ouvrir Bloc-notes. (Démarrer -> Exécuter -> Notepad)
2
Fichier -> Enregistrer sous
3
Nom du fichier : nomdocument.html ; Type : Tous les fichiers
26/34
Le langage HTML
7 octobre 2016
26 / 34
Le langage HTML
création d’un document HTML
Exercice
Créer sa page HTML avec les balises de structure <html>,
<head>, <body>
Ecrire du texte dans la balise <body> </body>
26/34
Le langage HTML
7 octobre 2016
26 / 34
Le langage HTML
La balise <head>
Dans l’entête du document, on peut placer diverses informations
comme du code CSS, ou du code Javascript. (entre <head> ...
</head>)
Titre au document
La balise <title> qui se met exclusivement entre <head> ... </head>
permet de mettre à l’extérieur de la fenêtre du document web.
Exercice
Mettre un titre. Le voyez-vous ?
27/34
Le langage HTML
7 octobre 2016
27 / 34
Le langage HTML
La balise <head>
Dans l’entête du document, on peut placer diverses informations
comme du code CSS, ou du code Javascript. (entre <head> ...
</head>)
Titre au document
La balise <title> qui se met exclusivement entre <head> ... </head>
permet de mettre à l’extérieur de la fenêtre du document web.
Exercice
Mettre un titre. Le voyez-vous ?
27/34
Le langage HTML
7 octobre 2016
27 / 34
Le langage HTML
La balise <head>
Dans l’entête du document, on peut placer diverses informations
comme du code CSS, ou du code Javascript. (entre <head> ...
</head>)
Titre au document
La balise <title> qui se met exclusivement entre <head> ... </head>
permet de mettre à l’extérieur de la fenêtre du document web.
Exercice
Mettre un titre. Le voyez-vous ?
27/34
Le langage HTML
7 octobre 2016
27 / 34
Le langage HTML
Les balises de style
Contenu de <body>
Dans la balise <body>, on va mettre tout le contenu de notre
document.
Balises de styles
La balise <b> permet de mettre du texte en gras.
La balise <i> permet de mettre du texte en italique.
28/34
Le langage HTML
7 octobre 2016
28 / 34
Le langage HTML
Gras et italique
Exercice
Reproduire la phrase ci-dessous.
Voici un exemple simple de ce que l’on peut faire avec le langage
HTML.
29/34
Le langage HTML
7 octobre 2016
29 / 34
Le langage HTML
Gras et italique
Exercice
bold : <b>...</b>
italic : <i>...</i>
underline : ? ?
29/34
Le langage HTML
7 octobre 2016
29 / 34
Le langage HTML
Titres dans un document
Balises de titres
Les balises <h1>, <h2>, <h3>, <h4> permettent de mettre des titres
dans le document.
Exercice
Pouvez-créer une nouvelle page html depuis le début avec une
utilisation des balises de titres ?
30/34
Le langage HTML
7 octobre 2016
30 / 34
Le langage HTML
Titres dans un document
Balises de titres
Les balises <h1>, <h2>, <h3>, <h4> permettent de mettre des titres
dans le document.
Exercice
Pouvez-créer une nouvelle page html depuis le début avec une
utilisation des balises de titres ?
30/34
Le langage HTML
7 octobre 2016
30 / 34
Le langage HTML
Mise en page
Les espaces en HTML n’étant pas comptabilisés, on a des balises de
saut de ligne :
Balises de saut de lignes
<p></p> permet de sauter une ligne.
<br></br> permet d’aller à la ligne.
31/34
Le langage HTML
7 octobre 2016
31 / 34
Le langage HTML
Mise en page
Remarque
Comme logiquement il n’y a rien à mettre entre ces balises, la syntaxe
appropriée devrait être :
<p />
<br />
31/34
Le langage HTML
7 octobre 2016
31 / 34
Le langage HTML
Attributs
Notion d’attributs
Certaines balises possèdent des attributs. Il y a des balises qui ont
des attributs obligatoires et d’autres qui ont des attributs facultatifs.
<balise attribut1="valeur1" attribut2="valeur2" etc.>. . . </balise>.
Exemple d’attribut facultatif
<body bgcolor="red"> . . . </body>
Exemple d’attributs facultatifs
<body bgcolor="red" text="yellow"> . . . </body>
Exemple d’attribut obligatoire
<img src="mesimages/lettre.jpg" />
32/34
Le langage HTML
7 octobre 2016
32 / 34
Le langage HTML
Attributs
Notion d’attributs
Certaines balises possèdent des attributs. Il y a des balises qui ont
des attributs obligatoires et d’autres qui ont des attributs facultatifs.
<balise attribut1="valeur1" attribut2="valeur2" etc.>. . . </balise>.
Exemple d’attribut facultatif
<body bgcolor="red"> . . . </body>
Exemple d’attributs facultatifs
<body bgcolor="red" text="yellow"> . . . </body>
Exemple d’attribut obligatoire
<img src="mesimages/lettre.jpg" />
32/34
Le langage HTML
7 octobre 2016
32 / 34
Le langage HTML
Attributs
Notion d’attributs
Certaines balises possèdent des attributs. Il y a des balises qui ont
des attributs obligatoires et d’autres qui ont des attributs facultatifs.
<balise attribut1="valeur1" attribut2="valeur2" etc.>. . . </balise>.
Exemple d’attribut facultatif
<body bgcolor="red"> . . . </body>
Exemple d’attributs facultatifs
<body bgcolor="red" text="yellow"> . . . </body>
Exemple d’attribut obligatoire
<img src="mesimages/lettre.jpg" />
32/34
Le langage HTML
7 octobre 2016
32 / 34
Le langage HTML
Attributs
Notion d’attributs
Certaines balises possèdent des attributs. Il y a des balises qui ont
des attributs obligatoires et d’autres qui ont des attributs facultatifs.
<balise attribut1="valeur1" attribut2="valeur2" etc.>. . . </balise>.
Exemple d’attribut facultatif
<body bgcolor="red"> . . . </body>
Exemple d’attributs facultatifs
<body bgcolor="red" text="yellow"> . . . </body>
Exemple d’attribut obligatoire
<img src="mesimages/lettre.jpg" />
32/34
Le langage HTML
7 octobre 2016
32 / 34
Le langage HTML
Balises de texte
Balise <font>
<font>. . . </font> spécifie une balise de texte. Elle doit avoir un
attribut :
color=". . . " pour spécifier une couleur.
size=". . . " pour spécifier une taille.
33/34
Le langage HTML
7 octobre 2016
33 / 34
Le langage HTML
Balises de séparation
Trait de séparation
<hr /> pour tracer une ligne horizontale.
Attributs facultatifs
size="nbPixels". Épaisseur du trait où nbPixels décrit un nombre
de pixels.
width="nombre". Longueur du trait où nombre peut être un
nombre de pixels ou un pourcentage.
color="couleurs".
34/34
Le langage HTML
7 octobre 2016
34 / 34