Pengenalan HTML (bagian 1)

 

banner-html

Setelah kita tahu mengenai perbedaan antara front-end dan back-end. Selanjutnya, kita akan belajar salah satu hal yang harus dikuasai oleh seorang front-end develepor. Yaitu, HTML.

Sebelumnya jika ada yang tidak mengerti mengenai HTML. Akan saya jelaskan sedikit mengenai apa itu HTML.

Apa itu HTML?

HTML atau kependekan dari kata Hyper-Text Markup Languange adalah sebuah bahasa tanda yang digunakan untuk membuat sebuah website. Dalam penggunaannya HTML biasanya digunakan bersamaan dengan CSS dan Javascript.

Nah, dalam bahasa HTML itu terdapat aturan yang harus dianut. Yaitu penggunaan <tag> khusus dalam penulisannya. Kumpulan <tag> ini akan dibaca oleh browser selanjutnya akan diubah menjadi sebuah tampilan website yang biasa kita kunjungi.

Mungkin masih ada yang belum paham. Cobalah untuk mengunjungi suatu website yang sering anda buka. Lalu, tekan klik kanan pada mouse dan pilih lihat sumber halaman. Nanti anda akan menemukan kumpulan tag HTML yang membangun sebuah tampilan website tersebut.

Persiapan!

Sebelum kita akan belajar mengenai bahasa HTML. Sebaiknya kita juga harus tahu tool atau alat apa saja yang harus digunakan untuk menulis bahasa HTML. Berikut adalah beberapa tool yang harus kita persiapkan.

  • Text editor

Ada banyak pilihan text-editor dalam kita menulis bahasa HTML. Mulai dari bawaan dari windows seperti notepad, sampai text-editor yang memberikan tampilan langsung dari bahasa HTML yang kita tulis. Contohnya, Dreamweaver. Silahkan mencari sendiri mana yang bisa memudahkan kita dalam belajar bahasa HTML.

  • Browser

Setelah kita menulis bahasa HTML, selanjutnya akan kita lihat bagaimana hasilnya. Dan dalam hal ini akan digunakan browser. Dalam hal ini terserah mau menggunakan browser apa yang disukai. Baik itu Firefox, Chrome, Opera atau yang lainnya. Hal ini disebabkan karena bahasa HTML bisa dikenali oleh semua browser sekarang.

Jika Anda menggunakan text-editor yang mempunyai fitur melihat langsung, perlu juga dicek di browser karena dengan melihat langsung melalui browser akan mengetahui letak kesalahan dalam penulisannya.

Tag-tag HTML

 

Setelah kita mempersiapkan segalanya, marilah kita memulai belajar dasar dari penulisan html.

1.Awal penulisan file HTML

html1

Keterangan :

  • Disini saya menggunakan text-editor Notepad++. Jika ingin meng-unduh, langsung saja klik link ini.
  • Pada awal penulisan bahasa HTML harus didahului dengan <!DOCTYPE html>. Ini adalah sintaks agar browser mengetahui versi berapa dari html yang kita tulis. 
  • Setelah itu langsung ketik tag <html> dan tidak lupa penutupnya </html>. Didalam tag html inilah nantinya akan kita ketik tag-tag yang lain.
  • Setelah itu save file dan jangan lupa menjadikan file kita menjadi .htm atau .html, ini adalah ekstensi wajib agar nantinya bisa dibaca di browser kita.

2.<head>, <title>, <body>, <p>

html3

Keterangan :

  • Seperti manusia, html mempunyai kepala dan juga tubuh. Kepala pada html ditulis dengan tag <head> ……. </head>. umumnya pada tag head ini biasanya berisi judul website. tag judul ditulis <title> ……..</title>. Nantinya judul sendiri akan muncul pada tab browser.
  • Kemudian tubuh dari html ditulis dalam tag <body>……..</body>. Didalam tag <body> inilah nantinya isi dari website akan ditulis. Disini saya contohkan menggunakan tag <p>. Tag <p> sendiri adalah tag paragraf. Penulisannya adalah <p> Isi dari paragraf </p>.
  • Setelah selesai silahkan buka di browser yang sudah ada pada PC anda.

 

Hasil

hmtl4

Keterangan :

  • tag <title> akan berada pada tab di browser dan tag <p> ada pada isi dalam website itu sendiri.

 

Ini adalah sedikit pengantar mengenai bagaimana membuat sebuah website. Bahasa yang harus dikuasi dalam membuat website adalah HTML. HTML terdiri dari tag-tag khusus yang nantinya akan diterjemahkan oleh web browser menjadi tampilan webiste yang kita kunjungi pada umumnya.

Semoga bermanfaat, insya allah tulisan ini akan berlanjut. 😀

Pranala luar :

http://www.w3schools.com/html/default.asp

https://id.wikipedia.org/wiki/HTML

Iklan