TP⚓︎

Ex1 : Découvrir HTML⚓︎

Cette exercice va nous permettre de comprendre comment on crée des pages web (un des services d'internet).

Cet exercice ne nécessite aucun compte rendu

Ouvrir le lien suivant
Dans le navigateur, faire un clic droit et choisir Afficher le code source de la page. Comment semble structuré ce langage ?
Lire le document explicatif du langage HTML sur la page en lien sur la page précédente.

Ex2 : Modifier un document HTML⚓︎

Ouvrir Visual Studio Code. Ouvrir un dossier et créer un fichier CR-VotreNom.html

Recopiez le squelette de document HTML suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>Compte-rendu de TP</h1>
<p>
Votre nom ici !
</p>
<h2>Exercice: Document de base</h2>
<h3>À quoi servent les tags h1, h2 et h3 ?</h3>
<p>
votre réponse ici
</p>
...
</body>
</html>

Enregistrer le fichier
Remplacez ensuite "Votre nom ici !" par votre nom.

Ouvrez le fichier dans un browser Web pour afficher le résultat.

A partir de maintenant ce fichier vous servira pour répondre aux questions ci-dessous.

A quoi servent les tags h1, h2 et h3 ?
A quoi sert le tag p ?
Ajoutez à votre compte-rendu la phrase suivante :

Les tags HTML commencent par une balise ouvrante <foo> et finissent par une balise fermante </foo>.

Note: pour votre compte rendu, il vous faudra surement utiliser les entités < qui correspond à < et > qui correspond à >.

Comment mettre en gras ou en italique ?
Et comment faire pour mettre un mot à la fois en gras et en italique ?
En fait, votre compte rendu est pas vraiment en HTML, vous devriez organiser les questions pour qu'elles soient automatiquement numérotées par le navigateur. Comment faire ? Modifier votre compte-rendu en conséquence.
On souhaite que le titre de la fenêtre du navigateur soit "Compte-rendu du TP". Comment faire ? Note : la balise head possède un élément title.
Ajoutez un lien (le tag a) vers le lien de l'exercice 1 avec comme titre lien vers site de l'exercice 1.
Prenez une feuille de papier puis dessinez l'arbre des différents tags correspondant à votre compte rendu. Attention à bien respecter quel tag se trouve déclaré dans tel autre.
Avec votre smartphone (ou celui du voisin), prenez une photo de la feuille de papier sur laquelle vous avez dessiné l'arbre et envoyez-la vous par mail. Puis allez dans vos mails pour récupérer l'image et la sauvegarder sous le nom de mon-super-arbre.jpg dans le répertoire tp2. Utilisez ensuite le tag img pour inclure l'image dans votre compte rendu. Attention, cela risque d'être un peu gros visuellement, il vous faudra sûrement jouer avec les attributs width et height de img pour avoir une image de dimensions acceptables. PS : N'oubliez pas l'attribut alt du tag img !
Tester si votre fichier respecte la syntaxe HTML grace au site: https://validator.w3.org
Rendre le fichier html et l'image sur elea

Ex3 : Découvrir CSS⚓︎

Cette exercice va nous permettre de comprendre comment on applique un style (un design) à des pages web

Récupérer les deux fichier .html et .css et les enregistrer dans le même répertoire de votre ordinateur
Ouvrir les deux fichiers avec visual studio code et ouvrir le fichier html dans un navigateur web.
Essayer de changer la couleur du titre en modifiant le fichier css.
Essayer de changer la couleur de ce qui est en gras en modifiant le fichier css.
Essayer de changer la couleur des paragraphes en modifiant le fichier css.
Rajouter dans la première balise p du fichier html la classe "paraperso" de manière à avoir <p class="paraperso"> et rajouter dans le fichier css le code suivant:
```
.paraperso{
text-decoration: underline;
}
```

Que remarquez-vous ?

Réaliser un compte rendu de cet exercice en utilisant HTML/CSS et rendre des deux fichiers dans elea

Ex4 : Réaliser son CV en HTML/CSS⚓︎

Résliser un CV en utilisant ce que l'on vient de voir en HTML/CSS