Découverte des balises HTML

SNT Thème Web
Code Capytale de l'activité : afb7-137882
Page Web du cours sur HTML/CSS : https://frederic-junier.org/SNT/Theme1_Web/SNT_Activite3_Web.html

Compléter les réponses aux questions le code soit dans l'activité Capytale s'il faut modifier ou ajouter du code source, soit dans dans un fichier Libre Office Writer nommé Nom_Prenom_Activité_HTML.odt déposé dans le dossier Devoir de la classe.

Partie 1 : romans préférés

Répondre aux questions en analysant ou modifiant le code du premier paragraphe Romans préférés.

Quelle balise permet d'afficher son contenu comme un titre de niveau 1 ?
Ajouter en dessous le code ci-dessous :
```
          <h2>   Sous-titre  </h2>
          <h3>   Sous-sous titre </h3>
```
Comment les moteurs de recherche peuvent-ils utiliser les contenus des balises de titre ?
Supprimer la balise fermante </h3> du dernier titre saisi. Que peut-on remarquer dans l'affichage ?
1. Supprimer les balises de paragraphe <p> et </p3> pour les deux premiers paragraphes du code source. Que peut-on observer dans l'affichage ?
2. Annuler ces suppressions avec la combinaison de touches CTRL + Z .
```
     
<p>  Ci-dessous........... <em> décroissante </em> .     </p> 
<p>  Pour chaque roman, un  ......    de l'auteur, tableau, couverture).    </p> 
```
1. Quelle balise permet de créer un lien hypertexte ?
2. Comment l'URL cible est-elle référencée ? Quelle est la partie visible dans l'affichage ?
3. Dans le premier lien hypertexte, remplacer l'URL cible pour qu'elle pointe vers l'article URL de Wikipedia.
Citer deux balises d'emphase qui permettent de mettre en évidence un élément important du texte par un changement du style de la police de caractères.
La balise ci-dessous contient un commentaire. Quelle est la particularité d'une balise de commentaire ? À quoi peut-elle servir ?
```

```

Le code ci-dessous permet d'afficher une liste numérotée. Remplacer la balise <ol> .... </ol> par <ul> .... </ul> . Que peut-on observer dans l'affichage ?

<ol>    
<li> 
<a href="https://fr.wikipedia.org/wiki/Le_Rouge_et_le_Noir">Le Rouge et le Noir</a>
</li>
<li>  
<a href="https://fr.wikipedia.org/wiki/Une_vie_(Maupassant)">Une vie</a>
</li>
<li>  
<a href="https://fr.wikipedia.org/wiki/Belle_du_Seigneur">Belle du seigneur</a>
</li>    
</ol>

1. Supprimer l'URL cible dans la balise <img> permettant d'afficher l'image.
```
<img 
src="https://upload.wikimedia.org/wikipedia/commons/7/71/Le_rouge_et_le_noir_1831.JPG" 
alt="Le Rouge et le Noir" >
```
2. Que peut-on observer dans l'affichage ? Ce comportement est-il prévu dans le code de la balise ?
3. Cette balise <img> est-elle constituée d'un couple balise ouvrante / fermante ?
4. Remplacer l'URL cible par l'image du portrait de l'auteur, Stendhal , présente sur sa notice Wikipedia.
5. Quel est le rôle de l'attribut title de la balise <img> ?

Partie 2 : à vous de jouer

En suivant les mêmes règles de présentation (paragraphe de présentation, balises d'emphase, liste numérotée avec liens hypertextes, image illustrant le premier) que pour les romans préférés, créer une nouvelle partie de titre Musiciens préférés avec la listes de vos trois musiciens préférés.
1. Télécharger le code source de votre production, faire un clic droite sur le fichier d'extension html puis l'ouvrir avec l'éditeur de texte Notepad ++. Que voyez-vous ?
2. Ouvrir également le fichier avec un navigateur Web (un double clic gauche sur le fichier devrait suffire). Que voyez-vous ?
3. Quel est le rôle du langage HTML ?
4. Comment s'appelle une brique de base permettant d'attribuer un sens particulier à certains éléments du texte source ?
5. Comment les moteurs de recherche peuvent-ils utiliser la structure HTML d'une page Web pour indexer son contenu ?