starter/02-HTML-Fundamentals/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML第一课：基础级别（嘿嘿）</title>
  </head>

  <body>
    <header>
      <h1>📘 The Code Magazines</h1>

      <nav>
        <a href="blog.html" target="_blank">Blog</a>
        <a href="#" target="_blank">Challenage</a>
        <a href="#" target="_blank">Flexbox</a>
        <a href="#" target="_blank">CSS Grid</a>
      </nav>
    </header>

    <article>
      <h2>The Basic Language of the Web: HTML</h2>
      <img src="img/laura-jones.jpg" alt="图片炸了" width="50" height="50" />
      <p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
      <img src="img/post-img.jpg" alt="图片炸了" width="500" height="200" />
      <p>
        All modern websites and web applications are built using three
        <em>fundamental</em>
        technologies: HTML, CSS and JavaScript. These are the languages of the
        web.
      </p>
      <p>
        In this post, let's focus on HTML. We will learn what HTML is all about,
        and why you too should learn it.
      </p>
      <h3>What is HTML?</h3>
      <p>
        HTML stands for <b>H</b>yper<b>T</b>ext <b>M</b>arkup <b>L</b>anguage.
        It's a markup language that web developers use to structure and describe
        the content of a webpage (not a programming language).
      </p>

      <p>
        HTML consists of elements that describe different types of content:
        paragraphs, links, headings, images, video, etc. Web browsers understand
        HTML and render HTML code as websites.
      </p>
      <p>In HTML, each element is made up of 3 parts:</p>
      <ol>
        <li>The opening tag</li>
        <li>The closing tag</li>
        <li>The actual element</li>
      </ol>
      <p>
        You can learn more at the
        <a href="https://www.baidu.com" target="_blank">MDN Web Docs.</a>
      </p>
      <h3>Why should you learn HTML?</h3>
      <p>
        There are countless reasons for learning the fundamental language of the
        web. Here are 5 of them:
      </p>

      <ul>
        <li>To be able to use the fundamental web dev language</li>
        <li>
          To hand-craft beautiful websites instead of relying on tools like
          Worpress or Wix
        </li>
        <li>To build web applications</li>
        <li>To impress friends</li>
        <li>To have fun 😃</li>
      </ul>

      <p>Hopefully you learned something new here. See you next time!</p>
    </article>
    <aside>
      <h4>Related posts</h4>

      <ul>
        <li>
          <img src="img/related-1.jpg" alt="图片炸了" width="50" hight="50" />
          <a href="#">How to Learn Web Development</a>
          <p>By Jonas Schmedtmann</p>
        </li>

        <li>
          <img src="img/related-2.jpg" alt="图片炸了" width="50" hight="50" />
          <a href="#">The Unknown Powers of CSS</a>
          <p>By Jim Dillon</p>
        </li>

        <li>
          <img src="img/related-3.jpg" alt="图片炸了" width="50" hight="50" />
          <a href="#">Why JavaScript is Awesome</a>
          <p>By Matilda</p>
        </li>
      </ul>
    </aside>
    <footer>Copyright &copy; 2027 by The Code Magazine.</footer>
  </body>
</html>