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° 2 ======
===== Rappel=====
 
  * Le **HTML** permet de définir **contenu** et la **sémantique** c'est à dire du sens de chaque élément de la page Web grâce à différentes balises.
  * 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 Web Lab =====

Tu vas créer un nouveau projet dans le **Web Lab** de Code.org avec comme nom **Activité CSS 2**.
  * **J'accède** au Web Lab : http://studio.code.org/sections/KVGXNR ;
  * A partir du menu **Course Catalog**, je choisis l'activité **Web Lab** ; 
{{ :icn:2nde:web:weblab_01.png?nolink&300 |}}
  * pour finir je clique sur le bouton **Make an web page** (Créer une page Web) : 
{{ :icn:2nde:web:weblab_02.png?nolink&300 |}}
  * **Je crée** mon projet **Activité CSS 2** et je sauvegarde ce nouveau nom.

===== Le fichier CSS style.css =====
C'est dans ce fichier, **différent** de celui de la page HTML  qu'il est conseillé de **définir** les styles CSS qui s'appliquent à la page HTML. Le rôle de la balise **<link>** située dans **l'entête <head>**  de la page **index.html** permet d'indiquer à la page le fichier de style CSS à utiliser.

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

===== Changer la police du titre de la page =====
Pour changer la police du titre qui utilise la balise H1 **mais uniquement pour le titre H1** que je veux, j'utilise les attributs **class** ou id :
  * un **attribut class** permet de définir un style qui peut être utilisé plusieurs fois dans la page HTML,
  * un **attribut id** permet de définir un style qui ne doit s'appliquer qu'à un seul élément de la page HTML.

  * je **modifie** la balise **<h1>** du fichier HTML **index.html** de la manière suivante en ajoutant l'attribut **id** et en lui donnant un nom :  
<code html>
<h1 id="titreprincipal">Big Data : données, données, donnez-moi !</h1>
</code>
<WRAP center round info >
Il y a **deux balises <h1>** mais seule la **première** sera **concernée** le style que je vais définir :
</WRAP>

{{ :icn:2nde:web:weblab_13.png?nolink |}}
  * je **modifie** le contenu du **fichier style.css** avec ce code suivant pour indiquer quel style utiliser une fois seulement   :
<code css>
#titreprincipal
{
  text-align: center;
  background-color: green;
  font-size: 16px;
  font-family: Verdana;
}

</code>

Voici ce que tu dois obtenir et **visualiser** :
{{ :icn:2nde:web:weblab_14.png?nolink |}}

<WRAP center round tip>
Pour en savoir plus sur les **propriétés CSS** de **mise en forme** du texte : 
  * https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/memento-des-proprietes-css
</WRAP>
			

===== l'attribut CSS class =====
Pour attribuer un style CSS, il faut pouvoir **sélectionner** une balise HTML. Quand je veux appliquer un style à un élément qui n'est pas dans une balise, j'utilise une **balise universelle**. Il en existe deux : 
  * la balise **<span> </span>** qui est une balise de type **inline** placée au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement, comme les balises **<strong>** ou **<em>**.
  * la balise **<div> </div>** qui est une balise de type **block**, qui entoure un bloc de texte ou d'éléments HTML comme les balises **<p>** ou **<h1>**

  * Modifie le fichier **index.html** pour mettre en couleur les mots **données personnelles**, **enjeu** et les autres mots qui te semblent important et cela de la manière suivante : 
<code html>
<p>À mesure que nos vies sont de plus en plus connectées, les <span class="important">données personnelles</span> que nous émettons lors de chacune de nos activités deviennent un <span class="important">enjeu</span> industriel considérable.<p> 
</code>
  * Complète le fichier **style.css** de la manière suivante :
<code css>
.important
{
  font-style: italic;
  color: red;
}
</code>
Voici le résultat obtenu :
{{ :icn:2nde:web:weblab_15.png?nolink |}}

Voici des **noms** de couleur que tu peux utiliser :
{{ :icn:2nde:web:weblab_16.png?nolink |}}
==== La notation hexadécimale ====
Il y a **bien plus** de couleurs possibles. Pour cela une solution est d'utiliser la **notation hexadécimale** comme **#FF5A28** : 
  * on commence par écrire un **dièse (#)**,
  * suivi de **six lettres ou chiffres** allant de **0 à 9** et de **A à F**.
  * Ces lettres ou chiffres fonctionnent deux par deux :
    * Les deux premiers indiquent une quantité de **rouge**,
    * les deux suivants une quantité de **vert**,
    * et les deux derniers une quantité de **bleu**. 
  * En **mélangeant** ces quantités (qui sont les composantes Rouge-Vert-Bleu ou Red-Green-Blue - **RGB**- de la couleur) on peut obtenir la couleur voulue.

=== Exemple : === 
  * #000000 correspond à la couleur noire
  * #FFFFFF à la couleur blanche.
<WRAP center round info>
Le site http://www.colorpicker.com permet de trouver la valeur hexadécimale d'une couleur.
</WRAP>
===== Changer la couleur ou l'image de fond de la page =====
Les propriétés CSS suivantes permettent de gérer la page en intervenant sur la balise <body>.
  * Complète le fichier **style.css** de la manière suivante : 
<code css>
/* On travaille sur la balise body, donc sur TOUTE la page */
body
{
    background-color: lime; /* Le fond de la page sera vert clair */
    color: gray; /* Le texte de la page sera gris */
}
</code>

Pour choisir une image de fond, après avoir téléchargé l'image dans ton projet, utilise cette propriété CSS :

<code css>
body
{
  ...
  background-image: url("uneimage.png");
}
</code>

===== Les bordures =====
Les **bordures** permettent de décorer ta page en précisant de nombreuses propriétés CSS : **border-width**, **border-color**, **border-style**, etc.

Pour simplifier la déclaration des propriétés d'une bordure, j'utilise la **super-propriété border** qui regroupe **l'ensemble** de ces propriétés en combinant plusieurs valeurs.

J'utilise jusqu'à trois valeurs pour modifier l'apparence de la bordure :
   * La largeur en pixels : exemple 2px,
   * La couleur avec un nom, une valeur hexadécimale (#FF0000) ou une valeur RGB (rgb(198, 212, 37)),
   * Le type de bordure, un simple trait ou des pointillés ou encore des tirets, etc. :
     * none: pas de bordure (par défaut) ;
     * solid: un trait simple ;
     * dotted: pointillés ;
     * dashed: tirets ;
     * double: bordure double ;
     * groove: en relief ;
     * ridge: autre effet relief ;
     * inset: effet 3D global enfoncé ;
     * outset: effet 3D global surélevé.

Exemple pour une bordure bleue, en tirets, épaisse de 3 pixels autour du paragraphe en utilisant l'attribut **class** dans la paragraphe ou doit s'appliquer le style que j'appelle **alire** : 
<code css>
.alire
{
    border: 3px blue dashed;
}
</code>
{{ :icn:2nde:web:weblab_17.png?nolink |}}
===== 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 >
[[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
