Exposé css. TP Parcourir une liste. DM html.

Deuxième exposé de notre premier cycle d’exposés par Elias & Gaëtan.

Exposé : le CSS – Principe de séparation du contenu et de la mise en forme.

Le site présenté va encore être un peu remanié et un lien sera fourni sous peu.

Bravo aux intervenants 😀


TP html/css :

Créer une page web, à l’aide d’un éditeur de texte. Je suggère Notepad++ sous Windows.

Créer la structure de base

cm 2019-11-21 base html 1

et enregistrer sous « index.html » par exemple dans son dossier « devoirs » dans le dossier « classe » sur le réseau du lycée. Dans type de fichier, choisir évidemment HyperText Markup Language File .html !

Modifier le « Titre de la page » dans la balise title et observer le changement en ouvrant cette page dans un navigateur. On préférera Mozilla Firefox à Internet Explorer !

Agrémenter cette page web, à l’aide de l’éditeur de texte Notepad++.

On utilisera pourquoi pas le tutoriel de Mozilla sur les balises (cliquer ici) ou le très bon exposé de la semaine dernière pour

  1. Rajouter des paragraphes et du texte à l’intérieur des paragraphes en le mettant en forme avec des passages en gras, en italique
  2. Rajouter un lien pointant vers cette page (celle que vous êtes en train de lire)
  3. Rajouter une image (on l’a mise dans un sous dossier images ce qui a permis de travailler des liens relatifs)
  4. Rajouter une liste non ordonnée (on ne l’a pas fait, mais c’est simplement une balise ul qui contient des balises li.
  5. Dans un sous-dossier css, on crée une feuille de style style.css
  6. Rajouter cette ligne dans l’entête :
    cm 2019-11-21 base html 2
  7. Changer le style du paragraphe p dans style.css -> s’inspirer de l’exposé du jour !
  8. Observer les changements !
  9. On a créé un lien vers une autre page page.html et on a fait un lien vers celle-ci. Pour qu’elle puisse afficher une image scarlett.jpg du sous-dossier images, on a du mettre un lien relatif ../images/scarlett.jpg et pour qu’elle puisse utiliser la même feuille de style du sous-dossier images, on a du mettre un lien relatif ../css/style.css
  10. Tout ceci est enregistré dans les dossiers classes des TS1 et TS2 dans Cours/ISN/site pour que vous puissiez vous en inspirer pour le…

Devoir maison pour le 9 janvier :

On doit créer, par groupe de mini-projet, un site web, c’est-à-dire un dossier contenant :

  • une page index.html
  • des sous dossiers :
  • images (qui contient toutes les images insérées dans les différentes pages html du site),
  • pages
  • css dans lesquel on crée une feuille de style style.css

Cette feuille de style sera liée à vos pages dans l’entête de chaque page.

Sur cette base, créer un site collectif présentant votre mini-projet avec une page générale et une page par personne quant à votre investissement personnel !


TP : parcourir une liste

Écrire une fonction est_present(elt, liste) qui attend en paramètre une valeur et une liste et qui teste si la valeur est présente dans la liste

  • d’abord en renvoyant True ou False. Exemples :
    >>> liste_de_test = [42, 13, 28, 14, 2, 52]
    >>> est_present(14, liste_de_test)
    >>> True
    >>> est_present(23, liste_de_test)
    >>> False
  • Puis en renvoyant l’indice où est la valeur est trouvée, ou -1 si elle n’est pas trouvée. Exemples :
    >>> liste_de_test = [42, 13, 28, 14, 2, 52]
    >>> est_present(14, liste_de_test)
    >>> 3
    >>> est_present(23, liste_de_test)
    >>> -1

Écrire une fonction maximum(liste) qui attend en paramètre une liste non vide et qui

  • renvoie son maximum. Exemples :
    >>> liste_de_test = [42, 13, 28, 14, 2, 52, 21, 35]
    >>> maximum(liste_de_test)
    >>> 52
  • Puis renvoie un couple (maximum, indice). Exemples :
    >>> liste_de_test = [42, 13, 28, 14, 2, 52, 21, 35]
    >>> maximum(liste_de_test)
    >>> (52, 5)

Idem avec le minimum.

Recherche de doublons

cm 2019-11-20 NSI TP parcourir une liste - fonction est_present

On a produit ces codes avec Noé :

def est_present_v1(elt, liste):
    return elt in liste 

def est_present(elt, liste):
    for i in range(len(liste)):
        if liste[i] == elt:
            return i
    return -1

liste_de_test = [42, 13, 28, 14, 2, 52]
print(est_present(23, liste_de_test))
print(est_present(14, liste_de_test))

def maximum(liste):
    m = liste[0]
    for i in range(1, len(liste)):
        if liste[i] > m:
            m = liste[i]
    return m

liste_de_test = [42, 13, 28, 84, 2, 52]
print(maximum(liste_de_test))

def maximum_v2(liste):
    """
    Cette fonction attend une liste non vide
    renvoie le maximum et l'indice du maximum
    """

    # initialisation
    m = liste[0]
    i_m = 0

    # parcours de la liste
    for i in range(1, len(liste)):
        if liste[i] > m: # si plus que le maximum actuel
            m = liste[i] # on change le maximum
            i_m = i      # on stocke l'indice
    return m, i_m        # on renvoie

liste_de_test = [42, 13, 28, 84, 2, 52]
maxi, indice = maximum_v2(liste_de_test)
print("Le maximum est {} atteint à l'indice {}".format(maxi, indice))

Finir le TP avec ces fonctions à commenter mais aussi le minimum et la recherche de doublons pour jeudi 12/12. Voir commentaire de Zoé et réponse pour mise à jour !

Démo de résultat :

[42, 13, 28, 84, 2, 52]

Le maximum est 84 atteint à l'indice 3
Le minimum est 2 atteint à l'indice 4
Pas de doublons dans cette liste

[5, 6, 7, 42, 13, 28, 12, 84, 2, 6, 42, 52, 6, 52]

Le maximum est 84 atteint à l'indice 7
Le minimum est 2 atteint à l'indice 8
Il y a 3 fois le nombre 6
Il y a 2 fois le nombre 42
Il y a 2 fois le nombre 52
>>> 

Travail sur les mini-projets

  • Tout se passe ici.

Les deux semaines à venir 28/11 et 5/12 :

  • Je suis en formation mais VOUS AVEZ COURS !
  • Mme Huber vous ouvrira la salle : à votre déléguée (Justine, si tu nous entends, on espère que tu vas bien) d’aller la chercher, merci 😉
  • Mme Huber fera l’appel.
  • Vous travaillerez sur vos mini-projets et sites (DM) en groupes.

4 réflexions au sujet de « Exposé css. TP Parcourir une liste. DM html. »

  1. Bonsoir !!!
    C’était juste pour vous prévenir que nous changions de projet avec Alexandre. En effet, à la place du bomberman nous faisons un BlackJack maintenant comme projet !
    Bonne fin de soirée ;D

N'hésitez-pas à poser une question, ou faire avancer le schmilblick

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.