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é CSS N° 1 ======
Le **HTML** n'a pas été conçu pour gérer la mise en page (c'est possible, mais c'est une **mauvaise pratique**). Le HTML s'occupe uniquement du **contenu** et de la **sémantique** c'est à dire du sens de chaque élément grâce à différentes balises.

Tout ce qui concerne la mise en page et l'aspect **design** c'est à dire le **style** de la page se réalise avec le **CSS** (Cascading Style Sheets).

===== Accéder au site Trinket.io =====
Tu vas compléter la page **index.html** ainsi que le fichier **style.css** (clique sur l'onglet style.css) de l'exemple suivant à partir du site **Trinket.io** :
<html>
<iframe src="https://trinket.io/embed/html/c314ca9500" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
</html>

===== Le fichier CSS style.css =====
Il est conseillé de **définir** les styles CSS dans un **fichier séparé** de la page HTML. Il faudra seulement indiquer à la page HTML quel fichier de style utiliser. C'est le rôle de la balise **<link>** située dans **l'entête <head>**  de la page **index.html**.

<code html>
<link rel="stylesheet" href="style.css">
</code>

  * **Modifie et complète** le contenu du **fichier style.css** avec ce code suivant  :
<code html>
h1
{
text-align: center;
background-color: red;
}
h2
{
font-family: Verdana;
font-style: italic;
color: green;
}
</code>

  * visualise le résultat de la page pour comprendre :
    * ce que fait l'**attribut CSS text-align** et sur quel élément HTML il s'applique,
    * ce que fait l'attribut **CSS color** et sur quel élément HTML il s'applique.


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 **</**nom_de_la_balise**>**.

===== l'attribut CSS id =====
  * Modifie le fichier index.html de la manière suivante : 
<code html>
<p id="para_1">Voici mon premier <strong>paragraphe</strong>.</p>
</code>
  * Rajoute à la fin du fichier style.css les lignes suivantes :
<code html>
#para_1
{
font-style: italic;
color: green;
}
</code>

  * Quelles modifications observes-tu ?

Il est possible de **cibler** un paragraphe et pas un autre en utilisant **l'id** du paragraphe pour que le style défini ne s'applique qu'à lui.
<WRAP center round info>
En CSS **l'id** dans la page HTML  se traduisant par le signe # dans le fichier CSS.
</WRAP>


Il est aussi possible d'utiliser l'attribut **class** à la place de l'id. Dans le style pourra s'utiliser sur **plusieurs éléments HTML**. Dans le fichier CSS, tu utiliseras le point . à la place du #.

**Ce qui donnerait dans le fichier index.html  :**
<code html>
    <p id="para_1">Voici mon premier <strong>paragraphe</strong>.</p>
    <p class="para_2">Voici mon deuxième <strong>paragraphe</strong>.</p>
</code>

**Et dans le fichier style.css en ajoutant les lignes suivantes :**
<code html>
.para_2
{
  font-style: italic;
  color: blue;
}
</code>

==== Question 4 ====
  * **Modifie** le contenu du **fichier index.html**  et du fichier **style.css** pour avoir le résultat suivant :

Voici ce que tu dois **visualiser** :
{{ :isn:trinket_04.png |}}



===== Les balises de base du CSS =====
Voici un lien parmi d'autres pour découvrir les balises de base du CSS : 
  * https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-proprietes-css


==== Activité Les langages pour créer des sites Web ... ====
<WRAP center round info >
  * [[isn:langageweb|Les langages pour créer des sites Web]]
</WRAP>