MAKALAH TUTORIAL
PENGGUNAAN HTML 5
DALAM
PEMBUATAN APLIKASI BERBASIS WEB
Pada tutorial kali ini, saya akan membuat website yang sangat sederhana dengan penggunaan HTML5. Sebelumnya kita harus mengetahui apa itu HTML5. HTML merupakan perkembangan dari versi sebelumnya HTML4 atau XHTML 1.0 yang mempunyai banyak kelebihan dari versi sebelumnya. Sebenarnya HTML5 belum resmi dirilis oleh W3C, tetapi didalam perkembangannya HTML% sudah mulai dan banyak digunakan oleh para web designer atau web developer untuk membuat halaman website dikarenakan kelebihannya seperti membuat validasi form tanpa melakukan javascript, mamainkan animasi, audio atau video tanpa memerlukan plugin khusus seperti adobe flash dan bisa menyimpan data di dalam lokal komputer.
Selain itu HTML5 telh didukung oleh major browser seperti google chrome, mozilla firefox, opera dan safari. Tentunya dalam tutorial ini akan dibahas cara penggunaan dari tag-tag baru dalam HTML5 yang tentunya dilengkapi dengan screenshoot yang telah ditest pada beberapa browser diatas.
HTML 5 juga menyederhanakan kode dengan menyingkirkan elemen yang telah jatuh dari penggunaan atau terbukti tidak membantu. Karena array masalah browser, frame tidak akan lagi diperbolehkan, dan karena style sheet menangani style lebih baik dari tag HTML, “presentasi” tag seperti < font >, < center > and < strike > tidak akan lagi berlaku.
Perubahan Layout
Sebelumnya, halaman dalam HTML biasanya dibagi menjadi blok menggunakan tag < div>. Sayangnya, ini sering mengakibatkan kode membingungkan atau terlalu-rumit:
<div id=”content”> </ div><div id=”header”> </ div><div> </ Div><div id=”footer”> </ div>
HTML 5 perbaikan masalah ini dengan tag semantik baru
<header>, <footer>,<nav>, <content>,<aside>, <article>,<hgroup>, <section>,<address>, <audio> dan <video>.
Ini semua berperilaku persis seperti tag <div>
namun membuat kode lebih mudah dibaca. Kode di atas sekarang dapat ditulis ulang sebagai berikut:
<header></header><content><article></article></content><footer></footer>
Berikut adalah beberapa bagian yang akan dibahas dalam tutorial ini :
- Bagaimana cara memanggil CSS dari HTML
- Membuat form sederhana
- Membuat folder-folder untuk membuat website
- Mengetahui fungsi beberapa tags
Untuk hasil akhirnya seperti pada gambar dibawah ini.
Step 1
Untuk tutorial ini saya tidak akan memberitahu bagaimana cara menginstal XAMPP, saya anggap kita sudah mengetahui menggunakan XAMPP. Langsung saja membuat folder untuk memanggil file-file html nya. Misal folder instalasi XAMPP nya berada di C:\xampp\htdocs\music, pada contoh ini kita membuat folder dengan nama “music” seperti contoh di atas.
Di dalam folder music ini terdiri dari 3 files diantaranya index.html, style.css dan folder images, untuk membuat file index.html dan style.css bisa menggunakan notepad atau lainnya.
Sehingga susunan foldernya seperti gambar di bawah ini.
Step 2
a.Basic Mark Up
Sebelum kita melangkah ke step berikutnya kita perlu mengetahui fungsi-fungsi tags di atas.
1. <!DOCTYPE html>
Doctype yang singkat sebagai ciri khas HTML5
2. <html> dan </html>
Tags yang harus ada untuk memberitahu browsers kalau type dokumen ini bertype html, yang perlu diperhatikan semua tag html harus ada pembuka dan penutup, maksudnya seperti <tags> harus diakhiri dengan tag penutup </tags>.
3. Tag <title>Judul Website Kita</title>
1 Judul Website Kita
Tags ini untuk memberitahu apa judul dari website kita
4. <body>…</body>
Untuk memanggil file css kita perlu menambahkan script ini di bawah tag <title>
5. <link href="style.css" rel="stylesheet" type="text/css" />
Bagian Body adalah isi dari dokumen HTML yang didalamnya telah disusun kode kode sehingga akan menampilkan website yang anda hendaki
b. Memasukan script pendukung ke dalam bagian Body html
Persis di bawah tag <body> masukan kode berikut
1. File index.html
Sehingga script lengkap untuk contoh di atas adalah sebagai berikut, silahkan copy ke Notepad ++ atau lainnnya kemudian simpan dengan nama index.html di folder music.
2. File style.css
terima kasih gan..
BalasHapussiap untuk melanjutkan.
hehe