Programmation web : TD 2

Dimension: px

Commencer à balayer dès la page:

Download "Programmation web : TD 2"

Raphaël Michel
il y a 8 ans
Total affichages :

1 Programmation web : TD 2 nassim.bahri@yahoo.fr Site web : Nassim BAHRI

2 Objectif Développer des pages Web HTML5 validées Mettre en place des listes en HTML

3 Avant de commencer Dans le dossier Web1, les dossiers suivants sont déjà crées: web1 html js css images Consigne : Tout fichier HTML doit contenir le code HTML de base, et doit être validé.

4 Exercice 1: Création de listes La balise <ol> sert à définir une liste numérotée (ordonnée). La balise <ul> sert à définir une liste à puces (non ordonnée). Chaque item de la liste est indiqué par <li> La balise <hr/> permet de tracer une ligne horizontale

5 Exercice 1: Création de listes Créer un fichier HTML en utilisant le logiciel Notepad++. Enregistrer le fichier sous le nom TD3.html dans le dossier HTML de votre site web Reproduire le résultat suivant:

6 Exercice 1: Création de listes

7 Exercice 1: Création de listes <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>liste HTML</title> </head> <body> <hr />les langages de développement Web à étudier dans ce cours sont: <ul> <li>html</li> <li>css</li> <li>javascript</li> <li>php</li> </ul> <hr />les langages de développement Web à étudier dans ce cours sont: <ol> <li>html</li> <li>css</li> <li>javascript</li> <li>php</li> </ol> </body> </html>

8 Exercice 1: Création de listes Visualiser le résultat dans un navigateur. Valider le code HTML en utilisant le validateur en ligne du W3C, à travers Validate by direct input.

9 Rappel : Exercice 2: Création avancée de listes Attribut spécifique à <ol>

10 Exercice 2: Création avancée de listes Créer un fichier HTML en utilisant le logiciel Notepad++. Enregistrer le fichier sous le nom TD4.html dans le dossier HTML de votre site web. Reproduire le résultat suivant:

11 Exercice 2: Création avancée de listes

12 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>liste avancée</title> </head> <body> Correction les langages de développement Web à étudier dans ce cours sont: <ol start="4" type="i" reversed> <li>html</li> <li>css</li> <li>javascript</li> <li>php</li> </ol> <hr />les langages de développement Web à étudier dans ce cours sont: <ol start="3" type="i"> <li>html</li> <li>css</li> <li>javascript</li> <li>php</li> </ol> </body> </html>

13 Exercice 2: Création avancée de listes Visualiser le résultat dans un navigateur. Valider le code HTML en utilisant le validateur en ligne de W3C,

14 Exercice 3: Listes imbriquées en HTML5 Consigne: Une liste de deuxième niveau devra forcément être placée dans un <li>. Créer un fichier HTML en utilisant le logiciel Notepad++. Enregistrer le fichier sous le nom TD5.html dans le dossier HTML de votre site web. Reproduire le résultat suivant:

15 Exercice 3: Listes imbriquées en HTML5

16 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>listes imbriquées</title> </head> <body> <ul> <li>exemples de balises dans HEAD <ul> <li>title</li> <li>meta</li> </ul> </li> <li>exemples de balises dans Body <ul> <li>p</li> <li>hr</li> <li>h1</li> </ul> </li> </ul> </body> </html> Correction

17 Exercice 3: Listes imbriquées en HTML5 Visualiser le résultat dans un navigateur. Valider le code HTML en utilisant le validateur en ligne de W3C,

Documents pareils

TD HTML AVEC CORRECTION

TD HTML AVEC CORRECTION On utilisera Notepad++ comme éditeur sur Windows Vous créez un répertoire www sous vos répertoires personnels et vous mettrez vos pages dedans. Créez vos fichiers HTML et n oubliez