Attractive.1fr1.net - Inscrit-Toi , clique ici !
 
AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 [XHTML] Les liens

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
scooby snacks
.
.
avatar

Age : 25
Messages : 86

♣ O.M.G journal (presque) intime ♣
Racontage de vie.:

MessageSujet: [XHTML] Les liens   Ven 26 Fév - 15:38


    Aujourd'hui, je vais vous apprendre à créer un lien. Super, hein ? On va repartir de tout le bazar que je vous avez fait faire dans mes autres tutoriels. Comme ça, ce sera plus simple. (: Vous avez ouvert le NotePad++ - ne me dites pas que vous n'avez encore que le Bloc Note xD - ? Alors, GO GO GO * POWEEER RANGERS !! *


    Relatif et absolu.

    Avouons, je commence fort. 8D Je ne suis pas un JuddBee - cf. ma présentation xD - pour rien. * JuddBee étant ici le synonyme de Geek, mais c'est une autre histoire xD *
    Donc, en XHTML, nous distinguons deux types de liens, relatifs et absolus * mais ça, vous l'aviez deviné (: *
    • liens internes au site : un site comporte plusieurs pages - sinon... c'est une page et pas tellement un site xD - et par conséquent, vous allez obligatoirement - je ne vois pas d'autres solutions... - faire des liens vers vos autres pages. Ce sont des liens relatifs d'une page vers une autre. C'est un lien assez court du genre : "aboutme.html"
    • liens externes au site : contrairement au liens relatifs ils sont plus longs et ont "http://..." devant. Ils ressemblent à ça : "http://attractive.1fr1.net/forum.htm"



    Donc, par exemple :
    "http://attractive.1fr1.net/forum.htm" est un lien absolu. C'est simple, n'est ce pas ?


    Bon. Maintenant, liens relatifs. Imaginons que vous avez deux fichiers dans le même dossier. "aboutme.html" et "index.html" Pour faire un lien de "index.html" vers "aboutme.html", il suffira de taper "aboutme.html". Rien de bien compliqué.

    Mais imaginons que vos deux fichiers sont dans des dossiers séparés - c'pas malin ça ! - et bien, ce ne sera pas la même chose. Pour notre exemple, le fichier "aboutme.html" sera placé dans le dossier "about". Ok ?
    Il faudra placé le nom du dossier avant comme ceci : "about/aboutme.html". S'il y a plusieurs dossiers, il suffit de les écrire à la suite.


    Ca vous semble peut-être compliqué, mais en réalité ça ne l'est pas. Car en général, par soucis de simplicité, on place toutes nos pages dans le même dossier. Et on fait plus de liens relatifs qu'autre chose car ce sont ces liens qui nous permettent de construire notre site. Mais bon. Après la théorie, la pratique.



    Un lien vers une page.

    Pour faire un lien, on utilise la balise <a>. Toutefois, elle ne va pas seule - oui, c'est une balise en paire mais je ne voulais pas dire ça xD - car il faut rajouter un petit truc dedans. En effet, on ajoute href="..." pour indiquer vers où le lien va.

    Code:
    <p>Grâce à <a href="http://attractive.1fr1.net/forum.htm">Attractive - et puis JuddBee xD -</a> on peut apprendre à coder en XHTML !</p>

    Si jamais vous avez une adresse bizarre avec des & dedans, il faut remplacer tous les & par &amp pour que votre site soit valide pour le XHTML.


    Maintenant, les liens relatifs.
    Déjà, vous allez créer deux pages dans le même dossier. Une qu'on va appeler "source.html" et l'autre "essai.html". Le lien sera contenu dans source et ira vers essai.

    Code:
    <h1>source.html</h1>

    <p>Tu te trouves sur source.html<br />
    Si tu allais sur <a href="essai.html">essai.html</a> ?</p>

    Et maintenant, ceci dans essai.html
    Code:

    <h1>essai.html</h1>

    <p>YOUHOUH ! Tu es bien sur essai.html BRAVO !</p>


    Evidemment, vous ne devez pas oublier de mettre tout le bazar qui constitue une page XHTML (<head>, <body>, <html>...) sur vos deux pages. Sinon, ça ne marchera pas.

    Si la page essai.html avait été dans un autre fichier, nous aurions eu :


    Code:
    <h1>source.html</h1>

    <p>Tu te trouves sur source.html<br />
    Si tu allais sur <a href="dossier/essai.html">essai.html</a> ?</p>


    Envoyer un mail.

    Pour qu'un visiteur puisse vous envoyer un email, il faut utiliser les mailto. Il y a juste l'attribut href="" qui change.

    Code:
    <h2>Contact</h2>

    <p>Envoyez moi un mail en cliquant <a href="mailto:martin.dubois@hotmail.fr">ici</a> !</p>



    Les ancres.

    Bon. Ici, pas question de bateau. (: Une ancre on va dire que c'est un point de repère dans une page web. Lorsque vous avez une grande page, vous pouvez faire un lien qui amener directement à une partie sans avoir à descendre et galérer pour trouver ce que vous cherchez. Pour faire une ancre, il faut rajouter un attribut à une balise qui va nous servir de repère. Cette balise est id="". Elle nous sert à donner un nom à la balise. <h2 id="mon_ancre">Blabla</h2>
    Après, on fait notre lien en rajoutant une dièse dans l'attribut href="" suivie du nom de l'ancre. Voici un exemple. Placez tout ça dans la page essai pour la suite. (:

    Code:

    <h1>Ma grande page</h1>

    <p>
      Aller directement à la partie :<br />
      <a href="#dannyjones">Danny Jones</a><br />
      <a href="#harryjudd">Harry Judd</a><br />
      <a href="#mcfly">McFLY</a><br />
    </p>
    <h2 id="dannyjones">Danny Jones</h2>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra volutpat nisl. Nullam sollicitudin nulla eget justo. Maecenas urna dui, mollis ut, tristique sit amet, adipiscing nec, neque. Praesent bibendum tempor metus. Sed vitae tellus mollis magna luctus ultrices. Mauris sollicitudin aliquet nunc. Aenean urna. Duis lorem. Proin augue. Quisque interdum felis eu diam.</p>

    <p>Etiam pede lectus, facilisis sit amet, varius a, malesuada varius, nisl. Aenean aliquam, odio quis semper cursus, nisl lacus rutrum ipsum, a laoreet neque ante vitae tortor. In hac habitasse platea dictumst. Ut at neque interdum enim pharetra commodo. Curabitur erat mi, congue ut, volutpat vel, semper ac, wisi. Sed non metus vel massa pharetra euismod. Nunc quis quam. Curabitur non libero a libero semper tincidunt. Mauris vehicula dui a wisi. Quisque nisl dolor, tempus nec, tristique vitae, eleifend eget, nunc. Duis dapibus, lectus eget egestas consectetuer, nibh metus pharetra nisl, vitae rutrum mi tellus placerat nulla. Praesent sed libero non enim suscipit aliquet. Proin tincidunt pede sit amet eros.</p>

    <p>Phasellus sed nisl. Integer rhoncus risus vitae arcu. Praesent sed diam non justo sagittis vulputate. Etiam faucibus posuere tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam porta. Vestibulum lectus ante, laoreet a, condimentum sit amet, dictum ac, sapien. Ut et tortor. Aliquam vitae lacus. Vestibulum non pede eget ante elementum elementum. Quisque accumsan wisi id quam. Integer tortor justo, cursus volutpat, vehicula ut, pellentesque ultrices, neque. Aenean eu tortor vitae dui pretium molestie. Sed dui nibh, rhoncus ut, egestas quis, commodo id, magna. Morbi gravida tellus id diam. Nunc nonummy leo nec velit. Curabitur id lacus a ipsum lacinia accumsan.</p>

    <h2 id="harryjudd">Harry Judd</h2>

    <p>Nunc ullamcorper imperdiet lorem. Aliquam convallis, sapien sit amet malesuada dignissim, sem tortor interdum risus, vel scelerisque sapien est ac justo. Sed varius nisl lacinia libero accumsan luctus. Nam luctus leo. In hac habitasse platea dictumst. Donec eget massa. Vivamus arcu ante, condimentum eu, imperdiet et, pulvinar vel, neque. Morbi auctor. Sed ac ligula. Pellentesque adipiscing orci id ipsum. Fusce ipsum. Cras eget neque. Nulla at sapien ornare augue tempor viverra. Praesent vulputate. Mauris mi. Quisque quam. Cras fermentum orci non risus. Phasellus quis augue vitae felis tincidunt dignissim. Vestibulum ut nulla at eros sagittis ullamcorper.</p>

    <p>Sed vel erat. Aenean a massa. Quisque ultricies, dolor non rutrum ullamcorper, lorem ligula blandit pede, malesuada volutpat magna dolor et ante. In tellus felis, tincidunt eget, adipiscing eu, gravida sit amet, lorem. Proin dolor. Proin vel elit. Morbi vel enim. Aenean congue enim sed ipsum. Praesent tristique. Ut placerat metus sed nibh. Sed sit amet urna. Morbi et lorem. Sed a erat eget dolor sollicitudin ornare. Maecenas nibh. Quisque tincidunt. Sed odio diam, dapibus a, interdum non, convallis id, pede. Donec condimentum eros eu nunc consequat commodo. Donec tempus fringilla eros.</p>

    <p>Mauris mollis luctus urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse consectetuer sem at urna. Aliquam dui magna, congue non, porttitor vitae, varius a, lacus. Duis nec enim. Quisque malesuada, lectus vel laoreet egestas, lorem nibh ultricies elit, et varius velit erat vel risus. Maecenas pellentesque nibh et purus. Nulla commodo justo vitae odio. Sed ornare. Quisque at tortor. Donec mi. Vestibulum consectetuer congue purus. Aenean pulvinar.</p>

    <h2 id="mcfly">McFLY</h2>

    <p>Nam vel arcu quis justo condimentum egestas. Aliquam dictum wisi. Nam lorem. Ut scelerisque. In velit tortor, venenatis eget, ultricies id, mollis nec, dui. Morbi nec ante vitae libero fermentum aliquam. Ut non quam. Cras ac urna. Aenean sollicitudin turpis sit amet quam. Quisque lacinia. Proin mollis. Vestibulum dapibus, nulla sit amet lacinia dapibus, est odio condimentum lorem, id aliquam lorem enim vitae nibh. Nulla tortor. Nunc pulvinar. Vestibulum malesuada wisi et urna.</p>

    Si vous n'avez pas de barre de déroulement... Agrandissez le texte ou réduisez la taille de la fenêtre de votre navigateur.
    C'est compris ? (:
    Maintenant, on va tout mettre dans un mixeur, mixé et... Appliqué. (x


    Lien vers une ancre située sur une autre page.

    Notre but maintenant est d'avoir une page différente et en cliquant sur une page source aller sur une ancre de l'autre page. (:

    On va faire ça pour la page essai. Pour arriver à notre résultat il suffit de procéder de la façon suivante : "href="essai.html#dannyjones" Ok ?
    Code:

    <h1>Notre Mélange.</h1>
    <p>
      Rendez-vous quelque part sur une autre page :<br />
      <a href="essai.html#dannyjones">Danny Jones</a><br />
      <a href="essai.html#harryjudd">Harry Judd</a><br />
      <a href="essai.html#mcfly">McFLY</a><br />
    </p>

    Placez tout ce bazar dans la page intitulée source.html

    Voilà ! J'espère que vous aurez tout compris jusqu'ici. (:
    A bientôt tout le monde !


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://seattlespecificinstitute.skyrock.com
 

[XHTML] Les liens

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: T u t o r i a u x :: HTML/WEB-