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

Slides:



Advertisements
Presentasi serupa
Cascading Style Sheet Gufron Gufron - Sub Bahasan • Pendahuluan • Konsep Dasar CSS • Syntax/Perintah CSS • Implementasi.
Advertisements

Desain web – pertemuan 10 CSS (Part 3).
ID pada CSS.
Cascade Style Sheet (CSS) Dahlan Abdullah /
CSS Cascading Style Sheet Cascading Style Sheet Cascading Style Sheet
DASAR HTML Marina Azizah. Struktur Dokumen HTML Dokumen HTML bisa di bagi mejadi tiga bagian utama: HTML Setiap dokumen HTML harus di awali dan di tutup.
CSS Cascading Style Sheet
PARAGRAF, GAMBAR DAN BINGKAI
Print Preview Dokumen word berbentuk digital, biasanya akan dicetak kedalam bentuk kertas Untuk melihat bentuk dokumen tercetak digunakan perintah File>
Pertemuan 9 Cascading Style Sheet (css)
CSSCSS ADVANCE. CSS Dimension Sifat Dimensi CSS memungkinkan kita untuk mengontrol tinggi dan lebar suatu elemen. 4/7/20152By : Suwondo, S.Kom.
HTML (Hypertext Markup Language)
Pengembangan Evangs Mailoa Enumerasi, Image & Table WEB.
A. A. Bajuadji, S.Kom, M.Eng |
Pemrograman web dasar TABEL.
Tim FT Elektro UHAMKA CSS (Cascading Style Sheet)
PENGERTIAN CSS.
CSS.
HTML - CSS Cascading Style Sheet.
MEMBUAT TABEL Tombol untuk membuat tabel ada di menu insert
Web and Multimedia based Programming K2133 Pemrograman berbasis Web dan Multimedia 1.
EDITING TEKS PERTEMUAN 2.
 Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau.
Bekerja dengan file dan desain web
Latihan CSS.
Pemrograman Berbasis Web CSS
Enumerasi, Images & Table
PERTEMUAN 6. .classshadow { font-family: color:#333333; text-shadow: 1px 2px 3px blue; } kita juga bisa menambah value lagi misal : text-shadow: 1px 2px.
TABEL , FORM DAN FRAME.
Pemprograman BaSIS Web
CSS 3.
ADD-ON Dasar HTML.
CSS (Cascading Style Sheet)
CSS Eksternal & Style Elemen
Desain Web dengan Tag HTML
CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan.
Tabel HTML Bambang Irawan.
Cascading Style Sheet (CSS)
Lutfi Budi Ilmawan Univ. Muslim Indonesia
...Lanjutan Pokok Bahasan Bahasa Style CSS L. Erawan.
X/HTML - CSS - Javascript
Evaluasi Soal UTS.
Microsoft Office Word 2007 ( PENGATURAN DOKUMEN )
PERTEMUAN CSS Pengenalan CSS.
CSS (Cascading Style Sheet)
(Cascading Style Sheet)
Perancangan & Pemrograman Web
CASCADING STYLE SHEETS (CSS)
Firman Wahyudhie Cascading STYLE SHEET.
KOMPUTER APLIKASI IT XHTML & CSS MODUL 06
KOMPUTER APLIKASI IT XHTML & CSS MODUL 02
Komputer aplikasi it-I (html)
Layout/Struktur Web dengan Div, dan Span
Komputer aplikasi it-I (html)
CSS Pertemuan 12 Matakuliah : L0182 / Web & Animation Design
PERTEMUAN 5 CSS IMAGE.
PAKET PROGRAM APLIKASI
Komputer aplikasi it-I (html)
List, Image, Link dan tabel
CSS.
( Cascading Style Sheet) Bagian 1
CSS.
Darmawan satyananda Mathematics department State university of malang
Urutan Prioritas Selector CSS (Cascading)
...Lanjutan Pokok Bahasan Bahasa Style CSS L. Erawan.
Cascading Style Sheet.
Pengolahan Informasi Berbasis Bahasa Pemrograman Script
List dan Image pada HTML
CSS Cascading Style Sheet
Web Design CSS.
Transcript presentasi:

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

 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.

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

 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.

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

 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)

 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

 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

 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

 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

 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

 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

 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

 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

 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

 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

 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

 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

 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

 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

Contoh Layout CSS