Welcome to Blogosphere
Coding : Memahami struktur tubuh website atau blog
Anda ingin menguasai rancang website (website design) atau blogger (admin blog) tetapi bingung darimana memulai. Memang banyak macam yang harus dipelajari, mulai dari elemen utama pembangun situs : HTML / CSS / Javascript, PHP, jQuery, MySQL, jQuery, AJAX, cPanel etc. Saran saya mulai dari yang paling mudah dan ringan, yaitu memahami dasar-dasar HTML.
Coding website : 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 dan Elemen HTML - arsip website design
Tag HTML dan Elemen HTML sering dipakai untuk menjelaskan masalah sama. Padahal tidak demikian.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 terbagi dalam 3 macam bentuk, Yaitu :
- Tag HTML dengan tag pembuka dan tag penutup. Nama tag ada diantara keduanya, seperti:
- <b> teks Anda </b>
- <span> … </span>
- <p> … </p>
- <div> … </div> dan lainnya.
- Tag HTML yang ditulis sendirian, misalnya :
- <br /> berfungsi untuk ganti baris.
- <hr /> berfungsi membuat garis horizontal (datar)
- Tag HTML yang ditulis sendirian dan berpasangan. Misal tag javascript berikut :
bisa ditulis satu tag sendirian seperti DIATAS atau berpasangan seperti 2 contoh berikut:
Elemen HTML
Perlu ditegaskan bahwa "elemen HTML" ialah segala sesuatu yang ada diantara tag awal dan tag akhir, termasuk text, image, animasi dan lainnya.
Berikut ini contoh elemen HTML tipe (berjenis) teks :
<p>This is a paragraph.</p>
Latihan dasar coding HTML - arsip website design
Untuk memutuskan baris (ganti baris) pada suatu paragraf 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 akan ditampilkan di halaman website seperti berikut :
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 :
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 sangat memadai namun boleh jadi tetap saja ada error. Kesalahan umum adalah :
- Anda menulis tag 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 :
- Elemen <head> seharusnya juga berisi child element <title>
- Elemen list item (baik <ul> atau <ol>) membutuhkan child element <li>
- Elemen <dl> seharusnya membutuhkan child element <dt> dan <dd>.
- Elemen <head> seharusnya juga berisi child element <title>
- Kita sering menuliskan tag dan menutupnya dengan susunan salah. Misalnya :
<p><em>...</p>
adalah penulisan yang tidak bisa diterima. Seharusnya ditutup sebelum </p>.
Nesting Tag yang benar adalah :
<p><em>...</em></p>
Pada kasus lain, Anda letakkan unsur HTML dalam konteks yang tidak diizinkan (salah MENYARANGKAN elemen) :
- seperti unsur STYLE Anda letakkan di bagian BODY bukannya di bagian HEAD
- atau dua elemen yang tumpang tindih (yang tidak diperbolehkan).
- Kesalahan umum lain ialah penggunaan sintaks XHTML di dokumen HTML. Karena aturan HTML elemen implisit tertutup. Kesalahan membuat efek Cascading. Misalnya penggunaan tag XHTML yang "self-closing" untuk meta dan link di bagian "head" dokumen HTML dapat menyebabkan parser untuk menyimpulkan akhir bagian head dan awal dari bagian "body" (di mana meta dan link tidak diperbolehkan).
W3C Service untuk validasi HTML website
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.
![](http://www.blogger.com/img/icon_delete13.gif alt="delete icon di web design){kind=icon}
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://lh3.googleusercontent.com/-AHjNV40KrDw/UextTozh8GI/AAAAAAAAMjU/UG7zSHdmatc/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
