====== 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 **** et **** 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** : {{ :isn:trinket_01.png?400 |}} 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 ****. 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 : * enchaînement **incorrect** de balises : 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 **%%

%% et %%

%%** 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 : * 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 La balise **%%
%% 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 : {{ :isn:internet.png |}} 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** : {{ :isn:trinket_02.png?400 |}} ===== 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 : Cliquez ici pour ... lycée Valadon * 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** : {{ :isn:trinket_03.png |}} 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 : * https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-balises-html * http://css.mammouthland.net/balises-html.php ==== Activité Les langages pour créer des sites Web ... ==== * [[isn:langageweb|Les langages pour créer des sites Web]]