081296718180 mastrie90@gmail.com

KODING : HTML

May 2, 2025 | ELEKTRONIKA

HTML (Hyper Text Markup Language) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet, merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan, dan dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox, Microsoft Internet Explorer, Opera, Google Chrome, Safari dan lain-lain. HTML diciptakan oleh Tim Berners-Lee tahun 1991, kemudian lahir versi HTML2 tahun 1995 merupakan awal mula lahirnya website yang lebih interaktif dan terus berkembang hingga versi HTML5 tahun 2014 yang bisa menggabungkan HTML dengan bahasa pemrograman lainnya seperti CSS dan JavaScript.

HTML memiliki fungsi yang sangat signifikan dalam pembuatan atau pengembangan website, antara lain :

  • Membuat Halaman Website, menjadi lebih mudah dibaca dan dipahami
  • Fondasi sebuah Website, semua bahasa pemrograman bisa bekerja apabila mengoperasikan HTML terlebih dahulu.
  • Menampilkan Media pada Halaman Website, Media berupa gambar, video, tabel, dan sejenisnya harus dibuat menggunakan HTML agar terlihat lebih menarik
  • Menandai Bagian dalam Website, Beberapa bagian dalam website seperti header, footer, navigation, main page, dan sebagainya bisa ditandai secara mudah dengan bantuan HTML

Ada tiga komponen utama dalam HTML yang saling berkaitan satu sama lain sehingga menyusun sebuah halaman web, antara lain :

  • Tag, merupakan teks khusus untuk menandai suatu konten. Kode dalam tag menentukan tampilan konten berupa gambar, teks, atau video dalam aplikasi web. Strukturnya penulisannya ada 2, yaitu :
    • terdiri dari tag pembuka dan tag penutup dan diisi dengan konten di antara keduanya. contohnya : <tag_pembuka>konten website</tag_penutup>
    • self-closing tag dan ditulis dengan garis miring sebelum ditutup dengan tanda kurung siku. Contohnya : <embed/>, <img/>, <br/>.
  • Elemen, merupakan seluruh kode HTML yang dimulai dari tag pembuka sampai tag penutup, cara penulisannya, yang terdiri dari 3 bagian, yaitu :
    • Elemen Deklarasi, untuk menyatakan tipe dokumen dan versinya.
    • Elemen Head, untuk memberikan informasi atau mendeklarasikan dokumen
    • Elemen Body, untuk menentukan bagaimana isi suatu dokumen ditampilkan pada browser
  • Atribut, merupakan informasi tambahan pada elemen dan ditulis pada bagian tag pembuka, ditulis dengan rumus : nama_atribut=”value_atribut” dan bagian value atribut harus diapit dengan tanda petik ganda atau petik tunggal.

Setiap dokumen HTML memiliki struktur dasar yang perlu diikuti, yaitu :

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang di Website Saya</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>

Dari struktur dasar dokumen HTML diatas dapat dijelaskan sebagai berikut :

  • <!DOCTYPE html> : Ini memberi tahu browser bahwa dokumen ini menggunakan HTML5.
  • <html> : Elemen root dari dokumen HTML.
  • <head> : Bagian yang berisi informasi meta tentang dokumen, seperti judul dokumen.
  • <title> : Ini adalah judul halaman yang ditampilkan pada tab browser.
  • <body> : Bagian berisi konten yang akan ditampilkan di halaman web.

Untuk memulai koding HTML, perlu dipersiapkan toolsnya, antara lain :

Aturan dasar penulisan Tag HTML yang perlu diperhatikan ada tiga, yaitu :

  • Setiap Tag HTML Harus Memiliki Tanda Pembuka (<>) dan Tanda Penutup (</>) yang Sesuai dengan jenis tag yang digunakan. Beberapa tag HTML seperti <br> dan <img> tidak memerlukan tanda penutup karena mereka hanya menampilkan elemen tunggal di halaman web. Contoh :  <p>Ini adalah sebuah paragraf.</p> atau <img src=”gambar.jpg” alt=”Gambar”>
  • Setiap Tag HTML Harus Ditulis dalam Huruf Kecil.  untuk memudahkan pengembang web lainnya yang membaca kode dan juga memastikan konsistensi dalam penulisan tag. Contoh : <p>Ini adalah sebuah paragraf.</p> atau <img src=”gambar.jpg” alt=”Gambar”>
  • Setiap tag HTML harus memiliki nama tag yang benar, dan sesuai dengan standar HTML. Jangan menggunakan nama tag yang tidak valid atau tidak terdefinisi dalam standar HTML. Contoh :  <p>Ini adalah sebuah paragraf.</p> atau yang salah <!– Salah: <Paragraf>Ini adalah sebuah paragraf.</Paragraf> –>

Berikut adalah beberapa fungsi tag HTML yang paling umum digunakan, antara lain :

  • Tag Head, Digunakan untuk menyertakan informasi tentang dokumen HTML, seperti judul, deskripsi, dan meta data, contohnya :
    • <head>
          <meta charset=“UTF-8” />
          <meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
          <title>Web | Portofolio</title>
        </head>
  • Tag Body, Menentukan konten utama dari sebuah halaman web, seperti teks, gambar, audio, video, dan elemen lainnya. contohnya :
    • <body>
          <h1>Selamat Datang di Website Saya</h1>
          <p>Ini adalah paragraf pertama saya.</p>
      </body>
  • Tag Heading, Digunakan untuk menentukan judul dari sebuah halaman web atau bagian dari halaman web Ada enam tingkat heading, mulai dari <h1> (yang terbesar) hingga <h6> (yang terkecil). contohnya :
    • <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
  • Tag Paragraph, Digunakan untuk membuat paragraf teks, contohnya :
    • <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, aperiam dolora assumenda velit repellendus recusandae magni consectetur mollitia facere incidunt inventore perspiciatis debitis doloribus ullam minima culpa voluptatem. Repellendus option </p>
    • <p><strong>Teks ini tebal.</strong></p>
      <p><em>Teks ini miring.</em></p>
    • <p>Ini adalah baris pertama.<br>Ini adalah baris kedua.</p>
      <hr>
      <p>Ini adalah paragraf setelah garis horizontal.</p>
  • Tag Link, Digunakan untuk menautkan halaman web dengan halaman web lain atau dokumen. contohnya :
    • <a href=“https://www.dicoding.com”>Kunjungi Website</a>
    • <a href=“halaman-lain.html”>Halaman Lain</a>
    • <h2 id=“section1”>Bagian 1</h2>
      <p><a href=“#section1”>Pergi ke Bagian 1</a></p>
  • Tag Image, Digunakan untuk menampilkan gambar  atau multimedia di sebuah halaman web. contohnya :
    • <img src=“gambar.jpg” alt=“Deskripsi Gambar”>
    • <video src=“video.mp4” controls></video>
    • <audio src=“audio.mp3” controls></audio>
  • Tag List, Digunakan untuk membuat daftar berurutan maupun tidak berurutan, seperti daftar numerik, daftar alfabetis, atau daftar dengan simbol khusus serta deskripsi, contohnya :
    • <ul>
          <li>Item Pertama</li>
          <li>Item Kedua</li>
          <li>Item Ketiga</li>
      </ul>
    • <ol>
          <li>Item Pertama</li>
          <li>Item Kedua</li>
          <li>Item Ketiga</li>
      </ol>
    • <dl>
          <dt>HTML</dt>
          <dd>HyperText Markup Language</dd>
          <dt>CSS</dt>
          <dd>Cascading Style Sheets</dd>
      </dl>
  • Tag Table, Digunakan untuk membuat tabel di sebuah halaman web. contohnya :
    • <table>
          <tr>
              <th>Nama</th>
              <th>Usia</th>
          </tr>
          <tr>
              <td>John Doe</td>
              <td>30</td>
          </tr>
          <tr>
              <td>Jane Doe</td>
              <td>25</td>
          </tr>
      </table>
    • <table>
          <tr>
              <th colspan=“2”>Header Tabel</th>
          </tr>
          <tr>
              <td>Data 1</td>
              <td>Data 2</td>
          </tr>
          <tr>
              <td rowspan=“2”>Data Gabungan</td>
              <td>Data 3</td>
          </tr>
          <tr>
              <td>Data 4</td>
          </tr>
      </table>
  • Tag Form, Digunakan untuk membuat formulir yang dapat diisi pengguna untuk mengirimkan informasi ke server. contohnya :
    • <form action=“submit.php” method=“post”>
          <label for=“nama”>Nama:</label>
          <input type=“text” id=“nama” name=“nama”>
          <label for=“email”>Email:</label>
          <input type=“email” id=“email” name=“email”>
          <label for=“pesan”>Pesan:</label>
          <textarea id=“pesan” name=“pesan”></textarea>
          <button type=“submit”>Kirim</button>
      </form>
    • <form>
          <label for=“gender”>Gender:</label>
          <input type=“radio” id=“male” name=“gender” value=“male”> Male
          <input type=“radio” id=“female” name=“gender” value=“female”> Female
          <br>
          <label for=“hobbies”>Hobbies:</label>
          <input type=“checkbox” id=“sports” name=“hobbies” value=“sports”> Sports
          <input type=“checkbox” id=“music” name=“hobbies” value=“music”> Music
          <br>
          <label for=“country”>Country:</label>
          <select id=“country” name=“country”>
              <option value=“indonesia”>Indonesia</option>
              <option value=“usa”>USA</option>
          </select>
      </form>
  • Tag Script, Digunakan untuk menambahkan kode JavaScript atau skrip lainnya ke halaman web. contohnya :
    • <head>
          <style>
              p { color: blue; }
          </style>
      </head>
    • <BODY>
              <SCRIPTLANGUAGE=”Javascript”>
              console.log(“penulisan JS”)
              </SCRIPT>
              <h1>Penulisan JS</h1>
          </BODY>

Berikut adalah beberapa elemen semantik yang penting pada HTML5, antara lain :

  • Tag <header>: Bagian pembuka atau pengantar dari sebuah halaman atau bagian dokumen. Biasanya digunakan untuk menampung judul, logo, atau navigasi utama, contohnya : 
    • <header>
  <h1>Judul Situs</h1>
  <nav>
    <a href="#">Beranda</a> | <a href="#">Kontak</a>
  </nav>
</header>
  • Tag <nav>: Bagian yang berisi tautan navigasi utama. Dapat digunakan untuk menyusun menu navigasi utama atau sekunder, contohnya :
    • <nav>
                <ul>
                  <li><a href=“”>About</a></li>
                  <li><a href=“”>Portofolio</a></li>
                  <li><a href=“”>Blog</a></li>
                  <li><a href=“”>Contact</a></li>
                </ul>
         </nav>
  • Tag <main>: Bagian utama dari konten halaman. Hanya ada satu elemen <main> dalam satu halaman, yang berisi konten utama. contohnya :
    • <main class=“content”>
              <section class=“hero”>
                <img src=“online.png” alt=“” />
                <div class=“hero-content”>
                  <h1>Profesi</h1>
                  <br />
                  <h2>Junior Content Writer at Dicoding</h2>
                  <br /><br />
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, aperiam dolore
                    assumenda velit repellendus recusandae magni consectetur mollitia facere incidunt
                    inventore perspiciatis debitis doloribus ullam minima culpa voluptatem. Repellendus,
                    option.
                  </p>
                  <a href=“” class=“action-btn”>Profile Saya</a>
                </div>
              </section>
         </main>
  • Tag <article>: Bagian yang mandiri dan terpisah dari konten lainnya, seperti artikel berita atau posting blog. Cocok untuk konten yang bisa berdiri sendiri dan dibagikan secara terpisah. contohnya : 
    • <article>
    <h2>Judul Artikel</h2>
    <p>Isi artikel...</p>
</article>
  • Tag <section>: Bagian dari dokumen yang mengelompokkan konten terkait. Ini digunakan untuk mengelompokkan konten dengan tema yang sama. contohnya : 
    • <section>
  <h3>Sub Bagian</h3>
  <p>Deskripsi sub bagian...</p>
</section>
  • Tag <aside>: Bagian yang berisi informasi tambahan atau catatan samping. Ini biasanya digunakan untuk sidebar, iklan, atau informasi terkait yang tidak termasuk bagian utama dari konten. contohnya : 
    • <aside>
  <h3>Artikel Terkait :</h3>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul> 
</aside>
  • Tag <footer>: Bagian penutup dari dokumen atau bagian dokumen. Biasanya berisi informasi kontak, hak cipta, atau tautan ke halaman penting. contohnya :
    • <footer>
                <ul>
                  <li>
                    <img src=“instagram.png” alt=“” /><a><p>Instagram</p></a>
                  </li>
                  <li>
                    <img src=“facebook.png” alt=“” /><a><p>Facebook</p></a>
                  </li>
                  <li>
                    <img src=“twitter.png” alt=“” /><a><p>Twitter</p></a>
                  </li>
                  <li>
                    <img src=“telegram.png” alt=“” /><a><p>Telegram</p></a>
                  </li>
                </ul>
         </footer>

 

AKSI NYATA

  • Membuat website pribadi
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mastrie</title>
</head>
<body>
    <nav>
        <a href="index.html">Home</a> |
        <a href="https://www.trie.my.id/">Wordpress</a> |
        <a href="https://triemyid.blogspot.com/">Blogspot</a> |
    </nav>
    <hr />
    <header style="text-align: center;">
        <img src="image/foto-profile.jpg" width="200" height="200" style="border-radius: 50%;"/>
        <h1>YUNIARTO TRIADI</h1>
        <p>Making History</p>
    </header>
    <hr />
    <article style="text-align: center;">
        <h2>SAMBUTAN</h2>
        <p>
            Hi, saya adalah Pengajar yang berdomisili di Bogor.
            Saat ini sedang Mengajar di SMANCIGO
        </p>
    </article>
    <div style="max-width: 600px; margin: 3em auto">
        <table border="1" width="100%">
            <thead>
                <tr>
                    <th>Skill</th>
                    <th>Pengalaman</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <ul>
                            <li>Elektronika</li>
                            <li>PKWU</li>
                            <li>Life Skills</li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li>Pengajar di SMKN 2 Bogor</li>
                            <li>Pengajar di SMAN 1 Cigombong</li>
                            <li>Pembimbing di Comunity College</li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <hr>
    <footer style="text-align: center;">
        <p>Copyright &copy; 2025 Yuniarto Triadi.</p>
    </footer>
</body>
</html> LAMPIRAN : FILE PENDUKUNG

Submit a Comment

Your email address will not be published. Required fields are marked *