Contents
Dalam menulis desain kode HTML terdapat beberapa aturan yang mesti di perhatikan, tidak seperti membuat kalimat biasa yang hanya membutuhkan kata-kata sederhana saja dalam menulisnya. Untuk itu di konten ini perpusteknik akan membahas mengenai “Aturan Penulisan HTML” yang dibagi dalam beberapa topik, seperti apa aturan penulisan desain kode HTML dalam menyusun halaman website? berikut ulasannya :
1. Aturan Penulisan HTML Case Insensitive
Saat ini, mayoritas dari web desain dan web programming menggunakan aturan HTML 5, dimana sifat html bersifat Case Insensitive aturan penulisannya tidak membedakan huruf kecil dan huruf besar, Jadi jika anda menulis tag <p> …. </p> itu sama artinya dengan <P> ….. </P>. Hal ini berbeda saat HTML menganut konsep XHTML yang dijelaskan pada Sejarah HTML dimana tulisannya harus huruf kecil, Jadi, jika anda menulis <p> …. </p> itu tidak sama dengan <P> ….. </P>. kesalahan penulisan pada saat HTML menganut konsep XHTML sangat berpengaruh pada tampilan halaman website, dimana apabila terdapat kesalahan dalam menulis Tag, maka halaman website tidak akan tampil sebagaimana biasa. Walaupun HTML 5 sudah tidak memakai konsep XHTML, tetapi anda disarankan menulis semua kode HTML dengan huruf kecil. karena ini sudah menjadi “kebiasaan” yang dipakai oleh mayoritas web desain dan web programming.
2. Aturan Penulisan HTML Membuat Komentar
Hal yang sangat disarankan saat menyusun kode HTML di Software coding adalah, anda harus menuliskan komentar sebelum menuliskan tag HTML. Alasannya, saat anda mendesain halaman web, desain kode HTML bisa saja terdiri dari ratusan bahkan ribuan baris untuk menghasilkan tampilan web yang enak dipandang. Bahkan, tidak menutup kemungkinan dalam 1 halaman web terdapat campuran kode yang terdiri dari HTML, CSS, Javascript, PHP, MySQL dan lain-lain. Jika anda tidak membuat komentar untuk menerangkan kode yang telah di tulis, sudah dapat dipastikan suatu saat nanti anda akan bingung apa maksud kode tersebut? apa fungsinya? dan apa efek yang di timbulkan dari halaman web yang anda ciptakan? jadi bagaimana cara membuat komentar html adalah topik yang perlu diperhatikan saat anda menyusun kode.
[sc name=”iklan umum link”]
[sc name=”Iklan teknik sesuai konten”]
Mungkin, jika anda baru menyusun kode HTML yang terdiri dari 200 baris pada 2 jam yang lalu anda pasti ingat fungsi-fungsi dan tujuan dari kode html yang anda buat, tetapi bagaimana mungkin anda akan ingat jika baru 3 bulan kemudian kode tersebut anda lihat. Untuk itu saya akan mencontohkan bagaimana cara memberikan komentar di Tag HTML :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <!-- masuk ke paragraf pertama --> <p> ini adalah paragraf pertama </p> <!-- masuk ke paragraf kedua --> <p> ini adalah paragraf kedua </p> </body> </html>
komentar yang dimaksud dalam desain kode HTML adalah yang ditandai dengan <!– ……. –>, walaupun tertera komentar di desain kode HTML, tetapi komentar tidak akan muncul di web browser. Jika di generate di web browser, maka hasilnya akan menjadi seperti ini :
Gambar 2.1
[su_note]Catatan :
kode HTML untuk komentar hanya mencontohkan bagaimana menulis komentar di tag html. Anda tidak harus menulis komentar untuk setiap Tag HTML, cukup untuk elemen-elemen yang penting saja.[/su_note]
3. WhiteSpace Pada Aturan Penulisan HTML
WhiteSpace merupakan karakter “spasi” dalam pengetikkan. Di dalam aturan penulisan HTML, HTML tidak memperdulikan karakter spasi, walaupun diantara elemen terdapat spasi yang mengosongkan beberapa baris kode, hal tersebut dianggap tidak ada spasi. Contoh :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <!-- masuk ke paragraf pertama --> <p> ini adalah paragraf pertama </p> <!-- masuk ke paragraf kedua --> <p> ini adalah paragraf kedua </p> </body> </html>
jika kode diatas di generate pada web browser maka tampilannya akan tampil seperti gambar 2.1, Spasi akan dihitung apabila terdapat tag <br>, karena tag <br> diartikan seperti spasi, contoh :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <!-- masuk ke paragraf pertama --> <p> ini adalah paragraf pertama </p> <br> <br> <br> <br> <br> <br> <br> <br> <!-- masuk ke paragraf kedua --> <p> ini adalah paragraf kedua </p> </body> </html>
Jika di generate kode HTML di atas akan menghasilkan tampilan berikut :
[su_note]Catatan :
Walaupun karakter spasi tidak mempengaruhi tampilan halaman web, tetapi karakter spasi digunakan untk memisahkan elemen yang satu dengan lainnya agar tidak berdempetan. Hal ini membuat anda menjadi mudah dalam mengelola kode yang ada di dalam halaman web.
[/su_note]
4. Gunakan Tab untuk membedakan elemen
Aturan berikutnya adalah, gunakan tab untuk membedakan elemen-elemen penting. Lalu seperti apa contoh dari penggunaan Tab ini dalam menulis kode untuk membuat halaman website?. saya akan mencontohkan bagaimana desain kode yang menggunakan tab dalam elemen :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.posisi-tengah { text-align: center; }
</style>
</head>
<body>
<h1 class="posisi-tengah"> Tentang Perpusteknik.com </h1>
<!-- Masuk ke bagian deskripsi -->
<h5> Deskripsi </h5>
<p> Perpusteknik adalah sebuah website yang menyediakan ilmu di bidang keteknikan, ilmu program dan topik menarik lainnya. Jika anda berniat ingin mendapatkan konten terbaru dari perpusteknik.com, silahkan berlangganan dengan mengisi formulir di bawah ini.
<!-- Masuk ke bagian form -->
<h5> Form Berlanggananan </h5>
<form action="generate.php" method="get">
<p> Nama : <input type="text" name="nama_anda" required> </p>
<p> Email : <input type="text" name="alamat_anda" required> </p>
<p> <input type="submit" value="Berlangganan"> </p>
</form>
</body>
</html>
Desain Kode HTML 4.1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.posisi-tengah { text-align: center; }
</style>
</head>
<body>
<h1 class="posisi-tengah"> Tentang Perpusteknik.com </h1>
<!-- Masuk ke bagian deskripsi -->
<h5> Deskripsi </h5>
<p> Perpusteknik adalah sebuah website yang menyediakan ilmu di bidang keteknikan, ilmu program dan topik menarik lainnya. Jika anda berniat ingin mendapatkan konten terbaru dari perpusteknik.com, silahkan berlangganan dengan mengisi formulir di bawah ini.
<!-- Masuk ke bagian form -->
<h5> Form Berlanggananan </h5>
<form action="generate.php" method="get">
<p> Nama : <input type="text" name="nama_anda" required> </p>
<p> Email : <input type="text" name="alamat_anda" required> </p>
<p> <input type="submit" value="Berlangganan"> </p>
</form>
</body>
</html>
Desain Kode HTML 4.2
Jika dilihat Hasil dari desain kode HTML 4.1 dan 4.2 apabila di generate pada web browser, maka akan menghasilkan tampilan yang halaman web yang sama seperti di gambar ini :
Lalu, apa bedanya desain kode HTML 4.1 dan 4.2? sedangkan hasilnya pun akan menghasilkan tampilan halaman web yang sama?. Bedanya adalah, ditinjau dari kerapian penulisan kode, maka desain kode HTML 4.1 lebih rapi dibandingkan dengan desain kode HTML 4.2. Desain kode HTML 4.1 menggunakan tab untuk setiap menulis elemen HTML, selain itu menggunakan spasi untuk membuat pandangan jelas dalam mengelola kode-kode HTML. Penggunaan Tab dalam penulisan HTML sebenarnya bukan merupakan aturan yang mutlak, tetapi hal ini lebih mengarah ke “Kebiasaan” menulis kode dalam web desain dan web programming. Untuk itu, jika anda menulis kode, pastikan anda mengatur kode dengan menggunakan Tab dan memberikan jarak antar elemen tertentu, agar mata tidak lelah dan kesulitan melihat kode yang begitu banyak.
5. Aturan penulisan HTML tag pembuka dan penutup
Selama anda memperhatikan kode-kode yang tampil di halaman ini, mungkin anda akan bertanya, Mengapa setiap kalimat di apit oleh 2 Tag yang sama contoh, <p> kalimat ini adalah paragraf pertama </p>. Ketahuilah, di dalam aturan penulisan HTML, terdapat Tag pembuka dan Tag penutup, Tag <p> menerangkan Tag Pembuka dan harus di akhiri dengan Tag Penutup, dimana Tag penutup ini disetai dengan garis miring </p>. Lalu apakah semua Tag HTML harus disertai dengan Tag Penutup?, Jawabannya adalah tidak. Sebab, di dalam penulisan kode HTML juga ada aturan yang di sebut dengan Self-Closing Tags, dimana aturan penulisan ini tidak mengharuskan adanya tag penutup. Penggunaan Self-Closing digunakan sebagai fungsi tunggal. Contoh penulisan dari Self-Closing Tags dapat anda lihat di tautan berikut : List of HTML Self-Closing Tags
Sleian tata cara penulisan Self-Closing Tag, anda juga dpat menulis tag kode HTML dengan cara yang berbeda yaitu hanya menggunakan Tag pembuka saja, gaya penulisannya hampir sama dengan Self-Closing, tetapi cara penulisan ini tidak menggunakan Self atau Garis miring di akhir kode, untuk mendalaminya anda dapat membaca tautan berikut : 15 Tag HTML yang tidak Memiliki Pasangan Penutup
[sc name=”Subscribe website ini”]
