Belajar Membuat Tampilan Web Bagian 2 (Persiapan dan Elemen HTML)

Berkas HTML

Berkas HTML adalah berkas yang berisi skrip HTML. Berkas HTML dapat dibuka oleh browser. Berkas HTML disimpan menggunakan ekstensi *.htm atau *.html. Ketika anda membuka sebuah halaman situs web dan kemudian anda menyimpan (Save as) halaman tersebut ke komputer anda, maka halaman tersebut akan disimpan sebagai berkas HTML oleh browser.

Untuk membuat berkas HTML, anda dapat melakukannya dengan berbagai cara. Cara yang paling sederhana adalah menggunakan Notepad. Hal ini telah diperagakan pada bagian 1.

Teks Editor

Teks editor adalah aplikasi yang digunakan untuk mengedit skrip atau kode. Anda dapat menggunakan teks editor bawaan OS (Operating System) anda untuk mengedit skrip HTML, Notepad kalau di OS Windows. Cara yang lebih mantap adalah menggunakan aplikasi teks editor sejenis Notepad++ atau Sublime Text. Saya sendiri menggunakan Sublime Text sebagai teks editor untuk membuat web.

Menggunakan aplikasi teks editor memberikan beberapa kelebihan jika dibandingkan menggunakan Notepad, diantaranya :

  1. Anda dapat membedakan antara tag, atribut dan nilai atribut melalui perbedaan warna.
  2. Anda dapat melihat nomor baris tiap baris kode.
  3. Anda dapat terbantu dengan adanya sugesti atau rekomendasi saat anda mengetik kode.
  4. Terdapat beberapa shorcut keyboard untuk cara cepat melakukan hal tertentu.
  5. Skrip HTML adalah skrip yang berlapis. Anda harus memperhatikan tag pembuka dan tag penutup. Dengan teks editor ini anda dapat melihat pasangan tag pembuka dan tag penutup.

Tag HTML

Tag HTML adalah kata-kata yang dialokasikan sebagai kode yang dapat dimengerti oleh browser untuk dieksekusi menjadi tampilan web. Ada sangat banyak tag HTML, anda dapat mempelajari tag HTML di sini. Contoh tag, diantaranya :

  1. html, untuk menandakan berkas sebagai dokumen HTML.
  2. head, untuk menandakan kepala/kop dokumen HTML.
  3. title, untuk mendeskripsikan judul dokumen HTML.
  4. body, untuk menandakan badan dokumen HTML, tempat meletakkan konten web.
  5. p, untuk menandakan paragraf.

Elemen HTML

Elemen HTML adalah implementasi dari tag HTML untuk menghasilkan suatu bentuk tertentu. Contoh kata: "Untuk membuat elemen tombol di web, kita menggunakan tag apa?". Berdasarkan bentuknya, ada 2 macam elemen HTML, yaitu elemen HTML kontainer dan elemen HTML non-kontainer.

Elemen HTML Kontainer

Elemen HTML kontainer adalah elemen HTML yang memiliki pembuka dan penutup. Di dalamnya dapat diletakkan teks ataupun elemen HTML. Skrip HTML bisa jadi berlapis-lapis, ada elemen di dalam elemen dan di dalamnya lagi ada elemen.

Format pembuatan elemen jenis ini adalah :

  1. Pembuka, di awali dengan simbol <, kemudian nama tag HTML, dan kemudian diakhiri dengan simbol >.
  2. Penutup, di awali dengan simbol <, kemudian dilanjutkan dengan simbol /, kemudian nama tag HTML yang sama dengan yang dituliskan pada pembuka, dan diakhiri dengan simbol >.

Contoh :

 

Beberapa elemen HTML dapat diisi teks secara langsung di dalamnya, beberapa juga tidak. Teks diletakkan diantara pembuka dan penutup elemen HTML.

Contoh :

Ini adalah teks

Beberapa elemen HTML dalam jenis kontainer dapat dimasukkan tag HTML di dalamnya, beberapa juga tidak.

Contoh :


Teks

Contoh kode HTML yang agak rumit :




Teks 1



Teks 2





Teks 3

Pantangan Saat Menulis Kode HTML Berlapis

Jangan ada elemen HTML yang lupa penutupnya, contoh :


Teks

Jangan ada elemen HTML yang bersilangan, contoh :


Teks

 

Ada banyak sekali tag HTML yang masuk ke dalam jenis ini, diantaranya: html, head, title, body, p, b, i, u, div, dsb.

Catatan: ketika mengetik elemen HTML yang berlapis, sebaiknya tiap ganti lapisan diberikan TAB. Ini untuk mempermudah pengecekan jika ada kesalahan.

Elemen HTML Non-Kontainer

Elemen HTML non-kontainer adalah elemen HTML yang tidak memiliki penutup dan bersifat tunggal (tidak bisa diisi elemen HTML). Format penulisan elemen HTML ini adalah diawali dengan simbol <, kemudian nama tag, kemudian diikuti spasi dan simbol /, dan diakhiri dengan simbol >.

Contoh :

 

Ada beberapa tag HTML yang masuk ke dalam jenis ini, diantaranya: br, input, link, dsb.

Penutup

Sekian isi tulisan saya yang singkat kali ini, semoga dapat membantu. Tetap semangat belajar web dan nantikan kelanjutannya.

 

comments powered by Disqus