Membuat Login Pop Up Dengan JqueryUI
|
|
- Harjanti Salim
- 7 tahun lalu
- Tontonan:
Transkripsi
1
2 Membuat Login Pop Up Dengan JqueryUI Oleh: Dadan Berawal dari maraknya tayangan goyang di telivisi. Terinspirasi juga untuk membuat efek goyang pada website saya. Hehe kagak nyambung nih ilustrasi ceritanya :D. Tapi yah memang kali ini pembahasannya tidak akan jauh dari kata goyang. Masa sih? Iya lah, pada kali ini saya akan menunjukan bahwa tak hanya ma... Berawal dari maraknya tayangan goyang di telivisi. Terinspirasi juga untuk membuat efek goyang pada website saya. Hehe kagak nyambung nih ilustrasi ceritanya :D. Tapi yah memang kali ini pembahasannya tidak akan jauh dari kata goyang. Masa sih? Iya lah, pada kali ini saya akan menunjukan bahwa tak hanya manusia aja yang bisa goyang. Tapi form login pada website bisa di buat goyang. Penasaran kan? (biasa aja tuh -_-) Sebelum mengikuti panduan ini, diharapkan Anda sudah mengerti dasar-dasar tentang html,css, dan Jquery. Bagi yang belum monggo belajar dulu daripada bingung di tengah-tengah. :D Kalau Anda ingin membuat pengunjung website sedikit terkesima, salah satu cara dengan membuat login popup bergoyang. Keuntungan dari membuat login pop-up ini adalah website Anda akan terlihat atraktif di mata pengunjung. Selain itu dengan login pop-up fokus mata pengunjung akan lebih meningkat ke tengah layar sehingga memudahkan pengunjung untuk mengisi form login. Yah, itulah pada topik kali ini saya akan membahas tentang login pop-up. Anda sebenarnya bisa membuat pop menggunakan tekhnik CSS. Namun kekurangannya kalau CSS tidak bisa di animasikan. Biar bisa di animasikan kita harus memakai Jquery-UI agar pop-up loginnya bisa di beri
3 efek animasi ketika di buka maupun di tutup. Bagi Anda yang sudah menggunakan Jquery-UI pasti sudah tahu cara menggunakan widget dialog pop up. Namun widget dialog default yang di sediakan oleh Jquery-UI kesannya hanya standar saja. Sedangkan kita inginnya biar lebih atraktif gitu. He-he Pertama-tama silahkan Anda cari desain form login kesukaan Anda di internet. Kalau Saya baru saja mendapat desin form login dari internet yang gambarnya seperti ini Desain diatas saya dapatkan dari link ini. Anda juga bisa mendapatkan desain login lainnya dari link itu. Mumpung Gratis J WUIh, keren juga kalau desain diatas bisa di pop up animasi bergoyang dengan Jquery UI. Hanya saja bagaimana caranya? Ternyata caranya hanya dengan menambah script Jquery-UI dan beberapa kode CSS untuk mengkaburkan halaman utama. Dalam hal ini kita mesti teliti dalam menambah kode CSS yang akan di timpa dan tahu selector mana yang harus di sesuaikan. Berikut ringkasan langkah-langkahnya jika Anda sudah mendapatkan desain login Anda sendiri : Sisipkan style class gelap Tambahkan script Jquery dan Jquery-UI Bungkus kode login-form dengan tag div Tambahkan tombol pemicu agar form login muncul. Buat kode inti Jquery UI Bagi yang mau coba silahkan di download dulu bahan-bahannya disini. Oke, setelah bahan-bahannya sudah siap bisa Anda lihat di folder login-form-paper-style, di situ ada file HTML dengan nama yang sama. Lihat index.html Buka file utama desain loginnya yang bernama index.html Pertama-tama kita siapkan dulu layar hitamnya (wuih serem). Maksudnya tambahkan kode CSS berikut sebelum tag </style>.gelap{display: none;
4 background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.8; z-index: 999;} Kode diatas ibarat lampu redup. Tahu kan kalau kita nonton bioskop ketika film di mulai, semua lampu pada mati kecuali layar. Nah kode diatas gunanya seperti itu, dia berguna mematikan semua lampu agar nanti mata pengunjung bisa nyaman ke pop-up login kita. Lalu tambahkan kode untuk menyisipkan file Jquery.js dan Jquery-UI.js pada bagian head. <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> Selanjutnya kita bungkus div container login dengan kode <div id=dialog-login> setelah tag pembuka < body>. Lalu tutup dengan tag </div> sebelum tag </body>. Maksudnya untuk apa sih kita menambahkan div ini? Begini, nantinya div dialog-login ini akan kita tambahkan atribut style yang valuenya sebagai berikut style="display:none; margin:0 auto; z-index: 99999; position:relative;" nah jadi atribut diatas kita tambahkan ke div dialog login sehingga akan seperti ini <div id=dialog-login style="display:none; margin:0 auto; z-index: 99999; position:fixed;"> Kalau Anda menjalankannya dengan benar maka form loginnya akan hilang karena efek dari atribut style tadi. Lalu kita tambah sebuah tombol ber ID bukalogin sebagai pemicu agar dialog loginnya terbuka Taruh kode berikut pada sebelum tag </body> <button id="bukalogin">buka login</button> Silahkan klik tombol buka login, maka tampilannya akan seperti ini
5 Button di atas akan bertindak sebagai pemicu ledakan bergoyang. Hehe, jadi ketika itu di klik akan keluar deh efek pop-up login bergoyangnya. Namun sekarang kalau Anda klik belum akan terjadi apa-apa. Sabar yah!! Oke terakhir silahkan tambahkan kode berikut persis sebelum tag </body> <script type="text/javascript"> $("#bukalogin" ).click(function() { $('body').append('<div class="gelap"></div>'); $('.gelap').fadein(300); $("#utama" ).show( "bounce", 3000 ); }); $("#tutup" ).click(function() { $("#utama" ).hide( "bounce", 3000 ); $('.gelap').fadeout(300); }); </script> Bagi Anda yang pernah menggunakan Jquery-UI pasti sudah tahu kode diatas. Yah, kode diatas adalah kode inti untuk menjalankan efek dialog pop-upnya. Biasanya kalau dulu kode ini di tempatkannya pada bagian head. Namun zaman sekarang penempatannya memang harus di dalam tag body agar kodenya dapat berjalan. Juga penempatannya harus setelah kode form login juga yah. Sekarang bisa Anda test lagi di browser. Jangan lupa jalani ritual refresh browser dulu agar efeknya jalan. Kode diatas di bagi dalam dua bagian besar, yakni ketika tombol link di klik dan tombol close dialog
6 pop up di klik. Biar lebih afdol akan saya jelaskan beberapa bagian kode tersebut. Tapi bagian kode yang penting saja, sisanya walau tanpa penjelasan itu tetap di tulis. $("#bukalogin" ).click(function() { Kode diatas memberi tahu kalau elemen ber id bukalogin(dalam hal ini tag button) di klik akan menjalankan perintah selanjutnya. $('body').append('<div class="gelap"></div>'); Perintah diatas untuk mempersiapkan layar hitam untuk menimpa elemen body. $('.gelap').fadein(300); Perintah untuk memunculkan layar hitam $("#utama" ).show( "bounce", 3000 ); Perintah untuk menampilkan form pop-up login $("#tutup" ).click(function() {{ kode diatas menunjukan kalau elemen ber id tutup(dalam hal initulisan tutup) di klik akan menjalankan perintah selanjutnya. $("#utama" ).hide( "bounce", 3000 ); perintah untuk menyembunyikan layar hitam $('.gelap').fadeout(300); -perintah untuk menyembunyikan pop-up login Silahkan coba saja di browser. Bagaimana hasilnya? Benarkan kan efeknya bergoyang. Kenapa bisa bergoyang? Jawabannya terletak pada kode $("#utama" ).show( "bounce", 3000 ); dan $("#utama" ).hide( "bounce", 3000 );
7 Lihat pada ketikan show dan hide saya menggunakan efek yang sama yaitu bounce. Pada tulisan bounce sebenarnya bisa Anda ubah dengan efek lainnya. Efek lainnya yang tersedia seperti Blind, clip, drop, explode, fade, fold, highlight, puff, dll. Lengkapnya Anda bisa cek efek-efek yang tersedia pada situs Jquery UI. Terakhir bagaimana nih cara balikin lagi? Gak mungkin kan kalau di munculin terus-terusin. Biasanya kalau sebuah pop-up itu ada tombol closenya. Berhubungan ini kita buat dari nol, kita buat sendiri saja. Kalau di form login yang sedang saya gunakan, saya tinggal mengubah tulisan link Download menjadi Tutup dan menambahkan id CSS tutup sebagai pemicu. Berikut kodenya sebelumnya <a href="#">download source file</a> Diubah menjadi <a id="tutup" href="#">tutup</a> Nah seperti itulah jadinya. Apa yang sudah saya sampaikan adalah dasarnya. Anda kembangkan lebih lanjut sesuai kebutuhan. Jika Ada yang ingin berkonsultasi lebih lanjut silahkan komentar aja. Jangan lupa halaman ini di bookmark yah. :) Tentang Penulis Dadan Saya adalah pria biasa saja yang tumbuh semakin besar di lingkungan yang serba biasa, Semoga kehadiran saya disini bisa membantu Anda. ^_^
Membuat Ragam Halaman Statis di Wordpress
Membuat Ragam Halaman Statis di Wordpress Oleh: Dadan Pernah membuat layout halaman statis di Wordpress? Mengapa kita perlu membuat halaman statis? Jawabannya agar pengunjung baru website Anda dapat mengetahui
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 terperinciTekhnik Paging Dengan Jquery Ajax
Tekhnik Paging Dengan Jquery Ajax Oleh: Dadan Bagi Anda programer web atau yang sudah lama berkecimpung di dunia pemograman, paging adalah suatu tekhnik menampilkan data perhalaman. Dengan paging informasi
Lebih terperinciTekhnik Paging Dengan Jquery Ajax
Tekhnik Paging Dengan Jquery Ajax Oleh: Dadan Bagi Anda programer web atau yang sudah lama berkecimpung di dunia pemograman, paging adalah suatu tekhnik menampilkan data perhalaman. Dengan paging informasi
Lebih terperinciAJAX Framework. Pemrograman Web 1. Genap
AJAX Framework Pemrograman Web 1 Genap 2011-2012 Framework Apa itu Framework (Software Framework)? Kumpulan pustaka-pustaka (library) perangkat lunak yang script-nya dapat digunakan kembali (reusable)
Lebih terperinciMembuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage
Membuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage Oleh: Christian Rosandhy Siapa bilang bikin galeri gambar yang responsive itu susah? Di tutorial kali ini kita akan belajar membuat
Lebih terperinciTUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif
TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif www.ilmuwebsite.com Bagian 6. Menggunakan JQuery Effect 1 Bagian
Lebih terperinciSImple Pop-Up Modal dengan CSS3 dan Jquery
SImple Pop-Up Modal dengan CSS3 dan Jquery Oleh: d-newbie Assalamualaikum wr.wb. bertemu lagi dengan saya, kali ini saya akan menulis tutorial tentang pop-up, apa itu pop-up? Kalo menurut wikipedia pop-up
Lebih terperinciMembuat Plugin jquery (Part 1)
Membuat Plugin jquery (Part 1) Oleh: muhamad iqbal Ini adalah postingan pertama dari serial yang akan membahas tentang Membuat plugin jquery. Pada bagian ini kita akan membahas tentang konsep dasar plugin.
Lebih terperinciDesain Web. MODUL 2 Desain Form
1 MODUL 2 Desain Form A. TUJUAN 1. Mampu membuat form dalam HTML 2. Mampu menggunakan input dalam HTML 3. Mampu menggunakan select dalam HTML 4. Mampu menggunakan textarea dalam HTML B. PETUNJUK 1. Awali
Lebih terperinciPelatihan Intel XDK. Modul 5 Pengembangan Aplikasi Mobile Learning Menggunakan Intel XDK Sesi 2. Dikembangkan oleh Intel Software.
Pelatihan Intel XDK Modul 5 Pengembangan Aplikasi Mobile Learning Menggunakan Intel XDK Sesi 2 Dikembangkan oleh Intel Software. 1 Versi 1.0. September 2013. Hak Cipta (C) 2013 Intel Software.. Adobe,
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 terperinciAJAX dengan jquery Part 1
AJAX dengan jquery Part 1 Oleh: Cecep Yusuf Kali ini saya akan share tutorial AJAX dengan jquery. Dengan menggunakan jquery, penggunaan AJAX akan jauh menjadi lebih mudah. Penjelasan Kali ini saya akan
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 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 terperinciIntro To JQuery Training Online Ilmuwebsite
MODUL I JQUERY KELAS ZEROZERO Intro To JQuery Training Online Ilmuwebsite http://www.ilmuwebsite.com Lisensi Dokumen: Copyright 2014-2015 Ilmuwebsite.Com Untuk semua kalangan, silahkan menyebarluaskan
Lebih terperinciMODUL 7. Pengantar jquery
MODUL 7 Pengantar jquery Laboratorium Komputer STIMIK PPKIA Pradnya Paramita Malang 2016 Pertemuan 7 7.1 Tujuan : 1. Mahasiswa dapat memahami mengenai PHP dengan jquery 2. Mahasiswa dapat mengaplikasikan
Lebih terperinciPersiapan. File latihan.rar diekstrak. Contoh apabila Bahan diekstrak di d:\
CSS & CSS Framework CSS Cascading Style Sheets (CSS) adalah sebuah bahasa yang digunakan untuk menampilkan style dari sebuah dokumen HTML. CSS menjelaskan bagaimana elemen HTML harus ditampilkan. Persiapan
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 terperinciMahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML
Pengenalan JavaScript Standar Kompetensi Mahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML Indikator Hasil
Lebih terperinciBab 1 Perkenalan Awal untuk Anda yang Pemula
Bab 1 Perkenalan Awal untuk Anda yang Pemula Apakah Anda sekarang sudah mempunyai website? Jika belum, mulailah untuk membuat. Saya berharap, Anda yang telah membuka halaman ini telah tahu cara dasar membuat
Lebih terperinciPemrograman Web Week 4. Team Teaching
Pemrograman Web Week 4 Team Teaching Peran Masing-masing Bahasa HTML => Mengatur Struktur CSS => Mengatur tampilan JSS => Mengatur interaktifitas Penggunaan Javascript Sama seperti pada CSS, ada 3 cara
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. 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 Themes Wordpress sendiri - Part 1
Membuat Themes Wordpress sendiri - Part 1 Oleh: asep saepulloh Halo sahabat jaco. Kali ini saya akan membahas bagaimana caranya membuat themes sendiri di CMS Wordpress. Terkadang sahabat jaco muak dengan
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 terperinciMembuat Layout Header Diam di Tempat (Fix Header)
Membuat Layout Header Diam di Tempat (Fix Header) Oleh: Christian Rosandhy Fix Header / Header Diam di Tempat adalah salah satu tren layout yang cukup populer (liat aja header Facebook / Twitter). Layout
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 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 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 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 terperinciMembuat Web App Mobile Canggih dengan Sencha Touch 2 - VIEW
Membuat Web App Mobile Canggih dengan Sencha Touch 2 - VIEW Oleh: asep saepulloh Holaa sahabat jaco, aduh udah lama nih gak bermain di website tercinta kitahh. Hehehehe. Abis lagi sibuk, banyak kerjaan
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 terperinciRuang Kerja DREAMWEAVER MX 2004 :
1.1 Pengertian Macromedia Dreamweaver : merupakan sebuah HTML editor Profesional untuk mendesain secara visual dan mengelola situs web beserta halaman- web. 1.2 Spesifikasi PC untuk menjalankan DREAMWEAVER
Lebih terperinciLAPORAN PRAKTIKUM MONITORING BERBASIS WEB
LAPORAN PRAKTIKUM MONITORING BERBASIS WEB Modul III Cascade Style Sheet Disusun Oleh : Fahmi Ahmad Husaeni 201302025 Dosen pengampu : Deni Kurnia S.Pd, M.T Program Studi : Teknik Mekatronika POLITEKNIK
Lebih terperinciNama : Yohandes Efindo NIM : Kelas : F. Terjemahan halaman 4-5. Tag HTML
Nama : Yohandes Efindo NIM : 09018198 Kelas : F Terjemahan halaman 4-5 Tag HTML Pada dasarnya, sebuah halaman web adalah file teks yang berisi petunjuk dalam bentuk kode-kode HTML (disebut tag) dan atribut.
Lebih terperinciTutorial Lengkap Memahami CSS Position
Tutorial Lengkap Memahami CSS Position Oleh: Christian Rosandhy Salah satu property CSS yang masih bisa bikin kita bingung dan salah langkah itu adalah POSITION. Kapan kita harus pakai position static,
Lebih terperinciCSS Cascading Style Sheet
CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 Pengenalan CSS CSS = Cascading Style Sheet. Suatu style yang digunakan untuk menampilkan elemen HTML. Dapat mengatur dan mengontrol tampilan
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 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 terperinciCSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa
CSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa Pembahasan Pengertian CSS CSS (FONT, TEXT, COLOR) CSS - Image PENGERTIAN CSS Singkatan dari Cascading Style Sheet Digunakan dalam kode HTML untuk menciptakan
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 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 terperinciBelajar Dasar HTML 5. It s all about 4rt, not how smart you are. S u p p o r t e d b y : [ C y b e r 4 r t C r e w ]
Belajar Dasar HTML 5 S u p p o r t e d b y : [ C y b e r 4 r t C r e w ] [ H I G r o u p o n F a c e b o o k ] r00t@cyber4rt:~# It s all about 4rt, not how smart you are [ H I F a n s P a g e ] 1 1 / 2
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 terperinciPRAKTIKUM SISTEM INFORMASI MANAJEMEN
MODUL V DREAMWEAVER 5.1 Tujuan Praktikum Setelah menyelesaikan modul ini, mahasiswa diharapkan mampu : 1. Mengenal komponen aplikasi Macromedia Dreamweaver 2. Membuat template website offline sederhana
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 terperinciCARA MEMBUAT CSS DENGAN DREAMWEAVER
CARA MEMBUAT CSS DENGAN DREAMWEAVER Dewi Wijayanti dewiwijayanti@raharja.info Abstrak Dreamweaver adalah sebuah perangkat lunak yang digunakan untuk membuat atau menyunting halaman web yang dinamis maupun
Lebih terperinciCara Membuat Di Yahoo Indonesia
Cara Membuat Email Di Yahoo Indonesia Tutorial cara membuat email di yahoo indonesia : 1. Tekan dan tahan tombol CTRL kemudian tekan tombol T di keyboard. Maka akan terbuka tab baru di browser yang kita
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 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 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 terperinciJquery Events. Contoh : $(.tombol ).click(function() { $( p ).hide(1000); }); 5
PENGENALAN JQUERY Apa itu Jquery? jquery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, dan membuat
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 terperinciDasar-dasar Dreamweaver
FAUZAN SRIRADITYO UTOMO 08148102 TUGAS TV INTERNET Dasar-dasar Dreamweaver I. Elemen Dreamweaver Anda harus nyaman mencari dan menggunakan alat-alat dan objek dalam Dreamweaver (ada banyak lagi, tetapi
Lebih terperinciAJAX dengan jquery Part 3
AJAX dengan jquery Part 3 Oleh: Cecep Yusuf Pada tutorial ini, kita akan belajar bagaimana mengirim data POST dari sebuah form dan dikirim dengan metode AJAX post dengan menggunakan jquery. Selamat pagi
Lebih terperinciCHAPTER 6. Sebelum membuat starter data, kita perlu meng-create collections terlebih dahulu. Buat folder lib pada folder aplikasi.
CHAPTER 6 Untuk membuat collections, hal pertama yang dilakukan adalah menambahkan baris baru ke dalam file Javascript yang memungkinkan user untuk membuat collections. Sebelumnya, image tersimpan dalam
Lebih terperinciTUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif
TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif www.ilmuwebsite.com Bagian 8. Menggunakan JQuery Manipulation
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 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 terperinciPEMROGRAMAN WEB 1 CSS
PEMROGRAMAN WEB 1 CSS RIO ANDRIYAT KRISDIAWAN, M.KOM Definisi CSS CSS adalah kepanjangan dari Cascading Style Sheet dan digunakan para web designer untuk mengatur style elemen yang ada didalam halaman
Lebih terperinciTAG HTML LANJUT Tujuan Instruksional :
3 TAG HTML LANJUT Tujuan Instruksional : 1. Mahasiswa mengetahui tag-tag tingkat lanjut pada HTML 2. Mahasiswa dapat menyusun dan menyimpan sebuah dokumen HTML dengan tag HTML lanjut 3. Mahasiswa dapat
Lebih terperinciTutorial Dasar CSS Preprocessor LESS
Tutorial Dasar CSS Preprocessor LESS Oleh: Christian Rosandhy Karena CSS standar udah terlalu mainstream,, nggak ada salahnya kita belajar salah satu CSS Preprocessor yang cukup terkenal, yaitu LESS. Disini
Lebih terperinciBAB II LANDASAN TEORI
BAB II LANDASAN TEORI 2.1. Internet Internet merupakan suatu jaringan antar komputer yang saling dihubungkan. Media penghubung tersebut bisa melalui kabel, kanal satelit maupun frekuensi radio, sehingga
Lebih terperinciTUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah
TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah www.ilmuwebsite.com Bagian 7. Membuat Data Pagination Menggunakan
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 terperinciKAJIAN 3 Web Responsive
KAJIAN 3 Web Responsive Modul 10 Pengantar Web Responsive Modul 11 Perancangan Web Responsive 73 KAJIAN 3 Web Responsive MODUL 10 Pengantar Web Responsive 10.1. TUJUAN Mengetahui dan memahami dasar perancangan
Lebih terperinciLAYER DAN HYPERLINK. B. Kegunaan Layer: 1. Layer
1. Layer A. Dasar Layer Untuk membuat layer, yang harus anda butuhkan adalah menentukan atribut posisi untuk style anda. Posisi tersebut dapat sebagai posisi absolute atau posisi relative Posisi diatas
Lebih terperinciMembuat Sistem Pertemanan Sederhana
Membuat Sistem Pertemanan Sederhana Oleh: Dadan Pada artikel kali ini saya akan menunkukan kepada Anda cara membuat sistem pertemanan seperti pada website jejaring sosial. Contohnya yah seperti pada website
Lebih terperinciKustomisasi Desktop dan Taskbar
Kustomisasi Desktop dan Taskbar 89 Komputer dan Sistem Operasi untuk SMP Membuat wallpaper dan screen saver adalah salah satu bagian dari setting periferal. Wah, periferal, apakah itu? Periferal adalah
Lebih terperinciTrik Mudah Membuat CMS Website dari Nol
Trik Mudah Membuat CMS Website dari Nol Trik Mudah Membuat CMS Website dari Nol Rohi Abdulloh PENERBIT PT ELEX MEDIA KOMPUTINDO Trik Mudah Membuat CMS Website dari Nol Rohi Abdulloh 2016, PT Elex Media
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 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 terperinciLayar Halaman Laporan Soal Guru
320 Halaman ini akan ditampilkan jika guru mengklik menu Jadwal Mengajar. Disini guru dapat melihat jadwal mengajarnya. Selain itu guru dapat melihat jadwal ujian dengan mengklik link Jadwal Ujian pada
Lebih terperinciOtodidak Desain dan Pemrograman Website
Otodidak Desain dan Pemrograman Website Sanksi Pelanggaran Pasal 113 Undang-Undang Nomor 28 Tahun 2014 tentang Hak Cipta 1. Setiap Orang yang dengan tanpa hak melakukan pelanggaran hak ekonomi sebagaimana
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 terperinciBab 5. Cascading Style Sheet (CSS)
Bab 5. Cascading Style Sheet (CSS) Overview Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan sebuah dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan
Lebih terperinciElearning Perbanas Panduan Mahasiswa
Elearning Perbanas Panduan Mahasiswa Ed.. 20150320 Panduan Mahasiswa Pengguna elearning Perbanas Ed. 20150320 Daftar Isi Daftar Isi... 1 I. Login ke Elearning Perbanas... 2 II. Melihat Mata Kuliah Anda...
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 terperinciMateri Pertemuan 1. Pengenalan Web Design Bagian I : Dasar- dasar CSS. lilih suhaeri WATERFIRE DEV. Kelaskita.com
Materi Pertemuan 1 Pengenalan Web Design Bagian I : Dasar- dasar CSS lilih suhaeri WATERFIRE DEV. Kelaskita.com Pengenalan Web Design 1. Sejarah singkat tentang website Sejak awal kelahiran website di
Lebih terperinciSEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN ILMU KOMPUTER STMIK EL AHMA YOGYAKARTA
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN ILMU KOMPUTER STMIK EL AHMA YOGYAKARTA Nama : Tiva Hamsyah Nim : 12141387 Prodi : TI { malam } Tugas Dosen : UAS Web Statis : Wahyu Widodo Jl. Sisingamangaraja
Lebih terperinciPANDUAN. SisPenA S/M. Untuk Asesor. Sistem Informasi Penilaian Akreditasi Badan Akreditasi Nasional Sekolah / Madrasah
PANDUAN SisPenA S/M Untuk Asesor Sistem Informasi Penilaian Akreditasi Badan Akreditasi Nasional Sekolah / Madrasah 1 H a l a m a n Akreditasi Tutorial ini akan memberikan pemahman kepada Asesor bagaimana
Lebih terperinciDasar-dasar jquery. Disampaikan pada Kelas Daring BlankOn, 1 Oktober Fitra Aditya /
Dasar-dasar jquery Disampaikan pada Kelas Daring BlankOn, 1 Oktober 2012 Fitra Aditya fitra@di.blankon.in / http://fitraditya.wordpress.com/ Pendahuluan Sebelum mempelajari jquery, ada baiknya kita mengetahui
Lebih terperinciMODUL PRAKTIKUM PEMROGRAMAN WEB
MODUL PRAKTIKUM PEMROGRAMAN WEB Pengenalan PHP, HTML, CSS dan Javascript LABORATORIUM KOMPUTER UNIVERSITAS UBUDIYAH INDOENSIA MODUL PRAKTIKUM PEMROGRAMAN WEB 1. Review HTML 5 part 1 (Basic Attribute +
Lebih terperinciLANGKAH DEMI LANGKAH MEMBANGUN WEBSITE GRATIS DI
LANGKAH DEMI LANGKAH MEMBANGUN WEBSITE GRATIS DI DIPERSEMBAHKAN OLEH http://www.klikabadi.com Dipersembahkan Oleh : http://www.klikabadi.com 1 KATA PENGANTAR Mempunyai website sendiri merupakan suatu kebanggaan
Lebih terperinciDasar Pemrograman Web. Pemrograman Web. Adam Hendra Brata
Dasar Pemrograman Web Pemrograman Web Adam Hendra Brata Konsep Dasar Desain Web HTML CSS HTML HTML (HyperText Markup Language) Bahasa standar yang digunakan untuk menampilkan document web. Mengontrol tampilan
Lebih terperinciTag HTML Container. Nuryani Sofia Dewi / / Kelas A
Tag HTML Container Pada dasarnya, sebuah halaman web adalah teks file yang berisi petunjuk dalam bentuk kode-kode HTML(disebut tag) dan atribut. Tag adalah perintah Web browser yang nantinya ikut memformat
Lebih terperinciUntuk membuat Form pada halaman web, dapat dilakukan dengan cara menyisipkan terlebih dahulu area Form-nya dengan cara klik menu Insert Form Form.
MEMBUAT FORM Untuk membuat Form pada halaman web, dapat dilakukan dengan cara menyisipkan terlebih dahulu area Form-nya dengan cara klik menu Insert Form Form. Secara otomatis Ms. Frontpage akan menyisipkan
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 terperinciMembuat Carousel Dengan Bootstrap CDN
Membuat Carousel Dengan Bootstrap CDN Fitria Arnita 23@gmail.com Abstrak Bootstrap adalah framework CSS yang dibuat khusus para designer web. Bootstrap digunakan untuk membuat sebuah templates web atau
Lebih terperinciManual Seting Member Card Pada SLiMS 7 (Cendana)
Manual Seting Member Card Pada SLiMS 7 (Cendana) Komunitas SLiMS Kudus www.slimskudus.net SLiMS Community meet up adalah agenda tahunan berkumpul nya SDC (SLiMS Developer Community ) dengan semua Komunitas
Lebih terperinciPanduan Penyesuaian Tampilan WebKece
Panduan Penyesuaian Tampilan WebKece Setelah sukses melakukan registrasi dan masuk ke dashboard administrator website, saatnya menyesuaikan tampilan web sesuai dengan kebutuhan dan identitas personal atau
Lebih terperinciDesain Grafis. RAHMADY LIYANTANTO liyantanto.wordpress.com
Desain Grafis RAHMADY LIYANTANTO liyantanto@gmail.com liyantanto.wordpress.com Apa Desain Grafis..? Desain Grafis dapat diartikan sebagai proses pemikiran yang diwujudkan dalam gambar. >> Ruang Lingkup:
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 terperinciCara Upload Website Ke Internet
Cara Upload Website Ke Internet Halo :). kali ini saya akan berbagi tentang cara upload website agar website yang kita buat dapat di akses online melalui internet. diantara teman teman ada yang masih bingung,
Lebih terperinciHalaman Pada website builder sitepad
Tambahkan Background ke Halaman Pada website builder sitepad Menggunakan Top Up Row Setting 1) Buka Halaman yang ingin Anda edit dalam editor. Untuk melakukan itu Klik pada icon Edit pada salah satu halaman
Lebih terperinciPEMROGRAMAN BERBASIS WEB. Part 1,2 HTML. By Rolly Yesputra Sekolah Tinggi Manajemen Informatika dan Komputer Royal Kisaran, 2018
PEMROGRAMAN BERBASIS WEB Part 1,2 HTML By Rolly Yesputra Sekolah Tinggi Manajemen Informatika dan Komputer Royal Kisaran, 2018 Referensi HTML5, JavaScript, and jquery 24-Hour Trainer, Copyright 2015 by
Lebih terperinciDasar 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 terperinci