Campus Life · Lingustik · Tekno

Inilah Pengertian dan Struktur Dasar HTML (+ Fungsi dan Cara Kerja HTML) [Part 2]

13 Feb 2023 0

Assalamu‘alaikum wr. wb.

Halo gais! Jika sebelumnya pernah membahas tentang Input Type dalam HTML, sekarang kita akan membahas tentang Dasar-sasar pada HTML agar kita bisa membuat Website. Dasar-dasarnya dalam HTML yaitu seperti Struktur-struktur seperti <head> dan <body>. Mari kita bahas pada Artikel ini sampai tuntas.

Ilustrasi Struktur Dasar HTML

Sumber Artikel Materi : Futurelearn.com, Hostinger.co.id, Aderoni.com, dan ITkoding.com

A. Pengertian HTML

HTML adalah singkatan dari Hypertext Markup Language, bahasa markup yang digunakan untuk membuat struktur halaman web. HTML adalah bahasa standar untuk mendesain tata letak situs web. HTML tidak bisa disebut bahasa pemrograman karena tidak mengandung logika. HTML hanya digunakan untuk mengatur tampilan halaman agar sesuai dengan spesifikasi dan dapat dibuka di browser.

Peran utama HTML adalah membuat halaman website lebih mudah dibaca dan dipahami. Oleh karena itu, terdapat berbagai tag yang dapat digunakan untuk membentuk teks, seperti heading, title, paragraf, maupun link.

Berkat perkembangannya, HTML juga memiliki banyak fitur canggih. Juga, HTML tidak terlalu sulit jika programmer yang tidak berpengalaman mempelajarinya. Anda hanya perlu memahami komponen dasar HTML, yaitu elemen, tag, dan atribut. Jika elemennya adalah semua teks dalam HTML, ini adalah tag pesan dari perintah atau tag dan deskripsi dari tag atau atribut perintah.

B. Sejarah HTML

Foto Berners-Lee

Kita patut berterima kasih kepada Tim Berners-Lee yang mengembangkan HTML pada tahun 1991. HTML yang semula digunakan hanya untuk kepentingan penelitiannya sebagai solusi untuk memudahkan peneliti mengakses dokumen orang lain, kini dapat digunakan oleh siapa saja untuk tujuan yang berbeda.

Selama perjalanannya, HTML berkembang cukup pesat di dunia Internet. Seperti apa perkembangannya? Simak Timeline perjalanan HTML berikut :

Tahun	Versi	Perkembangan HTML

1991	HTML1	Memudahkan ilmuwan mengakses dokumen yang ada di berbagai komputer.
1995	HTML2	Mampu menampilkan data dan form yang dapat diedit secara langsung. Versi ini merupakan cikal bakal lahirnya website interaktif.
1997	HTML3	Menambahkan fitur figure untuk mendukung tampilan image.
1998-1999	HTML 4.0	Menambahkan perintah dasar HTML, yaitu image, tabel, text, link, dan form.
1999-2000	HTML 4.1	Telah dipublikasi secara internasional dan dapat dipakai oleh browser apapun.
2014	HTML5	Membuat prosedur tampilan dengan menggabungkan CSS, HTML, dan Javascript. Versi ini menjadi versi terbaik karena telah dilengkapi fitur canggih yang lengkap, seperti embed video dan audio.

C. Struktur Dasar HTML

Saat menulis dokumen HTML, standar yang ditetapkan oleh W3C (World Wide Web Consortium) harus diikuti agar halaman web yang kita buat ditampilkan di browser web seperti yang kita harapkan.

Sebagai perbandingan, Website mirip dengan file dokumen yang ada seperti Koran, Majalah, atau Buku. Isinya mirip dengan dokumen yang kita baca setiap hari. Majalah tersebut memiliki judul, menampilkan gambar dan teks dalam bentuk Paragraf. Terkadang ketika kontennya panjang, itu dibagi menjadi beberapa bagian dengan subtitle.

Judul dan Subjudul dokumen menggambarkan hierarki informasi. Misalnya, judul besar adalah judul utama konten. Ini diikuti oleh judul kecil yang menjelaskan informasi lebih terinci.

Seperti inilah Struktur Dasar pada HTML :

<!DOCTYPE html>
<html>
    <head>
    <title>Judul Halaman</title>
    </head>
    <body>
        <h1>Heading Utama</h1>
        <p>Sebuah Paragraf</p>
    </body>
</html>

Kita dapat melihat bahwa struktur dasar HTML ditulis dari beberapa elemen. Setiap elemen HTML berisi dua tag, yaitu pembuka tag <> dan penutup tag </> . Lihat gambar berikut untuk informasi lebih lanjut.

Konten dapat ditempatkan di antara tag pembuka dan penutup elemen. Konten dapat berupa teks atau elemen HTML lainnya. Misalnya, elemen memiliki konten, jadi elemen <head> dan <body>. Kemudian elemen memiliki konten berupa elemen dimana memiliki konten berupa teks judul halaman untuk ditampilkan. Sama dengan elemen lainnya, itulah mengapa hierarki elemen HTML terlihat seperti ini.

1. Tag HTML

Tag HTML adalah awalan dan akhiran dalam perintah HTML yang dibaca oleh Web Browser. Tag HTML dibangun menggunakan Kurung Siku (<>), di mana di dalamnya berisi nama tag.

Setiap tag HTML memiliki fungsi perintah yang berbeda-beda. Mulai dari membuat judul, paragraf, heading, cetak tebal (bold), miring, italic, dan lainnya. Misalnya <h1>. Tag tersebut akan meminta browser untuk membuat bagian heading pada artikel .

Selain itu tag ditulis berpasangan yaitu tag pembuka dan tag penutup. Pada tag penutup, tambahkan garis miring (/) sebelum nama tag. Awalnya, hanya ada 18 tag HTML, namun sejauh ini lebih dari 250 tag dapat digunakan dalam file HTML. Namun, Anda tidak harus menghafal semua tag yang ada. Anda hanya perlu mengingat beberapa tag dasar :

Tag	Deskripsi
<!DOCTYPE>	Deklarasi untuk menunjukkan tipe dokumen; itu membantu browser web untuk menampilkan halaman web dengan benar.
<title> </title>	Menentukan judul halaman web, untuk ditampilkan pada tab browser web.
<html> </html>	Menunjukkan awal dan akhir dari file HTML.
<head> </head>	Memberikan informasi tentang File (Metadata) yang mencakup tampilan deskripsi di hasil pada Mesin Pencarian, Style Konten (CSS), dan lainnya.
<body> </body>	Mendefinisikan tubuh utama; semua yang ada di dalam tag tubuh muncul di halaman web.
<h1> </h1> :::::::::: <h6> </h6>	Mendefinisikan heading; Tag <h1> hingga <h6> digunakan untuk heading dengan ukuran berbeda, dengan <h1> terbesar dan <h6> terkecil.
<p> </p>	Mendefinisikan sebuah Paragraf.

Untuk lebih jelasnya, Anda dapat mempelajari referensi tentang tag HTML secara lengkap di HTML Element Reference (W3schools.com).

a. Tag <html>

Hierarki elemen teratas dalam file HTML adalah elemen HTML itu sendiri. Elemen ini digunakan untuk memberi tahu browser bahwa ini adalah file HTML dan ini adalah direktori root dari file ini. Semua elemen lainnya tentu saja tertulis dalam konten elemen ini.

b. Tag <head>

Tag <head> pada berkas HTML berfungsi sebagai lokasi penyimpanan untuk informasi dari dokumen HTML. Informasi dapat berupa elemen meta, style, atau link. Dan juga dalam elemen ini judul dokumen HTML didefinisikan dengan menggunakan tag <title>. Berikut adalah contoh elemen yang terletak di konten head :

<title>
<style>
<base>
<link>
<meta>
<script>
<noscript>

Pada HTML Versi 4.01, tag <head> wajib ada dalam sebuah berkas HTML. Berikut contoh penulisan sebuah elemen <head> beserta contoh konten di dalamnya :

<head>
    <meta charset="utf-8">
    <title>Judul Halaman</title>
    <style> Style </style>
</head>

Tetapi sejak HTML5, penggunaan dapat dihilangkan. Sehingga struktur dasar berkas HTML menjadi seperti ini :

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>Judul Halaman</title>
    <style> Style </style>
    <body>
        <h1>Heading Utama</h1>
        <p>Sebuah Paragraf</p>
    </body>
</html>

c. Tag <body>

Semua konten yang terdapat dalam elemen ini akan ditampilkan di halaman website. Oleh karena itu elemen ini digunakan untuk menampung konten atau elemen apa pun yang terlihat di jendela browser. Coba tulis kode berikut, simpan sebagai HTML dan jalankan di browser :

<html>
    <head>
        <title>Ini merupakan judul dari dokumen HTML</title>
    </head>
    <body>
        <h1>Hader yang diletakan di dalam elemen body</h1>
        <p>Ini merupakan sebuah paragraph yang juga diletakan pada sebuah konten body, sehingga konten ini dapat dilihat oleh pengguna pada jendela browser.</p>
    </body>
</html>

Kemudian semua konten yang ada di bagian tag <body> muncul di browser.

Kecuali kita ingin menulis catatan di file HTML, kita harus menggunakan tag komentar (). Apa pun yang ditulis di antara tag komentar tidak berpengaruh, termasuk bagaimana jendela browser ditampilkan. Tag komentar ditulis dalam HTML seperti ini :

<!-- Ini merupakan sebuah Komentar -->
<!-- Ini merupakan
  sebuah komentar yang
  terdiri lebih dari satu baris -->

Sebuah komentar berguna untuk memberikan label dan mengorganisir sebuah dokumen yang panjang, terlebih ketika kita bekerja secara tim.

2. Elemen HTML

Elemen adalah Komponen HTML yang menampilkan semua kode dari tag pembuka hingga tag penutup. Elemen terdiri dari teks dan simbol yang mewakili isi tag pembuka, tag atau isi, dan tag penutup.

Contohnya :

<bold>Belajar HTML</bold>

Sebuah elemen juga dapat berisi elemen lain. Oleh karena itu, sebuah elemen tidak hanya berisi satu tag, tetapi beberapa tag. Elemen-elemen ini disebut elemen bersarang (nested elements). Misalnya, pertimbangkan kode berikut :

<html>
<body> 
<h2>Judul Heading</h2>
<p>Paragraf pertama artikel</p> 
</body> 
</html>

Jika diperhatikan elemen HTML ini, mulai dari tag pembuka hingga tag yang berisi elemen tag judul dan elemen tag paragraf.

3. Atribut HTML

Sumber : ITkoding.com

Atribut adalah informasi tambahan atau perintah yang terkandung dalam elemen. Atribut ini berfungsi sebagai deskripsi dari perintah label elemen.

Misalnya :

<img src="gambar.jpg" alt="Gedung Sekolah">

Tag memiliki atribut khusus yaitu (src) dan (alt) yang artinya browser harus menampilkan gambar.jpg dengan alt text "Gedung Sekolah".

Nama Atribut	Digunakan Pada Tag
src	<img>, <embed>, <audio>, <iframe>
href	<a>, <link>
action	<form>
autoplay	<audio>, <video>

Contohnya adalah :

<head>
    <meta charset="UTF-8" />
    <link href="css/style.css" rel="stylesheet" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Black Goose Distro</title>
</head>

D. Kelebihan dan Kekurangan HTML

Sama seperti hal teknis lainnya dalam dunia web, bahasa markup ini juga punya kelebihan dan kekurangannya.

Kelebihan HTML :

Bahasa yang digunakan secara luas dan memiliki banyak sumber serta komunitas yang besar.
Dijalankan secara alami di setiap web browser.
Memiliki learning curve yang mudah.
Open-source dan sepenuhnya gratis.
Bahasa markup yang rapi dan konsisten.
Standard web yang resmi di-maintain oleh World Wide Web Consortium (W3C).
Mudah diintegrasikan dengan bahasa backend, seperti PHP dan Node.js.

Kekurangan HTML :

Umumnya digunakan untuk halaman web statis. Untuk fitur dinamis, Anda bisa menggunakan JavaScript atau bahasa backend, seperti PHP.
HTML tidak memungkinkan user untuk menjalankan logic. Alhasil, semua halaman web harus dibuat terpisah meskipun menggunakan elemen yang sama, seperti header dan footer.
Fitur-fitur baru tidak bisa digunakan secara cepat di sebagian browser.
Terkadang perilaku browser susah untuk diprediksi (Misalnya, browser lama tidak selalu bisa render tag yang lebih baru).

E. Hubungan antara HTML, CSS, dan JavaScript

Meskipun diklaim sebagai bahasa markup yang canggih dan sederhana, HTML tidak cukup mampu membuat situs web yang profesional dan responsif. Bahasa ini hanya dapat digunakan untuk menambahkan elemen dan menyusun konten.

Namun di satu sisi, bahasa ini bisa bekerja secara maksimal dengan dua bahasa frontend, yaitu CSS (Cascading Style Sheets) dan JavaScript. Jika digabungkan, kedua bahasa frontend ini bisa meningkatkan pengalaman user dan menyediakan fungsionalitas yang lebih kompleks.

CSS erat kaitannya dengan styling, seperti background, warna, layout, spacing, dan animiasi.
JavaScript memungkinkan Anda menambahkan fungsionalitas yang dinamis, seperti slider, pop-up, dan galeri foto.

Sebagai ilustrasi, berikut adalah perbedaan antara HTML dan CSS dan JavaScript. HTML adalah orang tanpa pakaian, lalu CSS adalah pakaian, lalu JavaScript adalah tindakan dan sikap seseorang.

Misalkan kita memiliki Struktur Direktori seperti berikut untuk memulai dalam meletakan File/Folder :

📁 nama_website_project
├── index.html
├── 📁 images
├── 📁 css
   ├── style.css
├── 📁 js
   ├── script.js

Atau lebih jelasnya seperti ini :

Bahkan, Artikel di Blog ini saja juga ditulis dengan menggunakan HTML. Jadi, HTML sangatlah penting dalam Pemrograman Web. Untuk melihat Postingan Artikel sebelumnya tentang Tipe Input Dasar dalam HTML (HTML Input Types), silakan lihat di sini.

Semoga saja Artikel ini sangat bermanfaat bagi para IT dan Programmer Pemula.

Terima Kasih 😄😘👌👍 :)

Wassalamu‘alaikum wr. wb.

Campus Life Lingustik Tekno

Join the conversation

Inilah Pengertian dan Struktur Dasar HTML (+ Fungsi dan Cara Kerja HTML) [Part 2]

A. Pengertian HTML

B. Sejarah HTML

C. Struktur Dasar HTML

D. Kelebihan dan Kekurangan HTML

E. Hubungan antara HTML, CSS, dan JavaScript

Keep reading

Apa itu OpenCode? Open Source AI Coding Agent Secara Gratis (Beserta dengan Tutorial Penggunaannya)

Program Deret Bilangan Ganjil-Genap dengan JavaScript dan HTML (Input Type)

Program Deret Bilangan Ganjil-Genap dengan PHP dan HTML (Input Type)