Tutorial Layouting : Membuat Grid Sama Tinggi
|
|
- Yuliani Santoso
- 6 tahun lalu
- Tontonan:
Transkripsi
1
2 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 sama tinggi, tentunya ada teknik-tekniknya yang simpel.. Disimak aja gih~ :D Salam, sobat jagocoding.. masih di hari yang sama saya mau share tentang teknik layouting CSS lagi.. Teknik layouting yang akan kita bahas adalah tentang Grid. Tentunya kita yang suka pake bootstrap nggak asing lagi dong ya, dan dalam penggunaan grid itu sendiri kadang ada beberapa tantangan berupa hasil yang nggak sesuai seperti yang kita inginkan. Salah satunya seperti ini: Ada yang pernah gridnya model seperti itu? Ya, itulah salah satu masalah kacrut ketika berurusan dengan grid.. Karena itu, kali ini saya akan share 3 teknik layouting untuk membuat grid menjadi sama tinggi. Cekidot~ Teknik 1 : Fix Height Pertama-tama salin dulu script HTML ini, (jangan lupa download bootstrapnya juga) <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>membuat Grid sama tinggi</title> <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="style.css">
3 </head> <body> <div id="wrapper"> <div class="container"> <h1 align="center">membuat Grid Sama Tinggi</h1> <hr> <h2>teknik 1 : Fix Height</h2> <div class="row"> <div class="txt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, nisi, adipisci sunt nemo repellat consequuntur natus adipisci sunt nemo repellat consequuntur natus deserunt mollitia officia unde aliquid sint inventore voluptaci sunt nemo repellat consequuntur natus deserunt mollitia officia unde aliquid sint inventore voluptate fugiat reiciendis ullam cumque voluptatem illum! <div class="txt"> Lorem ipsum dolor sit amet, consectetur adipisicing pariatur, cupiditate et dolores debitis laudantium possimus itaque incidunt error nesciunt ipsum ad dolore quibusdam. Ducimus, fugit. <div class="txt"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, recusandae, rem, consequuntur, sequi obcaecati cum distinctio assumenda aut omnis voluptatibus animi cupiditate delectus minus ab numquam reprehenderit asperiores nulla nihil? <!--KASI JARAK DISINI--> <!--TEKNIK SELANJUTNYA DIBAHAS DISINI~--> </body> </html> Dari nama tekniknya sendiri kayaknya udah cukup jelas lah ya, Fix Height itu artinya teknik memberikan nilai tinggi yang sama pada masing-masing konten grid. CSSnya begini ~ *{margin:0px auto;}
4 #wrapper{padding:20px;} /*teknik 1 : fix height*/.txt{ height:180px; /*atur angkanya sampe dirasa udah pas*/ background:#c73b2f; padding:10px; color:#fff;} Selesai. Hasilnya jadi begini deh : Kelebihan teknik ini cuma satu, SIMPEL. Sayangnya teknik satu ini sifatnya bener-bener statis. Jadi kalo suatu saat konten didalam akan bertambah lagi, ya CSSnya harus kita ubah lagi.. Maka dari itu, teknik fix height ini sangat nggak disarankan untuk dipake ke konten yg dinamis. Teknik 2 : Display Flex Seperti yang pernah saya bilang di tutorial saya dulu tentang macam-macam display ( Display : Flex adalah salah satu display yang sangat powerful. Kita bisa bikin layout yang benar-benar rapi dan mudah dengan display flex ini. Buat liatnya, lanjutin lagi HTML kita di bagian yg udah ditandain tadi ~ <hr> <h2>teknik 2 : Display Flex</h2> <div class="flex"> <div class="isi"> Consequuntur, mollitia, earum, vero nostrum a alias laudantium commodi temporibus dolorem nisi quam quasi incidunt id molestias nesciunt veritatis ratione. Sit, eos. <div class="isi">
5 Numquam, ut quo voluptatibus obcaecati deserunt consectetur veritatis minima dolorem odio porro d. Numquam, ut quo voluptatibus obcaecati deserunt consectetur veritatis minima dolorem odio porro delectus voluptatum vitae ea. Ducimus, sequi quam corrupti aperiam velit! <div class="isi"> Non, vel, deleniti, criosam eum laudantium amet incidunt cumque accusamus sapiente ducimus ea quod praesentium. <!--KASI JARAK LAGI BUAT NEXT TEKNIK--> Oiya,, untuk display flex ini salah satu keunggulannya udah keliatan dari HTMLnya,, nggak perlu pake Bootstrap. Asalkan deklarasi di CSSnya bener, hasil akhirnya nanti benar-benar rapi kok biarpun nggak pake grid.. CSSnya gini nih~ /*teknik 2 : display flex*/.flex{ display:flex; /*Deklarasi display flex + antek2nya*/ -moz-display:flex; -webkit-display:flex; -khtml-display:flex; -o-display:flex; justify-content:space-between;} /*auto margin antar konten didalamnya*/.flex.isi{ width:30%; /*lebarnya terserah, dikira-kira aja*/ background:#ffbb27; margin:10px; padding:10px;} Hasilnya begini nih~
6 Gimana? Nggak kalah rapi juga kan dengan teknik 1 tadi? Bahkan nggak kalah simpel juga.. Konsepnya sih cuma display:flex aja, yang bikin panjang cuma nambahin prefix2nya aja.. Tapi biarpun begitu, teknik flex ini juga punya kelemahan.. Yups, berhubung display:flex itu punyanya CSS3, artinya ya browser-browser jadul nggak akan support, dan menganggap sebagai display:block biasa. Keren, tapi rada miris ya.. Tapi kalo emang suka banget sama CSS3, atau target website kita bukan untuk Internet Explorer browser tua sih ya nggak apa-apa, itung-itung buat belajar kan? :D Last teknik nih ~ Teknik 3 : Tricky Margin Cihuyy,, teknik ketiga ini cukup umum dipake, biarpun tricky tapi asik kok.. balik ke HTML lagi ye~ <hr> <h2>teknik 3 : Tricky Margin</h2> <div class="row equal"> <div class="content"> Nam, iure, quos aut voluptates cum aliquam hic blanditiis deserunt! Nemo, molestias iure nobis paria. <div class="content"> Sequi, deleniti, molestias, amet, pariatur libero tempora nulla non soluta repudiandae eveniet rem at ea veniam cumque maxime eaque qui eligendi officiis at ea veniam cumque maxime eaque qui eligendi officiis?
7 <div class="content"> Ab, molestias, molestiae, reiciendis, omnis necessitatibus a nihil mollitia pariatur nemo reprehenderit repellendus similique dolores tempora. Velit debitis amet saepe laboriosam voluptatum. Nah,, di teknik tricky margin ini langkah pertamanya adalah menyisipkan class tambahan di class row. Class tersebut yang menandakan bahwa 1 baris kesampinglah yang akan kita rapikan. Simak CSSnya~ /*teknik 3 : tricky margin*/.equal{ position:relative; overflow:hidden; }.equal.content{ background:#68b200; padding:10px; position:relative; margin-bottom:-9989px; /*KUNCI UTAMA TRIKNYA NIH*/ padding-bottom:9999px;} Jadi lah seperti ini~ Yak,, tetap dengan hasil yang nggak kalah rapi dengan teknik-teknik sebelumnya. Teknik tricky margin ini cara kerjanya adalah dengan memberikan nilai padding pada masing-masing grid yang sangat besar (9999px), akan tetapi diimbangi juga dengan margin yang sangat minus (-9999px), sehingga dari segi posisi ga ada yang berubah. Setelah itu, di layer row utamanya diberikan
8 overflow:hidden; supaya kelebihan sekian ribu pixelnya yang bakalan muncul jadi ga kelihatan. Cukup tricky, tapi trik ini aman kok di browser-browser pada umumnya. Dari segi fleksibilitas juga nggak kalah dinamis dengan teknik no 2 tadi.. Kalaupun ada kelemahannya, paling cuma satu dan agak minor.. Coba aja di class.content tadi dikasi tambahan border-radius:20px; terus liat apa yg terjadi~ Nah, yang akan terjadi ya seperti gambar diatas ini,, Karena teknik ini sifatnya menyembunyikan pixel-pixel yang kelebihan, maka bagian bawah yang pengennya kita kasi border-radius jadi nggak kelihatan juga.. Pun kita maksa pengen kasi border radius di grid itu, ya bisa-bisa aja sih, bikin pake CSS pseudo-element ::after aja kali.. :v Sekian teknik-teknik manipulasi tinggi grid yang bisa saya share kali ini.. Diantara ketiga teknik diatas sih yang paling saya saranin ya yang no 3 itu, tapi teknik lainnya juga boleh2 aja kok.. Makasih buat perhatiannya, CMIIW.. Tentang Penulis Christian Rosandhy
Membuat 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 terperincian exhibition a movement cushcush gallery Jl. Teuku Umar Gg. Rajawali no. 1A Denpasar - Bali
\ an exhibition a movement cushcush gallery Jl. Teuku Umar Gg. Rajawali no. 1A Denpasar - Bali. +62 361 242034 \ DenPasar2017 adalah pameran bersama yang merupakan bagian dari rangkaian program CushCush
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 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 terperinciResponsive Layout dengan Bootstrap [Part 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
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 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 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 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 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 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 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 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 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 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 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 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 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 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 terperinciCara membuat elemen agar bisa didrag
Cara membuat elemen agar bisa didrag Oleh: Khaerul Amin Website yang indah tidak hanya dilihat dari tampilannya saja, akan tetapi dilihat juga dari berbagai fitur, animasi, functionality, interaksi dan
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 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 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 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 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 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 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 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 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 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 terperinciMembuat dan Menampilkan QR Code secara Dinamis dengan PHP
Membuat dan Menampilkan QR Code secara Dinamis dengan PHP Oleh: Christian Rosandhy QR Code Everywhere!! Mungkin di website / proyek kita juga perlu dibikinin juga tuh biar nggak kalah keren.. Nggak susah
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 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 terperinciDaftar 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 terperincibuat Lightbox mu sendiri dengan jquery
buat Lightbox mu sendiri dengan jquery Oleh: putra surya herlambang assalamualikum wr wb. apakah kamu pernah melihat gambar pada website yang ketika kamu klik lalu akan muncul suatu kotak besar yang juga
Lebih terperinciMembuat 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 terperinciBAB VI DESAIN WEB RESPONSIF
BAB VI DESAIN WEB RESPONSIF A. KOMPETENSI DASAR Memahami konsep dasar desain halaman web responsif Mampu menerapkan konsep desain web responsif ke dalam aplikasi Mampu menghasilkan desain aplikasi web
Lebih terperinciCSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) Instruktur: Arif Nurwidyantoro Intro Cascading Style Sheets (CSS) digunakan untuk mendefinisikan bagaimana sebuah elemen HTML ditampilkan. Sebuah elemen HTML dapat ditampilkan
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 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 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 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 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 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 terperinciPEDOMAN KERJA PRAKTEK DAN MAGANG. Teknik Informatika FTI UAJY
PEDOMAN KERJA PRAKTEK DAN MAGANG Teknik Informatika FTI UAJY BAB I PENDAHULUAN 1.1. Kerja Praktek Kerja Praktek adalah sebuah mata kuliah yang ada di dalam kurikulum Strata 1 Program Studi Teknik Informatika
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 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 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 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 terperinciKonfigurasi Dasar Debian Wheezy Sebagai Server
Konfigurasi Dasar Debian Wheezy Sebagai Server coretanbocahit.blogspot.com Pada awal tutorial kali ini saya akan membahas konfigurasi-konfigurasi dasar yang nantinya kita perlukan untuk konfiugurasi lanjutan
Lebih terperinciDasar-dasar HTML 1. Oleh: Cecep Yusuf
Dasar-dasar HTML 1 Oleh: Cecep Yusuf Apa yang harus dipelajari jika kita ingin membuat sebuah website? Yup, jawabannya adalah HTML. Yuk kita intip HTML itu seperti apa. Pada suatu hari, teman saya Irvan
Lebih terperinciMembuat Login Pop Up Dengan JqueryUI
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
Lebih terperinciMENGINSTALL EYE OS (OPERATING SYSTEM BERBASIS WEB)
MENGINSTALL EYE OS (OPERATING SYSTEM BERBASIS WEB) Eye Os adalah salah satu operating system berbasis web. Yang dimaksud OS berbasis web adalh untuk menjalankannya kita tidak perlu mempartisi harddisk
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 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 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 terperinciMembuat Form Dinamis dengan HTML & Javascript.
Membuat Form Dinamis dengan HTML & Javascript. Oleh: d-newbie Assalamualaikum wr.wb. Form tentunya sudah tidak asing lagi bagi para developer web, element html yg satu ini seolah-olah merupakan element
Lebih terperinciTHE MOST FUNDAMENTAL OF OUR CONDUCT INTEGRITY. ACCOUNTABILITY. TRANSPARENCY LAPORAN TAHUNAN 2008 ANNUAL REPORT
THE MOST FUNDAMENTAL OF OUR CONDUCT INTEGRITY. ACCOUNTABILITY. TRANSPARENCY LAPORAN TAHUNAN 2008 ANNUAL REPORT INTEGRITY Integrity defines the perceived consistency of actions, values, methods, measures
Lebih terperinciMODUL III CASCADING STYLE SHEET
MODUL III CASCADING STYLE SHEET A. TUJUAN Memahami struktur dasar dokumen HTML. Mampu membuat dokumen HTML yang baik dan benar. Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi. B. PETUNJUK
Lebih terperinciFungsi Require dan Include Donny Reza, S.Kom Aplikasi IT-2 Teknik Informatika Fakultas Teknik dan Ilmu Komputer Universitas Komputer Indonesia
Fungsi Require dan Include Donny Reza, S.Kom Aplikasi IT-2 Teknik Informatika Fakultas Teknik dan Ilmu Komputer Universitas Komputer Indonesia Di dalam PHP terdapat fungsi yang dapat digunakan untuk menyisipkan/menyertakan
Lebih terperinciDASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN
DASAR-DASAR CSS DASAR-DASAR CSS 2015 A. PENGENALAN CSS merupakan kependekan dari Cascading Style Sheet yaitu suatu skrip yang digunakan untuk mempercantik tampilan HTML atau mengatur bagaimana elemen HTML
Lebih terperinciMODUL 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 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 terperinciCSS Lanjut Pertemuan - 5
CSS Lanjut Pertemuan - 5 Semester Ganjil 2009/2010 CSS Lanjut Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML. contoh: height:100px; width:200px; Nilai/ value: auto Nilai / Value ukuran
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 terperinciANALISIS MARKET RESEARCH UNEJ
1. Kegiatan selama liburan Bantu orang tua:3 Ya, kalo aku sih ya diem aja dirumah soalnya dirumah juga kan ada ibu punya took jadi bisa bantu-bantu (D,P,Aktif, Jalan-jalan:5 Kalo traveling, mungkin naik
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 terperinciA. LATAR BELAKANG ATAU BACKGROUND
A. LATAR BELAKANG ATAU BACKGROUND Latar belakang background dalam CSS dibedakan menjadi 2: 1. Latar Belakang Dengan Menggunakan Warna: Warna background memiliki dua nilai: Transparent : membuat wearna
Lebih 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 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 terperinci[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3
[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3 Oleh: Arinadi Nur Rohmad Oke, Membuat slide show adalah pekerjaan yang sulit untuk yang baru belajar CSS karena pada dasarnya Slide Show dibuat
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 terperinci