Pengenalan Dasar HTML 5
advertisement
Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG • HTML adalah bahasa standar untuk membuat halaman Web • HTML (Hypertext Markup Language) adalah suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara benar. Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web. • HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk mentransfer data atau document yang berformat HTML dari web server ke web browser. Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web. • Tujuan dari web browser (Chrome, IE, Firefox) adalah untuk membaca dokumen HTML dan menampilkannya. • Elemen HTML diwakili/ dituliskan dengan tag • Browser tidak menampilkan tag HTML, tetapi menggunakannya untuk menampilkan dokumen hasil tag tersebut. Perkembangan Versi HTML sejak awal sampai sekarang Yang digunakan sekarang adalah versi HTML5 HTML5 didukung di semua browser modern dan terbaru. Apa yang baru di HTML5? Deklarasi DOCTYPE yang sangat sederhana di html5, yaitu menandakan bahwa dokumen adalah HTML 5. Deklarasi <! DOCTYPE> mewakili jenis dokumen, dan membantu browser untuk menampilkan halaman web dengan benar. <! DOCTYPE> di deklarasikan di bagian atas halaman (sebelum tag HTML). deklarasi <! DOCTYPE> HTML adalah: <!DOCTYPE html> Apa yang baru di HTML5? deklarasi karakter pengkodean (charset) juga sangat sederhana <meta charset="UTF-8"> Jika di dalam kode HTML tidak dimasukkan charset, atau encoding ini, maka cukup dengan menyimpan dengan tipe encoding UTF-8. Meta tag diatas memberi instruksi kepada web browser untuk menerjemahkan karakter-karakter di dalam halaman HTML sebagai UTF-8. Karakter set paling sederhana dan juga paling awal digunakan adalah karakter set ASCII, (dalam HTML ditulis sebagai charset=”us-ascii”). Karakter set ini terbatas pada huruf latin (a-z, A-Z) dan beberapa karakter lain seperti angka, spasi, tab, dll dengan total hanya 128 karakter. Karakter set “us-ascii” kemudian dikembangkan menjadi karakter ANSI. Pemasalahan pada karakter set ASCII maupun ANSI adalah tidak menyertakan karakter non-latin seperti huruf arab, cina, jepang, dll. Dengan menggunakan UTF-8, kita tidak perlu khawatir mengenai karakter atau bahasa apa yang akan digunakan. UTF-8mendukung hingga lebih dari 10.000 karakter. Apa yang baru di HTML5? Yang paling menarik dari elemen HTML5 baru: • elemen semantik baru seperti <header>, <footer>, <article>, dan <section>. • atribut baru dari form element seperti nomor, tanggal, waktu, kalender, dan range. • unsur-unsur baru grafis: <svg> dan <canvas>. • unsur-unsur baru multimedia: <audio> dan <video>. HTML Editors • Gunakan Notepad untuk mengetikkan tag HTML • Halaman web dapat dibuat dan dimodifikasi dengan menggunakan editor HTML profesional. • Namun, untuk belajar HTML sebaiknya editor teks sederhana seperti Notepad. Berikut langkah-langkah untuk membuat halaman web pertama dengan Notepad • Step 1: Buka Notepad • Step 2: ketikkan kode HTML <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> • Step 3: simpan file HTML Gunakan tag-tag berikut dan lihat hasilnya : • • • • • <br> dan <hr> <b>, <i>, <u> <font size, color, face> <marquee> <big>, <small>, <em>, <strong>, <ins>, <del>,<sup>,<sub> Berikut langkah-langkah untuk membuat halaman web pertama dengan Notepad • Step 4: Buka file HTML di browser – Nuk file HTML yang telah di simpan, double click atau klik kanan pilih browser yang diinginkan AUDIO FILE AUDIO YANG AKAN KITA MASUKKAN HARUS BERADA DALAM SATU FOLDER DENGAN FILE HTML NYA <!DOCTYPE html> <html> <body> <audio src="One Direction - You And I.mp3" controls></audio> </body> </html> atribut controls ditambahkan di audio untuk menambahkan tombol play, pause, and volume. <source> elemen memungkinkan untuk menentukan file audio alternatif yang dapat dipilih oleh browser. browser akan menggunakan format yang pertama dikenalnya. <audio controls> <source src=" One Direction - You And I.mp3 " type="audio/mpeg"> <source src=" One Direction - You And I.wav " type="audio/wav"> </audio> AUDIO VIDEO FILE VIDEO YANG AKAN KITA MASUKKAN HARUS BERADA DALAM SATU FOLDER DENGAN FILE HTML NYA <!DOCTYPE html> <html> <body> <video src="Final.mp4" controls></video> </body> </html> untuk mengatur size video yang dtampilkan gunakan width dan height. <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video> VIDEO VIDEO HTML <video> Autoplay Untuk memulai video secara otomatis menggunakan atribut autoplay: <video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video> Atribut autoplay tidak bekerja di perangkat mobile seperti iPad dan iPhone.
