Penerapan Cascading style sheet pada tampilan gambar dielemen kode html

 on Senin, 23 Mei 2016  

 Cascading style sheet pada tampilan gambar
CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html baik itu tulisan, tabel dan gambar maupun objek lainya. Untuk mengatur  gambar dapat dituliskan secara inline seperti contoh berikut :

<img src="nama-file-gambar" width="lebar" height="tinggi"
alt="text" title="text" border="1" />


Selain dengan cara inline , stlyle CSS dapat diberikan secara embed ataupun eksternal CSS. Berikut terdapat tiga gambar yang diberi style dimana ukuran ketiga gambar dibuat sama 200 x 200 dan margin atas gambar adalah 10px sehingga antar gambar terlihat ada jarak

<! DOCTYPE HTML>
<html>
<head>
<tittle>Contoh CSS</tittle>
<style>
Img { Margin-top: 10px;
Float: left;
Clear: both;
width:200px;
height:200px;}
</style>
</head>
<body>
Contoh CSS pada gambar (img)<br>
<img src="brokoli.jpg" >
<img src="tomat.jpg">
<img src="paprika.jpg">
</body>
</html>


Bila listing kode diatas dijalankan maka akan menghasilkan tampilan gambar seperti berikut ini gambar diatas.

Penerapan Cascading style sheet pada tampilan gambar dielemen kode html 4.5 5 b Senin, 23 Mei 2016  Cascading style sheet pada tampilan gambar CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dar...


1 komentar:

  1. sangat bermanfaat buat saya yang pemula kak, Nama saya Rizky Pratama dgn NIM 1922500005 kelompok SI2K, Dari stmik atmaluhur, link kampus saya : https://www.atmaluhur.ac.id

    BalasHapus

Diberdayakan oleh Blogger.