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° 3 : organiser la page Web ======
===== Présentation =====
Tu vas créer un nouveau projet dans le Web Lab de Code.org pour **présenter un moteur de recherche** de ton choix :
  * choisir un moteur de recherche,
  * créer **3 paragraphes** ayant chacun un **titre** pour présenter  :
    * un paragraphe pour indiquer **comment accéder** au moteur de recherche : le lien ,
    * un paragraphe pour indiquer ce qui **caractérise** ce moteur de recherche sous forme de **liste**,
    * un dernier paragraphe pour donner ton opinion sur ce moteur de recherche.

Pour t'aider tu trouveras ci dessous des précisions sur les **balises HTML** qui te seront **utiles**.

===== Accéder au Web Lab =====

Tu vas découvrir d'autre balises HTML dans le Web Lab de Code.org.
  * **Accède** au Web Lab.
  * **Ouvre** ton projet **Mon premier projet**.
===== Les balises <body> et </body> =====
Dans une page Web, Le contenu de ta page web doit être écrit entre les balises <body> et </body>.

===== Les titres =====
Le langage HTML permet de définir six niveaux de titres différents.

  * **<h1> </h1>** : signifie **titre très important** comme le titre de la page au début de celle-ci.
  * **<h2> </h2>** : signifie **titre important**.
  * **<h3> </h3>** : titre un peu moins important ou **sous-titre**.
  * **<h4> </h4>** : titre encore moins important.
  * **<h5> </h5>** : titre pas important.
  * **<h6> </h6>** : titre encotre moins important.

===== Les paragraphes =====
Quand tu écris un document, tu utilises des **paragraphes**. On procède la même manière dans une page HTML en utilisant la balise **<p>** :

<code html>
<p>Voici un paragraphe !</p>
</code>
  * <p> signifie **Début du paragraphe** ;
  * </p> signifie **Fin du paragraphe**.
===== Aller à la ligne dans un paragraphe =====
En changeant de paragraphe, on  provoque un **changement de ligne**. Si à l'intérieur d'un paragraphe tu veux changer de ligne, utilise la **balise autofermante <br />**.

===== Les listes =====
==== les listes non ordonnées ou listes à puces ; ====
Ce sont les listes qui permettent des énumérations.

<code html>
<ul>
    <li>un élément</li>
    <li>un autre élément</li>
    <li>un autre élément</li>
</ul>
</code>
==== Liste ordonnée ====
Une liste ordonnée fonctionne de la même façon en changeant une balise change : tu remplaces **<ul></ul>** par **<ol></ol>**.
À l'intérieur de la liste, on ne change rien : on utilise toujours des balises <li></li> pour délimiter les éléments.

Par contre l'ordre est important : Le premier <li></li> sera l'élément n° 1, le second sera le n°2, etc.
<code html>
<ol>
    <li>1er élément</li>
    <li>2ème élément</li>
    <li>3ème élément</li>
</ol>
</code>
==== Activité Les langages pour créer des sites Web ... ====
<WRAP center round info >
[[icn:2nde:web:accueil|Je reviens à l'activité sur les langages pour créer des sites Web]] 
</WRAP>
Les cours du BTS SIO

Outils pour utilisateurs

Outils du site

Outils de la page
