APLIKASI BERBASIS WEB STTI I-Tech Susana Dwi Yulianti, SKom.

Presentasi berjudul: "APLIKASI BERBASIS WEB STTI I-Tech Susana Dwi Yulianti, SKom."— Transcript presentasi:

1 APLIKASI BERBASIS WEB STTI I-Tech Susana Dwi Yulianti, SKom

2  Div (singkat untuk divisi) membagi isi menjadi beberapa bagian individu.  Setiap bagian kemudian dapat memiliki format sendiri, sebagaimana ditentukan oleh CSS.  Div adalah suatu wadah tingkat blok, yang berarti bahwa ada feed baris setelah tag.

3  Contoh deklarasi CSS berikut:  Kode HTML :.large { color: #00FF00; font-family:arial; font-size: 20pt; } This is a DIV sample.

4  Span mirip dengan div bahwa mereka berdua membagi konten menjadi beberapa bagian individu.  Perbedaannya adalah span yang masuk ke tingkat yang lebih halus, sehingga kita dapat rentang untuk memformat karakter tunggal jika diperlukan.  Tidak ada feed baris setelah tag.

5  Contoh deklarasi CSS berikut:  Kode HTML :.largefont { color: #0066FF; font-family:arial; font-size: 6px; } Span is not at the block level.

6  Statik  in -- satuan inchi  cm -- satuan centimeter  mm -- satuan milimeter  pt -- satuan point (1point = 1/72 inchi)  pc -- satuan pica (1pica = 12 point)  px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)  Relatif  % -- satuan persen  em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)  ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)

7  Properti Background PropertyDescription backgroundMengatur semua properti latar dalam satu deklarasi background- attachment Menentukan apakah gambar latar belakang tetap atau akan muncul sroll dengan sisa halaman background-colorMengatur warna latar belakang suatu elemen background-imageMengatur gambar latar belakang untuk elemen background- position Mengatur posisi awal dari gambar latar belakang background-repeatMengatur bagaimana gambar latar belakang akan diulangi

8  Properti Border dan Outline PropertiDeskripsi borderMengatur semua perbatasan properti dalam satu deklarasi border-bottomMengatur semua properti border bawah dalam satu deklarasi border-bottom-colorMengatur warna batas bawah border-bottom-styleMengatur gaya perbatasan bawah border-bottom-widthMengatur lebar batas bawah border-colorMengatur warna dari empat batas border-leftMengatur semua properti border kiri dalam satu deklarasi border-left-colorMengatur warna batas kiri border-left-styleMengatur gaya perbatasan kiri border-left-widthMengatur lebar batas kiri border-rightMengatur semua properti border kanan dalam satu deklarasi border-right-colorMengatur warna batas kanan

9  Properti Border dan Outline PropertiDeskripsi border-right-styleMengatur gaya perbatasan kanan border-right-widthMengatur lebar batas kanan border-styleMengatur gaya dari empat batas border-topMengatur semua properti border atas dalam satu deklarasi border-top-colorMengatur warna batas atas border-top-styleMengatur gaya perbatasan atas border-top-widthMengatur lebar batas atas border-widthMengatur lebar dari empat batas outlineMengatur semua properti outline dalam satu deklarasi outline-colorMengatur warna outline outline-styleMengatur gaya outline outline-widthMengatur lebar outline

10  Properti Dimensi PropertiDeskripsi HeightMengatur tinggi elemen max-heightMengatur tinggi maksimum suatu elemen max-widthMengatur lebar maksimum suatu elemen min-heightMengatur tinggi minimum suatu elemen min-widthMengatur lebar minimum suatu elemen WidthMengatur lebar suatu elemen

11  Font Properties PropertiDeskripsi FontMengatur semua properti font dalam satu deklarasi font-familyMenentukan keluarga font untuk teks font-sizeMenentukan ukuran font teks font-styleMenentukan gaya font untuk teks font-variantMenentukan apakah teks yang harus ditampilkan dalam font-topi kecil font-weightMenentukan berat font

12  Generated Content Properties PropertiDeskripsi contentDigunakan dengan : sebelum dan: sesudah pseudo-elemen, untuk memasukkan konten yang dihasilkan counter-incrementIncrement satu atau lebih counters counter-resetMembuat atau me-reset satu atau lebih counters quotesMengatur jenis tanda petik untuk kutipan

13  List Properti PropertiDeskripsi list-styleMengatur semua properti untuk sebuah daftar dalam satu deklarasi list-style-imageMenentukan sebuah gambar sebagai penanda daftar-item list-style-positionMenentukan jika penanda daftar-item akan muncul dalam atau di luar aliran konten list-style-typeMenetapkan jenis penanda list-item

14  Properti Margin PropertiDeskripsi marginMengatur semua properti margin dalam satu deklarasi margin-bottomMengatur margin bawah suatu elemen margin-leftMengatur margin kiri dari suatu elemen margin-rightMengatur margin kanan dari suatu elemen margin-topMengatur margin atas suatu elemen

15  Properti Padding PropertiDeskripsi paddingMengatur semua properti padding dalam satu deklarasi padding-bottomMengatur padding bawah suatu elemen padding-leftMengatur padding kiri suatu elemen padding-rightMengatur padding kanan suatu elemen padding-topMengatur padding atas suatu elemen

16  Positioning Properties PropertiDeskripsi BottomMenentukan posisi bawah dari unsur posisi ClearMenentukan yang sisi suatu elemen di mana elemen terapung lainnya tidak diperbolehkan ClipKlip yang benar-benar diposisikan elemen cursorMenentukan jenis kursor yang akan ditampilkan displayMenetapkan jenis kotak elemen harus menghasilkan floatMenentukan apakah kotak harus menyesuaikan terhadap screen leftMenentukan posisi kiri elemen diposisikan

17  Positioning Properties PropertiDeskripsi overflowMenentukan apa yang terjadi jika pelimpahan konten sebuah kotak elemen positionMenentukan jenis metode penentuan posisi yang digunakan untuk elemen (statis, relatif, absolut atau tetap) rightMenentukan posisi yang tepat dari elemen diposisikan topMenentukan posisi atas elemen diposisikan visibilityMenentukan apakah elemen yang terlihat z-indexMengatur urutan tumpukan elemen diposisikan

18  Tabel Properti PropertiDeskripsi border-collapseMenentukan apakah batas tabel harus dihilangkan border-spacingMenentukan jarak antara batas-batas sel yang berdekatan caption-sideMenentukan penempatan keterangan tabel empty-cellsMenentukan apakah atau tidak untuk menampilkan batas dan latar belakang pada sel kosong dalam tabel table-layoutMengatur algoritma layout yang akan digunakan untuk meja

19  Teks Properti PropertiDeskripsi colorMengatur warna teks directionMenentukan arah teks / menulis arah letter-spacingMeningkatkan atau mengurangi spasi antara karakter pada teks line-heightMengatur tinggi baris text-alignMenentukan alignment horisontal teks text-decorationMenentukan dekorasi yang ditambahkan ke teks

20  Teks Properti PropertiDeskripsi text-indentMenentukan indentasi dari baris pertama dalam blok-text text-shadowMenentukan efek bayangan ditambahkan ke teks text-transformMengontrol kapitalisasi teks vertical-alignMengatur alignment vertikal suatu elemen white-spaceMenentukan bagaimana putih-ruang dalam suatu elemen ditangani word-spacingMeningkatkan atau menurunkan spasi antar kata dalam teks

21 Contoh Layout CSS