====== 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 Web Lab ===== Tu vas compléter ta première page Web dans le Web Lab de Code.org. * **Accède** au Web Lab. * **Ouvre** ton projet **Mon premier projet**. ===== 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 role de la balise **** située dans **l'entête ** de la page **index.html**.

* **Modifie et complète** le contenu du **fichier style.css** avec ce code suivant :


h1
{
text-align: center;
background-color: red;
}
h2
{
font-family: Verdana;
font-style: italic;
color: green;
}

Voici ce que tu dois obtenir et **visualiser** : {{ :icn:2nde:web:weblab_08.png?nolink |}} **Observe** ce qui tout à droite et qui représente le résultat de ta page Web. * que fait l'**attribut CSS text-align** ? Sur quel élément HTML s'applique-t-il ? * que fait l'attribut **CSS color** ? Sur quel élément HTML s'applique-t-il ? 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 ****. ===== l'attribut CSS id ===== * Modifie le fichier index.html de la manière suivante :


Voici mon premier paragraphe.

* Complète le fichier style.css de la manière suivante :


#para_1
{
font-style: italic;
color: green;
}

* Qu'est-ce qui **s'affiche** dans la fenêtre ? Que remarques-tu ? {{ :icn:2nde:web:weblab_09.png?nolink |}} 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. En CSS **l'id** dans la page HTML se traduisant par le signe # dans le fichier CSS. 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 :**


    Voici mon premier paragraphe.
    Voici mon deuxième paragraphe.

**Et dasn le fichier style.css :**


.para_1
{
  font-style: italic;
  color: blue;
}

{{ :icn:2nde:web:weblab_10.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 ... ==== [[icn:2nde:web:accueil|Je reviens à l'activité sur les langages pour créer des sites Web]]