Membuat Aplikasi #3: Kita mulai dari HTML - MZAINI30

Sabtu, 18 April 2020

Membuat Aplikasi #3: Kita mulai dari HTML

Untuk membuat desain website (yang nantinya kita jadikan aplikasi), dimulai dari HTML. Apa sih HTML itu? HTML yang merupakan singkatan dari hypertext markup language adalah bahasa markup yang digunakan sebagai kerangka dari suatu website. Jadi, kita buat file yang memiliki ekstensi html, contohnya aja index.html yang isinya:

<!DOCTYPE html>
<html>
<head>
  <title>Hello HTML</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>

</body>
</html>


Itu adalah contoh dari HTML kosongan yang akan menjadi dasar bagi membuat website berikutnya. Kita lihat sintaks dimulai dari doctype html yang artinya kita menggunakan HTML versi 5 (versi terbaru saat ini). Lalu ada tag html (pembuka dan penutup) yang menandakan bahwa ini adalah file HTML. Kemudian, head untuk informasi tentang halaman HTML ini, misalnya aja judul halaman dan include style. Nah, kita lihat di HTML ini, bahwa kita menggunakan title Hello HTML, lalu menggunakan charset UTF-8, kemudian kita atur viewportnya untuk versi mobile.

Lalu, semua isinya berada di dalam tag body. Misalnya saja seperti di bawah ini:

<!DOCTYPE html>
<html>
<head>
  <title>Hello HTML</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
  <h1>Hello world</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <ol>
    <li>lorem</li>
    <li>ipsum</li>
    <li>dolor</li>
    <li>sit</li>
    <li>amet</li>
  </ol>
</body>
</html>


Hasilnya seperti ini:


Dan sekarang, kita coba buat tabel. Nah, kode HTMLnya kita buat seperti di bawah ini:

<!DOCTYPE html>
<html>
<head>
  <title>Hello HTML</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
  <table border="1">
    <tbody>
      <tr>
        <td colspan="2">
          <h1>Hello world</h1>
        </td>
      </tr>
      <tr>
        <td>
          <h2>Ini adalah judul blog</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </td>
        <td>
          <p>Menu</p>
          <ul>
            <li>Judul pertama</li>
            <li>Judul kedua</li>
            <li>Judul ketiga</li>
          </ul>
        </td>
      </tr>
      <tr>
        <td colspan="2">Copyright oleh Zen</td>
      </tr>
    </tbody>
  </table>
</body>
</html>


Maka, hasilnya seperti ini:


Share with your friends

Maskot Pelarang Adblock

Hallo Kak, Perkenalkan saya Zen. Untuk bisa mengakses situs kami, terlebih dahulu matikan atau non-aktifkan ekstensi AdBlock nya yaaa...

Ok , Saya Mengerti