Latihan Basic HTML dengan membuat Web sederhana

pada tanggal

 TARGET ( Hasil Akhir)



Clue untuk Membuat Web diatas :




Tutorial Step by Step :

1. Buka VSCode kemudian buka folder tempat kalian membuat project. ( File>>Open Folder)


2. Membuat File html: Index.html (Ikon New File>>Ketik Index.html)


3. Membuat auto struktur HTML (Ketik Tanda "!">>Tab)

   
Hasilnya    

4. Membuat bagian pertama (Menggunakan <h1> ; <p> ; <a href>)

    <h1>📘 The Code Magazine</h1>
    <p>
      <a href="https://google.com/">Blog Challenges Flexbox CSS Grid</a>
    </p>
    <h1>The Basic Language of the Web: HTML</h1>

Hasilnya

5. Membuat bagian kedua yaitu gambar+keterangan (Menggunakan <img> dan <p>)

    <img
    src="img/laura-jones.jpg"
    alt="Headshot of Laura Jones"
    height="65"
    width="65"/>
  <p>Posted by Laura Jones on Monday, June 21st 2027</p>
Hasilnya

6. Menambahkan gambar kedua dan menyesuaikan ukurannya (Menggunakan <img>)

    <img
      src="img/post-img.jpg"
      alt="Gambar Coding 1"
      height="200"
      width="500"
    />
Hasilnya

7. Menambahkan beberapa keterangan (Menggunakan <h> dan <p>)

Hasilnya

8. Menambahkan daftar bernomor+Hyperlinks (Menggunakan <p> ; <ol> ; <li> ; <a href>)

    <ol>
      <li>The Opening Tag</li>
      <li>The Closing Tag</li>
      <li>The Actual Element</li>
    </ol>

    <p>
      You can learn more at
      <a href="https://developer.mozilla.org/en-US/">MDN Web Docs</a>
    </p>
Hasilnya


9. Menambahkan daftar berbulir (Menggunakan <ol> ; <ul>)

   
      <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 the fundamental web dev language</li>
        <li>To hand-craft beautiful websites instead of relying on tools like
        Wordpress or Wix</li> 
      <li>To build web applications</li>
      <li>To impress friends</li>
      <li>To have fun😃</li>
    </ul>
Hasilnya

10. Menambahkan Gambar+Hyperlinks serta daftar berbulir (Menggunakan <img> ; <a href> ; <p> ; <ul> ; <li>)

  <ul>
    <li><img src="img/related-1.jpg" alt="Related1" height="100" width="100" />
    <a href="https://www.google.com/">How to Learn Web Development</a></p>
    <p>By Jonas Schmedtmann</p></li>

    <li><img src="img/related-2.jpg" alt="Related1" height="100" width="100" />
    <a href="https://www.google.com/">The Unknown powers of CSS</a></p>
    <p>By Jim Dillon</p></li>

    <li><img src="img/related-3.jpg" alt="Related1" height="100" width="100" />
    <a href="https://www.google.com/">Why JavaScript is Awesome</a></p>
    <p>By Matilda</p></li>
   
  </ul>
  <p>Copyright © 2027 by The Code Magazine.</p>
Hasilnya






Komentar

Posting Komentar