HTML singkatan dari Hypertext Markup Language. Jadi disini bisa kita lihat bahwa HTML adalah Markup Language ya, bukan Programming Language. Sebagai markup language, kita memberikan tanda-tanda pada konten kita, dimana nantinya tanda ini akan diinterpretasikan oleh browser, sehingga browser tahu bagaimana cara untuk menampilkan konten tersebut.

Tanda-tanda yang kita tuliskan di dalam konten HTML ini dikenal dengan nama Tag. Dengan menggunakan Tag, kita memberitahu browser, bagianmana dari konten kita yang berupa judul, paragraf, tabel, list, dan lain-lain.

HTML diciptakan di sekitar tahun 1989 oleh Bapak Tim Berners-Lee dan HTML baru mulai diterapkan di sekitar tahun 90-an. Secara pada jaman tersebut perkembangan internet tidak secepat sekarang ya. Pada masa itu, yang bisa mengakses internet kebayakan hanya dari instansi pemerintahan dan kampus saja.

Pada masa-masa awal, HTML digunakan oleh peneliti dan para ahli untuk saling berbagi pengetahuan dalam bentuk dokumen teknis. Jadi isi dari situs-situs di internet pada masa itu kebanyakan adalah pengetahuan teknis. Pada saat itu masih belum ada situs seperti sosial media, youtube, dan lain-lain.

Jadi kalau misalnya saya masih di jamannya 90-an, dan saya ingin berbagi pengalaman dan keahlian saya di bidang coding, maka saya mesti menulis artikel atau dokumen dalam format HTML, dan kemudian mengunggah ke situs, agar bisa dibaca oleh orang lain.

Hal yang paling penting dari HTML adalah kemampuannya untuk menghubungkan berbagai dokumen melalui hyperlinks. Jadi misalnya kalau kita sedang membaca dokumen A, di dalam dokumen tersebut akan menyebutkan kalau ingin mempelajari lebih lanjut bisa membaca dokumen B, C, dan seterusnya. Jadi di dalam dokumen A sudah disertakan yang namanya hyperlinks, atau yang saat ini lebih dikenal dengan nama link, jadi hanya dengan cara mengklik link tersebut, kita secara otomatis akan dibawa oleh browser ke dokumen lain.

Dengan adanya hyperlink, maka dokumen A bisa terhubung ke dokumen B, C, dan lain-lain. Dan kemudian dokumen B juga memberikan link balik ke A, C dan dokumen-dokumen lainnya. Dan begitu juga yang terjadi dengan dokumen-dokumen selanjutnya.

Apabila kita membuat diagram dari dokumen-dokumen yang ada. Misalnya ini ada 6 buah dokumen HTML. Dan kemudian menarik garis untuk link antar dokumen tersebut, maka kita akan mendapatkan diagram yang bentuknya seperti jaring sarang laba-laba. Oleh karena itu kumpulan dari banyak HTML yang saling terhubung, dikenal dengan nama Web.

Di dalam pemograman Front-End, kita mempelajari mengenai HTML, CSS, dan Javascript. Namun untuk membuat sebuah situs, sebenarnya kita sudah bisa membuat sebuah situs hanya dengan menggunakan HTML saja, tanpa disertai oleh CSS dan Javascript, walaupun tidak sempurna ya. Sebaliknya, kita tidak akan bisa membuat situs hanya menggunakan CSS saja atau hanya menggunakan Javasript saja, karena kita sudah pasti membutuhkan HTML-nya.

Jadi diantara ketiganya, yang paling penting adalah HTML. Semua Front-End Developer sudah pasti harus menguasai HTML. Dan kabar baiknya bagi Anda yang baru belajar, HTML ini adalah bahan pelajaran yang paling mudah untuk dikuasai.

HTML yang digunakan sekarang, pada saat video ini dibuat, adalah HTML versi 5. Namun HTML juga tetap menjaga backwards compatibility. Artinya browser mesti tetap bisa menampilkan konten dengan benar walaupun konten tersebut dibuat dengan HTML versi sebelumnya.

Sekarang saya memberikan contoh screenshot dari ebook yang saya ambil dari situs Gutenberg. Gutenberg ini adalah situs yang menyediakan banyak ebook gratis, yang bisa langsung Anda baca tanpa perlu mendaftar. Dan yang menariknya lagi, Gutenberg menyediakan ebook dalam berbagai macam format, sehingga kita bisa memilih format mana yang paling nyaman untuk kita baca.

Dalam contoh ini saya mengambil screenshot dari format Teks yang bisa dilihat pada gambar sebelah kiri, dan format HTML yang bisa dilihat pada gambar sebelah kanan. Kedua screenshot diambil dari ebook yang sama, menggunakan browser yang sama.

Di sebelah kiri kita bisa melihat format teks dari ebook dengan judul Alice Adventures in Wonderland, dimana judul ini ditulis pada bagian paling atas dari konten. Kemudian by Lewis Caroll adalah nama pengarangnya, lalu diikuti oleh versi ebooknya. Setelah itu kita dapat membaca daftar isi.

Dengan menggunakan format teks, kita bisa melihat bahwa seluruh ebook menggunakan font yang sama, baik jenis fontnya dan ukuran fontnya. Bahkan sama sekali tidak ada font yang tebal ataupun yang miring. Disini kita mesti mengintepretasikan sendiri konten yang sedang kita baca, apakah ini bagian judul, judul kecil, ataupun daftar isi.

Sedangkan di sebelah kanan, kita menggunakan format HTML, dimana kita sudah bisa membedakan judul konten, karena menggunakan huruf yang lebih besar. Untuk membaca konten juga lebih nyaman karena diberikan jarak yang cukup besar antar jenis konten. Dan fitur yang paling penting dari HTML, yaitu hyperlink, bisa kita lihat pada bagian daftar isi dengan tulisan berwarna biru. Misalkan kita mengklik pada tulisan CHAPTER I, maka browser akan langsung membawa kita ke bab pertama. Begitu juga apabila kita mengklik tulisan chapter-chapter lainnya. Dengan adanya hyperlink, kita dengan lebih mudah dapat melakukan navigasi menuju ke bab yang kita inginkan.

Pertanyaan berikutnya, bagaimana cara memasukan Tag ke dalam konten kita? Nah, ini adalah aturan umum dari HTML Tag.

Untuk menuliskan Tag ke dalam konten, pertama kita menuliskan nama tag di dalam tanda kurung, seperti ini. Kemudian diikuti oleh konten yang akan ditandai dengan tag tersebut. Dan di akhir konten, kita menuliskan kembali nama tag di dalam tanda kurung. Namun kita menambahkan tanda / setelah kurung pembuka.

Tag yang berada di kiri ini adalah tag pembuka. Yang menandakan bahwa seluruh konten setelah tag ini akan ditandai sebagai bagian dari . Sedangkan Tag yang berada di sebelah kanan adalah tag penutup, yang memberitahu browser bahwa seluruh konten setelah tag penutup sudah bukan bagian dari lagi.

Sebagai contoh, kita bisa menggunakan Tag H1 untuk menandakan bahwa konten tersebut adalah judul tingkat pertama. Misalnya kita bisa menuliskan judul Alice’s Adventures in Wonderland menjadi:

Alice’s Adventures in Wonderland

Untuk membuat judul, kita bisa menggunakan tag H1 hingga H6. Tag H1 adalah judul paling besar, yang menggunakan font paling besar juga. Semakin tinggi tingkatan judul, maka font yang digunakannya akan semakin kecil. Dan judul yang paling kecil adalah tingkat 6, atau Tag H6. Untuk Tag H7 dan seterusnya sudah tidak dikenal oleh browser.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.