Setelah sebelumnya kita sudah belajar Cara Kerja Sebuah Website, sekarang saatnya kita membahas HTML, sebenarnya apa itu HTML dan bagaimana kita menggunakan html untuk menstruktru suatu website.
Web Browser apapun yang kamu gunakan saat ini, entah itu Chrome, Safari, Firefox atau bahakn Opera, mereka semua memiliki satu tujuan yang sama, yaitu menrender website dengan cara mengolah file HTML, CSS dan juga Javascript, dengan begini kamu bisa melihat website pada web browsermu.
Jadi sebagai contoh kita memiliki sebuah kode HTML dimana kode ini akan membuat website kita memiliki judul/title misalnya "Hello Teman" dan pada bagian body atau halamnya akan ada heading yaitu "Selamat Datang Di Tresnadev.com".
<head>
<title>Hello Teman</title>
</head>
<body>
<h1>Selamat Datang Di Tresnadev.com</h1>
</body>
Jadi misalkan kita membuka file html ini dengan web browser maka tampilanya akan sebagai berikut.
Jadi seperti yang kalian lihat, pada bagian tab atas ada keterangan tiitle Hello Teman, dan untuk bagian body dimana ada tulisan besar disitu tertulis "Selamat Datang Di Tresnadev.com" sesuai dengan apa yang kita inginkan.
Nah sampai sini sebelum kita mengetahui lebih dalam tentang HTML kita harus ingat bahwa html adalah pondasi awal dari semua website, jadi kamu tidak akan melihat website yang dibuat hanya dengan menggunakan CSS saja dan juga kamu tidak akan bisa melihat website yang hanya dibuat dengan hanya Javascript, akan tetapi kamu bisa melihat website yang hanya menggunakan HTML saja.
HTML adalah kepanjangan dari HyperText Markup Language, dan hal yang perlu kita garis bawahi disini ialah kata "Markup" dikarenakan cukup banyak Markup language yang ada sekarang ini.
Mungkin kamu pernah mendengar XML kependekan Exstensible Markup Language dan juga GML Generalized Markup Language.
Pada html kamu bisa membuat struktur website dan layoutnya sekaligus menggunakan tag html, hanya sebagai info, coba kamu kunjungi codepen.io dimana website tersebut memberikan layanan pengcodingan html secara realtime, dimana kamu mengetik kode dan kode tersebut akan berjalan secara realtime, tanpa perlu me refresh halaman website.
Di codepen.io kamu juga tidak perlu melakukan sign-up (daftar) kamu bisa langsung mencoba coding dengan membuka link ini Coding codepen.io
Nah sekarang saya mau kamu membuka link berikut Books Example HTML, disini kamu akan melihat dua versi buku yaitu plain text dan HTML.
Silahkan kamu buka kedua file tadi di browser dengan cara klik kanan dan open in new tab, maka kamu akan meilhat isi dari buku ini dalam versi plaint text dan html, berikut adalah perbedaanya.
Seperti yang kamu lihat, untuk versi html dia memiliki struktur dan tersusun rapih, sedangkan yang satunya yaitu versi plain text tidak ada strukturnya sama sekali.
Nah untuk sekarang kita akan membuat struktur website yang sama dengan versi html di atas, dan berikut adalah kodenya.
<h1>The Adventures of <br> Sherlock Holmes</h1>
<br>
<h2>by Arthur Conan Doyle</h2>
Berikut adalah hasilnya.
Jadi mari saya jelaskan, untuk bagian pertama kita menemui kode :
<h1>The Adventures of <br> Sherlock Holmes</h1>
Di html, ada yang namanya h1, dimana h1 ini bisa dikatakan sebagai judul halaman atau heading, semakin besar angka setelah h maka semakin kecil besar hurufnya, misal kalian lihat gambar di bawah ini.
Dan kode yang kedua yang akan saya jelaskan ialah <br> kode <br> sendiri digunakan untuk pindah baris, jika kamu lihat gambar tadi kamu bisa melihat bahwa ada kata "The Adventure of Sherlock Holmes" ini pada kode kita tuliskan sejajar di antara tag <h1> dan </h1> akan tetapi pada browser kata "Sherlock Holmes malah turun kebawah dan tidak menyambung dengan kata " The Adventure of", itulah kegunaan <br>.
Untuk <h2> saya rasa kamu sudah tahu kegunaanya, jadi saya tidak akan menjelaskanya lagi.
Untuk tag sendiri akan kita bahas di post terpisah dimana kita akan mempelajarinya lebih dalam, selain itu kita juga akan membahas berbagai maca tag yang sangat berguna sekali untuk kedepanya dalam belajar web development.
Mungkin ada yang bingung dengan postingan tentang html ini dan memiliki pertanyaan "kenapa tutorial awal html kok rasanya langsung lompat ke bagian yang rada susah, tidak dimulai dari awal, dan juga kenapa tidak ada sejarahnya dulu biar kita semua tahu?".
Karena ini hanyalah permulaan atau sebatas pengenalan saja makanya saya langsung menjelaskan sedikit mengenai kode yang saya buat tadi, dan untuk sejarah saya rasa tidak terlalu penting saya kasih di website ini karena sudah banyak yang memposting sejarah html di internet.
Tenang saja di tutorial html berikutnya kita akan benar-benar belajar dari awal, untuk saat ini kamu hanya perlu tahu dan belum perlu melakukan coding html apapun.
Tutorial berikutnya kita akan membahas mengenai tag.
Post a Comment