Développement et technologie Web (1)

Apprendre HTML 5 et CSS3

Filière : Sciences économiques  et gestion

“Licence Professionnelle : E-Business et Management Digital”
Année Universitaire : 2020-2021
 Partie 1 : Apprendre HTML 5 et CSS3

Chapitre 4 - Découvrez des fonctionnalités

évoluées

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 93

 Ajouter des tableaux

- Un tableau simple :

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 94

 Ajouter des tableaux

- Un tableau simple sans bordures:

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 95

 Ajouter des tableaux

- Un tableau simple avec bordures :

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 96

 Ajouter des tableaux

- Un tableau simple avec titre :

- Quel est le rôle de la balise <th> ?

- Pouvez vous changer la position du titre ?

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 97

 Ajouter des tableaux

- Un tableau simple avec titre :

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 98

 Ajouter des tableaux

- Un tableau avec cellules fusionner :

On peut fusionner des cellules horizontalement avec l'attribut colspan  ou

verticalement avec rowspan .

Il faut indiquer combien de cellules doivent être fusionnées

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 99

 Ajouter des tableaux

- Un tableau structuré:

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 100

 Chapitre 4 - Découvrez des fonctionnalités évoluées

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 101

Atelier N°5:
Créer le tableau suivant :

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 102

 Les formulaires

- Définition :

Les formulaires permettent une interaction avec l'utilisateur. Ils lui permettront
de saisir des données que nous pourrons ensuite traiter ou mémoriser. Des cas
fréquents sont :

• Formulaire d'inscription
• Formulaire de connexion
• Formulaire de recherche
• Formulaire de contact
• Demande de devis
• Formulaire administratif en ligne

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 103

 Les formulaires

Les formulaires sont constitués habituellement de plusieurs éléments :

- Balise form ;
- Balises input ;
- Un bouton d'envoi.
- Un bouton d’annuler

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 104

 Les formulaires
Ajouter un texte avant le champ

Définir le nombre de caractère d'un champ de saisie

• L'attribut size qui définit la taille du champs dans la page en nombre de caractère, mais

cela n'empêche pas l'utilisateur d'en saisir plus
• L'attribut maxlength qui permet de limiter la saisie à un nombre de caractère définir
Pr. BALAR Khalid Développement et technologie web I / 2020-2021 105
 Les formulaires

Nouveaux types de saisies prédéfinis

Il existe donc à présent de nombreux nouveaux types qui viennent compléter les
anciens types text, hidden et password, chekbox et radio.
Les principaux sont :
• number : pour renseigner une valeur numérique.
• email : pour accueillir des adresses mails valident.
• url : pour accueillir des liens hypertextes.
• color : pour accueillir une couleur au format héxadécimal (exemple :  #eeaaff).
Certains navigateurs affichent une palette pour inviter l'internaute à
sélectionner une couleur.
• date : pour accueillir une date, certains navigateurs affichent un calendrier.
• file :  pour accueillir un champ afin d'uploader un fichier.
• search : pour permettre aux internautes de réaliser une recherche par mot-clé.

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 106

 Les formulaires
Le type input number

Faire avancer l'âge de deux en deux.

Saisie de dates et d'heures

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 107

 Les formulaires

Donner le choix à l'utilisateur

- Les cases à cocher

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 108

 Les formulaires

Donner le choix à l'utilisateur

- Les zones d'options

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 109

 Les formulaires

Donner le choix à l'utilisateur

- Les listes déroulantes

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 110

 Les formulaires

Editer un texte sur plusieurs lignes

Slider (glissière)

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 111

 Chapitre 4 - Découvrez des fonctionnalités évoluées

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 112

Chapitre 4 - Découvrez des fonctionnalités évoluées

Atelier N°6: Réaliser le formulaire suivant :

Notre formulaire contiendra trois champs

de texte et un bouton. Nous demandons
simplement à notre utilisateur son nom,
son adresse électronique et le message
qu'il souhaite envoyer. En appuyant sur
le bouton, le message sera envoyé au
serveur web.

Pr. BALAR Khalid Développement et technologie web I / 2020-2021 113

Atelier N°7: Réaliser le formulaire suivant :
Développement et technologie Web (2)
Créer votre site web avec PHP et MySQL

Pr. BALAR Khalid

Filière : Sciences économiques  et gestion
“Licence Professionnelle : E-Business et Management Digital”
Année Universitaire : 2020-2021