Cara Menyajikan CSS untuk Memformat Tampilan Multimedia

Assalamualaikum

Pada kesempatan kali ini kita akan membahas Cara Menyajikan CSS untuk Memformat Tampilan Multimedia.

Multimedia merupakan sebuah sarana (media) yg terdapat kombinasi dan perpaduan sebagai bentuk elemen elemen informasi seperti : teks, graphics, animasi, video interktif dan suara untuk mendukung pencapaian tujuan yaitu menyampaikan informasi atau hanya sekedar memberi hiburan bagi target audiens atau pengunjungnya. Untuk memaksimalkan fungsi dari Cascading Style Sheet pada halaman website, dapat pula diterapkan pada elemen elemen HTML multimedia, diantaranya bisa berupa gambar, video seta audio.

Teman - teman silahkan simak pembahasan dengan baik

Tujuan 

Tujuan pembahasan kali ini untuk memahami poin poin dibawah ini:
  • Memahami bagaimana cara membuat style style dasar CSS untuk memformat gambar
  • Memahami cara menerapkan beberapa style untuk memformat tampilan gambar
  • Memahami cara pembuatan style style dasar CSS untuk memformat video
  • Cara Menyajikan CSS untuk memformat tampilan multimedia pada sebuah halaman web
Setelah teman teman mengetahui poin poin apasaja yang akan dibahas, mari kita mulai pembahasannya.

Alat dan Bahan

  • PC/Laptop
  • Aplikasi teks editor seperti (notepad++,sublime teks, dll)
  • web browser

Landasan Teori

Cascading style sheet pada tampilan gambar
Cascading style sheet sangat berperan penting dalam menyajikan informasi visual yang baik, lebih optimal dari sisi penulis serta lebih disenangi oleh mesin pencari seperti google. CSS ini dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html, baik itu berupa tulisan, dalam bentuk table atau lain sebagainya. Untuk mengatur gambar kita dapat mengaturnya dengan metode inline.

Cascading style sheet Gambar untuk background
Seperti hal nya penambahan warna pada latar, penambahan latar belakang juga dapat dilakukan dengan menggunakan dua property: yaitu menggunakan perintah background dan backgound-image. Nilai yang dapat diisikan untuk property ini ialah url dari gambar, relatif terhadap file css. Sama hal nya seperti pada penambahan font.

Cascadign Style Sheet untuk Menyisipkan gambar
Sebuah halaman website yang berisi artikel diperluan gambar satu atau lebih gambar yang mendukung artikel tersebut. Agar website/ artikel terlihat rapi dan menarik maka gambar yang disisipkan perlu diberi CSS.

Membuat Gambar Transparan
Untuk membuat gambar menjadi transparan, kita dapat menggunakan property opacity. kami akan mencoba mencontohkan cara penerapannya Contoh penulisan: selector{ opacity:0,4;}

Membuat Gallery Gambar
Cascadign Style Sheet dapat juga kita pergunakan untuk membuat sebuah gallery pada website dan mempercantik tampilannya

Cascading Style Sheet pada Tampilan Video
CSS juga dapat kita gunakan untuk mengatur tampilan video yang telah kita buat dengan menggukan script HTML

Cascading Style Sheet Embed Video dari Youtube
Penyajikan video juga bisa memanfaatkan elemen elemen iframe yang di link kan kealamat video tertentu, misalnya www.youtube.com

Setelah membaca pembahasan diatas tibakah kita pada tahap langkah kerja, silahkan simak dengan baik.

Langkah Kerja
  1. Pertama buatlah ebuah folder pada drive D:, dengan nama folder nama kalian, Misal: prakter_nama
  2. Silahkan buat subfolder dengan nama praktikum4 di dalam folder yang sudah dibuat sebelumnya.
  3. Buka aplikasi teks editor kalian seperti (notepad++, sublime teks,dll)
  4. Silahkan simpan elemen elemen struktur dokumen HTML tersebut dalam format .html dan simpan file css external dengan extensi .css
  5. Langkah terakhir jalankan masing masing contoh elemen elemen struktur HTML tersebut dengan menggunakan web browser
percobaan
Silahkan buat halaman website sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>CSS pada Background</title>
<style type="text/css">
#content{
background-image: url("gambar/mario.png");
height: 600px;
width: 800px;
}
</style>
</head>
<body>
<div id="content">
</div>
</body>
</html>
Silahkan simpan script diatas dengan nama background1.html
jika penulisannya benar maka hasilnya sebagai berikut:
Buatlah halaman website dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>CSS pada Background</title>
<style type="text/css">
#content{
background-image: url("gambar/mario.png");
background-repeat: no-repeat;
height: 600px;
width: 800px;
}
</style>
</head>
<body>
<div id="content">
</div>
</body>
</html> 
Simpan script diatas dengan nama backround2.html
Hasilnya:
Buatlah halaman website sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Sisip Gambar</title>
<style type="text/css">
#content1{
background-image: url("gambar/CI.png");
background-repeat: no-repeat;
background-position: top left;
padding-top: 300px;
margin-bottom: 40px;
}
#content2{
background-image: url("gambar/set.jpg");
background-repeat: no-repeat;
background-position: top right;
padding-top: 200px;
}
</style>
</head>
<body>
<div id="content1">
Posisi gambar berada di kiri atas text
</div>
<div id="content2">
posisi gambar berada di kanan atas text
</div>
</body>
</html> 
Simpan script diatas dengan nama sisip.html
Hasilnya:
Buatlah halaman website sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Gambar Transparan</title>
<style type="text/css">
img{
width: 640px;
height: 320px;
opacity: 0.4;
filter: alpha(opacity=40); //untuk internet exproler 8 keatas
}
</style>
</head>
<body>
<img src="gambar/jet.jpg">
</body>
</html>
 Simpan script diatas dengan nama opacity.html
Jika penulisannya benar maka hasilnya sebagai berikut
Buatlah halaman web sebagai berikut:
Menggunakan CSS External kemudian HTML nya
.img{
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
.img img{
display:inline;
width:480px;
height:183;
margin: 5px;
border: 1px solid #ffffff;
}
.img a:hover img{
border: 1px solid #0000ff;
}
.desc{
text-align: center;
font-weight: normal;
margin: 5px;
}
Simpan script diatas dengan nama style.css
Tag HTML:
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="img">
<a href="gambar/cryo.jpg" target="_blank"><img src="gambar/cryo.jpg"></a>
<div class="desc">Cryomancer</div>
</div>
<div class="img">
<a href="gambar/majesty.jpg" target="_blank"><img src="gambar/majesty.jpg"></a>
<div class="desc">Majesty</div>
</div>
<div class="img">
<a href="gambar/aw.jpg" target="_blank"><img src="gambar/aw.jpg"></a>
<div class="desc">Abyss Walker</div>
</div>
<div class="img">
<a href="gambar/raven.jpg" target="_blank"><img src="gambar/raven.jpg"></a>
<div class="desc">Raven</div>
</div>
</body>
</html> 
Simpan Script diatas dengan nama gallery.html
jika penulisannya benar maka akan tampil seperti gambar berikut:

Buatlah halaman web sebagai berikut
Script menampilkan video pada halaman website
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
<style type="text/css">
video{
display: block;
margin: 0 auto;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<video controls="controls">
<source src="video/vid1.mp4" type="video/mp4">
</video>
</body>
</html>

Simpan script diatas dengan nama video1.html
teman bisa lihat hasilnya sendiri nanti

Silahkan buat halaman website sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Embed Video From Youtube</title>
<style type="text/css">
.videoWrapper{
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videoWrapper iframe{
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 80%;
}
</style>
</head>
<body>
<div class="videoWrapper">
<iframe src="854" height="510" src="http://www.youtube.com/embed/uclH0DYUzGA" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Silahkan simpan dengan nama videoembed.html dan lihat hasilnya

Selamat teman teman telah mempelajari Cara Menyajikan CSS untuk Memformat Tampilan Multimedia serta belajar bagaimana menyisipkan video ke dalam halaman website. see you

0 Response to "Cara Menyajikan CSS untuk Memformat Tampilan Multimedia "

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel