{"id":713,"date":"2025-03-14T21:35:51","date_gmt":"2025-03-14T20:35:51","guid":{"rendered":"https:\/\/labo.univ-batna.dz\/lepcm\/?p=713"},"modified":"2025-03-14T23:27:07","modified_gmt":"2025-03-14T22:27:07","slug":"tableau","status":"publish","type":"post","link":"https:\/\/labo.univ-batna.dz\/lepcm\/?p=713","title":{"rendered":"Tableau"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"713\" class=\"elementor elementor-713\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8a23cac elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"8a23cac\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3d5bb677\" data-id=\"3d5bb677\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-643d3adf elementor-widget elementor-widget-text-editor\" data-id=\"643d3adf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.23.0 - 15-07-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p><!DOCTYPE html><br \/>\n<html lang=\"fr\"><br \/>\n<head><br \/>\n    <meta charset=\"UTF-8\"><br \/>\n    <title>Tableau P\u00e9riodique<\/title><\/p>\n<style>\n        body {<br \/>\n            font-family: Arial, sans-serif;<br \/>\n            max-width: 1200px;<br \/>\n            margin: 0 auto;<br \/>\n            padding: 20px;<br \/>\n        }<\/p>\n<p>        .periodic-table {<br \/>\n            display: grid;<br \/>\n            grid-template-columns: repeat(18, 60px);<br \/>\n            grid-template-rows: repeat(10, 60px);<br \/>\n            gap: 5px;<br \/>\n        }<\/p>\n<p>        .element {<br \/>\n            border: 1px solid #333;<br \/>\n            border-radius: 5px;<br \/>\n            padding: 10px;<br \/>\n            text-align: center;<br \/>\n            cursor: pointer;<br \/>\n            transition: transform 0.2s;<br \/>\n            background-color: #f0f0f0;<br \/>\n        }<\/p>\n<p>        .element:hover {<br \/>\n            transform: scale(1.1);<br \/>\n            z-index: 1;<br \/>\n        }<\/p>\n<p>        .alkali-metal { background-color: #ff6666; }<br \/>\n        .alkaline-earth { background-color: #ffcc66; }<br \/>\n        .transition-metal { background-color: #ffff66; }<br \/>\n        .post-transition { background-color: #66ff66; }<br \/>\n        .metalloid { background-color: #66ffff; }<br \/>\n        .nonmetal { background-color: #6666ff; }<br \/>\n        .noble-gas { background-color: #ff66ff; }<br \/>\n        .lanthanide { background-color: #ffb366; }<br \/>\n        .actinide { background-color: #ff8080; }<\/p>\n<p>        .symbol {<br \/>\n            font-size: 1.2em;<br \/>\n            font-weight: bold;<br \/>\n        }<\/p>\n<p>        .details {<br \/>\n            margin-top: 20px;<br \/>\n            padding: 10px;<br \/>\n            border: 1px solid #ccc;<br \/>\n            display: none;<br \/>\n        }<br \/>\n    <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<h1>Tableau P\u00e9riodique des \u00c9l\u00e9ments<\/h1>\n<div class=\"periodic-table\">\n        <!-- Premier \u00e9l\u00e9ment --><\/p>\n<div class=\"element alkali-metal\" data-symbol=\"H\" data-name=\"Hydrog\u00e8ne\" data-number=\"1\" data-weight=\"1.008\">\n<div class=\"symbol\">H<\/div>\n<div class=\"number\">1<\/div>\n<\/p><\/div>\n<p>        <!-- \u00c9l\u00e9ment vide --><\/p>\n<div class=\"element empty\"><\/div>\n<p>        <!-- Autres \u00e9l\u00e9ments --><\/p>\n<div class=\"element transition-metal\" data-symbol=\"Fe\" data-name=\"Fer\" data-number=\"26\" data-weight=\"55.85\" style=\"grid-column: 8; grid-row: 4;\">\n<div class=\"symbol\">Fe<\/div>\n<div class=\"number\">26<\/div>\n<\/p><\/div>\n<p>        <!-- Exemple de lanthanide --><\/p>\n<div class=\"element lanthanide\" data-symbol=\"La\" data-name=\"Lanthane\" data-number=\"57\" data-weight=\"138.91\" style=\"grid-column: 3; grid-row: 9;\">\n<div class=\"symbol\">La<\/div>\n<div class=\"number\">57<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"details\" id=\"elementDetails\">\n<h2 id=\"detailName\"><\/h2>\n<p>Num\u00e9ro atomique : <span id=\"detailNumber\"><\/span><\/p>\n<p>Masse atomique : <span id=\"detailWeight\"><\/span><\/p>\n<\/p><\/div>\n<p>    <script><br \/>\n        document.querySelectorAll('.element').forEach(element => {<br \/>\n            element.addEventListener('click', () => {<br \/>\n                const details = document.getElementById('elementDetails');<br \/>\n                if (element.dataset.symbol) {<br \/>\n                    details.style.display = 'block';<br \/>\n                    document.getElementById('detailName').textContent = element.dataset.name;<br \/>\n                    document.getElementById('detailNumber').textContent = element.dataset.number;<br \/>\n                    document.getElementById('detailWeight').textContent = element.dataset.weight;<br \/>\n                } else {<br \/>\n                    details.style.display = 'none';<br \/>\n                }<br \/>\n            });<br \/>\n        });<br \/>\n    <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code><\/code><\/pre>\n<!-- \/wp:code -->\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-98ff503 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"98ff503\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6aad7b9\" data-id=\"6aad7b9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e175f78 elementor-widget elementor-widget-heading\" data-id=\"e175f78\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.23.0 - 15-07-2024 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"http:\/\/labo.univ-batna.dz\/lepcm\/wp-content\/uploads\/2025\/03\/test.html\">test<\/a><\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Tableau P\u00e9riodique Tableau P\u00e9riodique des \u00c9l\u00e9ments H 1 Fe 26 La 57 Num\u00e9ro atomique : Masse atomique : test<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-713","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/labo.univ-batna.dz\/lepcm\/index.php?rest_route=\/wp\/v2\/posts\/713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/labo.univ-batna.dz\/lepcm\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labo.univ-batna.dz\/lepcm\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labo.univ-batna.dz\/lepcm\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/labo.univ-batna.dz\/lepcm\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=713"}],"version-history":[{"count":4,"href":"https:\/\/labo.univ-batna.dz\/lepcm\/index.php?rest_route=\/wp\/v2\/posts\/713\/revisions"}],"predecessor-version":[{"id":729,"href":"https:\/\/labo.univ-batna.dz\/lepcm\/index.php?rest_route=\/wp\/v2\/posts\/713\/revisions\/729"}],"wp:attachment":[{"href":"https:\/\/labo.univ-batna.dz\/lepcm\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labo.univ-batna.dz\/lepcm\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labo.univ-batna.dz\/lepcm\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}