TP HTML 5.
Réponse AJAX

Pour démarrer

Dans ce TP, je vous demande de rédiger des codes HTML, de les tester puis de les poster en réponse pour que je les valide. Les différentes solutions sont : Je demande des extraits de code, c'est à dire juste le code HTML minimum pour faire ce que je demande et non pas toutes les balises normalement obligatoires dans une page Web.

La mise en forme du texte

Écrivez l'extrait de code HTML qui réalise ceci (utilisez les balises <b>, <i>, <u>) :

Votre réponse n°1

Les paragraphes et les retours à la ligne

À l'intérieur du titrage, tout texte doit être contenu dans un 'conteneur', le plus courant étant le paragraphe (balise <p>). Un retour à la ligne à l'intérieur du même paragraphe se fait avec la balise :
<br>

Écrivez l'extrait de code HTML qui réalise les paragraphes suivants :

Votre réponse n°2

Le titrage

Écrivez l'extrait de code HTML qui réalise ce titrage (avec les balises <h1>, <h2> et <h3>) :

Votre réponse n°3

Les liens hypertextes

Les liens hypertexte permettent d'écrire un texte sur lequel on peut cliquer pour se rendre vers une nouvelle page, une ressource (fichier, son, image, etc.), une adresse électronique, etc. On utilise la balise <a> et son paramétrage.

Lien vers une page interne

Écrivez l'extrait de code HTML qui réalise ce lien vers une autre page : actualite.html (on suppose pour simplifier que la page actualite.html est dans le même répertoire que la page courante) :

Votre réponse n°4

Lien vers une adresse électronique

Écrivez l'extrait de code HTML qui réalise ce lien vers une adresse électronique (dans la pratique, cela ouvre le client de courrier électronique, en général Thunderbird ou Outlook) :

Votre réponse n°5

Lien vers une page externe

Quand on fait un lien depuis notre site vers un autre site, on l'ouvre dans un autre onglet pour pas que l'internaute quitte notre site, c'est du marketing (on utilise pour ça l'attribut target=_blank de la balise <a>).

Écrivez l'extrait de code HTML qui réalise ce lien vers un autre site et qui l'ouvre dans un autre onglet : http://www.bts-sio.com :

Votre réponse n°6

Les listes (listes à puces, listes numérotées)

On peut faire en HTML des listes à puces ou des listes numérotées. On utilise les balises <ol>, <ul> et <li>.

Liste à puce

Écrivez l'extrait de code HTML qui réalise cette liste à puce :

Votre réponse n°7

Liste numérotée

Écrivez l'extrait de code HTML qui réalise cette liste numérotée :

Votre réponse n°8

Liste à plusieurs niveaux

Écrivez l'extrait de code HTML qui combine les deux types de liste (attention : pour que le code soit valide, il faut que la sous-liste fasse partie de l'élément item 2) :

Votre réponse n°9

Les images

L'insertion d'images dans une page Web est évidemment très répandu. On utilise la balise <img>, avec les attributs suivants :

Écrivez l'extrait de code HTML qui insère l'image sun.jpg, qui se trouve dans le même répertoire que la page Web.

Votre réponse n°10

Écrivez l'extrait de code HTML qui insère l'image sun.jpg, qui se trouve dans le sous-répertoire images.

Votre réponse n°11

Écrivez l'extrait de code HTML qui insère l'image
http://www.bts-sio.com/images/sun.webp

Votre réponse n°12

Les erreurs les plus fréquentes lors de l'insertion d'images

Les textes importants, les textes moins importants

Écrivez l'extrait de code HTML qui affiche le résultat suivant :
small-strong

Votre réponse n°13

Les exposants, les indices

Écrivez l'extrait de code HTML qui affiche le résultat suivant :
sup-sub

Votre réponse n°14

Les caractères spéciaux

Essayez les caractères suivants, qui vous serons utilies un jour : Plus de caractères spéciaux sur leptidigital.fr.

En suivant le lien ci-dessus, trouvez le caractère spécial pour le saut de section § :

Votre réponse n°15

Les commentaires

En cherchant sur Internet, trouvez les balises qui permettent de commencer et de terminer un commentaire HTML (un commentaire est visible dans le code source mais pas dans le navigateur) :

Votre réponse n°16

Pour aller plus loin...

Une description précise et exhaustive des balises html : https://developer.mozilla.org/fr/docs/Web/HTML/Element