En HTML, vous collez
<a href="adresse principale du blog">ACCUEIL</a>Par exemple :
<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/">ACCUEIL</a>donne
ACCUEIL
<a href="adresse principale du blog">ACCUEIL</a>Par exemple :
<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/">ACCUEIL</a>donne
<a name="AncreArrivée">Ancre d'Arrivée</a>
<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/2010/07/faire-un-lien-vers-un-endroit-precis-de.html#AncreArrivée">Vers l'Ancre d'Arrivée</a>Notez que :
<a name="AncreArrivée">Ancre d'Arrivée</a>2ème étape : dans le lieu de départ
<a href="#AncreArrivée">Aller vers l'ancre d'Arrivée</a>Notez que :
#gototop{position:fixed;bottom:5px;*/ right:2px;z-index:300;width:20px; height:20px;En rouge, la position de l'image sur l'écran :
background:transparent url(http://nsm01.casimages.com/img/2008/02/26//08022607021262651763309.gif) no-repeat center ;font-size: 0px;display:block;_display:none;text-indent:-300px;overflow:hidden;outline:none;}
<div id="gototop"><a id="gototop" name="gototop" title="Go to Top" href="#">top</a></div>Lorsque la page a fini de charger, vous pouvez tester
<SCRIPT language=JavaScript1.2>Pensez à informer vos visiteurs de cette fonction. Et testez !
function dblclick() {
window.scrollTo(0,0)
}
if (document.layers) {
document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=dblclick;
</SCRIPT>
<a name="top"></a>La seconde partie, le lien allez vers le haut se positionne :
<a href="#top">ALLEZ VERS LE HAUT</a>Exemple : ALLEZ VERS LE HAUT
<script language="JavaScript">Et nous obtenons
<!--
function selectionner()
{
document.votre_formulaire.votre_textarea.select();
}
-->
</script>
<form name="votre_formulaire">
<textarea name="votre_textarea">
Votre texte
</textarea>
<input type="button" value="tout sélectionner" onclick="selectionner()">
</form>
<iframe name="Google" SRC="http://www.google.fr/" scrolling="yes" FRAMEBORDER="yes" height="300" width="500"></iframe>
<textarea name=a cols=50 rows=3 style="font-family:Verdana;font-size:8pt;color:white;background-color:#000080;border:1 white">VOTRE TEXTE ICI</textarea>Vous obtenez :
border est le terme générique qui englobe tous les contours (haut-bas-droite-gauche)Si l'on veut être plus précis, on met :
solid représente l'aspect de la bordureOn a d'autres choix :
1 px est l'épaisseur du trait de bordure en pixelsIl suffit d'augmenter le nombre de pixels pour grossir le trait
#D8D7D7 est la couleur du traitIl est maintenant possible, par le CSS d'arrondir ces bordures.
{border:1px solid #d8e2ec;}Pour un petit rappel des règles des encadrements.
{border:1px solid #d8e2ec; -moz-border-radius: 10px; }Vous jouez avec le nombre de px pour avoir l'arrondi voulu.
|
|
|
|
<style type="text/css">Sachant que
a.A { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color: #3c4157; }
a.A:hover {padding: 6px;border: 1px solid #d8e2ec ; background-color: #3c4157; color: #d8e2ec ; }
a.B {padding: 6px;border: 1px solid #d8e2ec ; background-color: #3c4157; color: #d8e2ec ; }
a.B:hover { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color: #3c4157; }
</style>
a.A { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ;border: 1px solid #3c4157 : la bordure
color: #3c4157; }
a.B {padding: 6px;border: 1px solid #d8e2ec ; background-color: #3c4157; color: #d8e2ec ; }
a.A:hover {padding: 6px;border: 1px solid #d8e2ec ; background-color: #3c4157; color: #d8e2ec ; }Modifiez selon le même schéma que pour le lien normal.
a.B:hover { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color: #3c4157; }
<table cellspacing="0" cellpadding="0" align="center" border="0">A personnaliser ainsi
<tbody>
<tr>
<td>
<p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 1">Lien 1</a></p>
</td>
<td>
<p style="line-height: 30px" align="center"><a class="B" href="adresse du lien ">Lien 2</a></p>
</td>
</tbody>
</table>
<p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 1">Liendevient par exemple
1</a></p>
<p style="line-height: 30px" align="center"><a class="A" href="http://www.over-blog.com/com-1000066880/Toute+la+déco.html">Toute la Déco</a></p>Si vous souhaitez que le lien s'ouvre dans une nouvelle fenêtre, vous rajoutez target="_blank", ce qui donne par exemple
<p style="line-height: 30px" align="center"><a class="A" href="http://www.over-blog.com/com-1000066880/Toute+la+déco.html" target="_blank" >Toute la Déco</a></p>Si vous avez besoin d'une cellule supplémentaire, vous rajoutez dans le 1er pavé :
a.C {padding: 6px;border: 1px solid #d8e2ec ; background-color: #3c4157; color: #d8e2ec ; }et dans le second pavé :
a.C:hover { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color: #3c4157; }
<td>après la ligne suivante :
<p style="line-height: 30px" align="center"><a class="C" href="adresse du lien 3">Lien 3</a></p>
</td>
<td>et ainsi de suite.
<p style="line-height: 30px" align="center"><a class="B" href="adresse du lien 2">Lien 4</a></p>
</td>
<style type="text/css">Vous personnalisez ainsi :
a.A { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color: #3c4157; }
a.A:hover {padding: 6px;border: 1px solid #d8e2ec ; background-color: #3c4157; color: #d8e2ec ; }
</style>
a.A { padding: 6px;border: 1px solid #3c4157; background-color: #d8e2ec ; color:#3c4157; }border: 1px solid #3c4157 : la bordure
a.A:hover {padding: 6px;border: 1px solid #d8e2ec ; background-color: #3c4157; color: #d8e2ec ; }Modifiez selon le même schéma que pour le lien normal.
<table cellspacing="0" cellpadding="0" align="center" border="0">Vous y personnalisez ensuite les liens :
<tbody>
<tr>
<td>
<p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 1">Lien 1</a></p>
</td>
<td>
<p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 2">Lien 2</a></p>
<td>
<p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 3">Lien 3</a></p>
</td>
<td>
<p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 4">Lien 4</a></p>
</td>
<td>
<p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 5">Lien 5</a></p>
</td>
</tr>
</tbody>
</table>
<p style="line-height: 30px" align="center"><a class="A" href="adresse du lien 1">Lien 1</a></p>devient par exemple
<p style="line-height: 30px" align="center"><a class="A" href="http://www.over-blog.com/com-1000066880/Toute+la+déco.html">Toute la Déco</a></p>Si vous souhaitez que le lien s'ouvre dans une nouvelle fenêtre, vous rajoutez target="_blank", ce qui donne par exemple
<p style="line-height: 30px" align="center"><a class="A" href="http://www.over-blog.com/com-1000066880/Toute+la+déco.html" target="_blank" >Toute la Déco</a></p>Vous obtenez au final :
a1 | b1 | c1 | d1 | e1 | f1 |
a2 | b2 | c2 | d2 | e2 | f2 |
a3 | b3 | c3 | d3 | e3 | f3 |
a4 | b4 | c4 | d4 | e4 | f4 |
<link href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/tableclothes/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/tableclothes/tablecloth.js"></script>
Prénom | Année | Nombre de points | Position |
Anne Laure | 1980 | 158 | 3 |
Margot | 1938 | 256 | 2 |
Béatrice | 2005 | 457 | 4 |
Huguette | 2001 | 58 | 1 |
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/sorttable/sorttable.js"></script>
<table width="100%" cellspacing="1" cellpadding="1" border="1" align="center" class="sortable">
<tbody>
<tr>
<td bgcolor="#2f3343" align="center"><font color="#ffffff">Prénom</font></td>
<td bgcolor="#2f3343" align="center"><font color="#ffffff">Année</font></td>
<td bgcolor="#2f3343" align="center"><font color="#ffffff">Nombre de points</font></td>
<td bgcolor="#2f3343" align="center"><font color="#ffffff">Position</font></td>
</tr>
<tr>
<td>Anne Laure</td>
<td align="center">1980</td>
<td align="center">158</td>
<td align="center">3</td>
</tr>
<tr>
<td>Margot</td>
<td align="center">1938</td>
<td align="center">256</td>
<td align="center">2</td>
</tr>
<tr>
<td>Béatrice</td>
<td align="center">2005</td>
<td align="center">457</td>
<td align="center">4</td>
</tr>
<tr>
<td>Huguette</td>
<td align="center">2001</td>
<td align="center">58</td>
<td align="center">1</td>
</tr>
</tbody>
</table>
<table width="300" height="100" cellspacing="1" cellpadding="1" border="1" align="center">
<tbody>
<tr>
<td bgcolor="#f5f5dc" bordercolor="000033"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Table : Insertion d'un tableau
Tr: Insertion d'une ligne
Td: Insertion d'une cellule
Width : Largeur
Height : Hauteur
Cellspacing : Espace entre les cellules du tableau
Cellpading : Espace entre le texte et le bord des cellules
Border : Epaisseur de la bordure du tableau
Bordercolor : Couleur des bordures
Bgcolor : Couleur du fond
Align : Alignement horizontal du contenu de la cellule
Valign : Alignement vertical du contenu de la cellule
Colspan : Réunion de plusieurs cellules en largeur
Rowspan : Réunion de plusieurs cellules en hauteur
<embed src="http://www.impek.com/go/sseven/wm" width="720" height="576" loop="True" style="FILTER: xray" name="RAOCXplayer"
pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/"
type="application/x-mplayer2" enablecontextmenu="true" autosize="false"
showstatusbar="true" showcontrols="1" showpositioncontrols="false" showtracker="false"></embed>
<iframe src="http://esa-dev.com/radio-live/player.php?en=0" width="300" height="100" allowtransparency="true" background-color="transparent" marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>
<a href="http://www.good-internet.net/radio/radios_online.php" onclick="window.open(this.href,'','resizable=no,location=no,menubar=no,En cliquant sur l'image, un pop s'ouvre avec un choix de radio :
scrollbars=no,status=no,toolbar=no,fullscreen=no,dependent=no,width=200,
height=250,status'); return false">
<img width="84" height="135" border="0" alt="player GOOD-internet.net" src="http://www.good-internet.net/radio/pics/player.png" /></a>
<a onclick="window.open(this, 'Zazie', 'width=250,height=300'); return false;" href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/jingles/Machanson1.htm">Ma PlayLisr</a>
<link href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/multibox/css/multibox.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/imagemenu/js/mootools-release-1.11.js"></script>
<script type="text/javascript"
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/multibox/js/overlay.js"></script>
<script type="text/javascript"
src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/multibox/js/multibox.js"></script>
<style type="text/css">
#htmlElement {
padding: 10px;
background-color: #000;
}
</style>
<div id="container">En bleu, votre morceau de musique
<a href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/multibox/music.mp3" rel="" id="mb8" class="mb"
title="Musique">La musique que j'aime</a>
<div class="multiBoxDesc mb8">Un morceau de musique</div>
</div>
<script type="text/javascript">
var box = {};
window.addEvent('domready', function(){
box = new MultiBox('mb', {
useOverlay: true,
container: document.body,
contentColor: '#FFF',
showNumbers: true,
descClassName: 'multiBoxDesc',
path: 'multibox/'
});
});
</script>
<script type="text/javascript" src="http://googlepage.googlepages.com/player.js"></script>Et à chaque fois, que vous collerez l'adresse d'un MP3 dans l'HTML dans un article
<a href="http://www.archive-host2.com/membres/up/1404915275/sundaybloodysunday.mp3">Sunday Bloody Sunday</a>
<div style="width:180px;height:236px;"><object width="180" height="220"><param name="movie"Vous le copiez et le collez en html
value="http://www.deezer.com/embedded/widget.swf?path=2252254&lang=fr&autoplay=0&id=820320"></param><embed src="http://www.deezer.com/embedded/widget.swf?path=2252254&lang=fr&autoplay=0&id=820320" type="application/x-shockwave-flash" width="180"
height="220"></embed></object><a href="http://www.deezer.com" style="border:none;margin:0;padding:0;"><img src="http://www.deezer.com/embedded/footer.jpg" alt="free music"
title="free music" border="0" style="border:none;margin:0;padding:0;" /></a></div>
<center><embed src="http://www.mp3asset.com/swf/mp3/mff-mixtape.swf?myid=1858415&mycolor=0x66&mycolor2=
0x66&autoplay=false&f=3" flashvars="path=2007/03/31" menu="false" quality="best" scale="noscale" bgcolor="#ffffff" wmode="transparent" width="300" height="185" name="MyFlashFetish.com"
align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></center><center><a
href="http://www.mp3assets.com" target="_blank"><img src="http://www.mp3assets.com/images/badgemp3player.gif" alt="Myspace Mp3 Player, MySpace MP3 Players, Flash MP3 Players"
style="position:absolute; left:0px; top: 88px; z-index:9;" border="0"></a>Check out this <a href="http://www.mp3assets.com">MySpace MP3
Player</a>!</center><br><br>
vous collez ce code en HTML.<div align="center"><iframe width="302" height="353" src="http://www.jamendo.com/fr/get/track/id/album/id/playerpage/19701/?item_o=track_no_asc&
n=all&player_height=353&player_type=coverinfos1&player_width=302&playercode_type=generic" frameborder="0" style="border:0;width:302px;height:353px;" scrollbars="no">
</iframe></div>
<table style="border-collapse:collapse"><tr><td><embed pluginspage="http://www.macromedia.com/go/getflashplayer" base="http://www.moonk.com"et collez le en HTML
wmode="transparent" src="http://www.moonk.com/themes/MAGIX_MOONK/flash/player/player_loader.swf?xmlpath=
http://www.moonk.com/moonk/xml&eid=C9B364A03D9911DCB21B18CAD45BFC0D&moonk=true" height="272" width="272" type="application/x-shockwave-flash" hspace="0" vspace="0" quality="high"
allowscriptaccess="always" swLiveConnect="true"></embed></td></tr><tr><td style="text-align:center;"><a
href="http://www.moonk.com/redirects/moonk_player_link.htm"><img style="border:none;" src="http://www.moonk.com/themes/MAGIX_MOONK/images/logo_moonkSmall.gif" /></a> <a
href="http://www.moonk.com/redirects/moonk_player_link.htm" style="font-size:10px;color:#33a1ff;text-decoration:none;" onmouseover="this.style.textDecoration='underline';"
onmouseout="this.style.textDecoration='none';">Get your own Moonk!</a></td></tr></table>
Get your own Moonk! |
<embed src="http://odeo.com/flash/audio_player_black.swf" quality="high" width="322" height="54" name="odeo_player_black"je le colle en html
align="middle" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" flashvars="type=audio&id=1446223" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed><br /><a style="font-size: 9px; padding-left: 110px; color: #f39;
letter-spacing: -1px; text-decoration: none" href="http://odeo.com/audio/1446223/view">powered by
<strong>ODEO</strong></a>
<embed type="application/x-shockwave-flash" src="http://stat.radioblogclub.com/radio.blog/skins/mini/player.swf"qui donne :
allowScriptAccess="always" width="180px" height="23px" bgcolor="#FFCCFF" id="radioblog_player_0"
FlashVars="id=0&filepath=http%3A%2F%2Fblogflyaway.free.fr%2Fradio.blog%2Fsounds
%2FThe%20Partisan%20-%20Leonard%20Cohen.rbs&colors=body:#FFCCFF;
border:#CC00FF;button:#9933FF;player_text:#9900CC;playlist_text:#999999;
"></embed>