Dalam artikel ini kita akan belajar Pengenalan dasar HTML, mulai dari definisi,struktur, beserta cara membuat file dokumennya. Dalam pemrograman, HTML biasanya diperkuat oleh bahasa lain yaitu CSS dan JavaScript. Hubungan dari ketiga istilah ini akan saya bahas pada bagian bawah. HTML merupakan ilmu yang wajib dikuasai apabila ingin menjadi programmer web. Dengan memahami HTML sendiri dapat membantumu membangun suatu web di internet.
Definisi HTML
HTML adalah singkatan dari Hypertext Markup Language. Pengertian HTML sering kali dikaitkan dengan bahasa pemrograman. Akan tetapi, sejatinya, HTML bukan sebuah bahasa pemrograman (programming languange), melainkan sebuah bahasa markup untuk membuat halaman web. Penanda atau markup ini, nanti akan kita sebut dengan Tag. HTML berperan untuk menentukan struktur konten dan tampilan dari sebuah web. Jadi jika mengacu dari singkatan HTML sendiri maka Html “Language” atau bahasa. Jadi saya akan bedah satu persatu mengenai pengertian HTML sendiri jika mengacu dari singkatan HTML (Hypertext Markup Language). Seperti yang kita tahu “Language” dalam arti indonesia nya adalah bahasa. lalu bagaimana dengan Hypertext dan Markup ? Simak penjelasan berikut ini.
Hypertext dalam HTML
Hypertext mengacu pada link yang muncul dalam sebuah web. Misalnya, saat membuka situs web, anda akan menemukan hyperlink menuju halaman (dokumen HTML) lain, yaitu halaman artikel-artikel yang ada.Nah, “Markup Languange” mengacu pada tanda-tanda (mark) yang ditulis oleh programmer untuk membuat tampilan website. Aplikasi browser-mu yang akan menerjemahkan tanda-tanda dalam bahasa HTML ke tampilan situs seperti layaknya kamu membuka suatu website. Penjelasan ini mencerminkan arti dari “Hypertext Markup Languange” itu sendiri.
Tanda Markup dalam HTML
Tanda (Markup) dalam HTML adalah simbol berupa kurung siku (<>) yang memiliki pasangan. Pasangan ini adalah tanda awal dan tanda akhir. Tanda awal merupakan kurung siku saja (<kode tanda>) dan tanda akhir merupakan kurung siku dengan garis miring (</kode tanda>). Teks yang berada di tengah-tengah kedua pasangan tanda-lah yang akan menjadi objek tujuan dari tanda tersebut. Kalau diibaratkan, jika seorang penulis menulis menggunakan tanda dengan huruf A hingga Z serta angka, maka programmer bisa menggunakan tanda (mark) HTML untuk “menulis” sebuah halaman situs web. tanda (mark) tersebut “disimpan” dalam sebuah “dokumen” HTML dan “diletakkan” di dalam server.
Hubungan HTML, CSS dan JavaScript
HTML adalah bahasa yang bisa diperkuat apabila dikolaborasikan dengan bahasa lain, yaitu CSS dan JavaScript. Ketiga bahasa ini sering digunakan bersama-sama dalam pemrograman front end. CSS merupakan bahasa yang digunakan untuk mengontrol presentasi dan tampilan atau untuk memperindah tampilan web. Presentasi dan tampilan ini meliputi warna, background, spacing atau jarak, dan lain-lain.
Sedangkan Javascript bertugas untuk membuat halaman web menjadi hidup. Karena dengan Javascript, kita dapat menentukan fungsi-fungsi maupun efek yang akan diterapkan di website. Contoh dari JavaScript adalah Misalnya, apabila kamu menekan tombol kanan pada foto, foto akan bergeser ke kanan atau akan muncul kotak pop up. HTML itu seperti batu bata untuk membangun rumah. Batu bata ini dapat disusun hingga menjadi fondasi dasar.
Saat anda membuka halaman situs web melalui aplikasi browser, anda sebenarnya sedang meminta akses ke dokumen HTML tersebut. Dokumen tanda-tanda dalam bahasa HTML akan dikirimkan oleh server kepada anda.
Struktur Dasar HTML
Penulisan kode HTML selalu dimulai dengan deklarasi DOCTYPE, lalu menuliskan tag <html> dan di dalamnya terdapat tag <head> dan <body>. Mengenai Struktur dasar kode HTML perhatikan gambar dibawah ini !
Struktur dasar kode HTML terdiri dari tiga bagian yaitu deklarasi, head, dan body.
1. Bagian Deklarasi
Coba perhatikan kode pada baris pertama: <!DOCTYPE html>. Ini adalah tag deklarasi untuk menyatakan tipe dokumen dan versinya. Pada contoh di atas, kita menyatakan dokumen ini bertipe HTML5 atau terbaru (saat ini).
Anda bisa tidak menulis kode <!DOCTYPE html> ini. Walaupun dokumen HTMLnya akan tetap bisa dibuka di web browser, namun hal itu akan melanggar aturan standar yang dibuat W3C. Untuk mengecek apakah HTML yang ditulis sudah benar atau tidak di https://validator.w3.org/.
Berikutnya, di bawah tag deklarasi <!DOCTYPE html> terdapat tag pembuka untuk HTML yaitu <html lang=”en”>. Tag <html> wajib ada di setiap dokumen HTML. Pada tag ini, kita memberikan atribut lang=”en” untuk menyatakan kalau konten dokumen HTML ini akan menggunakan bahasa inggris. Dalam tag <html> ini, terdapat dua tag penting lagi.. yakni: tag <head> dan tag <body>. Setelah itu terakhir tag HTML ditutup dengan </html>.
2. Bagian Head
Bagian HEAD adalah bagian kepala dari HTML. Dimulai dari tag<head> dan ditutup dengan </head>. Perhatikan contoh kode berikut ini.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Dasar HTML: Definisi,Struktur, beserta cara membuatnya</title>
</head>
<body>
<p> Praktek Otodidak</p>
</body>
</html>
Pada bagian head biasanya digunakan untuk menuliskan tag-tag yang akan dibaca oleh mesin. seperti :
- Tag meta untuk SEO;
- Tag
<title>untuk judul;
- Tempat menulis kode CSS dan Javascript;
- Dan lain-lain
3. Bagian Body
Bagian body adalah bagian yang akan ditampilkan pada web browser. Penulisannya di mulai dari tag <body> dan ditutup dengan </body>. Di sinilah nanti kita akan banyak menuliskan konten dengan berbagai macam tag. Lihat contoh kode program dibagian head, Saat ini kita baru mengisinya dengan tag <p>. Tag <p> adalah tag yang digunakan untuk membuat paragraf. Biar tidak bingung, kita langsung praktekkan saja.
Cara Menjalankan File HTML
1. Pertama, buka teks editor, lalu tulislah kode program sederhana berikut ini.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Dasar HTML: Definisi,Struktur, beserta cara membuatnya</title>
</head>
<body>
<p> Praktek Otodidak</p>
</body>
</html>2. Save As dengan nama html dasar.html, Contoh jika menggunakan Notepad di Windows. Simpan nama filenya dengan nama “html dasar.html” tanpa tanda petik. hal ini agar ekstensinya .html, bukan .txt
3. Sekarang buka file html dasar.html dengan web browser.. maka hasilnya akan terlihat seperti gambar dibawah ini
Sekarang kita sudah berhasil membuat halaman web dengan HTML
Catatan dasar html dalam membuat file dokumen
- Setiap file HTML harus berekstensi .html, .xhtml (untuk XHTML), dan .htm saja. Apabila tidak menggunakan ekstensi ini, maka ia tidak akan bisa dibaca oleh web browser.
- Gunakan nama index.html Jika ingin membuat halaman untuk homepage, karena ia akan otomatis dibuka saat website dikunjungi.
- Nama file HTML biasanya akan tercantum pada URL. Hindari menggunakan spasi pada nama file HTML agar URL yang dibentuk lebih bagus. Spasi pada URL biasanya akan otomatis diubah menjadi %20. Sebagai ganti spasi, kamu bisa gunakan tanda min (-) atau undescore (_).
- Buat nama file HTML dengan file yang biasa, hindari menggunakan huruf besar, campuran dari huruf besar dan kecil, dan juga menggunakan simbol. Meskipun nama ini bisa valid, tapi kurang bagus untuk dibaca oleh manusia maupun mesin.
Begitulah pembahasan mengenai Pengenalan Dasar HTML. Baca juga artikel selanjutnya yaitu Belajar HTML#2 – Penggunaan Tag, Elemen, dan Atribut dalam HTML
