Tutorial HTML – Cara Penulisan kode tidak sulit tapi kita harus cukup teliti dalam penulisannya. Ok, mari kita mulai tutorial HTML ini dan sebelumnya kita harus menentukan di mana kita akan mengetikkan bahasa HTML.

Program penulisan bahasa HTML

Kode HTML bisa diketik menggunakan program apa saja, seperti: notepad, wordpad, Word dan lain sebagainya. Saya pribadi menggunakan program Notepad++. Bila Anda juga ingin menggunakan Notepad++, silahkan langsung download Notepad++. Gratis dan legal koq. Saya pribadi telah menggunakan program ini lebih dari 15 tahun. Bila Anda ingin mengetahui tentang program Notepad++, silahkan kunjungi halaman penjelasan mengenai notepad++.
Notepad ++ Plus Plus Program Editor Bahasa Pemrograman
Tampilan kode HTML pada Notepad++ memudahkan kita untuk mengetikkan kode HTML atau kode pemrograman lainnya.

Anda bisa menggunakan program Apa saja yang Anda suka untuk mengetikkan kode HTML. Tapi, saya pribadi lebih menyarankan Anda menggunakan Notepad++. Saya juga akan mengajarkan cara penulisan Kode HTML menggunakan Notepad++ buat Anda yang belum mengenal program ini.

Cara penulisan bahasa HTML di Notepad++

Langkah ini dilakukan bila Anda menggunakan Notepad++ untuk mengetikkan kode HTML. Pastikan Anda telah menginstal Notepad++ pada komputer Anda. Bila Anda belum menginstal Notepad++. Jalankan program Notepad++ melalui shortcut di desktop atau tombol start.

Cara Download Dan Install Notepad++

Setelah program berjalan. Anda mungkin akan ditanyakan untuk memperbarui plugin yang telah terinstal.

latihan 3 - 01 - notepad++ start 01

Klik tombol “Close” atau “Cancel” untuk mengabaikan.

latihan 3 - 02 - notepad++ start 02

Penulisan kode HTML bisa dilakukan secara langung dapat melakukan pengaturan terlebih dahulu. Namun, Notepad++ tidak mengetahui jenis bahasa pemrograman yang kita ketik sehingga syntax highlighting tidak akan berfungsi.

latihan 3 - 03 - language setting 01

Untuk mengaktifkan fungsi syntax highlighting, silahkan lakukan langkah berikut ini.
1. Klik menu “Language”
2. kemudian arahkan mouse ke huruf ‘H'(bahasa HTML diawali dengan huruf ‘H’)
3. kemudian pilih menu HTML.

latihan 3 - 04 - language setting 02

Bila Anda telah mengetikkan kode HTML sebelumnya Anda akan melihat kode yang telah Anda ketik ditandai dengan warna sehingga kode Anda lebih mudah dibaca.

Tutorial HTML – Cara Penulisan – Bagian 3 (Bahasa Indonesia)

Setiap kode HTML yang akan kita tulis selalu diawali dengan sebuah tag. Lantas apa itu tag?
Ok, tag adalah kode HTML yang dituliskan dengan kurung segitiga < dan >. Setiap bagian dari tampilan harus ditulis menggunakan tag. Isi tulisan yang ingin ditampilkan harus berada di antara tag. Setiap tag terdiri dari tag pembuka dan penutup.

Contoh Penulisan tag untuk tulisan

Berikut ini adalah contoh penulisan tag:

Penulisan tag juga dapat disingkat antara pembuka dan penutup

Tag tidak harus selalu dipisah antara tag pembuka dan penutup. Bila sebuah tag tidak memiliki isi di dalamnya, tag pembuka dan penutup bisa digabung menjadi satu.
Contoh:

tanda > didahului dengan sebuah garis miring / jadi terlihat seperti <kode />.

Tag bisa disusun bertingkat

Sebuah tag dapat berisi tag lain dan efek yang ditimbulkan akan bertambah.

Tag HTML terdapat pengaturan atribut

Atribut merupakan data yang terkandung di dalam sebuah tag. Atribut sering digunakan untuk melakukan pengaturan terhadap tampilan dan digunakan sebagai identitas pada bahasa pemrograman javascript dan lainnya.
Contoh atribut di dalam tag:

Pada contoh di atas terlihat bahwa cara penulisan tag di dalam tag pembuka dan tag tunggal(pembuka dan penutup digabungkan). Atribut dan tag dipisahkan dengan tanda spasi.

 

Atribut dan isi atribut dipisahkan menggunakan tanda =. Isi atribut harus berada di dalam tanda kutip(“).

 

Sebuah tag bisa lebih dari satu dan tidak ada batas maksimum jumlah atribut di dalam sebuah tag.

Beberapa orang menuliskan isi atribut tanpa dikurung dengan tanda kutip(“). Hal ini memungkinkan bila kita menuliskan isi atribut yang tidak mengandung huruf spasi.
Contoh:

Cara penulisan isi atribut tanpa kutip(“) sangat tidak disarankan karena hal ini memungkinkan terjadi kesalahan penulisan kode, kesalahan penerjemahan oleh aplikasi yang digunakan dan penulisan kode HTML juga menjadi tidak rapi.

Penulisan Kode HTML yang rapi

Kalimat contoh di atas tentunya agak sedikit membingungkan kalau dibaca. Oleh karena itu, kita sebaiknya menuliskan kode HTML dengan susunan yang lebih baik menggunakan spasi atau tombol tab, seperti di bawah ini:

Setelah tersusun rapi, kita akan lebih mudah membaca dan memahami kode HTML yang kita tuliskan.

Tanda spasi berlebih hanya dihitung satu kali

Setelah Anda susun rapi seperti di atas, Anda akan melihat bahwa tulisan akan terlihat tersusun ke bawah, namun pada prakteknya hasil tulisan yang tercetak di aplikasi peramban tidak akan terlihat tombol enter dan spasi yang lebih dari 1 kali.

Saran Saya: Ketik bukan Copy Dan Paste

Untuk belajar kode HTML atau kode program lebih baik kita mengetiknya secara manual. Hal ini akan membuat kita lebih berpengalaman dalam mengetikkannya. Kita akan menjumpai kesalahan pengetikkan pada umumnya dan hal ini akan membuat kita belajar lebih banyak.

Kalau kita sudah mahir dalam penulisan kode, kita bisa gunakan cara copy dan paste agar lebih cepat dalam menyelesaikan pekerjaan.

Untuk mengetahui hasil kode HTML yang kita ketikkan, mari kita lanjut ke tutorial cara simpan dan buka file HTML yang telah kita tulis.
Tutorial HTML – Simpan Dan Buka – Bagian 4 (Bahasa Indonesia)