Membuat Form Search Dengan CSS3
|
|
- Yuliana Irawan
- 7 tahun lalu
- Tontonan:
Transkripsi
1
2 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 form yang berfungsi untuk mencari apa yang kita butuhkan agar lebih mudah dalam mencari sesuatu yang kita butuhkan baik artikel maupun gambar, video, musik dll diwebsite2 atau blog tertentu.. Mungkin diantara teman2 udah ada... 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 form yang berfungsi untuk mencari apa yang kita butuhkan agar lebih mudah dalam mencari sesuatu yang kita butuhkan baik artikel maupun gambar, video, musik dll diwebsite2 atau blog tertentu.. Mungkin diantara teman2 udah ada yang pernah lihat Ataupun paling gak teman2 pernah desain sendiri Form Search untuk blog atau website.. Nah Kali ini saya akan share lagi d biar teman2 bisa buat Form Search yang lebih menarik dari sebelumnya dengan bantun CSS3.. Unutk Yang belum pernah mungkin ini bias jadi acuan d buat kamu yang pengen desain sendiri formnya.. Biar lebih jelas saya kasi lihat tampilannya d form seperti apa yang akan kita buat Langkah pertama kita buat dulu kotak untuk formnya. Kalau teman2 perhatiin gambar diatas ada area berwarna hijau, nah itulah yang kita sebut kotak formnya.. Buka notepad atau text editor yang sobat punya lalu ketikkan kode dibawah ini:.kotak-form {
3 -moz- </style> Na itu Langkah pertama sudah selesai, kemudian teman2 ketikkan lagi dibawah kode yang pertama tadi kode ini : Nah Loh Itu Fungsinya Untuk Apa mas..!!?? Na sesuai prinsip kerjanya form search yaitu mencari sesuatu sesuai kata atau kalimat apa yang kita inputkan berarti berhubungan dengan huruf donk!!! Kode diatas tadii berfungsi untuk mengatur besar huruf, jenis huruf dan ketebalan huruf.. jadi kalau digabungin dengan kode yang pertama tadi maka hasilnya seperti ini :.kotak-form { -moz- </style> Pelan tapi pasti langkah kedua mulai selesai ne, lanjut ke langkah selanjutnya.. Kode yang selanjutnya ne berhubungan banget yang diatas.. Apa itu..!!?? Kita buat kotak kolom cari inputan yang fungsinya nanti untuk tempat untuk teks yang akan kita inputkan.. Teman2 ketikkan lagi kode dibawah ini setelah kode yang kedua tadi : padding: 6px 6px 6px 8px; -moz-
4 Jadi kalau digabungin hasilnya seperi ini :.kotak-form { -moz- padding: 6px 6px 6px 8px; -moz- Yup Langkah ketiga sudah selesai, trus apa lagi ne yang kurang ya..!!?? Sebuah form biasanya dilengkapi sebuah tombol yang akan menyampaikan isi pencarian yang ingin kita cari ke databasenya.. Selanjutnya kita buat d tombolnya, ketik kode dibawah ini lagi tepat setelah kode yang tadi selesai kita ketik :.tombol-cari { color: #fff; border: solid 1px #b80000; font-size: 11px; height: 28px; width: 55px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
5 background: #C82D2D; Jadi kalau sudah digabungkan maka hasilnya seperti ini :.kotak-form { -moz- padding: 6px 6px 6px 8px; -moz-.kolom-cari:hover { width:200px; background:white;.tombol-cari { color: #fff; border: solid 1px #b80000; font-size: 11px; height: 28px; width: 55px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
6 border-radius: 20px; background: #C82D2D; </style> Akhirnya satu persatu kodenya mulai kelihatan d.. Unutk desainnya kita sudah selesai sekarang kita melihat hasinya donk sapa tahu ada yang salah atau gak sesuai.. Untuk melihat hasil Kotak formnya teman2 ketikkan lagi kode dibawah ini dibagian <body> </body> <form class="kotak-form"> <input class="kolom-cari" type="text" value="search..." onfocus="if (this.value == 'Search...') {this.value = '';" onblur="if (this.value == '') {this.value = 'Search...';" /> <input class="tombol-cari " type="button" value="cari" /> </form> Supaya teman2 gak pada bingung kita gabungin d semua kodenya menjadi seperti ini : <html> <head> <title>search Form</title>.kotak-form { -moz- padding: 6px 6px 6px 8px;
7 -moz-.tombol-cari { color: #fff; border: solid 1px #b80000; font-size: 11px; height: 28px; width: 55px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #C82D2D; </style> </head> <body> <form class="kotak-form"> <input class="kolom-cari" type="text" value="search..." onfocus="if (this.value == 'Search...') {this.value = '';" onblur="if (this.value == '') {this.value = 'Search...';" /> <input class="tombol-cari " type="button" value="cari" /> </form><br> </body> </html> Setelah itu teman2 simpan d dengan nama form search.html, setelah itu klik dua kali v yang sudah disimpan tadi kalau berhasil maka hasilnya seperti ini : Akhirnya selesai juga d Form searchnya, saya yakin teman2 semua pasti berhasil semua.. Eits tapi tunggu dlu tadi sesuai gambar diatas ada tertulis FORM SEACRH SEBELUM DIHOVER dan FORM SEACRH SETELAH DIHOVER. Trus apa lagi dong yang kita tambahin..!!?? Pinter.. dibawah kode :
8 padding: 6px 6px 6px 8px; -moz- Tambahin lagi d kode ini :.kolom-cari:hover { width:200px; background:white; Trus dibagian kode :.tombol-cari { color: #fff; border: solid 1px #b80000; font-size: 11px; height: 28px; width: 55px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #C82D2D; Tambahin lagi d kode ini :.tombol-cari:hover{ background:#ad9b27; Maka kalau di gabungin semua kodenya menjadi seperti ini : <html> <head> <title>search Form</title>
9 .kotak-form { -moz- padding: 6px 6px 6px 8px; -moz-.kolom-cari:hover { width:200px; background:white;.tombol-cari { color: #fff; border: solid 1px #b80000; font-size: 11px; height: 28px; width: 55px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #C82D2D;.tombol-cari:hover{ background:#ad9b27; </style> </head> <body>
10 <form class="kotak-form"> <input class="kolom-cari" type="text" value="search..." onfocus="if (this.value == 'Search...') {this.value = '';" onblur="if (this.value == '') {this.value = 'Search...';" /> <input class="tombol-cari " type="button" value="cari" /> </form><br> </body> </html> Nah Coba Teman2 save lagi kemudian klik kanan di browser teman2 pilih muat ulang atau reload, setelah itu arahin d kursor teman trus lihat d apa yang terjadi..!! Fuih akhirnya tutornya selesai juga ne, mudah2n tutonya berguna ya buat teman2. Nah buat teman2 yang masih belum paham atau ada yang gak mengerti langsung komen ja y di bawah ini.. atau bagi temen2 yang pengen lebih focus lagi dibawah tutor ini saya udah buat link donlod untuk utak atik kodenya.. sampai disini dlu tutor saya kali ini sampai ketemu di tutor berikutnya dan slam sobat JaCo.. DOWNLOD CONTOH FORM SEARCH Tentang Penulis Irvansyah Tertarik Dengan Web Desain, Photoshop, dan Animasi Flash. Mohon panduan Dan arahan Agar Dapat menjadi Lebih Baik dab Bisa Sharing ke sesama..
Dasar Dasar Transisi Di CSS3
Dasar Dasar Transisi Di CSS3 Oleh: Irvansyah Jumpa lagi ne sama sobat JagoCoding, tutor saya hari ne tentang transisi di CSS3.. Mungkin diantara teman2 pasti ada yang udah tahu tapi masih bingung ataupun
Lebih terperinciDasar Dasar TRANFORMASI 2D DI CSS3
Dasar Dasar TRANFORMASI 2D DI CSS3 Oleh: Irvansyah Jumpa Lagi dengan sobat jaco,.. udah gak sabar ne mau share lgi bareng tman2 jaco.. Halaman postingan saya kali ini membahas tentang transform 2D di css.
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 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 terperinciKomunikasi Multimedia
Komunikasi Multimedia Modul ke: Fakultas Ilmu Komunikasi Teknik Lanjutan Corporate Website: HTML Editing dengan Macromedia Dreamweaver MX Anindita, S.Pd, M.Ikom Program Studi Public Relations www.mercubuana.ac.id
Lebih terperinci: Choirul Anam : D3 CC PJJ/Teknik Informatika. No NRP : Percobaan 1 Mengatur tampilan tipe list. Kode : Hasil :
Nama : Choirul Anam Kelas : D3 CC PJJ/Teknik Informatika No NRP : 2103157012 Percobaan 1 Mengatur tampilan tipe list Kode : Hasil : Analisa : Value lower-roman dari property CSS list-style-type membuat
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 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 terperinciCSS Cascading Style Sheet
CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 CSS Lanjut CSS Dimension Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML. contoh: height:100px; width:200px; Nilai/ value:
Lebih terperinciPEMBUATAN BAHAN AJAR KIMIA BERBASIS WEB MENGGUNAKAN MICROSOFT FRONTPAGE
PEMBUATAN BAHAN AJAR KIMIA BERBASIS WEB MENGGUNAKAN MICROSOFT FRONTPAGE Oleh: Asyti Febliza I. Mengenal Microsoft FrontPage Microsoft FrontPage (MS FrontPage) adalah sebuah program untuk membuat, mendesain,
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 terperinciCara Mengelola Isi Halaman Web
Cara Mengelola Isi Halaman Web MEMBUAT, MEMBUKA, DAN MENYIMPAN DOKUMEN HTML Membuat dokumen HTML kosong baru : - Pada tampilan windows, pilih menu File > New. Untuk membuka file HTML yang sudah ada : -
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 terperinciBab 4. Hasil dan Pembahasan
Bab 4 Hasil dan Pembahasan 4.1 Hasil Rancangan Cara kerja website ini adalah dengan menggunakan HTML dan CSS untuk desain dan tampilan. Dari tampilan tersebut terdapat form pencarian yang dimana merupakan
Lebih terperinciSIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom.
SIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom. Dreamweaver merupakan aplikasi yang digunakan untuk membuat website secara profesional. Pada tutorial ini akan dijelaskan
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 terperinciHTML (HyperText Markup Language)
HTML (HyperText Markup Language) IMS HTML HyperText Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah
Lebih terperinciTriswansyah 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 terperinciMemanfaatkan CSS Animasi dan Transisi [Part 1]
Memanfaatkan CSS Animasi dan Transisi [Part 1] Oleh: Christian Rosandhy Transition dan Animation itu adalah salah satu perintah wajib di dunia CSS3 sekarang untuk menghasilkan web yang lebih unik. Di part
Lebih terperinciPengenalan HTML dan CSS
Pengenalan HTML dan CSS Pengenalan HTML dan CSS Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO Pengenalan HTML dan CSS Jubilee Enterprise 2016, PT Elex Media Komputindo, Jakarta Hak cipta dilindungi
Lebih terperinciCara membuat HTML dasar
Cara membuat HTML dasar Oleh : Ronaldo Fantoni 11 IPA /12 1. Struktur dasar HTML HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya
Lebih terperinciLAPORAN RESMI. PRAKTIKUM TEKNOLOGI WEB Image dan Link
LAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB Image dan Link Dosen Pembimbing : Dwi Susanto Oleh : Laras Intansari (4103131054) 3 D3 MMB B PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA
Lebih terperinciLatihan 45 Teks dengan Efek Zoom In pada Setiap Huruf
Latihan 45 Teks dengan Efek Zoom In pada Setiap Huruf Pada latihan ini kita akan membuat animasi teks dengan efek Zoom In di setiap huruf penyusunnya. Metode animasinya dimulai dari kiri ke kanan secara
Lebih terperinciPengenalan Script. Definisi HTML
1 Pengenalan Script Pada bab ini akan dibahas bahasa script yang dapat digunakan untuk membuat halaman web. Untuk dapat membuat halaman web bahasa script pertama yang harus anda kenal adalah HTML. HTML
Lebih terperinciEBOOK TUTORIAL (PANDUAN) LAPAX THEME TEMPLATE TOKO ONLINE WORDPRESS INDONESIA JASA PEMBUATAN WEBSITE TOKO ONLINE. Butuh bantuan? Hubungi kami!
EBOOK TUTORIAL (PANDUAN) LAPAX THEME TEMPLATE TOKO ONLINE WORDPRESS INDONESIA JASA PEMBUATAN WEBSITE TOKO ONLINE Butuh bantuan? Hubungi kami! Perhatian! Sebagai pengguna jasa pembuatan website, Anda dilarang
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 terperinciMembuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap [Part 2]
Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap 2.3.2 [Part 2] Oleh: d-newbie pada tutorial sebelumnya kita sudah membuat 2 modal, yaitu modal "Masuk" dan modal "Daftar" dan pada tahap ini
Lebih terperinciC. Ms Powerpoint D. Notepad E. Ms Acces
1. Apakah kepanjangan dari HTML? A. Hyper Text Mark Up Language B. Hyper Text Mark Language C. Hight Text Mark Up Language D. Hight Text Mark Language 2. Berikut ini adalah termasuk Software Browser, Kecuali:
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 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 terperinciMODIFIKASI TAMPILAN HEADER SIDEBAR BLOGGER. Abstrak. Kata kunci : Header Sidebar, Header Blogger, Sidebar Blogger, Header Sidebar Blogger
KOMPUTAKI Vol. 1 No. 1 Februari 2016 MODIFIKASI TAMPILAN HEADER SIDEBAR BLOGGER Suprapto Fakultas Ilmu Komputer, Universitas AKI Email: suprapto.brian@yahoo.com Abstrak Modifikasi dari blogger penting
Lebih terperinciMEMBUAT KUIS INTERAKTIF DENGAN FLASH 8
MEMBUAT KUIS INTERAKTIF DENGAN FLASH 8 Pada bagian yang ini akan dibahas langkah-langkah pembuatan kuis interaktif. Bentuk pertanyaan pada kuis ini adalah pilihan ganda dengan 4 pilihan jawaban untuk setiap
Lebih terperinciBAB I PERKENALAN HTML
BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan
Lebih terperinciMendaftar ke Friendster
Mendaftar ke Friendster Sebelum melangkah lebih jauh soal Friendster, kita coba belajar cara mendaftar ke Friendster dulu yuk. Nah, pertama kamu kudu punya email. Kalo belum silahkan belajar cara bikin
Lebih terperinciTable, List, Form DWI SETIYA.N. /
LIST, TABLE DAN FORM Alat dan Bahan Software HTML Editor seperti Notepad++, Adobe Dreamweaver, Text Wrangler atau yang lainnya Bahan-bahan gambar berupa gambar-gambar kecil yang akan digunakan sebagai
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 terperinciEBOOK TUTORIAL (PANDUAN) PAKET BEGINNER JASA PEMBUATAN WEBSITE TOKO ONLINE
EBOOK TUTORIAL (PANDUAN) PAKET BEGINNER JASA PEMBUATAN WEBSITE TOKO ONLINE Butuh bantuan? Hubungi ipuipuweb.co.id! Perhatian! Sebagai pengguna jasa pembuatan website, Anda dilarang membagikan template
Lebih terperinciSOAL PRODUKTIF KEJURUAN KELAS X MULTIMEDIA
SOAL PRODUKTIF KEJURUAN KELAS X MULTIMEDIA 1. HTML adalah kepanjangan dari. A. Hyper Text Multiple Language B. Hiper Text Multiple Language C. Hipo Text Multiple Language D. Hyper Text Multiple Land E.
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 terperinciBagian 3 : Membuat Koneksi PHP dan My Sql pada Dreem weaver Site Definitions Pada Web Penjualan Dengan Dreamweaver CS6.
Bagian 3 : Membuat Koneksi PHP dan My Sql pada Dreem weaver Site Definitions Pada Web Penjualan Dengan Dreamweaver CS6. http://projekwebku.blogspot.com/2016/01/cara-membuat-input-data-padaweb.html#.wmyxym-gpiu
Lebih terperinciMembuat Tabel Responsive dengan CSS
Membuat Tabel Responsive dengan CSS Oleh: Christian Rosandhy CSS Layout Responsive udah jadi salah satu kebutuhan wajib ya dalam pembuatan website kita.. Sama seperti layout, Table juga perlu tampilan
Lebih terperinciLisensi Dokumen: Uraian Kasus :
Uraian Kasus : Pada kasus ini seorang mahasiswa ingin membuat Program sederhana tentang Nomor Handphone teman-temannya untuk mengantisipasi kehilangan HPnya atau HP Error sehingga perlu di Flash ulang
Lebih terperinciSecara garis besar, terdapat 3 cara menginput kode CSS, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.
Sebagaimana telah dipelajari pada saat pembahasan tentang HTML (pada artikel tutorial belajar HTML), HTML pada dasarnya adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu,
Lebih terperinci1. Buka internet ekplorer (IE), pada address bar ketik : mail.yahoo.com, klik Sign up
MEMBUAT E-MAIL : 1. Buka internet ekplorer (IE), pada address bar ketik : http:// mail.yahoo.com, klik Sign up Akan terlihat form register dari yahoo.com, isilah yang lengkap, yang berwarna kuning wajib
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 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 terperinciImage Slider 3D. Oleh: Anthonius
Image Slider 3D Oleh: Anthonius Kali ini saya akan berbagi cara membuat image slider dengan tampilan 3D. Cara ini sangat efisien karena hanya menggunakan sedikit script. Untuk CSS nya agan bisa copy langsung
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 terperinciMetode Penulisan Dasar CSS
Metode Penulisan Dasar CSS Pada pembahasan kali ini, kita akan menelusuri pemograman CSS lebih dalam lagi. Ada beberapa penulisan dasar dalam CSS yang wajib kita ketahui. Beberapa penulisan itu terdiri
Lebih terperinciBAB I PERKENALAN HTML
BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan
Lebih terperinciMEMBUAT WEB PERSONAL DENGAN DREAMWEAVER
MEMBUAT WEB PERSONAL DENGAN DREAMWEAVER Jalankan Dreamweaver 8 Pilih HTML Setelah dipilih HTML maka akan muncul tampilan pertama seperti berikut : Klik Page Properties untuk pengaturan awal Halaman Pilih
Lebih terperinciAnimasi Dengan CSS3. Mahasiswa memahami konsep dasar animasi CSS3 Mahasiswa memahami konsep transisi Mahasiswa memahami konsep transformasi
Tujuan Animasi Dengan CSS3 Mahasiswa memahami konsep dasar animasi CSS3 Mahasiswa memahami konsep transisi Mahasiswa memahami konsep transformasi Dasar Teori Pada praktikum-praktikum sebelumnya, kita telah
Lebih terperinciPembuatan Website Sederhana Menggunakan HTML (Hyper Text Markup Language)
Pembuatan Website Sederhana Menggunakan HTML (Hyper Text Markup Language) Oleh : Tri Wahyu Nugroho triwahyunugroho@yahoo.com maswahyu@students.ee.itb.ac.id http://s.ee.itb.ac.id/~maswahyu http://www.maswahyu.tk
Lebih terperinciMEMBUAT KUIS INTERAKTIF DENGAN FLASH 8
MEMBUAT KUIS INTERAKTIF DENGAN FLASH 8 Pada bagian yang kedua ini akan dibahas langkah-langkah pembuatan kuis interaktif. Bentuk pertanyaan pada kuis ini adalah pilihan ganda dengan 4 pilihan jawaban untuk
Lebih terperinciBAB 5 PROSES EDITING 5.1. EDITING AWAL
BAB 5 PROSES EDITING Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah dan lebih
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 terperinciGambar 1.1 Desain halaman web
DESAIN HALAMAN WEB DENGAN DREAMWEAVER 8.0 Oleh: Heri Istiyanto Untuk dapat mengikuti tutorial ini, diharapkan Anda menggunakan Macromedia Dreamwever versi 8. Jika Anda menggunakan versi di atasnya, misalnya
Lebih terperinciPanduan Web Desain Menggunakan Editor Macromedia Dreamweaver 8
Panduan Web Desain Menggunakan Editor Macromedia Dreamweaver 8 Oleh Angga Radhitya Rachmat, S.Kom radhizu05@gmail.com 0882 6801 9510 0819 5724 1619 KATA PENGANTAR Puji syukur penulis panjatkan kehadirat
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 terperinciMengelola Bagian. Website Sekolah. Mengelola bagian utama Website Sekolah dibagi menjadi 3
Bab II: Mengelola Bagian Website Sekolah Utama Mengelola bagian utama Website Sekolah dibagi menjadi 3 kategori pokok, yakni: Mengelola Admin Merubah Disain Banner Atas Melengkapi Profil Sekolah A. Mengelola
Lebih terperinciHover Putar CSS3. Oleh: Mohammad Nur Huda
Hover Putar CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Haha... Sebenarnya ini adalah tulisan pertama saya pada situs berbagi ilmu ini :-). Pada kali ini kita akan membuat efek hover memutarkan objek
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 terperinciHTML5 Komplet. Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO
HTML5 Komplet HTML5 Komplet Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO HTML5 Komplet Jubilee Enterprise 2017, PT. Elex Media Komputindo, Jakarta Hak cipta dilindungi undang-undang Diterbitkan
Lebih terperinciMembuat Aplikasi GPS & Suara Antrian dengan PHP. Ronald Rusli.
Membuat Aplikasi GPS & Suara Antrian dengan PHP Ronald Rusli www.bukulokomedia.com MEMBUAT APLIKASI GPS DAN SUARA ANTRIAN DENGAN PHP Perpustakaan Nasional : Katalog Dalam Terbitan (KDT) Penulis : Ronald
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 terperinciMembuat Layout Web Mengunakan Table
Page 1 INFO : ILMUKOMPUTER.ID.AI By PRASETYO UTOMO Web : http://www.prasetyo771.wordpress.com Facebook : facebook.com/tyo777 No Hp : 08982069172 Email : prasetyoutomo771@gmail.com Page 2 1. Pengenalan
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 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 terperinciHTML Scripting Desain Visual dan Tata Letak dengan CSS 3
Tujuan : Memahami dan dapat menggunakan konsep CSS3 Memahami dan dapat mengetahui kelebihan maupun kekurangan CSS 3 Menerapkan CSS 3 dengan fitur lainnya 8.1 CSS 3 CSS3 adalah standar untuk CSS yang paling
Lebih terperinciTUTORIAL MEMBUAT SNIPPET TAB BOOTSNIPP UNTUK BOOTSTRAP
TUTORIAL MEMBUAT SNIPPET TAB BOOTSNIPP UNTUK BOOTSTRAP Oleh : Nama : Badiah Setyowati Nim : 12141363 Prodi : Teknik Informatika - Malam Bootsnipp A. Pengertian Bootsnip Bootsnipp. Apa sih itu Bootsnipp?
Lebih terperinciTUTORIAL PENGEMBANGAN WEBSITE JDIH PROVINSI JAWA TIMUR. Malang, 7 Juli 2017
TUTORIAL PENGEMBANGAN WEBSITE JDIH PROVINSI JAWA TIMUR Malang, 7 Juli 2017 Overview Login Halaman Administrator Posting/Artikel Halaman/Pages Setup Menus Upload Peraturan Header Image LOGIN HALAMAN ADMINISTRATOR
Lebih terperinciE-commerce Development Berbasis Wordpress
E-commerce Development Berbasis Wordpress P A R T 2 A / 4 w w w. v e r o n i c a s t e v a n y. c o m w w w. g r a p h i c b y v e s t e. c o m PAGE 2 Pendahuluan WordPress merupakan sebuah CMS (Content
Lebih terperinciLAYOUT. Alat dan Bahan. Cara Kerja. Percobaan. Nama : Dwi Setiya Ningsih Kelas : PJJ D3 T1 NRP :
Nama : Dwi Setiya Ningsih Kelas : PJJ D3 T1 NRP : 2103157025 LAYOUT Alat dan Bahan --- Software HTML Editor seperti Notepad++, Adobe Dreamweaver, Text Wrangler atau yang lainnya --- Bahan-bahan gambar
Lebih terperinciHow to Create Simple Web (2) - Slice
How to Create Simple Web (2) - Slice Oleh: Isnu Arief Darmawan Senang sekali, bisa berjumpa lagi dengan Anda :D #masih-presenter dengan Saya Om' Kenu. Sebelumnya, kita sudah membuat template yang sudah
Lebih terperinciContoh 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).
Apa Itu CSS? PENGENALAN CSS CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke
Lebih terperinciMasih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat
Contoh ke dua layout menggunakan CSS Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat HEADER ISI NAVIGASI
Lebih terperinciMembangun Web Statis Menggunakan Dreamweaver Oleh : Mochamad Subecha, SE
Membangun Web Statis Menggunakan Dreamweaver Oleh : Mochamad Subecha, SE Langkah-langkah membuat web statis 1. Pastikan bahwa server localhost sudah berjalan. Untuk Windows biasanya menggunakan Xampp for
Lebih terperinci1. Pengenalan HTML. 2. Tag Dasar HTML
1. Pengenalan HTML 1.1. Sejarah Singkat HTML HTML dibuat oleh Tim Bernels-Lee seorang ahli Fisika ketika masih bekerja untuk CERN (organisasi Eropa untuk riset nuklir) dan dipopulerkan pertama kali oleh
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 terperinciMembuat Toko Buku dengan PHP - MySQL
Membuat Toko Buku dengan PHP - MySQL Iman Amalludin iman.llusion@gmail.com :: http://blog.imanllusion.hostzi.com Abstrak PHP. Apa itu? PHP (Hypertext Preprocessor) adalah bahasa skrip yang dapat ditanamkan
Lebih terperinciMemanfaatkan CSS Animasi [Part 2]
Memanfaatkan CSS Animasi [Part 2] Oleh: Christian Rosandhy Ini adalah tutorial lanjutan dari Part 1,, Kali ini kita akan belajar menggunakan CSS 3 Animation untuk membuat animasi yang jauh lebih dinamis
Lebih terperinciA. Pengantar B. Membuka program Power Point: Programs Catatan
A. Pengantar Power point merupakan salah satu dari program microsoft (MS) office. Program yang lain adalah MS-Word, MS-Exell, MS-Access, dll. Power point adalah paket program yang digunakan untuk membantu
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 terperinciPANDUAN MEMBUAT BLOG Wordpress.com
PANDUAN MEMBUAT BLOG Wordpress.com Dani Iswara daniiswara@gmail.com http://daniweblog.blogspot.com/ DIBAWAKAN PADA KULIAH LEARNING SKILL SIMKES UGM 2007 Sekilas Blog Web log = blog : situs web yang ditulis
Lebih terperinciPanduan Membuat Website/ Landing Page dengan memanfaatkan Web Editor Gratisan Yola
Panduan Membuat Website/ Landing Page dengan memanfaatkan Web Editor Gratisan Yola 1. Ketik di Browser internet anda http://yola.com Klik Get started Ketik Nama anda Ketik Email anda Ketik Email anda sekali
Lebih terperinciPemrograman Web I (HTML) Oleh: Devie Rosa Anamisa
Pemrograman Web I (HTML) Oleh: Devie Rosa Anamisa Tujuan Kuliah Mampu Menjelaskan mengenai: Pengertian struktur dasar tag-tag HTML membuat aplikasi dengan perintah-perintah HTML HTML Hyper Text Markup
Lebih terperinciBAB 13 MEMPERCANTIK TAMPIL WEB
BAB 13 MEMPERCANTIK TAMPIL WEB Website yang baik bukan terletak pada banyaknya animasi yang ditampilkan, tidak juga karena banyaknya video yang disediakan atau banyaknya warna yang dikombinasikan. Website
Lebih terperinciDasar Blog! Apa sih Blog?
Dasar Blog! Apa sih Blog? Sudah tidak asing lagi ditelinga dan mata kita dengan istilah itu, Blog, tapi sebenarnya apa sih artinya? ok deh.. Blog merupakan singkatan dari weblog, halaman di website yang
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 terperinciPenulis :
Daftar Isi Dasar-Dasar HTML Cara Membuka Notepad dan Structure Dasar HTML 1 Heading dan Cara Menyimpan dengan Ekstensi HTML 4 Basic HTML Code 6 Style 11 Formating 18 Dasar Dasar HTML Cara Membuka Notepad
Lebih terperinciMembuat Layout Footer Menempel ke Bawah
Membuat Layout Footer Menempel ke Bawah Oleh: Christian Rosandhy Kali ini saya mau share lagi salah satu layout wajib buat website, yaitu layout footer menempel kebawah. Di tutorial kali ini kita akan
Lebih terperinciMODUL III MEMBUAT FORM DAN HALAMAN WEB DENGAN FRAME
MODUL III MEMBUAT FORM DAN HALAMAN WEB DENGAN FRAME A. MAKSUD DAN TUJUAN 1. MAKSUD a. Membuat formulir dengan berbagai tipe b. Membuat tampilan halaman web dengan frame 2. TUJUAN a. Mahasiswa dapat membuat
Lebih terperinciPemrograman Web Week 2. Team Teaching
Pemrograman Web Week 2 Team Teaching WEEK 2 HTML IKG2I4 Software Project I Persiapan Instalasi Editor Download dan Install apilkasi editor (mis. Notepad++) Karena membantu dalam pengembangan syntax highlighting
Lebih terperinciUser Manual Template Wordpress Web Unit
User Manual Template Wordpress Web Unit [Document subtitle] Rizki Rinaldi [Course title] DESKRIPSI Nama Tutorial : User Manual - Template Wordpress Web Unit Tujuan Tutorial : Memberikan panduan langkah
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 terperinciSerba-serbi mempercantik BLOG dengan BLOGGER. (volume 1)
1 Serba-serbi mempercantik BLOG dengan BLOGGER. (volume 1) Semangat pagi NLCmembers, udah punya blog tapiii.. belum tau bagaimana cara untuk memaksimalkannya? Atau blognya masih biasa aja dan nggak kece?
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 terperinciMembuat situs sederhana dengan Dreamweaver *)
Membuat situs sederhana dengan Dreamweaver *) Oleh: Sri Andayani Jurusan Pendidikan Matematika, FMIPA UNY Dreamweaver merupakan salah satu perangkat lunak bantu dalam kelompok Macromedia yang digunakan
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 Duplikasi Form dengan Jquery (Dynamic Form)
Membuat Duplikasi Form dengan Jquery (Dynamic Form) Oleh: Dimas Agung Noviyanto Membuat dynamic field mungkin bukan hal baru bagi seorang web programmer, field inputan yang dapat ditambah maupun di hapus
Lebih terperinci