Desain & Pemrograman Web – Resume 3

Back again on the blogging things up! Next up : HTML basics!

Oke biar gak buang-buang character, langsung aja masuk ke topic utama : HTML

Apa sih HTML itu?

Kasarannya begini :

HTML is the language for describing the structure of Web pages.”

Diterjemahkan jadi :

HTML adalah sebuah bahasa untuk mendeskripsikan struktur dari sebuah halaman web

HTML sendiri mempunyai fitur untuk posting media pada halaman web, baik itu berupa text, list, table, foto, video dsb. HTML juga dapat digunakan untuk menerima informasi online dengan hanya sebuah klik pada button di web.

XHTML

Nah apa lagi XHTML itu? Rumus untuk XHTML kira –kira seperti ini : XML + HTML = XHTML.

Penjelasannya, XHTML adalah sebuah HTML yang menggunakan syntax-syntax XML di dalamnya. XHTML memiliki elemen-elemen yang sama dengan HTML, seperti paragraph, heading, list, dsb. Perbedaan utama XHTML adalah syntax dari XML tersebut.

HTML Tag

HTML tag adalah sebuah struktur penulisan sebuah elemen HTML, dimana tag-tag tersebut berfungsi mengatur tampilan dari elemen yang akan ditampilkan pada halaman web.

(Maaf pak teguh, gambarnya saya copas :D)

Contoh diatas adalah contoh sebuah struktur tag HTML yang cukup simple. Penjelasan singkat tentang pengenalan HTML telah dijelaskan disini, jadi yang ingin melihat silahkan 😀

HTML vs XHTML

HTML

“<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt; <html>

<head>

<title>First HTML Example</title>

</head>

<body>

<h1>Welcome to the World of HTML</h1> <hr>

<p>HTML <b>really</b> isn’t so hard!</p>

<p>You can put in lots of text if you want to. In fact, you could keep on typing and make up more sentences and continue on and on.</p>

</body>

</html> ”

XHTML

“<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; lang=”en”>

<head>

<title>First XHTML Example</title>

</head>

<body>

<h1>Welcome to the World of XHTML</h1>

<hr />

<p>XHTML

<b>really</b> isn’t so hard!</p> <p>You can put in lots of text if you want to.

In fact, you could keep on typing and make up more sentences and continue on and on.</p>

</body> </html> ”

lihat perbedaannya? Hmmm mungkin tidak terlalu jelas bagi orang biasa, namun perbedaan yang paling jelas terlihat adalah pada bagian tag <!DOCTYPE> selain itu, perbedaan yang ada adalah pada bagian <html xmlns=”http://www.w3.org/1999/xhtml&#8221; lang=”en”>. Pada XHTML kita harus memperjelas bahasa yang digunakan.

HTML Standards

Penggunaan HTML tidak bias seenak programmer web saja, namun harus mengikuti aturan yang ditetapkan oleh The World Wide Web Consortium (W3C). W3C adalah sebuah organisasi yang mendefinisikan standar –standar yang digunakan dalam HTML. W3C sendiri telah menetapkan HTML sebagai aplikasi Standard Generalized Markup Language (SGML).

Sekarang masuk ke penjelasan tag HTML standard an aturan dalam HTML dan XHTML

Aturan HTML

  • HTML tidak case sensitive, sedangkan XHTML sebaliknya
  • Nilai Attribut pada HTML/XHTML bisa case sensitive
  • HTML/XHTML sensitive pada satu karakter spasi
  • Elemen pada HTML/XHTML tag haruslah ditutup dengan close tag (e.g. </p> </div>) kecuali kosong
  • Elemen yang tidak digunakan harus diminimalisir
  • Elemen yang ada pada tag harus nested atau bersarang, seperti ini >> <b><i>nested tags </i></b>
  • Attribute harus berada di dalam “ini” (quote / tanda petik “)

Aturan XHTML

  • Harus ada <!DOCTYPE> indicator
  • Harus ada <html>, <head>, <body>
  • Pada tag <head>, tag <title> harus di dahulukan
  • Semua attribute HARUS di quote (” “)
  • Semua tags harus bersarang secara benar
  • Semua tags harus ada pembuka dan penutup (<p> </p>)
  • Tags harus ditutup, sehingga tag kososng seperti <hr>, <br> menjadi <hr />, <br />
  • Semua nama attribute dan tag harus menggunakan huruf kecil.

Aturan pada XHTML lebih strict dari pada HTML, karena itu XHTML lebih menjamin kerapian dan kejelasan struktur dari web page.

HTML TAG explained : more example explained than before

<html> dan </html> membatasi awalan dan akhiran sebuah struktur HTML, layakanya begin-end pada bahasa pemrograman lainnya.

<head> dan </head> menandakan Header pada sebuah web page

<title> dan <title> menandakan judul dari web page tersebut, dan apa yang keluar pada title bar sebuah browser

<body> dan </body> menandakan bagian “badan” dari sebuah web page. Berisi tulisan, foto, video dsb

<h1> </h1> menandakan Heading/headline, atau awalan dari sebuah tulisan

<hr /> pada XHTML membuat sebuah garis mendatar dalam layar.

<p> </p> menandakan paragraph

<b> </b> bold character

Yah, cukup sekian dulu postingan tentang dasar HTML kali ini, mudah-mudahan bias membantu menambah pengetahuan tentang HTML. See u in my next post!


Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s