Les cours du BTS SIO

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== 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.
<html>
<iframe src="https://trinket.io/embed/html/bf7b627d58" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
</html>
==== 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** :

{{ :isn:trinket_01.png?400 |}}
<WRAP center round box>
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** ?

</WRAP>

<WRAP center round important 60%>
**Attention** : il faut refermer les balises dans **l'ordre** :
</WRAP>

  * enchaînement **correct** de balises :
<code html>
<balise1>
  <balise2>
  </balise2>
</balise1>
</code>

  * enchaînement **incorrect** de balises :
<code>
<balise1>
<balise2>
  </balise1>
  </balise2>
</code>

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).
<WRAP center round info>
Le couple de balise **%%<p>%% et %%</p>%%** permettent de délimiter un **paragraphe**.
</WRAP>


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 :
<code html>
<img src="http://www.lyc-valadon.ac-limoges.fr/IMG/siteon0.png"/>
</code>

    * 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 

<code html>
<img src="images/siteon0-e5814.png" />
</code>

<WRAP center round info>
La balise **%%<br/>%% est utilisée seule et permet d'avoir un **saut de ligne*.
</WRAP>
==== 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 : 
<code html>
<a href="http://www.lyc-valadon.ac-limoges.fr">Cliquez ici pour ... lycée Valadon</a>
</code>
  * 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 ... ====
<WRAP center round info >
  * [[isn:langageweb|Les langages pour créer des sites Web]]
</WRAP>
Les cours du BTS SIO

Outils pour utilisateurs

Outils du site

Outils de la page
