Author by Yosef Doublehorn
slogan cinta kerja harmoni
Protected by Copyscape Online Infringement Detector

24 Maret 2013

Website design series : tutorial penulisan code HTML


Welcome to Blogosphere,

Anda ingin mengelola website/Blog tetapi bingung bagaimana memulai. Untuk menjadi webmaster memang banyak macam yang harus dipelajari seperti : code HTML/ CSS / Javascript, PHP, MySQL, cPanel dan lainnya. Saran saya mulailah dari yang paling mudah dan ringan, yaitu  memahami dasar-dasar HTML.

Apa itu HTML?

HTML adalah language untuk menjelaskan halaman website. Tag HTML merupakan keyword (nama-nama tag) yang diawali dan diakhiri dengan angle brackets. Contoh  :  <strong> berfungsi sebagai tag pembuka untuk penebalan huruf (bold) dan </strong> sebagai tag penutup. Nama tag ada diantara tag pembuka dan tag penutup.
  • HTML singkatan dari Hyper Text Markup Language
  • HTML bukan programming language, tetapi lebih merupakan markup language
  • Markup language adalah seperangkat markup tags
  • Tujuan tag tersebut adalah untuk menjelaskan content (isi) webpage.

Tag HTML

  • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags
Tag HTML markup biasa disebut sebagai tag HTML saja.
Tag HTML biasanya berpasangan (tag pembuka dan tag penutup) dan nama tag ada diantara keduanya, seperti :  <b> teks Anda </b>, <span> … </span>, <p> … </p>, <div> … </div> dan lainnya. 
Tag HTML bisa ditutup dengan < /…> seperti contoh diatas, namun Anda juga dapat menemukan tag HTML tidak berpasangan (sendirian) yang ditutup dengan …/ >  seperti <br /> berfungsi untuk ganti baris. 
Dan ada tag HTML yang ditulis sendirian dan di tempat lain berpasangan.  Misal tag javascript seperti ini :  
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
atau ditulis berpasangan, misalnya 2 contoh di bawah ini :
  1. <script type='text/javascript'>
    summary_noimg = 800;
    summary_img = 650;
    img_thumb_height = 150;
    img_thumb_width = 200;
    </script>
  2. <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Elemen HTML

"Tag HTML" dan "Elemen HTML" sering digunakan untuk menjelaskan masalah yang sama. Namun perlu saya tegaskan bahwa elemen HTML adalah segala sesuatu yang ada diantara tag awal dan tag akhir, termasuk di dalamnya  text, image, animasi dan lainnya.  Berikut ini contoh elemen HTML berjenis teks :
<p>This is a paragraph.</p>

Latihan dasar menulis HTML

Untuk memutuskan baris atau ganti baris pada suatu paragraf (alinea) maka gunakan elemen <br /> :
Latihan 1
<!DOCTYPE html>
<html>
<body>

<p>
To break <br />lines <br />in a<br />paragraph,<br />use the br element.
</p>

</body>
</html>
Hasilnya yang akan ditampilkan di halaman website (webpage) seperti dibawah ini :
To break
lines
in a
paragraph,
use the br element.
Latihan 2
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
Hasilnya di webpage seperti dibawah ini :
Hasil tampilan Code HTML h1 dan p
Untuk fungsi-fungsi lain, silahkan buka http://www.w3schools.com/ dan klik link LEARN HTML. Pada situs tersebut Anda akan mendapatkan tutorial HTML lengkap dengan lebih dari 100 contoh tag kode html yang bisa Anda edit dan test oleh Anda sendiri seperti pola diatas.
front banner w3schools in blog website design
halaman utama w3schools HTML introduction

Kesalahan Umum

Tutorial diatas diambil dari http://www.w3schools.com/. Sebenarnya sumber tutorial dari situs tersebut sudah sangat memadai namun boleh jadi tetap saja ada error. Kesalahan yang sering dilakukan adalah :
1).   Anda menulis tag yang menggunakan elemen (induk) yang seharusnya juga membutuhkan “elemen
        anak” (child element) namun Anda tidak memasukkan child element tersebut sehingga karenanya
        elemen induk tersebut "belum selesai", atau “tidak lengkap.” Misalnya :
  • Pada file HTML elemen <head> seharusnya juga berisi child element <title>.
  • Elemen list baik itu list item <ul> atau <ol> seharusnya membutuhkan child element <li>
  • Demikian juga elemen <dl> seharusnya membutuhkan child element <dt> dan <dd>.
2).   Kita sering menuliskan tag dan menutupnya dengan susunan salah. Misalnya:
                                       <p><em>...</p> - adalah penulisan yang tidak bisa diterima.
          Padahal <em> seharusnya ditutup sebelum </p>.  Tindakan koreksinya :
                                       Nesting Tag yang benar adalah : <p><em>...</em></p>
3).   Pada kasus lain, mungkin Anda meletakkan unsur HTML dalam konteks yang tidak diperbolehkan. Ini
        bisa berarti bahwa Anda salah MENYARANGKAN elemen :
- seperti unsur "STYLE" Anda letakkan di bagian "BODY" bukannya di dalam "HEAD"
- atau dua elemen yang tumpang tindih (yang tidak diperbolehkan).
Kesalahan umum lainnya adalah penggunaan sintaks XHTML dalam dokumen HTML. Karena aturan HTML elemen implisit tertutup. Kesalahan ini bisa membuat efek Cascading.
Misalnya, menggunakan tag XHTML yang "self-closing" untuk "meta" dan "link" di bagian "head" dari sebuah dokumen HTML dapat menyebabkan parser untuk menyimpulkan akhir bagian "head" dan awal dari bagian "body" (di mana "link"  dan  "meta"  tidak diperbolehkan).

W3C validation service

Setiap error penulisan code (coding) akan terekam di W3C validation service. Anda bisa memanfaatkan informasi Validasi Dokumen Online Anda untuk tindakan koreksi. Silahkan buka saja situs tersebut dan eksplore sendiri saja yaa … cara memanfaatkan informasi tersebut.


Anda membaca artikel : Website design series : tutorial penulisan code HTML
THANK YOU for your continued liking 'n sharing. If you haven't liked this post yet, you may do that by hitting the buttons just BELOW.
Please drop your comment and questions below ……
Comments

2 komentar:

http://website-download.blogspot.com/2012/09/tips-html-kumpulan-tip-singkat.html?showComment=1364469835590#c6146657656995755472'> 28/03/13 18.23 Reply

Cuman mau koreksi saja bang. Dalam HTML5 seperti yang dicontohkan di atas, single tag seperti <br /> atau <img />, penulisan yang benar adalah <br> dan <img>.

Untuk <br /> atau <img /> sendiri, itu penggunaannya hanya untuk XHTML (4 atau 5).

Btw, w3schools bukan sumber referensi yang baik, karena banyak informasi yang diberikan salah :).

Salam.

http://website-download.blogspot.com/2012/09/tips-html-kumpulan-tip-singkat.html?showComment=1364472441950#c7507685609072041145'> 28/03/13 19.07 Reply

Terimakasih banyak atas koreksi dan masukannya, mas Leo. Akan menjadi perhatian sy.

Poskan Komentar di Website Design

Penelusuran topik khusus di blog ini
Loading