Pengenalan Dasar HTML 5. Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG

Ukuran: px

Mulai penontonan dengan halaman:

Download "Pengenalan Dasar HTML 5. Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG"

Sri Hermawan
6 tahun lalu
Tontonan:

1 Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit - KALTENG

2 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.

3 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.

4 Perkembangan Versi HTML sejak awal sampai sekarang Yang digunakan sekarang adalah versi HTML5 HTML5 didukung di semua browser modern dan terbaru.

5 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>

6 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 karakter.

7 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>.

8 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.

9 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

10 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>

11 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.

12 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>

13 AUDIO

14 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>

15 VIDEO

16 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.

dokumen-dokumen yang mirip

BELAJAR HTML Hyper Text Markup Language

www.bambangherlandi.web.id BELAJAR HTML Hyper Text Markup Language 1 HTML INTRODUCTION HTML Example my First Heading my first paragraph. 2