Ce qui fait la richesse du web, c'est aussi les liens que l'on peut y trouver, on peut se promener de page en page ou de site en site très facilement avec les liens hypertext !
Nous allons créer deux nouveaux fichiers : lien1.html et
lien2.css
Ces deux nouveaux fichiers seront placés dans notre dossier /HtmlCss/09-Lien/.
Ce qui donnera : /HtmlCss/09-Lien/lien1.html et /HtmlCss/09-Lien/lien2.html
Voici le contenu de lien1.html :
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Ma Page 1</title> <link rel="stylesheet" href="lien1.css"> </head> <body> <h1>Voici la page n°1</h1> <a href="lien2.html"> cliquez ici pour vous rendre sur la page 2 </a><br><!-- lien vers une page intérieur --> <a href="http://www.tf1.fr/news" title="Se rendre sur le site">TF1 actualités</a> le site officiel de TF1 <br> <!-- lien vers une page extérieur et title permet d'obtenir une description --> <a href="http://www.google.com/" target="_blank">Google</a> le célébre moteur de recherche<br> <!-- target="_blank" pour ouverture dans un nouvel onglet --> <a href="cv.doc"> Télécharger mon CV </a><br> <!-- pour le téléchargement de document --> <a href="cv.pdf"> Voir mon CV </a><br> <!-- pour l'ouverture d'un fichier pdf --> <a href="http://www.lepoint.fr/"><img src="image.png"></a><br> <!-- Lien sur une image --> <a href="" onClick="window.print()">Imprimer la page</a> </body> </html>
a
permet de créer un lien hypertext et l'attribut href
permet de définir la destination du lien.<a href="lien2.html"> cliquez ici pour vous rendre sur la page 2 </a>
<a href="http://www.tf1.fr/news" title="Se rendre sur le site">TF1 actualités</a> le site officiel de TF1
<a href="http://www.google.com/" target="_blank">Google</a> le célébre moteur de recherche
<a href="cv.doc"> Télécharger mon CV </a>
<a href="cv.pdf"> Voir mon CV </a>
<a href="cv.pdf" download> Télécharger mon CV </a>
<a href="http://www.lepoint.fr/"><img src="image.png"></a>
<a href="" onClick="window.print()">Imprimer la page</a>
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Ma Page 1</title> <link rel="stylesheet" href="lien2.css"> </head> <body> <a href="lien1.html"> cliquez ici pour vous rendre sur la page 1 </a> </body> </html>
En plus des liens permettant la navigation d'une page web vers une autre, nous pouvons également créer des liens internes permettant de nous déplacer à l'intérieur d'une même page lorsque les contenus sont denses.
Les ancres sont particulièrement utiles sur les sites web intégrant beaucoup de contenu (comme wikipedia), cela permet de se déplacer rapidement d'une partie à une autre.
Nous allons créer un nouveau fichier : ancre.html
Ce nouveau fichier sera placé dans notre dossier /HtmlCss/09-Lien/.
Ce qui donnera : /HtmlCss/09-Lien/ancre.html
Voyons un exemple ensemble :
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Mes Ancres</title> <link rel="stylesheet" href="ancre.css"> </head> <body> <h1>Sommaire</h1> <a href="#sport">Sport</a><br> <a href="#politique">Politique</a><br> <a href="#culture">Culture</a><br> <hr> <h2 id="sport">Sport</h2> <p> Article sur le sport <!-- Prévoir de copier/coller 100 ligne de texte ! --> </p> <hr> <h2 id="politique">Politique</h2> <p> Article sur la Politique <!-- Prévoir de copier/coller 100 ligne de texte ! --> </p> <hr> <h2 id="culture">Culture</h2> <p> Article sur la Culture <!-- Prévoir de copier/coller 100 ligne de texte ! --> </p> </body> </html>
a
permet de créer un lien hypertext et l'attribut href
permet de définir la destination du lien.SportLe point d'ancrage se déclare avec un id (comme pour les id css).
Dans notre cas, notre point d'ancrage se fait sur une balise h2, mais cela aurait pu se faire sur un autre élément à condition d'y ajouter l'id sport.Sport
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Mes Ancres</title> <link rel="stylesheet" href="ancre.css"> </head> <body> <h1 id="sommaire">Sommaire</h1> <a href="#sport">Sport</a><br> <a href="#politique">Politique</a><br> <a href="#culture">Culture</a><br> <hr> <h2 id="sport">Sport</h2> <p> Article sur le sport <!-- Prévoir de copier/coller 100 ligne de texte ! --> </p> <hr> <h2 id="politique">Politique</h2> <p> Article sur la Politique <!-- Prévoir de copier/coller 100 ligne de texte ! --> </p> <hr> <h2 id="culture">Culture</h2> <p> Article sur la Culture <!-- Prévoir de copier/coller 100 ligne de texte ! --> </p> <a href="#sommaire">Remonter en haut de page</a> </body> </html>
HTML CSS
1. Introduction Html Css 2. Structure D'une Page Html 3. Structure D'un Fichier Css 4. Les Polices D'ecriture 5. Les Selecteurs 6. Firebug 7. Styles Css 8. L'heritage 9. Les Images 10. Les Positionnements 11. Le Zoning 12. Les Tableaux 13. Les Listes 14. Les Liens Et Ancres 15. Menu De Navigation 16. Les Formulaires 17. Donnees Multimedia 18. Balises Html Et Proprietes Css 19. Cas Pratique 20. Creation D'un Site Web