Tau nggak sih, HTML itu ibarat fondasi untuk semua halaman web yang ada di internet. Di awal perjalanan kita belajar HTML ini, aku mau ngajak kamu buat lebih akrab sama si HTML.

Kita bakal ngobrol santai tentang apa sih sebenarnya HTML itu, apa aja sih kegunaannya, dan gimana cara pakainya di situs-situs online. Nggak perlu tegang, kita bakal bahas semuanya dengan gaya yang ringan dan mudah dicerna.

Jadi, siap-siap ya! Kita akan mulai petualangan seru menjelajahi dunia HTML bareng-bareng. Dijamin, setelah ini kamu bakal lebih ngerti dan bisa bilang “Aha!” waktu liat kode-kode di balik website favoritmu.

Daftar isi

Pengertian HTML

Mungkin sebagian dari kalian udah kenal sama HTML atau bahkan udah pernah bikin kode HTML. Tapi nggak ada salahnya kan kita ngobrol santai tentang apa sih sebenernya HTML itu? Siapa tau bisa jadi bahan keren buat tugas atau presentasi kalian!

Jadi gini, HTML itu singkatan dari Hypertext Markup Language. Kedengerannya keren ya? Ada tiga kata penting di sini:

Hypertext: Ini bukan cuma teks biasa loh! Bayangin aja teks yang punya “kekuatan super”. Maksudnya, selain bisa dibaca, teks ini juga bisa jadi jembatan ke halaman lain. Keren kan? Kita biasa nyebutnya ‘link’. Oh iya, nanti kita bakal liat juga kalau nggak cuma teks yang bisa jadi link, gambar juga bisa!
Markup: Nah, ini kayak tanda atau stiker yang kita tempel. Di HTML, kita pake tanda-tanda unik kayak <p>, <a>, atau <li>. Tanda-tanda ini tugasnya ngatur tampilan dan bikin struktur halaman web kita.
Language: Artinya bahasa, tapi jangan bingung ya! HTML bukan bahasa pemrograman seperti yang biasa dipake programmer. HTML nggak punya variabel, kondisi IF, function, atau class. Dia lebih ke bahasa untuk ngedesain halaman web.

Jadi, HTML itu kayak bahasa rahasia yang bikin halaman web kita jadi keren dan bisa diklik-klik.

Tau nggak? Sebenernya nyebut HTML sebagai bahasa pemrograman itu agak kayak nyebut Buah-buahan sebagai makanan penutup – nggak salah-salah amat, tapi juga nggak 100% tepat.

Tapi tenang aja, biar kita nggak pusing-pusing, di panduan ini kita tetep aja pake istilah “bahasa pemrograman” buat HTML. Anggap aja kita lagi ngobrolin HTML di warung kopi, bukan di seminar teknologi. Yang penting kan kita paham intinya, ya nggak?

Jadi, kalo nanti kamu denger aku nyebut HTML sebagai bahasa pemrograman, jangan langsung protes ya! Kita cuma mau bikin belajarnya lebih gampang dan nggak ribet. Inget, di sini kita santai aja, yang penting ilmunya nyantol!

Jadi, intinya, HTML itu apa sih?

Bayangkan HTML seperti kamu lagi bikin poster keren. Kamu pake stiker, spidol warna-warni, dan tanda-tanda unik buat bikin posternya eye-catching. Nah, HTML itu kayak gitu, tapi buat bikin halaman web!

Tapi tunggu dulu, jangan cuma percaya sama aku. Yuk kita intip definisi dari si jenius Wikipedia:

“HTML atau HyperText Markup Language adalah bahasa markup standar yang digunakan untuk membuat halaman web.”

Wah, ternyata Wikipedia ngasih penjelasan yang lebih simpel dari obrolan panjang kita tadi ya? Tapi hey, nggak apa-apa, kadang hal-hal keren memang butuh penjelasan yang lebih detail!

Intinya, HTML itu bahasa spesial buat bikin halaman web jadi keren dan bisa dinikmati semua orang di internet. Gampang kan? Nah, sekarang kamu udah punya amunisi buat pamer ke temen-temen tentang apa itu HTML!

Fungsi HTML

Jadi, HTML itu buat apa sih sebenernya?

Gini deh, bayangin kamu lagi bikin rumah-rumahan dari kardus. HTML itu kayak kerangka rumahnya. Dia yang nentuin mana yang jadi pintu, mana yang jadi jendela, mana yang jadi atap. Keren kan?

Dalam dunia web, HTML itu yang bikin struktur websitenya. Dia yang bilang, “Oke, ini judulnya, ini isi artikelnya, oh yang ini mending dibikin tabel aja deh.” Jadi dia tuh kayak arsitek gitu!

Tapi, rumah kan nggak cuma struktur doang. Kamu pengen cat warna-warni kan? Nah, itu tugasnya CSS. CSS itu yang bikin website kamu jadi cantik, kayak makeup gitu deh!

Oh iya, zaman sekarang bikin website nggak cukup pake HTML + CSS doang. Kita butuh JavaScript juga. Anggap aja JavaScript itu kayak lampu sama perabotan di rumah kamu. Bikin rumahnya jadi lebih hidup dan bisa dipakai buat macem-macem.

Emang sih, kamu masih bisa bikin website pake HTML doang. Tapi ya gitu deh, jadinya kayak rumah kosong tanpa cat. Bisa dipake, tapi ya… gitu deh. Kurang kece!

Jadi inget ya, HTML itu fondasi keren buat bikin website. Tapi kalo mau bikin website yang lebih oke lagi, jangan lupa libatkan CSS sama JavaScript juga!

Tau nggak? CSS itu sebenernya kayak saudara kembarnya HTML. Mereka bukan bahasa pemrograman, tapi lebih ke ‘bahasa kode’ yang saling melengkapi.

Bayangin aja CSS itu kayak stylist pribadi buat HTML. Kalo HTML bikin struktur websitenya, CSS yang bikin gaya dan penampilannya jadi keren loh!

Jadi, CSS itu bukan yang bikin website bisa ‘mikir’ atau ‘ngitung’ kayak bahasa pemrograman. Dia lebih ke tukang make-up yang bikin tampilan jadi yahud!

Intinya, CSS sama HTML itu kayak duet maut. Mereka bukan bahasa pemrograman, tapi tanpa mereka, website kamu bisa jadi kayak orang bangun tidur – berantakan dan butuh di-make-over!

Jadi, jangan lupa ya, CSS itu penting banget buat bikin websitemu jadi nggak cuma fungsional, tapi juga enak dipandang. Siap-siap aja, habis belajar HTML, kita bakal kenalan sama si kece CSS!

Oke, kawan-kawan! Yuk kita bahas lebih seru tentang HTML dan teman-temannya!

Jadi gini, pas kamu baru kenalan sama HTML, pasti ada banyak pertanyaan yang muncul kan? Misalnya, “Gimana sih caranya bikin gambar punya bingkai keren?” atau “Bisa nggak ya bikin menu yang sembunyi pas di-scroll?”

Nah, sebenarnya HTML itu nggak sendirian lho dalam bikin website keren. Dia punya dua sobat karib: CSS dan JavaScript. Mereka bertiga itu kayak trio superhero gitu deh!

HTML: Dia yang bikin struktur websitenya. Anggap aja dia tulang-tulangnya website.
CSS: Nah, kalo CSS ini kayak stylist. Dia yang bikin website kamu jadi cakep!
JavaScript: Si JavaScript ini bisa dibilang ‘jiwa’ dari websitenya. Dia yang bikin website kamu bisa gerak-gerak, klik-klik, pokoknya jadi interaktif deh!

Kerennya, mereka punya julukan: “HTML for content, CSS for presentation, and JavaScript for behavior”. Keren kan?

Tapi inget ya, walaupun HTML kedengerannya paling simpel, dia itu kayak fondasi rumah. Tanpa dia, CSS dan JavaScript nggak bisa kerja. Jadi, HTML itu raja!

Bahkan bahasa pemrograman web lain kayak PHP atau ASP juga butuh HTML buat nunjukin hasilnya. Makanya, kuasai dulu HTML sebelum lompat ke yang lain-lain.

Di Panduan ini, kita bakal fokus ke HTML. Tapi tenang, nanti bakal ada sedikit ‘cameo appearance’ dari CSS dan JavaScript juga. Anggap aja biar kamu bisa kenalan sama mereka juga.

Jadi, siap-siap ya! Kita bakal jelajahi dunia HTML bareng-bareng. Dijamin seru dan bikin kamu jadi web developer handal!

Melihat Sekilas HTML

Salah satu aspek unik dari teknologi web, khususnya HTML, CSS, dan JavaScript, adalah

Ada hal menarik tentang HTML, CSS, dan JavaScript yang mungkin belum banyak diketahui. Kita sebenarnya bisa dengan mudah melihat kode-kode yang digunakan dalam sebuah halaman web. Keren, kan?

Jika Anda penasaran dan ingin mencobanya, ini caranya:

Buka browser web Anda.
Kunjungi situs web yang ingin Anda lihat kodenya.
Klik kanan di mana saja pada halaman tersebut.
Pilih opsi “View page source” atau “Lihat sumber halaman”.

Begitu saja! Dengan langkah-langkah sederhana ini, Anda bisa mengintip ‘dapur’ dari situs web yang Anda kunjungi. Ini bisa menjadi cara yang menarik untuk belajar tentang pembuatan website atau sekadar memuaskan rasa ingin tahu Anda.

Mari kita lihat contoh nyatanya. Pada gambar di bawah ini, Anda bisa melihat kode yang digunakan untuk membangun halaman utama (homepage) dari situs web Lantarandigital.co.id. Ini memberikan gambaran konkret tentang bagaimana sebuah website dibuat menggunakan bahasa pemrograman web.

Cara melihat source code website Lantarandigital.co.id

Melalui tampilan ini, kita mendapat kesempatan untuk mengamati dan mempelajari keseluruhan kode HTML, CSS, dan JavaScript yang digunakan dalam pembuatan situs duniailkom. Ini memberikan wawasan mendalam tentang struktur dan desain website tersebut.

Kode HTML pada situs Lantarandigital.co.id

Bagian yang ditulis dengan tanda kurung siku seperti <!doctype html>, <head>, atau <meta>
merupakan kode-kode HTML. Lebih menarik lagi, kita juga dapat melihat kode CSS dan JavaScript yang terkandung dalam halaman yang sama. Semua komponen penting untuk membangun website – HTML, CSS, dan JavaScript – tergabung dalam satu tampilan yang komprehensif.

Kode CSS pada situs Lantarandigital.co.id

Setiap situs website mungkin menempatkan CSS-nya berbeda-beda nah salah satunya website kami ditempatkan dibeberapa bagian baik itu inline CSS, Internal CSS, dan External CSS.

Nanti kita akan bahas semua perbedaan itu, oiya selain CSS penempatan Javascript juga berbeda-beda ada istilah yang sama juga Inline JS, Internal JS, dan External JS.

Nanti ya kita akan bahas..

Perpaduan HTML, CSS, dan JavaScript inilah yang menciptakan halaman utama website Lantarandigital.co.id. Jika Anda terus menggulir ke bawah, Anda akan melihat angka sekitar 1000+ di pojok kiri bawah. Ini menunjukkan bahwa diperlukan sekitar 1000+ baris kode untuk membangun halaman tersebut. Terdengar banyak, bukan?

Tapi jangan khawatir! Meskipun terlihat rumit, HTML sebenarnya cukup sederhana untuk dipelajari. Memang benar, membuat website yang canggih membutuhkan keahlian tinggi dan penguasaan berbagai bahasa pemrograman. Selain HTML, seorang programmer web biasanya juga perlu memahami CSS, JavaScript, PHP, dan MySQL. Ini adalah lima komponen dasar dalam pengembangan web.

Dalam Panduan ini, kita akan fokus mempelajari HTML secara mendalam. HTML adalah fondasi penting yang akan memudahkan Anda untuk mempelajari bahasa pemrograman web lainnya seperti CSS dan JavaScript di masa mendatang.

Mengenal Jenis-jenis Bahasa Pemrograman Web

Meskipun Panduan HTML ini berfokus pada HTML, saya ingin memperkenalkan Anda pada teknologi pemrograman lain yang diperlukan dalam pembuatan website. Informasi ini sangat berharga, terutama bagi pemula yang baru mengenal HTML dan beraspirasi menjadi web programmer profesional.

Seperti yang kita lihat dari source code Lantarandigital.co.id tadi, menguasai HTML saja ternyata belum cukup. Sejujurnya, setelah Anda menyelesaikan buku ini, itu barulah awal perjalanan Anda dalam dunia pemrograman web.

Selain HTML, ada empat teknologi lain yang perlu Anda kuasai: CSS, JavaScript, PHP, dan database MySQL. Kelima teknologi ini adalah fondasi untuk membangun website modern yang menarik dan fungsional.

Mari kita ambil contoh pembuatan form. Cara membuat form dengan HTML, yang biasa digunakan untuk registrasi user. Namun, untuk membuatnya lebih menarik, kita perlu CSS. JavaScript berguna untuk membuat form lebih interaktif, misalnya menampilkan pesan error saat user salah input data.

Setelah data diinput, kita perlu mengolahnya, dan di sinilah PHP berperan. Untuk menyimpan data secara permanen, kita butuh database seperti MySQL.

Dari alur ini, jelas bahwa HTML, CSS, JavaScript, PHP, dan MySQL saling terkait. Kelima teknologi ini bekerja sama untuk menghasilkan website modern yang interaktif.

Sama seperti bidang ilmu lainnya, fondasi yang kuat akan memudahkan Anda menguasai berbagai aspek pembuatan website. Dan langkah pertama untuk semua ini dimulai dari HTML.

/* — */

Kita telah membahas definisi HTML di materi awal Panduan HTML ini. HTML bukanlah teknologi baru – ia telah hadir dan berkembang selama puluhan tahun, menjadikannya fondasi yang mapan dalam dunia web. Saat ini, versi terbaru yang digunakan adalah HTML5.

Untuk memperdalam pemahaman kita tentang HTML, materi berikutnya kami akan mengajak Anda menjelajahi sejarah dan evolusi HTML. Kita akan melihat bagaimana teknologi ini berkembang dari waktu ke waktu, hingga mencapai bentuknya yang sekarang.

Perjalanan ini akan memberikan konteks yang berharga, membantu Anda memahami mengapa HTML didesain seperti sekarang dan bagaimana ia beradaptasi dengan kebutuhan web modern.