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 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 :
- <script type='text/javascript'>
summary_noimg = 800;
summary_img = 650;
img_thumb_height = 150;
img_thumb_width = 200;
</script> - <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 : <html>
<body>
<p>
To break <br />lines <br />in a<br />paragraph,<br />use the br element.
</p>
</body>
</html>
To break
lines
in a
paragraph,
use the br element.
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 : <html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
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.
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>.
<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. - atau dua elemen yang tumpang tindih (yang tidak diperbolehkan).
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).
0 comments:
Post a Comment