Activité 1

Bases du HTML (1/2)

1. LES BASES DU HTML

Le widget ci-dessous (abbréviation de "windows" et "gadget") est une petite application qui est insérée dans cette page web. Celui ci va vous permettre de manipuler le langage HTML. Vous pouvez écrire dans l'encadré de gauche "code source HTML", et afficher le résultat à droite comme dans un navigateur.

Travail à faire : Le code HTML d'une page très simple est déjà présent. Observez-le, affichez-le et lisez les explications qui suivent :

Explications :

Au début d'un document HTML, on trouve toujours la balise spéciale <!DOCTYPE html> suivi de la balise ouvrante <html> qui ne sera fermée </html> qu'à la fin du document.
Entre les balises <html> et </html> se trouve le code HTML qui est interprété par le navigateur. Elles contiennent toujours deux autres balises :
- - La tête est encadrée par les balises <head> et </head>. Ce qu'elle contient n'est pas affichée par le navigateur. Il s'agit d'informations importantes pour aider le navigateur a afficher correctement la page. Par exemple :
    - - <meta charset="utf-8"> précise au navigateur d'utiliser le codage des caractères utf-8. Il sera important de toujours ajouter cette balise dans la tête de tes pages HTML pour ne pas avoir de problème d'affichage des caractères accentués (é, è, ö, ...).
      - <title> ...</title> ne correspond pas au titre de la page mais à ce que doit afficher le navigateur dans l'onglet de cette page.
  - Le corps est encadré par les balises <body> et </body>. Il s'agit du contenu de la page. Ici, on trouve plusieurs autres balises :
    - - un grand titre avec les balises <h1> et </h1> . Il existe six niveaux de titres possible : <h1> jusqu'à <h6>.
      - un paragraphe avec les balises <p> et </p> .
      - un saut à la ligne la balise orpheline <br/> .
      - un commentaire avec la balise spéciale . Ce commentaire est utile pour le développeur web pour expliquer le code. Il n'est pas interprété par le navigateur et ne sera pas affichée.

Travail à faire :

Modifier le code HTML dans le widget suivant, afin que la page corresponde exactement à l'affichage ci-contre.
Faire vérifier par le professeur.

2. Les hyperliens

Les balises <a> et </a> permettent de créer un hyperlien. En général, un hyperlien apparaît en bleu souligné, et l'icône de la souris change lorsqu'elle le survole montrant ainsi que l'on peut cliquer dessus.

Exemple : Si on écrit <a href="https://www.ecosia.org"> lien vers Ecosia </a> Le texte affiché sera « lien vers Ecosia » et un clic sur celui-ci ouvrira une nouvelle page. Pour définir quelle page sera ouverte, il faut définir un attribut dans la balise ouvrante <a>. En effet, observez bien que l'on donne l'adresse de la page ciblée à l'attribut href="https://www.ecosia.org" .

Travail à faire :

Dans le widget suivant, créer un hyperlien vers le site de votre choix.
Faire vérifier par le professeur.

3. Insertion d'image ou de video

Les balises <img/> ou <video/> sont des balises orphelines qui permettent d'insérer respectivement une image ou une video :

Voici deux exemples pour ces balises

Explications :

L'attribut src est l'adresse du fichier (image ou vidéo) à insérer.
La taille de l'image peut être précisée grâce aux attributs width (largeur) et height (hauteur), en pixels ou bien en pourcentage de l'affichage (exemple : "70%"). Pour ne pas déformer l'image, on peut n'écrire qu'un seul de ces attributs. L'autre est alors automatiquement bien ajusté.
Pour les vidéos, l'attribut controls est nécessaire pour afficher les boutons de contrôle de la vidéo : lecture, pause ...
On peut ajouter d'autres attributs, par exemple, un attribut alt="message", pour donner une description du fichier. Celle-ci facilite l'accès au document, notamment aux non-voyants. C'est aussi ce texte qui s'affichera en cas de problème d'accès au fichier.

Remarque : Pour définir l'attribut src d'une balise <img/> avec une adresse sur internet, il faut que ce lien pointe vers un fichier image (exemple d'extension d'un fichier image : .jpg, .png, .gif). On pourra utiliser un clic droit sur l'image puis "copier l'adresse de l'image" pour ensuite coller son adresse dans src="...".

Travail à faire :

À l'aide de la balise <img/>, affichez une image de votre choix. Vous pouvez utiliser la banque d'image libre de droits Pixabay.
En incluant la balise image dans une balise <a>, transformez cette image en hyperlien vers un site de votre choix.
Faire vérifier par le professeur.

Page updated

Google Sites

Report abuse