Modul 6 STMIK IKMI CIREBON Oleh Dita rizki amalia.

Slides:



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

Cascade Style Sheet (CSS) Dahlan Abdullah /
Cascading Style Sheets (CSS)
( Cascading Style Sheet) Bagian 1
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.
Minggu …8… Page 1 MINGGU Ke delapan Web Teknologi 2 Pokok Bahasan: CSS and Themes Tujuan Instruksional Khusus: Mahasiswa akan dapat menjelaskan dan mengaplikasikan.
Pengembangan Evangs Mailoa Enumerasi, Image & Table WEB.
Exercises 4 Pengenalanan DIV.
Tim FT Elektro UHAMKA CSS (Cascading Style Sheet)
PENGERTIAN CSS.
CSS.
HTML - CSS Cascading Style Sheet.
Pengembangan Evangs Mailoa Cascading Style Sheet (CSS) dan HTML Form WEB.
Cascading Style Sheet Oleh : Edy Mulyanto
Web and Multimedia based Programming K2133 Pemrograman berbasis Web dan Multimedia 1.
Latihan CSS.
Pemrograman Berbasis Web CSS
Pengenalan XML Perbedaannya dengan HTML Kebutuhan akan XML.
Enumerasi, Images & Table
CSS (Cascading Style Sheet)
CSS Eksternal & Style Elemen
PENGENALAN CSS CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran, warna tertentu.
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.
Cascading Style Sheet (CSS)
Modul 8 STMIK IKMI CIREBON Oleh Dita rizki amalia.
Modul 1 STMIK IKMI CIREBON Oleh Dita rizki amalia.
Modul 3 STMIK IKMI CIREBON Oleh Dita rizki amalia.
Modul 9 STMIK IKMI CIREBON Oleh Dita rizki amalia.
Cascading Style Sheet (CSS)
Modul 10 STMIK IKMI CIREBON Oleh Dita rizki amalia.
Lutfi Budi Ilmawan Univ. Muslim Indonesia
...Lanjutan Pokok Bahasan Bahasa Style CSS L. Erawan.
X/HTML - CSS - Javascript
Pemrograman Berbasis Web CSS
Modul 4 STMIK IKMI CIREBON Oleh Dita rizki amalia.
Cascading Style Sheet (CSS)
PERTEMUAN CSS Pengenalan CSS.
Modul 7 STMIK IKMI CIREBON Oleh Dita rizki amalia.
(Cascading Style Sheet)
Pemrograman Basis Data Berbasis Web
Cascading Style Sheets (CSS)
Perancangan & Pemrograman Web
Firman Wahyudhie Cascading STYLE SHEET.
Mengubah Text Case Dengan CSS, Anda dapat pula mengubah suatu teks menjadi huruf kecil semua (lowercase), besar semua (uppercase), atau capitalize (hanya.
S1 Teknik Informatika - Unijoyo
KOMPUTER APLIKASI IT XHTML & CSS MODUL 06
KOMPUTER APLIKASI IT XHTML & CSS MODUL 02
CSS Cascading Style Sheets
Layout/Struktur Web dengan Div, dan Span
CSS Pertemuan 12 Matakuliah : L0182 / Web & Animation Design
Memahami Tag div (Division)
Cascade Style Sheet (CSS)
CSS.
Pemrograman Basis Data Berbasis Web
( Cascading style sheets)
Pemrograman Berorientasi Platform (IN315B)
Pemrograman Web I --CSS--
Darmawan satyananda Mathematics department State university of malang
Urutan Prioritas Selector CSS (Cascading)
Implementasi CSS Ada 4 cara memasang kode CSS ke dalam halaman situs, yaitu: Inline CSS Embedded (memasang kode ke dalam bagian External.
Enumerasi, Images & Table
...Lanjutan Pokok Bahasan Bahasa Style CSS L. Erawan.
Enumerasi, Images & Table
Pengolahan Informasi Berbasis Bahasa Pemrograman Script
PENGENALAN CSS CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran, warna tertentu.
List dan Image pada HTML
CSS Cascading Style Sheet
Web Design CSS.
Transcript presentasi:

Modul 6 STMIK IKMI CIREBON Oleh Dita rizki amalia

Pengenalan DIV ID dan DIV Class Pengenalan float positioning Materi Pokok 1. Materi Pokok Pengenalan DIV ID dan DIV Class Pengenalan float positioning Position Relative dan Position Absolut Implementasi Styling dan positionong pada markup DIV Studi Kasus

2. Pengantar Kelebihan CSS dalam layout web dibandingkan tabel adalah fleksibilitas dan juga lebih meminimalisasi jumlah byte file. Apabila Anda menggunakan tabel untuk mendesain layout, maka semakin banyak sel yang dibuat, akan semakin besar ukuran byte file dan akibatnya loading web pun membutuhkan waktu yang lebih lama. Pengantar

3. Capaian Pembelajaran Mata Kuliah Kemampuan mengkonstruksi Layout menggunakan markup DIV HTML Kemampuan memilih dan mengimplementasikan tipe pisitioning yang tepat pada permasalahan – permasalahan tertentu seperti float positionong, position relative dan position absolut menggunakan CSS . Capaian Pembelajaran

4. Kemampuan Akhir Mahasiswa mampu mengkonstruksi Layout menggunakan markup DIV HTML Mahasiswa mampu memilih dan mengimplementasikan tipe pisitioning yang tepat pada permasalahan – permasalahan tertentu seperti float positionong, position relative dan position absolut menggunakan CSS Kemampuan Akhir

5. Kegiatan Belajar a. Uraian dan Contoh 1) DIV ID dan DIV Class a) DIV ID Atribut ID digunakan untuk penamaan elemen HTML yang memiliki karakteristik unik/berbeda. Tidak boleh ada dua atau lebih elemen yang mempunyai ID yang sama. Kegiatan Belajar

1) DIV ID dan DIV Class a) DIV ID Contoh : Kegiatan Belajar

1) DIV ID dan DIV Class a) DIV ID Output : Kegiatan Belajar

1) DIV ID dan DIV Class b) DIV Class Class digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama dan dapat digunakan berulang kali dalam markup (Kode HTML). Kegiatan Belajar

1) DIV ID dan DIV Class b) DIV Class Contoh : Kegiatan Belajar

1) DIV ID dan DIV Class b) DIV Class Output : Kegiatan Belajar

2) Float Positioning Meratakirikan elemen gambar dan membuat paragraf naik keatas. Contoh : Kegiatan Belajar

2) Float Positioning Meratakirikan elemen gambar dan membuat paragraf naik keatas. Output: Kegiatan Belajar

3) Positioning a) Static Secara default, seluruh elemen/tag HTML memiliki positioning static. Artinya anda belum bisa/tidak dapat menentukan posisi elemen tersebut. Ketika anda ingin merubah posisi dari elemen tersebut maka anda harus memberikan position:relative dan selanjutnya anda dapat menggunakan property top, right, bottom, dan left untuk menentukan posisi elemen yang bersangkutan. Sebagai contoh perhatikan kode HTML dan CSS berikut : <div id=‚box‛></div> Berikut kode CSSnya. #box{ width : 300px; height : 300px; } Kegiatan Belajar

3) Positioning a) Static Ketika anda tidak memberikan nilai pada property position, maka secara default, #box memiliki position:static, jadi anda tidak dapat menggunakan property top, right, bottom dan left untuk menentukan posisi #box tersebut : #box{ background : green; width : 300px; height : 300px; top : 100px; left : 200px; } Kegiatan Belajar

3) Positioning a) Static Output Kegiatan Belajar

3) Positioning b) Relative Sekarang cobalah untuk menambahkan position:relative pada #box dan perhatikan bahwa box tersebut bergeser 100px dari atas dan 200px dari kiri. #box{ background : green; width : 300px; height : 300px; top : 100px; left : 200px; position:relative; } Kegiatan Belajar

3) Positioning b) Relative Output : Kegiatan Belajar

3) Positioning c) Absolute Penambahan position:absolute akan membuat elemen tersebut terlepas dari aturan penempatan elemen dan dibatasi oleh parent yang memiliki positioning relative. Sulit memahami apa yang saya tulis diatas, kita langsung ke contoh kasus. Buatlah markup HTML seperti berikut : <div id=‚box‛> <div id=‚box2‛></div> </div> Lalu berilah style seperti berikut : #box{ width:300px; height:300px; background:green; } #box2{ width:50px; height:50px; background:yellow; } Kegiatan Belajar

3) Positioning c) Absolute Output: Kegiatan Belajar

4) Implementasi Styling dan positionong pada markup DIV a) DIV ID dengan css Property “text-decoration” digunakan untuk menambah atau membuang ornamen tertentu pada teks. Sintaks-nya : #nama-ID {Property: value;} Kegiatan Belajar

4) Implementasi Styling dan positionong pada markup DIV a) DIV ID dengan css Contoh : Kegiatan Belajar

4) Implementasi Styling dan positionong pada markup DIV a) DIV ID dengan css Output: Kegiatan Belajar

4) Implementasi Styling dan positionong pada markup DIV b) CLASS ID dengan css Digunakan untuk menentukan sekelompok elemen yang berbeda Sintaksnya: Cara penulisan class id: .nama-class {property: value;} Untuk menempelkan class ke dalam tag html: Taghtml.nama-class {property ; value;} Kegiatan Belajar

4) Implementasi Styling dan positionong pada markup DIV b) CLASS ID dengan css Contoh: Kegiatan Belajar

4) Implementasi Styling dan positionong pada markup DIV b) CLASS ID dengan css Output: Kegiatan Belajar

Tuliskan source code dari tampilan berikut: b. Latihan Tuliskan source code dari tampilan berikut: Kegiatan Belajar

c. Rangkuman • DIV ID merupakan elemen dalam html yang spesifik • Sedangkan dalam class ID penamaan elemen bisa sama dan berulang • Secara default, seluruh elemen/tag HTML memiliki positioning static. Artinya anda belum bisa/tidak dapat menentukan posisi elemen tersebut. Untuk mengubah posisi tersebut maka gunakan posisi relatif • Penambahan position:absolute akan membuat elemen tersebut terlepas dari aturan penempatan elemen dan dibatasi oleh parent Kegiatan Belajar

c. Rangkuman • Dalam penulisan css pun berbeda antara div ID dan div Class Cara penulisan class id: .nama-class {property: value;} Cara penulisan class selector: #nama-ID {Property: value;} Kegiatan Belajar

Dengan menggunakan css buatlah script untuk tampilan html berikut ini: d. Tes formatif Dengan menggunakan css buatlah script untuk tampilan html berikut ini: Kegiatan Belajar

e. Umpan Balik dan Tindak Lanjut Mahasiswa mendengar, mencatat , dan mengerjakan latihan tentang div baik itu dengan html dan css. Kegiatan Belajar

6. Kunci Jawaban tes formatif File html-nya:

6. Kunci Jawaban tes formatif File css-nya:

7. Referensi [1] Agung, Gregorius. , HTML5 + CSS 3, PT 7. Referensi [1] Agung, Gregorius., HTML5 + CSS 3, PT. Elex Media Komputindo, 2012. [2] Lee, Christopher, Mos Wonted CSS Tips and Triks, ANDI Yogyakarta, 2012 [3] Hidayatullah,Priyanto, Pemrograman Web. INFORMATIKA Bandung,2014 Referensi