Breaking News

Senin, 05 Januari 2015

Belajar HTML Dasar Part 2: Dasar-dasar HTML

 
Langsung saja, sebelum mempelajari dan menuliskan tag html di code editor, ada baiknya kalian membuka dulu software editor yang kalian miliki. Disini penulis menyarankan menggunakan Sublime Text atau Notepad ++. Kemudian jalankan Text Editor Anda.

Tag HTML

Apa itu TAG? Tag adalah perintah-perintah khusus (markup) yang digunakan untuk menentukan tampilan dokumen HTML. TAG HTML harus diawali dengan tag pembuka dan diakhiri dengan tag penutup. Yang musti di ingat adalah Tag penutup HTML harus selalu diberi tanda backslash “/” sebelum karakter “<”.

Contohnya sebagai berikut :

<tag pembuka>..</tag penutup> 

Contoh Jelasnya :

<html>..</html>

Tag HTML bersifat no case sensitive, atau tidak sensitif. Artinya Kita bebas menuliskan tag dengan huruf besar semua atau dengan huruf kecil semua.

Contoh: <HTML> <html>. Namun pada XHTML, semua tag harus ditulis dengan huruf kecil semua. Agar dokumen XHTML yang dibuat sesuai dengan standar yang telah ditentukan oleh W3c.

Struktur Tag HTML

Struktur dokumen HTML terdiri dari 5 bagian, dengan berpedoman pada 3 bagian utama. 5 bagian tersebut adalah:

<!DOCTYPE>

Document Type Definition (DTD/Doctype) adalah tag yang digunakan untuk menjelaskan versi HTML, dan harus ditulis pada baris paling awal sebelum tag <html>.

Contohnya sebagai berikut :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Tag Doctype diatas menjelaskan bahwa kita menggunakan HTML versi 4.0 atau yang biasa disebut XHTML versi 1.0.

Ingat! tanpa harus menuliskan Doctype, dokumen HTML yang kita buat masih dapat berjalan dengan baik. Namun, W3C menganjurkan agar kita selalu menggunakan <!DOCTYPE> pada baris paling awal dokumen HTML, supaya sesuai dengan standar yang telah ditetapkan oleh W3C.


<html>

Tag ini digunakan untuk memberitahukan kepada browser bahwa dokumen yang kita buat adalah dokumen HTML. Tag <html> merupakan salah satu dari tiga bagian utama struktur HTML. Dan setiap tag lainnya harus ditulis dan berada didalam tag <html> dan </html>, istilahnya diapit. Tag <html> .... </html> juga menandakan bahwa kita akan memulai dan mengakhiri dokumen HTML.

<head>

Tag ini mendefinisikan bahwa <head> adalah bagian header dari suatu file HTML. Biasanya didalam tag ini berisi tag <title>, tag <meta>, dan tag lain yang masih merupakan bagian dari tag <head>. Contohnya seperti tag <script>. Selain itu tag <head> juga merupakan salah satu dari 3 bagian utama struktur HTML.

<title>

Tag ini berfungsi untuk menampilkan judul dokumen HTML.

<body>

Tag ini berfungsi untuk menampilkan isi dari dokumen HTML. contohnya seperti: Link, image, text, video, dan semua yang akan ditampilkan ke browser. Tag body merupakan salah satu dari 3 bagian utama struktur HTML.

Maka, jika semuanya digabungkan struktur lengkapnya adalah sebagai berikut:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<title>Untuk Judul Dokumen HTML</html>
</head>
<body>
Untuk Isi Dokumen HTML
</body>
</html>

Sekarang coba anda ketikan skrip diatas pada aplikasi Text Editor anda, dan save dengan nama coba.html, kemudian jalankan dibrowser. Maka akan tampil sebagai berikut:



Element HTML  

Apa itu Element HTML? Element HTML adalah nama tag yang terdiri dari 3 bagian, yaitu: tag pembuka, isi, dan tag penutup.

Contoh :

<tag pembuka> isi </tag penutup>

Lebih jelasnya :

<body> isi </body>
<p> isi </p>
<b> isi </b>
<title> isi judul html </title>

<p> = adalah element yang digunakan untuk membuat paragraph.
<b> = adalah element yang digunakan untuk membuat huruf menjadi tebal (bold).
<title> = adalah element yang digunakan untuk mendefinisikan judul dokumen html.

Elemen HTML mempunyai ciri-ciri sebagai berikut:

  • Elemen HTML dimulai dengan tag pembuka.
  • Elemen HTML diakhiri dengan tag penutup.
  • Isi Elemen HTML adalah semua yang terdapat diantara tag pembuka dan tag penutup.
  • Beberapa elemen HTML ada yang tidak memiliki isi dan tag penutup.
  • Elemen yang tidak memiliki isi ditutup pada awal tag />.
  • Sebagian besar elemen HTML dapat diberi atribut tertentu.

Element yang tidak memiliki isi dan tag penutup contohnya:


<hr />
<br />
<hr /> adalah element yang akan membuat garis lurus.
<br /> adalah element yang akan membuat baris baru (line break).

Tag-tag yang ditulis secara berpasangan artinya “yang memiliki” tag pembuka dan tag penutup, dan yang musti di ingat adalah penulisan tag yang memiliki pasangan tidak boleh saling tumpah tindih dengan pasangan tag lain.

Contoh penulisan tag yang salah (tumpah tindih dengan pasangan tag lain):


<p>
<b> ... </p>
</b>

Contoh penulisan tag yang benar:

<p> <b>..</b> </p>

Tag <p> Harus berpasangan dengan tag </p>
Tag <b> Harus berpasangan dengan tag </b>

Attribute HTML

Apa itu Attribute HTML? Attribute HTML adalah property dari suatu element HTML. Attribut HTML terdiri atas nama dan nilai.

Contoh :

<tag nama-attribute=”nilai-attribute”>


Lebih Jelasnya :

<body bgcolor=”black”>

<body = adalah element html (nama tag)
bgcolor = adalah nama attribute
“black” = adalah nilai attribute

Contoh Lainnya :

<font color=”red”> Isi </font>

<font = element html
color = adalah nama attribute
“red” = adalah nilai attribute
Isi = adalah isi element html
</font> = adalah tag penutup

Contoh Lagi :

<div align=”center”>

<div = adalah element html
align = adalah nama attribute
“center” = adalah nilai attribute

Ingat! Nilai attribute harus berada didalam tanda petik dua “ “, contohnya jika kita ingin mengubah warna background html menjadi kuning, maka penulisan yang benar adalah seperti ini:

<body bgcolor=”yellow”>

Sebenarnya nilai attribute yang tidak diberi tanda petik dua “ “ masih bisa dijalankan di browser, namun agar memenuhi standar yang telah ditetapkan oleh W3C, maka ada baiknya kita menggunakan tanda petik dua untuk mendefinisikan nilai attribute. Dan ingat! Harus ditulis menggunakan huruf kecil semua yak :D

Bagaimana? mudah kan? oke sekian tutorial Belajar Dasar-Dasar HTML. Semoga Bermanfaat :)

Sumber : http://w3schools.com

Tidak ada komentar:

Posting Komentar

Copyright Multimedia 2014 Blogger Templates