HTML (Hypertext Markup Language)
HTML adalah singkatan dari Hypertext Markup Language. HTML memungkinkan seorang user untuk membuat dan menyusun bagian paragraf, heading, link atau tautan, dan blockquote untuk halaman web dan aplikasi.
HTML bukanlah bahasa pemrograman, dan itu berarti HTML tidak punya kemampuan untuk membuat fungsionalitas yang dinamis. Sebagai gantinya, HTML memungkinkan user untuk mengorganisir dan memformat dokumen, sama seperti Microsoft Word.
Ketika bekerja dengan HTML, kami menggunakan struktur kode yang sederhana (tag dan attribute) untuk mark up halaman website. Misalnya, kami membuat sebuah paragraf dengan menempatkan enclosed text di antara tag pembuka
dan tag penutup
.
This is how you add a paragraph in HTML.
You can have more than one!
Kesimpulannya, pengertian HTML sebagai bahasa mark up sangatlah mudah untuk dipahami bahkan bagi webmaster pemula di bidang web development sekalipun.
Bagaimana Cara Kerja HTML?
Dokumen HTML adalah file yang diakhiri dengan ekstensi .htmlatau .htm. Ekstensi file ini bisa dilihat dengan mengunakan web browser apa pun (seperti Google Chrome, Safari, atau Mozila Firefox). Browser tersebut membaca file HTML dan me-render kontennya sehingga user internet bisa melihat dan membacanya.
Biasanya, rata-rata situs web menyertakan sejumlah halaman HTML yang berbeda-beda. Contohnya, beranda utama, halaman ‘tentang kami’, halaman kontak yang semuanya memiliki dokumen HTML terpisah.
Masing-masing halaman HTML terdiri atas seperangkat tags (bisa disebut juga elements), yang mengacu pada building block halaman website. Tag tersebut membuat hirarki yang menyusun konten hingga menjadi bagian, paragraf, heading, dan block konten lainnya.
Sebagian besar element HTML memiliki tag pembuka dan penutup yang menggunakan syntax .
Berikut contoh kode dari susunan atau struktur HTML:
The Main Heading
A catchy subheading
Paragraph one
Paragraph two with a hyperlink
- Elemen teratas dan terbawah adalah division sederhana () yang bisa Anda gunakan untuk mark up bagian konten yang lebih besar.
- Susunan HTML di atas terdiri atas heading (
), subheading (), dua paragraf (
), dan satu gambar (). - Paragraf kedua meliputi sebuah link () dengan attribute href yang terdiri atas URL tujuan.
- Tag gambar memiliki dua attribute, src untuk path gambar dan alt untuk deskripsi gambar.
Tag, Elemen, dan Atribut dalam HTML?
Tag, elemen, dan atribut merupakan tiga bagian penting yang ada di dalam HTML. Bagi kamu yang baru belajar HTML, wajib hukumnya untuk mengetahui ketiga Hal ini.
Apa itu Tag?
Apa itu Elemen?
Apa itu Atribut?
Serta apa perbedaan Tag, Elemen, dan Atribut?
Apa itu Tag?
Tag adalah sebauh penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat dengan kurung siku (<...>), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut.
Contoh:
, ,
, , dan sebagainya.
Tag selalu ditulis berpasangan. Ada tag pembuka dan ada tag penutupnya. Namun, ada juga beberapa tag yang tidak memiliki pasangan penutup. Tag penutup ditulis dengan menambahkan garis miring (/) di depan nama tag.
Setiap tag memiliki fungsi masing-masing. Ada yang digunakan untuk membuat judul, membuat link, membuat paragraf, heading, dan lain-lain.
Masih ingat sejarah HTML?
Dulu.. awalnya HTML cuma punya 18 tag. Sekarang HTML sudah punya sekitar 250 tag.
Wah! banyak ya.
Apa semua tag ini harus kita hafal?
Jawabannya:
Tidak harus, saja juga tidak bisa menghafal semanya. Cukup ketahui tag-tag dasar saja.
Berikut ini daftar tag-tag dasar, yang menurut saya harus kamu ingat.
| Tag | Fungsi |
|---|---|
| untuk memulai dokumen HTML | |
| untuk membuat bagian head | |
| untuk membuat bagian body | |
sampai | untuk membuat heading pada artikel |
| untuk membuat paragraf | |
| untuk membuat komentar |
Beberapa tag ini sudah kita coba pada tutorial pertama dan juga ada yang belum.
Tenang saja.. Nanti juga saya akan perkenalkan tag-tag lain yang umum digunakan dalam pembuatan web.
Untuk saat ini, cukup pahami: Apa itu tag dan cara menulisnya.
Cara Menulis Tag HTML yang Benar!
Beberapa orang kadang sering salah dalam menuliskan tag. Ada yang lupa menutup, ada yang salah mengetik namanya, dan semacamnya.
Berikut ini beberapa saran yang perlu diikuti agar bisa menulis tag dengan benar:
1. Tag-tag wajib
Ada beberapa tag yang wajib ada di HTML. Tag ini harus kamu tulis.. kalau tidak, bisa jadi kode HTML-mu akan error menurut validator W3C.
Berikut ini daftar tag yang wajib ada di HTML:
- — untuk deklarasi type dokumen;
- — tag utama dalam HTML;
- — untuk bagian kepala dari dokumen;
- — untuk judul web;
- — untuk bagian body dari dokumen.
2. Gunakan Huruf Kecil
Hindari menggunakan huruf besar dalam menuliskan naama tag dan sebaiknya gunakan huruf kecil saja.
Huruf kecil lebih gampang diketik dan juga akan membuat kode HTML terlihat lebih bersih dan rapi.
Contoh: (bagus)
Belajar tentang tag di HTML
Contoh: (buruk)
Belajar tentang tag di HTML
Tapi khusus untuk tag .. ia ditulis dengan huruf besar. Sebenarnya bisa juga dengan huruf kecil dan akan valid menurut validator W3C.
Tapi untuk dokumen XHTML, menggunakan DOCTYPE dengan huruf kecil akan mengakibatkan error.
3. Pastikan Menutup Tag dengan Benar
Tag HTML nantinya akan ditulis bertumpuk-tumpuk. Artinya, di dalam tag ada tag lagi. Kadang kita sering salah dalam menutup tag yang bertumpuk ini. Akibatnya, kode HTML kita tidak valid.
Tapi tenang saja.. saya punya resep agar kamu mudah mengingatnya:
Jika kamu paham maksud dari jokes di atas, maka bagus.. saya tidak perlu jelaskan lagi.
Tapi kalau belum paham, berikut ini penjelasannya:
Tag yang pertama dibuat, harus ditutup terakhir. Bukan ditutup pertama.
Contoh:
memasak
Tag ditutup terakhir, karena ia yang ditulis pertama. Lalu tag ditutup pertama kali karena ia berada di dalam tag dan .
Apa itu Elemen?
Elemen dalam HTML adalah sebuah komponen yang menyusun dokumen HTML. Elemen kadang juga disebut sebagai node, karena ia merupakan salah satu jenis node yang menyusun dokumen HTML dalam diagram HTML tree.
HTML Tree (sumber: w3schools.com)
Pada diagram tersebut, terdapat tiga macam node.. yakni: Node elemen,Node atribut, dan Node teks.
Elemen dibentuk dari tag pembuka, isi tag, dan tag penutup. Kadang juga ditambahkan beberapa atribut.
Contoh:
Pada contoh di atas, terdapat satu elemen
dengan atribut align="center"dan memiliki isi berupa teks, yakni Hello World!.
Elemen tidak selalu berisi teks, kadan ia juga akan berisi elemen lain. Ini biasanya kita sebut dengan nested element atau elemen di dalam elemen.
Bila digambarkan dalam bentuk kotak persegi, maka akan terlihat seperti ini:
Elemen HTML ada banyak jenisnya. Ada elemen khusus untuk teks, ada elemen untuk multimedia, script, tabel, metadata, dll. Nanti kita akan pelajari ini secara bertahap. Semua jenis elemen HTML bisa kamu baca di sini: HTML elements reference.
Beberapa elemen HTML kadang ditambahkan atribut sebagai pelengkap.
Apa itu Atribut?
Atribut adalah kata khusus yang berada di dalam tag pembuka. Atribut juga disebut sebagai modifier yang akan menentukan perliaku dari elemen.
Atribut dapat ditambahkan pada elemen manapun. Ada juga elemen yang mewajibkan menggunakan atribut seperti elemen , , , dll.
Contoh:
https://petanikode.com">Petanikode.com
Tag adalah tag untuk membuat link. Tag ini mewajibkan menambahkan atribut href untuk menyatakan halaman tujuan dari link.
Jumlah atribut pada elemen bisa lebih dari satu.
Contoh:
Atribut src adalah atribut khusus untuk tag yang fungsinya untuk menentukan gambar yang akan ditampilkan. Lalu atrubut width dan heightadalah atribut yang mengatur ukurannya.
Jenis-jenis Atribut HTML
Tiap-tiap elemen kadang memiliki atribut khurus yang hanya bisa digunakan pada elemen tersebut. Ada juga atribut yang bersifat global dan bisa ditambahkan ke semua elemen.
Berikut ini jenis-jenis atribut yang harus diketahui:
1. Atribut Global
Atribut Global adalah atribut yang bisa ditambahkan pada semua elemen HTML.
Berikut ini daftar atribut global dan fungsinya:
| Nama Atribut | Deskripsi atau fungsi |
|---|---|
accesskey | Menentukan tombol shortcut untuk mengaktifkan atau fokus pada elemen |
class | Menentukan class CSS yang akan digunakan |
contenteditable | Menentukan isi elemen bisa diedit atau tidak |
data-* | Digunakan untuk menyimpan data |
dir | Menentukan arah teks dari elemen (kiri ke kanan atau sebaliknya) |
draggable | Menentukan apakah elemen bisa di drag atau tidak |
hidden | untuk menyembunyikan elemen |
id | Menentukan id unik untuk elemen |
lang | Menentukan bahasa yang digunakan untuk isi elemen |
spellcheck | Menentukan apakah isi elemen harus dilakukan pengejaan grammer atau tudak |
style | Menentukan inline CSS untuk elemen |
tabindex | Menentukan urutan atau indeks tab dari elemen (saat tombol tab ditekan) |
title | Menentukan informasi tambahan tentang elemen |
translate | Menentukan apakah konten dari elemen bisa diterjemahkan atau tidak |
2. Atribut Event
Atribut event adalah atribut yang digunakan untuk menentukan aksi yang akan dilakukan saat terjadi sesuatu pada elemen. Atribut ini nanti akan banyak digunakan pada pemrograman Javascript.
Berikut ini daftar atribut event saat terjadi sesuatu pada Jendela browser:
| Nama atribut | Nilai | Fungsi: Menjalankan script |
|---|---|---|
onafterprint | kode javascript | setelah dokumen dicetak |
onbeforeprint | kode javascript | sebelum dokumen dicetak |
onbeforeunload | kode javascript | sebelum saat dokumen tidak ter-load |
onerror | kode javascript | saat terjadi error |
onhashchange | kode javascript | saat terjadi perubahan pada bagian anchor di URL |
onload | kode javascript | setelah loading selesai |
onmessage | kode javascript | saat ada pesan |
onoffline | kode javascript | saat tiba-tiba offline |
ononline | kode javascript | saat tiba-tiba online |
onpagehide | kode javascript | saat user tidak sedang membuka halaman web |
onpageshow | kode javascript | saat user membuka kembali halaman web |
onpopstate | kode javascript | saat history browser berubah |
onresize | kode javascript | saat ukuran jendela browser berubah |
onstorage | kode javascript | saat area penyimpanan (Web Storage) di-update |
onunload | kode javascript | saat web browser ditutup |
Selain atribut tersebut, masih banyak lagi atribut event yang lainnya. Semuanya bisa kamu lihat di: HTML Event Attributes.
3. Atribut Khusus
Atribut khusus adalah atribut yang hanya bisa dipakai pada elemen tertentu dan kadang atribut ini tidak bisa digunakan pada elemen yang lain.
Contoh:
| Nama atribut | Bisa dipakai di tag |
|---|---|
src | , |
href | , |
action | |
autoplay | , |
Cara Menulis Atribut yang Benar!
Penulisan atribut sebenarnya gampang.. kita hanya perlu menambahkannya pada tag pembuka dengan format seperti ini:
bana-atribut="nilai"
Namun, ada beberapa hal yang perlu diperhatikan agar penilisannya benar dan valid:
1. Gunakan Huruf Kecil
Menulis atribut dengan huruf besar sah-sah saja, dan bahkan valid menurut validator W3C.
Tapi saya sarankan menggunakan huruf kecil saja. Karena lebih umum digunakan dan juga mudah terbaca.
Contoh: (bagus)
Belajar HTML di Petani Kode
Contoh: (kurang bagus)
Belajar HTML di Petani Kode
2. Guanakan Tanda Petik
Gunkan tanda petik untuk mengisi nilai atribut yang mengandung teks.
Mengapa?
Karena jika terdapat lebih dari satu kata, ia akan menciptakan spasi dan akan dianggap sebagai atribut baru.
Contoh: (bagus)
Belajar HTML
Contoh: (buruk)
Belajar HTML
Tanda petik yang digunakan, boleh petik ganda (") dan juga petik tunggal (').
Nah untuk nilai angka, boleh pakai tanda petik dan juga boleh tidak.
Contoh:
Lalu, untuk atribut yang bernilai boolean (true dan false).. nilainya boleh ditulis dan boleh tidak.
Contoh:
3. Penggunaan Spasi
Jika ada atribut yang memiliki lebih dari satu nama, maka ia ditulis dengan tanda min (-), bukan spasi.
Contoh:
Lalu, spasis juga digunakan untuk memisahkan dua atau lebih atribut.
Contoh:
Bisa juga ditulis seperti ini:
Apa Selanjutnya?
Kita baru saja belajar tentang Tag, Atribut, dan Elemen dalam HTML. Saya kira kamu sudah dapat membedakan ketiga hal ini.
Elemen adalah komponen yang menyusun dokuemn HTML. Sedangkan Tag adalah penanda untuk memulai dan mengakhiri elemen. Lalu atribut adalah modifier untuk menentukan perilaku elemen.
Nah, selanjutnya kita akan berkenalan dengan elemen-elemen dasar di HTML seperti paragraf, heading, list, tabel, link, form, dan lain-lain.
Bagaimana Hubungan Antara HTML, CSS, dan JavaScript?
Meskipun dinyatakan sebagai bahasa mark up yang powerful, HTML tidak sepenuhnya bisa membuat website yang profesional dan responsif. HTML hanya bisa digunakan untuk menambah elemen dan membuat struktur konten.
Namun di satu sisi, HTML bisa bekerja secara maksimal dengan dua bahasa frontend: CSS (Cascading Style Sheets) dan JavaScript. Jika digabungkan, kedua bahasa frontend ini bisa meningkatkan pengalaman user dan mengaktifkan fungsi yang lebih canggih.
- 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.
Misalkan HTML adalah orang yang tidak memakai satu helai benang pun, CSS adalah bajunya, dan JavaScript adalah aktivitas dan sikapnya.
Jadi… Apa Itu HTML?
HTML adalah bahasa mark up web yang utama dan dijalankan secara alami di setiap browser serta di-maintain oleh World Wide Web Consortium.
Berdasarkan cara kerja HTML, Anda bisa menggunakannya untuk membuat struktur konten pada website dan aplikasi web. HTML merupakan level terbawah dari teknologi frontend dan berfungsi sebagai dasar styling yang bisa Anda tambahkan dengan CSS dan fungsionalitas yang dapat dijalakan menggunakan JavaScript.
By : Y2N
Tidak ada komentar:
Posting Komentar