wiblogger

Modul HTML: Belajar HTML dari Nol bersama wiBlogger.com

Sebagai motivasi awal, dengan mengikuti materi dan praktek pada modul ini, anda setidaknya akan mendapatkan beberapa hal yang akan menjadi modal yang sangat membantu dalam proses belajar web programming secara otodidak. Beberapa hal ini adalah:

Mengerti tentang peranan HTML, CSS dan Javascript sebagai pembangun halaman web
Mengerti tentang bagaimana cara menerapkan CSS dan Javascript pada HTML
Mampu membuat halaman web sederhana
Mengetahui materi-materi terkait lainnya yang dibutuhkan dalam pembelajaran HTML, CSS dan Javascript


Belum pernah belajar web programming sebelumnya ? Apakah baik jika mulai belajar dari HTML ?
Ya, HTML adalah kemampuan front-end developer. Kenapa harus mulai dari front-end ? Sederhananya, sebelum kita dapat memproduksi sesuatu (dengan kemampuan back-end programming), kita harus paham dulu tentang apa yang akan kita produksi. Selain itu, tiga bahasa yang akan anda pelajari pada sisi front-end ini akan menjadi pondasi yang sangat penting jika anda hendak mendalami back-end programming.

Materi:

Sampai disini, anda telah mengerti tentang struktur utama halaman web serta fungsi masing-masing bahasa (HTML, CSS, Javascript).


Struktur Minimum HTML

Dalam pembuatan HTML, terdapat beberapa elemen yang harus didefinisikan. Beberapa elemen ini merupakan struktur minimum dari dokumen HTML.

struktur minimum HTML

  • DOCTYPE <DOCTYPE html> adalah kode yang mendefinisikan tipe dokumen HTML. Kode ini harus diletakkan pertama kali (paling atas).
  • Elemen HTML: html Tepat setelah doctype, kode diteruskan dengan elemen html, ini adalah elemen akar. Elemen-elemen HTML lainnya harus diletakkan didalam elemen ini (merupakan sub dari elemen ini).
  • Elemen HTML: head Elemen yang menampung berbagai informasi terkait dokumen HTML, hal ini seperti misalnya judul, deskripsi dan lain sebagainya. Elemen ini tidak akan ditampilkan pada layar browser.
  • Elemen HTML: body Merupakan tubuh HTML. Elemen inilah yang akan ditampilkan pada layar browser.
  • Elemen HTML: title Elemen yang mengatur judul dokumen. Konten yang terdapat pada elemen title ini akan ditampilkan pada Tab browser.


Terkait Blogger.com
Jika sistem minimum HTML mewajibkan beberapa elemen diatas, kenapa pada pembuatan posting di blogger.com, HTML bisa dibuat tanpa elemen-elemen diatas ?

Pada pembuatan post blogger.com, yang kita buat bukanlah dokumen HTML melainkan elemen-elemen HTML. Sistem blogger akan meletakkan elemen-elemen yang kita buat pada Antarmuka post editor ke suatu lokasi (sesuai tema/template yang digunakan) yang merupakan sub dari elemen body. Jadi jelas, kita tidak perlu atau bahkan tidak boleh menyertakan elemen-elemen diatas kedalam post editor.


Cara browser merender HTML (Membaca, membuat dan menampilkan)

Masih merujuk pada sistem minimum HTML diatas, terdapat 2 elemen utama. Dua elemen ini adalah head dan body.

  • head Elemen ini berisi berbagai elemen yang bertujuan memberikan informasi terkait dokumen HTML. Anda mungkin akan bingung tentang apa yang dimaksud dengan "informasi" disini. Untuk lebih jelasnya, sebagai contoh, salah satu elemen yang sering digunakan pada elemen head adalah elemen meta untuk mendefinisikan status index mesin pencari (Apakah mesin pencari boleh mengindex halaman atau tidak). Mesin pencari akan membaca informasi yang terdapat pada elemen meta ini untuk menentukan apakah halaman akan diletakkan pada database mereka atau tidak.
  • body Elemen ini merupakan tubuh dokumen HTML. Elemen inilah yang ditampilkan pada layar browser.

    <!DOCTYPE html>
    <html>
       <head>
          <title>Belajar HTML</title>
       </head>
       <body>
          <p>Belajar membuat paragraf</p>
       </body>
    </html>

    Belajar membuat paragraf



Tentang Elemen HTML

HTML adalah bahasa markup yang tersusun atas elemen-elemen HTML. Elemen HTML didefiniskan (dibuat) dengan Tag HTML. Beberapa contoh elemen HTML adalah seperti html, head, body, title, h1, p dan lain sebagainya.

Sintak / cara penulisan
Sintak:
<elemen>content...</elemen>

Keterangan:
  • elemen adalah nama elemen
  • <elemen> adalah tag pembuka (Start tag)
  • </elemen> adalah tag penutup (Closing tag)
  • Tag penutup ditulis sama dengan tag pembuka dengan menambahkan / tepat sebelum elemen.

    Apakah semua tag harus ditutup ?

    Ya. Meskipun pada HTML5 penulisan tag penutup bersifat opsional, namun, hal ini sangat tidak dianjurkan. Jadi, tetap tutup semua tag.
  • elemen bersifat Case Insensitive
  • elemen bersifat Predefined. Dengan kata lain, kita hanya bisa menggunakan nama elemen yang telah diizinkan oleh HTML.
Daftar Elemen HTML
Untuk daftar elemen HTML, anda bisa menuju halaman: Daftar Elemen HTML.


Atribut HTML

Atribut HTML merupakan deklarasi data pada elemen HTML. Atribut memberikan informasi terkait elemen HTML yang bersangkutan, baik itu sebagai informasi wajib maupun hanya sebagai informasi tambahan.

Contoh penerapan atribut HTML
<p title='HTML paragraf'>Paragraf</p>

Pada contoh diatas, title="HTML paragraf" merupakan Atribut HTML.

Sintak
Sintak
<elemen nama='value'>Paragraf</elemen>


Keterangan:
  • nama adalah nama atribut yang bersangkutan (Predefined)
  • value adalah nilai (data).
  • Setiap elemen html bisa memiliki satu atau lebih atribut
  • Deklarasi atribut diletakkan didalam Tag pembuka
  • Deklarasi value bisa dilakukan menggunakan Single quote (') atau Double quote (").

    HTML5 memungkinkan pendefinisian atribut tanpa mengunakan quote.

    Contoh
    <p class=class1>Paragraf</p>

    Hal ini tidak dianjurkan, jadi tetap gunakan quote dalam mendeklarasikan atribut.
Jenis-jenis atribut HTML
Terdapat 3 jenis atribut HTML, tiga jenis atribut ini adalah Atribut Wajib, Atribut Khusus dan Atribut Global (umum).


Atribut Wajib

Atribut wajib adalah atribut yang berlaku untuk elemen-elemen tertentu saja dan harus didefinisikan. Contoh atribut wajib HTML adalah atribut href untuk elemen link.

<a href="http://www.wiblogger.com">wiBlogger.com</a>


Apa yang terjadi jika atribut wajib tidak didefinisikan ?

HTML anda tidak valid (tidak benar) dan browser akan merender elemen yang bersangkutan sebisa yang mereka bisa lakukan. Pada kasus ini, elemen mungkin ditampilkan tidak seperti yang seharusnya.


Artibut Khusus

Atribut yang hanya tersedia untuk elemen-elemen tertentu saja dan bersifat optional (bisa didefinisikan dan bisa tidak). Contoh atribut khusus adalah atribut target untuk elemen link.

<a target="_blank" href="http://www.wiblogger.com">wiBlogger.com</a>

Keterangan target="_blank" mengintruksikan browser untuk membuka link pada tab baru. Tanpa atribut ini, link tetap akan bekerja sebagaimana mestinya (terbuka pada tab yang sama).


Atribut Global

Atribut yang tersedia untuk semua elemen HTML dan bersifat opsional. Contoh atribut global adalah seperti title, class, id, dan lain sebagainya.
Daftar atribut global HTML
Untuk daftar atribut global HTML, anda bisa menuju halaman: Daftar Atribut Global HTML.


Membuat HTML sederhana

Pada modul ini, kita akan praktek membuat dokumen HTML sederhana secara offline. Pastikan anda mengikuti praktek ini untuk memahami poin-poin yang akan anda jumpai selanjutnya.

Persiapan
  • Text editor Untuk text editor, kita akan menggunakan Notepad++ (Download dan instal)
  • Buat for baru Untuk memudahkan proses belajar anda, buat forder baru dengan nama Belajar HTML. Semua aset (media) untuk keperluan belajar HTML akan kita letakkan pada forder ini.
Membuat file HTML
Buka Notepad++, jika ini adalah kali pertama anda menggunakan Notepad++, tab untuk file baru akan secara otomasi dibuat. Atau anda bisa membuat file baru dengan cara klik shortcut New file (atau bisa melalui toolbar File > New).

membuat file baru di notepad

Pada keadaan awal, bahasa default yang ter-apply pada file baru adalah txt, atur bahasa file baru ke HTML dengan cara: pada toolbar Notepad++, klik Language dan pilih H > HTML.

belajar html - atur bahasa notepad

Sekarang, bahasa yang ter-apply pada file baru adalah HTML, selanjutnya, Copy dan Paste semua kode HTML sederhana dibawah kedalam kode editor.

HTML sederhana
<!DOCTYPE html>
<html>
   <head>
      <title>Belajar HTML</title>
   </head>
   <body>
      <h1>Belajar HTML</h1>
      <p>Konten paragraf 1</p>
      <p class='paragraf'>Konten paragraf 2</p>
      <p class='paragraf' id='paragraf3'>Konten paragraf 3</p>
   </body>
</html>


belajar html - kode html sederhana

Selanjutnya, simpan file ke dalam folder Belajar HTML yang telah anda siapkan sebelumnya dengan cara klik toolbar File > Save. Ganti nama file menjadi index (Anda bisa menamai file ini dengan nama lainnya, namun untuk praktek ini, kita namai file ini dengan index).

belajar html - simpan kode html
Hasil
Untuk melihat hasil, pada toolbar Notepade++, klik Run dan pilih Browser yang dikehendaki (yang terinstal pada perangkat anda). Pada panduan ini, browser yang digunakan adalah Google Chrome. Cara lain untuk membuka file adalah dengan cara Double-click pada file index yang terdapat pada folder Belajar HTML, perangkat akan secara otomatis membuka file melalui default browser.


File index akan terbuka pada browser yang anda pilih.

belajar html - hasil


Sampai pada paragraf ini, anda sudah memiliki pemahaman dasar tentang HTML serta beberapa materi terkait HTML. Pada hasil HTML sederhana yang telah kita buat, tampilan HTML masih sangat sederhana. Selanjutnya, kita akan mempelajari bagaimana cara menerapkan CSS serta materi-materi terkait CSS untuk mendesain HTML.

Modul: Belajar CSS (belum tersedia)

Kami akan mengupdate ketersediaan materi secara bertahap, Anda bisa berlangganan artikel kami melalui formulir Email Subscription yang terdapat di bagian bawah blog ini untuk mendapatkan update materi-materi yang akan kami terbitkan selanjutnya.

Bagikan ke:

Tambahkan komentar untuk:

Modul HTML: Belajar HTML dari Nol bersama wiBlogger.com
Berlangganan Artikel
Kami akan mengirimkan berbagai referensi blogging pilihan langsung ke alamat email anda. Pastikan juga anda melakukan konfirmasi pada email yang bersangkutan untuk mengaktifkan layanan. Panduan bagaimana cara berlangganan artikel bisa anda baca disini.
×
Jangan tampilkan lagi