cours_05_B.ipynb

{"cells":[{"metadata":{"hide_input":true,"hide_output":true,"init_cell":true,"run_control":{"marked":false},"trusted":true},"cell_type":"code","source":"# Permet de tout executer au lancement du notebook + conserver le notebook actif pendant 2h\nfrom IPython.display import Javascript\nfrom masquer import *\nJavascript(\"\"\"\nfunction repeter(){\nIPython.notebook.kernel.execute(\"a=1\");\n}\n// execute a = 1 en python toutes les 8 minutes pendant 2h\nlet timerId = setInterval(() => repeter(), 4800);\nsetTimeout(() => { clearInterval(timerId); alert('fin de cession'); }, 7200000);\n\n// Supprimer la taille limite pour la sortie d'une cellule\nIPython.OutputArea.prototype._should_scroll = function(lines) {\n    return false;\n};\nIPython.notebook.kernel.execute(\"url = '\" + window.location + \"'\");\n\n// Exécuter toutes les cellule du notebook\n    require(\n        ['base/js/namespace', 'jquery'], \n        function(jupyter, $) {\n            \n                \n                jupyter.actions.call('jupyter-notebook:run-all-cells-below');\n                jupyter.actions.call('jupyter-notebook:save-notebook');\n                Jupyter.actions.call('jupyter-notebook:hide-header')\n\n        }\n    );\"\"\")","execution_count":2,"outputs":[{"output_type":"execute_result","execution_count":2,"data":{"text/plain":"<IPython.core.display.Javascript object>","application/javascript":"\nfunction repeter(){\nIPython.notebook.kernel.execute(\"a=1\");\n}\n// execute a = 1 en python toutes les 8 minutes pendant 2h\nlet timerId = setInterval(() => repeter(), 4800);\nsetTimeout(() => { clearInterval(timerId); alert('fin de cession'); }, 7200000);\n\n// Supprimer la taille limite pour la sortie d'une cellule\nIPython.OutputArea.prototype._should_scroll = function(lines) {\n    return false;\n};\nIPython.notebook.kernel.execute(\"url = '\" + window.location + \"'\");\n\n// Exécuter toutes les cellule du notebook\n    require(\n        ['base/js/namespace', 'jquery'], \n        function(jupyter, $) {\n            \n                \n                jupyter.actions.call('jupyter-notebook:run-all-cells-below');\n                jupyter.actions.call('jupyter-notebook:save-notebook');\n                Jupyter.actions.call('jupyter-notebook:hide-header')\n\n        }\n    );"},"metadata":{}}]},{"metadata":{"slideshow":{"slide_type":"slide"}},"cell_type":"markdown","source":"# <span style=\"color:red;\"><center>Interactions entre l’homme et la machine sur le Web</center></span>"},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"## Introduction\n\nPar définition, une **page web est écrite en HTML** (Hyper Text Markup Langage) et cela pourrait suffire, c'était d'ailleurs le cas au début du Web. Mais aujourd'hui, les **bonnes pratiques du développement web** demandent l'utilisation conjointe de **CSS** (Cascading Style Sheets).\n\nAu maximum, il faut donc respecter la répartition suivante des rôles :\n- Le fichier *.html* **contient l'information** (texte, images, liens, ...).\n- Le fichier *.css* **contient les instructions de mise en page** (police, couleurs, marges, ...).\n\nCette distinction n'est pas toujours évidente car il est tout à fait possible de faire de la mise en page sans utiliser CSS, juste avec le HTML."},{"metadata":{"slideshow":{"slide_type":"slide"}},"cell_type":"markdown","source":"## A. Créer une page web statique\n\nUne page web est dite **statique** si elle se contente d'afficher **la même information pour tous les utilisateurs**. De plus, on se restreindra pour le moment à des pages **sans interaction possible avec l'utilisateur** (en dehors des liens), c'est-à-dire **non-interactives**."},{"metadata":{"slideshow":{"slide_type":"slide"}},"cell_type":"markdown","source":"### I. Le HTML\n\n#### 1. Un langage de balisage\n\nLe HTML est un **langage informatique de description**, dit **de balisage**. Cela signifie que contrairement aux **langages de programmation** comme *Python* par exemple, il ne comporte aucune instruction pour faire des boucles ou des tests conditionnels, il ne manipule ni variable, ni fonction ...\n\nNB :\n- Pour le web, on utilse souvent le *JavaScript* comme langage de programmation.\n- Le langage *Markdown* utilisé pour ce Notebook est aussi un langage de balisage mais on peut aussi très bien y écrire en HTML."},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"En HTML, on se contente de **structurer l'information avec des balises** qui indiquent **où commencent et se terminent** chaque élément : les paragraphes, les titres, les passages importants, les listes, les tableaux, ...\n\nPour cela, on utilise des **balises ouvrantes** de la forme ``<nom_balise>`` et des **balises fermantes** de la forme ``</nom_balise>``.\n\nLa première règle de base est donc : **Toute balise ouverte doit être fermée.**\n\nNB : Comme toute règle, elle a ses exceptions ! ;)"},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"#### 2. Le rôle du navigateur internet\n\nUn **navigateur internet** (Firefox, Chrome, Opera, Safari, ...) est un **logiciel** capable de **lire** le texte et les instructions écrites dans un **fichier HTML et son fichier CSS associé**, afin de les interpréter et **d'afficher au mieux l'information contenue avec sa mise en page**.\n\nIl est toujours possible de visualiser directement le **code source** d'une page web affichée par le navigateur. Sur PC, on peut en général y accéder avec la touche *F12* ou avec un clic-droit puis \"Afficher le code source de la page\".\n\nDe plus, si les fichiers sont hébergés sur le net, le navigateur gère la communication avec le serveur web (requêtes http)."},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"#### 3. Premiers pas\n\nPour faire nos premiers pas en HTML, nous allons utiliser un **éditeur en ligne** qui a l'avantage de présenter dans la même fenêtre le code HTML, le code CSS (et aussi le JavaScript si besoin) et l'affichage que ferait un navigateur de ce code.\n\nLe site choisi est https://jsfiddle.net/ car il ne demande aucune inscription."},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"##### 3.1 Hello World\n\nVous le savez, est informaticien digne de ce nom doit toujours commencer par faire afficher *Hello World* lorsqu'il commence un nouveau langage de programmation, sous peine d'être maudit sur 7 générations.\n\nSur le site https://jsfiddle.net/, dans la fenêtre *HTML*, vous allez donc commencer par copier-coller le code HTML ci-dessous. Puis cliquez sur le bouton *Run* en haut à gauche pour voir le résultat dans la fenêtre *Result* (c'est quand même bien fait, non ? ;) )\n\n    <h1>Hello World! Ceci est un titre</h1>\n    <p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>"},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"**Remarques :**\n- La règle de base sur les balises ouvrantes et fermantes est bien respectée.\n- Les balises peuvent être **imbriquées** (on ouvre et on ferme une balise à l'intérieur d'une autre) mais **pas chevauchées** (si plusieurs balises sont ouvertes, il faut toujours commencer par fermer la dernière ouverte).\n- La balise ``<strong>`` permet de mettre en évidence un passage important du texte. Le plus souvent, cette mise en évidence se traduira par une écriture en **gras**. Mais si ce n'est pas possible (tout le texte est déjà affiché en gras par exemple) alors cela pourra se traduire par un soulignement. Il vaut donc mieux utiliser la balise ``<strong>`` plutôt que la balise ``<b>`` (pour bold) qui ne fait que mettre en gras et qui n'est donc qu'un élément de style plutôt réservé au CSS."},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"##### 3.2 Les bonnes pratiques\n\n**Beaucoup de choses sont autorisées** (ou pas interdites) par le code HTML (pas de message d'erreur quand vous chargez la page dans un navigateur) **mais très fortement déconseillées dans la pratique**.\n\nPar exemple, la balise ``<h1>`` sert à écrire un titre (header) de niveau 1 qui, par défaut, apparaitra en plus gros qu'un titre de niveau 2 ouvert avec ``<h2>`` puisqu'il est plus important.  \nCependant, rien n'interdit d'inverser le rôle de ``<h1>`` et ``<h2>`` en modifiant la taille des polices (avec le CSS) ou encore d'écrire des paragraphes entier en *h1*.\n\n**Mais il ne faut pas le faire**. Il faut respecter la **sémantique des balises**, cela fait partie des *bonnes pratiques* en HTML."},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"##### 3.3 Les attributs\n\nLa plupart des balises peuvent être ouvertes en précisant certains **attributs**, ce sont des **précisions sur le comportement de la balise** dont le rôle est très variable d'une balise à une autre.\n\nMais certains attributs, dits **globaux**, peuvent être utilisés avec **toutes les balises HTML**, c'est le cas de l'**identifiant** (*id*) et de la **classe** (*class*).\n\nCes attributs sont **utilisés conjointement avec le CSS pour mettre en forme** le contenu des balises."},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"Copier-coller le code HTML ci-dessous, à la place du précédent, sur le site *JSFiddle.net* et cliquez sur le bouton *Run*.\n\n    <h1>Ceci est un titre</h1>\n    <h2 class=\"titre_1\">Ceci est un sous titre</h2>\n    <p id=\"para_1\">Ceci est un <strong>paragraphe</strong>.</p>\n    <p>Avez-vous bien compris ?</p>\n\nPour l'instant, les attributs *class* et *id* n'ont aucune influence sur le rendu de la page. Pour changer cela, il faut passer par le CSS."},{"metadata":{"slideshow":{"slide_type":"slide"}},"cell_type":"markdown","source":"### II. Le CSS\n\n#### 1. Un exemple\n\nCopier-coller le code ci-dessous, mais cette fois **dans la fenêtre CSS** de *JSFiddle.net*.\n\n    h1 {\n        text-align: center;\n        background-color: red;\n    }\n    h2{\n        font-family: Verdana;\n        font-style: italic;\n        color: green;\n    }\n    #para_1{\n        font-style: italic;\n        color: green;\n    }\n    .titre_1{\n        color:red\n    }\n\nCliquer sur *Run* et observer le résultat."},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"#### 2. Structure d'un fichier CSS\n\nUn fichier CSS **liste des sélecteurs** (*h1, h2, #para_1, .titre1*) qui **ciblent certaines balises HTML** et pour chacun desquels on indique des **règles de mise en forme** ou **règles de style** (alignement du texte, couleur de fond, nom de la police, style d'écriture, couleur d'écriture, ...).\n\nOn distingue dans notre exemple 3 sortes de sélecteur, **du plus général au plus précis** :\n- Les **sélecteurs d'éléments** (par ex. *h1*) qui s'appliquent à toutes les balises d'un type donné (ici, toutes les balises de type *h1*).\n- Les **sélecteurs de classe** (par ex. *.titre1*) qui s'appliquent à toutes les balises d'une classe spécifiques (ici, toutes celles qui comportent l'attribut *class=\"titre_1\"*).\n- Les **sélecteurs d'identifiant** (par exe. *#para_1*) qui s'appliquent à la seule et unique balise qui a cet identifiant (ici, celle qui a l'attribut *id=\"para_1\"*)."},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"#### 3. Les conflits en CSS\n\nAvec ce système, il arrive fréquemment qu'une seule et même balise soit concernée par plusieurs règles de style qui rentrent en **conflit**.\n\nDans notre exemple, la balise ``<h2 class=\"titre_1\">`` doit à la fois appliquer les règles qui s'appliquent à toutes les balises ``<h2>`` et celles qui s'appliquent à celles de la classe *titre_1*. Ce qui fait que le texte devrait apparaître à la fois vert et rouge ! Or on constate que le texte apparaît rouge, ce qui signifie que c'est la règle de classe qui est ici prioritaire.\n\nCeci nous amène à une règle de base de CSS : **En cas de conflit, c'est la règle la plus précise (la moins générale) qui s'applique.**\n\nEn terme de **priorité**, on a donc : **identifiant > classe > élément**"},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"#### 4. Quel sélecteur utiliser en CSS ?\n\nLes attributs *id* et *class* permettent tous les deux d'appliquer (ou de cibler) des règles de mise en forme à une balise. La différence fondamentale est que l'**on peut attribuer la même classe à plusieurs balises alors qu'un identifiant doit rester unique** (attaché à une seule balise).\n\nEn conséquence, on utilise les **classes pour définir des mises en forme qui se répètent dans la page** alors que les **identifiants servent à mettre en forme un élément qui n'apparaît qu'une seule fois** dans la page.\n\nLes règles CSS définies pour un **sélecteur d'élément** sont les plus générales et donc à réserver à des **éléments de style qui ne varient pas de toute la page**, comme la police de caractère utilisée par exemple."},{"metadata":{"slideshow":{"slide_type":"slide"}},"cell_type":"markdown","source":"### III. Créer une page HTML avec CSS\n\n#### 1. Méthodologie\n\nNous allons à présent abandonner JSFiddle qui permete seulement de tester des petits morceaux de code, pour nous atteler à la création d'une véritable page web.\n\nCela passe par la création d'un fichier HTML, par exemple *index.html*, et d'un fichier CSS, par exemple *style.css*. Ces 2 fichiers sont des fichiers texte que l'on créera et éditera avec l'éditeur *Notepad++* par exemple.\n\nPour voir ce que donne notre page web, il suffit de l'ouvrir avec un navigateur web (doucle clic sur le *index.html*). Ensuite, à chaque fois qu'on veut visualiser les modifications apportées sur nos fichiers HTML et CSS, il suffit de les sauvegarder puis de rafraichir la page sur le navigateur (touche F5)."},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"#### 2. Première  page web\n\nDans *index.html*, copier-coller le code suivant puis le visualiser dans un navigateur.\n\n    <!doctype html>\n    <html lang=\"fr\">\n        <head>\n            <meta charset=\"utf-8\">\n            <title>Voici mon site</title>\n        </head>\n        <body>\n            <h1>Hello World! Ceci est un titre</h1>\n            <p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>\n        </body>\n    </html>\n    \n**Remarque :** L'identation des blocks n'est pas obligatoire mais conseillée pour plus de lisibilité du code."},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"#### 3. Structure de base\n\nL'exemple précédent comporte le minimum de toute page web qui se respecte :\n- L'instruction ``<!doctype html>`` (qui n'est pas une balise) et indique seulement au navigateur que le fichier est en HTML 5.\n- Les balises ``<html>`` et ``</html>`` sont obligatoires et encadrent l'ensemble du code HTML.\n- Les balises ``<head>`` et ``</head>`` délimitent l'en-tête (*header*) qui contient quelques informations essentielles pour la page :\n    - En particulier, la balise ``<meta charset=\"utf-8\">`` précise l'encodage à utiliser pour les caractères et permet d'afficher correctement les caractères accentués. (Tiens, une balise qui ne se ferme pas !)\n    - Quant aux balises ``<title>``et ``</title>`` elles permettent de définir le titre de la page qui s'affiche dans les onglets du navigateur.\n- Enfin, les balises ``<body>`` et ``</body>`` délimitent le corps de la page, c'est-à-dire l'ensemble des informations que l'on veut afficher."},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"#### 4. Premier fichier CSS\n\nDans un autre onglet de *Notepad++*, copier-coller le code suivant et l'enregistrer sous *style.css* dans le même répertoire que le fichier *index.html*.\n\n    h1 {\n        text-align: center;\n        background-color: red;\n    }\n    p {\n        font-family: Verdana;\n        font-style: italic;\n        color: green;\n    }"},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"#### 5. Lier les fichiers HTML et CSS\n\nPour l'instant, le fichier CSS n'est pas utilisé car nous ne l'avons pas lier à notre fichier HTML. Pour cela, il faut **indiquer dans l'en-tête du fichier HTML le nom et le chemin du fichier CSS à utiliser**.\n\nAjouter la ligne suivante dans le *header*, enregister et rafraichir la page.\n\n    <link rel=\"stylesheet\" href=\"style.css\">\n    \nNB :\n- Comme les 2 fichiers sont dans le **même répertoire**, le nom du fichier CSS suffit. S'il était dans un sous-répertoire *CSS*, il faudrait écrire `` href=\"CSS/style.css\"``.\n- Que ce soit pour le **nom d'un fichier** CSS, d'une image ou d'un lien, les **caractères accentués**, les **espaces** et autres **caractères spéciaux** sont à **bannir** car leur traitement dépend trop de la machine sur laquelle le code sera exécuté."},{"metadata":{"slideshow":{"slide_type":"slide"}},"cell_type":"markdown","source":"### IV. Quelques balises HTML de base\n\n#### 1. Insérer des liens hypertexte\n\nPour créer des **liens hypertexte**, on utilise la balise ``<a>`` et son **attribut** ``href`` qui sert à indiquer **vers quoi pointe le lien**. C'est tout le **texte contenu entre les balises ouvrante et fermante qui constitue le lien** (qui sera souligné en bleu sur la page).\n\nExemple de **lien vers un autre fichier HTML dans le même répertoire** :\n\n    <a href=\"mon_autre_page.html\">Cliquez ici pour vous rendre sur mon autre page</a>\n\nExemple de **lien vers une page internet** :\n\n    <a href=\"http://www.google.fr\">Cliquez ici pour vous rendre sur google.fr</a>\n    "},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"#### 2. Insérer des images\n\nPour **insérer une image**, on utilise la balise ``<img/>`` et ses **attributs** ``src`` qui indique où trouver l'image (nom et chemin si nécessaire) et ``alt`` qui est une description succinte de l'image. Cette balise est **à la fois ouvrante et fermante** (encore une exception) puisqu'elle sert à insérer une image à un endroit précis, elle n'est pas \"*étendue*\".\n\nL'attribut ``alt`` est important car il permet de décrire l'image pour un non-voyant qui surfe sur le net à l'aide d'un navigateur muni de synthèse vocale ou il s'affiche à la place de l'image si celle-ci n'est pas trouvée.\n\nExemple d'**insertion d'une image** :\n\n    <img src=\"mon_image.jpg\" alt=\"avion\"/>"},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"Pour indiquer la taille d'affichage de l'image, on utilise les attributs ``width`` et ``height`` qui précise sa taille d'affichage en pixels.\n\nExemple :\n\n    <img src=\"mon_image.jpg\" width=\"233\" height=\"217\" alt=\"avion\"/>"},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"#### 3. Structurer la page\n\nLes balises ``<div>`` et ``<span>`` sont un peu les balises à tout faire en HTML. Elles sont **génériques**, car elles ne servent à rien si ce n'est à **délimiter des morceaux de HTML** auxquels on voudrait par exemple appliquer un même style CSS. Idéalement, on ne **devrait pas les utiliser** mais elles sont pourtant très courantes, notamment sur les sites dont le code a été généré par un logiciel.\n\nLa balise ``<div>`` crée des **éléments de type *block*** qui se disposent les uns en dessous des autres, comme ``<p>``, ``<h1>``, ...\n\nLa balise ``<span>``, au contraire, crée des **éléments de type *inline*** qui sont insérés les uns à côté des autres (en ligne), comme ``<strong>``, ``<img>``, ``<a>``, ..."},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"Avec le HTML5 sont arrivées de **nouvelles balises de structure**.\n\nPar exemple, les balises ``<header>`` (à ne pas confondre avec ``<head>``) et ``<footer>`` créent aussi des éléments de type block mais réservés (idéalementà à l'**en-tête** (logo, banière, slogan, ...) et au **pied de page** (contact, nom, informations légales, ...) de la page web.\n\nLa balise ``<nav>`` crée un block dédié au **menu de navigation** sur le site sur la gauche de la page. Les balises ``<section>``, ``<article>`` et ``<aside>`` sont encore autant de solutions pour créer des blocs dans la page."},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"Un schéma pour résumer :\n\n![structure_html.png](attachment:structure_html.png)","attachments":{"structure_html.png":{"image/png":"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"}}},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"#### 4. Les commentaires\n\nComme pour un programme classique, il peut être utile de glisser quelques lignes de **commentaires** dans son code HTML.\n\nOn utilise pour cela la **balise** ``<!-- Ceci est un commentaire -->`` qui n'a pas besoin non plus d'être fermée."},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"#### 5. Mettre en valeur du texte\n\nOn a déjà vu la balise ``<strong>`` qui est une mise en valeur forte d'une portion de texte, traduite le plus souvent par des caractères **gras**.\n\nPour une mise en valeur moins forte, on peu utiliser la balise ``<em>``, pour *emphasize*, qui se traduit en général par de l'*italique*.\n\nOn peut aussi utiliser la balise ``<mark>`` pour mettre en évidence du texte dans un contexte donné. Cela aura pour effet de le surligner.\n\nEvidemment, toutes ces balises doivent être fermées à la fin du morceau de texte concerné."},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"#### 6. Faire des listes\n\nPour démarrer une **liste à puces** (non numérotée) on utilise la balise ``<ul>`` (*unordered list*) et pour une **liste numérotée**, la balise ``<ol>`` (*ordered list*). Pour les terminer on utilise la **balise fermante associée**.\n\n**Dans les deux cas**, chaque **élément de la list**e est délimité par les balises ``<li>`` et ``</li>`` (*list item*)."},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"Exemple de **page structurée avec les balises précédentes** :\n\n    <!doctype html>\n    <html lang=\"fr\">\n        <head>\n            <meta charset=\"utf-8\">\n            <title>Voici mon site</title>\n        </head>\n        <body>\n            <!-- Ceci est un commentaire -->\n            <div>div est une balise de type <strong>block</strong></div>\n            <p><em>la balise p</em> est une autre balise de type block</p>\n            <span>En revanche, span est une balise de type \"inline\"</span>\n            <a href=\"www.google.fr\">Et voici une autre balise de type \"inline\"</a>\n            <h1>h1 est bien une balise de type \"block\"</h1>\n            <span>la malheureuse balise span est <mark>obligée</mark> de se placer en dessous</span>\n        </body>\n    </html>"},{"metadata":{"slideshow":{"slide_type":"subslide"}},"cell_type":"markdown","source":"Voici ce que donne le code HTML précédent une fois interprété par le navigateur :\n\n<!doctype html>\n<html lang=\"fr\">\n    <head>\n        <meta charset=\"utf-8\">\n        <title>Voici mon site</title>\n    </head>\n    <body>\n        <!-- Ceci est un commentaire -->\n        <div>div est une balise de type <strong>block</strong></div>\n        <p><em>la balise p</em> est une autre balise de type block</p>\n        <span>En revanche, span est une balise de type \"inline\"</span>\n        <a href=\"www.google.fr\">Et voici une autre balise de type \"inline\"</a>\n        <h1>h1 est bien une balise de type \"block\"</h1>\n        <span>la malheureuse balise span est <mark>obligée</mark> de se placer en dessous</span>\n    </body>\n</html>"},{"metadata":{"slideshow":{"slide_type":"slide"}},"cell_type":"markdown","source":"Nous allons à présent commencer à pratiquer vraiment dans le [TP](TP_05_1.ipynb) suivant. "}],"metadata":{"celltoolbar":"Diaporama","kernelspec":{"name":"python3","display_name":"Python 3","language":"python"},"language_info":{"name":"python","version":"3.7.10","mimetype":"text/x-python","codemirror_mode":{"name":"ipython","version":3},"pygments_lexer":"ipython3","nbconvert_exporter":"python","file_extension":".py"}},"nbformat":4,"nbformat_minor":4}