Scribd
Importer
4 vues4 pages

TP1 HTML

Ce document présente un tutoriel sur la création de pages HTML en utilisant l'éditeur Visual Studio Code et l'extension Emmet. Il couvre les étapes de création d'un document HTML, l'utilisation de balises pour la navigation, la section des articles, la biographie de l'auteur, une table de données, et un pied de page. Les exercices se concentrent sur la structure HTML sans aborder la mise en forme visuelle.

Transféré par

jcharlesdu90
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
4 vues4 pages

TP1 HTML

Ce document présente un tutoriel sur la création de pages HTML en utilisant l'éditeur Visual Studio Code et l'extension Emmet. Il couvre les étapes de création d'un document HTML, l'utilisation de balises pour la navigation, la section des articles, la biographie de l'auteur, une table de données, et un pied de page. Les exercices se concentrent sur la structure HTML sans aborder la mise en forme visuelle.

Transféré par

jcharlesdu90
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Web & Mobile

TP1. Web / HTML


1. Prise en main de l’éditeur
Éditeur conseillé : Visual Studio Code

L’éditeur VSCode associé à l’extension Emmet facilite l’édition de pages HTML (et bien d’autres
langages)

1 - Quelques outils de l’IDE : recherche, ajout de plugins, paramètres, GIT, etc


2 - Explorateur de contenu : permet de naviguer dans vos dossier
3 - Editeur de code : la zone qui vous permettra d’écrire du code dans le langage choisi
4 - Terminal et débogage : une console qui vous permet d'interagir avec votre machine.
• Créer un document html et enregistrez le sous le nom [Link] dans votre dossier TP1.
L’éditeur indique dans sa barre d’état (en bas, à droite) qu’il est en mode HTML avec l’en
codage de caractères UTF-8

• Tapez html en haut du document, Emmet


propose de compléter le code

• Choisissez html:5 puis


la touche ENTRÉE ⏎ et observez le code généré :

• Essayez quelques balises en tapant juste leur nom : p, img, div, … et observez le code
généré.

• Règles avancées : vous pouvez composer des balises et y ajouter des opérateurs. Essayez
div*3, ul>li*3, p+div et observez le code généré.

Vous connaissez maintenant quelques astuces pour faciliter l’écriture de documents HTML.
📌 Dans les exercices suivants, seule la structure HTML compte. La mise en forme (couleurs,
agencement) sera traitée plus tard.
Les encadrés dans les captures d’écran sont insérés à titre d’information.

2. Navigation
Utiliser les balises d’en-tête, de navigation, de liste, liens, saisie (recherche) et boutons pour créer
le menu de navigation suivant.

• Faire pointer les liens sur les URL #home, #article, #apropos, #chiffres
• Ajouter un attribut id=home à la balise d’en-tête

3. Articles
Utiliser une balise de section (id : articles) pour af cher une liste de 3 articles comprenant
un titre, un paragraphe avec du texte ctif et une URL pointant sur le site de votre choix

4. A propos
Utiliser une balise de section (id : apropos) contenant un titre, une photo, un paragraphe de
biographie ctive de l’auteur des articles. Ajouter un lien permettant d’envoyer un email.
fi
fi
fi
5. Table de données
Dans une nouvelle section (id : chiffres), créer une table HTML comprenant :
- une légende
- un entête avec deux colonnes
- 5 lignes avec deux colonnes, reprenant les données suivantes

6. Pied de page
Créer en n le pied de page contenant une liste de quatre puces avec le texte suivant :

Aperçu de la page complète


fi

Vous aimerez peut-être aussi