http://www.dil.univ-mrs.fr/~mari/Enseignement/M2CCI/Ressources/assets/HTML-MCCI-1.pdf
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Reuters Financial Software Champions League: Inscription au match de la semaine</title>
</head>
<body>
<body>
</html>
<center>
<table>
<tr><td><!--IMG src="Images/UEFA_Euro_2012_fr.png" width="300" /--></td> <td>
<h1>
Inscription au match de la semaine<br>
</h1></td>
</tr>
<b>Saison:2015 Match:5</b>
</table>
<br/>
</center>
<p>Bonjour. Souhaitez-vous consulter <a href="http://www.globalturaz.com">Global Turaz</a> ?</p>
<p><a href="http://www.leo-stitch.com/dokuwiki#ancre">Vers une ancre</a> </p>
<p>
Photo:<br />
<img src="images/monimage.jpg" alt="Ma super photo" width="300" />
</p>
<h2 id="ancre">Titre</h2>
Les titres et paragraphes <h n> . . </h n> Titre de niveau n, de 1 à 6 <p> . . </p> Paragraphe Les listes <ul> . . </ul> Liste non triée, liste à puces <ol> . . </ol> Liste triée, liste à numéros <P>Maintenant quelques exemples de lignes horizontales</P> <HR> <HR ALIGN=CENTER> <HR SIZE=8> <HR SIZE = 4 WIDTH=80%>
Positionner une image en absolu
CSS
/* where margin-left = {img width}/2, and margin-top= {img height}/2 */
.bigdiv {
width:100%;
height:100%;
position:absolute;
}
.bigdiv img {
position:absolute;
left:50%;
top:50%;
margin-left:-10px;
margin-top:-10px;
}
body {margin:0;padding:0;}
HTML
<div class="bigdiv"><img src="eg.png" /></div>
[[http://fr.html.net/tutorials/css/lesson14.php]]
CSS
// Positions absolues
h1 {
position:absolute;
top: 100px;
left: 200px;
}
// Positions relatives
#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}
HTML
<head>
<title>Exemple | Tutoriel CSS | HTML.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/tutorials/css/lesson14_ex2.css" type="text/css" media="all" />
</head>
<body>
<div id="dog1"><img src="dog1.gif"></div>
<div id="dog2"><img src="dog2.gif"></div>
<div id="dog3"><img src="dog3.gif"></div>
</body>
CSS Sprite http://alistapart.com/article/sprites
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Sprites: Image Slicing's Kiss of Death</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style media="screen">
#iconmenu {position: relative; margin: 10px auto; padding: 3px; width: 206px; height: 52px; background: url(pattern.gif);}
#iconmenu li {width: 50px; height: 50px; position: absolute; top: 2px; background: url(icons.gif) 0 0 no-repeat; display: block; list-style: none;}
#iconmenu a {width: 50px; height: 50px; display: block; border: solid 1px #fff;}
#iconmenu a:hover {border: solid 1px #000;}
#iconmenu #panel1c {left: 2px;}
#iconmenu #panel2c {left: 54px; background-position: -51px 0;}
#iconmenu #panel3c {left: 106px; background-position: -102px 0;}
#iconmenu #panel4c {left: 158px; background-position: -153px 0;}
#iconmenu #panel1c a:hover {background: url(icons.gif) -1px -52px no-repeat;}
#iconmenu #panel2c a:hover {background: url(icons.gif) -52px -52px no-repeat;}
#iconmenu #panel3c a:hover {background: url(icons.gif) -103px -52px no-repeat;}
#iconmenu #panel4c a:hover {background: url(icons.gif) -154px -52px no-repeat;}
</style>
</head>
<body>
<ul id="iconmenu">
<li id="panel1c"><a href="#"></a></li>
<li id="panel2c"><a href="#"></a></li>
<li id="panel3c"><a href="#"></a></li>
<li id="panel4c"><a href="#"></a></li>
</ul>
</body>
</html>
CSS
#anim {
width: 14px; height: 14px;
background-image: url(http://mail.google.com/mail/im/emotisprites/wink2.png);
background-repeat: no-repeat;
}
HTML
<div id="anim"></div>
Javascript
var scrollUp = (function () {
var timerId; // stored timer in case you want to use clearInterval later
return function (height, times, element) {
var i = 0; // a simple counter
timerId = setInterval(function () {
if (i > times) // if the last frame is reached, set counter to zero
i = 0;
element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up
i++;
}, 100); // every 100 milliseconds
};
})();
// start animation:
scrollUp(14, 42, document.getElementById('anim'))
EDIT: You can also set the CSS properties programmatically so you don't have to define any style on your page, and make a constructor function from the above example, that will allow you to show multiple sprite animations simultaneously:
Usage:
var wink = new SpriteAnim({
width: 14,
height: 14,
frames: 42,
sprite: "http://mail.google.com/mail/im/emotisprites/wink2.png",
elementId : "anim1"
});
var monkey = new SpriteAnim({
width: 18,
height: 14,
frames: 90,
sprite: "http://mail.google.com/mail/im/emotisprites/monkey1.png",
elementId : "anim4"
});
Implementation:
function SpriteAnim (options) {
var timerId, i = 0,
element = document.getElementById(options.elementId);
element.style.width = options.width + "px";
element.style.height = options.height + "px";
element.style.backgroundRepeat = "no-repeat";
element.style.backgroundImage = "url(" + options.sprite + ")";
timerId = setInterval(function () {
if (i >= options.frames) {
i = 0;
}
element.style.backgroundPosition = "0px -" + i * options.height + "px";
i++;
}, 100);
this.stopAnimation = function () {
clearInterval(timerId);
};
}
Notice that I added a stopAnimation method, so you can later stop a an specified animation just by calling it, for example:
monkey.stopAnimation();
intext:"toto" filetype="pdf"
site:.edu
intext:"gmail.com" site:linkedin.com/ site:pastebin.com intext"admin password"
shodan os:windows country:FR camera city:paris webcam city:paris webcamxp city:paris