Exercices HTML Avancé

Académie 🎓
1

voila mon exercice :slight_smile:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <div id="titre_principal">
        <img src="images/logosite.jpg" alt="Logo de mon site" id="logo" />
        <h1>Seikana</h1>
        <h2>Petit blog</h2>
      </div>

      <nav>
        <ul>
          <li><a href="#">Accueil</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">CV</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>

    <article>
      <h3>
        J'ai envie d'apprendre à devenir développeur web
      </h3>
      <p class="article-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sequi
        facilis repellendus, totam animi provident eum velit quo obcaecati ad.
        Sint praesentium quae odio eius quas eligendi autem quidem modi!
      </p>
      <a href="/article.html"><h6>Lien vers l'article complet</h6></a>
    </article>

    <article>
      <h3>
        J'ai envie d'apprendre Le HTML
      </h3>
      <p class="article-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga accusamus
        unde reiciendis cupiditate exercitationem, nisi facilis magni saepe,
        voluptatem doloribus sequi, ullam sint blanditiis alias aperiam ut nemo
        eligendi neque?
      </p>
      <a href="#"><h6>Lien vers l'article complet</h6></a>
    </article>

    <article>
      <h3>
        J'ai envie d'apprendre le CSS
      </h3>
      <p class="article-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta iure,
        ducimus accusantium placeat nihil, sit consectetur aliquam corporis
        vitae eos natus aperiam architecto perferendis in pariatur repellat
        labore optio repudiandae.
      </p>
      <a href="#"><h6>Lien vers l'article complet</h6></a>
    </article>

    <article>
      <h3>
        J'ai envie d'apprendre le JAVASCRIPT
      </h3>
      <p class="article-body">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium
        numquam doloremque corporis et tenetur distinctio unde veniam, harum,
        autem sit atque quae sapiente ad quos earum quidem nihil fugiat
        praesentium?
      </p>
      <a href="#"><h6>Lien vers l'article complet</h6></a>
    </article>

    <aside>
      <h4>À propos de l'auteur</h4>
      <p>
        Je m'apelle Sébastien j'ai 34 ans et je suis d'origine Belge.
      </p>
      <img src="images/matrombi.jpg" alt="Ma photo" />
      <p>Voici mes reseaux sociaux</p>
      <p>
        <img src="images/facebook.png" alt="Facebook" />
        <img src="images/twitter.png" alt="Twitter" />
      </p>
    </aside>

    <footer>
      <p>Tout droit reservé @Seikana</p>
    </footer>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <div id="titre_principal">
        <img src="images/logosite.jpg" alt="Logo de mon site" id="logo" />
        <h1>Seikana</h1>
        <h2>Petit blog</h2>
      </div>

      <nav>
        <ul>
          <li><a href="#">Accueil</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">CV</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>

    <article>
      <h3>
        J'ai envie d'apprendre à devenir développeur web
      </h3>
      <p class="article-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam sequi
        facilis repellendus, totam animi provident eum velit quo obcaecati ad.
        Sint praesentium quae odio eius quas eligendi autem quidem modi!
      </p>
      <img src="images/computer.png" alt="photo d'un ordinateur" />
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat quod
        rerum unde velit debitis error laboriosam dolor, repellendus ipsa
        magnam! Iure consequatur aspernatur totam sequi iusto qui mollitia
        numquam ipsum ducimus, voluptatibus aliquid, illum quibusdam vel
        assumenda minus vitae ut debitis, delectus ex hic obcaecati? Provident
        maxime libero soluta facere?
      </p>
    </article>
    <form>
      <p><label for="commentary">Un Commentaire ?</label></p>
      <textarea id="commentary" name="commentary" rows="4" cols="50">Votre commentaire</textarea>
      <br />
      <input type="submit" value="Submit" />
    </form>

    <aside>
      <h4>À propos de l'auteur</h4>
      <p>
        Je m'apelle Sébastien j'ai 34 ans et je suis d'origine Belge.
      </p>
      <img src="images/matrombi.jpg" alt="Ma photo" />
      <p>Voici mes reseaux sociaux</p>
      <p>
        <img src="images/facebook.png" alt="Facebook" />
        <img src="images/twitter.png" alt="Twitter" />
      </p>
    </aside>

    <footer>
      <p>Tout droit reservé @Seikana</p>
    </footer>
  </body>
</html>
1 « J'aime »
2

Salut !

Pour toute la balise head c’est bien complet mais je t’avoue que je n’ai pas tout en tête donc je vais passer cette balise, désolé le SEO. :sweat_smile:

Pour le reste, de mon point de vue c’est bien.

j’ai quelques remarques ici :

  • J’aurai enlevé le " / " dans <a href="/article.html"> car il est dans le même emplacement que la page principale (page nommée index.html peut-être ?). J’ai essayé en local et en effet mon navigateur ne reconnait pas le chemin de la page article.html avec ce " / " devant.

  • Tant qu’a faire, autant rajouter la page principale (index.html) dans le lien href=« # » de <li><a href="#">Accueil</a></li> pour les deux pages histoire de boucler vers l’accueil.

Voilà c’est quasi rien en fait t’a bon sur toute la forme :+1:

PS :
Rien à voir avec l’exo, mais j’ai vu que tu as inséré un espace pour les réseaux avec simplement des images pour Facebook et Twitter. Personnellement, j’utilise une librairie pour utiliser des liens sur des icônes déjà faites pour ça. Voilà un exemple du code, je te laisse tester et faire des recherches dessus si ça t’intéresse :

<div id="networks">
            <!-- Add icon library -->
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
            <!-- Add font awesome icons -->
            <a href="mon_lien_fb" target="_blank" class="fa fa-facebook fa-3x"></a>
            <a href="mon_lien_yt" target="_blank" class="fa fa-youtube fa-3x"></a> 
            <a href="mon_lien_itg" target="_blank" class="fa fa-instagram fa-3x"></a>
        </div>
1 « J'aime »