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.05/build/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.05/build/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><font color=\"#9966ff\"> <\/font><\/strong>Ecrit ce 13\/10\/2007 pour le support de cours HTML par B\u00e9atrice Gengou <strong><font color=\"#9966ff\">--><\/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><font color=\"#9966ff\"> <\/font><\/strong>Ecrit ce 13\/10\/2007 pour le support de cours HTML par B\u00e9atrice Gengou <strong><font color=\"#9966ff\">--><\/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 \/><!--<\/strong> <\/font>Ecrit ce 13\/10\/2007 pour le support de cours HTML par B\u00e9atrice Gengou <strong><font color=\"#9966ff\">--><\/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>Ecrit ce 13\/10\/2007 pour le support de cours HTML par B\u00e9atrice Gengou <strong><font color=\"#9966ff\">--><\/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><\/strong>Ecrit ce 13\/10\/2007 pour le support de cours HTML par B\u00e9atrice Gengou<strong><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>
<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.05/build/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.05/build/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 class="ads-container half_page">
<div class="ads-placeholder">
<span>Publicité</span>
</div>
<div id="_578c6f5"></div>
</div>
</div>
<div class="ob-pagination">
<span
class="ob-page ob-page-current "
>1</span>
<a
href="/main-tag/sessions_m_l_e__/2"
class="ob-page ob-page-link "
>2</a>
<a
href="/main-tag/sessions_m_l_e__/2"
class="ob-page ob-page-link ob-page-next"
>></a>
<a
href="/main-tag/sessions_m_l_e__/2"
class="ob-page ob-page-link ob-page-last"
>>></a>
</div>
</div>
</div>
<div class="right-zone">
<div class="side-zone">
<div class="ob-widgets">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ads-container super_leaderboard">
<div class="ads-placeholder">
<span>Publicité</span>
</div>
<div id="_fd7f5bf"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
function createDropdownTrigger() {
var trigger = document.createElement("span")
trigger.classList.add("trigger")
return trigger
}
function addTriggers() {
var elementsToTriggers = document.querySelectorAll(".menu-main .branch > a, .menu-main .branch > span")
elementsToTriggers.forEach(function (elementToTrigger) {
elementToTrigger.insertAdjacentElement("afterend", createDropdownTrigger())
})
}
addTriggers()
})
</script>
<div class="ob-footer ob-footer-padded" id="legals" >
<ul>
<li class="ob-footer-item"><a href="https://www.canalblog.com/" target="_blank">Créer un blog gratuit sur CanalBlog</a></li>
<li class="ob-footer-item"><a href="/top">Top articles</a></li>
<li class="ob-footer-item"><a href="/contact">Contact</a></li>
<li class="ob-footer-item"><a href="https://www.canalblog.com/abuse/55600"> Signaler un abus </a></li>
<li class="ob-footer-item"><a href="https://www.canalblog.com/cf/tos.cfm" target="_blank">C.G.U.</a></li>
<li class="ob-footer-item"><a href="https://www.canalblog.com/cf/cookies.cfm" target="_blank">Cookies et données personnelles</a></li>
<li class="ob-footer-item"><a href="javascript:Didomi.notice.show()">Préférences cookies</a></li>
</ul>
</div>
<script defer async>
document.addEventListener('DOMContentLoaded', function() {
async function syncRating() {
const isPreview = /\/preview\/|\.preview\./.test(window.location.href)
if (isPreview) {
return
}
const res = await fetch(`/api/section-container/rates`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id: [1508131,1508129,1508120,1508118,1508116,1508101,1508109,1508112,1508081,1508098],
})
})
if (res.ok) {
const data = await res.json()
Object.keys(data).forEach(function(key) {
const postRate = data[key]
const input = document.querySelector(`#rating-${Math.ceil(postRate.rate)}-${key}`)
input.checked = true
// check if it's half-star rate
if (!Number.isInteger(postRate.rate)) {
const label = document.querySelector(`.stars-view-${Math.ceil(postRate.rate)}-${key}`)
label.classList.add("half-star")
}
const ratersEl = document.querySelector(`.rating-raters-${key}`)
ratersEl.textContent = postRate.raters > 1 ? `${postRate.raters} votes` : `${postRate.raters} vote`
})
}
}
syncRating()
})
</script>
<div id="_a7cb772"></div><div id="_fb46420"></div> <script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', "GTM-WG3SK3P");
</script>
</body>
</html>
/http%3A%2F%2Fus.i1.yimg.com%2Fus.yimg.com%2Fi%2Fmesg%2Ftsmileys2%2F01.gif)
