É-TIC Learning : Cyberespace Teknoplus - Le plaisir d'apprendre les TIC éthiques. Initiative du Cyberespace Teknoplus (Bruxelles) qui a pour objectif de promouvoir et de permettre à tous d'apprendre les TIC d'une manière agréable, éthique, participative et citoyenne.

Canalblog

Suivre ce blog

Administration + Créer mon blog

Publicité

29 novembre 2007

Travail commun : un site

Pour le groupe du jeudi , le travail finalisé, le site, devra être remis au terme de la séance prévue le jeudi 20/12 à 12.30 . Le thème sélectionné pour le groupe du jeudi : la musique.- Natacha : les années 80.- Thérèse : les années 60.- Christiane :...

Posté par MINIX à 18:11 - Commentaires […] - Permalien [#]

Partager cet article

Vous aimez ?

0 vote

Publicité

28 novembre 2007

Caractères accentués et spéciaux en HTML

Liste non-exhaustive des caractères à convertir en HTML pour que les navigateurs les affichent correctement. Les caractères accentués Lettre A Á --> Á á --> á Â --> Â â --> â à --> à Æ --> Æ Lettre E É -->...

Posté par MINIX à 12:25 - Commentaires […] - Permalien [#]

Partager cet article

Vous aimez ?

0 vote

25 novembre 2007

Pour éviter les malentendus

Quelques précisions permettront, je le pense, d'éviter des malentendus dans les jours et semaines à venir. ;-) Pour ma part je peux : - être présente, - vous expliquer la création de site Web et le HTML,- vous proposer des exercices, - vous conseiller...

Posté par MINIX à 14:01 - Commentaires […] - Permalien [#]

Partager cet article

Vous aimez ?

0 vote

25 novembre 2007

Récapitulatif HTML

W.W.W. est l'acronyme de World Wide Web. Le Web est constitué de pages Web. Ces pages sont conçues avec le langage HTML (HyperText Markup Language) . Le HTML est un "pseudo-code" : un langage à balises. Ce langage de description (ou pseudo-code) permet...

Posté par MINIX à 14:00 - Commentaires […] - Permalien [#]

Partager cet article

Vous aimez ?

0 vote

23 novembre 2007

Initiation au HTML

Observez attentivement les extraits de pages (HTML) suivantes.Pour des raisons de lisibilité, j'ai mis en couleur les balises incontournables. Au sujet des balises et de leur place : quels constats pouvez-vous poser ? Initiation... </div> </div> </a> <div class="article_footer"> <div class="article_footer_info"> Posté par MINIX à 10:54 - <a href="http://cyberteknoplus.canalblog.com/archives/2007/11/23/6538524.html#ob-comments"><span>Commentaires [<span id="comment-count-1508081">…</span><script> ob.commentCount(document.querySelector("#comment-count-1508081"), { resource: "http://cyberteknoplus.canalblog.com/api/comment-count/1508081", format: (count) => { const string = count === 0 ? "0" : count === 1 ? "%c" : "%c" return string.replace("%c", count) } }) </script>]</span></a> - Permalien [<a href="http://cyberteknoplus.canalblog.com/archives/2007/11/23/6538524.html">#</a>] </div> <h3 class="ob-Shares-title">Partager cet article</h3> <div class="ob-Shares ob-Shares--right ob-Shares--horizontal "> <div class="ob-Shares-facebookShare"> <div class="fb-share-button" data-href="http://cyberteknoplus.canalblog.com/archives/2007/11/23/6538524.html" data-layout="button_count"></div> </div> <div class="ob-Shares-twitter"> <a class="twitter-share-button" href="https://twitter.com/share" data-url="http://cyberteknoplus.canalblog.com/archives/2007/11/23/6538524.html" data-text="Initiation au HTML" data-lang="en" ></a> </div> <div class="ob-Shares-mail"> <a href="mailto:?subject=Initiation%20au%20HTML&body=Voici%20un%20article%20int%C3%A9ressant%20que%20j%27ai%20trouv%C3%A9%20sur%20%3A%20http%3A%2F%2Fcyberteknoplus.canalblog.com%2Farchives%2F2007%2F11%2F23%2F6538524.html"> <img src="https://assets.canalblog.com/c/blog/v2024.08.30/images/shareicon_email.png"> </a> </div> <div class="ob-Shares-print ob-Shares-print_1508081"> <img src="https://assets.canalblog.com/c/blog/v2024.08.30/images/printer.png"> </div> </div> <script> var printElement = document.querySelector(".ob-Shares-print_1508081") printElement.addEventListener("click", function() { ob.printPost("Initiation au HTML", "\n\n\n <div class=\"ob-sections\">\n \n \n \n <div\n class=\"ob-section ob-section-html \"\n >\n\n<p><font color=\"#660066\">Observez attentivement les extraits de pages <\/font><font size=\"1\" color=\"#660066\">(HTML) <\/font><font color=\"#660066\">suivantes.<br \/>Pour des raisons de lisibilit\u00e9, j'ai mis en couleur les balises incontournables.<br \/><br \/><strong>Au sujet des balises et de leur place : quels constats pouvez-vous poser ?<\/strong><\/font><\/p><hr width=\"100%\" size=\"2\" \/>\r\n<p><\/p>\r\n<p><strong><font color=\"#009900\"><html><\/font><font color=\"#660000\"><head><\/font><\/strong><br \/><font color=\"#660099\"><strong><title><\/strong><\/font>Initiation au HTML<font color=\"#660099\"><strong><\/title><\/strong><\/font><br \/><strong><font color=\"#9966ff\"><font color=\"#660000\"><\/head><\/font><br \/><\/font><\/strong><br \/><font color=\"#cc6600\"><strong><body><\/strong><\/font><br \/>L'<strong>H<\/strong>yper<strong>T<\/strong>ext <strong>M<\/strong>arkup <strong>L<\/strong>anguage <font size=\"1\">(Langage de D\u00e9finition HyperTexte)<\/font> est la mani\u00e8re <font color=\"#0000cc\"><strong><br><\/strong><\/font><br \/>dont un navigateur Web affiche ses documents multim\u00e9dias. <font color=\"#0000cc\"><strong><br><\/strong><\/font>Les documents <br \/>eux-m\u00eames sont simplement des fichiers texte <font size=\"1\">(ASCII)<\/font> avec des codes <br \/>de contr\u00f4le sp\u00e9ciaux appel\u00e9s balises <font size=\"1\">(ou tags en anglais)<\/font> <font color=\"#0000ff\"><strong><br><\/strong><\/font>qu'un navigateur sait <br \/>interpr\u00e9ter et afficher sur votre \u00e9cran.<br \/><font color=\"#cc6600\"><strong><\/body><\/strong><\/font><br \/><font color=\"#009900\"><strong><\/html><br \/><br \/><\/strong><\/font><\/p><hr width=\"100%\" size=\"2\" \/>\r\n\r\n<hr width=\"100%\" size=\"2\" \/>\r\n\r\n\r\n\r\n\r\n\r\n<p><font color=\"#009900\"><strong><\/strong><\/font>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<\/p>\r\n\r\n<p>1) <font color=\"#660066\">Toute page \u00e9crite en HTML commence par<\/font> <font color=\"#009900\"><strong><html><\/strong><\/font><br \/><font color=\"#660066\">\r\nToute page \u00e9crite en HTML s'ach\u00e8ve par <\/font><strong><font color=\"#009900\"><\/html><br \/><\/font><font color=\"#660066\"><br \/><\/font><\/strong><font color=\"#660066\">Ces deux balises "pr\u00e9viennent" le navigateur que les documents qui vont \u00eatres <br \/>\r\naffich\u00e9s via son interm\u00e9diaire sont "\u00e9crits" en html. <br \/>\r\nEnsuite le navigateur reconnaissant le langage, toutes les autres balises, lui indiquent <br \/>\r\nla mani\u00e8re dont il devra afficher le texte ou les images "contenus" dans la page.<\/font><font color=\"#009900\"><strong><\/strong><\/font><\/p><hr width=\"100%\" size=\"2\" \/>\r\n\r\n<hr width=\"100%\" size=\"2\" \/>\r\n\r\n\r\n\r\n\r\n\r\n<p><font color=\"#009900\"><strong><\/strong><\/font>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<\/p>\r\n\r\n<p>2)<font color=\"#660066\"> La balise <\/font><font color=\"#0000cc\"><strong><br><\/strong><\/font><font color=\"#660066\"> pour "<\/font><font color=\"#0000cc\"><strong>B<\/strong><\/font><font color=\"#660066\">reak<\/font> <font color=\"#0000cc\"><strong>R<\/strong><\/font><font color=\"#660066\">ow" indique au navigateur que vous voulez un retour \u00e0 la ligne <br \/>pr\u00e9cis\u00e9ment l\u00e0 o\u00f9 se trouve la balise. Tr\u00e8s pratique pour ne pas devoir infliger \u00e0 l'internaute <br \/>une page qui devrait se lire au kilom\u00e8tre.<\/font><br \/><font color=\"#0000cc\"><strong><\/strong><\/font><\/p>\r\n\r\n<p><font color=\"#009900\"><strong><\/strong><\/font><\/p><hr width=\"100%\" size=\"2\" \/>\r\n\r\n<hr width=\"100%\" size=\"2\" \/>\r\n\r\n\r\n\r\n\r\n\r\n<p><font color=\"#009900\"><strong><\/strong><\/font>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<\/p>\r\n\r\n<p><strong><\/strong>\r\n\r\n\r\n\r\n<\/p>\r\n\r\n<p>3)<font color=\"#660066\"> Ci-dessous un bloc de pseudo-code, presque le m\u00eame que le premier bloc <font size=\"1\">(voir ci-dessus)<\/font><br \/> mais avec une information suppl\u00e9mentaire pour le navigateur.<br \/>On lui dit d'interpr\u00e9ter tous les accents avec un code sp\u00e9cifique correspondant. \r\n<br \/>Sans cette information, le navigateur pourrait vous donner une affichage correct de ce que <br \/>vous vouliez \u00e0 l'exception de tous les accents : aigus, graves, circonflexes, etc.<\/font><br \/><br \/><font color=\"#009900\"><strong><\/strong><\/font><\/p><hr width=\"100%\" size=\"2\" \/>\r\n\r\n<hr width=\"100%\" size=\"2\" \/>\r\n\r\n\r\n\r\n\r\n\r\n<p><font color=\"#009900\"><strong><\/strong><\/font>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<\/p>\r\n\r\n<p><strong><font color=\"#339900\"><html><\/font><font color=\"#660000\"><head><\/font><\/strong>\r\n\r\n<\/p>\r\n\r\n<p><font color=\"#660099\"><strong><title><\/strong><\/font>Initiation au HTML<font color=\"#660099\"><strong><\/title><\/strong><\/font><br \/><strong><font color=\"#9966ff\"><font color=\"#660000\"><\/head><\/font><br \/><\/font><\/strong><br \/><font color=\"#cc6600\"><strong><body><\/strong><\/font><br \/>L'<strong>H<\/strong>yper<strong>T<\/strong>ext <strong>M<\/strong>arkup <strong>L<\/strong>anguage <font size=\"1\">(Langage de D<strong>é<\/strong>finition HyperTexte)<\/font> est la mani<strong>è<\/strong>re <font color=\"#0000cc\"><strong><br><\/strong><\/font><br \/>dont un navigateur Web affiche ses documents multim<strong>é<\/strong>dias. <font color=\"#0000cc\"><strong><br><\/strong><\/font>Les documents <br \/>eux-m<strong>ê<\/strong>mes sont simplement des fichiers texte <font size=\"1\">(ASCII)<\/font> avec des codes <br \/>de contr<strong>ô<\/strong>le sp<strong>é<\/strong>ciaux appel<strong>é<\/strong>s balises <font size=\"1\">(ou tags en anglais)<\/font> <font color=\"#0000ff\"><strong><br><\/strong><\/font>qu'un navigateur sait <br \/>interpr<strong>é<\/strong>ter et afficher sur votre <strong>é<\/strong>cran.<br \/><font color=\"#cc6600\"><strong><\/body><\/strong><\/font><br \/><font color=\"#009900\"><strong><\/html><br \/><br \/><\/strong><\/font><\/p><hr width=\"100%\" size=\"2\" \/><p><strong><font color=\"#339900\"><br \/><html><\/font><font color=\"#660000\"><head><\/font><\/strong><br \/><font color=\"#660099\"><strong><title><\/strong><\/font>Recherches Web <font color=\"#660099\"><strong><\/title><\/strong><\/font><br \/><font color=\"#9966ff\"><strong><font color=\"#660000\"><\/head><\/font><br \/><\/font><\/strong><br \/><font color=\"#cc6600\"><strong><body><\/strong><\/font><br \/>Durant cette partie, vous vous servirez d'un navigateur pour rechercher <br \/>de l'information sur le Web. <font color=\"#0000cc\"><strong><br><\/strong><\/font>Il s'agira pour vous de vous renseigner<br \/>sur les formats de fichiers image, son et vid\u00e9o pour ensuite r\u00e9diger <br \/>un rapport de vos r\u00e9sultats.<br \/><strong><font color=\"#cc6600\"><\/body><\/font><br \/><font color=\"#339900\"><\/html><br \/><\/font><\/strong><strong><br \/>\r\n<\/strong>\r\n\r\n\r\n<\/p><hr width=\"100%\" size=\"2\" \/>\r\n\r\n\r\n\r\n\r\n\r\n<p><strong><\/strong><strong><font color=\"#339900\"><br \/><html><\/font><font color=\"#660000\"><head><\/font><\/strong><strong><font color=\"#660099\"><br \/><title><\/font><\/strong>Recherches Web - Explication 1<strong><font color=\"#660066\"><\/title><\/font><\/strong><font color=\"#660000\"><br \/><strong><\/head><\/strong><\/font><strong><br \/><font color=\"#9966cc\"><\/font><\/strong><font color=\"#cc6600\"><br \/><strong><body><br \/><\/strong><\/font><strong><\/strong>Le rapport rendant compte du r\u00e9sultat de vos recherches devra \u00eatre pr\u00e9sent\u00e9 de 4 mani\u00e8res.<font color=\"#cc6600\"><br \/><strong><\/body><br \/><\/strong><\/font><strong><font color=\"#339900\"><\/html><\/font><\/strong><\/p><hr width=\"100%\" size=\"2\" \/><p><strong><font color=\"#339900\"><br \/><html><\/font><br \/><font color=\"#660000\"><head><\/font><br \/><font color=\"#660099\"><title><\/font><\/strong>Recherches Web - Explication 2<strong><font color=\"#660099\"><\/title><\/font><br \/><font color=\"#660000\"><\/head><\/font><br \/><font color=\"#9966ff\"><\/font><br \/><font color=\"#cc6600\"><body><\/font><br \/><font color=\"#0066ff\"><ul><\/font><\/strong><strong><font color=\"#999900\"><li><\/font><font color=\"#ff0000\"><u><\/font><\/strong>La premi\u00e8re<strong><font color=\"#ff0000\"><\/u><\/font> <\/strong>: via un traitement de texte <font size=\"1\">(OpenOffice Writer ou MS Word).<\/font><strong><font color=\"#999900\"><br \/><li><\/font><font color=\"#ff0000\"><u><\/font><\/strong>La seconde<font color=\"#ff0000\"><strong><\/u> <\/strong><\/font>: via une pr\u00e9sentation en format HTML, des pages web.<strong><br \/><font color=\"#999900\"><li><\/font><font color=\"#ff0000\"><u><\/font><\/strong>La troisi\u00e8me<strong><font color=\"#ff0000\"><\/u><\/font> <\/strong>: via une pr\u00e9sentation claire, concise et attractive <font size=\"1\">(en utilisant <br \/>le logiciel de Pr\u00e9sentation OpenOffice Impress ou MS PowerPoint).<\/font><strong><br \/><font color=\"#999900\"><li><\/font><font color=\"#ff0000\"><u><\/font><\/strong>La quatri\u00e8me<font color=\"#ff0000\"><strong><\/u> <\/strong><\/font>: via un travail de groupe qu'il faudra pr\u00e9senter.<strong><font color=\"#0066ff\"><\/ul><\/font><br \/><font color=\"#cc6600\"><\/body><\/font><br \/><font color=\"#009900\"><\/html><\/font><\/strong><\/p><hr width=\"100%\" size=\"2\" \/><p><font color=\"#990066\">\r\nEn cas d'oubli de vos notes, vous trouverez ci-dessous le document que vous avez <br \/>re\u00e7u lors des premi\u00e8res sessions. \r\nCe document <\/font><font size=\"1\" color=\"#990066\">(voir le lien <em><strong>Bases_html_261107<\/strong><\/em>)<\/font><font color=\"#990066\"> est au <br \/>format <em><strong>.pdf<\/strong><\/em> <\/font><font size=\"1\" color=\"#990066\">(Acrobat Reader).<\/font><\/p>\r\n\r\n<p><font color=\"#009933\">Je tiens cependant \u00e0 vous rappeler que ce document ne vous dispense pas d'assister <br \/>aux <a href=\"http:\/\/cyberteknoplus.canalblog.com\/archives\/2007\/10\/14\/6537775.html\">s\u00e9ances planifi\u00e9es<\/a> car celui-ci n'est qu'un support : un point de d\u00e9part pour le <br \/>travail que nous faisons ensemble.<br \/>- Il aborde sans entrer dans les d\u00e9tails le HTML. \r\n<br \/>- Les "d\u00e9tails" sont quant \u00e0 eux abord\u00e9s durant les s\u00e9ances en nos locaux et <br \/> sont principalement bas\u00e9s sur des questions pratiques, vos questions, qui <br \/> apparaissent durant la r\u00e9alisation des exercices.<\/font><\/p>\r\n\r\n<p><font color=\"#009933\"><a href=\"https:\/\/storage.canalblog.com\/14\/29\/260047\/19484127.pdf\">Bases_html_261107<\/a><br \/><\/font>\r\n\r\n<\/p>\r\n\r\n<p><a href=\"https:\/\/storage.canalblog.com\/27\/53\/260047\/19439723.pdf\">creer_site_231107<\/a><br \/>\r\n\r\n<\/p>\r\n\r\n<p><\/p><hr width=\"100%\" size=\"2\" \/> <\/div>\n\n\n \n\n <\/div>\n ", "canalblog") }) </script> <script> (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.type = 'text/javascript'; js.async = true; js.defer = true; js.id = id; js.src = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'facebook-jssdk')); </script> <script> (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.type = 'text/javascript'; js.async = true; js.defer = true; js.id = id; js.src = 'https://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-jssdk')); </script> <div class="rating-wrapper"> <div class="rating-wording">Vous aimez ?</div> <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-star" viewBox="0 0 26 28"> <path d="M26 10.109c0 0.281-0.203 0.547-0.406 0.75l-5.672 5.531 1.344 7.812c0.016 0.109 0.016 0.203 0.016 0.313 0 0.406-0.187 0.781-0.641 0.781-0.219 0-0.438-0.078-0.625-0.187l-7.016-3.687-7.016 3.687c-0.203 0.109-0.406 0.187-0.625 0.187-0.453 0-0.656-0.375-0.656-0.781 0-0.109 0.016-0.203 0.031-0.313l1.344-7.812-5.688-5.531c-0.187-0.203-0.391-0.469-0.391-0.75 0-0.469 0.484-0.656 0.875-0.719l7.844-1.141 3.516-7.109c0.141-0.297 0.406-0.641 0.766-0.641s0.625 0.344 0.766 0.641l3.516 7.109 7.844 1.141c0.375 0.063 0.875 0.25 0.875 0.719z"></path> </symbol> <linearGradient id="grad"> <stop offset="50%" stop-color="#ffc41f"/> <stop offset="50%" stop-color="#9f9f9f"/> </linearGradient> </defs> </svg> <form class="stars"> <input class="stars-input" type="radio" name="rating" value="5" id="rating-5-1508081" > <label class="stars-view stars-view-5-1508081 " for="rating-5-1508081" onclick="handleRate(1508081, 5, 0, 'stars-view-5-1508081', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> <input class="stars-input" type="radio" name="rating" value="4" id="rating-4-1508081" > <label class="stars-view stars-view-4-1508081 " for="rating-4-1508081" onclick="handleRate(1508081, 4, 0, 'stars-view-4-1508081', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> <input class="stars-input" type="radio" name="rating" value="3" id="rating-3-1508081" > <label class="stars-view stars-view-3-1508081 " for="rating-3-1508081" onclick="handleRate(1508081, 3, 0, 'stars-view-3-1508081', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> <input class="stars-input" type="radio" name="rating" value="2" id="rating-2-1508081" > <label class="stars-view stars-view-2-1508081 " for="rating-2-1508081" onclick="handleRate(1508081, 2, 0, 'stars-view-2-1508081', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> <input class="stars-input" type="radio" name="rating" value="1" id="rating-1-1508081" > <label class="stars-view stars-view-1-1508081 " for="rating-1-1508081" onclick="handleRate(1508081, 1, 0, 'stars-view-1-1508081', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> </form> <div class="rating-raters-1508081"> 0 vote </div> </div> <script defer async> function setFullStar(halfStarElement) { halfStarElement.classList.add('star-chosen') } function setRaters(ratersElement, raters) { ratersElement.textContent = raters > 1 ? `${raters} votes` : `${raters} vote` } function createToaster() { const toaster = document.createElement('div') toaster.classList.add('rating-toaster') document.body.appendChild(toaster) return toaster } function showToast(message, status) { const toaster = createToaster() toaster.textContent = message toaster.classList.add('show-rating-toaster') if (status === "success") { toaster.style.backgroundColor = "#E5F4EF" toaster.style.color = "#1D8C65" } else { toaster.style.backgroundColor = "#FFB5B5" toaster.style.color = "#6F0000" } setTimeout(() => { toaster.classList.remove('show-rating-toaster') }, 3000) } async function rate(postID, value, halfStarClass, node) { const res = await fetch(`/api/section-container/rate/${postID}/${value}`, { method: "POST", headers: { "Content-Type": "application/json", }, credentials: 'include', }) if (res.ok) { const data = await res.json() const ratersNumber = document.querySelector(`.rating-raters-${postID}`) setRaters(ratersNumber, data.raters) showToast("Votre vote est pris en compte","success") if (node.classList.contains("half-star")) { const halfStarElement = document.querySelector(`.${halfStarClass}`) setFullStar(halfStarElement) } } return res } function handleUserLogin() { return window.open( `${window.location.origin}/comments/fr/fetch/user`, "loginob", "width=400,height=450,location=0,menubar=0,resizable=0,scrollbars=0,status=0,toolbar=0,titlebar=0" ) } async function handleRate(postID, value, halfStar, halfStarClass, node) { const isPreview = /\/preview\/|\.preview\./.test(window.location.href) if (isPreview) { showToast("Vous ne pouvez pas votez sur une preview de votre blog.","error") return } try { const rateResponse = await rate(postID, value, halfStarClass, node) if (rateResponse.status === 401) { const loginWindow = handleUserLogin() const checkWindowClosed = setInterval(() => { if (loginWindow && loginWindow.closed) { clearInterval(checkWindowClosed) const res = rate(postID, value, halfStarClass) if (res.status !== 200) { showToast("Une erreur est survenue lors du vote","error") } } }, 1000) } } catch (e) { showToast("Une erreur est survenue lors du vote","error") } } </script> </div> </div> <div class="ads_container-atf"> <div class="ads-container half_page"> <div class="ads-placeholder"> <span>Publicité</span> </div> <div id="_00235fe"></div> </div> </div> <div class="article article_1508145"> <div class="date-header">18 novembre 2007</div> <a class="article_link" href="http://cyberteknoplus.canalblog.com/archives/2007/11/18/5068988.html"> <h2 class="article_title title">Exercices insertions d'images</h2> <div class="article_content"> <div class="article_cover-wrapper"> <img class="article_cover" src="https://image.canalblog.com/8TmFY3mQCpmF3gJtODlI7l93r-E=/120x120/smart/filters:no_upscale()/https%3A%2F%2Fstorage.canalblog.com%2F15%2F23%2F260047%2F13531740_o.jpg" alt="Exercices insertions d'images"/> </div> <div class="article_snippet"> Pour enregistrer une image 1) S'il vous plait : lisez ce qui est affiché sur votre écran ;) - Pour faire rapide : votre regard doit balayer l'écran de la gauche vers la droite en commençant par le haut. - Lisez les boites de dialogues qui s'affichent... </div> </div> </a> <div class="article_footer"> <div class="article_footer_info"> Posté par MINIX à 10:13 - <a href="http://cyberteknoplus.canalblog.com/archives/2007/11/18/5068988.html#ob-comments"><span>Commentaires [<span id="comment-count-1508145">…</span><script> ob.commentCount(document.querySelector("#comment-count-1508145"), { resource: "http://cyberteknoplus.canalblog.com/api/comment-count/1508145", format: (count) => { const string = count === 0 ? "0" : count === 1 ? "%c" : "%c" return string.replace("%c", count) } }) </script>]</span></a> - Permalien [<a href="http://cyberteknoplus.canalblog.com/archives/2007/11/18/5068988.html">#</a>] </div> <h3 class="ob-Shares-title">Partager cet article</h3> <div class="ob-Shares ob-Shares--right ob-Shares--horizontal "> <div class="ob-Shares-facebookShare"> <div class="fb-share-button" data-href="http://cyberteknoplus.canalblog.com/archives/2007/11/18/5068988.html" data-layout="button_count"></div> </div> <div class="ob-Shares-twitter"> <a class="twitter-share-button" href="https://twitter.com/share" data-url="http://cyberteknoplus.canalblog.com/archives/2007/11/18/5068988.html" data-text="Exercices insertions d'images" data-lang="en" ></a> </div> <div class="ob-Shares-pinterest"> <a href="https://pinterest.com/pin/create/button/" data-pin-count="beside" data-pin-color="red" data-pin-config="beside" data-pin-description="Exercices insertions d'images" data-pin-media="https://storage.canalblog.com/15/23/260047/13531740_o.jpg" data-pin-url="http://cyberteknoplus.canalblog.com/archives/2007/11/18/5068988.html" target="_BLANK" > <img src="https://assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_20.png" /> </a> </div> <div class="ob-Shares-mail"> <a href="mailto:?subject=Exercices%20insertions%20d%27images&body=Voici%20un%20article%20int%C3%A9ressant%20que%20j%27ai%20trouv%C3%A9%20sur%20%3A%20http%3A%2F%2Fcyberteknoplus.canalblog.com%2Farchives%2F2007%2F11%2F18%2F5068988.html"> <img src="https://assets.canalblog.com/c/blog/v2024.08.30/images/shareicon_email.png"> </a> </div> <div class="ob-Shares-print ob-Shares-print_1508145"> <img src="https://assets.canalblog.com/c/blog/v2024.08.30/images/printer.png"> </div> </div> <script> var printElement = document.querySelector(".ob-Shares-print_1508145") printElement.addEventListener("click", function() { ob.printPost("Exercices insertions d'images", "\n\n\n <div class=\"ob-sections\">\n \n \n \n <div\n class=\"ob-section ob-section-html \"\n >\n\n<p><a href=\"https:\/\/storage.canalblog.com\/15\/23\/260047\/13531740.jpg\" target=\"_blank\"><img width=\"450\" height=\"338\" border=\"0\" alt=\"baleine\" src=\"https:\/\/storage.canalblog.com\/15\/23\/260047\/13531740_p.jpg\" \/><\/a><\/p>\r\n\r\n<br \/><p><img width=\"150\" height=\"113\" border=\"0\" src=\"https:\/\/storage.canalblog.com\/82\/59\/260047\/13531816_p.jpg\" alt=\"baleine\" \/><\/p>\r\n\r\n<p style=\"text-align: center;\"><strong>Pour enregistrer une image<\/strong><\/p>\r\n\r\n\r\n\r\n<p> 1) <font color=\"#006600\">S'il vous plait : <strong>lisez ce qui est affich\u00e9 sur votre \u00e9cran<\/strong> ;) <\/font><br \/><br \/><font color=\"#006600\">- <u>Pour faire rapide<\/u> : votre regard doit balayer l'\u00e9cran de la gauche vers la droite <br \/>en commen\u00e7ant par le haut. <br \/>- <u>Lisez les boites de dialogues<\/u> qui s'affichent lorsque cela se pr\u00e9sente.<br \/>Ne r\u00e9pondez pas "Oui" ou "Non" en cliquant sur les boutons de commande <br \/>qui se pr\u00e9sentent sans m\u00eame savoir \u00e0 quoi vous r\u00e9pondez.<br \/><br \/>Cela n'a l'air de rien mais prenez le temps de lire ce qui est affich\u00e9.<br \/>Si vous voulez vraiment gagner du temps ne faites pas cette "\u00e9conomie", <br \/>cela pourrait dans un futur plus ou moins proche vous occasionner plus <br \/>que la perte de quelques minutes... <br \/><\/font><\/p>\r\n\r\n<p>2) <font color=\"#006600\">Clic gauche sur l'image, <\/font><\/p>\r\n\r\n<p>3) <font color=\"#006600\">clic droit sur l'image <\/font><font size=\"1\" color=\"#006600\"><strong>(pr\u00e9cis\u00e9ment sur l'image....pas \u00e0 c\u00f4t\u00e9 !!!)<\/strong><\/font><\/p>\r\n\r\n<p>4) <font color=\"#006600\">Ensuite cliquez sur "Enregistrer l'image sous...".<\/font><\/p>\r\n\r\n<p><font color=\"#006600\">Pour la suite ...de la suite....lisez le blog, quelques sujets de messages <br \/>abordent l'enregistrement des fichiers <\/font><font size=\"1\" color=\"#006600\"><strong>(une image est un fichier)<\/strong><\/font><font color=\"#006600\">.<\/font><\/p><hr width=\"100%\" size=\"2\" \/>\r\n\r\n<p><\/p>\r\n\r\n<p><\/p> <\/div>\n\n\n \n\n <\/div>\n ", "canalblog") }) </script> <script> (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.type = 'text/javascript'; js.async = true; js.defer = true; js.id = id; js.src = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'facebook-jssdk')); </script> <script> (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.type = 'text/javascript'; js.async = true; js.defer = true; js.id = id; js.src = 'https://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-jssdk')); </script> <script> (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.type = 'text/javascript'; js.async = true; js.defer = true; js.id = id; js.src = 'https://assets.pinterest.com/js/pinit.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'pinterest-jssdk')); </script> <div class="rating-wrapper"> <div class="rating-wording">Vous aimez ?</div> <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-star" viewBox="0 0 26 28"> <path d="M26 10.109c0 0.281-0.203 0.547-0.406 0.75l-5.672 5.531 1.344 7.812c0.016 0.109 0.016 0.203 0.016 0.313 0 0.406-0.187 0.781-0.641 0.781-0.219 0-0.438-0.078-0.625-0.187l-7.016-3.687-7.016 3.687c-0.203 0.109-0.406 0.187-0.625 0.187-0.453 0-0.656-0.375-0.656-0.781 0-0.109 0.016-0.203 0.031-0.313l1.344-7.812-5.688-5.531c-0.187-0.203-0.391-0.469-0.391-0.75 0-0.469 0.484-0.656 0.875-0.719l7.844-1.141 3.516-7.109c0.141-0.297 0.406-0.641 0.766-0.641s0.625 0.344 0.766 0.641l3.516 7.109 7.844 1.141c0.375 0.063 0.875 0.25 0.875 0.719z"></path> </symbol> <linearGradient id="grad"> <stop offset="50%" stop-color="#ffc41f"/> <stop offset="50%" stop-color="#9f9f9f"/> </linearGradient> </defs> </svg> <form class="stars"> <input class="stars-input" type="radio" name="rating" value="5" id="rating-5-1508145" > <label class="stars-view stars-view-5-1508145 " for="rating-5-1508145" onclick="handleRate(1508145, 5, 0, 'stars-view-5-1508145', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> <input class="stars-input" type="radio" name="rating" value="4" id="rating-4-1508145" > <label class="stars-view stars-view-4-1508145 " for="rating-4-1508145" onclick="handleRate(1508145, 4, 0, 'stars-view-4-1508145', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> <input class="stars-input" type="radio" name="rating" value="3" id="rating-3-1508145" > <label class="stars-view stars-view-3-1508145 " for="rating-3-1508145" onclick="handleRate(1508145, 3, 0, 'stars-view-3-1508145', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> <input class="stars-input" type="radio" name="rating" value="2" id="rating-2-1508145" > <label class="stars-view stars-view-2-1508145 " for="rating-2-1508145" onclick="handleRate(1508145, 2, 0, 'stars-view-2-1508145', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> <input class="stars-input" type="radio" name="rating" value="1" id="rating-1-1508145" > <label class="stars-view stars-view-1-1508145 " for="rating-1-1508145" onclick="handleRate(1508145, 1, 0, 'stars-view-1-1508145', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> </form> <div class="rating-raters-1508145"> 0 vote </div> </div> <script defer async> function setFullStar(halfStarElement) { halfStarElement.classList.add('star-chosen') } function setRaters(ratersElement, raters) { ratersElement.textContent = raters > 1 ? `${raters} votes` : `${raters} vote` } function createToaster() { const toaster = document.createElement('div') toaster.classList.add('rating-toaster') document.body.appendChild(toaster) return toaster } function showToast(message, status) { const toaster = createToaster() toaster.textContent = message toaster.classList.add('show-rating-toaster') if (status === "success") { toaster.style.backgroundColor = "#E5F4EF" toaster.style.color = "#1D8C65" } else { toaster.style.backgroundColor = "#FFB5B5" toaster.style.color = "#6F0000" } setTimeout(() => { toaster.classList.remove('show-rating-toaster') }, 3000) } async function rate(postID, value, halfStarClass, node) { const res = await fetch(`/api/section-container/rate/${postID}/${value}`, { method: "POST", headers: { "Content-Type": "application/json", }, credentials: 'include', }) if (res.ok) { const data = await res.json() const ratersNumber = document.querySelector(`.rating-raters-${postID}`) setRaters(ratersNumber, data.raters) showToast("Votre vote est pris en compte","success") if (node.classList.contains("half-star")) { const halfStarElement = document.querySelector(`.${halfStarClass}`) setFullStar(halfStarElement) } } return res } function handleUserLogin() { return window.open( `${window.location.origin}/comments/fr/fetch/user`, "loginob", "width=400,height=450,location=0,menubar=0,resizable=0,scrollbars=0,status=0,toolbar=0,titlebar=0" ) } async function handleRate(postID, value, halfStar, halfStarClass, node) { const isPreview = /\/preview\/|\.preview\./.test(window.location.href) if (isPreview) { showToast("Vous ne pouvez pas votez sur une preview de votre blog.","error") return } try { const rateResponse = await rate(postID, value, halfStarClass, node) if (rateResponse.status === 401) { const loginWindow = handleUserLogin() const checkWindowClosed = setInterval(() => { if (loginWindow && loginWindow.closed) { clearInterval(checkWindowClosed) const res = rate(postID, value, halfStarClass) if (res.status !== 200) { showToast("Une erreur est survenue lors du vote","error") } } }, 1000) } } catch (e) { showToast("Une erreur est survenue lors du vote","error") } } </script> </div> </div> <div class="ads_container-atf"> </div> <div class="article article_1508098"> <div class="date-header">12 novembre 2007</div> <a class="article_link" href="http://cyberteknoplus.canalblog.com/archives/2007/11/12/6857025.html"> <h2 class="article_title title">Exercices à présenter </h2> <div class="article_content"> <div class="article_snippet"> Bonjour à chacun-e :) - Les personnes inscrites aux séances du lundi doivent présenter le résultat de leur exercice personnel le 26 novembre. - Les personnes inscrites aux séances du jeudi doivent présenter le résultat de leur exercice personnel le 22... </div> </div> </a> <div class="article_footer"> <div class="article_footer_info"> Posté par MINIX à 14:15 - <a href="http://cyberteknoplus.canalblog.com/archives/2007/11/12/6857025.html#ob-comments"><span>Commentaires [<span id="comment-count-1508098">…</span><script> ob.commentCount(document.querySelector("#comment-count-1508098"), { resource: "http://cyberteknoplus.canalblog.com/api/comment-count/1508098", format: (count) => { const string = count === 0 ? "0" : count === 1 ? "%c" : "%c" return string.replace("%c", count) } }) </script>]</span></a> - Permalien [<a href="http://cyberteknoplus.canalblog.com/archives/2007/11/12/6857025.html">#</a>] </div> <h3 class="ob-Shares-title">Partager cet article</h3> <div class="ob-Shares ob-Shares--right ob-Shares--horizontal "> <div class="ob-Shares-facebookShare"> <div class="fb-share-button" data-href="http://cyberteknoplus.canalblog.com/archives/2007/11/12/6857025.html" data-layout="button_count"></div> </div> <div class="ob-Shares-twitter"> <a class="twitter-share-button" href="https://twitter.com/share" data-url="http://cyberteknoplus.canalblog.com/archives/2007/11/12/6857025.html" data-text="Exercices à présenter " data-lang="en" ></a> </div> <div class="ob-Shares-mail"> <a href="mailto:?subject=Exercices%20%C3%A0%20pr%C3%A9senter%20&body=Voici%20un%20article%20int%C3%A9ressant%20que%20j%27ai%20trouv%C3%A9%20sur%20%3A%20http%3A%2F%2Fcyberteknoplus.canalblog.com%2Farchives%2F2007%2F11%2F12%2F6857025.html"> <img src="https://assets.canalblog.com/c/blog/v2024.08.30/images/shareicon_email.png"> </a> </div> <div class="ob-Shares-print ob-Shares-print_1508098"> <img src="https://assets.canalblog.com/c/blog/v2024.08.30/images/printer.png"> </div> </div> <script> var printElement = document.querySelector(".ob-Shares-print_1508098") printElement.addEventListener("click", function() { ob.printPost("Exercices \u00e0 pr\u00e9senter ", "\n\n\n <div class=\"ob-sections\">\n \n \n \n <div\n class=\"ob-section ob-section-html \"\n >\n\n<p style=\"text-align: center;\"><font color=\"#000066\">Bonjour \u00e0 chacun-e :)<br \/><\/font><\/p>\r\n\r\n<p><font color=\"#006600\">- Les personnes inscrites aux s\u00e9ances du <strong>lundi <\/strong>doivent pr\u00e9senter le r\u00e9sultat <br \/>de leur exercice personnel le<strong> 26 novembre<\/strong>.<\/font><\/p>\r\n\r\n<p><font color=\"#660066\">- Les personnes inscrites aux s\u00e9ances du <strong>jeudi <\/strong>doivent pr\u00e9senter le r\u00e9sultat <br \/>\r\nde leur exercice personnel le <strong>22 novembre<\/strong>.<\/font><\/p>\r\n\r\n<p><em><strong>\u00c9nonc\u00e9 de l'exercice \u00e0 terminer<\/strong><\/em> :<\/p>\r\n\r\n<p><font color=\"#000066\">Il s'agit dans un premier temps d'achever l'exercice commenc\u00e9 lors de la <br \/>s\u00e9ance pr\u00e9c\u00e9dente si vous n'en avez pas eu l'occasion durant la s\u00e9ance.<br \/><\/font><\/p>\r\n\r\n<ul><li><font color=\"#000066\">Vous devez faire une page en html.<\/font><\/li>\r\n\r\n<li><font color=\"#000066\">Celle-ci doit comporter une vingtaine de lignes dans lesquelles vous <br \/>\r\naborderez la pr\u00e9sentation de votre pratique professionnelle, votre lieu <br \/>de stage ou une \u00e9v\u00e8nement particulier.<\/font><\/li>\r\n\r\n<li><font color=\"#000066\">Cette page devra avoir un fond vert, une police bleue<br \/><\/font><font size=\"1\" color=\"#000066\">(un bleu assez fonc\u00e9 que pour \u00eatre lisible sur le fond)<\/font><font color=\"#000066\">.<\/font><\/li>\r\n\r\n<li><font color=\"#000066\">La police des trois premi\u00e8res lignes de cette page devra \u00eatre en <br \/>gras et italique.<\/font><\/li>\r\n\r\n<li><font color=\"#000066\">Les codes couleurs devront \u00eatres not\u00e9s en hexad\u00e9cimal.<br \/>Si vous ne les connaissez pas, dans un moteur de recherche notez ceci :<br \/><em><strong>liste<\/strong><\/em><\/font><em><strong><font color=\"#000066\"> couleurs<\/font><\/strong><\/em><font color=\"#000066\"><em><strong>+codes hexad\u00e9cimaux<\/strong><\/em><br \/><\/font><\/li><\/ul>\r\n\r\n<p><font color=\"#006600\">Cela \u00e9tant fait, cette premi\u00e8re page pourra \u00eatre utilis\u00e9e dans le cadre <br \/>\r\nde l'exercice \u00e0 pr\u00e9senter le 22 ou le 26 novembre selon le groupe <br \/>\r\ndans lequel vous \u00eates.<\/font><\/p>\r\n<p><em><strong>\u00c9nonc\u00e9 de l'exercice \u00e0 pr\u00e9senter<\/strong><\/em> :<\/p>\r\n\r\n<p><font color=\"#000066\">Pour autant que la premi\u00e8re page mentionn\u00e9e ci-dessus soit achev\u00e9e, <br \/>il faudra que vous fassiez une seconde page html.<br \/><\/font><\/p>\r\n\r\n<ul><li><font color=\"#000066\">La premi\u00e8re page devra contenir un lien qui enverra vers la seconde page.<\/font><\/li>\r\n\r\n<li><font color=\"#000066\">La seconde page devra contenir une image.<\/font><\/li>\r\n\r\n<li><font color=\"#000066\">Comme pour la premi\u00e8re page les couleurs seront not\u00e9es en hexad\u00e9cimal.<br \/><\/font><\/li>\r\n\r\n<li><font color=\"#000066\">Les <em><strong>accents et caract\u00e8res sp\u00e9ciaux<\/strong><\/em> des deux pages devront <br \/>\u00eatre <em><strong>convertis en HTML<\/strong><\/em>.<br \/><a href=\"http:\/\/cyberteknoplus.canalblog.com\/archives\/2007\/11\/11\/6857324.html\">http:\/\/cyberteknoplus.canalblog.com\/archives\/2007\/11\/11\/6857324.html<\/a><br \/><\/font><\/li>\r\n\r\n<li><font color=\"#000066\">Vos pages devront avoir \u00e9t\u00e9 test\u00e9es sur deux navigateurs diff\u00e9rents : <br \/>IE et Firefox ou IE et Op\u00e9ra ou encore IE et K-Meleon.<br \/><\/font><\/li><\/ul>\r\n\r\n<p><font color=\"#660066\"><strong><\/strong><\/font><\/p><hr width=\"100%\" size=\"2\" \/>\r\n\r\n <\/div>\n\n\n \n\n <\/div>\n ", "canalblog") }) </script> <script> (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.type = 'text/javascript'; js.async = true; js.defer = true; js.id = id; js.src = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'facebook-jssdk')); </script> <script> (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.type = 'text/javascript'; js.async = true; js.defer = true; js.id = id; js.src = 'https://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-jssdk')); </script> <div class="rating-wrapper"> <div class="rating-wording">Vous aimez ?</div> <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-star" viewBox="0 0 26 28"> <path d="M26 10.109c0 0.281-0.203 0.547-0.406 0.75l-5.672 5.531 1.344 7.812c0.016 0.109 0.016 0.203 0.016 0.313 0 0.406-0.187 0.781-0.641 0.781-0.219 0-0.438-0.078-0.625-0.187l-7.016-3.687-7.016 3.687c-0.203 0.109-0.406 0.187-0.625 0.187-0.453 0-0.656-0.375-0.656-0.781 0-0.109 0.016-0.203 0.031-0.313l1.344-7.812-5.688-5.531c-0.187-0.203-0.391-0.469-0.391-0.75 0-0.469 0.484-0.656 0.875-0.719l7.844-1.141 3.516-7.109c0.141-0.297 0.406-0.641 0.766-0.641s0.625 0.344 0.766 0.641l3.516 7.109 7.844 1.141c0.375 0.063 0.875 0.25 0.875 0.719z"></path> </symbol> <linearGradient id="grad"> <stop offset="50%" stop-color="#ffc41f"/> <stop offset="50%" stop-color="#9f9f9f"/> </linearGradient> </defs> </svg> <form class="stars"> <input class="stars-input" type="radio" name="rating" value="5" id="rating-5-1508098" > <label class="stars-view stars-view-5-1508098 " for="rating-5-1508098" onclick="handleRate(1508098, 5, 0, 'stars-view-5-1508098', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> <input class="stars-input" type="radio" name="rating" value="4" id="rating-4-1508098" > <label class="stars-view stars-view-4-1508098 " for="rating-4-1508098" onclick="handleRate(1508098, 4, 0, 'stars-view-4-1508098', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> <input class="stars-input" type="radio" name="rating" value="3" id="rating-3-1508098" > <label class="stars-view stars-view-3-1508098 " for="rating-3-1508098" onclick="handleRate(1508098, 3, 0, 'stars-view-3-1508098', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> <input class="stars-input" type="radio" name="rating" value="2" id="rating-2-1508098" > <label class="stars-view stars-view-2-1508098 " for="rating-2-1508098" onclick="handleRate(1508098, 2, 0, 'stars-view-2-1508098', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> <input class="stars-input" type="radio" name="rating" value="1" id="rating-1-1508098" > <label class="stars-view stars-view-1-1508098 " for="rating-1-1508098" onclick="handleRate(1508098, 1, 0, 'stars-view-1-1508098', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> </form> <div class="rating-raters-1508098"> 0 vote </div> </div> <script defer async> function setFullStar(halfStarElement) { halfStarElement.classList.add('star-chosen') } function setRaters(ratersElement, raters) { ratersElement.textContent = raters > 1 ? `${raters} votes` : `${raters} vote` } function createToaster() { const toaster = document.createElement('div') toaster.classList.add('rating-toaster') document.body.appendChild(toaster) return toaster } function showToast(message, status) { const toaster = createToaster() toaster.textContent = message toaster.classList.add('show-rating-toaster') if (status === "success") { toaster.style.backgroundColor = "#E5F4EF" toaster.style.color = "#1D8C65" } else { toaster.style.backgroundColor = "#FFB5B5" toaster.style.color = "#6F0000" } setTimeout(() => { toaster.classList.remove('show-rating-toaster') }, 3000) } async function rate(postID, value, halfStarClass, node) { const res = await fetch(`/api/section-container/rate/${postID}/${value}`, { method: "POST", headers: { "Content-Type": "application/json", }, credentials: 'include', }) if (res.ok) { const data = await res.json() const ratersNumber = document.querySelector(`.rating-raters-${postID}`) setRaters(ratersNumber, data.raters) showToast("Votre vote est pris en compte","success") if (node.classList.contains("half-star")) { const halfStarElement = document.querySelector(`.${halfStarClass}`) setFullStar(halfStarElement) } } return res } function handleUserLogin() { return window.open( `${window.location.origin}/comments/fr/fetch/user`, "loginob", "width=400,height=450,location=0,menubar=0,resizable=0,scrollbars=0,status=0,toolbar=0,titlebar=0" ) } async function handleRate(postID, value, halfStar, halfStarClass, node) { const isPreview = /\/preview\/|\.preview\./.test(window.location.href) if (isPreview) { showToast("Vous ne pouvez pas votez sur une preview de votre blog.","error") return } try { const rateResponse = await rate(postID, value, halfStarClass, node) if (rateResponse.status === 401) { const loginWindow = handleUserLogin() const checkWindowClosed = setInterval(() => { if (loginWindow && loginWindow.closed) { clearInterval(checkWindowClosed) const res = rate(postID, value, halfStarClass) if (res.status !== 200) { showToast("Une erreur est survenue lors du vote","error") } } }, 1000) } } catch (e) { showToast("Une erreur est survenue lors du vote","error") } } </script> </div> </div> <div class="ads_container-atf"> </div> <div class="article article_1508103"> <div class="date-header">12 novembre 2007</div> <a class="article_link" href="http://cyberteknoplus.canalblog.com/archives/2007/11/12/6862246.html"> <h2 class="article_title title">Balise - a href - Page 1</h2> <div class="article_content"> <div class="article_snippet"> Modèle pour créer des liens "simples" Pour créer un lien d'une page web vers une autre qui serait située au même endroit (dans le même dossier) sur le disque dur de votre ordinateur. - Créez une page web dont le nom ne comportera : ni accents, ni espaces,... </div> </div> </a> <div class="article_footer"> <div class="article_footer_info"> Posté par MINIX à 14:10 - <a href="http://cyberteknoplus.canalblog.com/archives/2007/11/12/6862246.html#ob-comments"><span>Commentaires [<span id="comment-count-1508103">…</span><script> ob.commentCount(document.querySelector("#comment-count-1508103"), { resource: "http://cyberteknoplus.canalblog.com/api/comment-count/1508103", format: (count) => { const string = count === 0 ? "0" : count === 1 ? "%c" : "%c" return string.replace("%c", count) } }) </script>]</span></a> - Permalien [<a href="http://cyberteknoplus.canalblog.com/archives/2007/11/12/6862246.html">#</a>] </div> <h3 class="ob-Shares-title">Partager cet article</h3> <div class="ob-Shares ob-Shares--right ob-Shares--horizontal "> <div class="ob-Shares-facebookShare"> <div class="fb-share-button" data-href="http://cyberteknoplus.canalblog.com/archives/2007/11/12/6862246.html" data-layout="button_count"></div> </div> <div class="ob-Shares-twitter"> <a class="twitter-share-button" href="https://twitter.com/share" data-url="http://cyberteknoplus.canalblog.com/archives/2007/11/12/6862246.html" data-text="Balise - a href - Page 1" data-lang="en" ></a> </div> <div class="ob-Shares-mail"> <a href="mailto:?subject=Balise%20-%20a%20href%20-%20Page%201&body=Voici%20un%20article%20int%C3%A9ressant%20que%20j%27ai%20trouv%C3%A9%20sur%20%3A%20http%3A%2F%2Fcyberteknoplus.canalblog.com%2Farchives%2F2007%2F11%2F12%2F6862246.html"> <img src="https://assets.canalblog.com/c/blog/v2024.08.30/images/shareicon_email.png"> </a> </div> <div class="ob-Shares-print ob-Shares-print_1508103"> <img src="https://assets.canalblog.com/c/blog/v2024.08.30/images/printer.png"> </div> </div> <script> var printElement = document.querySelector(".ob-Shares-print_1508103") printElement.addEventListener("click", function() { ob.printPost("Balise - a href - Page 1", "\n\n\n <div class=\"ob-sections\">\n \n \n \n <div\n class=\"ob-section ob-section-html \"\n >\n\n<p style=\"text-align: center;\"><font color=\"#660066\"><strong>Mod\u00e8le pour cr\u00e9er des liens "simples"<\/strong><\/font><\/p>\r\n\r\n<p><font color=\"#3333cc\">Pour cr\u00e9er un lien d'une page web vers une autre qui serait situ\u00e9e <br \/>au m\u00eame endroit <\/font><font size=\"1\" color=\"#3333cc\">(dans le m\u00eame dossier)<\/font><font color=\"#3333cc\"> sur le disque dur de votre ordinateur.<\/font><\/p>\r\n\r\n<p><font color=\"#660066\">- Cr\u00e9ez une page web dont le nom ne comportera : ni accents, <br \/> ni espaces, ni pontuation. <br \/>- N'oubliez pas de notez son extension soit htm, soit html. <br \/>- Retenez bien l'extension pour laquelle vous avez opt\u00e9.<br \/>- La premi\u00e8re page <font size=\"1\" color=\"#000000\">(premiere_page.html) <\/font>contiendra un lien qui enverra <br \/> vers une seconde page <\/font><font color=\"#660066\"><font size=\"1\" color=\"#000000\">(seconde_page.html)<\/font><\/font><font color=\"#660066\"> via un clic sur une zone de <br \/> texte \u00e0 d\u00e9finir dans la premi\u00e8re page.<br \/>- La seconde page <\/font><font color=\"#660066\"><font size=\"1\" color=\"#000000\">(seconde_page.html)<\/font><\/font> <font color=\"#660066\">via le m\u00eame proc\u00e9d\u00e9 permettra <br \/> de revenir \u00e0 la premi\u00e8re page <\/font><font color=\"#660066\"><font size=\"1\" color=\"#000000\">(premiere_page.html)<\/font><\/font><font color=\"#660066\">.<br \/><\/font><\/p><hr width=\"100%\" size=\"2\" \/><p>--> <em><strong>premiere_page.html<\/strong><\/em><\/p>\r\n\r\n<p><font color=\"#3333cc\">Cette premi\u00e8re page doit <\/font><font size=\"1\" color=\"#333399\">(comme toute page web) <font size=\"2\">contenir les <br \/>balises "standards".<\/font><\/font><\/p>\r\n\r\n<p><font color=\"#666600\"><font size=\"1\"><strong><html><head><title><\/strong><\/font> <\/font><em>Page de liens 1<\/em><font size=\"1\"><strong><font color=\"#666600\"><\/title><\/head><\/font><\/strong><\/font><br \/><font size=\"1\"><\/font><br \/><font size=\"1\"><strong><font color=\"#666600\"><body><\/font><br \/><font color=\"#ff6600\"><a href="<\/font><\/strong><\/font>seconde_page.html<strong><font size=\"1\" color=\"#ff6600\">"><\/font><font size=\"1\" color=\"#ff6600\"> <\/font><\/strong><a href=\"http:\/\/cyberteknoplus.canalblog.com\/archives\/2007\/11\/12\/6862328.html\">Cliquez ici pour atteindre la seconde page<\/a><font color=\"#666600\"><font color=\"#ff6600\"><strong><font size=\"1\"> <\/a><\/font><\/strong><\/font><br \/><font size=\"1\"><strong><\/body><br \/><\/html><\/strong><\/font><\/font><\/p>\r\n\r\n<p><font color=\"#666600\"><font size=\"1\"><strong><\/strong><\/font><\/font><\/p><hr width=\"100%\" size=\"2\" \/> <\/div>\n\n\n \n\n <\/div>\n ", "canalblog") }) </script> <script> (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.type = 'text/javascript'; js.async = true; js.defer = true; js.id = id; js.src = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'facebook-jssdk')); </script> <script> (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.type = 'text/javascript'; js.async = true; js.defer = true; js.id = id; js.src = 'https://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-jssdk')); </script> <div class="rating-wrapper"> <div class="rating-wording">Vous aimez ?</div> <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="icon-star" viewBox="0 0 26 28"> <path d="M26 10.109c0 0.281-0.203 0.547-0.406 0.75l-5.672 5.531 1.344 7.812c0.016 0.109 0.016 0.203 0.016 0.313 0 0.406-0.187 0.781-0.641 0.781-0.219 0-0.438-0.078-0.625-0.187l-7.016-3.687-7.016 3.687c-0.203 0.109-0.406 0.187-0.625 0.187-0.453 0-0.656-0.375-0.656-0.781 0-0.109 0.016-0.203 0.031-0.313l1.344-7.812-5.688-5.531c-0.187-0.203-0.391-0.469-0.391-0.75 0-0.469 0.484-0.656 0.875-0.719l7.844-1.141 3.516-7.109c0.141-0.297 0.406-0.641 0.766-0.641s0.625 0.344 0.766 0.641l3.516 7.109 7.844 1.141c0.375 0.063 0.875 0.25 0.875 0.719z"></path> </symbol> <linearGradient id="grad"> <stop offset="50%" stop-color="#ffc41f"/> <stop offset="50%" stop-color="#9f9f9f"/> </linearGradient> </defs> </svg> <form class="stars"> <input class="stars-input" type="radio" name="rating" value="5" id="rating-5-1508103" > <label class="stars-view stars-view-5-1508103 " for="rating-5-1508103" onclick="handleRate(1508103, 5, 0, 'stars-view-5-1508103', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> <input class="stars-input" type="radio" name="rating" value="4" id="rating-4-1508103" > <label class="stars-view stars-view-4-1508103 " for="rating-4-1508103" onclick="handleRate(1508103, 4, 0, 'stars-view-4-1508103', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> <input class="stars-input" type="radio" name="rating" value="3" id="rating-3-1508103" > <label class="stars-view stars-view-3-1508103 " for="rating-3-1508103" onclick="handleRate(1508103, 3, 0, 'stars-view-3-1508103', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> <input class="stars-input" type="radio" name="rating" value="2" id="rating-2-1508103" > <label class="stars-view stars-view-2-1508103 " for="rating-2-1508103" onclick="handleRate(1508103, 2, 0, 'stars-view-2-1508103', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> <input class="stars-input" type="radio" name="rating" value="1" id="rating-1-1508103" > <label class="stars-view stars-view-1-1508103 " for="rating-1-1508103" onclick="handleRate(1508103, 1, 0, 'stars-view-1-1508103', this)"> <svg class="icon icon-star"> <use xlink:href="#icon-star"></use> </svg> </label> </form> <div class="rating-raters-1508103"> 0 vote </div> </div> <script defer async> function setFullStar(halfStarElement) { halfStarElement.classList.add('star-chosen') } function setRaters(ratersElement, raters) { ratersElement.textContent = raters > 1 ? `${raters} votes` : `${raters} vote` } function createToaster() { const toaster = document.createElement('div') toaster.classList.add('rating-toaster') document.body.appendChild(toaster) return toaster } function showToast(message, status) { const toaster = createToaster() toaster.textContent = message toaster.classList.add('show-rating-toaster') if (status === "success") { toaster.style.backgroundColor = "#E5F4EF" toaster.style.color = "#1D8C65" } else { toaster.style.backgroundColor = "#FFB5B5" toaster.style.color = "#6F0000" } setTimeout(() => { toaster.classList.remove('show-rating-toaster') }, 3000) } async function rate(postID, value, halfStarClass, node) { const res = await fetch(`/api/section-container/rate/${postID}/${value}`, { method: "POST", headers: { "Content-Type": "application/json", }, credentials: 'include', }) if (res.ok) { const data = await res.json() const ratersNumber = document.querySelector(`.rating-raters-${postID}`) setRaters(ratersNumber, data.raters) showToast("Votre vote est pris en compte","success") if (node.classList.contains("half-star")) { const halfStarElement = document.querySelector(`.${halfStarClass}`) setFullStar(halfStarElement) } } return res } function handleUserLogin() { return window.open( `${window.location.origin}/comments/fr/fetch/user`, "loginob", "width=400,height=450,location=0,menubar=0,resizable=0,scrollbars=0,status=0,toolbar=0,titlebar=0" ) } async function handleRate(postID, value, halfStar, halfStarClass, node) { const isPreview = /\/preview\/|\.preview\./.test(window.location.href) if (isPreview) { showToast("Vous ne pouvez pas votez sur une preview de votre blog.","error") return } try { const rateResponse = await rate(postID, value, halfStarClass, node) if (rateResponse.status === 401) { const loginWindow = handleUserLogin() const checkWindowClosed = setInterval(() => { if (loginWindow && loginWindow.closed) { clearInterval(checkWindowClosed) const res = rate(postID, value, halfStarClass) if (res.status !== 200) { showToast("Une erreur est survenue lors du vote","error") } } }, 1000) } } catch (e) { showToast("Une erreur est survenue lors du vote","error") } } </script> </div> </div> <div class="ads_container-atf"> </div> <div class="article article_1508107"> <div class="date-header">12 novembre 2007</div> <a class="article_link" href="http://cyberteknoplus.canalblog.com/archives/2007/11/12/6862328.html"> <h2 class="article_title title">Balise - a href - Page 2</h2> <div class="article_content"> <div class="article_snippet"> --> seconde_page.html <html><head><title> Page de liens 2 Cliquez ici pour revenir à la première page <...

Posté par MINIX à 14:05 - Commentaires […] - Permalien [#]

Partager cet article

Vous aimez ?

0 vote

11 novembre 2007

Codes couleurs : Valeurs Hexa + RGB

Codes couleurs : Valeurs Hexa + RGB

Cliquez sur l'image ci-dessous pour la voir dans un formatoù les codes hexadécimaux seront lisibles.

Posté par MINIX à 19:52 - Commentaires […] - Permalien [#]

Partager cet article

Vous aimez ?

0 vote

Publicité

<< < 1 2 3 4 5 6 7 > >>

Publicité