Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan...

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>

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>

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>

Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan...

Documents

Transcript of Pengenalan Dasar HTML 5 · Pengenalan Dasar HTML 5 Author : Minarni, S.Kom.,MM Universitas Darwan...