Banyak orang bertanya-tanya tentang apa itu HTML. Kalau Anda juga ingin tahu lebih banyak tentang HTML, Anda berada di tempat yang paling tepat.

Disini, Anda akan mempelajari bukan hanya pengertian dari HTML, tetapi juga bagaimana cara kerjanya dan berbagai hal lain mengenai HTML.

Sudah siap untuk mempelajari HTML lebih dalam? Mari kita mulai sekarang.

Apa itu HTML?

HTML sendiri merupakan sebuah singkatan dari HyperText Markup Language.

HTML merupakan salah satu bahasa markup/markah yang ada di dunia pemrograman web development.

HTML ini diciptakan untuk membantu Anda dalam membangun sebuah situs web. HTML memungkinkan kita untuk membuat dan menyusun sebuah paragraf, judul, tautan, gambar, audio, video, serta komponen lain untuk website.

HTML dapat dipelajari dengan mudah karena pengetahuan dasar tentang HTML yang sangat amat banyak di Internet, sehingga Anda akan sangat mudah untuk mempelajarinya.

Setiap tahunnya HTML mengalami revisi serta evolusi secara terus-menerus agar dapat memenuhi persyaratan serta permintaan para pengguna jaringan internet yang juga terus berkembang.

Terdapat sebuah organisasi bernama W3C yang mengemban tugas khusus untuk merancang serta memelihara bahasa markup/markah tersebut. Pendiri W3C adalah Tim Berners-Lee

Hypertext

HyperText adalah sebuah metode yang dapat Anda gunakan untuk berpindah-pindah ketika berada di situs web. Hal itu dilakukan dengan cara mengklik sebuah hyperlink.

Ini adalah contoh Hyperlink --> klik disini

Hyperlink merupakan sebuah teks khusus yang berisi sebuah tautan, sehingga Anda akan dibawa ke halaman sesuai dengan tautan yang dituju. Hyper berarti bahwa teks dalam website tersebut tidak bersifat linear. Ini berarti Anda bisa pergi kemanapun di Internet dengan mengklik.

Markup Language

Markup Language/ Bahasa Markah adalah sebuah cara untuk memberikan anotasi pada sebuah dokumen. Dengan adanya sebuah Markup, kita dapat menentukan bagaimana sesuatu harus ditampilkan atau menentukan arti dan tujuan dari sebuah kalimat atau kata.

Oleh karenanya kita dapat menentukan arti pada sebuah dokumen, misalnya kita dapat menentukan mana kalimat atau kata yang harus ditandai dengan huruf tebal, miring, berwarna dan lain sebagainya.

Beberapa contoh bahasa markup selain HTML:

Bagaimana Cara Kerja HTML?

Jadi, Anda telah memahami apa itu HTML. Tapi, tahukah Anda bagaimana HTML bekerja? Berikut cara kerja HTML.

Mudah bukan? Jika Anda ingin menulis HTML Anda sendiri, Anda perlu menggunakan tag HTML dengan benar dalam menciptakan tampilan yang tepat. Untuk menulis file HTML, Anda dapat menggunakan segala jenis teks editor yang ada dari yang bersifat gratis hingga berbayar.

Fungsi Tags Dalam HTML

Apa sih peranan tags dalam HTML? Pertanyaan ini seringkali dilontarkan oleh mereka yang terutama masih baru memulai pemrograman website.

Tags berfungsi untuk memisahkan teks normal dari kode atau sintaks HTML. HTML menggunakan tag untuk sintaksnya. Tag dibuat dengan karakter khusus: <,> dan /.

Setiap TAG HTML selalu diawali dengan <namaTag>, dan diakhiri dengan </namaTag>

Dengan adanya tags html, sangat memungkin untuk menampilkan hal-hal yang menarik seperti menampilkan tabel dan gambar, video, audio serta hal lain.

Setiap tags memiliki tujuan dan maksud yang berbeda. Tags yang berbeda akan menjalankan fungsi yang berbeda pula.

Ketika Anda melihat sebuah halaman website melalui browser, tags html tidak akan ditampilkan oleh Browser, namun yang Browser tampilkan adalah hasil kompilasi tags HTML, contohnya seperti ini

<b>Kalimat ini akan menjadi tebal</b>, dan yang ini tidak.

Potongan sintaks html diatas akan menjadi seperti ini

Kalimat ini akan menjadi tebal, dan yang ini tidak

Dengan menambahkan <b> di awal dan akhir dari teks, Anda akan mendapatkan teks yang menjadi tebal ketika dilihat melalui browser yang biasa. Contoh tags yang lain adalah:

Dan masih banyak lagi tag dalam HTML yang fungsinya bermacam-macam dan bisa digunakan untuk menciptakan tampilan situs web yang menarik.

Waktu Yang Dibutuhkan Untuk Membuat HTML

Mempelajari HTML tidak memerlukan waktu lama. Untuk bisa mengetahui HTML, Anda hanya perlu meluangkan beberapa hari agar bisa berkonsentrasi membaca serta mempelajari kode HTML yang cocok dengan keinginan Anda. Untuk mempelajari dasar-dasar HTML saja, waktu yang diperlukan hanya sekitar satu jam. Segera setelah Anda mengetahui tags, Anda bisa mulai membuat halaman HTML.

Lain halnya jika Anda ingin menggunakan HTML yang telah Anda buat serta merancang sebuah situs web yang menarik. Untuk membuat sebuah desain situs web yang menarik, diperlukan bakat serta keahlian serta beberapa hal penting lain seperti:

Dengan memperoleh bekal seperti dalam daftar di atas, Anda akan siap untuk bekerja dengan komputer secara efisien. Untuk membuat file HTML kita tidak perlu untuk online sepanjang waktu. Anda tentu bisa mengkodekan situs web Anda seluruhnya secara offline, untuk kemudian disimpan di komputer yang Anda miliki. Selanjutnya, Anda bisa mentransfer seluruh file tersebut ke penyedia layanan hosting.

Perkembangan Terbaru HTML

Di masa lalu, kemampuan HTML dapat dikatakan terbatas karena ada beberapa hal yang tidak bisa dilakukan oleh HTML.

Tapi seiring dengan berkembang pesatnya tren pembuatan situs web, bahasa pendukung lain telah diciptakan sehingga hal-hal baru bisa diwujudkan. Selain itu, HTML sendiri dimodifikasi setiap beberapa tahun sekali untuk memberi jalan bagi kemajuan HTML.

Sebagai contoh dengan adanya Cascading Style Sheets (CSS) yang dapat Anda gunakan untuk membuat file HTML lebih menarik.

Ada pula JavaScript yang menyediakan interaksi dan efek khusus dasar serta menambahkan sebuah kekuatan lain ke HTML.

https://www.google.com/search?q=apa+itu+html&oq=apa+itu+html

Setelah memahami semua dasar-dasar HTML, langkah apa yang akan Anda ambil selanjutnya? Masih ada beberapa hal lain yang perlu dipelajari dengan matang sebelum Anda memutuskan untuk membuat sebuah situs web.

Jika Anda yakin sudah siap membangun situs web Anda sendiri, gunakan semua keterampilan yang telah Anda pelajari dengan baik dari halaman-halaman ini. Selamat mencoba, dan terus kunjungi Kopidev ya.

Tailwindcss itu sangat berbeda dengan dengan Framework lainnya seperti Bootstrap, Foundation, atau Bulma, karena Framework tersebut merupakan sebuah UI Kit, sedangkan tailwindcss bukanlah UI Kit. Tailwindcss tidak memiliki template yang disuguhkan secara default, dan juga tailwindcss tidak memiliki component yang siap digunakan. Dalam artian lain Tailwindcss nggak ngurusin template website yang kamu miliki jadinya seperti apa, Tailwindcss males ngurusin beginian, karena mereka ngurusin Tailwindcss sendiri udah capek *canda njir.

Apakah ini saat yang tepat untuk pindah ke Tailwindcss?

weitss... sabar sob, kalau kalian mengharapkan sebuah framework CSS yang sudah menyediakan banyak component seperti button, card, carousel, dan tete* bengek lainnya, well.... framework ini nggak cocok sama sekali dengan kalian, dan saran saya, kalian nggak usah lagi baca artikel ini. Mending kalian baca berita tentang Lucinta Luna yang barusan release Kopi Ko&thol. ?

Nah, yang cocok untuk pengguna Tailwindcss adalah mereka yang ingin mengimplement sebuah UI yang "gue banget", ngerti maksudnya? Mudahnya, framework ini cocok bagi mereka yang ingin memiliki UI dengan sense berbeda dari yang lainnya.

Low Level Class

Tailwindcss menyediakan class utility yang cukup low level dan composable, yang menjadikan Tailwindcss mudah untuk membangun sebuah UI interface yang kompleks dan memiliki ciri khas tersendiri. Dibandingkan bootstrap yang sering kita temui sebuah situs sangat terasa sekali Bootstrapnya. Dibawah ini adalah contoh penggunaan class di Tailwindcss:

See the Pen Tailwindcss Example by Arryangga Aliev Pratamaputra (@arryanggaputra) on CodePen.

Component Friendly

Meskipun kalian dapat melakukan banyak hal hanya dengan utility-class seperti diatas, ada saat dimana kalian ingin membuat sebuah komponen yang dapat di re-use berkali-kali. Tailwindcss menyediakan sebuah tools untuk mengekstraksi class dari sebuah komponen, sehingga mudah untuk memperbarui beberapa instance komponen dari satu tempat, contoh saya ingin membuat sebuah button:

<!-- Using utilities: -->
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
  Button
</button>
 
<!-- Extracting component classes: -->
<button class="btn btn-blue">
  Button
</button>
 
<style>
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-blue {
    @apply bg-blue text-white;
  }
  .btn-blue:hover {
    @apply bg-blue-dark;
  }
</style>

Sebetulnya masih banyak lagi yang ingin ditulis, tapi aku butuh bantuan dari kalian semua, semoga kalian bersedia membantu untuk menambahkannya, ataupun memberikan artikel lain.

via GIPHY