Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 2]
|
|
- Suhendra Kusuma
- 7 tahun lalu
- Tontonan:
Transkripsi
1
2 Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 2] Oleh: Sendy PK Sekarang kita akan menambahkan CSS pada halaman HTML kita untuk memperindah tampilan form. Sebagian besar CSS posisi form dan status messages di tengah jendela, dan form style dan form fields. <style type="text/css"> /* Add some margin to the page and set a default font and colour */... Sekarang kita akan menambahkan CSS pada halaman HTML kita untuk memperindah tampilan form. Sebagian besar CSS posisi form dan status messages di tengah jendela, dan form style dan form fields. <style type="text/css">
3 /* Add some margin to the page and set a default font and colour */ body { margin: 30px; font-family: "Georgia", serif; line-height: 1.8em; color: #333; /* Set the content dimensions */ #content { width: 800px; padding: 50px; margin: 0 <span class="wb6hlyvz4" id="wb6hlyvz4_6" style="height: 16px;">auto</span>; display: <span class="wb6hlyvz4" id="wb6hlyvz4_5" style="height: 16px;">block</span>; font-size: 1.2em; #content h2 { line-height: 1.5em; /* Add curved borders to various elements */ #contactform,.statusmessage, input[type="submit"], input[type="button"] { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* Style for the contact form and status messages */ #contactform,.statusmessage { color: #666; background-color: #ebedf2; background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#dfe1e5), color-stop(1, #ebedf2) ); background: -moz-linear-gradient( center bottom, #dfe1e5 0%, #ebedf2 100% ); border: 1px solid #aaa; -moz-box-shadow: 0 0 1em rgba(0, 0, 0,.5); -webkit-box-shadow: 0 0 1em rgba(0, 0, 0,.5); box-shadow: 0 0 1em rgba(0, 0, 0,.5); opacity:.95;
4 /* The form dimensions */ #contactform { width: 40em; height: 33em; padding: 0 1.5em 1.5em 1.5em; margin: 0 auto; /* Position the form in the middle of the window (if JavaScript is enabled) */ #contactform.positioned { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin-top: auto; margin-bottom: auto; /* Dimensions and position of the status messages */.statusmessage { display: none; margin: auto; width: 30em; height: 2em; padding: 1.5em; position: fixed; top: 0; bottom: 0; left: 0; right: 0;.statusMessage p { text-align: center; margin: 0; padding: 0; /* The header at the top of the form */ #contactform h2 { font-size: 2em; font-style: italic;
5 letter-spacing:.05em; margin: 0 0 1em -.75em; padding: 1em; width: 19.5em; color: #aeb6aa; background: #dfe0e5 url('images/stamp.jpg') no-repeat 15em -3em; /* */ border-bottom: 1px solid #aaa; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; /* Give form elements consistent margin, padding and line height */ #contactform ul { list-style: none; margin: 0; padding: 0; #contactform ul li { margin:.9em 0 0 0; padding: 0; #contactform input, #contactform label { line-height: 1em; /* The field labels */ label { display: block; float: left; clear: left; text-align: right; width: 28%; padding:.4em 0 0 0; margin:.15em.5em 0 0; font-weight: bold; /* The fields */ input, textarea { display: block; margin: 0;
6 padding:.4em; width: 67%; font-family: "Georgia", serif; font-size: 1em; border: 1px solid #aaa; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset; -webkit-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset; box-shadow: rgba(0,0,0,.2) 0 1px 4px inset; background: #fff; textarea { height: 13em; line-height: 1.5em; resize: none; /* Place a border around focused fields, and hide the inner shadow */ #contactform *:focus { border: 1px solid #66f; outline: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; /* Display correctly filled-in fields with a green background */ input:valid, textarea:valid { background: #dfd; /* The Send and Cancel buttons */ input[type="submit"], input[type="button"] { float: right; margin: 2em 1em 0 1em; width: 10em; padding:.5em; border: 1px solid #666; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 0.5em rgba(0, 0, 0,.8);
7 -webkit-box-shadow: 0 0.5em rgba(0, 0, 0,.8); box-shadow: 0 0.5em rgba(0, 0, 0,.8); color: #fff; background: #0a0; font-size: 1em; line-height: 1em; font-weight: bold; opacity:.7; -webkit-appearance: none; -moz-transition: opacity.5s; -webkit-transition: opacity.5s; -o-transition: opacity.5s; transition: opacity.5s; input[type="submit"]:hover, input[type="submit"]:active, input[type="button"]:hover, input[type="button"]:active { cursor: pointer; opacity: 1; input[type="submit"]:active, input[type="button"]:active { color: #333; background: #eee; -moz-box-shadow: 0 0.5em rgba(0, 0, 0,.8) inset; -webkit-box-shadow: 0 0.5em rgba(0, 0, 0,.8) inset; box-shadow: 0 0.5em rgba(0, 0, 0,.8) inset; input[type="button"] { background: #f33; /* Header/footer boxes */.widebox { clear: both; text-align: center; margin: 70px; padding: 10px; background: #ebedf2; border: 1px solid #333;.wideBox h1 { font-weight: bold; margin: 20px; color: #666;
8 font-size: 1.5em; </style> <!-- Some IE7 hacks and workarounds --> <!--[if lt IE 8]> <style> /* IE7 needs the fields to be floated as well as the labels */ input, textarea { float: right; #formbuttons { clear: both; /* IE7 needs an ickier approach to vertical/horizontal centring with fixed positioning. The negative margins are half the element's width/height. */ #contactform.positioned,.statusmessage { left: 50%; top: 50%; #contactform.positioned { margin-left: -20em; margin-top: -16.5em;.statusMessage { margin-left: -15em; margin-top: -1em; </style> <![endif]--> Mari kita lihat beberapa bagian yang menarik dari CSS: 1. Style untuk contact form dan status messages Kita berikan form dan status kotak yang bagus dan lembut dari atas sampai bawah gradien
9 menggunakan WebKit-gradien dan -moz-linear-gradient, dan kita juga menambahkan drop shadow dengan box-shadow Terakhir, kita memberikan form dan pesan kotak opacity.95 (95%), yang membuat konten berbayang. 2. Posisi form di tengah-tengah window (jika JavaScript diaktifkan) Awalnya, kita hanya menempatkan form inline setelah halaman konten. Hal ini dimaksudkan agar form dapat digunakan pada browser non-javascript-enabled tanpa mendapatkan konten. Namun, untuk JavaScript browser, kita ingin form muncul di tengah jendela, dari atas konten. Pada #contactform.positioned, menggunakan posisi tetap, menetapkan atas, bawah, kiri dan kanan nilai semua ke nol, dan memastikan bahwa semua 4 margin yang ditetapkan untuk auto. Ini berpusat elemen secara horisontal dan vertikal di sebagian besar browser modern. Nanti kita akan menggunakan JavaScript untuk menambahkan positioned class pada form. Header di bagian atas form Form "Send us an ..." header dengan gambar perangko, dengan rule styles #contactform h2 pada header. Kita memberikan teks gaya italic besar dan huruf keluar sedikit ruang. Kita juga menambahkan margin dan padding untuk membuat ruang di sekitar dan di dalam header. Kita menggunakan beberapa margin kiri negatif (-.75em) pada header untuk memotong padding pada form, sehingga header pergi tepat ke tepi kiri form. Kita juga mengatur lebar header untuk 19.5em sehingga sama persis dengan lebar form. 1. Kita juga mengatur warna heading, memberikan background gelap, posisi gambar thepostage stamp di sudut kanan atas, menambahkan bordertipis di bawah, dan menambahkan sudut atas melengkung. 2. Fields Kita memberikan input dan textarea dengan field font yang menarik,border bulat dengan border-radius, dan gentle inner shadow menggunakan box-shadow. Kita juga mengapung label bidang kiri sehingga mereka duduk di samping bidang. Ketika field difokuskan (diklik atau pindah ke dengan tombol Tab), kita memberikan border warna biru dan menghapus shadow. Kita juga menetapkan outline: tidak ada untuk menghapus garis biru ditambah dengan beberapa browser. Terakhir, kita menggunakan: pseudo-class yang valid untuk memberikan field diselesaikan dengan benar background hijau, bagi mereka browser yang mendukung validasi form HTML5. 3. Tombol Kirim dan Batal input [type = "submit"] selects the Send button, while input [type = "tombol"] memilih tombol Batal. Float pada posisi berdampingan, dan menambahkan beberapa margin untuk memberi mereka ruang. Kita berikan fixed width yaitu lebarnya teta[, dan beberapa padding untuk membuat mereka size yang layak. Kita tambahkan rounded border agar batasnya bulat dan drop shadow yang halus, dan tentukan teks dan warna latar belakang. Kita juga buat tombol sedikit transparan (opacity:.7), dan membuat sepenuhnya transparan ketika melayang di atas untuk menyorot mereka. Kita menggunakan transisi CSS memudar opacity perlahan. Terakhir ketika tombol diklik (: aktif) kita
10 bergerak bayangan di dalam tombol untuk memberikan "ditekan" tampilan, dan memberikan skema warna hitam-putih. Pada Tutorial selanjutnya kita akan membuat file PHP untuk mengirimka Sampai Ketemu di Tutorial selanjutnya. Tentang Penulis Sendy PK Saya adalah Programmer yang memiliki impian untuk menguasai dunia kunjungi situs pribadi saya di dan Online Shop saya di
Triswansyah Yuliano
Mendesain Menu dengan CSS Triswansyah Yuliano triswansyah_yuliano@yahoo.com http://triswan.wordpress.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan
Lebih terperinciCSS. inheritance (pewarisan)
{CSS} lanjut CSS inheritance (pewarisan) sebuah elemen mewarisi beberapa nilai dari properti yang dimiliki oleh elemen parent-nya http://www.w3.org/tr/css21/cascade.html#inheritance http://www.slideshare.net/diniscorreia/htmlcss-3-introduction-to-css
Lebih terperinciMembuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 4]
Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 4] Oleh: Sendy PK Sekarang form sudah dapat berfungsi. Kita dapat membuka halaman di browser, klik link "Send Us an Email" untuk melompat ke
Lebih terperinciPemrograman Web PRAKTIKUM 3 CSS. TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml
PRAKTIKUM 3 CSS TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml MATERI Sintaks CSS, cara memakai CSS, jenis-jenis selektor, satuan ukuran, satuan warna, properti
Lebih terperinci6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco
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 HTML, CSS, JavaScript HTML (Struktur Dokumen) CSS (Tampilan
Lebih terperinciDASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN
DASAR-DASAR CSS DASAR-DASAR CSS 2015 A. PENGENALAN CSS merupakan kependekan dari Cascading Style Sheet yaitu suatu skrip yang digunakan untuk mempercantik tampilan HTML atau mengatur bagaimana elemen HTML
Lebih terperinciMODUL PRAKTIKUM PEMROGRAMAN WEB (DASAR)
MODUL PRAKTIKUM PEMROGRAMAN WEB (DASAR) MATERI KULIAH SEMESTER 3 D3 TEKNIK INFORMATIKA STMIK AMIKOM YOGYAKARTA 2009 Disusun Oleh : ANGGIT DWI HARTANTO, S.KOM MODUL II CASCADING STYLE SHEET (CSS) I. PENGERTIAN
Lebih terperinciCSS dan Tata Letak Pemrograman Internet (TKE ) Program Studi Teknik Elektro, Unsoed
CSS dan Tata Letak Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed Iwan Setiawan Tahun Ajaran 2011/2012 a, a:visited { text-decoration:none; } a:hover { text-decoration:underline;
Lebih terperinciMembuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 1]
Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 1] Oleh: Sendy PK Dalam sebuah website, form kontak sangat penting sebagai komunikasi antara admin dan pengunjung,namun form kontak juga bisa
Lebih terperinciAPLIKASI WEB DAY 3. (Cascading Style Sheets)
APLIKASI WEB DAY 3 (Cascading Style Sheets) VII. Pengenalan Style Sheet Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat
Lebih terperinciMODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id
1 MODUL PEMOGRAMAN WEB I Oleh: CHALIFA CHAZAR 2 Modul 6 CSS For Layout Tujuan: Mahasiswa mengenal komponen-komponen CSS yang dapat digunakan untuk mengatur tata letak element HTML dalam membangun website
Lebih terperinciIntroduksi. Team Training SMK-TI I-58
Introduksi Style Sheet adalah template yang mengontrol pemformatan tag HTML pada halaman web anda. Bila anda telah terbiasa menggunakan Microsoft Word, anda dapat melihat bahwa konsep Style Sheet mirip
Lebih terperinciAnalisa Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya.
TUGAS CSS LAYAOUT PRAKTIKUM 6 1. Percobaan 1 Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya. 2. Percobaan2 Position: relative;
Lebih terperinciCSS RANDY CAHYA WIHANDIKA, S.ST., M.KOM
CSS RANDY CAHYA WIHANDIKA, S.ST., M.KOM CSS Cascading Style Sheet Bahasa yang digunakan untuk mengatur tampilan dan format dari dokumen markup (HTML) CSS didesain untuk memisahkan antara dokumen yang mendeskripsikan
Lebih terperinciXHTML dan Dasar-dasar CSS XHTML
XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto Email: rosa_if_itb_01@yahoo.com Blog: http://udinrosa.wordpress.com Website: http://www.gangsir.com XHTML Extensible Hypertext Markup Language
Lebih terperinciMEMBUAT WEBSITE SEDERHANA DENGAN HTML 5
MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5 NELI WIDI ASTUTI Neliwidiastuti97@gmail.com Abstrak Pada kesempatan ini saya akan mencoba menjelaskan tentang membuat website sederhana dengan HTML 5 dan CSS 3,
Lebih terperinciNotifikasi Keren dengan CSS3
Notifikasi Keren dengan CSS3 Oleh: Sendy PK Notifikasi pada website merupakan hal yang penting untuk memberi tahu pengunjung website tentang informasi singkat yang diberikan oleh pemilik website, hal ini
Lebih terperinciLangkah Cara Membuat Form Login Menggunakan PHP dan MySQL Langkah 1: Membuat Tabel MySQL User/Pengguna
Dalam tutorial cara membuat form login dengan PHP dan MySQL, kita akan belajar membuat halaman login untuk website dengan menggunakan PHP Session. Tutorial ini merupakan tutorial tingkat dasar, sederhana
Lebih terperinciDAFTAR ISI Bab 1 Mengenal Teknologi Internet dan Web... 1 Bab 2 Tentang CSS... 9
DAFTAR ISI Kata Pengantar... vii Daftar Isi... ix Bab 1 Mengenal Teknologi Internet dan Web... 1 1.1 Sejarah Internet...1 1.2 Web dan Browser...3 1.3 Mengenal Teknologi Web...4 1.4 Sekilas Tentang HTML...5
Lebih terperinciBAB IV CASCADING STYLE SHEET (CSS)
BAB IV CASCADING STYLE SHEET (CSS) A. KOMPETENSI DASAR Memahami jenis dan struktur dasar dokumen CSS dan CSS3. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk
Lebih terperinciTutorial Membuat Template Joomla 1.5
Tutorial Membuat Template Joomla 1.5 Tempate joomla sebenarnya sangat sederhana, tidak rumit sama sekali. Satu file layout html bisa kita konversi langsung menjadi template joomla 1.5 yang valid. Tutorial
Lebih terperinciLEMBAR KERJA PRAKTIKUM. - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html :
LEMBAR KERJA PRAKTIKUM Nim : 13-1401-164 Hari / Tgl TTD Asisten Nama Kelas : Muh. Idrus : DK-13 Mata kuliah : Pemrograman Web I Materi : JavaScript - JavaScript Alert yang ditampilkan browser saat membuka
Lebih terperinciCSS Cascading Style Sheet
CSS Cascading Style Sheet Pengenalan CSS CSS adalah singkatan dari Cascading Style Sheets CSS (Cascading Style Sheet) digunakan untuk melengkapi file HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style
Lebih terperinciCara Membuat website dengan Dreamweaver
Cara Membuat website dengan Dreamweaver Pajrin Wurika Sahara Wurika.sahara@gmail.com Abstrak Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG What You See
Lebih terperinciTeks dan Background SERIF SANS-SERIF MONOSPACE
Tujuan Teks dan Background Mahasiswa dapat memahami pengaturan teks melalui CSS Mahasiswa dapat memahami berbagai jenis ukuran teks Mahasiswa dapat memahami pengaturan background melalui CSS Dasar Teori
Lebih terperinciPercobaan 1 : Mengatur Width Dan Height Hasil :
Percobaan 1 : Mengatur Width Dan Height Analisa : Terlihat di atas kalau width dan height dari tag dan berbeda sesuai value yang telah diinputkan yang bias dibedakan dengan background-color
Lebih terperinciMATERI II CASCADING STYLE SHEETS (CSS) DASAR
MATERI II CASCADING STYLE SHEETS (CSS) DASAR Tujuan : 1. Memahami tentang konsep CSS 2. Memahami aturan penulisan pada CSS 3. Memahami selector sebagai pengontrol design 4. Memahami pembuatan background
Lebih terperinciCascading Style Sheets (CSS)
Cascading Style Sheets (CSS) - Konsep dasar CSS - CSS properties Definisi Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website
Lebih terperinciTUGAS BOXES. 1. Percobaan 1
TUGAS BOXES 1. Percobaan 1 Analisa : Pada percobaan 1, style pada elemen div ditetapkan width dan heightnya 400px dan 300px dengan background color pink, dan pada elemen p, width dan height ditetapkan
Lebih terperinciTUGAS UTS WEB STATIS. : Apriyanto Wibowo NIM : : Teknik Informatika S1 (Malam) Pengertian framework
TUGAS UTS WEB STATIS Nama : Apriyanto Wibowo NIM : 12141362 Prodi Mata Kuliah : Teknik Informatika S1 (Malam) : Pemrograman Web Statis Pengertian framework Framework adalah kerangka kerja. Framework juga
Lebih terperinciMembuat Button Dengan CSS
Membuat Button Dengan CSS Dari sekian banyak pertanyaan yang muncul dari para pemula di CSS adalah pertanyaan bagaimana sih membuat tombol dengan CSS?, hmmm bagi saya ini adalah pertanyaan yang simple
Lebih terperinciCSS. Auriza Akbar 1 Juni 2012
CSS Auriza Akbar auriza.akbar@gmail.com 1 Juni 2012 Apa itu CSS? CSS = Cascading Style Sheets Mekanisme sederhana untuk menambahkan style (seperti font, warna, spasi) ke dalam dokumen web http://www.w3.org/style/css/
Lebih terperinciBAB III CASCADING STYLE SHEET
BAB III CASCADING STYLE SHEET A. KOMPETENSI DASAR Memahami jenis dan struktur dasar dokumen CSS dan CSS3. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk menghasilkan
Lebih terperinciBAB V IMPLEMENTASI SISTEM
BAB V IMPLEMENTASI SISTEM Pada bab ini merupakan tahapan penerjemahan kebutuhan pembuatan software ke dalam representasi perangkat lunak sebeleum penulisan kode program dimulai sesuai dengan hasil analisis
Lebih terperinciA. LATAR BELAKANG ATAU BACKGROUND
A. LATAR BELAKANG ATAU BACKGROUND Latar belakang background dalam CSS dibedakan menjadi 2: 1. Latar Belakang Dengan Menggunakan Warna: Warna background memiliki dua nilai: Transparent : membuat wearna
Lebih terperinciAuthor : Minarni, S.Kom.,MM
S Cascading Style Sheets Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit Kalimantan Tengah Internet Multimedia Keuntungan Menggunakan CSS Mempermudah dan mempersingkat pembuatan dan pemeliharaan
Lebih terperinciPERTEMUAN 2. Melakukan Pengaturan Pada Halaman
2.1 Membuat Bingkai Pada Halaman PERTEMUAN 2 Melakukan Pengaturan Pada Halaman Untuk mempercantik dokumen, kita bisa menambahkan bingkai pada halaman dengan cara: Tandai teks yang akan diberi bingkai Klik
Lebih terperinciCascading Style Sheet (CSS) Didik Dwi Prasetya
Cascading Style Sheet (CSS) Didik Dwi Prasetya didikdwi@gmail.com CSS vcss à Cascading Style Sheet vstyle à mendefinisikan aturan untuk menampilkan elemen HTML. vdefinisi: Cascading Style Sheets (CSS)
Lebih terperinciMembuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 5]
Membuat Form Kontak yang Indah dan Atraktif dengan AJAX [Part 5] Oleh: Sendy PK Sekarang kita telah menyiapkan form bukannya di-submit dengan cara yang biasa, itu akan memicu fungsi submitform () ketika
Lebih terperinci/* styling paragraf, teks paragraf berwarna biru dan rata tengah */ p {color:blue;text-align:center;}
II CSS INTRO CSS (Cascading Style Sheet) adalah bahasa untuk mendefinisikan bagaimana suatu dokumen dan elemen pada suatu dokumen ditampilkan oleh browser. File CSS memiliki ekstensi.css SYNTAX SYNTAX
Lebih terperinciMEMBUAT TEMPLATE LIBREOFFICE WRITER
MEMBUAT TEMPLATE LIBREOFFICE WRITER Membuat Page Style 1. Buka file baru pada Libreoffice. 2. Pada menu bar, pilih Format > Styles and Formatting (F11) 3. Pada dialog box Styles and Formatting yang telah
Lebih terperinciMODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119)
MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119) Disusun oleh : KARTINI, SKom.,MMSI LABORATORIUM KOMPUTER FAKULTAS ILMU KOMPUTER UNIVERSITAS ESA UNGGUL MODUL PRATIKUM PBW 04B CSS : Layout dan Posisi
Lebih terperinciCSS. Cascading Style Sheet. Spesifikasi lengkap di :
CSS Cascading Style Sheet Spesifikasi lengkap di : http://www.w3..org/tr/css2 Mengubah Text Mengubah Warna Mengubah Posisi Mengubah Ukuran Bagaimana cara menempatkan CSS? Ada 3 cara yaitu : Inline ( pada
Lebih terperinciMACROMEDIA DREAMWEAVER 8
MACROMEDIA DREAMWEAVER 8 Macromedia Dreamweaver adalah program untuk membuat dan mengedit dokumen HTML secara visual dan mengelola halaman sebuah situs. Dreamweaver menyediakan banyak perangkat yang berkaitan
Lebih terperinciMODUL III CASCADING STYLE SHEET
MODUL III CASCADING STYLE SHEET A. TUJUAN Memahami struktur dasar dokumen HTML. Mampu membuat dokumen HTML yang baik dan benar. Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi. B. PETUNJUK
Lebih terperinciCSS Layouting. Antonius RC Pemrograman Web
CSS Layouting Antonius RC Pemrograman Web CSS Selector Tambahan Tanda > artinya select child element Contoh: ul > li Maka akan terambil 2 elemen li CSS Selector Tambahan Tanda + artinya select adjecent
Lebih terperinciBAB V DESAIN WEB CSS
BAB V DESAIN WEB CSS A. KOMPETENSI DASAR Memahami konsep dan strategi desain web yang rapi berbasis HTML dan CSS/CSS3. Mampu mengoptimalkan fitur-fitur CSS dalam desain web. Mampu memanfaatkan pendekatan
Lebih terperinciLAPORAN RESMI. Boxes
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
Lebih terperinciTUTORIAL WEBDESIGN HTML & CSS DENGAN DREAMWEAVER
1 TUTORIAL WEBDESIGN HTML & CSS DENGAN DREAMWEAVER Membuat website statis dengan menggunakan Dreamweaver tools sebagai editor dengan membuat dokumen XHTML dan CSS sebagai style library external. Rencana
Lebih terperinciMODUL 1 STYLE SHEET UNTUK TAMPILAN DASAR
MODUL 1 STYLE SHEET UNTUK TAMPILAN DASAR PENDAHULUAN Setelah semua yang Anda ketahui tentang dasar pembuatan halaman Web dalam perkuliahan sebelumnya, kini tiba saatnya untuk membuat halaman web Anda tampil
Lebih terperinciBAB VI DESAIN WEB RESPONSIF
BAB VI DESAIN WEB RESPONSIF A. KOMPETENSI DASAR Memahami konsep dasar desain halaman web responsif Mampu menerapkan konsep desain web responsif ke dalam aplikasi Mampu menghasilkan desain aplikasi web
Lebih terperinciCSS (CASCADING STYLE SHEET)
CSS (CASCADING STYLE SHEET) CSS DASAR Tentang CSS Kegunaan CSS Aturan Penulisan CSS Background CSS Font CSS Teks CSS Border Margin Contoh Layout Web menggunakan CSS 1 Tentang CSS CSS (Cascading Style Sheet)
Lebih terperinciCSS BOXES. Langkah Kerja. Percobaan
Tugas : Percobaan Praktikum 8 Materi : CSS Boxes Nama : Dwi Setiya Ningsih NRP : 2103157025 Langkah Kerja CSS BOXES Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan
Lebih terperinciPROPERTIES. Pemrograman Web Teknik Informatika Fakultas Teknologi Industri
PROPERTIES 12 Font Syntax: font: Properti Font Possible Values: [ ]? [ / ]? Contoh: P { font: italic bold 12pt/14pt
Lebih terperinciDesign Web 2 Kolom Flexible
Design Web 2 Kolom Flexible Muh Hasan Tanjung recosmic@gmail.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial
Lebih terperinci2011 Ahmad Amarullah
1 Silabus Mata Kuliah Program Studi : Sistem Informasi Kode Mata Kuliah : Nama Mata Kuliah : Komputer Aplikasi IT ( XHTML & CSS ) Jumlah SKS : 2 SKS Semester : 1 Deskripsi Mata Kuliah : Mata kuliah ini
Lebih terperinciFLASH, FRAME, BEHAVIOR
FLASH, FRAME, BEHAVIOR 1. Flash Menyisipkan Flash Button a. Pilih menu : insert image interactive flash button b. Tentukan property : Style : pilih bentuk / jenis tombol flash Button text : tulis label
Lebih terperinciMembangun website dinamis berbasis PHP-mySQL (3)
Membangun website dinamis berbasis PHP-mySQL (3) Agus Subardjo multigraphica@yahoo.com http://multigraphica.com Lisensi Dokumen: Copyright 2011-2015 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com
Lebih terperinciHeader-Footer, Preview dan Cetak Dokumen
Header-Footer, Preview dan Cetak Dokumen BAB 4 Pada Bab ini anda akan mempelajari cara: Membuat header dan footer Membuat nomor halaman pada header Menambahkan informasi pada footer Mengatur ukuran halaman
Lebih terperinciPERTEMUAN IV MEMBUAT JUDUL (TITLE)
PERTEMUAN IV MEMBUAT JUDUL (TITLE) Tujuan Praktikum: 1. Mahasiswa mampu menyisipkan/menambahkan Judul (Title) pada clip video; 2. Mahasiswa mampu mengubah/edit Judul (Title) pada clip video dengan berbagai
Lebih terperinciTutorial Lengkap Memahami CSS Display
Tutorial Lengkap Memahami CSS Display Oleh: Christian Rosandhy Dalam dunia CSS, property Display adalah salah satu property terpenting yang menentukan hasil akhir sebuah website. Kali ini kita akan banyak
Lebih terperinciMODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id
1 MODUL PEMOGRAMAN WEB I Oleh: CHALIFA CHAZAR 2 Modul 6 CSS3 Tujuan: Mahasiswa mengenal komponen CSS 3 sebagai pelengkap element HTML dalam membangun website statis. Pustaka:» HTML dan XML Edisi 2: Betha
Lebih terperinciKELAS TANGGAL PRAKTIKUM
PRAKTIKUM NAMA KELAS TANGGAL PRAKTIKUM : Margins, Padding dan Dimensi : : : A. TUJUAN 1. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan margin dan padding. 2. Siswa dapat mengenal, memahami
Lebih terperinciLAPORAN RESMI Layout
LAPORAN RESMI Layout Dosen Pembimbing : Dwi Susanto,ST, MT Oleh Hamidah Nur Hidayati 4103131038 PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI
Lebih terperinciLAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB PENGENALAN CSS OLEH : LISTHYA KUMALASARI
LAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB PENGENALAN CSS OLEH : LISTHYA KUMALASARI 4103131060 PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI SURABAYA
Lebih terperinciMembuat Template Website Menggunakan Teknik Layer ala CSS
Membuat Template Website Menggunakan Teknik Layer ala CSS Bila Anda mendengar istilah template website, hampir dapat dipastikan kalau skrip yang digunakannya adalah CSS. CSS atau Cascading Style Sheet
Lebih terperinci{CSS} Cascading Style Sheet
{CSS} Cascading Style Sheet mekanisme sederhana yang mengatur gaya / style (cth: warna, ukuran, posisi, dll) pada halaman web. http://www.w3.org/style/css sebelum CSS sebelum CSS sebelum CSS sebelum
Lebih terperinciPenggunaan CSS dalam Perancangan Web
Pendahuluan Penggunaan CSS dalam Perancangan Web CSS yang memiliki kepanjangan Cascade Style Sheet ini digunakan para web designer untuk mengatur style elemen yang ada dalam halaman web mereka, mulai dari
Lebih terperinciBab 4 Melengkapi dan Mencetak Spreadsheet
Bab 4 Melengkapi dan Mencetak Spreadsheet Pada Bab ini anda akan mempelajari cara: Membuat header dan footer Membuat diagram dari tabel Modifikasi diagram Preview dokumen Mengatur ukuran halaman pada jendela
Lebih terperincisetiap value dipisakan dengan,(koma) dan maksud dari kedua value ini ialah manambah efek dengan dua value tadi.
PERTEMUAN 6 .classshadow font-family: color:#333333; text-shadow: 1px 2px 3px blue; 1px adalah tebal bayangan secara horisontal, kekanan untuk nilai (+) dan kekiri untuk nilai (-), misal -1px; 2px adalah
Lebih terperinciCascading Style Sheets (CSS)
Cascading Style Sheets (CSS) - Konsep dasar CSS - CSS properties Definisi Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website
Lebih terperincipengayaan dan penomoran PENGAYAAN (STYLE)
pengayaan dan penomoran PENGAYAAN (STYLE) Pada umumnya orang menyusun dokumen berdasarkan atribut fisik. Sebagai contoh, jenis huruf, ukuran huruf, dan ketebalan (misalnya Times New Roman 12 pt, italic).
Lebih terperincibuat Lightbox mu sendiri dengan jquery
buat Lightbox mu sendiri dengan jquery Oleh: putra surya herlambang assalamualikum wr wb. apakah kamu pernah melihat gambar pada website yang ketika kamu klik lalu akan muncul suatu kotak besar yang juga
Lebih terperinciMembuat Form Search Dengan CSS3
Membuat Form Search Dengan CSS3 Oleh: Irvansyah Pasti teman2 sering dong berkunjung ke blog ataupun malah di blog teman2 ada yang namanya Form Searh.. Apa itu Form Search..?? Yup bnar sekali.. Sebuah media
Lebih terperinciMODUL 5 MACROMEDIA FIREWORKS
MODUL 5 MACROMEDIA FIREWORKS Tujuan : 1. Memahami penggunaan Fireworks dalam mendesign suatu web. 2. Memahami pembuatan tombol dalam Fireworks. 3. Memahami langkah-langkah pembuatan Fireworks dari awal.
Lebih terperinciFormat dan Formula. Pada Bab ini anda akan mempelajari cara:
BAB Format dan Formula 7 Pada Bab ini anda akan mempelajari cara: Format sel secara manual Format atribut dan pembatas sel Merapikan tampilan dengan format Format untuk angka-angka Memformat angka sebagai
Lebih terperinciMencari Text 2) 3) KTI A : Week 02 (Pembuatan Dokumen)
1 Mencari Text Untuk mencari sebuah text secara cepat, gunakan fasilitas Find and Replace, yang dapat dipanggil melalui menu Edit Find atau Ctrl+F. Hasilnya adalah : 4) Mencari untuk Highlight : menandai
Lebih terperinci1. Agar bagian yang ditunjuk anak panah bisa ditampilkan pada browser, perintah yang digunakan adalah.
A SOAL PILIHAN GANDA 1 Agar bagian yang ditunjuk anak panah bisa ditampilkan pada browser, perintah yang digunakan adalah A ikan Badut (Clownfish) B ikan Badut (Clownfish) C
Lebih terperinciGambar 3.1 Kotak Dialog Font & Character Spacing
EDITING Agar web site menarik & banyak dikunjungi, yang perlu diperhatikan adalah tampilannya, baru kemudian isinya. Maka, membuat web site semenarik mungkin merupakan keharusan, agar menarik pengunjung
Lebih terperinciMODUL III CASCADING STYLE SHEET
MODUL III CASCADING STYLE SHEET A. TUJUAN Memahami jenis dan struktur dasar dokumen CSS. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk menghasilkan halaman
Lebih terperinciEditing Video Menggunakan Adobe Premiere Pro
Editing Video Menggunakan Adobe Premiere Pro Winastwan Gora S. redaksi@belajarsendiri.com BAB IX. MEMBUAT TITLE Lisensi Dokumen : Hak Cipta 2006 BelajarSendiri.Com Seluruh dokumen ini dapat digunakan,
Lebih terperinciTUGAS PRAKTIKUM 9. Nama : Surya Wahyusantoso NRP : Percobaan 1 Mengatur tampilan tipe list. Analisa :
TUGAS PRAKTIKUM 9 Nama : Surya Wahyusantoso NRP : 2103157024 1. Percobaan 1 Mengatur tampilan tipe list Gambar di atas Menggunakan Value lower-roman dari property CSS list-style-type membuat tampilan bullet
Lebih terperinciPanduan Lengkapp HTML dan CSS bagian 2 Wahyu Setiyono
Panduan HTML dan CSS bagian 2 A. Apa itu CSS CSS (Cascading Style Sheets) merupakan kode pemrograman untuk membuat tampilan pada HTML. Selain menggunakan HTML para programer website sering menggunakan
Lebih terperinci[ KP215 - Otomasi Perkantoran ]
[ KP215 - Otomasi Perkantoran ] Pengayaan dan Penomoran [KP215 - Otomasi Perkantoran] Pengayaan dan Penomoran Chapter 2 3.1 PENGAYAAN (STYLE) Pada umumnya orang menyusun dokumen berdasarkan atribut fisik.
Lebih terperinciBab 9 Menggunakan Tabel
Bab 9 Menggunakan Tabel Webmaster Pro Front Page XP Daftar Isi Bab 9 1 Membuat sebuah tabel...284 1.1 Cara pertama membuat tabel... 284 1.2 Cara kedua membuat tabel... 286 1.3 Cara ketiga membuat tabel...
Lebih terperinciModul Praktikum 2 Dasar-Dasar Teknologi Informasi dan Komunikasi. Mengolah Kata Dengan Microsoft Word (1)
A. Mengenal Microsoft Word Mengolah Kata Dengan Microsoft Word (1) Microsoft Word (MS Word) merupakan program untuk mengolah kata. Program ini bisa digunakan untuk menulis dokumen misalnya karya tulis,
Lebih terperinciLATIHAN OPTIMASI GAMBAR TRAINING PRESENTASI MEMUKAU
LATIHAN OPTIMASI GAMBAR TRAINING PRESENTASI MEMUKAU LATIHAN MENCARI GAMBAR DI GOOGLE 1. Buka browser dan ketik google.com atau google.co.id 2. Klik images 3. Masukkan kata kunci gambar yang Anda cari dan
Lebih terperinciMODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id
1 MODUL PEMOGRAMAN WEB I Oleh: CHALIFA CHAZAR 2 Modul 3 HTML Layout Tujuan: Mahasiswa mengenal konsep-konsep dan komponen layout dasar untuk membangun website statis. Pustaka:» HTML dan XML Edisi 2: Betha
Lebih terperinciBAB 2 Teks dan Paragraph
BAB 2 Teks dan Paragraph Pada Bab ini anda akan mempelajari cara: Memilih tampilan untuk bekerja dalam dokumen Memotong, menyalin dan menempelkan teks Mengubah tampilan teks Menambahkan efek pada teks
Lebih terperinciMicrosoft Word Bagian I
APLIKASI KOMPUTER Modul ke: Microsoft Word Bagian I Fakultas Teknik Program Studi Elektro www.mercubuana.ac.id I b r a h i m, S.T, M.T. Ibra.lammada@gmail.com Pengertian Sejauh ini kita sudah sedikit banyak
Lebih terperinciMembuka Ms. Word 2007
Ms. Word 2007: Menu Bar Home & Page Layout Laboratorium Komputer Universitas Esa Unggul 2013 Membuka Ms. Word 2007 1. Klik Start Menu. 2. Sorot/klik All Programs. 3. Sorot/klik Microsoft Office. 4. Klik
Lebih terperinciArea kerja. Gambar 1. Tampilan awal MS FrontPage
Microsoft FrontPage I. Mengenal Microsoft FrontPage Microsoft FrontPage (MS FrontPage) adalah sebuah program untuk membuat, mendesain, dan mengedit halaman World Wide Web seperti menambahkan text, images,
Lebih terperinciMultiple Style akan meng-cascade kedalam Style Lain
CSS Pendahuluan Apakah CSS? CSS singkatan dari Cascading Style Sheets Styles mendefinisikan bagaimana menampilkan elemen Styles umumnya disimpan dalam Style Sheets Styles ditambahkan pada HTML 4.0 untuk
Lebih terperinciKostumisasi Fitur Twitter Bootstrap 3 - Episode Carousel / Slide
Kostumisasi Fitur Twitter Bootstrap 3 - Episode Carousel / Slide Oleh: Muhammad Fauzi Seperti yang kita ketahui twitter bootstrap menyediakan beberapa fitur javascript dan user tinggal menggunakannya,
Lebih terperinciKeuntungan Memisahkan presentation sebuah dokumen dari content document itu sendiri Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen w
Tentang CSS Adalah standart pembuatan dan pemakaian style untuk dokumen terstruktur, CSS digunakan untuk mempersingkat penulisan tag HTML seperti font, color, text dan table menjadi lebih ringkas sehingga
Lebih terperinciBab 3 Format dan Formula
Bab 3 Format dan Formula Pada Bab ini anda akan mempelajari cara: Format sel secara manual Format atribut dan pembatas sel Merapikan tampilan dengan format Format untuk angka-angka Memformat angka sebagai
Lebih terperinciA. LATAR BELAKANG ATAU BACKGROUND
A. LATAR BELAKANG ATAU BACKGROUND Latar belakang background dalam CSS dibedakan menjadi 2: 1. Latar Belakang Dengan Menggunakan Warna: Warna background memiliki dua nilai: Transparent : membuat wearna
Lebih terperinciModul ke: Aplikasi Komputer. Microsoft Word 2010 Bagian 1. Fakultas FASILKOM. Nurhaida, ST. MT. Program Studi MKCU
Modul ke: 04 Ida Fakultas FASILKOM Aplikasi Komputer Microsoft Word 2010 Bagian 1 Nurhaida, ST. MT. Program Studi MKCU Word 2010 Fitur-fitur terbaru yang diberikan Word 2010 Autocorrect MailMerge Auto
Lebih terperinci7 Cara Mempercantik Tampilan Blog
7 Cara Mempercantik Tampilan Blog Primo Riveral primo@raharja.info Abstrak Memiliki blog dengan tampilan keren dan enak dilihat tentu pasti menjadi kembanggaan tersendiri untuk seorang yang menggemari
Lebih terperinciTAKEN FROM ROSIHANARI.NET
TAKEN FROM ROSIHANARI.NET Pendahuluan CSS yang memiliki kepanjangan Cascade Style Sheet ini digunakan para web designer untuk mengatur style elemen yang ada dalam halaman web mereka, mulai dari memformat
Lebih terperinci