Responsive Layout dengan Bootstrap [Part 2]
|
|
- Sudirman Hartono Susanto
- 7 tahun lalu
- Tontonan:
Transkripsi
1
2 Responsive Layout dengan Bootstrap [Part 2] Oleh: Christian Rosandhy Salam jaco,, sebagai lanjutan dari tutorial Membuat Layout Responsive dengan Container Bootstrap, kali ini kita akan mencoba membuat layout responsive dengan grid sistem. Kalau di tutorial sebelumnya itu adalah dasar untuk membuat lebar layout website yang otomatis responsive, kali ini kita akan bermain dengan grid yang menyesuaikan diri untuk ukuran layar yang berbeda-beda. Salam jaco,, sebagai lanjutan dari tutorial Membuat Layout Responsive dengan Container Bootstrap, kali ini kita akan mencoba membuat layout responsive dengan grid sistem. Kalau di tutorial sebelumnya itu adalah dasar untuk membuat lebar layout website yang otomatis responsive, kali ini kita akan bermain dengan grid yang menyesuaikan diri untuk ukuran layar yang berbeda-beda. Layout yang akan kita buat kira-kira seperti ini : Sebelumnya, sebagai sedikit gambaran buat kita,, Bootstrap membagi lebar layar monitor menjadi 4 jenis : Extra Small (-xs-) : < 768px Small (-sm-) : 768px - 991px Medium (-md-) : 992px px Large (-lg-) : > 1200px Sehingga, dalam contoh di tutorial ini, saya hanya akan bermain di lebar monitor Extra Small (-xs-)dan Small (-sm-). Kolom small (-sm-) itu kan batasnya cuma sampai 991px tuh, terus utk layar lebih lebar lagi ntar gimana? Ga masalah.. Bootstrap itu pinter kok.. Ntar yang layar lebih lebar bisa mengatur diri sendiri dgn tetap rapi.. KECUALI, kalau kita pengen buat grid khusus untuk layar lebar.. Ntar pas dicoba-coba ngerti sendiri kok maksudnya.. Hhehe~ Yuk kita ke HTML dulu seperti biasa~ Kita bikin layout yang dibagi jadi 4 bagian : Header, Slideshow, Content, dan Footer. Masing-masing layout diberikan class.container didalamnya~ <!doctype html> <html lang="en">
3 <head> </head> <body> <meta charset="utf-8"> <title>latihan Layout Bootstrap Part 2</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/css_part2.css"> <header> </header> <div id="slideshow"> <div id="content"> <footer> </footer> </body> </html> Nah,, bagian responsive akan segera kita mulai sekarang~ Pertama-tama, di bagian header kita akan mengisi 2 bagian. Yaitu judul website disebelah kiri, dan navigasi di sebelah kanan untuk layar lebar (>=768px). Akan tetapi,, untuk layar kecil akan kita atur supaya judul dan navigasi menjadi item yang menumpuk kebawah. Sebelum lebih lanjut,, kita harus tau dulu kalau Bootstrap menyediakan jumlah grid dalam 1 baris sebanyak 12 grid. Kalau begitu, ketika kita ingin membagi 1 baris menjadi 2 bagian (judul dan navigasi),, kita harus membagi 12 grid tersebut untuk 2 objek tersebut.. Pembagiannya sih terserah,, boleh 4 grid judul + 8 grid navigasi,, boleh 5 grid judul + 7 grid navigasi, atau 6 grid judul + 6 grid navigasi nggak masalah,, asalkan jumlah 1 baris tsb PAS 12 GRID. <header> <div class="row"> <div class="col-sm-4"> <!--4 GRID UNTUK LAYAR SMALL (>=768PX)--> <a href="" class="judul"><h1>judul Website</h1></a>
4 <div class="col-sm-8"><!--8 GRID UNTUK LAYAR SMALL (>=768PX)--> <nav> <ul class="nav nav-pills nav-justified"> <!--CLASS BAWAAN YG DISEDIAIN BOOTSTRAP,,--> <li><a href="">home</a></li> <li><a href="">product</a></li> <li><a href="">article</a></li> <li><a href="">contact Us</a></li> </ul> </nav> </header> Kasi CSS dikit yuk biar lebih rapi~ *{margin:0px auto;} body{background:#f3f3f3; font-family:calibri, verdana, sans-serif; line-height:1.5em;} /*layout*/ header{background:#e7e7e7; padding:10px; border-bottom:4px solid #22a7a7;} header h1{line-height:1em; margin:auto;} Wuih,, tumben-tumbenan CSSnya cuma dikit? Ya jelas,, bootstrap selain nyediain sistem grid juga nyediain komponen lain seperti button, navigasi, form, alert, dan sebagainya.. Sehingga kita cuma perlu sedikit menghafal nama class yang udah disediain bootstrap aja untuk makainya.. Dan pada akhirnya,, CSS hanya kita pakai utk nambah-nambahin sedikit background, warna, atau font sesuai keinginan kita saja.. Tampilannya sampai sini sudah seperti ini nih : Kalau lebar layarnya kita kecilin pun hasilnya juga sudah rapi.. secara bootstrap bener-bener pinter sih~ bagian slideshow kita lewatin aja, karena di tutorial ini saya nggak bikin slideshow.. kasi aja background sama height biar keliatan berisi~ #slideshow{background:#444; height:400px;} Sekarang,, di dalam layer content ada 2 jenis baris nih.. ada yg 2 kolom, ada yg 1 kolom.. Caranya
5 tetep sama kok~ <div id="content"> <div class="row"> <div class="col-sm-6"><!--grid 6 DI LAYAR SMALL--> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute... <div class="col-sm-6"><!--grid 6 DI LAYAR SMALL--> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sudah terbagi 2 kolom bukan? Nah.. Misalkan kita ingin untuk komputer dgn layar paling lebar (>1200px) pembagian gridnya bukan 6-6 seperti contoh diatas.. tapi grid Gimana caranya? Caranya simpel,, cukup tambahin class baru di <div class="col-sm-6"> yang sudah ada tadi.. Aturan penamaan gridnya juga sama, seperti ini : col-<kode lebar>-<jumlah grid> Anggaplah kode lebar yang ingin kita pakai adalah utk layar large (-lg-), maka kodenya akan menjadi seperti ini : <div id="content"> <div class="row"> <div class="col-sm-6 col-lg-8"><!--grid 6 DI LAYAR SMALL + GRID 8 DI LAYAR LEBAR--> magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute... <div class="col-sm-6 col-lg-4"><!--grid 6 DI LAYAR SMALL + GRID 4 DI LAYAR LEBAR-->
6 magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Dan hasil finalnya adalah seperti ini.. Semoga tutorial ini dapat bermanfaat untuk kita semua,, mohon maaf kalau masih kurang dapat dipahami,, komentar, masukan, pertanyaan, dan saran saya terima~ terima kasih banyak atas perhatiannya.. Tentang Penulis Christian Rosandhy
Daftar Isi Elemen Estetis Tumpal Formulasi Tumpal Sebagai Elemen Estetis
Daftar Isi 2 3 4 5 6 7 8-14 15-16 17-18 19-20 21-23 24 25 26-27 Sejarah Jakarta Logo Logo Utama Rumus Skala Logo Logo Positif dan Diapositif Ukuran Logo Panduan Warna Varian Logo Perlakuan Logo Typeface
Lebih terperinciMembuat Animasi Loading Bubble dengan Full CSS
Membuat Animasi Loading Bubble dengan Full CSS Oleh: Christian Rosandhy Masih bermain dengan animasi,, sekarang kita akan belajar membuat sendiri animasi bubble loading dengan bantuan CSS3. Di tutorial
Lebih terperinciVOLUME I No 2 Juli 2013 Halaman
Community Health VOLUME I No 2 Juli 2013 Halaman 112-121 Artikel Penelitian Faktor Faktor Yang Berhubungan Dengan Tingkat Keterlambatan Pengembalian Berkas Rekam Medis Dari Instalasi Rawat Inap Ke Instalasi
Lebih terperinciPedoman Penulisan Laporan PKL Dosen Pembimbing : Ratri Enggar Pawening
2013 Pedoman Penulisan Laporan PKL Dosen Pembimbing : Ratri Enggar Pawening Pedoman penulisan laporan PKL ini bertujuan untuk menyamakan format penulisan, khususnya bagi kelompok mahasiswi yang saya bimbing
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 terperinciLOGO FULL COLOR BEBERAPA CONTOH LOGO DPD-PDJI DEWAN PENGURUS DAERAH PROVINSI JAWA BARAT DEWAN PENGURUS DAERAH PROVINSI BALI
BR AND IDENTIT Y GUIDELINES LOGO FULL COLOR C M Y 0 0 0 100 0 K 100 100 0 0 0 0 50 BEBERAPA CONTOH LOGO DPD-PDJI PROVINSI JAWA BARAT PROVINSI BALI PROVINSI JAWA TIMUR PROVINSI D.I. YOGYAKARTA 1 KETENTUAN
Lebih terperinciMEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP
MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP NURLITA nurlita.icha@gmail.com Abstrak Kali ini kita akan membahas cara membuat layout dengan container bootstrap. Bootstrap adalah suatu framework front-end yang
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 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 terperinciRWD (Responsive Web Design) dengan Grid System Bootsrtap
RWD (Responsive Web Design) dengan Grid System Bootsrtap Oleh: Jaf Al Azam RWD (Responsive Web Design) dengan Grid System Bootsrtap Bootstrap merupkakan Framework CSS yang sedang Booming tahun 2015 ini,
Lebih terperinciXHTML Part 1. Wahyu Catur Wibowo Amalia Zahra
XHTML Part 1 Wahyu Catur Wibowo Amalia Zahra wibowo@cs.ui.ac.id http://wcw.cs.ui.ac.id Well-formed XHTML mengadopsi well-formness dari XML Penulisan elemen XHTML dikatakan well-formed apabila: (a) dalam
Lebih terperinciHenHash. Fungsi Hash berdasarkan Henon Map
HenHash Fungsi Hash berdasarkan Henon Map Wiwit Rifa i (13513073) Program Studi Teknik Informatika Sekolah Teknik Elektro dan Informatika, Institut Teknologi Bandung Jalan Ganesha 10-12, Bandung 40132,
Lebih terperinci64-DIB : 64-Bit Difusing Invers Block
64-DIB : 64-Bit Difusing Invers Block Moch Ginanjar Busiri 13513041 Teknik Informatika Institut Teknologi Bandung gbusiri@gmail.com Abstrak Pada paper ini diajukan sebuah algoritma yang merupakan pengembangan
Lebih terperinciResponsive Sidebar dengan Bootstrap
Responsive Sidebar dengan Bootstrap Oleh: Boy Panjaitan Hai, Berjumpa lagi dengan saya Boy Panjaitan. kali ini saya akan membagikan tutorial tentang CSS lagi.pernahkah anda melihat website dengan sidebar
Lebih terperinciMembuat Responsive Layout dengan CSS Media Query
Membuat Responsive Layout dengan CSS Media Query Oleh: Christian Rosandhy Di tutorial kali ini kita akan belajar membuat layout CSS Responsive dengan bantuan CSS Media Query, supaya website yang kita buat
Lebih terperinciMembuat Scrollspy Dengan Bootstrap
Membuat Scrollspy Dengan Bootstrap Oleh: Hasyemi Rafsanjani Asyari Hai JagoCodingers. Apa kabar? Pernah ngga kalian membuka sebuah website lalu ada menu link navigasi yang akan terupdate atau terlihat
Lebih terperinciPerbandingan Ketahanan Algoritma LSB dan F5 dalam Steganografi Citra
Perbandingan Ketahanan Algoritma LSB dan F5 dalam Steganografi Citra Ricardo Pramana Suranta / 13509014 1 Program Studi Teknik Informatika Sekolah Teknik Elektro dan Informatika Institut Teknologi Bandung,
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 terperinciTutorial Layouting : Membuat Grid Sama Tinggi
Tutorial Layouting : Membuat Grid Sama Tinggi Oleh: Christian Rosandhy Salah satu masalah umum penggunaan Grid itu adalah mengatur tingginya biar rapi. Untuk bisa membuat grid yang benar-benar rapi dan
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 terperinciMembuat Desain Custom Input (Checkbox + Radio Button) pada Form
Membuat Desain Custom Input (Checkbox + Radio Button) pada Form Oleh: Christian Rosandhy Bosen lah ya liat checkbox dan radio button di HTML yang gitu-gitu aja? Di tutorial kali ini kita akan belajar mendesainnya
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 terperinciMendesain Custom Tabel dengan Pseudo Element CSS
Mendesain Custom Tabel dengan Pseudo Element CSS Oleh: Christian Rosandhy Masih dengan CSS, kali ini kita akan belajar mendesain tabel dengan CSS, sekalian belajar 3 pseudo-element yang akan sangat berguna
Lebih terperinciPlugin Javascript Bootstrap 2
Plugin Javascript Bootstrap 2 Oleh: ricky orlando napitupulu Salam bro/sis :) Setelah sebelumnya saya memberikan tutorial tentang plugin JS jquery yang super keren. Nah kini saya tambahin lagi lanjutanya.
Lebih terperinciBAB II KOMPONEN HTML LANJUT
BAB II KOMPONEN HTML LANJUT A. KOMPETENSI DASAR Memahami komponen-komponen HTML lanjutan. Memahami kegunaan dan cara penerapan komponen HTML. Mampu memanfaatkan komponen-komponen HTML untuk membuat halaman
Lebih terperinciBAB I DASAR-DASAR HTML
BAB I DASAR-DASAR HTML A. KOMPETENSI DASAR Memahami struktur dasar dokumen HTML dan HTML5 Mampu membuat dokumen HTML yang baik dan benar. Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi.
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 terperinciWarta Jemaat, 24 Mei 2015
Warta Jemaat, 24 Mei 2015 INFORMASI IBADAH, PELAYANAN dan KEGIATAN 1. Format isian Data Dasar keluarga sudah dijalankan, diharapkan kerjasama dengan jemaat sekalian untuk dapat mengisinya dengan benar
Lebih terperinciMembuat Tempelate Menggunkanan Boostrap
Membuat Tempelate Menggunkanan Boostrap Jihadul Akbar, S.Kom PUSTIK STMIK LOMBOK 3/30/2017 Tentang Modul Bootstrap adalah kerangka front-end yang paling populer dalam waktu terakhir. Sangat ringan, handal
Lebih terperinciAlgoritma Cipher Blok Mats
Algoritma Cipher Blok Mats Algoritma Cipher Blok dengan Fungsi Acak Modulus Ramandika Pranamulia 13512078 Teknik Informatika Institut Teknologi Bandung Bandung,Indonesia ramandika@students.itb.ac.id Mamat
Lebih terperinciMembuat Display Produk dalam Layout Box 4 Kolom
Membuat Display Produk dalam Layout Box 4 Kolom Oleh: Debrian Ruhut Saragih Selamat pagi Sobat sekalian, saat ini kita banyak menemukan toko online bertebaran di Internet. Saya sering memperhatikan bagaimana
Lebih terperincimembuat website dengan bootstrap v3.0.0
membuat website dengan bootstrap v3.0.0 Oleh: reski hamsah Belakangan ini, bootstrap telah merilis versi terbarunya dengan berbagai tawaran menarik mulai dari desain, fitur, dan customizer terbaru untuk
Lebih terperinciLAPORAN AKHIR M.K INTERAKSI MANUSIA DAN KOMPUTER SEMESTER GENAP 2007/2008. Kajian Situs com
LAPORAN AKHIR M.K INTERAKSI MANUSIA DAN KOMPUTER SEMESTER GENAP 2007/2008 Kajian Situs http://www.riauprovince. com oleh: Febrionna Fenrizal G64051015 (http://fiona42.wordpress.com) INSTITUT PERTANIAN
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 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 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 terperinciTutorial CSS Desain Layout 1 Dengan HTML5 dan CSS
Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS Oleh: Ardie Jocong pada tutorial ini saya akan mencoba menjelaskan Bagaimana Membuat Desain Layout Website dengan Menggunakan HTML5 dan CSS.. Okeh Langsung
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 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 terperinciWEB STATIS MEMBUAT TUTORIAL PENGGUNAAN FRAMEWORK CSS
WEB STATIS MEMBUAT TUTORIAL PENGGUNAAN FRAMEWORK CSS Oleh : EMA SETYA KARISNA TI. 12141391 A. PENGERTIAN FRAMEWORK CSS Bootswatch.com Bootswatch merupakan penyedia tema berbagai macam bootstrap dengan
Lebih terperinciCara Memasukan Font Baru Ke Dalam Web Menggunakan CSS
Cara Memasukan Font Baru Ke Dalam Web Menggunakan CSS Oleh: Rahmat Menghias blog/web boleh saja tetapi tentunya juga harus memperhatikan kenyamanan visitor yang akan berkunjung ke web anda. Oleh sebab
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 terperinciCAPAIAN KINERJA MUTU FAKULTAS dan PPs TAHUN Badan Penjaminan Mutu. Universitas Negeri Semarang
CAPAIAN KINERJA MUTU FAKULTAS dan TAHUN 6 Badan Penjaminan Mutu Universitas Negeri Semarang Universitas Negeri Semarang BIDANG AKADEMIK Program Studi Status Akreditasi A Your Text here Lorem ipsum dolor
Lebih terperinciTHE SUITES TOWER. The Inspiring Jewel in Pantai Indah Kapuk
THE SUITES TOWER The Inspiring Jewel in Pantai Indah Kapuk THE SUITES TOWER The Most Advanced Office Space in North Jakarta Setiap lantai di The Suites Tower, sesuai namanya, merupakan perwujudan dari
Lebih terperinciMembuat Tooltip Sendiri dengan CSS
Membuat Tooltip Sendiri dengan CSS Oleh: Christian Rosandhy Terkadang liat tooltip standar bawaan browser itu terlalu membosankan ya,, disini kita belajar membuat tooltip tersebut dengan bantuan CSS supaya
Lebih terperinciMembuat Smooth Scrolling dalam 1 halaman dengan JQuery
Membuat Smooth Scrolling dalam 1 halaman dengan JQuery Oleh: Christian Rosandhy Segala sesuatu yang smooth itu tentunya asik dong ya? Begitu juga dengan website kita.. Kita bisa bikin animasi scroll dalam
Lebih terperinciYayan Mulyana
Yayan Mulyana CSS merupakan materi yang WAJIB kita kuasai sebagai web Designer, karena dengan CSS kita bisa membangun sebuah website dengan rancangan desain yang efektif dan fleksibel
Lebih terperinciTutorial Layouting CSS Part 1
Tutorial Layouting CSS Part 1 Oleh: Cecep Yusuf Pada tutorial kali ini, mari kita belajar tentang layouting HTML dengan CSS, sebenarnya tutorial ini bersumber dari artikel saya juga di situs harian.cheyuz.com,
Lebih terperinciMembuat Simpel Site HTML Layout Menggunakan Tag div
Membuat Simpel Site HTML Layout Menggunakan Tag div Oleh: Yudhistira Bayu W Ya, setelah saya memberikan Tutorial Tutorial Simpel HTML pada sebelumnya, Kali Ini saya akan memberikan Cara Membuat Simpel
Lebih terperinciMembuat Top Fixed Responsive Navbar Twitter Bootstrap
Membuat Top Fixed Responsive Navbar Twitter Bootstrap Oleh: ricky orlando napitupulu Salam bro and sis :), selamat datang di tulisan tutorial pertama ane ni, makasi da mau singga disini ye walopun kesasar
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 Membuat Layout Website Sederhana dengan HTML dan CSS
Tutorial Membuat Layout Website Sederhana dengan HTML dan CSS Oleh: I Wayan Dharmana Halo kawan, apa kabar? Semoga di awal bulan Ramadhan ini kawan pembaca tetap semangat untuk mencari ilmu. Nah, pada
Lebih terperinciMembuat Custom Button Captcha dengan Font Awesome
Membuat Custom Button Captcha dengan Font Awesome Oleh: Christian Rosandhy Captcha adalah bagian form yang biasa digunakan untuk memvalidasi user sebelum mengirim form. Kalau captcha pada umumnya mewajibkan
Lebih terperinciBAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM
BAB IV IMPLEMENTASI DAN PENGUJIAN SISTEM 4.1. Implementasi Pada bab ini akan dilakukan implementasi dan pengujian terhadap sistem yang baru. Tahapan ini dilakukan setelah perancangan selesai dilakukan
Lebih terperinci2. CARA MENGGUNAKAN FRAMEWORK CSS GETBOOTSTRAP.COM/232/ Bagaimana Cara Menggunakan Bootstrap?
NAMA : SITI NURWANTI NIM : 12141385 MATA KULIAH : PEMROGRAMAN WEB STATIS 1. PENGERTIAN FRAMEWORK CSS GETBOOTSTRAP.COM/232/ Bootstrap merupakan sebuah framework CSS,yang menyediakan kumpulan komponen-komponen
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 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 terperinciPage 1 of 8 Tutorial Font Awesome UTS Stmik El Rahma
Page 1 of 8 Tutorial Font Awesome Nama : Faqum Alf a Dwiyanto NIM : 12141368 Prodi : TI / I Buat tutorial cara penggunaan suatu framework CSS yang diimplementasikan pada layout semantik html. Tulislah
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 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 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 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 terperinciCSS Eksternal. Instruktur: Arif Nurwidyantoro
CSS Eksternal Instruktur: Arif Nurwidyantoro Definisi CSS, selain diletakkan dalam file yang sama dengan file HTML, dapat juga diletakkan pada file terpisah. Pernyataan untuk menyambungkan file HTML dengan
Lebih terperinci[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap
[SANGAT MUDAH] Cara Membuat Tab dengan Bootstrap Oleh: Arinadi Nur Rohmad Asalamualaikum.. Bagi yang seorang yang belum paham betul JQuery seperti saya, membuat Tab adalah pekerjaan yang cukup sulit..
Lebih terperinciBUKU PANDUAN LOGO / LOGO GUIDELINE
BUKU PANDUAN LOGO / LOGO GUIDELINE BUKU PANDUAN LOGO / LOGO GUIDELINE DAFTAR ISI TABLE OF CONTENT BAB 1 / CHAPTER 1 01-01 Cover 01-02 Daftar isi / Table of Content BAB 2 / CHAPTER 2 PANDUAN LOGO / LOGO
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 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 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 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 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 terperinciNama: ahmad edi purwanto. Nim: Tugas uts web statis. Tutorial cara penggunaan suatu framework CSS
Nama: ahmad edi purwanto Nim:12111027 Tugas uts web statis. Tutorial cara penggunaan suatu framework CSS Pengertian dasar dari Framework itu sendiri adalah; sebuah konsep yang memiliki struktur serta terorganisir
Lebih terperinciDaftar Isi. Kata Pengantar Pendahuluan. i ii. iii. Daftar Isi
Kata Pengantar Seiring dengan dinamika BKKBN sebagai lembaga yang selalu relevan dengan perkembangan bangsa dari dulu hingga kini, maka revitalisasi identitas institusi (logo) adalah salah satu bagian
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 terperinciPRAKTIKUM PEMROGRAMAN WEB MODUL 7 TWITTER BOOTSTRAP
PRAKTIKUM PEMROGRAMAN WEB MODUL 7 TWITTER BOOTSTRAP Disusun oleh: (Nama) (NIM) PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH JEMBER 2015 Modul 7 Twitter Bootstrap I. Tujuan:
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 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 terperinci1. Apa itu Bootstrap?
Pendahuluan Dalam rangka memenuhi tugas mata kuliah Web Statis, Prodi TI, STMIK EL Rahma, dengan topik dan konten yang telah ditetapkan, yaitu mengenai Bootstrap. Maka saya mengekspresikan sebuah pemahaman
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 terperinciPublish: 7 Juni 2012 Author & Copyright: Johan Status: FREE tutorial
Kumpulan Tutorial dan belajar ilmu website mulai dari hosting dan coding seperti belajar HTML, CSS, Javascript, Javascript, JQuery, ASP.Net hingga SEO dan Desain web dengan Dreamweaver dan Photoshop untuk
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 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 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 terperinciTUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik
TUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik www.ilmuwebsite.com Bagian 19. Membuat Halaman Website Minimalis 1 Bagian
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 terperinci108
LAMPIRAN 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 KODE PROGRAM 1. Script Konsultasi 1.
Lebih terperinciMembuat Layout Desain Awal dengan Photoshop
2 Websiteku Membuat Layout Desain Awal dengan Photoshop jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut: Width : 700 pixel Height
Lebih terperinciDesign Web Dengan 2 Kolom
Design Web Dengan 2 Kolom 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 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 terperinciTUTORIAL RUBY ON RAILS
TUTORIAL RUBY ON RAILS TEKNIK INFORMATIKA-UNIV.NASIONAL Oleh: Slamet nurhadi 083112706450100 UNIVERSITAS NASIONAL DAFTAR ISI: 1. MEMBUAT PROYEK BARU DENGAN SETINGAN DATABASE MySQL 2. MEMBUAT HALAMAN WEB
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 terperinciGroup 5 - Simulation Modelling Industry. Lecture : Paulus A.C Tangkere
Group 5 - Simulation Modelling Industry Lecture : Paulus A.C Tangkere AL FAUZAN - 1122003014 FIDYA AYU SAOMI - 1122003013 KIKY RIZKY APRILIA - 1122003027 M. FAJAR SIDDIQ - 11220030xx Slide Master Your
Lebih terperinciPermasalahan Tambahan
Permasalahan Membuat tampilan web yang bagus dan konsisten itu susah dan butuh waktu lama Untuk SEO (Search Engine Optimization) yang lebih baik, hanya gunakan tag dan html untuk menyimpan isi web.
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 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 terperinciListing Program. Halaman Home(index.php) <?php require_once'config.php';?>
Listing Program Halaman Home(index.php)
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 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 terperinci2. Tujuan: memungkinkan kita menjelajah internet dan melihat halaman web yang menarik.
HTML 1. Definisi: Hypertext Markup Language a. Merupakan protokol yang digunakan untuk mentransfer data atau document dari web server ke browser kita 2. Tujuan: memungkinkan kita menjelajah internet dan
Lebih terperinciBlueprint CSS Framework
Nama : Reza Bayu Permana NIM : 12141378 Prodi : Teknik Informatika (Malam) Mata Kuliah : Web Statis Blueprint CSS Framework Blueprint Css adalah sebuah framework CSS. Herankan kenapa css pun memiliki framework.
Lebih terperinci