Tutorial Dasar CSS Preprocessor LESS
|
|
- Hamdani Sumadi
- 7 tahun lalu
- Tontonan:
Transkripsi
1
2 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 kita akan mengenal 3 fitur dasarnya yang akan membantu kita coding CSS dengan lebih asyik.. Ga ada salahnya kita simak kok.. :) Salam sobat jagocoding.. Udah lama banget nih ya ane ga bikin tutorial lagi.. Secara, kehabisan ide duluan.. Bingung mau bikin tutorial apa lagi sekitaran CSS.. Hehehe.. Karena itu, kali ini saya mau sedikit share masih sekitaran di CSS juga.. tapi CSS yg ini agak beda dari yg pada umumnya, karena kita akan menggunakan bantuan library javascript preprocessor CSS yg cukup terkenal, yaitu LESS.. Buat yang belom tau,, LESS adalah CSS preprocessor yang akan sangat membantu pekerjaan kita di sekitaran CSS.. Untuk dokumentasi lengkap dan downloadnya, mampir aja ke Fitur LESS inipun sebenarnya sangat banyak.. Tapi fitur yg paling saya suka adalah Nesting Selector, penggunaan variabel, dan Mixin.. Di tutorial ini kita akan mencoba ketiga fitur tersebut.. Pertama-tama, kita download dulu file javascript library Lessnya di Mau di download ataupun di panggil langsung di HTMLnya nggak masalah.. Dlm tutorial ini saya download aja deh, Sekarang kita ke HTMLnya. Bikin kerangka HTML utamanya seperti biasa seperti dibawah ini.. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>latihan CSS Less</title> <link rel="stylesheet/less" href="style.less"> <script type="text/javascript" src="js/less.min.js"></script> </head> <body> </body> </html> OK, dari potongan baris kode diatas, target library LESSnya disesuaikan dengan lokasi anda. Dan
3 yang paling penting, di tag link bagian atribut rel, kalau biasanya hanya bernilai "stylesheet" saja, untuk menggunakan less ini nilai atribut rel harus "stylesheet/less". target atribut hrefnya juga disesuaikan dengan lokasi file LESS kita.. Ingat ya,, ekstensinya harus LESS,, bukan CSS.. :D Fitur Nesting Selector Kalau sampai disini sudah dilakukan dengan benar, kita akan lanjut mengenal ketiga fiturnya.. yg pertama fitur Nesting Selector. Sebelumnya, kita isi tag body dengan beberapa tag dulu untuk percobaan ya.. <div id="container"> <div class="header"> <a href="index.html" class="judul">judul Website</a> </div> <nav> <a href="">home</a> <a href="">profile</a> <a href="">gallery</a> <a href="">about Us</a> </nav> </div> <div class="content"> Isi konten website </div> <div class="footer"> </div> Sejauh ini masih nggak ada hal yang berbeda ya? Sekarang kita ke CSS deh.. CARA BIASANYA,, kira-kira seperti ini nih untuk mendesainnya.. #container{ width:960px; margin:0px auto; position:relative;.clear{ clear:both;.header{ position:relative; padding:10px; background:#99aaff;.header a.judul{ font-family:'calibri',sans-serif;
4 font-size:24px; color:#fff; float:left;.header nav{ float:right;.header nav a{ color:#000; font-family:'calibri',sans-serif;.content{ padding:10px;.footer{ font-style:italic; background:#333; color:#ccc; Dari 38 baris tadi, hasilnya ya lumayan lah.. Sekarang, kita akan membuat hasil yang sama persis dengan fitur Nested Selector LESS. #container{ width:960px; margin:0px auto; position:relative;.header{ position:relative; padding:10px; background:#99aaff; a.judul{ font-family:'calibri',sans-serif; font-size:24px; color:#fff; float:left; nav{ float:right; a{ color:#000; font-family:'calibri',sans-serif;
5 .clear{.content{ padding:10px;.footer{ font-style:italic; background:#333; color:#ccc; clear:both; Apakah anda melihat sesuatu yang aneh? Ya,, Dalam fitur Nested Selector ini, selector yang mempunyai anak tidak lagi harus ditulis ulang seperti CSS biasa, melainkan bisa langsung ditulis didalamnya. Kalau kurang jelas, lihat gambaran kode dibawah ini : /*CSS BIASA*/ tag_1{...properti tag_1... tag_1 tag_2{ /*mengarah ke tag 2 yg merupakan anak dari tag_1*/...properti tag_2... /*LESS CSS*/ tag_1{...properti tag_1... tag_2{...properti_tag2... /*tag parent tidak perlu diketik ulang, asal ditaruh didalam tag parent yang bersangkutan*/ Semoga fitur Nested Selector ini bisa dimengerti ya.. Buat yang udah biasa bikin program yang berkurung-kurung sih pasti udah biasa banget sama model beginian.. :D Fitur Variabel Siapa kira variabel cuma ada di bahasa pemrograman aja? Dengan LESS, CSS pun juga bisa divariabelin.. Variabel di LESS ini mirip kayak PHP, nggak perlu deklarasi tipe data.. :D Kalo di PHP variabel didefinisiin pake simbol $, di LESS simbolnya Coba saja kita edit file LESS kita tadi.. Pertama-tama kita buat variabel dulu seperti potongan kode dibawah, lalu panggil variabel
6 tersebut di bagian yang #container{ Keuntungan penggunaan variabel ini adalah, kita bisa menggunakan suatu nilai kapan saja dimana saja hanya dengan memanggil nama variabelnya saja. Fitur Mixins Ini adalah salah satu fitur paling asik yang bikin saya betah pake LESS.. :D Kalau dalam bahasa pemrograman, Mixin ini bisa disetarakan dengan Function. Sama seperti function, Mixin bisa dijalankan dengan inputan maupun tanpa inputan. Mixin ini sangat berguna untuk kita bisa membuat beberapa baris kode hanya dengan memanggil nama mixin atau fungsinya. Mixin ini paling asik diterapkan di CSS3. Anggaplah kita punya 4 tag yang akan kita berikan efek transisi otomatis. Cara CSS biasanya seperti ini : tag_1{ tag_2{ tag_3{ transition:0.5s; -moz-transition:0.5s; -webkit-transition:0.5s; -o-transition:0.5s; -khtml-transition:0.5s; -ms-transition:0.5s; transition:0.75s; -moz-transition:0.75s; -webkit-transition:0.75s; -o-transition:0.75s; -khtml-transition:0.75s; -ms-transition:0.75s; transition:0.25s;
7 tag_4{ -moz-transition:0.25s; -webkit-transition:0.25s; -o-transition:0.25s; -khtml-transition:0.25s; -ms-transition:0.25s; transition:1s; -moz-transition:1s; -webkit-transition:1s; -o-transition:1s; -khtml-transition:1s; -ms-transition:1s; Sangat panjang bukan? Ya memang sih yang bikin panjang itu sebenernya si prefix -moz-, -webkit-, dan teman2nya.. Tapi dengan mixin, sekian baris program tadi dapat dipersingkat menjadi seperti ini : /*MIXIN. Formatnya mirip seperti class, tapi ada kurung buka dan tutupnya*/.transisi(@durasi){ transition:@durasi; -moz-transition:@durasi; -webkit-transition:@durasi; -o-transition:@durasi; -khtml-transition:@durasi; -ms-transition:@durasi; tag_1{.transisi(0.5s); tag_2{.transisi(0.75s); tag_3{.transisi(0.25s); tag_4{.transisi(1s); /*selesaii~*/ Seperti yang kita lihat,, format penggunaan mixin adalah dengan simbol titik.. Akan tetapi berbeda dengan selector class, mixin meminta parameter. Dalam contoh saya buat supaya fungsi.transisi() bisa dipanggil oleh siapapun hanya dengan mengganti nilai durasi sesuai keinginan.
8 Sebenarnya masih banyak fitur asik lainnya yang akan saya share lagi kedepannya. Semoga tutorial ini bisa memperluas wawasan kita.. Terima kasih atas perhatiannya~ :D Tentang Penulis Christian Rosandhy
Membuat 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 5. Cascading Style Sheet (CSS)
Bab 5. Cascading Style Sheet (CSS) Overview Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan sebuah dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan
Lebih 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 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 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 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 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 terperinciMahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML
Pengenalan JavaScript Standar Kompetensi Mahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML Indikator Hasil
Lebih terperinciPengenalan Script. Definisi HTML
1 Pengenalan Script Pada bab ini akan dibahas bahasa script yang dapat digunakan untuk membuat halaman web. Untuk dapat membuat halaman web bahasa script pertama yang harus anda kenal adalah HTML. HTML
Lebih terperinciMembuat 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 terperinciDasar Dasar Transisi Di CSS3
Dasar Dasar Transisi Di CSS3 Oleh: Irvansyah Jumpa lagi ne sama sobat JagoCoding, tutor saya hari ne tentang transisi di CSS3.. Mungkin diantara teman2 pasti ada yang udah tahu tapi masih bingung ataupun
Lebih 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 terperinciPemrograman Web Week 4. Team Teaching
Pemrograman Web Week 4 Team Teaching Peran Masing-masing Bahasa HTML => Mengatur Struktur CSS => Mengatur tampilan JSS => Mengatur interaktifitas Penggunaan Javascript Sama seperti pada CSS, ada 3 cara
Lebih 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 terperinciCSS Cascading Style Sheet
CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 Pengenalan CSS CSS = Cascading Style Sheet. Suatu style yang digunakan untuk menampilkan elemen HTML. Dapat mengatur dan mengontrol tampilan
Lebih 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 terperinciCSS (Cascade Style Sheet)
CSS (Cascade Style Sheet) CSS merupakan bahasa (script) yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa
Lebih terperinciListing Program. Halaman Home(index.php) <?php require_once'config.php';?>
Listing Program Halaman Home(index.php)
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 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 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 terperinciPemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-7 (XML) Noor Ifada noor.ifada@if.trunojoyo.ac.id S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan XML? Keuntungan XML Perbedaan XML dan HTML Contoh sederhana
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 terperinciCSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa
CSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa Pembahasan Pengertian CSS CSS (FONT, TEXT, COLOR) CSS - Image PENGERTIAN CSS Singkatan dari Cascading Style Sheet Digunakan dalam kode HTML untuk menciptakan
Lebih terperinciPemrograman Web. Cascading Style Sheets. Created by : Rifqi Sambas Khairurrohman
Pemrograman Web Cascading Style Sheets Created by : Rifqi Sambas Khairurrohman Home Page Anatomi CSS Macam Selector Cara Kerja Anatomi CSS CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector,
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 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 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 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 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 terperinciPengembangan Web. Ramos Somya
Pengembangan Web Ramos Somya Java Script itu adalah bahasa pemrograman, yang sering digunakan untuk membangun halaman web, sehingga lebih interaktif. Seringkali digunakan buat hal2 seperti nampilin tanggal,
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 terperinciDesain Grafis. RAHMADY LIYANTANTO liyantanto.wordpress.com
Desain Grafis RAHMADY LIYANTANTO liyantanto@gmail.com liyantanto.wordpress.com Apa Desain Grafis..? Desain Grafis dapat diartikan sebagai proses pemikiran yang diwujudkan dalam gambar. >> Ruang Lingkup:
Lebih terperinciPENGANTAR KOMPUTER DAN TI 2C
PENGANTAR KOMPUTER DAN TI 2C PERTEMUAN 4 Peg. Komp & TI 2C M4 HyperText Markup Language (HTML) Sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di
Lebih terperinciDasar Pemrograman Web. Pemrograman Web. Adam Hendra Brata
Dasar Pemrograman Web Pemrograman Web Adam Hendra Brata Konsep Dasar Desain Web HTML CSS HTML HTML (HyperText Markup Language) Bahasa standar yang digunakan untuk menampilkan document web. Mengontrol tampilan
Lebih terperinciTUTORIAL CSS FRAMEWORK
11/13/2014 TUTORIAL CSS FRAMEWORK NAMA : DUWI PARYANTO NIM : 12141367 MATA KULIAH : PEMROGRAMAN WEB STATIS DOSEN : WAHYU WIDODO CSS FRAMEWORK FONT AWESOME A. Pengertian Framework Sebelum mempelajari bagaimana
Lebih terperinciTUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif
TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif www.ilmuwebsite.com Bagian 8. Menggunakan JQuery Manipulation
Lebih 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 terperinciCodeigniter : Membuat kalkulator sederhana
Codeigniter : Membuat kalkulator sederhana Oleh: Meyta Posting yang keduaa :D, belum dapet sambutan nih :(. tapi gapapa deh usaha itu perlu! :D Sekarang kita mau buat aplikasi kalkulator sederhana berbasis
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 4 Cascading Style Sheets Tujuan: Mahasiswa mengenal komponen CSS sebagai pelengkap element HTML dalam membangun website statis. Pustaka:» HTML dan
Lebih terperinciDropdown Berhubungan (Sync Dropdown) Dengan CI & MySQL
Dropdown Berhubungan (Sync Dropdown) Dengan CI & MySQL Oleh: Gilang Sonar Amanu Saya mau coba share lagi, tutorial sederhana namun sering bgt digunakan untuk berbagai kasus. Mungkin bisa berguna khususnya
Lebih terperinciPERKEMBANGAN HTML SINTAX DASAR XHTML XHTML VS HTML PEMPROGRAMAN INTERNET PENGENALAN HTML, CSS & PHP 06/11/2012 HTML
PERKEMBANGAN HTML HTML 4.0 1997 Introduced many new features and deprecated many older features HTML 4.01-1999 - A cleanup of 4.0 PEMPROGRAMAN INTERNET PENGENALAN HTML, CSS & PHP XHTML 1.0-2000 Just 4.01
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 terperinciPERTEMUAN 1. Kompetensi Dasar : Menjelaskan konsep dasar dan teknologi Webpage
PERTEMUAN 1 Kompetensi Dasar : Menjelaskan konsep dasar dan teknologi Webpage Materi yang akan dibahas : 1. Kegunaan dari dokumen dan audiens 2. Bahasa HTML 3. Struktur dasar penulisan dokumen 4. Site
Lebih terperinciMembuat Aplikasi GPS & Suara Antrian dengan PHP. Ronald Rusli.
Membuat Aplikasi GPS & Suara Antrian dengan PHP Ronald Rusli www.bukulokomedia.com MEMBUAT APLIKASI GPS DAN SUARA ANTRIAN DENGAN PHP Perpustakaan Nasional : Katalog Dalam Terbitan (KDT) Penulis : Ronald
Lebih terperinciAuthor : Minarni, S.Kom.,MM
S Cascading Style Sheets Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit Kalimantan Tengah Internet Multimedia Keuntungan Menggunakan CSS Mempermudah dan mempersingkat pembuatan dan pemeliharaan
Lebih terperinciMembuat Chatbox Sederhana dengan Ajax jquery dan PHP PDO
Membuat Chatbox Sederhana dengan Ajax jquery dan PHP PDO Oleh: Ananda Mukhammad Ikhsan Chatbox adalah fitur yang cukup penting di website berbasis sosial media. Nah, kali ini saya akan memberikan tutorial
Lebih terperinciAJAX dengan jquery Part 3
AJAX dengan jquery Part 3 Oleh: Cecep Yusuf Pada tutorial ini, kita akan belajar bagaimana mengirim data POST dari sebuah form dan dikirim dengan metode AJAX post dengan menggunakan jquery. Selamat pagi
Lebih terperinciMenampilkan user online seperti di obrolan step by step
Menampilkan user online seperti di obrolan step by step Oleh: lukman hakim Salam hangat temen2 Jagocoding.com, Berikut saya akan berbagi tutorial sederhana yakni bagaimana cara menampilkan user online
Lebih terperinciMENAMPILKAN GOOGLE MAPS DI WEB BROWSER DENGAN HTML5
MENAMPILKAN GOOGLE MAPS DI WEB BROWSER DENGAN HTML5 Agung Nugroho Agung.nugroho@raharja.info :: http://ngapainbingung.com Abstrak Google Maps merupakan maps yang paling popular karena keakuratannya dan
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 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 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 terperinciTUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif
TUTORIAL JQUERY Langkah Tepat menjadi Web Designer Handal, menguasai JQuery JavaScript Library, jalan membuat halaman website lebih atraktif www.ilmuwebsite.com Bagian 7. Menggunakan JQuery Traversing
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 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 terperinciLAPORAN PRAKTIKUM MONITORING BERBASIS WEB
LAPORAN PRAKTIKUM MONITORING BERBASIS WEB Modul III Cascade Style Sheet Disusun Oleh : Fahmi Ahmad Husaeni 201302025 Dosen pengampu : Deni Kurnia S.Pd, M.T Program Studi : Teknik Mekatronika POLITEKNIK
Lebih 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 MEMBUAT CSS DENGAN DREAMWEAVER
CARA MEMBUAT CSS DENGAN DREAMWEAVER Dewi Wijayanti dewiwijayanti@raharja.info Abstrak Dreamweaver adalah sebuah perangkat lunak yang digunakan untuk membuat atau menyunting halaman web yang dinamis maupun
Lebih terperinciStandar Kompetensi Memahami Pengertian Cascading Style Sheets (CSS), Struktur CSS, Cara kerja CSS, menempatkan CSS dalam HTML
Pengenalan CSS Standar Kompetensi Memahami Pengertian Cascading Style Sheets (CSS), Struktur CSS, Cara kerja CSS, menempatkan CSS dalam HTML Indikator Hasil Belajar Dapat menjelaskan pengertian CSS. Dapat
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 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 terperinciPerkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya
Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya Oleh: Arinadi Nur Rohmad Glyphicon ini berbasis text jadi lebih ringan dan biasa diganti warna seperti huruf pada umumnya yang berbeda dari
Lebih terperinciInteractive Broadcasting
Modul ke: Interactive Broadcasting HTML Fakultas Ilmu Komunikasi Bagus Rizki Novagyatna Program Studi Broadcasting www.mercubuana.ac.id Pengertian HTML Program adalah kata, ekspresi, pernyataan atau kombinasi
Lebih terperinciBAB I PERKENALAN HTML
BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan
Lebih 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 terperinciTUGAS III PEMROGRAMAN BERBASIS WEB ARTIKEL JAVASCRIPT
TUGAS III PEMROGRAMAN BERBASIS WEB ARTIKEL JAVASCRIPT Nama Mahasiswa : Nim Mahasiswa : 1108605018 I GEDE WAHYU SURYA DHARMA JURUSAN ILMU KOMPUTER FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS
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 terperinciEfek Mengambang CSS3
Efek Mengambang CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Masih bersama saya Mazhuda, sambil ngangur nih di kampung kelahiran... :-) Dari pada gak ngapain-ngapain mending kita sharing ilmu aja di
Lebih terperinciMembuat Plugin jquery (Part 1)
Membuat Plugin jquery (Part 1) Oleh: muhamad iqbal Ini adalah postingan pertama dari serial yang akan membahas tentang Membuat plugin jquery. Pada bagian ini kita akan membahas tentang konsep dasar plugin.
Lebih terperinciUAS (Pemrograman Web Statis) Oleh : N.I.M : : Reza Bayu Permana : Teknik Informatika Mata Kuliah : Pemrograman Web Statis
UAS (Pemrograman Web Statis) Oleh : N.I.M : 12141378 Nama : Reza Bayu Permana Prodi : Teknik Informatika Mata Kuliah : Pemrograman Web Statis SEKOLAH TINGGI MANAGEMEN INFORMATIKA DAN ILMU KOMPUTER EL-RAHMA
Lebih terperinciPemrograman Web Week 2. Team Teaching
Pemrograman Web Week 2 Team Teaching WEEK 2 HTML IKG2I4 Software Project I Persiapan Instalasi Editor Download dan Install apilkasi editor (mis. Notepad++) Karena membantu dalam pengembangan syntax highlighting
Lebih terperinci