Bab 3
IMAGE,AUDIO,VIDEO
1.
Image
a.
Anda membutuhkan tag <img>.
Tag <img> tidak membutuhkan penutup dan disertai tag src yang fungsinya untuk mengambil gambar dqari satu alamat
tertentu.
i.
IMG :
tag ini berfungsi untuk memberitahu browser bahwa ada gambar yang dimasukkan
kedalam situs tersebut.
ii.
SRC :
kode ini memberitahu kepada browser dimana letak file gambar tersebut. Perlu
diperhatikan dalam penulisan nama gambar karen dianggap bersifat case sensitive,artinya huruf besar dan
kecil dianggap berbeda.
iii.
WIDTH/HEIGHT
: tag ini menjelaskan
ukuran gambar,berapa pixel tinggi dan lebar gambar.
iv.
ALT :
tag ini berfungsi memberitahukan tanda atau nama gambar menjadi text
v.
BORDER :
merupakan garis yang berada ditepi gambar
vi.
HSPACE/VSPACE :
berfungsi memberikan spasi atau jarak gambar dari garis table.
Contoh 1 :
<html
xmlns="http://www.w3.orgg/1999/xhtml" lang="en"
xml:lang="en">
<head>
<title>image</title>
</head>
<body>
<img
src="13082712_1025956937485847_8102439917117640047_n.jpg"
alt="wrox logo"
width="120" height
="120" />
</body>
</html>
Contoh 2:
<html
xmlns="http://www.w3.orgg/1999/xhtml" lang="en"
xml:lang="en">
<head>
<title>the align attribute</title>
</head>
<body>
<h1>no align</h1>
<p>
text 1.<br />
<img
src="1919097_992292364185638_1425660359600318799_n.jpg"
alt="css"width="250"height="150" />
text 2 <br />
<h1>align left</h1>
<p>
text 3. <br />
<img
src="12321711_1005384106209797_6065374703358492859_n.jpg"
alt="css"width="250"height="150"
align="left" />
text 4 <br />
</p>
<h1>align right</h1>
<p>
text 5. <br />
<img
src="12438983_959539437460931_1289919849445904287_n.jpg"
alt="css"width="250"height="150"
align="right" />
text 6. <br />
</p>
</body>
</html>
Contoh 3 :
<html
xmlns="http://www.w3.org/1999/xhtml" lang="en"xml :
lang="en">
<head>
<title> image as a link</title>
</head>
<body>
<a
href="http://www.wrox.com"><img
src="13082712_1025956937485847_8102439917117640047_n.jpg"
alt="wrox logo" width="500"height="250"
/></a>
</body>
</html>
Ø
Script
dan Image yang dipilih harus dalam satu folder.
LATIHAN 1
<html>
<head>
<title>contoh memasukkan title audio</title>
</head>
<body>
<h2> ini contoh memasukkan file audio kedalam dokumen HTML </h2>
<embed src="Bonauli - Rap.mp4" border ="2" align="right" autostart="false" height = "45" width ="400">
</body>
</html>
OUTPUTNYA:
LATIHAN 2
<html>
<head>
<title>contoh memasukkan file audio sebagai background sound</title>
<bgsound src="Bonauli - Rap.mp4" loop="-1">
</head>
<body>
</body>
</html>
LATIHAN 3
<html xmlns="http://www.w3.orgg/1999/xhtml" lang="en"
xml:lang="en">
<head>
<title>image</title>
</head>
<body>
<img src="logo.jpg" alt="wrox logo"
width="120" height ="120" />
</body>
</html>
OUTPUTNYA:
LATIHAN 4
z<html xmlns="http://www.w3.orgg/1999/xhtml" lang="en"
xml:lang="en">
<head>
<title>fruit pictures</title>
</head>
<body>
<p>Fixed size: width 500 height 500</p>
<img src="images (1).jpg" alt="photo of red apple"width="500"height="300" />
<p>Enlarged : width 700 height 500</p>
<img src="images (2).jpg" alt="photo of red apple"width="700"height="500" />
<p>Fixed size: width 800 height 600</p>
<img src="images (3).jpg" alt="photo of red apple"width="800"height="400" />
</body>
</html>
OUTPUTNYA:
LATIHAN 5
<html xmlns="http://www.w3.orgg/1999/xhtml" lang="en"
xml:lang="en">
<head>
<title>the align attribute</title>
</head>
<body>
<h1>no align</h1>
<p>
text 1.<br />
<img src="images (4).jpg" alt="css"width="500"height="300" />
text 2 <br />
<h1>align left</h1>
<p>
text 3. <br />
<img src="images (5).jpg" alt="css"width="500"height="300" align="left" />
text 4 <br />
</p>
<h1>align right</h1>
<p>
text 5. <br />
<img src="images (6).jpg" alt="css"width="500"height="300" align="right" />
text 6. <br />
</p>
</body>
</html>
OUTPUTNYA:
LATIHAN 6
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"xml : lang="en">
<head>
<title> image as a link</title>
</head>
<body>
<a href="http://www.wrox.com"><img src="wrox logo.png" alt="wrox logo" width="338"height="79" /></a>
</body>
</html>
OUTPUTNYA:
LATIHAN 7
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"xml : lang="en">
<head>
<title>creating an image map</title>
</head>
<body>
<p>
<img src="cafe.jpg" alt="Cafe Map"
width="500" height="300"border="0" usemap="#cafe" />
<map name="cafe">
<area shape="circle" coords="154,150,59"
href="cafe.html"target=" self" alt="cafe">
<area shape="poly"
coords="272,79,351,79,351,15,486,15,486,218,272,218,292
,166,299,136,270,76" href="courtyard.html"
target=" self" alt="courtyard">
<area shape="rect" coords="352,224,488,286"
href="kitchens.html"target=" self" alt="kitchens">
</map>
</p>
</body>
</html>
OUTPUTNYA:
LATIHAN 8
<html>
<head>
<title>Halaman Web diiringi Musik</title>
</head>
<body>
Selamat Mendengarkan Musik
<embed src="Bonauli - Rap.Mp4" autostart="false" height="45" width="400">
</body>
</html>
OUTPUTNYA:
LATIHAN 9
<html>
<head>
<title>Link Multimedia</title>
</head>
<body>
Untuk Mendengarkan Musik Klik Link Berikut ini :<br>
<a href="lagu.Mp3">Musik daerah</a><br><br>
jika ingin menonton video, klik link berikut :<br>
<a href="Bintang Panjaitan - HAJUJURON (Official Music Video).MP4">video</a>
</body>
</html>
OUTPUTNYA:
LATIHAN 10
<html>
<head>
<title>mencriton video di web</title>
</head>
<body>
Selamat Menikmati Klip Video Berikut.
<embed src="Bonauli - Rap.MP4"
height="400" width="400" units="pixels"
autostart="true" loop="false">
</embed>
</body>
</html>
OUTPUTNYA:
LATIHAN 11
<html>
<head>
<title>contoh memasukkan file audio sebagai background sound</title>
</head>
<body>
<i frame width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8K">
</i frame>
</body>
</html>
SEKIAN BAB 3 DARI SAYA:
THANK'S :)
Tidak ada komentar:
Posting Komentar