Style Pada Multimedia
10/02/2017
Add Comment
 |
| Style CSS dan HTML Pada Multimedia |
AA Sciences, Style Pada Multimedia - Usai kalian telah mengetahuinya kalian telah mempelajari terkait style pada teks, alhamdulillah di kali ini kalian akan diarahkan yakni metode pembelajaran tentang style pada multimedia yang akan AA Sciences kupas tuntas kali ini.
Telah tahu bukan tentunya kalian para sobat AA Sciences dari cascading style sheet (CSS) dapat juga dijabarkan pada elemen-elemen dari HTML multimedia, yang mana bagian dari elemen multimedia yakni seperti, diantaranya video, gambar, audio dan jenis file lainnya.
Agar kalian ingin lebih mengetahui serta memperdalam ilmu pengetahuan terkait style-style apa saja dalam multimedia elemen, mari simak penjelasan style pada multimedia macam-macamnya di bawah ini:
1. Penggunaan Cascading Style Sheet (CSS) pada Tampilan Gambar
Cascading Style Sheet (CSS) tentunya berperan penting dalam bertugas untuk menyajikan suatu informasi dalam bentuk visual agar menjadi kerap terlihat lebih baik, lebih optimal dibanding agar dari segi sisi penulisan dan kerap lebih disukai oleh mesin pencari (search engine).
Cascading Style Sheet (CSS) tentunya dapat diterapkan dalam kurun yang hampir tertuju pada semua objek yang ingin disisipkan dalam bentuk tag HTML baik dalam bentuk tulisan, tabel serta gambar maupun objek lainnya sekalipun.
Untuk memberi pengaturan dalam penggunaan gambar pada umumnya dapat diterapkan secara inline, contoh dari pemanggilan gambar dalam bentuk sederhananya adakah seperti berikut:
<img src='nama-file-gambar-disini' width='lebar-gambar-disini' height='tinggi-gambar-disini' alt='kata-kunci-gambar-disini' title='judul-gambar-disini' border='garis-tebal-disini' />
Selain dengan cara simpel/inline diatas dalam HTML sederhana, dapat pula tentunya untuk penambahan CSS nya yang dapat diterapkan secara embed ataupun diluar/eksternal dalam CSS.
Sebagai contoh, berikut AA Sciences akan memberikan contoh yang mana terdapat 3 gambar yang hendak diberi style/gaya yang mana ketiga gambar kali ini akan dibuat serupa yakni 200 x 200 serta jarak nargin atas dari gambarnya adalah berukuran 20px, sehingga antar gambar tersebut akan terlihat dibantu dengan jarak.
Penerapan atau penulisan dalam bentuk HTML serta CSS terkait 3 gambar yang akan di tampilkan, dalam bentuk HTML dan CSS nya adalah sebagai berikut:
<! DOCTYPE HTML>
<html>
<head>
<title> Contoh Judul Gambar CSS </title>
<style>
Img {Margin-top: 20px;
Float: left;
Clear: both:
width: 200px;
height: 200px;
</style>
</head>
<body>
Contoh Gambar CSS pada Image (Gambar) </br>
<img src='brokoli.jpg'>
<img src='tomat.jpg'>
<img src='paprika.jpg'>
</body>
</html>
2. Penggunaan Cascading Style Sheet (CSS) pada Tampilan Gambar untuk Latar Belakang/Background
Seperti dalam penambahan dari warna latar, penambahan gambar pada background/latar belakang pun dapat pula dilakukan terkait menggunakan dua macam jenis properti, yakni background/latar belakang atau background-image/gambar latar belakang.
Nilai yang hendak diisikan untuk properti-properti ini adalah URL dari gambar, yang mana relatif lebih dalam suatu file Cascading Style Sheet (CSS), yang mana serupa ketika dalam penambahan suatu font. Sebagai contoh, scriptnya seperti berikut ini.
div { background: url ('latar.png');
background-image: url ('latar.png');}
Kesalahan tersebut telah bekerja, lalu simpan serta jalankan kode. Namun, dari penambahan gambar tersebut dengan cara diatas tentunya akan memberikan masalah jika ketika ukuran gambar tersebut tidak serupa dengan ukuran-ukuran elemen.
Gambar juga akan ditampilkan berulangkali, dengan secara horizontal bahkan secara vertikal sekalipun, jika ukuran elemen tersebut lebih besar dari ukuran gambar.
Jika kalian ingin menerapkan gambar dalam bentuk campuran dala HTML serta CSS, maka kalian dapat ikuti seperti scriptnya dibawah ini:
<html>
<head>
<title> Latar Belakang Gambar </title>
<style type='text/css'>
#awal {background-image:url (kiwi.jpg);height:600px;width:800px;}
</style>
</head>
<body>
<div id='awal'>
</div>
</body>
</html>
Gambar sebenarnya yang ingin kali ini AA Sciences terapkan ialah sebagai backgroundnya berukuran dengan 60px x 60px:
Lantaran gambar sebenarnya dalam gambar tersebut adalah 60px x 60px sedangkan ukuran dalam background yang diinginkannya adalah 600px x 800px maka hasil dari gambar akan ditampilkan berulang-ulang sampai tercukupi dalam ukuran latar belakang 600px x 800px adalah seperti ini hasilnya.
Adakalanya pula dalam perulangan tampilan dari gambar otomatis tersebut tidak diinginkan. Maka dari itu, agar untuk terlihat dapat menggunakan properti dalam background-repeat dalam mengatur bagaimana cara agar perulangan kode ingin diberlakukan.
Tercakup 4 nilai yang umumnya yang dapat dimasukan dalam properti background-repeat, yakni no-repeat, repeat, repeat-y, dan repeat-x.
Seperti yang tertera dalam jenis namanya yakni no-repeat yang mana berarti menghilangkan perulangan, jika repeat adalah memberikan perulangan, lalu jika repeat-x yakni memberikan perulangan hanya pada sumbu x saja (horizontal), dan yang terakhir yakni repeat-y adalah atribut yang memberikan perulangan tetapi hanya pada sumbu y nya saja (vertikal).
Listing dalam kode CSS nya dalam hendak menghilangkan perulangan pada sumbu x serta sumbu y, sehingga atribut nama dari (kiwi.jpg) diatas, jika ingin ditampilkan hanya akan ditampilkan satu kali saja, maka penggunaaan nya adalah sebagai berikut:
#awal {background-image:url (kiwi.jpg);
background-repeat: no-repeat;
height:600px;width:800px;}
3. Penggunaan Cascading Style Sheet (CSS) pada Tampilan untuk Menyisipkan Gambar
Biasanya ketika hendak membuat halaman website, tentunya bukan kalian melihat pasti adanya suatu artikel yang mana dalam artikel tersebut pasti terdapat suatu gambar, yang mana gambar ini bekerja sebagai pemberi keindahan dalam suatu artikel untuk thumbnail nya.
Pada umumnya gambar dapat dipasang langsung dengan mode HTML, tetapi jika terlihat agar sedikit rapih, maka penggunaan CSS dalam gambar agar selalu terlihat menarik, maka script yang digunakan adalah sebagai berikut.
<html>
<head>
<title> Menyisipkan Gambar dalam bentuk CSS </title>
<style>
#garisatas1 {background-image: url(kiwi.jpg);
background-repeat: no-repeat;
background-position: left top;
padding-top: 70px;
margin-bottom: 50px;}
#garisatas2 {background-image: url(kiwi.jpg);
background-repeat: no-repeat;
background-position: left top;
padding-top: 70px;
</style>
</head>
<body>
<div id='garisatas1'> Cascading Style Sheet (CSS) yang kerap umum digunakan pada masa sekarang ini yakni adalah CSS3 yang mana ramai dilibatkan dalam suatu dokumen halaman website. Kegunaanya nya pun beragam yakni untuk memformat suatu halaman dokumen, yang mana sebagai contoh dalam pemberian warna teks atau bahkan warna dari latar belakang pun dapat diatur melalui Cascading Style Sheet (CSS) sekalipun. </div>
<div id='garisatas2'> Namun, kegunaan dari Cascading Style Sheet (CSS) tentu saja tidaklah hanya itu saja, melainkan banyak hal lainnya lagi. </div>
Maka dari hasil penerapan gambar yang telah diketik diatas akan menjadi hasil seperti berikut.
Cascading Style Sheet (CSS) yang kerap umum digunakan pada masa sekarang ini yakni adalah CSS3 yang mana ramai dilibatkan dalam suatu dokumen halaman website. Kegunaanya nya pun beragam yakni untuk memformat suatu halaman dokumen, yang mana sebagai contoh dalam pemberian warna teks atau bahkan warna dari latar belakang pun dapat diatur melalui Cascading Style Sheet (CSS) sekalipun.
Namun, kegunaan dari Cascading Style Sheet (CSS) tentu saja tidaklah hanya itu saja, melainkan banyak hal lainnya lagi.
4. Penggunaan Cascading Style Sheet (CSS) pada Tampilan Video
Sementara untuk penerapan Cascading Style Sheet (CSS) dalam elemen video dapat juga diterapkan, terutama kali ini secara inline terlebih dahulu, berikut contoh scriptnya.
<html>
<head>
<title> Menyisipkan Video Inline dalam bentuk HTML dan CSS </title>
</head>
<body>
<video controls='controls' style='display:block; margin:0 auto; width:400px; height:400;>
<source src='movie.mp4' type='video/mp4' />
Browser kalian sedang OFFLINE jadi tidak dapat bekerja videonya atau servernya.
</video>
</body>
Jika Listing program seperti diatas dijalankan, maka otomatis akan menghasilkan video yang akan ditampilkan yang mana tampil pada posisi tengah ('center') dengan tercakup atribut dari width:400px dan height:400px yang serupa, maka hasilnya seperti gambar dibawah ini.
5. Penggunaan Cascading Style Sheet (CSS) pada Tampilan Video Embed dari Youtube
Bahkan tidak hanya dari kinerja OFFLINE saja loh sobat AA Sciences, ternyata kalian pun dapat menerapkan dalam video langsung dari fitur ONLINE yang di iframe/embed kan pada link youtube.com, dan web video lainnya.
Sebagai contoh, berikut AA Sciences akan memberikan penerapan spekulasi dalam CSS video secara embed nya agar video langsung dari youtube.com dapat dikelola. Berikut scriptnya.
<html>
<head>
<title> Menyisipkan Video dari YOUTUBE dalam bentuk HTML dan CSS </title>
<style>
.videoWrapper {position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
.videoWrapper iframe {position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
</style>
</head>
<body>
<div class='videoWrapper'>
<!-- COPAS LINKNYA DARI VIDEO YOUTUBE --!>
<iframe width='560' height='349' src='https://youtu.be/ZsTwm-77UCM' frameborder='0' allowfullscreen></iframe>
</div>
</body>
</html>
Maka jika listing kode HTML dan CSS diatas dijalankan dalam keadaan terhubung pada koneksi data internet maka secara otomatis video dari youtube yang telah dimasukkan dalam link nya telah menghasilkan videonya sebagai berikut.
<!-- COPAS LINKNYA DARI VIDEO YOUTUBE --!>
0 Response to "Style Pada Multimedia"
Post a Comment
~ Jika ingin men Copy Paste harap masuk kan sumber link artikel saya di postingan sobat
~Dilarang Berkomentar link aktif , jika ada yang memasuk kan link aktif maka kami akan Hapus dan kami anggap Spam
~ Komentar lah dengan Bahasa yang Baik dan Relevan dengan sesuai artikel terkait tersebut . Terimakasih