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.26/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.26/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_1508120">
<div class="date-header">12 décembre 2007</div>
<a class="article_link" href="http://cyberteknoplus.canalblog.com/archives/2007/12/12/7208289.html">
<h2 class="article_title title">À lire avant de me remettre vos travaux </h2>
<div class="article_content">
<div class="article_snippet">
Bonjour à chacun-e, Pour avoir constaté lors de tests de certaines de vos pages Web, plusieurs "détails" IMPORTANTS semblent avoir été oubliés (ou non pris en compte). http://cyberteknoplus.canalblog.com/archives/2007/11/29/7063165.html Merci de lire...
</div>
</div>
</a>
<div class="article_footer">
<div class="article_footer_info">
Posté par MINIX à 11:45 - <a href="http://cyberteknoplus.canalblog.com/archives/2007/12/12/7208289.html#ob-comments"><span>Commentaires [<span id="comment-count-1508120">…</span><script>
ob.commentCount(document.querySelector("#comment-count-1508120"), {
resource: "http://cyberteknoplus.canalblog.com/api/comment-count/1508120",
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/12/12/7208289.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/12/12/7208289.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/12/12/7208289.html"
data-text="À lire avant de me remettre vos travaux "
data-lang="en"
></a>
</div>
<div class="ob-Shares-mail">
<a href="mailto:?subject=%C3%80%20lire%20avant%20de%20me%20remettre%20vos%20travaux%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%2F12%2F12%2F7208289.html">
<img src="https://assets.canalblog.com/c/blog/v2024.08.26/images/shareicon_email.png">
</a>
</div>
<div class="ob-Shares-print ob-Shares-print_1508120">
<img src="https://assets.canalblog.com/c/blog/v2024.08.26/images/printer.png">
</div>
</div>
<script>
var printElement = document.querySelector(".ob-Shares-print_1508120")
printElement.addEventListener("click", function() {
ob.printPost("\u00c0 lire avant de me remettre vos travaux ", "\n\n\n <div class=\"ob-sections\">\n \n \n \n <div\n class=\"ob-section ob-section-html \"\n >\n\n<p><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#006600\">Bonjour \u00e0 chacun-e,<\/font><\/p>\r\n\r\n<p><font face=\"verdana, arial, helvetica, sans-serif\"><font color=\"#006600\">Pour avoir constat\u00e9 lors de tests de certaines de vos pages Web, <br \/>plusieurs "d\u00e9tails" IMPORTANTS semblent avoir \u00e9t\u00e9 oubli\u00e9s <font size=\"1\">(ou non <br \/>pris en compte).<br \/><\/font><\/font><a href=\"http:\/\/cyberteknoplus.canalblog.com\/archives\/2007\/11\/29\/7063165.html\">http:\/\/cyberteknoplus.canalblog.com\/archives\/2007\/11\/29\/7063165.html<\/a><br \/><\/font><\/p>\r\n\r\n<p><font face=\"verdana, arial, helvetica, sans-serif\"><font color=\"#ff3300\"><em><strong>Merci de lire ce qui suit<\/strong><\/em> ;)<\/font><br \/> <\/font><\/p>\r\n\r\n<p><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#006600\">Je n'aborderai plus ce sujet \u00e0 compter de ce jour car cela m'oblige <br \/>\u00e0 tenir un r\u00f4le qui est tout sauf agr\u00e9able.<br \/>Ceci \u00e9tant dit, dans les faits voici ce qui pourrait se produire dans le cas <br \/>o\u00f9 les conseils donn\u00e9s au fil des semaines <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#006600\">(depuis mi-octobre)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#006600\"> ne seraient <br \/>pas appliqu\u00e9s.<\/font><\/p>\r\n\r\n<p><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#006600\">Je suis au regret de vous annoncer que les pages qui ne respecteraient pas <br \/>les conseils donn\u00e9s ne seront pas consid\u00e9r\u00e9es comme finies.<br \/>Finalement ce n'est donc pas moi, mais vous <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#006600\">(individuellement)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#006600\">, qui serez <br \/>responsables de ce qu'il adviendra de vos travaux dans les jours \u00e0 venir.<\/font><\/p>\r\n\r\n<p><font face=\"verdana, arial, helvetica, sans-serif\"><font color=\"#006600\">J'attire \u00e9galement votre attention sur le fait que ce que je vous ai donn\u00e9 <br \/>comme conseils est n\u00e9cessaire \u00e0 tout site : je n'ai pas invent\u00e9 <br \/>ces "r\u00e8gles" pour corser les travaux.<\/font><br \/><\/font> <\/p>\r\n\r\n<p><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#ff3300\">Toute personne qui cr\u00e9e un site se doit de respecter ces r\u00e8gles <br \/>sous peine de voir son contenu <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#ff3300\">(sa page Web)<\/font><font face=\"verdana, arial, helvetica, sans-serif\"><font color=\"#ff3300\"> non mis en ligne : <\/font><br \/><br \/><font color=\"#006600\">1) car ne respectant pas les standards li\u00e9s au nom des fichiers <br \/><\/font><\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#006600\">(une page Web est un fichier)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#006600\">.<br \/><br \/>2) pour des raisons d'appropriation du travail d'autrui sans en <br \/>avoir fait mention <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#006600\">(via l'adresse <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\"><font color=\"#006600\">du site d'o\u00f9 vous avez extrait l'information que <br \/>vous citez ou reproduisez). <\/font><font color=\"#ff3300\"><br \/><font size=\"2\">Lorsque vous mentionnez votre source, veillez \u00e0 indiquer une <\/font><\/font><\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\"><font color=\"#ff3300\"><font size=\"2\">URL, <br \/>une adresse Web : <\/font><em><strong><font size=\"2\">qui fonctionne<\/font><\/strong>.<br \/><\/em><\/font><\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#006600\">Une adresse URL est de type : <em><strong>http:\/\/nom_de_domaine.com<\/strong><\/em> <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#006600\">(ou .be <br \/>ou .net, etc.)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#006600\">.<\/font><font face=\"verdana, arial, helvetica, sans-serif\"><br \/><br \/><font color=\"#006600\">Vous devez absolument <font color=\"#ff3300\"><em><strong>tester les liens<\/strong><\/em><\/font> que vous mettez dans vos pages : <br \/>\u00e0 partir d'autres endroits <\/font><font size=\"1\" color=\"#006600\">(ordinateur et dossier)<\/font><font color=\"#006600\"> que le dossier d'origine <br \/>dans lequel est stock\u00e9 votre page : cela vous permettra de voir si l'URL <br \/>du site est correcte. Il en va de m\u00eame pour vos pages : vous devez <br \/>les tester sur au moins deux navigateurs diff\u00e9rents <br \/><\/font><font size=\"1\" color=\"#006600\">(voir notes dans le fichier annex\u00e9 : "Creer_site_231107")<\/font><font color=\"#006600\">. <br \/>Ce document est la version num\u00e9rique du document papier que vous avez re\u00e7u. <\/font><br \/><\/font><\/p>\r\n\r\n\r\n\r\n<p><font face=\"verdana, arial, helvetica, sans-serif\"><font color=\"#ff3300\"><em><strong>- Pas d'espaces, de ponctuation et d'accents, et ce, tant dans le nom de <br \/>vos pages que dans le nom des dossiers que vous devez cr\u00e9er.<\/strong><\/em><\/font><\/font><font face=\"verdana, arial, helvetica, sans-serif\"><br \/><\/font><\/p>\r\n\r\n<p style=\"text-align: center;\"><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#006600\"><font color=\"#000000\"><strong>Tous les documents depuis le d\u00e9but des sessions<\/strong> <\/font><br \/><\/font><\/p>\r\n\r\n<p><font face=\"verdana, arial, helvetica, sans-serif\"><a href=\"http:\/\/cyberteknoplus.canalblog.com\/archives\/sessions_m_l_e__\/p0-0.html\">http:\/\/cyberteknoplus.canalblog.com\/archives\/sessions_m_l_e__\/p0-0.html<\/a><br \/><a href=\"http:\/\/cyberteknoplus.canalblog.com\/archives\/sessions_m_l_e__\/p10-0.html\">http:\/\/cyberteknoplus.canalblog.com\/archives\/sessions_m_l_e__\/p10-0.html<\/a><\/font><\/p>\r\n\r\n\r\n\r\n<ul><li><font face=\"verdana, arial, helvetica, sans-serif\"><a href=\"https:\/\/storage.canalblog.com\/74\/29\/260047\/20000483.pdf\">creer_site_231107<\/a><\/font><\/li>\r\n\r\n<li><font face=\"verdana, arial, helvetica, sans-serif\"><a href=\"https:\/\/storage.canalblog.com\/77\/49\/260047\/20000498.pdf\">Bases_html_031107<\/a><br \/><\/font><\/li><\/ul>\r\n\r\n<p style=\"text-align: center;\"><font face=\"verdana, arial, helvetica, sans-serif\"><strong><\/strong><\/font><\/p><hr width=\"100%\" size=\"2\" \/><p style=\"text-align: center;\"><font face=\"verdana, arial, helvetica, sans-serif\"><font color=\"#000000\"><strong>MEMENTO<\/strong><\/font> <br \/><\/font><\/p>\r\n\r\n<p><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">1 \u2013 Un dossier est un contenant, un fichier est un document pouvant \u00eatre <br \/>contenu dans un dossier.<br \/><br \/>En plus clair <br \/>Un dossier <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(le contenant)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"> peut \u00eatre compar\u00e9 \u00e0 une farde ou l\u2019on classerait <br \/>des feuilles <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(le contenu)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">. Les fichiers seraient alors <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(dans le cadre de cette analogie)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"> <br \/>les feuilles contenues dans le dossier.<br \/><br \/>2 - Le "hardware" est le mat\u00e9riel informatique <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(tout ce que l'on peut toucher : <br \/>imprimante, souris, \u00e9cran, clavier, scanner, modem, tour de la machine, webcam, <br \/>etc.)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"> tandis que le "software" sont des programmes <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"><br \/>(les O.S. : Linux, MacOs, MS Windows 95, 98, ..., Xp, Vista)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">, les suites bureautiques <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"><br \/>(OpenOffice, Microsoft Office, etc.)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">.<br \/><br \/>L\u2019O.S. <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(Operating System)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"> ou en fran\u00e7ais S.E. <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(syst\u00e8me d'exploitation)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"> ne fait pas partie <br \/>du hardware mais bien du software.<br \/><br \/>Quand on vous demande : \u00ab Quel est votre O.S. ? \u00bb ou encore <br \/>\u00ab Quel est votre syst\u00e8me d\u2019exploitation \u00bb ? Ce que l\u2019on vous pose <br \/>comme question est : \u00ab Votre machine, une fois allum\u00e9e affiche t-elle Windows <br \/><\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(et le nom de sa version : 98 Se, 2000, Xp, Vista,..)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"> ou autre chose <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(Linux, MacOs,...)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"> ?<br \/> <br \/>3 - Un site Web est un ensemble de pages Web reli\u00e9es entre elles <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(par des liens)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">.<br \/>Ces pages contiennent des informations qui sont destin\u00e9es \u00e0 tous les <br \/>surfeurs int\u00e9ress\u00e9s par le sujet abord\u00e9 <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(comme pour un livre : il s'agit d'un usage public)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">.<br \/><br \/>Les sites Web, leurs pages, sont \u00e0 la base \u00ab \u00e9crits \u00bb en pseudo-code <br \/>HTML <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(HyperText Markup Language)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"> tandis qu'un blog est un site pr\u00e9fabriqu\u00e9 <br \/>et personnalis\u00e9 par l\u2019auteur-e des messages. <br \/>Le texte entr\u00e9 dans chaque nouveau message d\u2019un blog voit son code html <br \/>automatiquement g\u00e9n\u00e9r\u00e9 en arri\u00e8re-plan. Il ne faut, \u00e0 priori, aucune <br \/>connaissance en HTML pour \u00e9crire sur un blog, ce qui n'est pas le cas d'un <br \/>site \u00ab traditionnel \u00bb : cela rend la mise \u00e0 jour d\u2019un site moins conviviale <font size=\"1\"><br \/>(mais plus professionnelle) <\/font>que celle d'un blog.<br \/><br \/>4 - Une bo\u00eete \u00ab mail \u00bb <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(pour e-mail venant des mots anglais Electronic Mail) <\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"><br \/>est une bo\u00eete de courrier \u00e9lectronique. Il s\u2019agit d\u2019une bo\u00eete de courrier <br \/>num\u00e9rique dont une seule personne est la propri\u00e9taire <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(il s'agit ici d\u2019un service <br \/>destin\u00e9 \u00e0 un usage priv\u00e9)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">.<br \/>Le mail <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(le courrier \u00e9lectronique)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"> permet de s'adresser \u00e0 des personnes cibl\u00e9es <br \/>que l'on conna\u00eet \u00e0 priori. Cette bo\u00eete n'est pas destin\u00e9e \u00e0 \u00eatre un point de passage <br \/>de tous les surfeurs <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(fort heureusement)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">.<br \/> <br \/>5 \u2013 Un logiciel est le nom d'un programme avant son installation ou si vous pr\u00e9f\u00e9rez... <br \/>un programme est le nom d\u2019un logiciel apr\u00e8s son installation.<br \/>Il existe des logiciels libres et des logiciels commerciaux <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(qui peuvent \u00eatre <br \/>gratuits ou en version d\u2019essai)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">.<br \/>Concr\u00e8tement : sur un cd contenant MS Excel on dira "j'ai le logiciel" Excel, apr\u00e8s <br \/>son installation on dira "J'ai le programme Excel, sous-entendu qu'il est d\u00e9j\u00e0 <br \/>install\u00e9 sur la machine et qu'on peut lancer le programme en question en quelques clics.<br \/><br \/>6 - Les diff\u00e9rents services disponibles <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(les plus connus)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"> sur le r\u00e9seau Internet :<br \/>* la messagerie \u00e9lectronique <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(le mail)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">, <br \/>* les sites Web <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(et les blogs)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">, <br \/>* les forums, <br \/>* le t\u00e9l\u00e9chargement de fichiers <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(downloading)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"> ou l'envoi de fichiers <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(uploading)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"> <br \/>\u00e0 distance via un logiciel FTP. <br \/><br \/>Donc le Web, la \u00ab biblioth\u00e8que virtuelle \u00bb stock\u00e9e sur le r\u00e9seau internet n\u2019est <br \/>bien que l\u2019un des services <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(parmi d\u2019autres)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"> disponibles sur la toile <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(autre nom du r\u00e9seau internet)<\/font><font face=\"verdana, arial, helvetica, sans-serif\"><font color=\"#660066\">.<\/font><br \/><\/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-1508120" >
<label class="stars-view stars-view-5-1508120 " for="rating-5-1508120" onclick="handleRate(1508120, 5, 0, 'stars-view-5-1508120', 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-1508120" >
<label class="stars-view stars-view-4-1508120 " for="rating-4-1508120" onclick="handleRate(1508120, 4, 0, 'stars-view-4-1508120', 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-1508120" >
<label class="stars-view stars-view-3-1508120 " for="rating-3-1508120" onclick="handleRate(1508120, 3, 0, 'stars-view-3-1508120', 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-1508120" >
<label class="stars-view stars-view-2-1508120 " for="rating-2-1508120" onclick="handleRate(1508120, 2, 0, 'stars-view-2-1508120', 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-1508120" >
<label class="stars-view stars-view-1-1508120 " for="rating-1-1508120" onclick="handleRate(1508120, 1, 0, 'stars-view-1-1508120', this)">
<svg class="icon icon-star">
<use xlink:href="#icon-star"></use>
</svg>
</label>
</form>
<div class="rating-raters-1508120">
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_1508181">
<div class="date-header">23 septembre 2008</div>
<a class="article_link" href="http://cyberteknoplus.canalblog.com/archives/2008/09/23/10697196.html">
<h2 class="article_title title">Support pour apprendre à créer un diaporama</h2>
<div class="article_content">
<div class="article_snippet">
Bonjour à toutes :) Ce qui se conçoit bien s'énonce clairement : certainement plus facile à dire qu'à faire...Alors, voici pour bien commencer l'année : vous allez apprendre à créer un diaporama. Il est fort probable que derrière ce mot : "diaporama"...
</div>
</div>
</a>
<div class="article_footer">
<div class="article_footer_info">
Posté par MINIX à 11:07 - <a href="http://cyberteknoplus.canalblog.com/archives/2008/09/23/10697196.html#ob-comments"><span>Commentaires [<span id="comment-count-1508181">…</span><script>
ob.commentCount(document.querySelector("#comment-count-1508181"), {
resource: "http://cyberteknoplus.canalblog.com/api/comment-count/1508181",
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/2008/09/23/10697196.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/2008/09/23/10697196.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/2008/09/23/10697196.html"
data-text="Support pour apprendre à créer un diaporama"
data-lang="en"
></a>
</div>
<div class="ob-Shares-mail">
<a href="mailto:?subject=Support%20pour%20apprendre%20%C3%A0%20cr%C3%A9er%20un%20diaporama&body=Voici%20un%20article%20int%C3%A9ressant%20que%20j%27ai%20trouv%C3%A9%20sur%20%3A%20http%3A%2F%2Fcyberteknoplus.canalblog.com%2Farchives%2F2008%2F09%2F23%2F10697196.html">
<img src="https://assets.canalblog.com/c/blog/v2024.08.26/images/shareicon_email.png">
</a>
</div>
<div class="ob-Shares-print ob-Shares-print_1508181">
<img src="https://assets.canalblog.com/c/blog/v2024.08.26/images/printer.png">
</div>
</div>
<script>
var printElement = document.querySelector(".ob-Shares-print_1508181")
printElement.addEventListener("click", function() {
ob.printPost("Support pour apprendre \u00e0 cr\u00e9er un diaporama", "\n\n\n <div class=\"ob-sections\">\n \n \n \n <div\n class=\"ob-section ob-section-html \"\n >\n\n<p><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">Bonjour \u00e0 toutes :)<br \/><br \/>Ce qui se con\u00e7oit bien s'\u00e9nonce clairement : certainement plus facile \u00e0 dire qu'\u00e0 faire...<br \/>Alors, voici pour bien commencer l'ann\u00e9e : vous allez apprendre \u00e0 cr\u00e9er un diaporama.<\/font><\/p>\r\n<p><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">Il est fort probable que derri\u00e8re ce mot : "diaporama" se cache quelque chose que <br \/>vous avez d\u00e9j\u00e0 re\u00e7u, sans avoir eu besoin de savoir "comment ont-ils fait" pour que \u00e7a <br \/>"bouge tout seul"...c'est "magique".... Peut-\u00eatre m\u00eame qu'en fait...vous ne vous \u00eates <br \/>jamais pos\u00e9 la question ?! Peu importe ;) puisque vous \u00eates pr\u00e9sentes c'est que ce sujet <br \/>vous int\u00e9resse... ce qui tombe plut\u00f4t bien puisque nous allons entamer cette session <br \/>de "Multim\u00e9dia avanc\u00e9" par la m\u00e9thodologie et la cr\u00e9ation d'un diaporama <font size=\"1\">(OpenOffice Impress - <br \/>Microsoft Office PowerPoint)<\/font>.<br \/><\/font><\/p>\r\n<p><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">Et pour celles et ceux qui veulent, le support de cours concernant cette mati\u00e8re et <br \/>annex\u00e9 ci-contre : <font size=\"1\"><a href=\"https:\/\/storage.canalblog.com\/15\/07\/260047\/33382284.pdf\">PowerPoint_081208_ver_28p_2<\/a><\/font><br \/><\/font><\/p>\r\n<p><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#336600\"> <\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">Le sujet que vous devrez pr\u00e9senter : un moment de l'histoire contemporaine de votre <br \/>choix en <em><strong>minumum 12 diapositives<\/strong><\/em>.<br \/>- La mani\u00e8re dont vous allez aborder le sujet est laiss\u00e9 \u00e0 votre appr\u00e9ciation. <br \/><\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"><br \/>Vous pouvez estimer que le support de cours est superflu n\u00e9anmoins c'est bien <br \/>sur base de celui-ci que l'exercice et la qualit\u00e9 du travail \u00e0 remettre sera bas\u00e9.<\/font><\/p>\r\n<p><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">- Ce diaporama devra contenir au minimum 3 photos.<br \/>- Il devra permettre aux personnes de le visualiser via une pression <br \/>sur une touche du clavier et de mani\u00e8re automatique <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(apr\u00e8s un laps de temps d\u00e9fini <br \/>entre chaque diapositive).<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\"> Ce qui laissera \u00e0 tout un chacun la libert\u00e9 de visionner la pr\u00e9sentation <br \/>sur un \u00e9cran de son choix et selon le mode de son choix. <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#660066\">(Voir : Diaporama\/Transition et <br \/>Diaporama\/Param\u00e8tres du diaporama).<\/font><font face=\"verdana, arial, helvetica, sans-serif\"><br \/><br \/><\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#336600\">S'il vous plait, comme pour les pages web <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#336600\">(ou tout document que vous produirez) <\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#336600\">: <br \/>si vous citez des informations issues de sites, de livres <\/font><font size=\"1\" face=\"verdana, arial, helvetica, sans-serif\" color=\"#336600\">(ou d'autres supports)<\/font><font face=\"verdana, arial, helvetica, sans-serif\" color=\"#336600\"> <strong><br \/>--> Mentionnez les auteur-e-s <--<\/strong> et le site ou le livre duquel est extrait <br \/>votre information.<br \/><em><strong>Si vous ne sautez pas de joie \u00e0 l'id\u00e9e que d'autres personnes s'attribuent <br \/>le fruit de vos efforts <strong><font size=\"1\">(mais qui sauterait de joie \u00e0 cette id\u00e9e...)<\/font><\/strong>, pensez que les "autres" <br \/>ne sont pas fort diff\u00e9rent de vous...<\/strong><\/em><\/font><font face=\"verdana, arial, helvetica, sans-serif\"><br \/><\/font><\/p><hr size=\"2\" width=\"100%\" \/> <\/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-1508181" >
<label class="stars-view stars-view-5-1508181 " for="rating-5-1508181" onclick="handleRate(1508181, 5, 0, 'stars-view-5-1508181', 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-1508181" >
<label class="stars-view stars-view-4-1508181 " for="rating-4-1508181" onclick="handleRate(1508181, 4, 0, 'stars-view-4-1508181', 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-1508181" >
<label class="stars-view stars-view-3-1508181 " for="rating-3-1508181" onclick="handleRate(1508181, 3, 0, 'stars-view-3-1508181', 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-1508181" >
<label class="stars-view stars-view-2-1508181 " for="rating-2-1508181" onclick="handleRate(1508181, 2, 0, 'stars-view-2-1508181', 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-1508181" >
<label class="stars-view stars-view-1-1508181 " for="rating-1-1508181" onclick="handleRate(1508181, 1, 0, 'stars-view-1-1508181', this)">
<svg class="icon icon-star">
<use xlink:href="#icon-star"></use>
</svg>
</label>
</form>
<div class="rating-raters-1508181">
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="_a247031"></div>
</div>
</div>
<div class="ob-pagination">
<span
class="ob-page ob-page-current "
>1</span>
<a
href="/top/2"
class="ob-page ob-page-link "
>2</a>
<a
href="/top/3"
class="ob-page ob-page-link "
>3</a>
<a
href="/top/2"
class="ob-page ob-page-link ob-page-next"
>></a>
<a
href="/top/3"
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="_01a190f"></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: [1508241,1508046,1508145,1508118,1508214,1508035,1508256,1508023,1508055,1508126,1508151,1508155,1508168,1508194,1508197,1508218,1508221,1508225,1508245,1508283,1508029,1508066,1508081,1508120,1508181],
})
})
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="_fe41b20"></div><div id="_c887857"></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>
/https%3A%2F%2Fstorage.canalblog.com%2F75%2F71%2F260047%2F37379646.gif)
/https%3A%2F%2Fstorage.canalblog.com%2F07%2F07%2F260047%2F40761495.gif)
/https%3A%2F%2Fstorage.canalblog.com%2F15%2F23%2F260047%2F13531740_o.jpg)
/http%3A%2F%2Fus.i1.yimg.com%2Fus.yimg.com%2Fi%2Fmesg%2Ftsmileys2%2F01.gif)
/https%3A%2F%2Fstorage.canalblog.com%2F85%2F63%2F260047%2F35499190_o.jpg)
/https%3A%2F%2Fstorage.canalblog.com%2F77%2F84%2F260047%2F25773888.gif)
/https%3A%2F%2Fstorage.canalblog.com%2F36%2F19%2F260047%2F45706996_o.jpg)
/https%3A%2F%2Fstorage.canalblog.com%2F85%2F01%2F121265%2F8485035_p.png)
/https%3A%2F%2Fstorage.canalblog.com%2F78%2F55%2F260047%2F40763128.gif)
/https%3A%2F%2Fstorage.canalblog.com%2F73%2F53%2F260047%2F25772460_o.jpg)
/https%3A%2F%2Fstorage.canalblog.com%2F33%2F75%2F260047%2F25926409_o.jpg)
/https%3A%2F%2Fstorage.canalblog.com%2F07%2F25%2F260047%2F25959466.gif)
/https%3A%2F%2Fstorage.canalblog.com%2F91%2F87%2F260047%2F32673344_o.jpg)
/https%3A%2F%2Fstorage.canalblog.com%2F11%2F13%2F260047%2F33012862_p.gif)
/https%3A%2F%2Fstorage.canalblog.com%2F37%2F93%2F260047%2F35576111_o.jpg)
/https%3A%2F%2Fstorage.canalblog.com%2F24%2F45%2F260047%2F36255717_o.jpg)
/https%3A%2F%2Fstorage.canalblog.com%2F67%2F36%2F260047%2F36564694_o.jpg)
/https%3A%2F%2Fstorage.canalblog.com%2F51%2F42%2F260047%2F40800303.gif)
/https%3A%2F%2Fstorage.canalblog.com%2F35%2F20%2F260047%2F25926704_o.jpg)