Jurnal Perkuliahan 2 Pemrograman Web oleh Haikal Algivari
HTML adalah bahasa markup untuk membuat suatu halaman web. HTML sendiri merupakan singkatan dari Hyper-Text Markup Language. HTML menggambarkan suatu struktur halaman web menggunakan markup.
Elemen HTML merupakan building blocks dari halaman HTML. Elemen-elemen HTML diwakili oleh tag. Tag-tag tersebut sangat bervariasi sesuai dengan kegunaannya, seperti "heading", "paragraph", "table", dan lain-lain. Browser tidak akan menampilkan tag-tag tersebut, melainkan me-render-nya agar terbentuk suatu halaman web. Misalkan kita mempunyai suatu konten berupa paragraf. Memasukkan konten tersebut ke dalam sebuah tag HTML sehingga dapat menyerupai suatu paragraf disebut struktur HTML. Misalkan seperti berikut.
<p> This is the content </p>
Pada contoh tersebut, kalimat "This is the content" merupakan konten dari struktur HTML tersebut. Lalu diapit oleh 2 tanda tag HTML, di mana <p> merupakan opening tag dan </p> merupakan closing tag. Karakter dalam tanda <> merupakan karakter yang menandakan nama tag tersebut. Tiap nama tag memiliki fungsi yang berbeda-beda. Di sini, p merupakan nama tag untuk paragraf.
Selain 2 tag yang mengapit konten yang biasanya disebut container element, ada juga stand alone element yang dimana hanya membutuhkan 1 tag saja tanpa perlu ditutup dengan closing tag. Contohnya seperti nama tag </br> dan <img>.
Dalam tag, kita dapat menambahkan atribute dan value dari atribute tersebut dalam tag. Atribute dapat memberikan informasi tambahan mengenai suatu elemen HTML. Atribute dapat seperti kelas, id, bahasa, gaya, identitas, dan sumber. Atribute biasanya diletakkan dalam opening tag, sebelum braket kanan (>). Sedangkan value merupakan nilai yang ditetapkan untuk atribute yang diberikan. Value ini harus terkandung di dalam tanda kutip. Misalkan seperti berikut.
<img src="my_picture.jpg"/>
Berikut merupakan contoh sederhana dari struktur HTML.
Deklarasi <!DOCTYPE> mewakili jenis dokumen, dan membantu browser untuk menampilkan halaman web dengan benar. Deklarasi tersebut hanya dapat muncul sekali, di bagian atas halaman (sebelum tag HTML apa pun). Deklarasi <!DoCtYpE> tidak case-sensitive. Deklarasi <!DOCTYPE> untuk HTML5 adalah <!DOCTYPE html>.
Setelah deklarasi <!doctype>, konten pada halaman harus terkandung di dalam <html> tag. Head berisi judul halaman dan informasi meta tentang halaman. Informasi meta tidak terlihat oleh pengguna, namun memiliki banyak tujuan, seperti memberikan informasi ke search engine. Body berisi konten halaman yang sebenarnya. Segala sesuatu yang terkandung dalam body dapat dilihat oleh pengguna (kecuali untuk beberapa pengecualian).
Semua elemen "bersarang" atau nested di dalam satu sama lain. Nested adalah apapun yang terjadi ketika kita meletakkan tag di dalam tag lainnya yang sudah berisi. Misalnya, kita akan meletakkan bagian <title> tag dalam <head> tag. Sekarang <title> nested di dalam <head>.
Judul HTML didefinisikan dengan <h1> hingga <h6> tag. <h1> tag mendefinisikan judul yang paling penting, sedangkan <h6> tag mendefinisikan judul yang paling tidak penting. Lalu paragraf HTML didefinisikan dengan <p> tag.
Untuk membuat baris baru dalam suatu halaman web, kita tidak dapat langsung melakukan enter atau membuat <p> baru seperti berikut.
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
Struktur di atas tetap me-render di halaman web sebagai 1 baris paragraf. Seperti berikut:
My Bonnie lies over the ocean.My Bonnie lies over the sea.My Bonnie lies over the ocean.Oh, bring back my Bonnie to me.
Untuk membuat baris baru, kita harus menambahkan <br> tag di tiap akhir kalimatnya agar kalimat di atas dapat tampil layaknya seperti penulisan kalimat yang benar. Selain itu, alternatif lainnya ialah dengan menggunakan <pre> tag. Dengan begitu, alih-alih kita menggunakan <p> tag seperti pada contoh sebelumnya, kita gantikan dengan menggunakan <pre> tag, baik untuk opening maupun closing tag-nya. Hasilnya tetap akan sama seperti saat kita menggunakan <br> tag di tiap akhir kalimat.
Untuk formatted text, kita dapat menebalkan huruf dengan menggunakan <strong> atau <bold>. Kita juga dapat memiringkan huruf dengan menggunakan <em> atau <i>. Contohnya seperti berikut.
Here is a paragraph with <em>emphasized</em> text and <strong>important</strong> text.
</p>
Here is another paragraph with <i>Italic</i> text and <b>Bold</b> text.
</p>
Banyak simbol matematika, teknis, dan mata uang yang tidak ada pada keyboard normal. Untuk menambahkan simbol tersebut ke halaman HTML, kita dapat menggunakan nama entitas HTML atau kode. Salah satunya seperti karakter spasi ( ) yang dikodekan dengan  .
Link HTML didefinisikan dengan <a> tag. Tujuan dari link ditentukan dalam atribut href. Atribut target menentukan tempat untuk membuka dokumen tertaut(_self,_blank,...). Penulisannya adalah sebagai berikut.
<a href="http://www.google.com" target="_blank">This is a link to Google!</a>
Gambar HTML didefinisikan dengan <img> tag. File sumber (src), teks alternatif (alt), lebar, dan tinggi disediakan sebagai atribut. Contoh penulisannya adalah sebagai berikut.
<img src="fsu-logo.jpg" alt="FSU Logo" width="104" height="142">
Dalam pengambilan file gambar, jika file gambar berada pada satu direktori yang sama dengan file html-nya, maka kita dapat langsung menuliskan nama file gambar tersebut. Sedangkan jika file gambar tidak berada pada satu direktori yang sama dengan file html-nya, maka harus dituliskan path spesifik dari gambar tersebut.
Untuk list terdapat 2 jenis, yaitu unordered list (<ul>) dan ordered list (<ol>). Untuk list item-nya dapat ditulis di dalam <ul> atau <ol> tag, dan harus diisi di dalam <li> tag untuk pengisian list item-nya.
Kita dapat menambahkan komentar ke kode kita yang tidak dapat dirender oleh browser, tetapi hanya terlihat saat kita melihat kodenya secara langsung. Komentar ini dapat digunakan untuk mengatur kode kita ke dalam beberapa bagian dan juga kita dapat mengomentari potongan besar kode untuk menyembunyikannya dari browser. Penulisannya adalah sebagai berikut.
<div id="header">Header Content </div>
<!-- End of header -->
