Cascading style sheet untuk menyisipkan gambar dan tampilan video

 on Senin, 23 Mei 2016  

Cascading style sheet untuk menyisipkan gambar
Adakala saat membuat halaman web yang berisi artikel diperlukan gambar yang mendukung artikel tersebut. Agar terlihat rapi dan menarik maka gambar yang disisipka perlu diberi CSS.

<html>
<head>
<title>
CSS image placement
</title>
<style >
#headline1 { background-image: url(kiwi.jpg);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px;
margin-bottom:50px; }
#headline2 { background-image: url(kiwi.jpg);
background-repeat: no-repeat;
background-position: left top;
padding-top:68px; }
</style>
</head>
<body>
<div id="headline1">CSS (versi sekarang adalah CSS3)
banyak dilibatkan dalam dokumen Web.
Kegunaannya adalah untuk memformat dokumen.
Sebagai contoh, warna teks atau bahkan warna
latarbelakang bisa diatur melalui CSS.
</div>
<div id="headline2">Namun, tentu saja kegunaan CSS jauh
lebih

Bila listing kode dijalankan akan menghasilkan tampilan sebagai berikut :
 
Cascading style sheet pada tampilan video
Untuk penerapan Cascading style shee pada elemen video dapat dituliskan  secara inline seperti contih berikut ini :


<html>
<head>
<title>Test</title>
</head>
<body>
<video controls="controls" style="display:block; margin:
0 auto; width:400px ; heigth:400;" >
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>

Bila listing program diatas dijalankan akan menghasilkan tampilan video yang di atur tampil “center” dengan atribut width:400px dan height:400px seperti pada tampilan berikut ini.
Cascading style sheet untuk menyisipkan gambar dan tampilan video 4.5 5 b Senin, 23 Mei 2016 Cascading style sheet untuk menyisipkan gambar Adakala saat membuat halaman web yang berisi artikel diperlukan gambar yang mendukung artikel...


Tidak ada komentar:

Posting Komentar

Diberdayakan oleh Blogger.