Sebagai pemula dalam dunia programming dan website, penting bagi kamu untuk mengetahui apa itu html.
Berkembangnya internet membuat website menjadi salah satu aspek yang wajib dikuasai. Sehingga, mempelajari ilmu dasar website sangat penting dilakukan.
Mengapa dimulai dengan HTML? HTML adalah dasar pembuatan sebuah website.
Memahami bahasa markup seperti HTML akan sangat membantu kamu untuk mahir dalam pembuatan website.
Nah, tim Panuwun kali ini akan mengajak kamu untuk memahami pengertian html dan contohnya, sejarah HTML dan info penting seputar HTML.
Apa Itu HTML?
HTML merupakan bahasa markup standard web yang digunakan untuk membuat halaman website.
HTML singkatan dari apa? HTML merupakan singkatan dari istilah Hyper Text Markup Language.
Bisa dikatakan kalau HTML adalah wadah atau bagian dari bahasa pemrograman yang khusus untuk pembuatan website.
Dengan adanya HTML, setiap orang bisa membuat halaman web yang sesuai dengan standar pengkodean tag HTML.
Bagaimana Sejarah HTML?
Sejarah html dimulai sejak markup ini dibuat pada 1989 oleh Tim Berners Lee, seorang fisikawan Swiss.
Pada waktu itu, Berners Lee menciptakan html sebatas untuk mengorganisir dokumen yang sifatnya eletronik. Sistem hypertext ini masih dilakukan dengan sangat sederhana.
Seiring berkembangnya ilmu dan kebutuhan, html mengalami perkembangan dan perubahan versi.
Untuk mengenal html lebih dalam, di bawah ini dijabarkan beberapa versi html dari waktu ke waktu:
Versi 1.0
HTML versi 1 merupakan pionir pertama html yang diluncurkan 9 tahun kemudian sejak pertama kali dibuat.
Versi ini lebih dikenal dengan nama Tanda HTML dengan 18 elemen awal.
Tampilan versi ini sangat sederhana dan masih memiliki banyak kekurangan.
Kemampuan yang dimiliki sebatas pada aspek berikut ini:
- Paragraf
- Hypertext
- Heading
- List
- Cetak Miring dan Huruf Tebal pada text.
Selain kelima fitur di atas, html versi 1.0 juga sudah mendukung penggunaan gambar dalam dokumen tanpa fitur wrapping text.
Versi 2.0
Html versi 2 diluncurkan pada 24 November 1995 dengan nama IETF. Pada versi ini telah ada penambahan fitur berupa tampilan form yang semakin berkualitas.
Form yang tersedia dapat menampilkan nama, alamat, serta saran. Keunggulan versi ini adalah tersedianya fitur untuk mendukung web interaktif.
Versi 3.0
HTML Versi 3 memililik fasilitas tambahan yaitu FIGURE untuk memasukan gambar dan tabel.
Ada juga rumus matematika dalam dokumen. Namun versi ini tak berlagsung lama dan segera digantikan dengan versi 3.2.
Versi 3.2
HTML versi ini dikeluarkan pada 14 January 1976 yang menjadi proyek bersama dengan WWW.
Versi3.2 adalah salah satu versi yang banyak digunakan karena teknologinya sudah cukup mendukung.
Kelebihan versi ini adalah sebagai berikut:
- Peletakan teks di sekitar gambar
- Teks sebagai latar belakang gambar
- Adanya frame, tabel, style sheet, dan fitur lain
- Kemudahan menggunakan script di luar html
- Pendukung kinerja yang beragam seperti Java Script, VBScript, dll.
Versi 4.0
HTML 4.0 diluncurkan pada 18 Desember 1997 yang dijadikan sebagai Rekomendasi WWWC.
Di versi ini fitur html mengalami perubahan seperti pada link, image, meta, form, tabel, imagemaps, dan lainnya.
Beberapa fitur lain yang sudah dianggap bagus tetap dipertahankan dan hanya mengalami peningkatan fungsi.
Versi 4.01
HTML versi 4.01 dipublikasikan pada 5 Mei 2000 dan sudah distandardisasi dengan ISO HTML.
Versi ini merupakan perbaikan dari versi sebelumnya. Sementara standardisasi dikhususkan untuk fitur serta elemen script XHTML 1.
Versi 5.0
HTMML versi 5.0 atau HTML 5 adalah versi terbaru yang ditangani oleh IETF dan W3C dan menjadi versi html dengan standar paling tinggi.
Versi ini dipublikasikan pada 28 Oktober 2014 dan masih menjadi versi standard hingga saat ini.
Keunggulan versi ini terletak pada penambahan sistem pada bagian pembuatan tampilan website. Sistem tersebut bersala dari gabungan antara HTML dengan CSS, dan Javascript.
Berikut beberapa fitur baru yang terdapat dalam HTML 5:
- Scripting dirubah dengan markup yang banyak
- Device dependent
- Proses pengembanhan yang bersifat umum dan bisa dilihat publik
- Adanya elemen baru seperti canvas (gambar 2D), video dan audio, article, nav, section, header dan footer dan kontrol dalam Form.
Meskipun html sudah memiliki standar tertinggi pada versi ke-5 nya, namun bukan tidak mungkin akan ada perubahan lagi di masa mendatang.
Apa Fungsi HTML?
Fungsi utama dari html adalah untuk membentuk struktur serta kode yang jika digabungkan dapat menciptakan suatu halaman website yang baik.
Namun selain itu, sebetulnya ada banyak sekali hal yang bisa dilakukan oleh bahasa markup ini.
Apa itu HTML dan fungsinya? Apa pentingnya html? Berikut beberapa manfaat dari html dalam pembuatan website.
- Membangun struktur halaman suatu website.
- Membuat tabel yakni dengan menggunakan tag HTML Table.
- Mengatur tampilan halaman website.
- Mengatur tampilan isi halaman website.
- Membuat gambar menggunakan elemen Canvas.
- Membangun Form html.
- Mempublish halaman website dengan cara online.
Di atas hanya beberapa hal yang bisa dilakukan html. Masih ada banyak lagi hal yang bisa kamu lakukan untuk mengembangkan website dengan html.
Kunci menggunakan html adalah dengan memahami tag serta struktur kode yang ada di dalam html. Ada baiknya juga memahami apa itu html, css.
Kode CSS sangat berguna untuk memperindah tampilan desain website.
Menggabungkan penggunaan html dengan css sangat bermanfaat untuk menciptakan website yang tak hanya baik, tetapi juga artistik.
Apa yang dimaksud dengan Tag HTML?
Sebelum mengenal contoh tag html, sebenarnya apa itu tag html?
Tag html merupakan kode spesial yang berfungsi untuk memberikan/menandai informasi tertentu.
Contohnya saja, jika ada tag html berupa <i>, artinya teks dengan tanda ini berubah menjadi huruf italic / huruf miring.
Sama dengan jika terdapat tag berupa <b>, artinya adalah bold, jadi teks dalam tag tersebut adalah berupa huruf cetak tebal.
Tag html biasanya memiliki awalan yang disebut Opening Tag dan penutup atau Closing Tag.
Namun, dalam beberapa kasus ada juga tag yang tidak memiliki opening tag maupun closing tag.
Secara umum, berikut gambaran elemen HTML:
Secara umum terdapat 2 jenis tag html yaitu inline tag dan block-level tag.
1. Block Level Tag
Eelemen ini menggunakan seluruh kapasitas yang ada dalam html dan selalu membutuhkan line baru dalam suatu dokumen.
Contoh html tag diantaranya adalah paragraf dan heading. Ada 3 tag html di elemen block level yang wajib ada dalam setiap dokumen:
- Tag <html></html>, yaitu elemen paling tinggi yang fungsinya untuk melampirkan halaman html.
- Tag <head></head>, yaitu elemen berisi informasi meta, seperti charset halaman dan judul.
- Tag <body></body>, yaitu elemen yang digunakan untuk melampirkan seluruh konten yang ada pada halaman website.
Selain itu, ada juga tag heading yang mempunyai 6 level di tag html, <h1></h1> sebagai level tertinggi hingga <h6></h6> adalah level terendah.
Tag <body> memiliki banyak elemen yang fungsinya bermacam-macam terutama yang berkaitan dengan pemformatan teks. Diantaranya adalah sebagai berikut:
- <b> fungsinya untuk mencetak tebal sebuah teks.
- <i> fungsinya untuk mencetak miring sebuah teks.
- <u> untuk mencetak teks dengan garis bawah.
- <em> untuk membuat penekanan pada sebuah teks.
- <small> fungsinya untuk membuat teks terlihat lebih kecil.
- <strong> fungsinya untuk membuat sebuah teks terlihat penting.
- <sub> fungsinya untuk mencetak teks menjadi subscript.
- <sup> fungsinya untuk mencetak teks menjadi superscript atau pangkat.
- <del> untuk membuat teks yang disisipkan tag <del> agar dicoret atau dikoreksi.
- <mark> untuk meng-higlighted teks atau memberi efek tulisan seperti diberi stabilo.
- <br> fungsinya untuk mengganti garis baru.
- <hr> fungsinya untuk menciptakan garis horisontal.
- <form> fungsinya untuk membuat form atau halaman baru.
- <table> fungsinya untuk membuat sebuah tabel.
- Dll.
Selain elemen tersebut, inline tag juga memiliki elemen Division. Di dalamnya terdiri dari gambar, paragraf, blocquote, dan sejumlah elemen kecil lainnya.
2. Inline Tag
Tag Inline adalah bagian dalam html yang mencakup tugas untuk memformat teks.
Beberapa aspek yang berada dalam inline tags misalnya hyperlink, yang menggunakan tag <a></a>.
Ada juga elemen image atau gambar yang menggunakan tag <img>. Dan masih ada banyak lagi elemen yang bisa dilakukan menggunakan tag inline ini.
Bagaimana Struktur HTML?
Struktur dasar html sebetulnya sangat universal, artinya seluruh website memiliki struktur utama yang sama.
Struktur kode html bisa dilihat di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title> … Page Title</title>
</head>
<body>
… ISI KONTEN <h1? ………….. </h1>
<p> ………………. </p>
</body>
</html>
Apa maksud dari struktur html di atas? Berikut penjelasannya.
Struktur HTML | Artinya |
<!DOCTYPE html> | Tipe dokumen html yang fungsinya untuk mendeklarasikan tipe dokumen html. |
<html></html> | Elemen utama HTML yang mencakup seluruh elemen lain. |
<head></head> | Elemen yang mencakup seluruh konten yang tidak ditampilkan. Bisa digunakan untuk meletakkan kode lain seperti CSS, JS, deskripsi, keyword, dll. |
<title></title> | Judul halaman website yang ditampilkan di bagian tab browser. |
<body></body> | Isinya adalah konten yang berisi konten/isi dn muncul pada bagian browser ketika halaman tersebut diakses pengunjung. |
Struktur html di atas adalah struktur utama atau dasar dari suatu html untuk membuat website yang masih sangat basic.
Untuk menambahkan fitur, kamu perlu mengembangkan bahasa html dan menggabungkan dengan fitur lain seperti CSS.
Bagaimana Cara Kerja HTML?
Memahami pengertian html dan css saja tak cukup untuk menciptakan website yang profesional.
Sehingga sangat disarankan bagi pemula untuk memahami cara kerja html.
Cara kerja html sebetulnya tidak rumit karena html tidak jauh berbeda dengan dokumen tulisan biasa.
Bedanya, html memiliki kode dan struktur khusus, yaitu TAG HTML.
Dengan lebih mengenal format tag pada html dan fungsinya, maka kamu akan lebih leluasa untuk memahami cara kerjanya.
Cara kerja html lebih fokus kepada penggambaran struktur elemen serta format pada sebuah halaman website.
Selain itu, html juga memungkinkan kamu untuk menginterpretasikan halaman.
Aspek seperti warna, haris, jenis tulisan dan teks yang ingin digunakan dalam sebuah situs juga menjadi bagian dari html.
FYI, jika dalam aplikasi html ekstensinya menggunakan .html / .htm, maka bisa dilihat dengan berbagai web browser baik Google Chrome, Mozilla Firefox atau Safari.
Namun, secara umum, tiap halaman html pada website browser akan menunjukkan halaman yang bervariasi.
Kesimpulan
Gimana? Sudah paham apa itu html, apa fungsinya dan bagaimana cara kerjanya?
Setelah memahami teori bahasa markup web yang paling dasar satu ini, tentunya ini belum cukup dong.
Jika kamu masih kesulitan dengan pemrograman html, kamu bisa memanfaatkan html 5 yang lebih fleksibel dan mudah digunakan.
Tak hanya itu, jika impianmu adalah menciptakan website yang bagus & menarik, kamu wajib menggabungkannya dengan pemrograman lain, misal CSS, JS, Java, Javascript, dll.
Sekian informasi mengenai apa itu html, semoga dapat bermanfaat.