Table des matières
Activité HTML N° 1
La page d'accueil index.html
Les sites Web ont toujours une page d'accueil qui est la première à être affichée quand on accède au site. Cette page porte en général le nom index.html mais cela peut être différent.
Sur le site https://trinket.io/, tu peux créer des pages Web et découvrir les principes de base des langages HTML et CSS.
Dans l'exemple ci-dessous, tu visualises à gauche le code HTML d'une page qui s'appelle index.html et à droite le résultat obtenu.
Question 1
- Modifie le contenu du fichier index.html : dans la partie de gauche, change ce qui est écrit (le code HTML) plaçé entre les balises <body> et </body> pour avoir le résultat suivant :
- remplace la phrase Titre de ma page par Je découvre le langage HTML ;
- remplace la phrase Sous-titre de ma page par Thème sur le Web ;
Voici ce que tu dois obtenir et visualiser :
Le langage HTML tout est un langage à balise avec :
- des balises que l'on ouvre. Une balise ouvrante est de la forme <nom_de_la_balise>.
- et des balises que l'on ferme. Une balise fermante est de la forme </nom_de_la_balise>.
Toute balise ouverte doit être refermée à un moment ou un autre, qu'elle soit sur la même ligne ou pas. Cela n'a pas d'importance mais par contre la seule question à se poser ici est : ai-je bien refermé toutes les balises que j'ai ouvertes ?
Attention : il faut refermer les balises dans l'ordre :
- enchaînement correct de balises :
<balise1> <balise2> </balise2> </balise1>
- enchaînement incorrect de balises :
<balise1> <balise2> </balise1> </balise2>
La balise2 a été ouverte après la balise1, elle aurait donc du être refermée avant la balise1.
Chaque balise a une signification qu'il faut bien respecter (on parle de la sémantique des balises).
Le couple de balise <p> et </p> permettent de délimiter un paragraphe.
Il existe aussi des balises qui sont à la fois ouvrantes et fermantes. C'est le cas pour la balise image qui permet de mettre une image dans une page Web.
- Voici une balise image qui affiche le logo du lycée Valadon dans la page index.html :
- l'attribut src indique où trouver l'image sur Internet :
<img src="http://www.lyc-valadon.ac-limoges.fr/IMG/siteon0.png"/>
- l'attribut src peut aussi indiquer où trouver l'image dans le dossier du sitet. Pour cela il faut au préalable télécharger l'image dans le dossier du site. IL est conseillé de créer un sous-dossier images afin d'y mettre ces ressources images. L'attribut src de la balise img devra alors préciser le nom du sous-dossier
<img src="images/siteon0-e5814.png" />
La balise <br/> est utilisée seule et permet d'avoir un saut de ligne*.
Question 2
- Modifie le contenu du fichier index.html pour ajouter l'affichage de cette image :
Voici l'URL, c'est à dire le lien interne de cette image : https://pixees.fr/informatiquelycee/n_site/img/internet.png
Voici ce que tu dois visualiser :
La balise a
La balise a sert à créer des liens hypertextes, c'est à dire des liens qui permettent de naviguer entre les pages d'un site ou entre les sites. Les liens hypertextes sont par défaut soulignés et de couleur bleue (modifiable grâce au CSS).
La balise a :
- possède un attribut href qui a pour valeur le chemin du fichier que l'on cherche à atteindre ou l'adresse du site cible. Exemple :
<a href="http://www.lyc-valadon.ac-limoges.fr">Cliquez ici pour ... lycée Valadon</a>
- Entre la balise ouvrante et fermante, on trouve le texte qui s'affichera à l'écran (c'est ce texte qui est souligné et de couleur bleue).La balise peut sans problème se trouver en plein milieu d'un paragraphe.
Question 3
- Modifie le contenu du fichier index.html pour ajouter un lien vers une page ou un site de ton choix :
Comme exemple j'ai ajouté un lien vers le site Web de l'Académie de Limoges
Voici ce que tu dois visualiser :
Il existe beaucoup d'attributs différents, mais dans la suite des activités, vous allez utiliser 2 attributs utiles pour le CSS :
- l'attribut id (id pour identifiant)
- et l'attribut class.
Les premières balises utile pour le HTML
Voici deux liens parmi d'autres pour découvrir les balises de base du HTML :