WordPress.com



LAPORAN RESMI

PRAKTIKUM WEB 1

MODUL IV

CSS

(CSS IMAGE)

[pic]

DisusunOleh:

|KELAS B |

| |

|NAMA |

|AULIA WAHYU PERMATASARI.S |

| |

|NRP |

|120451100032 |

| |

|JURUSAN |

|MANAJEMEN INFORMATIKA |

| |

|DOSEN |

|SRI HERAWATI, S.KOM |

| |

| | |

| | |

| | |

| | |

LABORATORIUM BISNIS INTELIJEN SISTEM

JURUSAN MANAJEMEN INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS TRUNOJOYO MADURA

BAB I

PENDAHULUAN

1. Latar Belakang

Pada modul ini akan melanjutkan penjelasan pada beberapa bagian dari CSS Image yang digunakan untuk mengatur tampilan dari gambar (image) pada html. Elemen ini mempunyai beberapa attribut. Satu properti dapat mempunyai beberapa nilai.

CSS bekerja sebagai pelengkap pada HTML, jadi untuk mengerti CSS paling tidak kita harus sedikit tahu tentang HTML. Cascading StyleSheet adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Singkatnya dengan menggunakan Methode CSS ini anda dengan mudah mengubah secara keseluruhan warna dan tampilan yang ada di situs anda, sekaligus memformat ulang situs anda (merubah secara cepat).

CSS juga memungkinkan si pembuat web untuk memodifikasi HTML untuk membentuk tampilan sebuah website Jadi kalo kita ini adalah arsitek, maka HTML adalah bangunannya dan CSS adalah desain interior dan eksteriornya.

1.2 Tujuan

Peserta praktikum dapat menggunakan CSS-Images untuk memformat atau membuat halaman web tampil lebih menarik

BAB II

DASAR TEORI

CSS Image digunakan untuk mengatur tampilan dari gambar (image) pada html. Elemen ini mempunyai beberapa attribut. Satu properti dapat mempunyai beberapa nilai

Tabel 4.1. Property dan value CSS yang mendukung format Gambar

|Attribute |Values |

|background |color |

| |size |

| |percentage |

| |pos-key-term |

| |url |

| |repeat |

| |repeat-x |

| |repeat-y |

| |no-repeat |

| |fixed |

| |scroll |

|background-attachment |fixed |

| |scroll |

|background-color |color |

| |none |

|background-image |url |

|background-position |size |

| |percentage |

| |pos-key-term |

|background-repeat |repeat |

| |repeat-x |

| |repeat-y |

| |no-repeat |

|border |solid |

| |double |

| |groove |

| |dooted |

| |dashed |

| |inset |

| |outset |

| |ridge |

| |hidden |

| |four-sides |

| |width-key-term |

|border-bottom |size |

| |color |

| |width-key-term |

|border-bottom-color |Color |

|border-bottom-style |solid |

| |double |

| |groove |

| |dooted |

| |dashed |

| |inset |

| |outset |

| |ridge |

| |hidden |

|border-bottom-width |size |

| |width-key-term |

|border-color |color |

|border-left |size |

| |color |

| |width-key-term |

|border-left-color |color |

|border-left-style |solid |

| |double |

| |groove |

| |dooted |

| |dashed |

| |inset |

| |outset |

| |ridge |

| |hidden |

|border-left-width |size |

| |width-key-term |

|border-right |size |

| |color |

| |width-key-term |

|border-right-color |color |

|border-right-style |solid |

| |double |

| |groove |

| |dooted |

| |dashed |

| |inset |

| |outset |

| |ridge |

| |hidden |

|border-right-width |size |

| |width-key-term |

|border |solid |

| |double |

| |groove |

| |dooted |

| |dashed |

| |inset |

| |outset |

| |ridge |

| |hidden |

| |four-sides |

| |width-key-term |

|border-top |size |

| |color |

| |width-key-term |

|border-top-color |color |

|border-top-style |solid |

| |double |

| |groove |

| |dooted |

| |dashed |

| |inset |

| |outset |

| |ridge |

| |hidden |

|border-top-width |size |

| |width-key-term |

|border- width |size |

| |width-key-term |

|clear |left |

| |right |

| |both |

|color |color |

|display |block |

| |inline |

|float |left |

| |right |

BAB IV

IMPLEMENTASI

| |

| |

|Implementasi Modul 4 |

| |

|body{ |

|background:url(

|1883961-seamless-baby-wallpaper-background.jpg); |

|background-size:250px; |

|background-repeat:repeat-y; |

|} |

|div.item{ |

|color : mediumslateblue; |

|border : 3px solid black; |

|width : 540px; |

|padding : 5px 10px 10px 10px; |

|margin: 40px 40px 40px 40px ; |

|text-align : justify; |

|background:plum; |

|font-family:Century Gothic; |

|font-weight:bold; |

|font-size:14px; |

|} |

|div.item2 |

|{ |

|font-family:Comic Sans MS; |

|font-size:20px; |

|color:Royalblue; |

|border:3px solid black; |

|width:200px; |

|padding : 10px 10px 10px 10px; |

|margin: 10px 10px 10px 10px; |

|background:Lightskyblue; |

|} |

|div.item3{ |

|float:left; |

|color:Tomato; |

|border:4px solid black; |

|width:170px; |

|padding : 10px 10px 10px 10px; |

|margin: 10px 10px 0px 0px; |

|background:white; |

|} |

|ul{ |

|list-style : square; |

|font-family:tahoma; |

|font-size:10; |

|text-align:justify; |

|} |

|img{ |

|float : left; |

|height : 75px; |

|} |

| |

| |

| |

| |

|Implementasi Modul 4 |

| |

| |

|CSS IMAGE |

| |

| |

| |

|Background |

|Background-attachement |

|Background-color |

|Background-image |

|Background-size |

| |

| |

|CSS Image digunakan untuk mengatur tampilan dari gambar (image) pada html. |

|Elemen ini mempunyai beberapa attribut. Satu properti dapat mempunyai beberapa nilai. |

|CSS bekerja sebagai pelengkap pada HTML, jadi untuk mengerti CSS paling tidak |

|kita harus sedikit tahu tentang HTML. Cascading StyleSheet adalah suatu teknologi yang |

|digunakan untuk memperindah tampilan halaman website (situs). Singkatnya dengan menggunakan |

|Methode CSS ini anda dengan mudah mengubah secara keseluruhan warna dan tampilan yang ada di |

|situs anda, sekaligus memformat ulang situs anda (merubah secara cepat). |

|CSS juga memungkinkan si pembuat web untuk memodifikasi HTML untuk membentuk tampilan sebuah |

|website Jadi kalo kita ini adalah arsitek, maka HTML adalah bangunannya dan CSS adalah desain |

|interior dan eksteriornya. |

| |

| |

| |

| © AULIA 'Hyun Mi' wahyu Permatasari.s |

| |

| |

Tampilan

[pic]

BAB V

PENUTUP

KESIMPULAN DAN SARAN

Kesimpulan :

CSS Image digunakan untuk mengatur tampilan dari gambar (image) pada html. Elemen ini mempunyai beberapa attribut. Satu properti dapat mempunyai beberapa nilai.

Saran :

Diharapkan asisten praktikum dapat membimbing para peserta praktikum dengan baik sehingga para peserta praktikum dapat memahami apa yang sedang di praktikkan dan bisa mempraktikkannya sendiri selain itu asisten praktikum bisa membantu para peserta praktikum yang kesulitan memahami materi praktikum.

-----------------------

TELAH DISETUJUI TANGGAL :

.....-......-.....

ASISTEN PRAKTIKUM

NORMAN HIDAYATULLAH

( 11.04.5.1.1.00001)

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download