• Codage

    Voici des codes de niveaux plus ou moins élevés, dans les trois principaux langages nécessaires à la mise en page de votre blog. Je trouve les codes un peu partout, certains sont de moi. Les articles sur l'HTML sont tirés du site "Le site du Zéro".

    CSS
    Changer le curseur Sélecteurs Eklablog  Déplacer un module

     

    HTML
    Structure d'une page Lien vers une ancre  Les balises

     

    Javascript
    Étoiles derrière le curseur    
  •  Ce code correspond à la base d'une page web en HTML5 :

     

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>Titre</title>
        </head>
     
        <body>
         
        </body>
    </html>

     

    Bon évidemment, ici je vous fait un cours sur comment créer une page entière en HTML. Il est évident que sur Eklablog vous n'aurez pas besoin de tout ça. Mais vous pourrez vous en inspirer.

     

    Vous noterez que les balises s'ouvrent et se ferment dans un ordre précis. Par exemple, la balise <html> est la première que l'on ouvre et c'est aussi la dernière que l'on ferme (tout à la fin du code, avec </html>). Les balises doivent être fermées dans le sens inverse de leur ouverture. Un exemple :

    • <html><body></body></html> : correct. Une balise qui est ouverte à l'intérieur d'une autre doit aussi être fermée à l'intérieur.

    • <html><body></html></body> : incorrect, les balises s'entremêlent.

     

    Ne prenez pas peur en voyant toutes ces balises d'un coup, je vais vous expliquer leur rôle !

    Le doctype

    <!DOCTYPE html>


    La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML.

    Ce n'est pas vraiment une balise comme les autres (elle commence par un point d'exclamation), vous pouvez considérer que c'est un peu l'exception qui confirme la règle.

    La balise </html>

     

    <html>
     
    </html>

     

    C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous pouvez le voir, la balise fermante </html> se trouve tout à la fin du code !

    L'en-tête <head> et le corps <body>

    Une page web est constituée de deux parties :

    • L'en-tête <head> : cette section donne quelques informations générales sur la page comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est généralement assez courte. Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l'ordinateur. Elles sont cependant très importantes !

    • Le corps <body> : c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure partie de notre code.

    Pour le moment, le corps est vide (nous y reviendrons plus loin). Intéressons-nous par contre aux deux balises contenues dans l'en-tête…

    L'encodage (charset)

    <meta charset="utf-8" />

     

    Cette balise indique l'encodage utilisé dans votre fichier .html.

    Sans rentrer dans les détails, car cela pourrait vite devenir compliqué, l'encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.).

    Il y a plusieurs techniques d'encodage portant des noms bizarres et utilisées en fonction des langues : ISO-8859-1, OEM 775, Windows-1253… Une seule cependant devrait être utilisée aujourd'hui autant que possible : UTF-8. Cette méthode d'encodage permet d'afficher sans aucun problème pratiquement tous les symboles de toutes les langues de notre planète ! C'est pour cela que j'ai indiqué utf-8 dans cette balise.

    Il faut aussi que votre fichier soit bien enregistré en UTF-8. C'est le cas le plus souvent sous Linux par défaut mais, sous Windows, il faut généralement le dire au logiciel.

    Cette partie du tutoriel est destiné à des gens qui créent eux-mêmes leurs fichiers HTML, alors vous Eklablogueurs, n'y prêtez pas attention.

     

    Le titre principal de la page

    <title>

    C'est le titre de votre page, probablement l'élément le plus important ! Toute page doit avoir un titre qui décrit ce qu'elle contient.

    Il est conseillé de garder le titre assez court (moins de 100 caractères en général).

    Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur). Enregistrez votre page web et ouvrez-la dans votre navigateur. Vous verrez que le titre s'affiche dans l'onglet.


    2 commentaires
  • Ce tuto va vous servir à insérer des étoiles derrières votre curseur (comme moi) et, si vous êtes courageux, de changer la couleur des étoiles.

    Voilà déjà le code (Attention, le js doit être activé sur votre blog !)

    <script src="http://astuforum.free.fr/js/et_cur_blanc.js" type="text/javascript"></script>

     

    Pour l'insérer, vous prenez un module simple de votre menu, n'importe lequel, et vous insérer le code dnas l'onglet "HTML". Comme le code est encadré des balises <script> et </script>, il sera reconnu et vous aurez vos étoiles !

    ----------------------------------------------------------------------------------------

    Donc dans ce code, les étoiles sont blanches. Voici comment les changer de couleur. Merci de suivre ces étapes attentivement.

    ÉTAPE 1

    Récupérer l'url du .js

    <script src="http://astuforum.free.fr/js/et_cur_blanc.js" type="text/javascript"></script>

    Ceci ( http://astuforum.free.fr/js/et_cur_blanc.js  ) est un fichier en .js. Insérez le lien dans la barre d'adresse. 

    Un code s'affiche. Il est long, j'en conviens. Copiez-le.

    ÉTAPE 2

    Ensuite, vous allez ouvrir un bloc-notes; tout simple, le bloc-notes basique dans les applications de l'ordinateur. Si vous en voulez un plus performant vous pouvez télécharger Notepad++ ou TextWrangler.

    Ouvrez donc,votre bloc-notes, créez un nouveau fichier et collez le code.

    Le voici:

     

    var colour="#ffffff"; var sparkles=25 var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var tiny=new Array(); var star=new Array(); var starv=new Array(); var starx=new Array(); var stary=new Array(); var tinyx=new Array(); var tinyy=new Array(); var tinyv=new Array(); function addEvent(ou, eventName, quoi) { if (ou.addEventListener) ou.addEventListener(eventName, quoi, false); else if (ou.attachEvent) ou.attachEvent('on'+ eventName, quoi); } function pluiedetoiles() { if (document.getElementById) { var i, rats, rlef, rdow; for (var i=0; i<sparkles; i++) { var rats=createDiv(3, 3); rats.style.visibility="hidden"; document.body.appendChild(tiny[i]=rats); starv[i]=0; tinyv[i]=0; var rats=createDiv(5, 5); rats.style.backgroundColor="transparent"; rats.style.visibility="hidden"; var rlef=createDiv(1, 5); var rdow=createDiv(5, 1); rats.appendChild(rlef); rats.appendChild(rdow); rlef.style.top="2px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="2px"; document.body.appendChild(star[i]=rats); } set_width(); sparkle(); } } function sparkle() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<sparkles; c++) if (!starv[c]) { star[c].style.left=(starx[c]=x)+"px"; star[c].style.top=(stary[c]=y)+"px"; star[c].style.clip="rect(0px, 5px, 5px, 0px)"; star[c].style.visibility="visible"; starv[c]=50; break; } } for (c=0; c<sparkles; c++) { if (starv[c]) update_star(c); if (tinyv[c]) update_tiny(c); } setTimeout("sparkle()", 40); } function update_star(i) { if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; if (starv[i]) { stary[i]+=1+Math.random()*3; if (stary[i]<shigh+sdown) { star[i].style.top=stary[i]+"px"; starx[i]+=(i%5-2)/5; star[i].style.left=starx[i]+"px"; } else { star[i].style.visibility="hidden"; starv[i]=0; return; } } else { tinyv[i]=50; tiny[i].style.top=(tinyy[i]=stary[i])+"px"; tiny[i].style.left=(tinyx[i]=starx[i])+"px"; tiny[i].style.width="2px"; tiny[i].style.height="2px"; star[i].style.visibility="hidden"; tiny[i].style.visibility="visible" } } function update_tiny(i) { if (--tinyv[i]==25) { tiny[i].style.width="1px"; tiny[i].style.height="1px"; } if (tinyv[i]) { tinyy[i]+=1+Math.random()*3; if (tinyy[i]<shigh+sdown) { tiny[i].style.top=tinyy[i]+"px"; tinyx[i]+=(i%5-2)/5; tiny[i].style.left=tinyx[i]+"px"; } else { tiny[i].style.visibility="hidden"; tinyv[i]=0; return; } } else tiny[i].style.visibility="hidden"; } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; } function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; div.style.backgroundColor=colour; return (div); } function initPluieDEtoiles() { if (document.getElementById("pluiedetoiles")) { var firstarg=document.getElementById("pluiedetoiles"); colour="#"+firstarg.href.split("#")[1]; var parentli = firstarg.parentNode; var parentul = parentli.parentNode; var supprimerli = parentul.removeChild(parentli); } pluiedetoiles(); } addEvent(window, "load", initPluieDEtoiles);

    ÉTAPE 3

    Mais nous allons uniquement nous intéresser aux premiers caractères.

    var colour="#ffffff";

    Comme vous le savez sûrement, le code couleur #ffffff définit la couleur blanche. Vous n'avez qu'à remplacer #ffffff par le code couleur de votre choix.

    ÉTAPE 4

    Ensuite, enregistrez votre fichier sous le nom de étoiles.js. En extension js, c'est-à-dire javascript.

    ÉTAPE 5

    Vous n'avez plus qu'à héberger votre fichier. Pour cela, sur votre blog, allez dans "Contenu", "Gérer les fichiers". Ensuite, envoyez votre fichier étoiles.js. Tuto: Étoiles derrière le curseur

    Faites "Envoyer". Vous voyez ensuite votre fichier s'afficher.

    Tuto: Étoiles derrière le curseur

    Bon, je n'ai pas mis le même nom pour mon fichier, mais ne vous inquiétez pas le contenu est le même. Il ne vous reste qu'à double-cliquer sur votre fichier. Il vous affiche votre code dans un nouvel onglet. Récuperez l'url dans la barre d'adresse.

    Tuto: Étoiles derrière le curseur

    C'est presque fini, courage !

    ÉTAPE 6

    Maintenant vous reprenez le code de tout à l'heure mais vous remplacez http://astuforum.free.fr/js/et_cur_blanc.js par l'adresse de votre fichier. Vous insérez ensuite votre code dans l'onglet HTML. Et le tour est joué !

    <script src="http://ekladata.com/5xw1tLiSK9D7XwCTpV5luSOT4VY/curesueravecdese-toilesderriere.js" type="text/javascript"></script>

     


    4 commentaires
  • Un lien vers une ancre

    Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML lorsqu'elles sont très longues.
    En effet, il peut alors être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse sauter directement à la partie qui l'intéresse.

    Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre par exemple.
    Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira ensuite pour faire un lien vers cette ancre. Par exemple :

     

    <h2 id="mon_ancre">Titre</h2>

     

    Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre. Exemple :

     

    <a href="#mon_ancre">Aller vers l'ancre</a>

    Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la même page (à condition que la page comporte suffisamment de texte pour que les barres de défilement se déplacent automatiquement). Voici un exemple de page comportant beaucoup de texte et utilisant les ancres (j'ai mis n'importe quoi dans le texte pour remplir ) :

     

    <h1>Ma grande page</h1>
     
    <p>
        Aller directement à la partie traitant de :<br />
        <a href="#cuisine">La cuisine</a><br />
        <a href="#rollers">Les rollers</a><br />
        <a href="#arc">Le tir à l'arc</a><br />
    </p>
    <h2 id="cuisine">La cuisine</h2>
     
    <p>... (beaucoup de texte) ...</p>
     
    <h2 id="rollers">Les rollers</h2>
     
    <p>... (beaucoup de texte) ...</p>
     
    <h2 id="arc">Le tir à l'arc</h2>
     
    <p>... (beaucoup de texte) ...</p>

    S'il ne se passe rien quand vous cliquez sur les liens, c'est qu'il n'y a pas assez de texte. Dans ce cas, vous pouvez soit rajouter du blabla dans la page pour qu'il y ait (encore) plus de texte, soit réduire la taille de la fenêtre de votre navigateur pour faire apparaître les barres de défilement sur le côté.


    votre commentaire
  •  

    Les balises et leurs attributs

    Bon, tout cela était trop facile. Évidemment, il a fallu que ces satanés informaticiens s'en mêlent et compliquent les choses. Il ne suffit pas d'écrire « simplement » du texte dans l'éditeur, il faut aussi donner des instructions à l'ordinateur. En HTML, on utilise pour cela des balises.

    Les balises

    Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher.
    Les balises se repèrent facilement. Elles sont entourées de « chevrons », c'est-à-dire des symboles < et >, comme ceci : <balise>

    À quoi est-ce qu'elles servent ? Elles indiquent la nature du texte qu'elles encadrent. Elles veulent dire par exemple : « Ceci est le titre de la page », « Ceci est une image », « Ceci est un paragraphe de texte », etc.

    On distingue deux types de balises : les balises en paires et les balises orphelines.

    Les balises en paires

    Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent :

     

    <titre>Ceci est un titre</titre>

    On distingue une balise ouvrante (<titre>) et une balise fermante (</titre>) qui indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises… n'est pas un titre.

     

    Ceci n'est pas un titre <titre>Ceci est un titre</titre> Ceci n'est pas un titre

    Les balises orphelines Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur « Insère une image ici ». Une balise orpheline s'écrit comme ceci :

     

    <image />

     

    Notez que le / de fin n'est pas obligatoire. On pourrait écrire seulement <image>. Néanmoins, pour ne pas les confondre avec le premier type de balise, les webmasters recommandent de rajouter ce / (slash) à la fin des balises orphelines. Vous me verrez donc mettre un / aux balises orphelines et je vous recommande de faire de même, c'est une bonne pratique.

    Les attributs Les attributs sont un peu les options des balises. Ils viennent les compléter pour donner des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci :

    <balise attribut="valeur">

    À quoi cela sert-il ? Prenons la balise que nous venons de voir. Seule, elle ne sert pas à grand chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher :

     

    <image nom="photo.jpg" />

    L'ordinateur comprend alors qu'il doit afficher l'image contenue dans le fichier photo.jpg. Dans le cas d'une balise fonctionnant « par paire », on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante. Par exemple, ce code indique que la citation est de Neil Armstrong et qu'elle date du 21 Juillet 1969 :

    <citation auteur="Neil Armstrong" date="21/07/1969">
    C'est un petit pas pour l'homme, mais un bond de géant pour l'humanité.
    </citation>

     

    Toutes les balises que nous venons de voir sont fictives. Les vraies balises ont des noms en anglais (eh oui !), nous allons les découvrir dans la suite de ce cours.

    votre commentaire
  • Pour changer le curseur, on n'y va pas par quatre chemins. Il  y a un code à retenir. Après on peut faire des variantes, comme tout dans le CSS.

    Alors. Si vous voulez trouver des curseurs jolis et ne pas vous casser la tête avec les codes, vous trouverez tout ce que vous voulez >ICI<

    Quand vous cliquez sur le curseur de votre choix, votre code est le premier de la partie "MySpace Profile 2.0 Codes"

    Si vous voulez créer votre curseur vous-même, il y a un tuto >ICI< (Je vous y explique aussi comment créer un code)

    Et si vous avez des questions, posez-les ! Voilà voilà =)


    votre commentaire
  • Je pense que cet article va bien vous aider: ce sont tous les sélecteurs eklablog ! Bon, après, on peut les modifier un peu. Mais je vais vous expliquer tout ça.

    Titre du blog

    #titre_header a{propriété: valeur;}

    Contenu  du blog

    Pour les liens: #body a{propriété: valeur;}

    Pour les textes: #body p{propriété: valeur;}

    Pour les images: #body img{propriété: valeur;}

    Ah oui, parce que j'ai oublié de préciser: p désigne le texte, a désigne les liens et img désigne les images. quand vous voyez :hover derrière, cela signifie "au survol".

    La "help bubble" (la petite fenêtre qui s'affiche quand vous survolez un avatar)

    #help_bubble{propriété: valeur;}

    La fenêtre d'information (c'est-à-dire les fenêtres Modifier le thème, Édition d'un article, Profil d'un membre...etc)

    .window{propriété: valeur;}

    Commentaires

    Commentaires auteur:  .comment_admin{propriété: valeur;} 

    Commentaires: .comment_normal{propriété: valeur;}

    Avatar des commentaires: .commentavatar a img{propriété: valeur;}

    Avatar des commentaires survolé: .commentavatar:hover{propriété: valeur;}

    Module Derniers Visiteurs

    Module: .module_type_lastvisitors{propriété: valeur;}

    Avatar: .module_type_lastvisitors img{propriété: valeur;}

    Barre eklablog (Contenu, Apparence, Interactions, Configuration, Mon compte)

    Barre:  #menubar{propriété: valeur;} 

    Une section (par exemple: Mon compte): .menubar_section{propriété: valeur;}

    Notifications: #menubar_notifications{propriété: valeur;}

    Pour le reste des sélecteurs de la barre  d'eklablog, je ne connais pas, désolée.

    Fond de la page

    #background {propriété: valeur;}
     
    Menu 1
     
    #menu1{propriété: valeur;}
     
    Menu 2
     
    #menu2{propriété: valeur;}
     
    Menu de l'en-tête
     
    #menu{propriété: valeur;}
     
    Menu titre
     
    .module_menu_titre {propriété: valeur;}
     
    Pied de page
     
    #footer{propriété: valeur;}
     
    Titre des articles
     
      .module_titre {propriété: valeur;}
     
    Articles
      
     .module_contenu {propriété: valeur;}
     
    J'ajoute les sélecteurs au fur et à mesure que je les trouve; si vous avez des questions n'hésitez pas !

     

     


    1 commentaire
  • Alors voilà: dans cet article je t'apprends à déplacer un module sur ta page (comme les derniers visiteurs sur mon blog, tu vois).

    Déja, le sélecteur.

    Pour déplacer un module Imaginons que tu veux déplacer les Statistiques. Tu fais Clique Droit, puis "Code source de la page"

    Tu tapes sur ton clavier CTRL + F; un champ de texte apparaît.

    Tu tapes le titre du module, donc ici, "Statistiques". Il te le surligne en vert. Ce qui nous intéresse, c'est les chiffres que j'ai colorié en rose juste au dessus. Tu copies ces chiffres.

    #module_menuXXXX
    On a notre sélecteur. Tu remplaces les XXXX rouge par les chiffres pris dans le code source.
     

    Maintenant la propriété. Puisque tu veux changer la position de ton module, la propriété sera position (tout est en anglais dans le CSS).

    Et puis la valeur: Ici, on détermine où va être ton module en px ou en %. En %, la position de ton module s'adaptera avec l'écran sur lequel tu ouvres la page. En px, l'ordinateur comptera le nombre de px entre le bord gauche de l'écran et ton module, et le nombre de px entre le haut de l'écran et ton module (c'est assez clair? ^^).

    Par exemple sur mon blog, j'ai mis: {position: absolute;
              top: 180px;
              left: 55%; top, c'est le haut, left c'est la gauche =)

    absolute, c'est-à-dire que lorsque l'on descend sur la page, on ne voit plus le module. Mais si tu mets fixed, tu verras toujours ton module (par exemple, la barre eklablog où il  y a "Apparence", "Mon compte" et les notifications, est en position fixed).

    Donc moi, mon code donne ça:

    #module_menu109425647
    {position: absolute;
              top: 180px;
              left: 55%;} Attention ! Ne jamais oublier: - les deux points après la propriété, et le point virgule après chaque valeur!!!

    J'espère que tu as compris tout ce que j'ai dit !! Tu n'as plus qu'à faire:

    #module_menuXXXX
    {position: absolute;
              top: Xpx;
              left: Xpx;}

    ou 

     

    #module_menuXXXX
    {position: absolute;
              top: X%;
              left: X%;}

     


    35 commentaires
  • Les bases

    C'est ici qu'on va ajouter le CSS. Je vais t'apprendre comment créer un code, et tu pourras les tester sur ton blog.

     

    La composition d'un code

    Un code se compose de trois parties:

    sélecteur {propriété: valeur;}

    Pour t'expliquer la fonction de chaque partie du code, je vais prendre un exemple très simple:

    "Je veux avoir un fond bleu."

    Le corps de la page se dit "body". C'est donc notre sélecteur. On veut ajouter une propriété au corps de la page.

    On a donc le sélecteur, le code prend forme:

    #body {propriété: valeur;} (ne pas oublier le dièse (#) devant )

    Maintenant, la propriété. Comme c'est la couleur du fond que nous voulons changer, on écrit:

    #body {background-color: valeur;} Il ne nous manque que la valeur. Eh bien ici, on met la couleur que l'on veut.

    #body {background-color: blue;}   

    Eh bien voilà, c'est tout simple !!! Ça marche vraiment tu peux essayer. Après avoir mis ton code dans la case "Ajouter du CSS", clique sur "Appliquer et Sauvegarder".

    N'hésite pas à me poser des questions,

     J'espère que c'était assez clair ^^. À bientôt pour le prochain épisode

     


    2 commentaires