{"id":1075,"date":"2020-02-02T22:26:22","date_gmt":"2020-02-02T21:26:22","guid":{"rendered":"http:\/\/labodemaths.fr\/WordPress3\/?p=1075"},"modified":"2020-09-09T19:23:36","modified_gmt":"2020-09-09T17:23:36","slug":"snt-tp-note-htmlcss","status":"publish","type":"post","link":"https:\/\/labodemaths.fr\/WordPress3\/snt-tp-note-htmlcss\/","title":{"rendered":"SNT : TP not\u00e9 HTML,CSS"},"content":{"rendered":"\n

1. Mise en place du dossier : 3 points<\/h3>\n\n\n\n

Les points 1 \u00e0 6 doivent vous amener \u00e0 avoir un r\u00e9sultat similaire \u00e0 :
http:\/\/labodemaths.fr\/snt\/7_familles\/index.html<\/a><\/p>\n\n\n\n

Cr\u00e9er un dossier \u00ab\u00a07_familles\u00a0\u00bb dans votre espace personnel.
Votre dossier devra contenir :
– 1 fichier html nomm\u00e9 \u00ab\u00a0Al-Khwarizmi\u00a0\u00bb,
– 1 fichier html nomm\u00e9 \u00ab\u00a0index\u00a0\u00bb,
– 1 fichier css nomm\u00e9 \u00ab\u00a0style\u00a0\u00bb,
– 1 fichier css nomm\u00e9 \u00ab\u00a0style-biographie\u00a0\u00bb.
– 1 dossier \u00ab\u00a0images\u00a0\u00bb
Ces fichiers seront vides pour l’instant.
Votre dossier doit ressembler \u00e0 :<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

2. Placer une image dans votre sous-dossier \u00ab\u00a0images\u00a0\u00bb : 1 pt <\/h3>\n\n\n\n

T\u00e9l\u00e9charger l’image ci-dessous et la placer dans votre sous-dossier \u00ab\u00a0images\u00a0\u00bb<\/p>\n\n\n\n

al-khwarizmi<\/a>T\u00e9l\u00e9charger<\/a><\/div>\n\n\n\n

Vous devez avoir \u00e0 pr\u00e9sent :<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

3. Mise en place de la page index.html ( 2 pts )<\/h3>\n\n\n\n

Copier-coller le code suivant dans la page index.html et enregistrer la ( 1 pt ) :<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"fr\" >\n<head>\n  <meta charset=\"UTF-8\">\n<link rel=\"stylesheet\" href=\"style.css\">\n<link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto&display=swap\" rel=\"stylesheet\">\n    \n  <title><\/title>\n<\/head>\n<body>\n    <header>Le jeu des 7 familles en informatique.\n        <br>\n    Inspir\u00e9 de :<br>\n <a  href=\"https:\/\/interstices.info\/dossier\/7-familles-de-linformatique\/\" target=\"_blank\">https:\/\/interstices.info\/dossier\/7-familles-de-linformatique\/<\/a>\n<\/header>\n    <section>\n        <h1>Algorithme & programmation<\/h1>\n        <article>\n            <img src=\"images\/al-khwarizmi.png\" style=\"width:100%;\">\n        <a href=\"Al-Khwarizmi.html\">Al-Khwarizmi<\/a>\n        <\/article>\n        <article>\n        <h2>Ada Lovelace<\/h2>\n            <\/article>\n        <article>\n        <h2>Grace Hopper<\/h2>\n            <\/article>\n        <article>\n        <h2>Dorothy Vaughan<\/h2>\n            <\/article>\n        <article>\n        <h2>Gilles Kahn<\/h2>\n        <\/article>\n        <article>\n        <h2>G\u00e9rard Berry<\/h2>\n        <\/article>\n    <\/section>\n    <section>\n        <h1>Math\u00e9matiques & Informatique <\/h1>\n        <article>\n        <h2>Hypatie d\u2019Alexandrie<\/h2>\n            <\/article>\n        <article>\n        <h2>George Boole<\/h2>\n            <\/article>\n        <article>\n        <h2>Alonzo Church<\/h2>\n            <\/article>\n        <article>\n        <h2>Jacques-Louis Lions<\/h2>\n             <\/article>\n        <article>\n        <h2>Ingrid Daubechies<\/h2>\n             <\/article>\n        <article>\n        <h2>Jocelyne Troccaz<\/h2>\n            <\/article>\n    <\/section>\n<section>\n        <h1>S\u00e9curit\u00e9 & confidentialit\u00e9<\/h1>\n        <article>\n        <h2>Jules C\u00e9sar<\/h2>\n            <\/article>\n        <article>\n        <h2>Al-Kindi<\/h2>\n            <\/article>\n        <article>\n        <h2>Whitfield Diffie et Martin Hellman<\/h2>\n            <\/article>\n        <article>\n        <h2>Ron Rivest, Adi Shamir et Leonard Adleman (RSA)<\/h2>\n            <\/article>\n        <article>\n        <h2>Shafi Goldwasser<\/h2>\n             <\/article>\n        <article>\n        <h2>Cynthia Dwork<\/h2>\n        <\/article>\n    <\/section>\n<section>\n        <h1>Syst\u00e8mes & r\u00e9seaux<\/h1>\n        <article>\n        <h2>Alexander Graham Bell<\/h2>\n            <\/article>\n        <article>\n        <h2>Claude Shannon<\/h2>\n            <\/article>\n        <article>\n        <h2>Vinton Cerf<\/h2>\n            <\/article>\n        <article>\n        <h2>Tim Berners-Lee<\/h2>\n            <\/article>\n        <article>\n        <h2>Pascale Vicat-Blanc<\/h2>\n             <\/article>\n        <article>\n        <h2>Anne-Marie Kermarrec<\/h2>\n        <\/article>\n    <\/section>\n    <footer>\n        Avec l'aimable autorisation de l'Inria pour la r\u00e9utilisation des textes et images.\n\n    <\/footer>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Modifier le footer pour remplacer le contenu par votre nom et pr\u00e9nom.<\/strong><\/p>\n\n\n\n
4. Mise en place de la page style.css ( 1 pt )<\/h3>\n\n\n\n
Copier-coller le code suivant dans votre page style.css et enregistrer la.<\/strong><\/p>\n\n\n\n
body {\n    background-color: white;\n    font-family: 'Roboto', sans-serif;\n}\n\nheader {\n    color: rgb(91, 158, 226);\n    font-size: 30px;\n    padding-left: 10px;\n    padding-top: 10px;\n    border-bottom-style: solid;\n    border-bottom-color: red;\n    padding-bottom: 20px;\n}\nheader a {\n    font-size: 15px;\n}\n\nsection {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    margin-bottom: 10px;\n    \n}\n\nh1 {\n    font-family: 'Roboto', sans-serif;\n    width: 100%;\n    font-size: 20px;\n}\narticle {\n    width: 10%;\n    text-align: center;\n    border-style: solid;\n    border-color: red;\n}\n\na {\n  outline: none;\n  text-decoration: none;\n  padding: 2px 1px 0;\n}\n\na:link {\n  color: #265301;\n}\n\na:visited {\n  color: #437A16;\n}\n\na:focus {\n  border-bottom: 1px solid;\n  background: #BAE498;\n}\n\na:hover {\n  border-bottom: 1px solid;     \n  background: #CDFEAA;\n}\n\na:active {\n  background: #265301;\n  color: #CDFEAA;\n}<\/code><\/pre>\n\n\n\n
5. Mise en place de la page Al-Khwarizmi.html ( 1 pt )<\/h3>\n\n\n\n
Copier-coller le code suivant dans la page Al-Khwarizmi.html et enregistrer la.<\/strong><\/p>\n\n\n\n
\n<!DOCTYPE html>\n<html lang=\"fr\" >\n<head>\n  <meta charset=\"UTF-8\">\n<link rel=\"stylesheet\" href=\"style-biographie.css\">\n<link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto&display=swap\" rel=\"stylesheet\">\n    \n  <title>AL-Kwarizmi<\/title>\n<\/head>\n<body>\n    <header>Al-Khwarizmi\n<\/header>\n        <h1>vers 780 \u2013 vers 850<\/h1>\n        <article id=\"AL-Kwarizmi\">\n            <p>\n            Math\u00e9maticien persan du IXe si\u00e8cle. Pour aider ses contemporains, ce sage a \u00e9crit un livre regroupant des m\u00e9thodes claires, \u00e0 suivre pas \u00e0 pas, pour r\u00e9soudre des probl\u00e8mes math\u00e9matiques. De plus, le titre de ce livre contient l\u2019expression \u00ab Al Jabr \u00bb (lisez-le \u00e0 haute voix) ce qui explique que son nom soit associ\u00e9 \u00e0 l\u2019arriv\u00e9e de l\u2019alg\u00e8bre en Europe. Son nom fut traduit par Algoritmi en latin.\n            <\/br>\nBref, avec Al-Khwarizmi, on voit appara\u00eetre des algorithmes complexes !<\/p>\n            \n        <\/article>\n    <a href=\"index.html\">Retour<\/a>\n        \n   \n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
6. Mise en place de la page style-biographie.css ( 1 pt )<\/h3>\n\n\n\n
Copier-coller le code suivant dans la page <\/strong>style-biographie.css et enregistrer la.<\/strong><\/p>\n\n\n\n
body {\n    background-color: white;\n    font-family: 'Roboto', sans-serif;\n}\n\nheader {\n    color: rgb(91, 158, 226);\n    font-size: 30px;\n    min-height: 100px;\n    padding-left: 10px;\n    padding-top: 10px;\n    border-bottom-style: solid;\n    border-bottom-color: red;\n}\n\narticle {\n    background-image: url(images\/al-khwarizmi.png);\n    background-repeat: no-repeat;\n    padding-left: 200px;\n    width: 80%;\n    border-style: solid;\n    border-color: skyblue;\n    font-size: 30px;\n    margin-bottom: 10px;\n}\n\n\nh1 {\n    font-family: 'Roboto', sans-serif;\n    width: 100%;\n    font-size: 30px;\n}\n\np {\n    margin-left: 20%;\n}\n\n\nheader a {\n    font-size: 10px;\n}\na {\n  outline: none;\n font-size: 20px;\n  text-decoration: none;\n  padding: 2px 1px 0;\n}\n\na:link {\n  color: #265301;\n}\n\na:visited {\n  color: #437A16;\n}\n\na:focus {\n  border-bottom: 1px solid;\n  background: #BAE498;\n}\n\na:hover {\n  border-bottom: 1px solid;     \n  background: #CDFEAA;\n}\n\na:active {\n  background: #265301;\n  color: #CDFEAA;\n}<\/code><\/pre>\n\n\n\n
7. Modification de la page index.html ( 4 pts )<\/h3>\n\n\n\n
En vous inspirant du code html relatif  \u00e0 Al-Khwarizmi dans la page index.html<\/p>\n\n\n\n
<article id=\"Al-Khwarizmi\">\n            <img src=\"images\/al-khwarizmi.png\" style=\"width:100%;\">\n        <a href=\"Al-Khwarizmi.html\">Al-Khwarizmi<\/a>\n        <\/article><\/code><\/pre>\n\n\n\n
Modifier le code de l’article, dans la page index.html, qui correspond \u00e0 la carte qui vous a \u00e9t\u00e9 distribu\u00e9e ( 2 points )<\/strong>.<\/p>\n\n\n\n
Placer dans le sous-dossier \u00ab\u00a0images\u00a0\u00bb l’image qui correspond \u00e0 votre carte ( l’image est \u00e0 retrouver et \u00e0 enregistrer \u00e0 partir de l’article : <\/strong>
https:\/\/interstices.info\/dossier\/7-familles-de-linformatique\/<\/strong><\/a>
( 2 points )<\/strong><\/p>\n\n\n\n
8. Cr\u00e9ation de la page html correspondant \u00e0 la carte qui vous a \u00e9t\u00e9 distribu\u00e9e. ( 7 pts )<\/h3>\n\n\n\n
  1. Cr\u00e9er un nouveau fichier html portant le nom correspondant \u00e0 la carte qui vous a \u00e9t\u00e9 distribu\u00e9e,<\/li>
  2. Ins\u00e9rer le code html ad\u00e9quat ainsi que le contenu correspondant \u00e0 votre carte ( on peut en premier lieu, y copier le code html de la page Al-Khwarizmi.html puis le modifier ),<\/li>
  3. cr\u00e9er une page mon-style.css et la lier \u00e0 votre page html,<\/li>
  4. copier dans cette page css le contenu de la page style-biographie.css et la modifier pour obtenir l’image correspondant \u00e0 votre carte..<\/li>
  5. V\u00e9rifier que tout fonctionne bien \u00e0 partir de la page index.html<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"
    1. Mise en place du dossier : 3 points Les points 1 \u00e0 6 doivent…<\/p>\n
    Read the postSNT : TP not\u00e9 HTML,CSS<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":1078,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1075"}],"collection":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/comments?post=1075"}],"version-history":[{"count":3,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1075\/revisions"}],"predecessor-version":[{"id":1084,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/1075\/revisions\/1084"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media\/1078"}],"wp:attachment":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media?parent=1075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/categories?post=1075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/tags?post=1075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}