Menampilkan Images, Audio, Video, dan Membuat Tabel

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

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

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)

Menampilkan Images (1)

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

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

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

Membuat Background Image

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

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

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

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

Menampilkan Audio (1)

Membuat Tabel

Membuat Tabel (1) Split 2 Kolom

Membuat Tabel (2) Split 2 Baris

Membuat Tabel (3) Menambah Caption

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

Petunjuk Pengumpulan Tugas Registrasi terlebih dahulu ke phpfiddle http://phpfiddle.org, 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

Petunjuk Pengumpulan Tugas (1) Gambar 1

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

Petunjuk Pengumpulan Tugas (3) Gambar 2

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

Petunjuk Pengumpulan Tugas (5)

Petunjuk Pengumpulan Tugas (6)

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