Showing posts with label tips. Show all posts
Showing posts with label tips. Show all posts

Friday, November 14, 2014

Tips: Tulis Kode HTML Sedikit Demi Sedikit dan Lihat Hasilnya

Halo pelajar html! Kali ini penulis berbagi tips tentang menulis (mengetik) kode html. Meskipun kode html tidak menimbulkan pesan eror ketika lupa menutup tag atau salah mengetik tag, tetapi jika menulis kode langsung banyak akan susah nanti mencari kesalahannya di mana saat hasil/tampilan di browser tak sesuai harapan. Untuk itulah penulis sarankan bagi pemula agar menulis kode html sedikit demi sedikit agar mudah dalam mencari letak kesalahan kode.

Contohnya ketika membuat tabel dengan tag <table>, setelah membuat satu baris dan satu kolom, langsung lihat hasilnya di browser, apakah sudah benar atau masih salah. Jika sudah, lanjut lagi ke kolom kedua atau baris kedua dan seterusnya. Untuk membuat tabel baca artikel ini. Kesalahan yang sering terjadi saat membuat tabel ketika memecah baris (rowspan) dan memecah kolom (colspan), sehingga saat bekerja di bagian ini perlu melihat hasilnya, jika sudah benar baru beranjak ke kolom atau baris selanjutnya.

Cara yang sama berlaku juga ketika Anda membangun web dari desain yang telah dibuat, misalnya desain yang digambar di atas kertas atau yang dibuat dengan aplikasi pengolah gambar seperti Corel Draw dan Photoshop. Baris demi baris kode ditulis dan dilihat hasilnya apakah sudah sesuai desain atau tidak.

Jika Anda memang menggunakan editor (tempat penulisan kode) berbayar seperti Adobe Dreamweaver, aplikasi ini dilengkapi fitur yang bisa langsung melihat hasil kode html. Namun, jika Anda tidak sanggup membayar lisensi, Anda tidak perlu khawatir. Notepad++ jadi solusi, gratis dan 'ringan' dalam prosesnya, tapi itu tadi tidak dilengkapi fitur seperti Adobe Dreamweaver, maka solusinya menulis kode sedikit demi sedikit dan lihat hasilnya. Link download Notepad++ di sini.

Menulis kode html dengan Notepad++.
Teknik yang dijelaskan dari awal juga berlaku saat Anda sedang ujian di kampus atau di sekolah. Seperti diketahui, saat ujian biasanya timbul perasaan tegang dan gugup. Jika saat itu Anda telah menulis kode html sedemikian banyak tetapi saat dilihat hasilnya di browser tidak sesuai harapan, itu bisa membuat frustasi. Untuk mencari letak kesalahan sulit karena sudah terlalu banyak baris kode yang diteliti dari awal sampai akhir. Makanya, ditulis sedikit demi sedikit, jika tampilan tak sesuai harapan langsung perbaiki, setelah itu melangkah mulus ke tahap selanjutnya. Semoga membantu!

^Baca juga: Tag mark html.

Tuesday, November 11, 2014

Tips: Mengecek Apakah Penutup Tag Berlebih

Halo yang sedang belajar HTML! Ketika Anda telah selesai mengetik beberapa baris HTML dan merasa lengkap tag pembuka dan penutupnya dan melihat hasil (tampilan) di browser persis seperti apa yang diharapkan itu sudah menyenangkan hati. Tetapi ada baiknya Anda memeriksa apakah ada tag penutup yang berlebih, artinya satu tag memiliki 2 tag penutup, padahal harusnya satu tag pembuka dan hanya satu tag penutup.

Sebelum membahas lebih jauh, ada beberapa tag yang memang tidak membutuhkan tag penutup, contohnya <br> untuk enter (baris baru), <hr> untuk membuat garis horizontal, <link> untuk menampilkan file dari suatu lokasi (folder) misalnya css dan tag <img> untuk menampilkan gambar.

Kita balik lagi ke topik, misalnya Anda menggunakan tag yang membutuhkan tag penutup seperti tag <table> untuk membuat tabel termasuk di dalamnya <tr> (baris baru), <td> (kolom baru). Contoh: tabel.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Test penutup tag</title>
        </head>
    <body>
    <table border="1" width="400px">
        <tr>
            <td>Kolom pertama</td>
            <td>Kolom kedua</td>
            <td>Kolom ketiga</td>
        </tr>
        <tr>
            <td>Kolom keempat</td>
            <td>Kolom kelima</td>
            <td>Kolom keenam</td>
        </tr>
    </table>

    </body>
</html>


Output:

Baris kode di atas telah memiliki tag penutup, artinya sudah sesuai standar. Sekarang kita sengaja lebihkan tag penutup tabel</table> menjadi dua, pada potongan kode berikut:

        <tr>
            <td>Kolom keempat</td>
            <td>Kolom kelima</td>
            <td>Kolom keenam</td>
        </tr>
    </table>
    </table>



Nah, sangat mudah mendeteksi tag berlebih ini dengan browser, misalnya Firefox. Dengan cara klik kanan di area kosong pada tampilan tabel.html, kemudian pilih View Page Source seperti gambar berikut:

Jika browser menggunakan bahasa Indonesia, maka menjadi "Tampilkan kode sumber"
Anda akan melihat tulisan warna merah yang menandakan tag </table> berlebih, yang seharusnya satu saja, karena hanya satu tag pembuka <table>.

Tips ini juga berlaku untuk tag lain yang memerlukan tag penutup.
Itulah tips sederhana yang bisa Anda praktektan, jadi daripada melihat satu per satu tag, lebih baik menerapkan cara di atas. Jauh lebih hemat waktu. Selamat mencoba.

^Baca juga: Tips menulis kode html untuk pemula.