ancre

Ancre 1.

Le fichier que vous êtes en train de lire est contenu dans un répertoire nommé lien.
Le répertoire lien est lui-même contenu dans un répertoire nommé htmlCss.
Dans le répertoire htmlCss se trouve un répertoire nommé coucou.
Dans le répertoire coucou se trouve un fichier nommé salut.html.
Dans ce fichier salut.html se trouvent quatre éléments html de type article. Le quatrième possède un attribut id de valeur "germinal".

Écrire le code nécessaire pour faire un lien vers cet article 4. Faire en sorte que la page s'ouvre dans un nouvel onglet. Vous ferez également en sorte que le texte de ce lien s'affiche en orange et non en bleu.

Le code à compléter

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> Germinal </title>
         
    </head>
    
    <body>
            <!-- lien ici -->
    </body>
</html>

Conseil

Commencez par sortir papier, crayon et faîtes un schéma de l'arborescence décrite.

Une solution

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> Germinal </title>
        <style>
        .orange{
			color : orange;
			text-decoration: none; /* pour éviter que le lien ne soit souligné */
		}
        </style>
         
    </head>
    
    <body>
          
           <a href="../coucou/salut.html#germinal" target="oeuvre" class="orange">lien</a>
            vers l'article "Germinal".
         
    </body>
</html>

Testez le lien, assurez vous que le fonctionnement de votre réponse est le même que pour la solution proposée.

Ancre 2.

Ce fichier se trouve dans un répertoire nommé lien, lui-même est contenu dans un répertoire nommé htmlCss. Le répertoire htmlCss est contenu dans un répertoire coursICN. Dans le répertoire coursICN se trouve un répertoire nommé couleur. Dans ce répertoire couleur se trouve un fichier nommé c1.html. Dans cette page html se trouve un élément html d'identifiant "hsl".

Écrire ci-dessous un lien vers cet élément. Ce lien devra être écrit en blanc sur fond noir.

Le code à compléter

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> ancre 2 </title>
        
    </head>
    
    <body>
            <!-- lien ici -->
    </body>
</html>

Conseil

Le même conseil qu'à l'exercice précédent : commencez par un schéma de l'arborescence décrite sur une feuille !

Une solution

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> ancre 2 </title>
        <style>
        a{ 
			color: white;
			font-weight: bold; /* texte un peu plus gras */
			background-color: black;
			border-radius : 10px; /* arrondis pour faire plus joli */
			padding : 3px;/* marge interne */
		}
        </style>
    </head>
    
    <body>
          
          <p>
           <a href="../../couleur/c1.html#hsl" target="couleur"> lien</a>
          </p>
          
            
          
          
    </body>
</html>

Ancre 3.

Recherchez sur la toile la page de w3schools portant sur la syntaxe html5 de titre "Style Guide and Coding Conventions". Écrire un lien sur cette page ci-dessous dans "le code à compléter". Ce lien sera écrit en rouge sur fond bleu.
Recherchez la page w3schools concernant les ancres. Écrire le code d'un lien sur cette page dans "le code à compléter". Le texte de ce nouveau lien s'affichera en dessous du lien précédent. Les deux pages ciblées par les liens devront s'ouvrir dans le même onglet.

Le code à compléter

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> ancre 3 </title>
    </head>
    
    <body>
            <!-- liens  ici -->
    </body>
</html>

Une solution

<!DOCTYPE html>
<html lang="fr">

    <head>
        <meta charset="utf-8">
        <title> ancre 3 </title>
        <style>
         a{
			 color:red;
			 text-decoration: none;
			 background-color: blue;
			 border-radius: 50%;/* des rayons 50% donnent une forme circulaire ou elliptique */
			 padding: 5px;
			 font-weight: bold;
		 }
		 </style>
    </head>
    
    <body>
          
           <p>
			<a href="http://www.w3schools.com/html/html5_syntax.asp" target="w3schools"> lien 1</a>
           </p>
           
           <p>
			<a href="http://www.w3schools.com/tags/tag_a.asp" target="w3schools"> lien 2</a>
           </p>
    </body>
</html>