Les maths du yeti


Le yeti explorateur de mathématiques

Plusieurs TP de découverte des langages HTML et CSS.

+ javascript pour les plus rapides.

Leçon : Histoire WEB

cours_web.pdf 488,7 Kio

TP 1 : Découverte HTML

activite1.pdf 206,9 Kio fichiers.zip 2,3 Kio

TP 1-bis : Lecture d'arbre DOM

premier.html 1,4 Kio petit.html 923 octets petit2.html 429 octets petit3.html 824 octets form.html 570 octets

TP 2 : Découverte du CSS

Questionnaire HTML

Activité 1 : découverte du CSS.

Le TP de découverte du CSS

Les fichiers du TP : activite1.html 2,4 Kio     activite2.css 631 octets

Les fichiers pour l'exercice : exercice_selecteur.html 512 octets     exercice_selecteur.css 24 octets

 

Objectifs :

Vous allez, en suivant ce pas à pas, améliorer l'apparence du fichier NSI.html disponible ci-dessous.

Ainsi, vous allez découvrir différentes propriétés CSS
Pour des renseignement complémentaires, n'hésitez pas à aller sur le site https://developer.mozilla.org/fr/ et à rechercher une propriété.
Les règles CSS évoluent en permanence et il n'est pas demander de toutes les connaître par coeur !

Le pas à pas à suivre :

  1. Téléchargez les fichiers NSI.html et python.png dans le dossier \ISN\Interraction_Hommes_Machines\Activite2-css\ de votre espace de travail.

  2. Dans ce même dossier, créez un fichier style.css
  3. Nous allons lier la feuille de style à notre fichier html. Pour cela, il faut ajouter la balise :
    <link href="style.css" rel="stylesheet" type="text/css">
    dans l'entête (head) de notre fichier html.
    Pensez à sauvegarder régulièrement.
  4. Nous allons commencer par changer la police d'affichage, ajoutez le code suivant dans le fichier css
    html {
      font-size: 10px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
      font-family: 'Open Sans', sans-serif; /* cela devrait être le reste du résultat obtenu à partir de Google fonts */
    }

    le texte entre /* et */ est en commentaire.
  5. Enregistrez et actualisez l'affichage du html dans le navigateur. La police a été modifiée pour toutes les balises filles de la balise html.
  6. Améliorons le titre de niveau 1 :
    h1 {
      font-size: 60px;
      text-align: center;
    }
  7. La règle suivante portera sur les paragraphes et les listes. A vous de compléter la déclaration suivante avec le bon sélecteur :
    ? {
      font-size: 16px;
      line-height: 2;
      letter-spacing: 1px;
    }
  8. Nous allons changer la couleur de fond :
    html {
      background-color: #00539F;
    }

    La couleur est ici donnée avec un code hexadécimal. Nous en reparlerons plus tard dans l'année.
    Il est possible de donner une valeur en RGB, RGBA (RGB + canal alpha) , avec un mot clé (red, green , LightCoral ...) , ou encore HSL ou HSLA.
    Allez voir ce site https://developer.mozilla.org/fr/docs/Web/CSS/Type_colorou encore ce site : https://htmlcolorcodes.com/fr/
  9. Le code suivant va améliorer le corps du texte
     body {
      width: 600px;
      margin: 0 auto;
      background-color: #FF9500;
      padding: 0 20px 20px 20px;
      border: 5px solid black;
    }

    width permet de fixer la largeur d'un élément
    margin fixe les marges des 4 côtés d'un élément, c'est une propriété raccourcie qui permet de manipuler les autres propriétés de marges : margin-top, margin-right, margin-bottom et margin-left.
    padding représente le remplissage (espace entre le contenu et la bordure)
    border est une propriété raccourcie qui permet de définir les propriétés liées à la bordure. border peut être utilisée pour définir les valeurs de border-width, border-style et border-color.
    Voir ici pour le modèle de boite.
  10. Et de code améliore le titre de niveau 1:
    h1 {
      margin: 0;
      padding: 20px 0;
      color: #00539F;
      text-shadow: 3px 3px 1px black;
    }
  11. Et enfin ce code positionne mieux l'image
    img {
      display: block;
      margin: 0 auto;
    }

Exercice

A vous de trouver les règles CSS suivantes :

  1. Trouver un sélecteur permettant de modifier uniquement le paragraphe commençant par "Comprendre les enjeux d'un internet ouvert..."
    En utilisant ce sélecteur changer le paragraphe de couleur et de taille.
  2. Trouver un sélecteur permettant de modifier uniquement le titre : "Manifeste de la fondation mozilla."
    En utilisant ce sélecteur changer la taille, la couleur et centrer le titre.
  3. Trouver un sélecteur permettant de modifier uniquement le lien quand il est survolé.
    En utilisant ce sélecteur changer la couleur de fond et enlevez le soulignage.

Présentation :

Vous allez rédiger une page présentant un loisir que vous pratiquez.

Les consignes :

Il faudra utiliser la structure html travaillée en classe

Vous allez créer une feuille de style permettant un affichage plus agréable.

Vous pouvez vous inspirer de l'image ci-dessous :

Notation :

Le fichier HTML
Le fichier passe le validateur du c3w 1 pts
La structure est celle vue en classe 1 pt
Le fichier CSS
Les sélecteurs sont bien utilisés 2 pts
Les règles CSS sont correctes 1 pt

Protocole de rendu :

Chaque élève doit rendre une archive contenant tous les fichiers necessaires à l'affichage de la page html.