Initiation au web dynamique 2006-2007 Licence Professionnelle.

Initiation au web dynamique

2006-2007 Licence Professionnelle

Initiation au web dynamique 2

Sommaire

Protocole HTTP Langage HTML Langage PHP Langage JSP Langage ASP


Langage HTML HTML (HyperText Markup Language) est une application

du SGML (Standard Generalized Markup Language). Il s’agit d’un standard, d’un ensemble de

recommandations publié par le W3C, (World Wide Web Consortium, http://www.w3.org/.

HTML est un langage dont la création a débuté en 1989, la version 1.0 ayant vu le jour en 1992. La version 4.01 est la version actuelle (et définitive du langage HTML, notons que la version 4 est l’une des sources d’un autre langage : XHTML).


Langage HTML HTML (HyperText Markup Language) est une application du

SGML (Standard Generalized Markup Language). Il s’agit d’un standard, d’un ensemble de recommandations

publié par le W3C, (World Wide Web Consortium, http://www.w3.org/.

HTML est un langage dont la création a débuté en 1989, la version 1.0 ayant vu le jour en 1992. La version 4.01 est la version actuelle (et définitive du langage HTML, notons que la version 4 est l’une des sources d’un autre langage : XHTML).

HTML permet de réaliser des documents, en utilisant une syntaxe structurante.

Les pages HTML sont des documents statiques


Langage HTML Une page HTML peut être vue comme un simple

fichier texte (et est à ce titre éditable via pléthore d’outils).

Une page HTML est interprétée par le navigateur afin de réaliser l’affichage présenté à l’utilisateur de ce dernier.

L’extension de fichier associée aux pages HTML est généralement « .htm », ou encore « .html », mais cela dépend de la configuration du serveur web.


Langage HTML Une page HTML est fichier texte contenant des balises HTML

représentées de la manière suivante : <BALISE>. Le HTML n’est pas sensible à la casse en ce qui concerne le

nom des balises. On trouve des balises d’ouverture et des balises de

fermeture Ex. : mise en forme de texte :

gras : <strong>texte en gras</strong>italique : <em>texte en italique</em>

Certaines balises n’ont pas de fermetureEx. : la balise <BR> effectue un retour à la ligne, on la notera

de la manière suivante : <br \> dans le cas du XHTML

Langage HTML L’imbrication des balises est possible mais doit être effectuée de

manière logique Ex. :

L’exemple suivant fonctionne : <strong>texte en gras<em> texte en gras et italique</em></strong>

L’exemple suivant ne fonctionne pas : <strong>texte en gras<em> texte en gras et italique</strong></em>

La mise en forme du code source n’influe pas sur la mise en forme finale de la page HTML, il est donc possible d’indenter le code source. Exception faite de l’utilisation de la balise PRE qui permet de conserver la mise en forme du texte présent entre la balise d’ouverture et la balise de fermeture.

Utilisation des commentaires en HTML : un commentaire apparaîtra dans le code source de la page HTML mais pas dans la représentation de la page HTML sur le navigateur client.

Ex. :


Langage HTML Structure minimum d’une page HTML<HTML>

<HEAD> <TITLE> Titre de la page </TITLE>

</HEAD>

<BODY>Corps de la page

</BODY></HTML>


Langage HTML

Attributs des balisesLes balises possèdent des attributs représentés pour la plus part sous forme de couple clé="valeur"


Langage HTML Caractères Spéciaux

Certains caractères sont nécessaires au fonctionnement des pages HTML (< et > pour les balises …), il est donc nécessaire d’utiliser du code HTML pour pouvoir visualiser certains caractères dans les pages HTML.

Caractère Code HTML

" "

& &anp;

< <

> >

Espace insécable


Langage HTMLTableaux : Le code HTML permettant de représenter un tableau de deux

lignes et de deux colonnes sera le suivant :<table> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr></table>

Les balises <TABLE> et </TABLE> délimitent le début et la fin du tableau.Chaque ligne est délimitée par les balises <TR> </TR>.Les cellules contenant les données sont délimitées par les balises <TD> et </TD>.


Langage HTML Sur la balise TABLE, on peut utiliser les attributs

suivants : border : permet de choisir l’épaisseur de la bordure width : permet de fixer la largeur du tableau (en

pixels ou en pourcentage) height : permet de fixer la hauteur du tableau (en

pixels ou en pourcentage) Les balises TR et TD acceptent les attributs suivants :

align : pour choisir l’alignement horizontal des données

valign : pour choisir l’alignement vertical des données

…


Langage HTML

La navigation entre les pages est assurée grâce à des liens.

La balise permettant de créer un lien est la balise <A>

Ex. : création d’un lien « accès à la page des contacts », le nom du fichier visé est contact.htm, le code HTML permettant de créer ce lien sera le suivant :<A HREF="contact.htm">accès à la page des

contacts</A>


Langage HTMLPour afficher une image dans une page HTML, il faut utiliser la balise

IMG. Dans les spécifications du W3C, les formats suivants sont

acceptés : JPEG GIF PNG (En pratique, Internet Explorer ne gère pas le PNG 24)

Ex. : affichage d’un fichier image image2.gif<IMG SRC="image2.gif">

Les attributs suivants peuvent être utilisés : align : alignement de l’image border : taille de la bordure autour de l’image height : forcer une taille en hauteur pour l’image (en pixel ou en

poucentage) width : forcer une taille en largeur pour l’image (en pixel ou en

poucentage) …


Langage HTMLLes formulaires : La balise FORM Ils permettent aux visiteurs d’un site de saisir et de

transmettre des données aux auteurs du site. Ils sont délimités par les balise <FORM> ... </FORM> Les attributs suivants doivent être présents dans la balise

FORM : METHOD : indique la méthode utilisée par le navigateur client

pour transmettre les données au serveur (GET : données codées dans l’URL ; POST : données stockées dans le corps de la requête)

ACTION : adresse à laquelle les données vont être envoyées (adresse de page, de script CGI ou adresse email

Exemples :<FORM METHOD=POST ACTION="mailto:[email protected]"><FORM METHOD=GET

ACTION="http://www.monsite.fr/mapage.asp">


Langage HTMLTransmission des données par les formulaires Les différents champs contenus dans le formulaire

seront transmis sous forme de couple « clé=valeur ».

Exemple : un formulaire contient les champs nommés champ1, champ2, champ3 ; les données saisies dans ces champs sont donnée1, donnée2, donnée3 ; les données seront transmises de la manière suivante :

champ1=donnée1&champ2=donnée2&champ3=donnée3 En méthode GET, ceci nous donne l’URL suivante :

http://www.monsite.fr/mapage.asp?champ1=donnée1&champ2=donnée2&champ3=donnée3


Langage HTML

La balise INPUT Cette balise est la plus utilisée car

elle permet de créer des champs de différents type : champ texte, champ mot de passe, case à cocher, …

Syntaxe :<INPUT type="xxx" value="Valeur par défaut"

name="Nom du champ">


Langage HTML Le type de balise peut prendre les valeurs suivantes :

text : champ permettant la saisie d’une ligne de texte checkbox : case à cocher gérant deux états :

coché : checked non coché : unchecked

hidden : champ caché : ce champ ne sera pas visible sur le formulaire mais pourra contenir une valeur qui sera transmise au serveur

file : champ permettant à l’utilisateur de choisir un fichier à envoyer au serveur

password : champ permettant la saisie d’une ligne de texte mais les caractères saisis sont remplacés par des étoiles (*) lors de l’affichage

radio : permet d’obtenir un choix unique de l’utilisateur entre plusieurs propositions, les boutons radio qui doivent fonctionner ensemble doivent porter le même attribut name

reset : bouton de remise à zéro pour le formulaire : tous les champs sont remis à leur valeur par défaut

submit : bouton de soumission du formulaire, les données sont transmises au serveur lorsque l’utilisateur clique sur ce bouton

image : permet de faire un bouton de soumission personnalisé, préciser l’image à utiliser avec l’attribut « src »


Langage HTML

Balise TEXTAREA Il s’agit d’une zone de saisie de texte

multi-lignes. Les attributs suivants sont utilisables :

name : nom du champ cols : nombre de caractères par ligne rows : nombre de lignes readonly : le texte de ce champ ne peut

pas être modifié value : valeur par défaut du champ


Langage HTML

La balise SELECTCette balise permet de créer une liste

déroulante. Les attributs suivants existent :

name : nom du champ disabled : champ grisé : non modifiable multiple : permet de sélectionner plusieurs

éléments de la liste Les éléments contenus dans cette liste

seront délimités par des balises OPTION.


Langage HTML

La balise OPTIONCette balise permet de créer la liste des

valeur d’une liste déroulante. Les attributs suivants existent :

value : valeur de l’option dans le cas ou elle est sélectionnée par l’utilisateur

selected : valeur pré-sélectionnée dans la liste de valeurs


Langage HTML - Exercice N°1

Ecrire le code HTML de la page donnée en exemple

Initiation au web dynamique 2006-2007 Licence Professionnelle.

Documents

Transcript of Initiation au web dynamique 2006-2007 Licence Professionnelle.