Membuat Responsive Layout dengan CSS Media Query
|
|
- Ivan Cahyadi
- 7 tahun lalu
- Tontonan:
Transkripsi
1
2 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 bisa dinikmati pengguna layar lebar seperti komputer/laptop, maupun pengguna layar kecil seperti handphone/tablet. Salam jagocoding,, di tutorial saya yang ke-10 ini saya masih share tentang tutorial CSS lagi.. Sepertinya saya ditakdirkan hanya hidup di dunia CSS.. :p Duh,, jadi OOT.. -_-' Sebelumnya, kalo ada yang mau nanya "layout responsive itu kayak gimana sih?" nggak usah jauh-jauh.. kecilkan lebar browser anda, dan lihat perubahan layout website JagoCoding yang tetap rapi ini. Itulah yang dinamakan CSS Responsive. Di tutorial kali ini kita akan belajar membuat layout tersebut dengan bantuan CSS Media Query. Dari segi teknik pun CSS Media Query ini nggak terlalu ribet dipelajari kok, cuma kelemahan teknik ini adalah jadi sedikit lebih makan waktu, karena kita seolah membuat CSS untuk beberapa halaman. Untuk mengawalinya, kita buat aja layout sederhana di layar komputer biasa ya, Misalkan kita buat header, content, sidebar, dan footer. Dan didalam footer saya mau isi judul dan navigasi. <div id="container"> <div id="header"> <div class="judul">judul Website <div class="menu">home - Artikel - Gallery - Contact Us - About Us <div id="content"> <div class="isi"> <div class="sidebar"> <div id="footer">copyright 2014 <br> Created by Christian Rosandhy Langkah pertama, kita buat dulu CSS seperti biasa. Karena fokus kita kali ini adalah di bagian
3 responsive, jadi saya nggak akan terlalu menjelaskan coding per coding seperti biasanya.. #container{position:relative; margin:0px 20px; #header{position:relative; background:#0cf; padding:10px; #header.judul{font-size:30px; font-weight:bold; float:left; #header.menu{float:right; background:#333; color:#fff; padding:10px; #header:after{display:block; content:""; clear:both; /*menghapus float dari judul dan menu*/ #content{min-height:500px; position:relative; #content.isi{width:70%; height:500px; position:relative; background:#def; float:left; #content.sidebar{width:30%; height:500px; position:relative; background:#079; float:right; #content:after{display:block; content:""; clear:both; /*menghapus float dari isi dan sidebar*/ #footer{background:#000; color:#ccc; padding:10px; font-style:italic; Taraa.. Jadilah seperti ini.. Masih kelihatan rapi ya? Iya jelas rapi di komputer.. Kalo dibuka di tablet yang lebarnya cuma 500px apa kabar? Jadi kayak gini nih..
4 Mulai dari sini baru terlihat sebuah masalah, menu yang awalnya ganteng di sebelah kanan jadi nggak rapi kalo di layar yang sempit. Selain itu tempat si sidebar jadi tambah sempit juga kan? Apa sidebar lebar segitu cukup untuk kita isi-isi? Nah, disinilah CSS Media Query akan sangat berguna. CSS Media Query berfungsi mengatur baris coding CSS yang dieksekusi sesuai berdasarkan ketentuan tertentu yang kita berikan. Baris perintah CSS Media Query adalah seperti ini (kondisi) { /*baris CSS yang akan (kondisi 1) and (kondisi 2) { /*baris CSS yang akan (kondisi 1) or (kondisi 2) { /*baris CSS yang akan dijalankan*/ Diatas saya berikan 3 contoh model perintah yang bisa kita berikan. Contoh pertama,, baris CSS yang ada didalam kurung kurawal akan dieksekusi jika memenuhi ketentuan yang diberikan. (min-width:900px) berarti mengeksekusi CSS didalamnya jika minimal lebar layar adalah 900px. Kalau ternyata lebar layarnya 700px? Nggak akan dieksekusi deh.. Di CSS media query kita juga bisa membuat banyak ketentuan, disambung oleh operator and atau operator or. (min-width:500px) and (max-width:800px) berarti hanya
5 mengeksekusi CSS didalamnya jika minimum lebar layar adalah 500px DAN maksimum 800px. Kalo lebar layar 400px? Ga dieksekusi, begitu juga kalo lebih besar dari 800px. Umumnya, orang yang menggunakan CSS media query ini membuat ketentuan yang sangat banyak untuk menjawab kebutuhan layar pengguna dengan maksimal. Tapi saya nggak begitu suka pakai banyak-banyak,, males ah ngetiknya. soalnya jenis layout bisa disederhanakan. Kembali ke codingan yang tadi, CSS yang saya buat itu ternyata hanya enak dilihat di layar yang cukup lebar. Karena itu harus dibuat sebuah kondisi supaya komputer dengan layar yang lebih kecil tidak bisa mengeksekusinya. Dalam kasus saya sih, minimal lebar 600px deh.. Karena itu CSS saya tadi akan saya lapisi dengan kondisi seperti ini (min-width: 600px){ /*SELAMA LEBAR LAYAR TIDAK LEBIH KECIL DARI 600PX, MAKA BARIS CODING DIBAWAH INI YANG AKAN DIEKSEKUSI*/ /*baris css yang tadi*/ #container{position:relative; margin:0px 20px; #header{position:relative; background:#0cf; padding:10px; #header.judul{font-size:30px; font-weight:bold; float:left; #header.menu{float:right; background:#333; color:#fff; padding:10px; #header:after{display:block; content:""; clear:both; #content{min-height:500px; position:relative; #content.isi{width:70%; height:500px; position:relative; background:#def; float:left; #content.sidebar{width:30%; height:500px; position:relative; background:#079; float:right; #content:after{display:block; content:""; clear:both; #footer{background:#000; color:#ccc; padding:10px; font-style:italic; Note : nggak ada hukum yang wajib dalam menentukan lebar minimum / lebar maksimum di media query. Semuanya tergantung kita akan membuat berapa jenis layout dan yang paling penting enak dilihat. Nah, kalau halamannya direfresh dan nggak ada perubahan apa-apa di layar lebar, artinya nggak ada masalah dalam pengetikan kita. Sekarang coba kita sempitkan layar kita sampai lebih kecil dari besar pixel yang didefinisikan di min-width..
6 "WAKS,, APA-APAAN NIH? KOK JADI POLOS KAYAK NGGAK DIKASI CSS?" Ini dia salah satu tantangannya pake CSS Media Query.. Karena CSS sekian panjang tadi hanya dieksekusi jika lebar minimumnya 600px, maka untuk layar dengan lebar lebih kecil dari 600px pada akhirnya nggak mengeksekusi apa-apa. Untuk itu, kita buat lagi sekali CSS Media Query, beserta isi-isinya kita buat / kopas ulang. Biarpun dikopas, isinya tetap kita bedakan khusus untuk layar kecil, supaya layar kecil punya tampilan yang enak dilihat juga (tidak seperti yang pertama itu (min-width:100px) and (max-width: 600px){ #container{position:relative; margin:0px 20px; #header{position:relative; background:#0cf; padding:10px; #header.judul{font-size:30px; font-weight:bold; #header.menu{background:#333; color:#fff; padding:10px; #content{min-height:500px; position:relative; #content.isi{height:500px; position:relative; background:#def; #content.sidebar{height:200px; position:relative; background:#079; #footer{background:#000; color:#ccc; padding:10px; font-style:italic; Nah, di contoh ini saya pakai 2 kondisi yaitu batas minimum dan batas maksimum layar. Untuk lebih baiknya sih emang sebaiknya pakai 2 kondisi seperti ini sih..
7 Nggak ada yang terlalu spesial di baris coding CSSnya, cuma yang perlu diperhatikan,, kalau di layar lebar tadi kita bisa buat layout 2 kolom yang memanfaatkan ruang kanan dan ruang kiri (misalnya judul sama navigasi yang bersebelahan, juga content dan sidebar yang bersebelahan). Sedangkan untuk layar kecil kita nggak usah membuat yang seperti itu. Melainkan biarin aja jadi 1 kolom yang memanjang ke bawah. Makanya di CSS layar kecil ini saya hapus float left dan float rightnya.. Sehingga sekarang tampilan websitenya kalau lebar layarnya dikecilkan akan jadi seperti ini : Nah,, seperti yang kita lihat, sekarang mau layarnya lebar ataupun sempit, layoutnya sama-sama rapi kan? Sebenarnya sampai disini kita sudah selesai dengan CSS Responsive. Tapi saya mau share 1 meta tag tambahan yang ditaruh di dalam tag head website yg bersangkutan : <meta name="viewport" content="width=device-width; initial-scale=1.0;
8 maximum-scale=1.0; user-scalable=0;" /> Waktu saya coba-coba belajar CSS Responsive, tampilannya udah enak banget di laptop sekalipun window browsernya dimain-mainin.. Tapi ketika udah dihosting, dan saya coba buka pake Opera Mini,, ternyata CSS Responsive saya nggak kebaca dgn baik.. -_-' Entah mengapa Opera Mini masih baca CSS Media untuk layar lebar.. Dan ternyata setelah saya masukkan meta tag diatas itu sekarang websitenya sudah bisa dibuka dengan baik di Opera Mini.. "Jadi meta tag ntu artinya apa dong?" Entahlah, saya juga kurang ngerti, mungkin ada agan yang tau dan bisa bantu.. :P Okedeh,, sekian aja tutorial dari saya,, semoga bermanfaat untuk kita semua.. :) Tentang Penulis Christian Rosandhy
Membuat 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 terperinciKARTU BIMBINGAN TUGAS AKHIR MAHASISWA
DEPARTEMEN PENDIDIKAN NASIONAL UNIVERSITAS SUMATERA UTARA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM (FMIPA) JL. BIOTEKNOLOGI NO. 1 KAMPUS USU Telp. (061) 82144290 MEDAN 20155 KARTU BIMBINGAN TUGAS
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 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 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 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 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 terperinciMembuat Themes Wordpress sendiri - Part 2
Membuat Themes Wordpress sendiri - Part 2 Oleh: asep saepulloh Halo sahabat jaco. Di tutorial sebelumnya kita sudah bahas bagaimana membuat themes wordpress sendiri. Bagaimana? sudah mengerti belom :Doke
Lebih terperinciPanduan Poster Ilmiah
Panduan Poster Ilmiah Posters: Create your message! Posters: Create your message! 1 Evaluasi: buat apa sih bikin poster? 2 4 3 Persiapkan konten Rancang postermu! Desain 5 Presentasikan! 1 Evaluasi: buat
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 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 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 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 terperinciSeri Tutorial Template Blogger
Struktur dari Template Blogspot Seri Tutorial Template Blogger Sebelum merancang template, kita harus tahu tentang struktur atau bagian-bagian dari template. Setiap template tidak harus memiliki struktur
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 terperinciListing Program. Halaman Home(index.php) <?php require_once'config.php';?>
Listing Program Halaman Home(index.php)
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 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 terperinciIni Nih Rahasia di Iphone Yang Kamu Gak Tau
Ini Nih Rahasia di Iphone Yang Kamu Gak Tau Dwi Nugroho Dwiraharja89@gmail.com Abstrak Untuk kamu pengguna iphone yang ada di seluruh Indonesia, pasti kamu sering deh utak-atik gadget keren kalian itu
Lebih terperinciBAB IV PROTOTIPE, PENGEMBANGAN, DAN VERIFIKASI
BAB IV PROTOTIPE, PENGEMBANGAN, DAN VERIFIKASI Pada bab ini akan dibahas mengenai prototipe, pengembangan modul aplikasi Jafaik beserta faktor pendukung yang dibutuhkan oleh sistem, serta hasil pengujian
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 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 terperinciSerba-serbi mempercantik BLOG dengan BLOGGER. (volume 1)
1 Serba-serbi mempercantik BLOG dengan BLOGGER. (volume 1) Semangat pagi NLCmembers, udah punya blog tapiii.. belum tau bagaimana cara untuk memaksimalkannya? Atau blognya masih biasa aja dan nggak kece?
Lebih 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 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 terperinciANALISA KATA KUNCI DENGAN GOOGLE KEYWORD PLANNER
1 ANALISA KATA KUNCI DENGAN GOOGLE KEYWORD PLANNER By : https://www.facebook.com/diar.seonubi September 2013 2 KATA SAYA Hai, ketemu lagi sama saya. Nah kali ini saya mau kasih tips cara menggunakan Google
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 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 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 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 terperinciBELAJAR DASAR FOOTPRINT halaman 1 BELAJAR DASAR FOOTPRINT
BELAJAR DASAR FOOTPRINT halaman 1 BELAJAR DASAR FOOTPRINT BELAJAR DASAR FOOTPRINT halaman 2 KATA SAMBUTAN Jiahhhh pake kata sambutan segala... biar kayak Lurah gitu ya? Abis mo ditulis Kata Pengantar,
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 terperinciTUGAS BOXES. 1. Percobaan 1
TUGAS BOXES 1. Percobaan 1 Analisa : Pada percobaan 1, style pada elemen div ditetapkan width dan heightnya 400px dan 300px dengan background color pink, dan pada elemen p, width dan height ditetapkan
Lebih terperinciLAYOUT. Alat dan Bahan. Cara Kerja. Percobaan. Nama : Dwi Setiya Ningsih Kelas : PJJ D3 T1 NRP :
Nama : Dwi Setiya Ningsih Kelas : PJJ D3 T1 NRP : 2103157025 LAYOUT Alat dan Bahan --- Software HTML Editor seperti Notepad++, Adobe Dreamweaver, Text Wrangler atau yang lainnya --- Bahan-bahan gambar
Lebih terperinciSekilas Mengenai HTML
Sekilas Mengenai HTML Halaman di website-website yang sering anda lihat di internet pada umumnya dibuat dengan menggunakan bahasa HTML. Tidak seperti bahasa lainnya, untuk membuat halaman HTML, kita tidak
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 terperinciCara membuat format nomor halaman berbeda dalam satu dokumen word Berikut ini adalah langkah-langkah pembuatannya:
Cara membuat format nomor halaman berbeda dalam satu dokumen word 2007 Berikut ini adalah langkah-langkah pembuatannya: 1. Jika file Makalah yang kita miliki masih disimpan dalam beberapa halaman, maka
Lebih terperinciPHP & MYSQL. Ingat, PC anda tidak memerlukan tambahan khusus atau apapun untuk melihat hasil eksekusi kode PHP anda. Mengapa?
Universitas Muhammadiyah Sukabumi Artikel PHP dan Mysql Oleh : dede sulaeman PHP & MYSQL PHP & MYSQL PHP itu apa sih? Penjelasan sederhananya adalah bahwa PHP merupakan sebuah program tambahan yang ada
Lebih terperincisetiap value dipisakan dengan,(koma) dan maksud dari kedua value ini ialah manambah efek dengan dua value tadi.
PERTEMUAN 6 .classshadow font-family: color:#333333; text-shadow: 1px 2px 3px blue; 1px adalah tebal bayangan secara horisontal, kekanan untuk nilai (+) dan kekiri untuk nilai (-), misal -1px; 2px adalah
Lebih terperinciCara Upload Data di File Hosting Indowebster (IDWS)
Cara Upload Data di File Hosting Indowebster (IDWS) lintasinformatika November 5, 2013 Blog, Internet Lintas Informatika Saya yakin banyak diantara anda yang sudah mengenal nama Indowebster (IDWS) sebagai
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 terperinciTUTORIAL MAIL MERGE DENGAN MS.OFFICE 2007 & MS.EXCEL 2007
TUTORIAL MAIL MERGE DENGAN MS.OFFICE 2007 & MS.EXCEL 2007 by goji (gojigeje@gmail.com) :D Fasilitas mail merge akan sangat membantu, contohnya ketika kita mau bikin undangan, dengan banyak nama penerima
Lebih terperinciMembangun Web Statis Menggunakan Dreamweaver Oleh : Mochamad Subecha, SE
Membangun Web Statis Menggunakan Dreamweaver Oleh : Mochamad Subecha, SE Langkah-langkah membuat web statis 1. Pastikan bahwa server localhost sudah berjalan. Untuk Windows biasanya menggunakan Xampp for
Lebih 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 terperinciObjek Bergoyang CSS3
Objek Bergoyang CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Gak terasa nih udah mulai banyak yang mudik... Di sela-sela waktu masih aja nih saya update tutorial buat temen-temen jagocoding sekalian...
Lebih terperinciMembuat Aplikasi Android Sederhana
2012 Membuat Aplikasi Android Sederhana Eko Kurniawan Khannedy StripBandunk.com 3/29/2012 Persembahan Buku ini dipersembahkan buat Indonesia yang lebih baik Baik dari segi ilmu Teknologi Dan sumber daya
Lebih terperinciMODIFIKASI TAMPILAN HEADER SIDEBAR BLOGGER. Abstrak. Kata kunci : Header Sidebar, Header Blogger, Sidebar Blogger, Header Sidebar Blogger
KOMPUTAKI Vol. 1 No. 1 Februari 2016 MODIFIKASI TAMPILAN HEADER SIDEBAR BLOGGER Suprapto Fakultas Ilmu Komputer, Universitas AKI Email: suprapto.brian@yahoo.com Abstrak Modifikasi dari blogger penting
Lebih 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 terperinciMembuat Toko Mebel Menggunakan Blogspot
Membuat Toko Mebel Menggunakan Blogspot Ditulis Oleh Irvan Dwijaya dan Tim Bisnis Online Sukses http://www.bisnisonline-sukses.com Bisnis Online Consultant Website Toko Online Development Training dan
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 terperinciIV KONSEP PERANCANGAN
IV KONSEP PERANCANGAN A. TATARAN LINGKUNGAN/KOMUNITAS Perancangan website FDSK UMB ini bertujuan sebagai media promosi dan informasi untuk para siswa sekolah SMA/sederajat yang akan segera melanjutkan
Lebih terperinciGambar 1.1 Desain halaman web
DESAIN HALAMAN WEB DENGAN DREAMWEAVER 8.0 Oleh: Heri Istiyanto Untuk dapat mengikuti tutorial ini, diharapkan Anda menggunakan Macromedia Dreamwever versi 8. Jika Anda menggunakan versi di atasnya, misalnya
Lebih terperinci/* styling paragraf, teks paragraf berwarna biru dan rata tengah */ p {color:blue;text-align:center;}
II CSS INTRO CSS (Cascading Style Sheet) adalah bahasa untuk mendefinisikan bagaimana suatu dokumen dan elemen pada suatu dokumen ditampilkan oleh browser. File CSS memiliki ekstensi.css SYNTAX SYNTAX
Lebih 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 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 terperinciBu k u Ma n u a l Web Si t e SK PD Pem er i n t a h K a b u pa t en Ma l a n g
Bu k u Ma n u a l Web Si t e SK PD 2016 Pem er i n t a h K a b u pa t en Ma l a n g Situs web Satuan Kerja Perangkat Daerah Pemerintah Kabupaten Malang didesain untuk bisa dirubah atau diupdate secara
Lebih terperinciTUTORIAL APLIKASI WEB Dengan PHP dan MySQL
TUTORIAL APLIKASI WEB Dengan PHP dan MySQL Tutorial Aplikasi Web Dengan PHP dan MySQL A. DASAR TEORI PHP merpakan bahasa pemrograman yang sangat popular dalam pengembangan website dewasa ini, pada dasarnya,
Lebih terperinciPanduan Poster Ilmiah dan Presentasi Poster 1
Panduan Poster Ilmiah dan Presentasi Poster 1 http://contentinception.com/blog-writing/ https://tm-pilbox.global.ssl.fastly.net/ a. Kayak gimana sih presentasi poster itu? Nah pada artikel ini akan dibahas
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 terperinciTutorial Penggunaan. Bagian I. www.indonesiawebdesign.com
Daftar Isi 1. Tutorial Penggunaan Bagian I 1.1 Pengantar... 1.2 Persiapan... 1.3 Pengenalan Medan... 1.4 Navigasi... 1.5 Widget... 1.6 Statistik... 1.7 Setting Website... 2. Tutorial Penggunaan 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 terperinciCSS (Cascading Style Sheets)
KAJIAN 2 CSS (Cascading Style Sheets) Modul 5 Pengantar CSS Modul 6 Layout dan Display Modul 7 Font, Text, Color, Background Modul 8 Layer dan Hyperlink Modul 9 Layout Website Sederhana 40 KAJIAN 2 CSS
Lebih terperinciThe Black Music Web Template
Page 1 of 18 Adobe Photoshop Tutorial www.dremi.info Posted on: 20-09-2007 / 14:27:08 The Black Music Web Template Walo brow..., lem ini gue rada ga mut..!! migrein gue kambuh, badan pegel banget, tadinya
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 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 terperinciLAPORAN RESMI Layout
LAPORAN RESMI Layout Dosen Pembimbing : Dwi Susanto,ST, MT Oleh Hamidah Nur Hidayati 4103131038 PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI
Lebih 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 terperinciBAB IV KONSEP PERANCANGAN
BAB IV KONSEP PERANCANGAN 4.1 TATARAN LINGKUNGAN Dari hasil perancangan website Resto Jagarawa sebagai media informasi dan promosi diharapkan dapat berpengaruh bagi pihak Resto Jagarawa untuk meningkatkan
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 terperinci