LAPORAN RESMI. Boxes

dokumen-dokumen yang mirip
Percobaan 1 : Mengatur Width Dan Height Hasil :

CSS BOXES. Langkah Kerja. Percobaan

LAPORAN RESMI Layout

CSS. inheritance (pewarisan)

TUGAS BOXES. 1. Percobaan 1

DASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN

Author : Minarni, S.Kom.,MM

CSS Cascading Style Sheet

6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco

CSS dan Tata Letak Pemrograman Internet (TKE ) Program Studi Teknik Elektro, Unsoed

7 Cara Mempercantik Tampilan Blog

Analisa Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya.

LAPORAN RESMI. Image dan Link. Dosen Pembimbing : Dwi Susanto,ST, MT. Oleh Hamidah Nur Hidayati

LAPORAN RESMI. PRAKTIKUM TEKNOLOGI WEB Image dan Link

BAB IV CASCADING STYLE SHEET (CSS)

XHTML dan Dasar-dasar CSS XHTML

Cara Membuat website dengan Dreamweaver

CSS Cascading Style Sheet

Cascading Style Sheet (CSS) Didik Dwi Prasetya

BAB VI DESAIN WEB RESPONSIF

MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119)

Komunikasi Multimedia

Membuat Button Dengan CSS

Hover Putar CSS3. Oleh: Mohammad Nur Huda

A. LATAR BELAKANG ATAU BACKGROUND

BAB III CASCADING STYLE SHEET

MODUL PRAKTIKUM PEMROGRAMAN WEB (DASAR)

Triswansyah Yuliano

HTML Scripting Desain Visual dan Tata Letak dengan CSS 3

Teks dan Background SERIF SANS-SERIF MONOSPACE

Pemrograman Web PRAKTIKUM 3 CSS. TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml

A. LATAR BELAKANG ATAU BACKGROUND

CSS. Cascading Style Sheet. Spesifikasi lengkap di :

PERTEMUAN IV MEMBUAT JUDUL (TITLE)

CSS RANDY CAHYA WIHANDIKA, S.ST., M.KOM

CSS (Cascade Style Sheet)

CSS Lanjut Pertemuan - 5

Membuat Display Produk dalam Layout Box 4 Kolom

MODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119)

LAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB PENGENALAN CSS OLEH : LISTHYA KUMALASARI

DAFTAR ISI Bab 1 Mengenal Teknologi Internet dan Web... 1 Bab 2 Tentang CSS... 9

Materi 9 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya

MODUL 1 STYLE SHEET UNTUK TAMPILAN DASAR

MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5

Keuntungan Memisahkan presentation sebuah dokumen dari content document itu sendiri Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen w

LEMBAR KERJA PRAKTIKUM. - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html :

MODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id

CSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa

MODUL III CASCADING STYLE SHEET

POLITEKNIK ELEKTRONIKA NEGERI SURABAYA

SIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom.

Langkah Cara Membuat Form Login Menggunakan PHP dan MySQL Langkah 1: Membuat Tabel MySQL User/Pengguna

Notifikasi Keren dengan CSS3

Secara garis besar, terdapat 3 cara menginput kode CSS, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.

HTML (HyperText Markup Language)

BAB V DESAIN WEB CSS

MODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id

Editing Video Menggunakan Adobe Premiere Pro

Pemrograman Web WEEK 03 HTML LANJUT

KELAS TANGGAL PRAKTIKUM

{CSS} Cascading Style Sheet

SMH2D3 Web Programming. 4 BAB IV WEB DESIGN CSS3. H a l IDENTITAS. Kajian Web Design menggunakan HTML5 dan CSS3

SOAL PRODUKTIF KEJURUAN KELAS X MULTIMEDIA

Cara Mengelola Isi Halaman Web

: PRAKTIKUM CSS 3 [Color dan Background] NAMA : KELAS : TANGGAL PRAKTIKUM :

Percobaan 1: Pengenalan Syntax Simpan file berikut dengan nama percobaan1.html

Pemrograman Web. Cascading Style Sheets. Created by : Rifqi Sambas Khairurrohman

LEMBAR KERJA PRAKTIKUM

RWD (Responsive Web Design) dengan Grid System Bootsrtap

Membuat Aplikasi GPS & Suara Antrian dengan PHP. Ronald Rusli.

PENGENALAN HTML - 3. Gambar 1. Layer Toolbar

DAFTAR ISI DAFTAR ISI... 1 KATA PENGATAR... 2 BAB I PENDAHULUAN Latar Belakang Rumusan Masalah Tujuannya...

Penerimaan Murid Baru & Paket Pendidikan VET

Panduan Lengkapp HTML dan CSS bagian 2 Wahyu Setiyono

LAPORAN PRAKTIKUM 4 PENGENALAN CSS

Animasi Dengan CSS3. Mahasiswa memahami konsep dasar animasi CSS3 Mahasiswa memahami konsep transisi Mahasiswa memahami konsep transformasi


Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat

Contoh Syntax: Contoh di atas menunjukkan. S e l e c t o r : h 1. P r o p e r t y : c o l o r. V a l u e : r e d. (red).

Sanksi Pelanggaran Pasal 72 Undang-undang Nomor 19 Tahun 2002 Tentang Hak Cipta 1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan

TUTORIAL APLIKASI WEB Dengan PHP dan MySQL

PEMBUATAN BAHAN AJAR KIMIA BERBASIS WEB MENGGUNAKAN MICROSOFT FRONTPAGE

Persiapan. File latihan.rar diekstrak. Contoh apabila Bahan diekstrak di d:\

CSS (Cascading Style Sheets)

Area kerja. Gambar 1. Tampilan awal MS FrontPage

UAS (Pemrograman Web Statis) Oleh : N.I.M : : Reza Bayu Permana : Teknik Informatika Mata Kuliah : Pemrograman Web Statis

TUGAS UTS WEB STATIS. : Apriyanto Wibowo NIM : : Teknik Informatika S1 (Malam) Pengertian framework

TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah

Sanksi Pelanggaran Pasal 72 Undang-undang Nomor 19 Tahun 2002 Tentang Hak Cipta 1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan

Nama : Dwi Untari. Nim : A TUGAS SEMESTERAN 1. HOME 2. MATERI

PERTEMUAN 2. Melakukan Pengaturan Pada Halaman

Design Web 2 Kolom Flexible

CSS Cascading Style Sheet

Membuat Form Search Dengan CSS3

MENGATUR FORMAT PARAGRAF Oleh Ade Sobandi Hendri Winata Rasto

Membuat Layout Desain Awal dengan Photoshop

PRAKTIKUM 3 Pengenalan CSS

PEMROGRAMAN WEB 1 CSS

Memahami CSS Selector - Bagian 1

LAPORAN PRAKTIKUM MONITORING BERBASIS WEB

Transkripsi:

LAPORAN RESMI Boxes Dosen Pembimbing : Dwi Susanto,ST, MT Oleh Hamidah Nur Hidayati 4103131038 PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI SURABAYA 2015

Hasil dan 1. Percobaan: Mengatur Width dan Height

Hasil Pada Web Pada percobaan 1 ini, membuat suatu background dalam suatu petak ruangan dalam sebuah kotaan (div). fotmat div bisa dilakukan didalam div. Dalam div kita bisa mengatur ukuran dan style kotaan yang kita inginkan. contoh penggunaan div 2. Percobaan: Membatasi Ukuran Minimal Dengan Min-width dan Maxwidth

Hasil Pada Web Pada percobaan 2 ini, mencoba menampilkan ukuran batas garis dengan penggunaan min dan max lebar garis. 3. Percobaan: Membatasi Ukuran Minimalis dengan Min-height dan Maxheight

Hasil Pada Web Pada percobaan 3 ini, mencoba menampilkan ukuran batas garis dengan penggunaan min dan max pada ukuran tinggi kolom. 4. Percobaan: Penerapan Overflow

Hasil Pada Web Overflow pada css digunakan untuk pengaturan pada text yang melebuhi area atau kolom yang sudah ditentukan. Biasanya penggunaan overflow ditambahi dengan pengaturan scroll. Scroll berfungsi untuk memunculkan text yang tertutupi atau tidak muat pada kolom. Scroll biasany berbentuk naik dan turun. 5. Percobaan: Ukuran Lebar Garis Tepi Hasil Pada Web

Pada percobaan ini, mencoba membuat border dengan ketentuan ketebalan yang ditentukan, melalui beberapa pengaturan solid, px, dll. 6. Percobaan: Menerapkan Border Style Hasil Pada Web Pada percobaan ini, mencoba membuat border dengan berbagai style, sesuai ukuran yang ditentukan.

7. Percobaan: Menerapkan Warna Pada Garis Tepi Hasil Pada Web Percobaan ini bermain pada style warna pada border. 8. Percobaan: Padding

Hasil Pada Web Pada percobaan ini menerapkan style border dan warna, serta padding antara text dengan kolom pada border. 9. Percobaan: Margin Hasil Pada Web Selector Class hampir sama dengan selector ID. Perbedaannya yaitu terletak pada border, dan pengaturan padding. Dan itu diletakkan pada div yang berbeda-beda sehingga pengaturan tidak tercampur semua.

10. Percobaan: Mengatur Posisi Konten Hasil Pada Web Pada percobaan ini menerapkan border style pada color, ukuran lebar border, padding text pada garir border, serta pengatur pada posisi konten, yaitu dengan penggunaan text-align. 11. Percobaan: Mengatur Display

Hasil Pada Web Percobaan ini memunculkan sub menu yang umum ada pada web yaitu yang memiliki style vertikal. 12. Percobaan: Garis Tepi Berupa Gambar Hasil Pada Web Memunculkan garis tepi berupa gambar pada lebar border, dan dengan mengawasi margin yang digunakan.

13. Percobaan: Mengatur Border Radius Hasil Pada Web Pada percobaan kali ini, yang lebih digunakan adalah pengaturan shadow dari sebbuah gambar.

14. Percobaan: Box Shadow Hasil Pada Web Pada percobaan 14, mencooba memunculkan border teradius, yaitu border yang memiliki lengkunagan pada ujung atau sudut yang akan ditentukan.

15. Percobaan: Bentuk Elips Hasil Pada Web Pada percobaan ini, hampirsaa dengan percobaan sebelumnya, namun radius yang dipake ialah radius yang berbeda-beda.

Hasil dan Analisa Tugas 1. Tugas Pertama HTML

Hasil Pada Web AnalisaTugas Pertama Pada tugas 1 ini menampilkan logo, dengan style sesuai contoh. 2. Tugas Kedua HTML Hasil Pada Web AnalisaTugas kedua

Menampilkan gambar pada suatu kolom atau kotak yang sudah diatur radiusnya, atau lengkungan pada setiap ujung sisi bidang kotak. Kesimpulan Pada praktikum 6 kali ini, kita belajar untuk mengatur text, background seta tampilan boxes dengan css. Dan banyak hal yang perlu diperhatikan seperti pada pengaturan font-family dll. dan peletakkan image untuk background dan div nya. http://hamidahnh.mb.student.pens.ac.id/praktikum%206/