HTML5 adalah versi paling mutakhir dari HTML, disebut-sebut juga sebagai "masa depan" pembuatan sebuah website. Pada dasarnya HTML5 hanya menambahkan beberapa elemen dan atribut baru yang sebelumnya tidak ada pada HTML4 serta menghapus beberapa elemen yang kurang berguna pada HTML4. Jangan khawatir, elemen-elemen yang kita pelajari sebelumnya tidak ada yang dihapus dari HTML5. Sekali lagi ditegaskan bahwa HTML5 hanya menambahkan elemen-elemen yang sebelumnya tidak ada serta menghapus beberapa elemen yang kurang berguna pada HTML4.
Berikut ini adalah coding minimun (unsur-unsur yang harus ada) dalam penulisan sebuah dokumen HTML5:
""<!DOCTYPE html>
<html>
<head>
<title>Judul Website Anda</title>
</head>
<body>Isi halaman website anda...
</body>
</html>""
Berikut ini adalah satu contoh penggunaan HTML5 dengan Javascript:
HTML5 "<canvas>" elemen adalah sebuah kontainer yang digunakan untuk menggambar grafis. gambar ini dibuat dengan menggunakan script, biasanya Javascript. Copy dan simpanlah coding berikut ini dalam bentuk file HTML, tanda double quote ("") pada awal dan akhir coding jangan ikut dicopy:
""<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>
</html>""
Maka akan dihasilkan canvas seperti di bawah ini:
""<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>""
Maka akan dihasilkan canvas berikut gambar grafisnya seperti di bawah ini:
1. Bagi yang belum memahami javascript tidak perlu khawatir sebab, kita dapat mengolah gambar dengan menggunakan "photoscape" atau "photoshop" lalu meng-upload-nya dengan cara yang sudah kita pelajari pada HTML part 1.
2. HTML secara otomatis akan selalu "menciutkan" coding yang anda buat. Misalnya anda memberikan sepuluh spasi di antara dua buah kata atau dua buah elemen, maka secara otomatis HTML akan membuang sembilan spasi dan menyisakan satu spasi saja. Bila anda ingin membuat spasi (jarak) pada dua buah kata atau dua buah elemen anda bisa menambahkan " " di antara kata atau elemen tersebut (tanda quote/"" jangan ikut ditulis). Semakin banyak " " yang anda bubuhkan, semakin besar spasi atau jaraknya.
3. Menyisipkan sebuah video pada dokumen HTML seringkali menemui berbagai kendala yang umumnya seputar kompatibilitas (kesesuaian) hardware dan software. Untuk mengatasi hal ini kita bisa merubah format sebuah video menjadi format HTML (video.webm). Namun, kita harus memiliki software "converter" untuk merubah sebuah video menjadi format "video.webm". Jangan khawatir, software ini dapat didownload secara gratis pada converter lite. Bila anda sudah men-download software tersebut, inilah langkah-langkah untuk menyisipkan sebuah video ke dalam dokumen HTML anda:
- Bukalah converter tersebut (biasanya secara otomatis sebuah shortcut icon converter lite akan muncul di layar setelah anda men-download dan meng-instalnya). Pada menu "Select type" klik "Video".
Kemudian pilih video yang akan anda convert, semakin lama durasi video yang anda pilih, semakin lama waktu proses yang dibutuhkan, kemudian klik "next"
Pada menu "formats" klik icon "webm"
Kemudian pada menu "WebM Quality" klik icon kualitas gambar yang anda inginkan (semakin tinggi kualitas yang anda pilih, semakin lama waktu pemrosesannya), misalkan anda pilih kualitas "HD 1280x720 kemudian klik next
kemudian klik "CONVERT" dan tunggu prosesnya selesai
Secara otomatis video yang telah dirubah formatnya akan berada pada folder yang sama tempat video asli berada, dengan nama yang sama juga namun formatnya berbeda. Video yang telah dirubah berbentuk file HTML.
- Copy dan tempatkan video yang telah anda rubah ke dalam folder yang sama tempat anda akan menyimpan file HTML anda (sama seperti ketika anda akan menyisipkan gambar ke dalam file HTML). Misalkan kita beri nama video tersebut "video1"
- Inilah coding-nya:
""<video controls="" height="240" width="320">
<source src="video1.webm" type="video/webm">
Your browser does not support the video tag.
</video>""
"height" adalah tinggi video, "width" adalah lebar video (dalam satuan pixel), "source src" adalah sumber video. Contoh dari video dapat anda lihat pada tutorial sebelumnya tutorial nomor 18.
4. Meng-copy sebuah URL atau alamat sebuah situs bisa dilakukan dengan cara seperti di bawah ini:
- Bukalah situs yang ingin anda copy URL (Uniform Resource Locator)nya lalu klik URL pada browser hingga ter-highlight/terblok oleh warna biru
- Letakan kursor pada tempat dimana anda ingin menempatkan hasil copy URL tersebut, kemudian tekan "Ctrl-V" pada keyboard anda. "Ctrl-C" berarti "copy" dan "Ctrl-V" berarti "paste"
5. Ini adalah salah satu software favorit bagi saya. Software ini amat mudah di-instal, mudah digunakan, aman dan gratis. Anda dapat melihat bangunan HTML dari website manapun dan mengutak-atiknya dengan cara yang amat menyenangkan. Penasaran??.. anda bisa download disini. Anda hanya perlu mengikuti petunjuknya yang mudah, bila ada pertanyaan seputar penggunaannya bisa anda sampaikan pada kolom komentar di bawah.
Sebelum kita masuk ke pembahasan selanjutnya mengenai CSS (Cscading Style Sheet), akan lebih baik bila kita menjawab pertanyaan berikut ini:
- Apa hubungan antara HTML dengan CSS?
- Mengapa kita butuh CSS bila HTML saja sudah cukup untuk membuat sebuah website?
- CSS berfungsi untuk mebuat layout/tampilan sebuah website dan memberikan style/gaya pada sebuah dokumen HTML.
- Untuk sebuah website yang amat sederhana mungkin CSS memang tidak dibutuhkan. Tetapi, bila website yang kita buat berisi banyak data, style dan format yang kompleks maka CSS mutlak diperlukan. Bayangkan bila anda ingin merubah sebuah elemen pada dokumen HTML yang bila di-print bisa sampai belasan atau puluhan halaman!, tentu sebuah hal yang amat tidak menyenangkan. Dengan CSS kita bisa membuat dokumen HTML kita menjadi lebih sederhana dan mudah dimodifikasi.
Kembali Lanjut
No comments:
Post a Comment