Feat: couleurs en snt
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
e548e2c956
commit
a6c0536f87
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
|
|
@ -55,11 +55,31 @@ Cours: image gris et couleurs
|
|||
Étape 3: Les couleurs des images
|
||||
================================
|
||||
|
||||
Format de couleurs: RGB, HSV.
|
||||
On revient sur le codage des couleurs en RBG. Les élèves doivent avec Gimp colorier les ronds avec les bonnes couleurs et compléter avec le nom de la couleur (on ne sera pas trop pointilleux dessus..!
|
||||
|
||||
Les 3 couches de couleurs sur GIMP.
|
||||
.. image:: ./fig/roue_couleurs_255.png
|
||||
:height: 200px
|
||||
:alt: Roue des cours avec des composantes à 255
|
||||
.. image:: ./fig/roue_couleurs_255.png
|
||||
:height: 200px
|
||||
:alt: Roue des cours avec des composantes à 255
|
||||
|
||||
Utilisation des connaissances sur les couleurs pour colorer sa page web.
|
||||
Ensuite on prend l'exemple d'une photo d'une nébuleuse où 3 photos en niveaux de gris ont été prises et où l'on va assigner une couleur à chaque "calque" pour donner de la couleur à l'image.
|
||||
|
||||
.. image:: ./fig/rosette.jpg
|
||||
:height: 200px
|
||||
:alt: Image de reference
|
||||
|
||||
`Ficher GIMP à travailler pour faire une belle image en manipulant les calques <./fig/rosette.xcf>`_
|
||||
|
||||
On conclue cette exploration des couleurs en revenant sur la page web où l'on va donner des couleurs aux éléments grâce au RBG dans le fichier css.
|
||||
|
||||
Les deux fichiers doivent être enregistré dans le même répertoire.
|
||||
|
||||
- `Code html (clique droit - enregistrer sous pour l'enregistrer sur son ordinateur <./page_css/page_avec_css.html>`_
|
||||
- `Code css (clique droit - enregistrer sous pour l'enregistrer sur son ordinateur <./page_css/style.css>`_
|
||||
|
||||
On laissera ensuite les élèves commencer leur page html sur le métier qu'ils auront choisis.
|
||||
|
||||
Étape 4: les métadonnées
|
||||
========================
|
||||
|
|
@ -91,8 +111,8 @@ Idées de métiers:
|
|||
|
||||
Tous les élèves préparent une page web. Seuls quelqu'un passent à l'oral pour la présentation.
|
||||
|
||||
Évaluation (/10):
|
||||
Évaluation (/10) + 5 si vous passez à l'oral:
|
||||
|
||||
- 5pts sur la description du métier
|
||||
- 5pts sur l'écrire de la page web (utilisation des balises et validité du code)
|
||||
- 5pts sur l'écrire de la page web (utilisation des balises, des couleurs en css et de la validité du code)
|
||||
- 5pts présentation orale
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<!-- en-tête -->
|
||||
<meta charset="UTF-8">
|
||||
<meta name="Author" content="Fabrice Sincère">
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Un exemple de page web en HTML5</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- corps -->
|
||||
|
||||
<h1>Un exemple de page web en HTML5 (titre en taille 1)</h1>
|
||||
<h2>Un titre (taille 2)</h2>
|
||||
<h3>Un titre (taille 3)</h3>
|
||||
<h4>Un titre (taille 4)</h4>
|
||||
<h5>Un titre (taille 5)</h5>
|
||||
<h6>Un titre (taille 6)</h6>
|
||||
|
||||
<p>Un paragraphe.</p>
|
||||
|
||||
<p>Un deuxième paragraphe.
|
||||
Il n'y a pas de saut de ligne.</p>
|
||||
|
||||
<p>Un troisième paragraphe.<br>Avec un saut de ligne.</p>
|
||||
|
||||
<p>Un mot en <strong>gras</strong>, en <em>italique</em>.</p>
|
||||
|
||||
<p>Une liste :</p>
|
||||
|
||||
<ul>
|
||||
<li>Chapitre 1</li>
|
||||
<li>Chapitre 2</li>
|
||||
<li>Chapitre 3
|
||||
<ul>
|
||||
<li>Exercice 3.1</li>
|
||||
<li>Exercice 3.2 </li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Chapitre 4</li>
|
||||
</ul>
|
||||
|
||||
<p>Une table :</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<!-- en-tête de la table-->
|
||||
<th>Courant (A)</th>
|
||||
<th>Tension (V)</th>
|
||||
<th>Puissance (W)</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,0</td>
|
||||
<td>5,0</td>
|
||||
<td>5,0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2,0</td>
|
||||
<td>15,0</td>
|
||||
<td>30,0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3,0</td>
|
||||
<td>20,0</td>
|
||||
<td>60,0</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<p><a href="http://fr.wikipedia.org/wiki/HTML5">Un lien hypertexte vers l'article HTML5 du site web de WikiPédia</a></p>
|
||||
|
||||
<p>Un autre lien hypertexte <a href="http://fr.wikipedia.org/wiki/Hyperlien">ici</a>.</p>
|
||||
|
||||
<p>Une photo de Richard Stallman (située sur le site web de Wikipédia).<br>
|
||||
Passez la souris sur chacune des images :</p>
|
||||
|
||||
<p>Un trait horizontal :</p>
|
||||
<hr>
|
||||
|
||||
<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://fsincere.free.fr/isn/python/picto/valid-html.png" alt="Valid HTML5" height="31" width="88"></a></p>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
body {
|
||||
}
|
||||
|
||||
p{
|
||||
}
|
||||
|
||||
h1{
|
||||
}
|
||||
Loading…
Reference in New Issue