====== Activité HTML N° 1 ====== ===== Accéder au Web Lab ===== Tu vas écrire ta première page Web dans le Web Lab de Code.org. * **Accède** au Web Lab. * **Crée** ton nouveau projet et renomme-le **Mon premier projet**. ===== 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. * **Complète** le contenu du **fichier index.html** avec ce code en le plaçant entre les balises **** et **** :

Titre de ma page

Sous-titre de ma page

Voici mon premier paragraphe.

 Voici ce que tu dois obtenir et **visualiser** : {{ :icn:2nde:web:weblab_05.png?nolink |}} **Observe** ce qui tout à droite et qui représente le résultat de ta page Web. * Qu'est-ce qui **s'affiche** dans la fenêtre te qu'est ce qui **ne s'affiche pas** ? La 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). 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** de mon projet. Pour cela il faut au préalable **télécharger** l'image dans le dossier de mon projet en utilisant le bouton **Add image**. {{ :icn:2nde:web:weblab_07.png?nolink |}} 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 ... ==== [[icn:2nde:web:accueil|Je reviens à l'activité sur les langages pour créer des sites Web]]