![Page 1: Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG ... •HTTP atau Hypertext Transfer Protokol merupakan protokol](https://reader030.vdocuments.net/reader030/viewer/2022021503/5af9eebe7f8b9a44658e6695/html5/thumbnails/1.jpg)
Pengenalan Dasar HTML 5
Author : Minarni, S.Kom.,MM
Universitas Darwan Ali Sampit - KALTENG
![Page 2: Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG ... •HTTP atau Hypertext Transfer Protokol merupakan protokol](https://reader030.vdocuments.net/reader030/viewer/2022021503/5af9eebe7f8b9a44658e6695/html5/thumbnails/2.jpg)
• 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.
![Page 3: Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG ... •HTTP atau Hypertext Transfer Protokol merupakan protokol](https://reader030.vdocuments.net/reader030/viewer/2022021503/5af9eebe7f8b9a44658e6695/html5/thumbnails/3.jpg)
• 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.
![Page 4: Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG ... •HTTP atau Hypertext Transfer Protokol merupakan protokol](https://reader030.vdocuments.net/reader030/viewer/2022021503/5af9eebe7f8b9a44658e6695/html5/thumbnails/4.jpg)
Perkembangan Versi HTML sejak awal sampai sekarang
Yang digunakan sekarang adalah versi HTML5
HTML5 didukung di semua browser modern dan terbaru.
![Page 5: Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG ... •HTTP atau Hypertext Transfer Protokol merupakan protokol](https://reader030.vdocuments.net/reader030/viewer/2022021503/5af9eebe7f8b9a44658e6695/html5/thumbnails/5.jpg)
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>
![Page 6: Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG ... •HTTP atau Hypertext Transfer Protokol merupakan protokol](https://reader030.vdocuments.net/reader030/viewer/2022021503/5af9eebe7f8b9a44658e6695/html5/thumbnails/6.jpg)
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">
![Page 7: Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG ... •HTTP atau Hypertext Transfer Protokol merupakan protokol](https://reader030.vdocuments.net/reader030/viewer/2022021503/5af9eebe7f8b9a44658e6695/html5/thumbnails/7.jpg)
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>.
![Page 8: Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG ... •HTTP atau Hypertext Transfer Protokol merupakan protokol](https://reader030.vdocuments.net/reader030/viewer/2022021503/5af9eebe7f8b9a44658e6695/html5/thumbnails/8.jpg)
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.
![Page 9: Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG ... •HTTP atau Hypertext Transfer Protokol merupakan protokol](https://reader030.vdocuments.net/reader030/viewer/2022021503/5af9eebe7f8b9a44658e6695/html5/thumbnails/9.jpg)
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>
![Page 10: Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG ... •HTTP atau Hypertext Transfer Protokol merupakan protokol](https://reader030.vdocuments.net/reader030/viewer/2022021503/5af9eebe7f8b9a44658e6695/html5/thumbnails/10.jpg)
• <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 :
![Page 11: Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG ... •HTTP atau Hypertext Transfer Protokol merupakan protokol](https://reader030.vdocuments.net/reader030/viewer/2022021503/5af9eebe7f8b9a44658e6695/html5/thumbnails/11.jpg)
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
![Page 12: Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG ... •HTTP atau Hypertext Transfer Protokol merupakan protokol](https://reader030.vdocuments.net/reader030/viewer/2022021503/5af9eebe7f8b9a44658e6695/html5/thumbnails/12.jpg)
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>
![Page 13: Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG ... •HTTP atau Hypertext Transfer Protokol merupakan protokol](https://reader030.vdocuments.net/reader030/viewer/2022021503/5af9eebe7f8b9a44658e6695/html5/thumbnails/13.jpg)
AUDIO
![Page 14: Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG ... •HTTP atau Hypertext Transfer Protokol merupakan protokol](https://reader030.vdocuments.net/reader030/viewer/2022021503/5af9eebe7f8b9a44658e6695/html5/thumbnails/14.jpg)
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>
![Page 15: Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG ... •HTTP atau Hypertext Transfer Protokol merupakan protokol](https://reader030.vdocuments.net/reader030/viewer/2022021503/5af9eebe7f8b9a44658e6695/html5/thumbnails/15.jpg)
VIDEO
![Page 16: Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG ... •HTTP atau Hypertext Transfer Protokol merupakan protokol](https://reader030.vdocuments.net/reader030/viewer/2022021503/5af9eebe7f8b9a44658e6695/html5/thumbnails/16.jpg)
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>