Sebelumnya kalian sudah membaca sekilas tentang Perkembangan Web. Pada materi sebelumnya kalian tentunya sudah memahami dengan baik terhadap sejarah dari web, apa itu W3C, bagaimana WWW berkerja, serta pada materi sebelumnya kalian juga mengenal beberapa istilah penting di dunia web. Sebelum melangkah pada seri belajar HTML kali ini, ada baiknya kalian telah  Mengenal Lebih Detail Apa Itu Web

Belajar HTML #2: Pengenalan Tentang HTML

2.1 Apa itu Dokumen HTML

HTML kependekan dari Hype Text Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan tols editor teks sembarang. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam brwoser web surfer. Dokumen ini umumnya berisi informasi atau interface aplikasi di dalam internet.
Ada dua cara untuk membuat sebuah web page: Dengan HTML editor atau dengan editor teks biasa (misalnya Notepad). Untuk latihan atau mencoba materi pada tulisan ini sebaiknya menggunakan Notepad/Sublime, setelah itu pada bagian mendekati akhir dapat menggunakan editor HTML , hal dimaksudkan agar kalian memahami dan terbiasa secara primitif membuat dokumen web.

2.2 Penamaan Dokumen HTML

Pilihlah suatu nama, sembarang nama, kemudian tambahkan sebuah ekstensi “.htm” atau “.html” (tanda petik dihilangkan). Ekstensi dokumen HTML yang menggunakan 3 karakter, awalnya adalah untuk mengakomodasi sistem penamaan yang ada dalam sistem  operasi DOS. Nama dokumen pada beberapa sistem operasi bersifat Case Sensitive. Nama dokumen yang sama tetapi dituliskan dengan case yang berbeda akan dianggap sebagai dokumen yang berbeda, misalnya dokumen.html akan berbeda dengsn DOKUMEN.html . Kasus case sensitive akan dijumpai pada dokumen web yang dihosting di dalam server yang berbasis *nix (keluarga sistem operasi Unix).

2.3 Definisi Elemen pada HTML

Dokumen HTML disusun oleh elemen-elemen. “Elemen” merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Beberapa contoh elemen adalah : head, body, table, paragraf, dan list. Elemen dapat berupa teks murni, atau bukan teks, atau keduanya.

2.4 Definisi Tag pada HTML

Untuk menandai berbagai elemen dalam suatu dokumen HTML, kalian dapat menggunakan tag. Tag HTML terdiri atas sebuah kurung siku kiri (< ….>). Tag umumnya berpasangan contoh  <H2> berpasangan dengan </H2>. Tag yang menjadi pasangan selalu diawali dengan karakter garing (/). Tag yang pertama menunjukan tag awal yang berarti awal elemen, dan yang kedua menunjukan tag akhir, berarti akhir elemen.

Nama elemen ditunjukan dengan nama tagnya. Suatu elemen di dalam dokumen HTML harus dtandai dengan penulisan tagnya yang berpasangan. Ada beberapa elemen yang tidak menghruskan tagnya dituliskan secara berpasangan, elemen tersebut di antaranya adalah:

  • Paragrap dengan tag   <p>
  • Ganti baris – line break dengan tag <br>
  • Garis datar-horizontal rule dengan tag  <hr>
  • List item dengan tag <li>
Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya, dituliskan:
<namatag>……</namatag>

2.5 Elemen HTML yang dibutuhkan

Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag <hhtml>, <head>, dan <body> berikut tag-tag pasangannya. Setiap dokumen terdiri atas tag head dan body. Elemen head berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang sebenarnya tersusun dari link,grafik,paragraf, dan elemen lainnya.
Secara umum dokumen web dibagi menjadi dua section (bagian), yaitu section head dan section body. sehingga setiap dokumen HTML harus mempunyai pola dasar seperti berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Informasi Berupa Teks,dll
</body>
</html>
Setiap dokumen html harus diawali dengan menulis tag <html> dan tag </html> di akhir dokumen. Tag ini menandai elemen HTML, yang berarti dokumen ini adalah dokumen HTML. dalam satu dokumen hanya ada satu elemen html.

Section atau elemen head ditandai dengan tag  <head> diawal, dan tag </head> di akhir. Section ini berisi informasi tentang dokumen htmlnya. Minimal dalam informasi yang dituliskan dalam elemen ini adalah judul dari dokumen. Judul ini akan ditampilkan pada caption bar window browser, ditandai dengan menggunakan tag  <title> judul halaman</title>.

Section elemen body ditandai dengan menggunakan tag  <body> diakhiri </body>. Section body adalah elemen terbesar didalam dokumen HTML. Karena berisi dokumen yang ditampilkan di browser, meliputi Paragraf, grafik, link, tabel, dan sebagainya.

2.6 Hal – Hal yang Harus di Disiapkan untuk Belajar HTML

Berikut, hal-hal yang harus kalian persiapkan:
  1. Komputer/Laptop
  2. Text Editor (Notepad, Sublime, Atom, dll)
  3. Browser (Chrome, Mozila, Safari, dll)
Mencoba adalah salah satu metode belajar yang baik, agar cepat memahami HTML ini. Buatlah sebuh subdirektori dibawahnya dengan nama html. Buka Notepad, silakan coba buat seperti kode berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Judul Halamanku</title>
</head>
<body>
Ini adalah Buatan Halaman HTML Pertamaku.
<b>Sekedar Contoh Lain</b>
</body>
</html>
Hasilnya, seperti berikut ini saat dijalankan dari browser:

2.7 Penjelasan Contoh diatas

Tag html pada dokumen html anda adalah <html>, tag ini memberi tahu bahwa ini adalah awal dari dokumen HTML. Tag terakhir pada dokumen kalian adalah </html>. Tag ini memberi tahu browser klain bahwa ini adalah akhir dari dokumen HTML.

Teks antara  <head> dan </head> adalah informasi header. Informasi header tidak ditampilkan pada window browser. Hanya teks yang berada di antara tag <body> dan </body> yang akan ditampilkan pada browser kalian.

Teks diantara tag  <title> dan </title> adalah judul dokumen kalian, Judul ditampilkan pada window caption kalian.

2.8 Cara Menggunakan Tag HTML

  • Tag HTML diapit oleh dua karakter kurung siku
  • Tag html secara normal selalu berpasangan, contoh <i>Berpasangan dengan </i>
  • tag pertama adalah tag pembuka, dan tag kedua adalah tag penutup
  • Tag html tidak ‘case Sensitive’ <b> Sama dengan <B>

2.9 Atribut Tag HTML

Tag dapat mempunyai Atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan. Tag berikut tidak mempunyai atribut: <body>. Tag <body> ini tidak menggunakan ataribut, sehingga dokumen HTML ditampilkan dengan warna background sesuai dengan deafult web browsernya. Umunya berwarna dasar putih.
Tag berikut mempunyai atribut: <body bgclor=”red”>. Tag <body> ini menggunakan atribut bgcolor dengan nilai “red”, maka saat dieksekusi warna backgroundnya menjadi merah.

2.10 Belajar HTML Lewat Sorce HTML Lain

Belajar HTML akan lebih efektif jika kita sering berlatih dan melihat bagaimana programer web lain melakukannya. Pernahkah kalian melihat suatu web page dan terkagum melihatnya: “Bagiamana mereka membuatnya?”.

Untuk mengethuinya, sangat mudah. Kalian dapat melihatnya dengan cara >> Klik menu VIEW >>Source atau kli Page Source.