Pemahaman Dasar HTML Beserta Ilustrasinya
A. Apa Itu HTML?
HTML (Hypertext Markup Language) adalah bahasa markup dasar untuk membuat dan menyusun halaman dan aplikasi website.
Semua website memliki kode HTML yang merupakan kerangka dasar dalam membangun web. Markup ini merupakan bahasa standar dalam membangun website yang dikelola oleh World Wide Web Consortium (W3C).
 |
| img by pixabay |
Ketika menulis HTML di pencarian google, terdapat sekitar 18.910.000.000 hasil pencarian artikel yang membahas tentang HTML.
Data ini yakonten dapatkan di akhir tahun 2022, tentunya akan semakin meningkat dari tahun ke tahun. Pertanyaannya:
Perlukah kami membahas lagi tentang HTML ?
Perlu, Tetapi artikel ini tidak berbicara tentang pengertian HTML secara baku seperti artikel pada umumnya, yakonten ingin mengajak anda menikmati pengertian dasar HTML dengan cara yang lebih mudah untuk dimengerti.
B. Kerangka Dasar HTML
Semua website dibangun dengan bahasa dasar HTML yang merupakan kerangka dasar dalam membuat sebuah website. Lihat gambar dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Kode diatas merupakan kerangka dasar dalam membangun sebuah website. Kerangka ini berisi kode dan simbol yang umumnya digunakan dalam dokumen HTML.
Dalam bahasa pemograman, simbol yang sering diguanakan seperti ( [ ] ' " * # { } <> , .\ ; $ ) yang dilengkapi dengan kode perintah untuk memproses kodenya. Kode dan perintah ini sudah ditanamkan dalam sebuah sistem aplikasi yang dibuat untuk menjalankan bahasa tersebut.
Sebuah sistem akan memproses kode apabila kerangka penulisannya sudah sesuai dengan struktur yang telah ditetapkan oleh sistem. Setiap bahasa memiliki aturan yang berbeda dalam penulisan kode.
Begitupula dengan penulisan kode HTML, struktur data dari kode HTML sudah ditanam pada sistem yang ditugaskan untuk membaca dan menjalankan kodenya, dalam hal ini adalah aplikasi browser.
Aplikasi browser akan membaca sebuah kode HTML apabila struktur kode ditulis dengan benar sesuai dengan kaidah bahasa yang sudah ditentukan.
C. Ilustrasi fungsi kode HTML
Ilustrasinya, seperti otak manusia yang menyimpan berbagai informasi untuk menafsirkan kata sesuai dengan penafsirannya.
 |
| img by pixabay.com |
Misalnya, ketika saya perintahkan anda dengan kata "lari" otak anda sudah otomatis memahami apa yang saya maksud.
Bagaimana kalau saya katakan "run" ! yang sudah belajar bahasa inggris atau yang pernah mendengar kata tersebut akan langsung paham maknanya karena dalam otak mereka sudah tertanam informasi dari kata tersebut, sedangkan yang belum pernah mendengar kata tersebut tidak bisa memahaminya.
Begitupula dengan kode HTML, Semua kode, simbol atau tanda harus ditulis dengan benar sesuai dengan aturan penulisan kode yang tertanam dalam sistem tersebut. Jika penulisannya salah maka sistem tidak bisa membacanya dengan benar.
D. Apakah HTML harus dihafal ?
Tidak, Apakah anda pernah menghafal kosa-kata bahasa indonesia satu per satu ? Tentu tidak, seorang anak hanya diajarkan beberapa kata, selebihnya otak akan memahami secara otomatis ketika mereka melihat, berinteraksi, dan berkomunikasi.
Begitupula dengan bahasa asing, semakin sering anda mendengar dan berinteraksi dengan bahasa asing semakin cepat anda mempelajarinya.
Hal ini berlaku untuk sistem komputer, semakin anda sering berinteraksi dengan komputer menggunakan bahasa pemograman tertentu semakin anda cepat dalam memahami kode tersebut.
Jadi, Tidak perlu dihafal satu per satu ya!! Cukup memahami logikanya dan menghafal beberapa kode penting.
Buat anda yang sedang belajar koding / bahasa pemograman tertentu, jangan putus asa karena melihat banyaknya bahasa pemograman saat ini. Fokuslah pada satu bahasa dan gunakan bahasa tersebut sesering mungkin agar mahir dalam menggunakannya, setelah itu silahkan belajar bahasa lainnya.
E. Apakah penting belajar HTML ?
Fungsi HTML adalah membuat dokumen yang dapat ditampilkan di browser dan diakses melalui jaringan.
Ada banyak aplikasi website builder yang berfungsi untuk membuat website secara instan tanpa perlu memahami tentang html dan koding.
Dengan adanya website builder apakah masih penting belajar HTML?
Jawabnnya: tergantung kebutuhan anda! Saya ingin menjawab dengan ilustrasi bumbu instan untuk membuat nasi goreng ☺
Semua orang bisa membuat nasi goreng dengan menggunakan bumbu instan tanpa perlu memahami bumbu-bumbu dasar untuk membuat hidangan nasi goreng yang lezat.
Jika anda sudah puas dengan rasa nasi goreng yang dibuat dari bumbu instan artinya anda tidak perlu mengetahui bumbu-bumbu dasar untuk membuatnya.
tetapi, jika anda belum puas dengan rasanya, anda harus belajar tentang bumbu-bumbu dasar membuat nasi goreng untuk menciptakan rasa yang lebih lezat.
dengan memahami bumbu-bumbu dasar untuk membuat nasi goreng, anda bisa meracik bumbu sendiri atau menambah cita rasa dari bumbu instan yang sudah ada.
oleh sebab itu, anda harus paham dasar-dasar dalam meracik website, eh.. Nasi Goreng.
Begitupula dengan membuat website, jika kebutuhan situs web anda sudah terpenuhi dengan menggunakan website builder maka anda tidak perlu mempelajari html.
Jika website builder belum memenuhi kebutuhan website anda, artinya anda harus paham tentang bagaimana website dibuat serta kompenen dan proses yang ada didalamnya.
Dengan memahami hal-hal dasar dalam membuat website, yakni html dan css anda bisa membuat tampilan sendiri atau memodifikasi tampilan yang sudah ada sesuai kreatifitas anda.
F. Pemahaman Penggunaan Tanda / Tag dalam dokumen HTML
Semua tulisan dalam dokumen html pasti disertai dengan kode dan tanda. Kode dan tanda ini yang akan berkomunikasi dengan sistem.
Perhatikan kode dibawah ini :
<!DOCTYPE html> : Tanda yang memberitau kepada sistem browser bahwa ini adalah dokumen html
<html> </html> : Tanda yang memberitau kepada sistem browser bahwa ini adalah kode html
<head> </head> : Tanda yang memberitau kepada sistem browser bahwa ini adalah bagian atas website
<body> </body> : Tanda yang memberitau kepada sistem browser bahwa ini adalah bagian isi website
<footer> </footer> : Tanda yang memberitau kepada sistem browser bahwa ini adalah bagian bawah website
Dalam html terdapat beragam tanda yang biasa disebut dengan tag html. Pada dasarnya ini adalah kode yang bisa dipahami oleh suatu sistem yang sudah ditanamkan informasi tentang tanda-tanda tersebut.
Sistem yang saya maksud adalah aplikasi web Browser, seperti google chrome, firefox, opera, dan aplikasi browser lainnya. Kode inilah yang akan berkomunikasi dengan browser, dengan kode ini browser dapat memahami isi dari sebuah dokumen html. Contoh :
<!DOCTYPE html>
<html>
<head>
<title> Disini saya menulis sebuah judul </title>
</head>
<body>
<p> ini adalah sebuah paragraph </p>
</body>
</html>
Perhatikan struktur kode html diatas, semua informasi dibuka dengan tanda < > dan ditutup dengan tanda </> dan didalam tanda tersebut terdapat sebuah informasi kata : body, p, head, dll
<body> : menunjukan pembuka bagian isi
</body> : menunjukan penutup bagian isi,
begitupula dengan tanda <p> </p>. <head> </head>, dan lainnya.
Aplikasi browser hanya bisa memahami semua isi yang ditandai oleh tanda (tag) tersebut. jika tandanya tidak sesuai maka sistem browser tidak akan paham terhadap isinya, misalnya :
Pada sebuah dokumen html, Saya ingin menulis judul "Mari belajar HTML" maka penulisannya :
<h1>Mari belajar HTML<h1>
<h1> </h1> : tanda ini memberi informasi kepada browser bahwa yang ditulis di dalamnya adalah sebuah judul.
Jika saya menulisnya seperti ini:
<p>Mari belajar HTML</p>
<p> </p> : tanda ini memberi informasi kepada browser bahwa yang ditulis di dalamnya adalah sebuah paragraf.
Walaupun anda hanya menulis satu kata jika anda membungkusnya dengan tag <p> </p> maka sistem akan membacanya sebagai sebuah paragraf.
Jadi suatu sistem (dalam hal ini adalah aplikasi browser) akan membaca semua informasi dokumen sesuai dengan tanda/kode yang dituliskan.
Saya ulangi! tidak perlu pusing menghafal semua tanda-tanda ini. Semuanya bisa anda kuasai ketika anda sudah terbiasa berkomunikasi atau berlatih dengan bahasa ini. Ragam informasi tentang kode html bisa anda pelajari di situs : w3school.com
Harapannya, artikel ini bisa menggambarkan pemahaman dasar tentang html. Jika ada yang ingin ditanyakan tulis dikolom komentar. Selamat Belajar!
Posting Komentar untuk "Pemahaman Dasar HTML Beserta Ilustrasinya"