Scribd
Importer
14 vues3 pages

Installer HTML avec Visual Studio Code

Ce document guide l'utilisateur à travers l'installation de Visual Studio Code et la création d'un premier projet HTML. Il présente la structure de base d'un fichier HTML ainsi que l'utilisation des balises essentielles comme les titres, paragraphes, liens, images, listes, tableaux et formulaires. Enfin, il propose des exercices pratiques pour renforcer l'apprentissage et conclut en suggérant d'apprendre le CSS pour styliser les pages.

Transféré par

yonathankouaho
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
14 vues3 pages

Installer HTML avec Visual Studio Code

Ce document guide l'utilisateur à travers l'installation de Visual Studio Code et la création d'un premier projet HTML. Il présente la structure de base d'un fichier HTML ainsi que l'utilisation des balises essentielles comme les titres, paragraphes, liens, images, listes, tableaux et formulaires. Enfin, il propose des exercices pratiques pour renforcer l'apprentissage et conclut en suggérant d'apprendre le CSS pour styliser les pages.

Transféré par

yonathankouaho
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

TP : Mes premiers pas en HTML

Objectif :

• Installer Visual Studio Code

• Comprendre la structure d’un document HTML

• Utiliser les principales balises HTML

1. Installation de Visual Studio Code

1. Télécharger Visual Studio Code depuis le site officiel : [Link]

2. Installer VS Code en suivant les instructions.

3. Ouvrir VS Code après l'installation.

2. Création d'un premier projet HTML

1. Créer un dossier nommé MonPremierSite dans un emplacement accessible (ex: Bureau).

2. Ouvrir VS Code et aller dans Fichier → Ouvrir un dossier, puis sélectionner MonPremierSite.

3. Dans VS Code, cliquer sur Nouveau Fichier et nommer le fichier [Link].

3. Structure de base d’un fichier HTML

• Ouvrir [Link] et saisir la structure suivante :

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Mon Premier Site</title>

</head>

<body>

<h1>Bienvenue sur mon premier site</h1>

<p>Ceci est un paragraphe en HTML.</p>

</body>

</html>

• Enregistrer le fichier (Ctrl + S).

• Ouvrir le fichier dans un navigateur web en double-cliquant dessus.

4. Découverte des balises HTML

1. Les titres et paragraphes :


<h1>Titre principal</h1>

<h2>Sous-titre</h2>

<p>Ceci est un paragraphe.</p>

2. Les liens et images :

<a href="[Link] target="_blank">Visitez Google</a>

<img src="[Link]" alt="Description de l’image">

3. Les listes :

<ul>

<li>Élément 1</li>

<li>Élément 2</li>

</ul>

<ol>

<li>Premier</li>

<li>Deuxième</li>

</ol>

4. Les tableaux :

<table border="1">

<tr>

<th>Nom</th>

<th>Âge</th>

</tr>

<tr>

<td>Alice</td>

<td>25</td>

</tr>

</table>

5. Les formulaires :

<form>

<label for="nom">Nom :</label>

<input type="text" id="nom" name="nom">

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


</form>

5. Exercices

1. Ajouter une image à votre page.

2. Créer un lien vers un autre site.

3. Ajouter un formulaire avec un champ Nom et un bouton Envoyer.

4. Créer une liste de vos passions.

5. Ajouter un tableau avec des informations sur trois de vos amis.

6. Conclusion

• Vous avez découvert HTML et son éditeur VS Code.

• Vous avez exploré les balises essentielles.

• La prochaine étape : apprendre le CSS pour styliser vos pages !

Vous aimerez peut-être aussi