Licence : IAG

Module :Développement Web

Année Universitaire: 2024/2025

Pr. Mohamed Rida FETHI

Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Tableaux
1. Définition
Les tableaux permettent de diviser la page en zones d'espace et de remplir ces zones avec des objets
(textes, images, couleurs), permettant un contrôle amélioré de la position des objets. Ces tables peuvent
avoir un fond et des bords visibles ou non.
2. Syntaxe
<table >
<tr>
<td> </td>
<td> </td>
</tr>
</table>
3. Explication

<TABLE> et </TABLE> : pour définir un tableau

<TR> et </TR> : définit une ligne dans le tableau.
<TH> et </TH> : pour les cellules de haut de colonne (facultatif)
<TD> et </TD> : pour une cellule
2
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Tableaux
4. Exemple :

<table width=50% border="1">

<tr>
<td><img src="[Link]"></td>
<td>bienvenue</td>
</tr>
</table>

5. Remarque:

A l'intérieur d'une cellule (entre <TD> et </TD>) tout est bien sûr possible, comme mettre plusieurs lignes
de texte (avec <BR>, <P> ou autre), changer la couleur des caractères, celle du fond de la cellule, de
mettre des liens, des images, modifier les couleurs et les épaisseurs de bordure, etc...

3
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Tableaux
Attributs de la balise <table>

 <table bgcolor="votre couleur"> : mettre un fond de couleur.

 <table width="50%"> : Occupation en % de la page, vous pouvez aussi travailler en pixels.

 <table border="1"> Taille des bords (0=pas de bords).

 bordercolor="votre couleur" :couleur des bordures.

 cellpadding=" " :Espacement interne des cellules.

 cellspacing=" " :Espacement entre les cellules.

4
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Tableaux
Attributs de la balise <td>
1. colspan:
Description: Définit le nombre de colonnes que la cellule doit occuper. Nombre entier (par défaut 1).
Syntaxe: <td colspan="3">Cette cellule s'étend sur 3 colonnes</td>

2. rowspan:
Description: Définit le nombre de lignes que la cellule doit occuper. Nombre entier (par défaut 1).
Syntaxe: <td rowspan="2">Cette cellule s'étend sur 2 lignes</td>

3. align :
Description: Définit l'alignement horizontal du contenu. Valeurs possibles (left ,center ,right)
Syntaxe: <td align="center">Texte centré</td>

5
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Tableaux
Attributs de la balise <td>

4. valign:
Description: Définit l'alignement vertical du contenu. (top ,middle,bottom).
Syntaxe: <td valign="top">Texte en haut</td>

5. width:
DescriptionSpécifie la largeur de la cellule.
Syntaxe: <td width="100">Largeur de 100 pixels</td>

6. height :
Description: Spécifie la hauteur de la cellule.
Syntaxe: <td height="50">Hauteur de 50 pixels</td>

6
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Tableaux

Exercice d’application
Ecrire le code source de la page suivante:

7
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Formulaire HTML
Un formulaire HTML est une structure utilisée pour collecter des données auprès des utilisateurs
et les transmettre à un serveur pour traitement. Il est défini par la balise <form> et contient divers
éléments interactifs comme des champs de texte, des cases à cocher, des boutons, etc.

 Syntaxe de base:

<form name="formulaire>

... Champs de saisie ...

</form>

8
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Formulaire HTML
Les éléments de formulaire

Champ de texte :
<input type="text" name="nom" value="valeur initiale">

Exemple:

<form>
nom: <input type="text" name="nom" size=30>
adresse: <input type="text"name="adresse" size=30>
ville <input type="text“ name="ville" size=30>
</form>

9
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Formulaire HTML
Les éléments de formulaire

 Champ mot de passe :

<input type="password" name="pw" value= " " >

10
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Formulaire HTML
Les éléments de formulaire
 Case à cocher :
<input type="checkbox" name="nom" value="valeur_envoyee" [CHECKED] >

11
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Formulaire HTML
Les éléments de formulaire

 Boutons radio:
<input type="radio" name="nom_de_groupe"value="valeur_envoyee" [CHECKED] >

Exemple

12
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Formulaire HTML
Les éléments de formulaire
 Liste de sélection :
<select name="nom">
<option value="code">libellé</option>
<option value="code" [SELECTED]>libellé</option>
</select>
Exemple

13
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Formulaire HTML
Les éléments de formulaire
 Zones de texte :
<textarea name="nom" cols="30" rows="8">Contenu initial</textarea>

14
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Formulaire HTML
Les éléments de formulaire
 Champ caché :
Un champ caché en HTML est un élément <input> de type hidden. Il est utilisé pour transmettre des
données au serveur sans que l'utilisateur puisse les voir ou les modifier directement. Ce champ est
invisible dans la page web, mais ses valeurs sont envoyées lorsque le formulaire est soumis.

Syntaxe

<input type="hidden" name="nom" value="valeur">

15
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Formulaire HTML
Les éléments de formulaire

 Bouton d'envoi

<input type="submit" value="Envoyer" >

16
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Formulaire HTML
Les éléments de formulaire

 Bouton d'annulation ou «reset»

 Bouton simple

17
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Formulaire HTML
Exercice d’application:
Ecrire le code source de la page suivante:

Remarque
Champ de fonction :
Enseignant, Etudiant, Ingénieur,
Retraité, Autre.

18
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Formulaire HTML
Autres types de formulaire
 Le champ <input type=color>
<input type="color" name="color1" />

Exemple

19
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Formulaire HTML
Autres types de formulaire

 <input type=date>
<input type="date" name="bday" />
Exemple

20
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Formulaire HTML
Autres types de formulaire

 <input type=datetime-local>
Permet de choisir la date et l’heure
<input type="datetime-local“ name="bdaytime" />

Exemple

21
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

La balise marquee
1. Définition
Elément permettant de créer des zones de défilement de texte dans un document HTML.

2. Syntaxe

<marquee > ... </marquee>

3. Exemple :

<marquee bgcolor="yellow" width="20%" direction="right" loop="0"> Votre message </marquee>

22
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

La balise marquee
Attributs spécifiques

behavior
Détermine le type de mouvement du contenu:
•scroll: Le contenu défile et revient après être sorti du cadre (par défaut).
•slide: Le contenu défile une seule fois et s'arrête au bord.
•alternate: Le contenu rebondit entre les bords.

direction
Spécifie la direction du défilement.
•left : Défile vers la gauche (par défaut).
•right : Défile vers la droite.
•up : Défile vers le haut.
•down : Défile vers le bas.

23
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

La balise marquee
Attributs spécifiques
scrollamount
Définit la vitesse du défilement en pixels.
•Plus la valeur est élevée, plus le texte défile rapidement.

loop
Indique le nombre de fois que l'animation doit être répétée.
•Un entier : Nombre de répétitions.
•infinite ou -1 : Boucle infinie (par défaut).

hspace et vspace
Ajoutent des marges horizontales et verticales autour du <marquee>.
•Les valeurs sont en pixels.

24
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

La balise marquee
Attributs spécifiques

bgcolor
Définit la couleur de fond du <marquee>.
•Exemple : bgcolor="yellow".

width et height
Définissent les dimensions du conteneur du texte défilant.
•Exemple : width="300px" ou height="50px".

25
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Les Frames
1. Définition
Les Frames en HTML permettaient de diviser une page web en plusieurs sections indépendantes,
appelées frames, chacune pouvant afficher un document HTML différent. Cette fonctionnalité a été
introduite pour faciliter la création de structures de pages complexes, comme un menu fixe avec un contenu
variable.

2. Syntaxe

<!DOCTYPE html>
<html>
<head>
<title>Exemple de Frames</title>
</head>
<frameset rows="20%,80%">
<frame src=" [Link]" name= " name1" scrolling="no">
<frame src="[Link]" name= " name2" >
</frameset>
</html>
26
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Les Frames
Attributs

27
Introduction JavaScript Ajax PHP CMS PHP
HTML & CSC

Les Frames
Exercice d’application

28