Sabtu, 07 Desember 2013

CLEAN CODE, COMMENTS, DAN ESCAPE CODES

Session 8 : Clean code, Komentar, dan Escape codes


Assalamualaiku, wr,wb..
Kali ini saya akan membahas tiga hal yang dianggap kecil tapi penting untuk diperhatikan.
Mari kita simak apa maksud dari hal yang dibicarakan diatas, Berikut penjelasannya..

Clean Code...



Yang dimaksud Clean code adalah bahwa kode HTML anda mengikuti semua peraturan dalam pengkodean, Berikut beberapa cara untuk menjaga kode anda termasuk Clean code :

  • - Jangan menggunakan karakter spesial kedalam kode anda apabila anda ingin menampilkan karakter spesial tersebut tampil sesuai dengan bentuk karakternya disini disebut Escape codes.
    Contohnya karakter "<", ">", "©", "&", dan " itu sendiri. Berikut karakter pengganti untuk karakter spesial

    • Untuk karakter < ganti dengan mengetikan &lt;
    • Untuk karakter > ganti dengan mengetikan &gt;
    • Untuk karakter © ganti dengan mengetikan &copy;
    • Untuk karakter & ganti dengan mengetikan &amp;
    • Untuk karakter " ganti dengan mengetikan &quot;



  • Gunakan tanda kutip dalam nilai atribut... Contoh, Jika andai akan membuat garis horizontal dengan lebar setengahny dari layar, ketik <hr width="50%"> bukan mengetikan <hr width=50%>, atau jika anda ingin membuat ukuran sebesar 5 <hr size="5"> bukan <hr size=5>.
  • Penulisan tag jangan bersilangan / Overlaps... maksud bersilangan disini misalkan Tag A pembuka, Tag B pembuka, Tag A penutup, lalu Tag B penutup. ini akan menyebabkan error pada browser yang sensitif. Contohnya, itu akan menyebabkan penapsiran kode yang tidak tepat pada Navigator 4.0 Beta1, .
  • Contonya:
    • Cara yang salah (Bersilangan/Overlaps):
      <font size=+1><b>Ini hurup tebal dan ukuran ditambah 1</font></b>

      Cara yang benar (Tidak Overlap):
      <font size=+1><b>Ini hurup tebal dan ukuran ditambah 1</b></font>

    • Cara yang salah (Overlaps):
      <a href="here.html"><i>Link ini tulisan miring</a></i>

      Cara yang benar (Tidak Overlap):
      <a href="here.html"><i>Link ini tulisan miring</i></a>


    Tag Komentar / Comments...

    Jika anda menulis dokumen HTML, kadang-kadang anda ingin meletakan sedikit keterangan terhadap kode yang dituliskan untuk anda sendiri dengan begitu anda akan dapat menafsirkan kodetersebut di lain waktu. Komentar tidak akan tampil pada browser ketika halaman ditampilkan ... ini hanya akan tampil saat kode HTMLnya ditampilkan. Anda boleh memulai komentar dengan diawali karakter <!-- dan diakhiri dengan -->.




    halama HTML anda...

    Tambahkan kode dibawah ini pada halaman home page anda ("Home.htm"): (teks warna biru yang akan ditambahkan)

    <html>
    <head><title>Home Pageku</title></head>
    <!-- Bagian body diawali dari sini - dan background gambar di load -->
    <body background="bgnd.gif">

    <!-- Ini heading warna biru -->
    <center><font color="Blue&quot><h1>nama home page anda </h1></font></center>
    <hr>
    <!-- Nama saya dan dua gambar adalah bagian dari link - yaitu link "mailto" -->
    ini adalah home page <a href="mailto:alamat email anda"><img src="bullet.gif" border=0><b>nama anda</b>.<img src="bullet.gif" border=0></a>
    <p>Ketikan tentang anda disini. Tentang siapa anda dan apa pekerjaan anda. Ingat, gunakan juga teks tebal dan teks miring, Supaya lebih jelas.</p>
    <hr>
    <h2>Web site favourite saya</h2>
    <br>

    <!-- List ini adalah unordered list -->
    <ul>
    <li> <a href="http://www.xencon.com"&gtXenon Web Design</a> </li>
    <li> <a href="http://www.microsoft.com"&gtMicrosoft</a> </li>
    <li> <a href="http://www.jskulit.com"&gtweb produsen jaket</a> </li>
    <li> <a href="http://www.sybase.co.za"&gtSybase South Africa</a> </li>
    </ul>

    </body>
    </html>


    Simpan file dengan nama "Home.htm".


    Sekian dulu pembahasan Session 8 tentang Clean code, Comment, dan Escape codes.

    Wassalam.. n smoga bermanfaat 

    0 komentar:

    Posting Komentar

     
    DMCA.com
    Home | About me | Billing toko | HTML | VBA | Source code | Tutorial | Trik tersembunyi | Soft pendukung | Kontak | Site map
    Template designed by :Hero Sipatis