2. Déroulement du module
• Articulation du module :
• Présentation succins de l’HTML
• Version 4
• Utilisation d’un CMS (Content Management Systems)
• Utilisation de HTML/PHP/SQL
• Projet / Concours
• Présentation du PHP (Cours réalisé par Olivier LEGOAER)
• Accès aux bases de données (SQL Requis)
• Projet
• Examen écrit
2
Licence Pro SID
3. Qu’est-ce qu’une Application Web
• 2 problématiques induites par le sujet.
• => Qu’est ce qu’un site Web ? Et accès au
contenu ?
• => Comment gérer et exploiter un ensemble de
données ?
3
Licence Pro SID
4. Qu’est-ce qu’une Application Web
• Une application Web permet de mettre des
informations à la disposition d'utilisateurs via
un navigateur (IE, Firefox, Chrome, …).
• => Pour une Consultation
• => Pour une Mise à Jour
• Utile pour mettre en forme des données
• Utile pour automatiser certains traitements
4
Licence Pro SID
9. LE LANGUAGE HTML
• C’est le langage du Web (toutes les pages sont écrites en html).
• C’est un langage de balises (http://b.kostrzewa.free.fr/html ,
http://fr.selfhtml.org/html) :
– de structure du fichier html : html, head, body, meta...
– de mise en forme du texte : b, font, i, u...
– de listes : li, ul...
– de paragraphes : p, br, hr, h1, h2, h3...
– de tableaux : table, tr, td, th...
– de liens hypertextes : a...
– de formulaires : form, input, select, option, textarea...
– ...
9
Licence Pro SID
10. LE LANGUAGE HTML
STRUCTURE DE FICHIER
Sous notepad++ : html_ex1.html
<html>
<head>
<title> Exemple de HTML </title>
</head>
<body> Ceci est une phrase </body>
</html>
10
Licence Pro SID
12. Applications multiples
(Web:HTML)
A L’IUT : Machine serveur :
wwwetud.univ-pau.fr
S:/internet
http://wwwetud.univ-pau.fr/~<user>/<nom_fichier+extension>
Accéder à votre première page Web :
http://wwwetud.univ-pau.fr/~loginetudiant/html_ex1.html
12
Licence Pro SID
13. LE LANGUAGE HTML
MISE EN FORME
<html>
<head>
<title> Exemple de HTML </title>
</head>
<body>
<b>Ceci est en caractère gras</b>
</body>
</html>
13
Licence Pro SID
15. LE LANGUAGE HTML
LIEN HYPERTEXTE
<html>
<head>
<title> Exemple de HTML </title>
</head>
<body> Ceci est une phrase possédant
un lien hypertexte.
<a href="cible.html">hyperlien</a>
</body>
</html>
15
Licence Pro SID
17. LE LANGUAGE HTML
LISTE
<html>
<head>
<title> Exemple de HTML </title>
</head>
<body>
<ul>
<li>1er point</li>
<li>2nd point</li>
</ul>
</body>
</html> Licence Pro SID
17
19. LE LANGUAGE HTML
TABLEAU
<html>
<head>
<title> Exemple de HTML </title>
</head>
<body> <table border=1>
<tr>
<td>1ere case</td>
<td>2eme case</td>
</tr>
</table>
</body>
19
</html> Licence Pro SID
21. LE LANGUAGE HTML
TABLEAU
<html>
<head>
<title> Exemple de HTML </title>
</head>
<body>
<table border=1>
<tr>
<td>1ere case</td>
<td>2eme case</td>
</tr>
<tr>
<td>3eme case</td>
<td>4eme case</td>
</tr>
</table>
</body>
</html> 21
Licence Pro SID
23. LE LANGUAGE HTML
TABLEAU
A vous de jouer
On veut représenter le tableau suivant en html :
23
Licence Pro SID
24. LE LANGUAGE HTML
<html>
<head> TABLEAU
<title> Ma premiere page HTML </title>
</head>
<body>
<table border=1>
<tr>
<td>1ere case</td>
<td><u>2eme case</u></td>
</tr>
<tr>
<td><b><i>3eme case</i></b></td>
<td>4eme case</td>
</tr>
<tr>
<td><u>5eme case</u></td>
<td><u>6eme case</u></td>
</tr>
<tr>
<td><b><i>7eme case</i></b></td>
<td><a href="http://www.google.fr">Google</a></td>
</tr>
</table>
</body>
</html>
24
Licence Pro SID
25. LE LANGUAGE HTML
Quelques Balises : MISE EN PAGE
• Alignements CENTER, LEFT , RIGHT
• P : paragraphe (utilisation : <p>)
• BR : passage à la ligne (<br>)
• HR :règle horizontale (utilisation : <hr>)
25
Licence Pro SID