news image
news June 2, 2023

Mengenal HTML: Bahasa Markup Populer untuk Membuat Halaman Web 

HTML adalah bahasa markup yang digunakan untuk membuat halaman website. Bahasa markup sendiri bahasa yang digunakan untuk menentukan struktur dan format konten pada halaman web. Hampir semua situs web di dunia menggunakan HTML untuk membuat halaman web. Melalui artikel ini kita akan membahas apa itu HTML, cara kerjanya, dan kelebihan HTML.

 

Apa itu HTML?

HTML merupakan singkatan dari HyperText Markup Language, bahasa markup dasar berbasis teks yang digunakan untuk membuat struktur dokumen dan menambahkan konten ke dalam halaman web dengan menggunakan kode markup dan tag.

 

HTML merupakan bahasa dasar yang digunakan untuk membuat sebuah halaman web secara umum. Dalam HTML, dokumen disusun dalam bentuk hierarki, dimana setiap elemen atau tag memiliki fungsi dan perannya masing-masing dalam menentukan struktur halaman web.

 

Sebagai contoh, tag <html> menunjukkan awal dari dokumen HTML, sedangkan tag <head> dan <body> digunakan untuk menentukan bagian kepala dan isi dokumen. Sedangkan untuk mengakhiri sebuah tag dan dokumen HTML digunakan simbol garis miring. Misalnya seperti </head> dan </html>.

 

Kelebihan HTML

Bukan tanpa alasan kenapa HTML bisa menjadi bahasa markup paling populer. Berikut ini adalah beberapa kelebihan HTML sebagai bahasa markup untuk pembuatan halaman website.

 

  1. Mudah dipahami

    Struktur HTML dapat dengan mudah dipahami bahkan oleh pemula karena memiliki struktur kode markup yang sederhana dan dapat dengan mudah dibaca. Selain itu, bahasa ini juga merupakan bahasa markup yang paling mudah dipelajari.

     

  2. Open-source

    HTML adalah bahasa open source dan gratis untuk digunakan. Jika kamu ingin menggunakan HTML kamu juga tidak membutuhkan lisensi atau biaya penggunaan.

     

  3. Stabil

    HTML telah bertahun-tahun dikembangkan sejak awal munculnya pada tahun 1991. Selanjutnya HTML rutin mendapatkan update yang berisi pembaruan yang menambah kestabilan dan fungsi dari HTML.

     

  4. Kompatibilitas lintas perangkat platform

    HTML mendukung kompatibilitas lintas platform dan mendukung website responsif, artinya halaman web yang dibuat menggunakan HTML dapat diakses dan ditampilkan dengan baik di berbagai perangkat dan platform yang berbeda.

     

  5. Support teknologi lain

    Penggunaan HTML biasanya digabung CSS dan JavaScript untuk menambah kapabilitas dan kemampuan HTML. Memungkinkan pembuatan halaman web yang lebih interaktif dan menarik.

     

  6. SEO-friendly

    Struktur komponen HTML memungkinkan mesin pencari untuk dengan mudah memahami isi halaman website, sehingga dapat meningkatkan peringkat halaman web pada hasil pencarian mesin pencari.

 

Komponen HTML

HTML disusun berdasarkan hierarki dan diatur berdasarkan sintaks yang masing-masing akan menentukan konten apa yang akan ditampilkan pada halaman web. Terdapat beberapa komponen dalam HTML yang memiliki fungsi berbeda.

 

  1. Tag

    Tag merupakan elemen dasar dalam HTML. Setiap tag diawali dengan tanda kurung sudut "<" dan diakhiri dengan tanda ">". Terdapat dua jenis tag yaitu tag pembuka dan tag penutup. Tag pembuka ditandai dengan tanda "<" dan diakhiri dengan tanda ">". Sedangkan tag penutup ditandai dengan tanda "</" dan diakhiri dengan tanda ">". Beberapa tag dalam HTML yang sering digunakan antara lain <html>, <head>, <title>, <body>, <h1>, <p>, dan <img>. 

    Contoh: 
    <html>...</html> - Untuk menunjukkan pembuka HTML.
    <head>...</head> - Tempat metadata dan penampung elemen HTML yang lain.
    <title>...</title> - Menunjukkan judul dari halaman web.
    <body>...</body> - Menunjukkan isi halaman web.
    <h1>...</h1> - Menunjukkan heading.
    <p>...</p> - Menunjukkan paragraf
    <img>...</img> - Menunjukkan gambar

     

  2. Atribut

    Atribut memberikan informasi penjelas atau informasi tambahan tentang tag tertentu. Atribut terdiri dari dua bagian yaitu nama atribut dan nilai atribut. Nama atribut ditulis di dalam tag dan diikuti dengan tanda "=" dan nilai atribut diapit oleh tanda kutip dua. 

    Contoh: 
    <img src="logobiznetgio.jpg" alt="Logo Biznet Gio" width="500" height="500"> 
    <a href="https://www.biznetgio.com/">Website Biznet Gio</a>

     

  3. Konten

    Konten merupakan isi yang ingin ditunjukkan dari suatu tag. Misalnya ketika menggunakan tag H1 maka selanjutnya akan dilanjutkan dengan judul yang diinginkan. Konten ini dapat berupa teks, gambar, video, atau tag lainnya.

    Contoh:
    <h1>Mengenal HTML</h1>
    <p>HTML merupakan bahasa markup.</p>

     

  4. Komentar

    Komentar bersifat internal dan digunakan untuk menunjukkan keterangan tambahan pada kode HTML. Karena bersifat internal, HTML tidak akan dimunculkan pada halaman web dan hanya berfungsi sebagai pengingat untuk si penulis.

    Contoh:
    <!-- Ini adalah komentar -->

     

  5. Meta Tag

    Meta tag merupakan metadata yang digunakan untuk memberikan informasi tambahan tentang halaman web seperti deskripsi halaman, kata kunci, dan encoding karakter. Meta tag berisi data yang akan mempermudah mesin pencari untuk mengenali isi halaman web. Hal ini menyebabkan tag ini menjadi tag yang penting jika seandainya kamu berniat menerapkan SEO pada halaman web.

    Contoh:
    <meta charset="UTF-8">
    <meta name="description" content="Mengenal bahasa markup HTML">
    <meta name="keywords" content="HTML adalah">
    <meta name="author" content="Biznet Gio">

     

  6. Tautan

    Tautan atau hyperlink digunakan untuk menghubungkan halaman web dengan halaman web lainnya atau ke dalam bagian yang berbeda di halaman yang sama. 
     
    Contoh:
    <a href="https://www.biznetgio.com/">Biznet Gio</a>

     

  7. Formulir

    Form atau formulir merupakan komponen HTML yang digunakan untuk mengumpulkan data dari pengguna melalui halaman website.

    Contoh:
    <form action="/proses.php" method="post">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="Submit">
    </form>

     

  8. Gambar dan video

    Terakhir merupakan komponen untuk menambahkan gambar dan video yang digunakan untuk menampilkan gambar dan video pada halaman website.

    Contoh:
    <img src="gambar.jpg" alt="Gambar deskripsi" width="500" height="300">
    <video width="320" height="240" controls>
    <source src="biznetgio.mp4" type="video/mp4">
    </video>

 

Yuk Belajar HTML!

Sekian artikel kali ini mengenai HTML. HTML merupakan bahasa markup yang mudah dipelajari dan dipahami. Jika kamu tertarik mempelajari HTML, kamu bisa langsung mempraktikkannya dengan menggunakan platform web-based text editor dari Biznet Gio yaitu NEO Code.

 

NEO Code merupakan code editor berbasis web yang dapat digunakan secara gratis. Dengan menggunakan NEO Code kamu bisa dengan mudah menulis kode di perangkat apapun, baik desktop, tablet, maupun mobile melalui web browser. Code editor ini dapat digunakan untuk membuat dan mengedit kode berbagai bahasa pemrograman populer, seperti JavaScript, Python, PHP, C#, TypeScript, HTML, dan CSS.

 

Platform web-based code editor NEO Code dapat kamu gunakan secara GRATIS melalui BGN Lab. Daftar sekarang juga melalui Portal BGNLab dan kamu juga akan langsung mendapatkan gratis storage 2 GB. Temukan juga layanan menarik lainnya dari BGN Lab. Platform layanan eksperimental dari Biznet Gio yang bisa kamu gunakan secara GRATIS. Segera kunjungi BGN Lab. Untuk informasi lebih lanjut mengenai BGN Lab kamu bisa menghubungi kami melalui email ke support@biznetgio.com.