View
230
Download
1
Category
Preview:
Citation preview
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
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.
<meta charset="UTF-8">
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 dandimodifikasi dengan menggunakaneditor HTML profesional.
• Namun, untuk belajar HTML sebaiknyaeditor teks sederhana sepertiNotepad.
Berikut langkah-langkah untuk membuat halaman
web pertama dengan Notepad
• Step 1: Buka Notepad
• Step 2: ketikkan kode HTML
• Step 3: simpan file HTML
<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>
• <br> dan <hr>
• <b>, <i>, <u>
• <font size, color, face>
• <marquee>
• <big>, <small>, <em>, <strong>, <ins>, <del>,<sup>,<sub>
Gunakan tag-tag berikut dan lihat hasilnya :
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
AUDIOFILE AUDIO YANG AKAN KITA MASUKKAN HARUS BERADA DALAM SATU FOLDER DENGAN FILE HTML NYA
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.
<!DOCTYPE html>
<html>
<body>
<audio src="One Direction - You And I.mp3"
controls></audio>
</body>
</html>
<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
untuk mengatur size video yang dtampilkan gunakan width dan height.
<!DOCTYPE html>
<html>
<body>
<video src="Final.mp4"
controls></video>
</body>
</html>
<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4">
</video>
VIDEO
VIDEOHTML <video> Autoplay
Untuk memulai video secara otomatis menggunakan atribut
autoplay:
Atribut autoplay tidak bekerja di perangkat mobile seperti
iPad dan iPhone.
<video width="320" height="240" autoplay><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">
</video>
Recommended