TP HTML 5 terminale STG GSI.
Réponse AJAX

La structure générale d'une page HTML

Les pages HTML ont toujours la même structure globale. Notez-la ici, cela vous servira de référence ultérieurement (vu en cours).

Ecrivez une page HTML dans laquelle vous utilisez toutes les balises suivantes, dans le bon ordre (ici elles sont notées par ordre alphabétique), en les fermant correctement (c'est à dire : en les imbriquant comme il faut) : body, head, html, title. Mettez '...' là où se trouve le contenu principal de la page.

Votre réponse n°1

Le titrage

Ecrivez l'extrait de code HTML qui réalise ce titrage :

Votre réponse n°2

La mise en forme du texte

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

Votre réponse n°3

Ecrivez l'extrait de code HTML qui réalise ceci (utilisez les balises <small>, <strong>) :

Votre réponse n°4

Ecrivez l'extrait de code HTML qui réalise ceci (utilisez les balises <sub>, <sup>) :

Votre réponse n°5

Ecrivez l'extrait de code HTML 5 qui réalise cette mise en forme (attention, question piège) :

Votre réponse n°6

Les paragraphes et les retours à la ligne

A 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>

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

Votre réponse n°7

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

Ecrivez 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°8

Lien vers une adresse électronique

Ecrivez 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°9

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>).

Ecrivez l'extrait de code HTML qui réalise ce lien vers un autre site : http://www.bts-sio.com :

Votre réponse n°10

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

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

Votre réponse n°11

Liste numérotée

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

Votre réponse n°12

Liste à plusieurs niveaux

Ecrivez l'extrait de code HTML qui combine les deux types de liste :

Votre réponse n°13

Les images

L'insertion d'images dans une page Web est incontournable. On utilise la balise <img>.

Ecrivez 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°14

Ecrivez 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°15

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

Les tableaux

On peut faire des tableaux en HTML. Celui-ci est moche, mais on attendra d'aborder le CSS pour aligner le contenu, mettre des bordures, mettre des styles de fond. Pour l'instant, vous avez besoin des balises <table>, <tr>, <th>, <td>.

Ecrivez l'extrait de code HTML qui réalise le tableau suivant :

Votre réponse n°16

Les commentaires

Trouvez les balises qui permettent de commencer et de terminer un commentaire HTML :

Votre réponse n°17

Le doctype

Avant la balise <html>, on doit mettre la balise <!DOCTYPE ...> qui renseigne sur la nature du document qui suit. Notez la balise doctype associé au HTML 5 :

Votre réponse n°18

A suivre..

La prochaine fois, nous aborderons les choses suivantes :