Menampilkan Images, Audio, Video, dan Membuat Tabel

Transkripsi

1 Menampilkan Images, Audio, Video, dan Membuat Tabel Wahyu Widodo, S.Kom.,M.Kom

2 Praktik Pertemuan 5 : Menampilkan Images Menampilkan Audio Menampilkan Video Membuat Tabel

3 Menampilkan Images Rumus menampilkan image : <img src="url" alt="some_text width= height= "> Src : menyatakan lokasi image Alt : keterangan gambar Width : lebar gambar Height : tinggi gambar File yang sering digunakan adalah ektensi : *.jpg, *.png, dan *.gif (animasi)

4 Menampilkan Images (1)

5 Menampilkan Images Sebagai Link Dengan menampilkan tag <img> di dalam anchor <a>

6 Menampilkan Floating Image Paragraf pertama, image di sebelah kanan teks Paragraf kedua image di sebelah kiri teks

7 Menampilkan Image Maps Dengan menggunakan tag <map>, kita dapat menentukan clickable area dan bisa dilinkan Ke suatu halaman.

8 Membuat Background Image

9 <picture> element Pada HTML5, ada tag baru <picture> yang dapat digunakan untuk mengatur images resource Yang berbeda berdasarkan resolusi layar.

10 Menampilkan Video Tag <video> pada HTML5 dapat menghilangkan ketergantungan dengan plugin flash player Untuk memutar video. Format video yang dapat digunakan sebagai berikut : Siapkan Video dalam format mp4 dulu sebelum mencoba script ini

11 Menampilkan Video (1) Poster : untuk gambar thumbnail (menampilkan video sebelum diputar) Jika ingin video langsung diputar, tambahkan attribute autoplay pada tag video.

12 Menampilkan Audio Tag <audio> pada HTML5 dapat menghilangkan ketergantungan dengan plugin flash player Untuk memutar audio. Format audio yang dapat digunakan sebagai berikut :

13 Menampilkan Audio (1)

14 Membuat Tabel

15 Membuat Tabel (1) Split 2 Kolom

16 Membuat Tabel (2) Split 2 Baris

17 Membuat Tabel (3) Menambah Caption

18 Tugas 1 (Point 20) Buatlah desain CV seperti pada gambar disamping Dengan HTML. Gunakan teknik yang sudah dipelajari Seperti : heading, order list/pengurutan, cara Menyisipkan image, membuat garis, membuat tabel. Tambahkan nim diatasnya nama. Dilarang menggunakan data asli untuk yang sifatnya Privasi seperti foto, tanggal lahir, alamat, hp, dan .

19 Petunjuk Pengumpulan Tugas Registrasi terlebih dahulu ke phpfiddle setelah berhasil, lakukan login. Klik tab code-space pada phpfiddle, kemudian paste kerjaan anda disitu (lihat gambar 1). Klik Run untuk menjalankan script Klik Save untuk melanjutkan mengumpulkan tugas

20 Petunjuk Pengumpulan Tugas (1) Gambar 1

21 Petunjuk Pengumpulan Tugas (2) Setelah click save, pilih save the code in public status Scroll mouse anda kebawah sampe nemu tombol submit, kemudian diklik. Anda akan mendapatkan link kode seperti gambar 2 Link itu yang dikirim untuk mengumpulkan tugasnya

22 Petunjuk Pengumpulan Tugas (3) Gambar 2

23 Petunjuk Pengumpulan Tugas (4) Tugas dikumpulkan di elera.stmikelrahma.ac.id, paling lambat selasa, 24 oktober 2017 jam wib Login dulu ke elera, selanjutnya cari mata kuliah web statis yang dosennya pak wahyu widodo Ikuti gambar berikut ini

24 Petunjuk Pengumpulan Tugas (5)

25 Petunjuk Pengumpulan Tugas (6)

26 Petunjuk Pengumpulan Tugas (7) Isi file description Dengan url php fiddle Anda Kemudian klik ok

27