Friday 13 December 2013

Macam Macam Versi HTML



Hari ini, kita akan melanjutkan apa yang sudah kita pelajari bersama sebelumnya, karena pada postingan sebelumnya saya mengatakan kita akan mempelajari tentang DOCTYPE, dari kata ini salah satu tag yang bertuliskan seperti <!DOCTYPE html>. Seperti yang sudah saya dan sobat pelajari dari w3schools.com, itu adalah tag untuk mendeklarasikan bahwa dokumen web tersebut menggunakan HTML 5, pasti sobat bertanya-tanya kalo ada HTML 5, pasti ada HTML 4, 3, 2, dan seterusnya dihitung mundur, memang benar HTML 5 adalah jenis dokumen web yang terbaru, dan karena seperti sobat, saya juga penasaran, maka saya ingin sekali mengetahui berbagai macam versi HTML.

Namun sebelumnya, kita harus mengetahui sejarah dari HTML terlebih dahulu, dan dibawah ini, sudah dat-s kutip dari salah satu blog, mengenai sejarah HTML dan perkembangannya, hal itu dat-s lakukan agar sobat sekalian tidak mengalami kesulitan, dan, ini dia sejarahnya.

SEJARAH HTML

Konsep HTML diciptakan pertama kali oleh IBM pada tahun 1980 pada saat tercetus ide untuk meletakkan elemen-elemen yang menandai bagian suatu dokumen seperti judul, alamat dan isi dokumen. Lalu, pada akhirnya elemen-elemen itu menjadi suatu program untuk melakukan pemformatan dokumen secara otomatis.

Bahasa pemprograman untuk melakukan tugas tersebut disebut markup language, atau lebih lengkapnya IBM menamai program tersebut sebagai Generalized Markup Language (GML).
Konsep ini pada tahun 1986 disetujui oleh ISO (International Standard Organization) sebagai standar bagi pembuatan dokumen-dokumen dengan keluarnya ISO 8879. ISO menamai GML ini menjadi SGML (Standard Generalized Markup Language).

SGML ke HTML

HTML – yang juga menggunakan teknologi markup language – dulu merupakan salah satu bagian dari SGML ini. Seorang peneliti yang bernama Tim Berners-Lee dari CERN – yang kini menjadi direktur W3C (World Wide Web Consortium) mengemukakan suatu ide tentang pembuatan suatu skrip bahasa pemprograman dandokumen yang bisa diakses oleh seluruh komputer tanpa melihat jenis platform-nya apakah Windows, Unix, Linux dan sebagainya. Semenjak itu HTML lebih populer daripada SGML.

PERKEMBANGAN HTML

Sebelum suatu HTML disahkan sebagai suatu dokumen HTML standar, ia harus disetujui dulu oleh W3C untuk dievaluasi secara ketat.
Setiap terjadi perkembangan suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru tersebut. Sebab jika tidak, browser tak akan bisa menampilkan HTML tersebut.

Dari sejarah awal mulai diciptakannya HTML, hingga Perkembangannya, di bawah sini, dat-s juga sudah membuatkan tabel yang berisi tentang Perkembangan HTML, dan, sejak perkembangan HTML, HTML bukan lagi bahasan pemrograman, melainkan bahasa markup.

HTML adalah bahasa markup

Versi-Versi HTML

Versi Tahun
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 2000
XHTML 1.0 1993
HTML5 2012
XHTML5 2013

Dari table di atas, pasti sobat seperti saya, akan bertanya-tanya, gimana sih penulisan tag untuk mendeklarasikan sebuah dokumen web HTML dari versi-versi HTML yang ada pada tabel di atas. Dan biar sobat lebih dipermudah lagi. Ini dia tag untuk mendeklarasikan sebuah dokument HTML yang saya pelajari dari w3schools.com.

DEKLARASI DOCTYPE UMUM



HTML 5

<!DOCTYPE html>


HTML 4.01 Strict
DTD ini berisi semua elemen HTML dan atribut, tapi TIDAK TERMASUK presentasional (seperti font). Framesets tidak diperbolehkan.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


HTML 4.01 Transitional
DTD ini berisi semua elemen HTML dan atribut, TERMASUK elemen presentasional (seperti font). Framesets tidak diperbolehkan.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


HTML 4.01 Frameset
DTD ini sama dengan HTML 4.01 Transitional, namun memungkinkan penggunaan Frameset.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


XHTML 1.0 Strict
DTD ini berisi semua elemen HTML dan atribut, tapi TIDAK TERMASUK presentasional (seperti font). Framesets tidak diperbolehkan. Markup juga harus ditulis sebagai well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


XHTML 1.0 Transitional
DTD ini berisi semua elemen HTML dan atribut, TERMASUK elemen presentasional (seperti font). Framesets tidak diperbolehkan. Markup juga harus ditulis sebagai well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


XHTML 1.0 Frameset
DTD ini sama dengan XHTML 1.0 Transitional, namun memungkinkan penggunaan Frameset.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


XHTML 1.1
DTD ini sama dengan XHTML 1.0 Strict, tetapi memungkinkan Anda untuk menambahkan modul (misalnya untuk memberikan dukungan ruby ​​untuk bahasa Asia Timur).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


Nah sobat, dari yang sudah kita lihat dan pelajari bersama ini, semoga dapat bermanfaat ya, karena semakin kita mengenal HTML dari dasarnya, maka kita akan semakin memahami apa sebenarnya HTML itu.

Dan seperti yang sudah kita pelajari sebelumnya mengenai cara browser menrayap dokument HTML kita, maka kita harus memilih DOCTYPE yang tepat. Sekian dari saya sekali lagi semoga dapat bermanfaat, jika ada kekurangan harap berikan komentarnya, agar kita dapat belajar bersama, mempelajari dan memahami apa itu HTML yang sesungguhnya.

Sekarang hampir semua browser mendukung HTML 5
READ MORE - Macam Macam Versi HTML

Thursday 12 December 2013

Mengenal Lebih Dalam Tentang Tag HTML



Hari ini kita kembali akan mempelajari atau memperdalam lagi pengetahuan kita tentang tag HTML, karena sebelumnya kita sudah mengenal Apa Itu HTML? maka sekarang tinggal kita perdalam lagi pengetahuan kita tentang tag HTML.

Seperti yang sudah kita pelajari sebelumnya secara bersama-sama, melalui w3schools.com yakni :

  • HTML adalah singkatan dari Hyper Text Markup Language
  • HTML adalah bahasa markup
  • sebuah bahasa markup adalah seperangkap markup tags
  • tags menggambarkan isi dokument
  • Dokument HTML berisi HTML tags dan plain text
  • Dokument HTML Juga disebut halaman web

Merasa belum puas tentang apa itu tag HTML, saya kembali mengunjungi w3schools.com untuk mempelajari kembali bagaiman cara menempatkan tag HTML, dan apa saja tag-tag HTML itu.

Di bawah ini, ada contoh kode HTML, untuk memperjelas dan menambah pengetahuan kita tentang tag HTML maka akan saya jelaskan kembali fungsi dari tag HTML yang ada pada contoh di bawah ini :

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Agar sobat memahami betul mengenai tag HTML, coba sobat kembali buka aplikasi notepad sobat untuk kembali mengetik kode HTML yang terdapat dalam kota contoh di atas, kemudian menyimpannya dengan nama "pelajaran1.html" tanpa tanda kutip, dengan cara seperti yang sudah saya jelaskan pada postingan sebelumnya tentang Apa Itu HTML?.

Jika sudah, maka langkah selanjutnya, coba sobat jalankan file yang sudah dibuat tadi, dengan cara mengklik dua kali pada file "pelajaran1.html". Maka, pada browser tampilannya akan menjadi seperti di bawah ini :

My First Heading


My first paragraph.

Nah, dari contoh di atas, saya mempelajari ini dari w3schools.com :

  • Deklarasi DOCTYPE mendefinisikan tipe dokumen
  • Teks antara <html> dan </ html> menjelaskan halaman web
  • Teks antara <body> dan </ body> adalah isi halaman yang terlihat
  • Teks antara <h1> dan </ h1> ditampilkan sebagai judul
  • Teks antara <p> dan </ p> ditampilkan sebagai sebuah paragraf


<!DOCTYPE html> adalah definisi untuk tipe dokumen HTML5

Dan, kesimpulannya, setiap tag HTML dan element HTML akan hadir berpasangan, seperti :

<tagname>Konten</tagname>

Nah, w3schools.com menjelaskan keseluruhan tentang bagaimana cara yang benar menempatkan tag HTML dan element HTML, di bawah ini ada struktur halaman HTML yang saya kutip dari w3schools.com, dan sobat akan lebih memahami cara yang benar menempatkan tag HTML.

Struktur Halaman HTML


Di bawah ini adalah bentuk dari struktur HTML, setiap kontent akan berada di dalam tag HTML :

<html>

<body>

<h1>Ini Heading</h1>

<p>Ini adalah sebuah paragraf.</p>

<p>Ini adalah paragraf lain.</p>

</body>

</html>

Dari struktur tag HTML di atas, sobat akan mengetahui mana penulisan tag yang benar dan mana yang salah, seperti contoh di bawah ini :

Ini adalah struktur HTML yang salah
<b><i>Ini Salah</b></i>

Ini adalah strukur HTML yang benar
<b><i>Ini Benar</i></b>

Nah sobat, dari apa yang sudah kita pelajari bersama-sama, sobat pasti masih bertanya-tanya mengenai DOCTYPE, kenapa dia tidak memiliki pasangan? Nah, untuk DOCTYPE, akan kita lanjut mempelajarinya pada postingan selanjutnya. Demikian dulu postingan kali ini, jika ada yang kurang dimengerti silahkan berikan komentarnya.

Sukses Selalu ^_^
READ MORE - Mengenal Lebih Dalam Tentang Tag HTML

Wednesday 11 December 2013

Apa Itu HTML?

HTML

Hari ini saya mulai belajar mengenai cara membuat sebuah website dari situs w3schools.com, dan sebagai awal, saya memilih pelajaran pertama yang disarankan w3schools.com untuk seorang weber pemula, yakni, Pelajaran HTML.

Sebagai seorang weber pemula, kita harus tahu dulu apa itu HTML, sehingga kita akan lebih dipermudah dalam mempelajari cara pembuatan sebuah website.

Menurut w3schools.com dengan HTML, Sobat dapat membuat website Sobat sendiri, selain itu menurut w3schools.com juga, belajar HTML itu mudah, Sobat akan menikmatinya. Lantas, Apa itu HTML?

Apa itu HTML?

Menurut w3schools.com HTML adalah bahasa untuk mendeskripsikan halaman web.
  • HTML adalah singkatan dari Hyper Text Markup Language
  • HTML adalah bahasa markup
  • sebuah bahasa markup adalah seperangkap markup tags
  • tags menggambarkan isi dokument
  • Dokument HTML berisi HTML tags dan plain text
  • Dokument HTML Juga disebut halaman web
Lantas, bagaimana cara menggunakan HTML? banyak yang bilang bahwa HTML adalah bahasa pemrograman, tapi itu salah, HTML adalah bahasa markup, jika Sobat tidak mengerti apa itu bahasa markup coba Sobat googling mengenai Apa Itu Bahasa Markup,

Jika Sobat sudah mengerti mengenai apa itu bahasa markup, maka menurut saya, belajar HTML Sobat akan semakin dipermudah, dan bagi yang belum mengerti, akan saya jelaskan apa itu bahasa marup.

Contoh Dokument Web :
Coba sobat buka aplikasi notepad yang ada di komputer Sobat, kemudian, di dalam notepad tersebut coba tuliskan kata-kata berikut ini :
  • Ini Header
  • Ini Menu Navigasi
  • Ini Article
  • Ini Sidebar
  • Ini Footer
Gambar Contoh :


Setelah Sobat mengikuti langkah di atas, coba sobat save halaman notepad yang sudah berisi kata-kata di atas dengan nama file "pengenalan-html.html" tanpa tanda kutip, dengan cara sebagai berikut :

  • Klik file
  • Setelah muncul menu, klik save
  • Setelah muncul tampilan explorer, pilih tempat untuk menyimpan file tersebut, disarankan Sobat membuat folder khusus untuk file ini, karena ini akan menjadi awal pembelajaran Sobat.
  • Pada save as type, pilih All Files (*.*), dan pada File name tuliskan "pengenalan-html.html" tanpa tanda kutip
  • klik save
Gambar Contoh :


Setelah sudah disave, maka langkah selanjutnya coba Sobat buka file yang sudah disave tadi, dengan cara klik 2 kali pada file HTML yang sudah disave tadi, maka file tersebut akan dibuka di salah satu browser yang sobat miliki seperti chrome, firefox, internet explore dan lain sebagainya.

Gambar Contoh :


Ketika Sobat melakukan langkah di atas, apa yang terjadi? Kata kata yang sobat tulis tadi, akan muncul di sebua web browser, namun tidak beraturan, tanpa enter dan hanya lurus saja, meski pada dokument notepad ditulis terpisah dengan menggunakan enter, kenapa? Hal itu, disebabkan karena, browser berfungsi untuk membaca dokumen HTML dan menampilkannya sebagai halaman web. Sehingga, walaupun kata kata yang terdapat dalam satu dokument HTML yang sobat buat tadi sudah menjelaskan mengenai isi dokument, tapi web browser tidak mengakui bahwa apa yang tertulis di dalam file HTML itu benar, seperti Ini Header, namun browser hanya menerjemahkan itu sebagai text saja, nah bagaiman agar tulisan itu dapat terbaca oleh sebuah web browser sebagai suatu header? Caranya, dengan menggunakan tag HTML. Lantas, bagaimana cara menulis tag HTML?

Note : Di bawah ini saya ingin menjelaskan cara meletakan tag HTML dalam sebuah dokument .html. tapi tidak seperti blog-blog lain yang mempermudah pembelajaran dengan cara membiarkan seorang yang sedang belajar untuk mengkopi paste isi tag HTML, alangkah baiknya seorang yang sedang belajar itu mengetik satu persatu isi dari dokument HTML pertamanya.

Penulisan tag HTML?
Menurut w3schools.com, tag HTML adalah tag markup HTML, lantas, bagaimana penulisan tag HTML tersebut?


  • Tag HTML adalah kata kunci (nama tag) yang dikelilingi oleh kurung sudut seperti <html>
  • Tag HTML biasanya datang berpasangan seperti <b> dan </ b>
  • Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir
  • Tag akhir ditulis seperti tag awal, dengan garis miring sebelum nama tag
  • Mulai dan tag akhir juga disebut tag pembuka dan tag penutup
Coba sobat edit file .html yang sudah sobat buat tadi dengan menggunakan notepad, sehingga menjadi seperti di bawah ini :

Gambar Contoh :


Setelah sudah Sobat edit menjadi seperti di atas, selanjutnya coba save kembali file tersebut dan jalankan kembali dengan cara mengklik 2 kali file yang sudah ada, atau, kalau file tadi masih terbuka di browser Sobat, coba sobat segarkan halaman browser sobat. maka akan ada perubahan.

Gambar Contoh :


Nah, setelah sobat melihat apa yang sudah di tampilkan browser, pasti sobat mulai ada gambaran tentang apa itu HTML, seperti yang sudah saya jelaskan di awal, HTML adalah tag untuk menandai suatu isi dokument sebuah web. seperti :

  • <!DOCTYPE html> adalah tag yang berfungsi untuk mendeklarasikan bahwa dokument web tersebut adalah dokument web HTML5. Ada banyak macam tag untuk mendeklarasikan sebuah dokument web. dan sesuai perkembangan sekarang semua sudah beralih ke HTML5, dan itu akan dijelaskan pada postingan berikutnya
  • Kemudian ada tag <html> dan </html>, ini adalah tag untuk menjelaskan bahwa ini adalah halaman web.
  • setelah itu ada tag <head> tag tersebut berfungsi untuk meletakan semua tag yang berisi penjelasan dari isi Dokument web, seperti, judul web, tag meta deskripsi, kata kunci, serta style css dan javascript yang secara keseluruhan berfungsi untuk mengatur layout web kita, semua itu akan Sobat dapatkan di postingan-postingan selanjutnya
  • setelah itu ada tag <body> tag ini adalah tag untuk mengisi apa saja yang akan kita tampilkan ke halaman web kita
  • dan tag lain-lain yang ada di dalam tag <body> akan saya jelaskan pada postingan blog selanjutnya.
Nah, setelah mengikuti dan membaca tentang apa itu HTML. semoga, Sobat dapat memahami apa sesungguhnya HTML itu, namun saya hanyalah manusia biasa, jika ada yang belum dipahami mohon berikan komentar Sobat, sehingga kita dapat belajar bersama-sama, sekian dulu postingan hari ini, selebihnya saya akan lanjutkan lewat postingan selanjutnya, jika sobat berminat mengikuti pelajaran dari blog ini, silahkan klik mengikuti, agar setiap update blog dapat langsung dikirimkan ke email Sobat. Sekian untuk hari ini, sampai bertemu di pelajaran selanjutnya.

Sukses Selalu ^_^
READ MORE - Apa Itu HTML?