Le Web

Cours

Le HTML
Création d'une page web
- Ma première page web
- Le style

Le style

Il est probable que nous souhaitions que certains paragraphes soient en bleu d'autres en vert, de même pour les titres, les contours d"images etc....

Comme vous l'avez sans doute remarqué, il est assez fastidieux d'imbriquer des éléments.

C'est pour cela que l'on utilise une feuille de style.

En HTML 5 , vous devez utiliser une feuille de style pour la mise en forme de document html.

Créez un fichier monstyle.css à la racine de votre page web
Rajoutez dans votre page web le lien vers ce fichier : à imbriquer dans l'élément head : <link rel="stylesheet" href="monstyle.css">

Méthode : Comment faire ?

Dans le fichier monstyle.css on écrit le code suivant :

Vous pouvez mettre autre chose que p1 ou p2 ce ne sont que des identificateurs

#p1{
  color:brown;
}
#p2{
    color:red;
}

#p1{
  color:brown;
}

#p2{
    color:red;
}

Dans la page web on écrit :

Les styles sont identifiés avec l'attribut : id="nom de l'identificateur"

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="monstyle.css">
  <title> ma première page web</title>
 </head>
 <body>
 <h1 id="p1"> Ceci est un titre avec les attributs 'p1' </h1>
 <p id="p1"> Ceci est un texte dans un paragraphe avec le style "p1" </p>
 <p id="p2"> Ceci est un texte dans un paragraphe avec le style "p2" </p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="monstyle.css">
  <title> ma première page web</title>
 </head>
 <body>
 <h1 id="p1"> Ceci est un titre avec les attributs 'p1' </h1>
 <p id="p1"> Ceci est un texte dans un paragraphe avec le style "p1" </p>
 <p id="p2"> Ceci est un texte dans un paragraphe avec le style "p2" </p>

 </body>
</html>

On peut ajouter autant d'attributs que l'on souhaite, s'ils existent bien sûr....

#p1{
  color:brown;
}
#p2{
    color:red;
    background-color: aqua;
    font-size: 15px;
    text-indent: 100px;
}

#p1{
  color:brown;
}

#p2{
    color:red;
    background-color: aqua;
    font-size: 15px;
    text-indent: 100px;
}

Vous trouverez les attributs possibles en 'css' sur de nombreux sites web dont celui-ci .

On peut modifier le style par défaut des éléments :

Ci-dessous le code css pour l'élément p , il n'y a pas besoin de l'identifier avec id

p{
color: red;
}

p{
color: red;
}

Complément : Exercices à faire

Pour vous familiariser avec le CSS, faire les exercices sur la page vous permettant de travailler sur le CSS et des compléments en HTML..

Simulation :

Créer une page web sur un sujet original qui vous intéresse.

Les seules contraintes sont d'ordres techniques .

il devra y avoir :

Des liens
Des images
Un tableau
Une feuille de style
Du texte écrit par vous (attention à l'orthographe)
Un design réfléchi....

Andjekel