JURUSAN : REKAYASA PERANGKAT LUNAK
KELAS : X
SMK KARTIKA XX-1 MAKASSAR
TAHUN AJARAN 2015/2016
KELOMPOK 2
EKA YUSTINA
ANASTASIA ARINI
PUTU VENA SHANTI ANISA
IDAR YANI
NIKOMANG WINDRI PUSUNG
 Cara yang diperlukan untuk memasukkan
atau menambahakan gambar ke
dalam suatu halaman web sangatlah
mudah. HTML telah menyediakan tag
khusus untuk keperluan ini, yaitu <img>.
Tag ini merupakan tag tunggal atau
tidak memiliki pasangan.
Bentuk umum penggunaan tag <img> adalah :
<img src=”namafile”>
MENYISIPKAN GAMBAR
MENGATUR GAMBAR
<html><head>
<title>Gambar</title>
</head><body>
<h2>Latihan Menggabung Gambar
dan teks (bag.1)</h2>
<br><img src=”images/komputer.gif”
align=”top”/>Komputer 1
(menggunakan align=TOP)
 <br><img
src=”images/komputer.jpg”/>
align=”middle”/> Komputer 2
(menggunakan align=MIDDLE)
 <br> <img
src=”images/komputer.png”/>
align=”bottom”/> Komputer 3
(menggunakan align=BOTTOM)
 </body></html>
 Elemen audio digunakan untuk
tujuan ini, dan sama seperti
elemen img kita harus
memberikan nilai tempt
menyimpan file audio melalui
atribut SRC. Tetapi berbeda
dengan IMG , elemen audio
memiliki tag penutup.

MENYISIPKAN FILE AUDIO
Potongan listing
<audio src=“audios/piano.mpg”></audio>
Untuk menmpilkan file audio Kita harus
menambahkan atribut controls pada elemen:
<audio src=“audios/piano.mp3” cotrols>
</audio>
 <html><head>
 <title>cek suara</title>
 </head><body>
 <audio controls>
 <source src="house.mp3"
type="audio/mp3">
 <source src="house.ogg"
type="audio/ogg">
 </audio> </body></html>
MENYISIPKAN FILE OGG
 <html><head>
 <title>cek suara</title>
 </head><body>
 <audio controls = "controls"
autoplay="autoplay"
 loop="loop" >
 <source src="house.mp3"
type="audio/mp3">
 <source src="house.ogg" type="audio/ogg">
 </audio>
 </body></html>
MENYISIPKAN FILE MP3
 <html><head>
 <title>cek video</title>
 </head><body>
 <video width="320" height="240" controls>
 <source src="bola.mp4" type="video/mp4">
 <source src="bola.ogg" type="video/ogg">
 <source src="bola.WebM "
type="video/WebM">
 browser anda tidak mendukung format video
ini.
 </video></body></html>
MENYISIPKAN FILE MP4
 Untuk menampilkan video pada halaman
web dapat ditangani secara langsung oleh
HTML5. Tag yang digunakan untuk
menampilkan video adalah <video>
</video>. Namun tidak semua format
videonya dapat ditampilkan di web.

 Sementara ini, hanya beberapa format
video yang bisa diproses, di antaranya
adalah WebM ,OGG , MP4
MENYISIPKAN VIDEO
 <html><head>
 <title>cek video</title>
 </head><body>
 <video width="320" height="240" controls>
 <source src="bola.mpeg"
type="video/mpeg">
 <source src="bola.ogg" type="video/ogg">
 <source src="bola.WebM "
type="video/WebM">Browser anda tidak
mendukung format video ini.
 </video></body></html>
MENYISIPKAN FILE MPEG
TERIMA KASIH….

Tugas Kelompok Pemrograman Web

  • 1.
    JURUSAN : REKAYASAPERANGKAT LUNAK KELAS : X SMK KARTIKA XX-1 MAKASSAR TAHUN AJARAN 2015/2016 KELOMPOK 2 EKA YUSTINA ANASTASIA ARINI PUTU VENA SHANTI ANISA IDAR YANI NIKOMANG WINDRI PUSUNG
  • 2.
     Cara yangdiperlukan untuk memasukkan atau menambahakan gambar ke dalam suatu halaman web sangatlah mudah. HTML telah menyediakan tag khusus untuk keperluan ini, yaitu <img>. Tag ini merupakan tag tunggal atau tidak memiliki pasangan. Bentuk umum penggunaan tag <img> adalah : <img src=”namafile”> MENYISIPKAN GAMBAR
  • 3.
    MENGATUR GAMBAR <html><head> <title>Gambar</title> </head><body> <h2>Latihan MenggabungGambar dan teks (bag.1)</h2> <br><img src=”images/komputer.gif” align=”top”/>Komputer 1 (menggunakan align=TOP)
  • 4.
     <br><img src=”images/komputer.jpg”/> align=”middle”/> Komputer2 (menggunakan align=MIDDLE)  <br> <img src=”images/komputer.png”/> align=”bottom”/> Komputer 3 (menggunakan align=BOTTOM)  </body></html>
  • 5.
     Elemen audiodigunakan untuk tujuan ini, dan sama seperti elemen img kita harus memberikan nilai tempt menyimpan file audio melalui atribut SRC. Tetapi berbeda dengan IMG , elemen audio memiliki tag penutup.  MENYISIPKAN FILE AUDIO
  • 6.
    Potongan listing <audio src=“audios/piano.mpg”></audio> Untukmenmpilkan file audio Kita harus menambahkan atribut controls pada elemen: <audio src=“audios/piano.mp3” cotrols> </audio>
  • 7.
     <html><head>  <title>ceksuara</title>  </head><body>  <audio controls>  <source src="house.mp3" type="audio/mp3">  <source src="house.ogg" type="audio/ogg">  </audio> </body></html> MENYISIPKAN FILE OGG
  • 8.
     <html><head>  <title>ceksuara</title>  </head><body>  <audio controls = "controls" autoplay="autoplay"  loop="loop" >  <source src="house.mp3" type="audio/mp3">  <source src="house.ogg" type="audio/ogg">  </audio>  </body></html> MENYISIPKAN FILE MP3
  • 9.
     <html><head>  <title>cekvideo</title>  </head><body>  <video width="320" height="240" controls>  <source src="bola.mp4" type="video/mp4">  <source src="bola.ogg" type="video/ogg">  <source src="bola.WebM " type="video/WebM">  browser anda tidak mendukung format video ini.  </video></body></html> MENYISIPKAN FILE MP4
  • 10.
     Untuk menampilkanvideo pada halaman web dapat ditangani secara langsung oleh HTML5. Tag yang digunakan untuk menampilkan video adalah <video> </video>. Namun tidak semua format videonya dapat ditampilkan di web.   Sementara ini, hanya beberapa format video yang bisa diproses, di antaranya adalah WebM ,OGG , MP4 MENYISIPKAN VIDEO
  • 11.
     <html><head>  <title>cekvideo</title>  </head><body>  <video width="320" height="240" controls>  <source src="bola.mpeg" type="video/mpeg">  <source src="bola.ogg" type="video/ogg">  <source src="bola.WebM " type="video/WebM">Browser anda tidak mendukung format video ini.  </video></body></html> MENYISIPKAN FILE MPEG
  • 12.