Cours de programmation web HTML + CSS + PHP

TP1 DE PROGRAMMATION
WEB : ETUDE ET
MANIPULATION DES
BALISES HTML

Dispensé par ING BEUTCHA Landry, Concepteur des Systèmes d’information,

Administrateur Base de données, Réseau et Sécurité
E-mail : aurelienlandry2@gmail.com

DISPENSE PAR BEUCTHA NGATCHA AURELIEN. INGENIEUR

1
DE CONCEPTION EN SI
 Cours de programmation web HTML + CSS + PHP

NB : Tous les exercices doivent être faits dans la même page HTML

Exercice 1 :

Ecrire le code HTML qui affiche le plan des exercices que nous allons effectuer.

NB : La phrase TP1 … en titre 1, première, deuxième et troisième partie sont en titre 2

et le reste en titre 3

TP1 Programmation web : Etude et manipulation des balises

Première Partie : Votre Première page HTML

I.1 Afficher un texte d’information à l’écran

I.2 Ajouter dans ce texte un lien vers une autre page web d’actualité
I.3 Ajoutez un lien vers votre boite e-mail
I.4 Ajoutez une liste de menu dans le document

Deuxième partie : Gestion des tableaux et des formulaires

II.1 Afficher un tableau contenant la liste des étudiants de la classe

II.2 Affichez un autre tableau contenant les employés et leur service

Troisième Partie : Formulaire et CV électronique

III.1 Créer un Formulaire qui permet à un utilisateur de renseigner son Profil.

III.2 Créer votre Curriculum vitae en ligne

Exercice 2 : Premiere page HTML.

I.1 Afficher un texte d’information à l’écran

Bonjour et Bienvenu sur le site de AxelShopping. Nos articles sont les meilleurs du Gabon en
termes de qualité. Puisque nous savons à quel point il est difficile de joindre les deux bouts de
nos jours, nous vous faisons des réductions afin que le ratio qualité prix vous soit favorable.

I.2 Ajouter dans ce texte un lien vers une autre page web d’actualité

Chers clients Nous sommes heureux de vous annoncer que chez axel shopping nous ne faisons
pas seulement dans le vestimentaires mais aussi dans l’électroménager.

Pour découvrir nos produits électroménagers, cliquez sur le lien AxelElectronics

DISPENSE PAR BEUCTHA NGATCHA AURELIEN. INGENIEUR

2
DE CONCEPTION EN SI
 Cours de programmation web HTML + CSS + PHP

I.3 Ajoutez un lien vers votre boite e-mail

Chers client toujours en tenant compte que la distance peut jouer un facteur clé dans votre choix,
nous mettons à votre disposition un service de livraison dans toute l’étendue du territoire
Gabonais.

Pour en bénéficier, écrivez-nous à l’adresse mail AxelShopping@contact.com

I.4 Ajoutez une liste de menu dans le document

Chers clients sachez qu’actuellement Nous sommes en promotion. Nous Octroyons 10% de
remise à tous les clients qui achèteront 2 produits vestimentaires et deux produits
électroménager

Comme produit, les gammes que nous proposons sont classées comme suit :

 Produits Vestimentaire
 Vêtement pour homme ;
 Vêtement pour femme ;
 Vêtement pour enfant
 Produits Electroménagers
 Equipement d’occasion
 Equipement neufs

Exercice 2 : Gestion des tableaux et des formulaires

II.1 Afficher un tableau contenant la liste des étudiants de la classe

Nom Prénom Service Fonction

MINKO Cyriaque TECHNIQUE CHEF
MISSANG Charlemagne TECHNIQUE AGENT
OPOUNDOU Kevinhe TECHNIQUE AGENT
NTOUNTOUME Cyr-Axel MARKETING AGENT
MAPAHA Eurol MARKETING CHEF
OCKUMBATH Junior MARKETING AGENT
LITONA Axel DRH AGENT
MOUSSAVOU Edouard DRH AGENT
ADA Charline DRH CHEF

DISPENSE PAR BEUCTHA NGATCHA AURELIEN. INGENIEUR

3
DE CONCEPTION EN SI
 Cours de programmation web HTML + CSS + PHP

II.2 Affichez un autre tableau contenant les employés et leur service

Nom Prénom Service Fonction

MINKO Cyriak CHEF
MISSANG Charlemagne TECHNIQUE AGENT
OPOUNDOU Kevinhe AGENT
NTOUNTOUME AGENT
MAPAHA Eurole MARKETING CHEF
OCKUMBATH Junior AGENT
LITONA Axel AGENT
MOUSSAVOU DRH AGENT
ADA CHEF

Exercice3 : Formulaire et CV électronique

III.1 Créer un Formulaire qui permet à un utilisateur de renseigner son Profil.

III.2 Créer votre Curriculum vitae en ligne

Réalisez un mini site comprenant votre CV selon le descriptif suivant:

 Un tableau avec bordure fine qui comportera les informations "standards"

DISPENSE PAR BEUCTHA NGATCHA AURELIEN. INGENIEUR

4
DE CONCEPTION EN SI
 Cours de programmation web HTML + CSS + PHP

 4 rubriques, Formation, Expérience professionnelle, Compétences, et Informations

complémentaires (titre en H2 par exemple)
 Pour chaque rubrique un tableau à 2 colonnes et N lignes, chaque ligne comprend à
gauche les années X+1-X dans une liste à puces et la colonne de droite comporte la
description de l'année en question (cf. plus bas!).
 Le tableau sera sans bordure
 Vous pouvez aussi utiliser les attributs
 COLSPAN et ROWSPAN de la balise TABLE pour séparer les différentes cellules
 WIDTH de la balise TD et de la balise TABLE pour modifier les tailles respectives de
la cellule et du tableau (valeur à donner en % de l'écran d'affichage)
 Insérez aussi votre photo

Exemple du rendu :

DISPENSE PAR BEUCTHA NGATCHA AURELIEN. INGENIEUR

5
DE CONCEPTION EN SI