Pengikut

Media Sosial

Recommend us on Google!

Blogroll

Layanan Webhosting Murah
Tampilkan postingan dengan label css. Tampilkan semua postingan
Tampilkan postingan dengan label css. Tampilkan semua postingan

7 Situs Terbaik untuk Belajar Koding Website(HTML, CSS & PHP)

Anda adalah seorang awam yang ingin belajar membuat website?. Jika ya, tepat sekali anda membaca posting ini. Saya berani berkata bahwa jika anda membaca sampai selesai dan mengikuti apa yang sarankan dibawah, dalam waktu dekat setidaknya anda akan mengerti dasar dari kode-kode yang digunakan untuk membuat website.

Ada banyak cara untuk belajar script-script untuk membuat website. Salah satunya adalah belajar di situs-situs yang menyediakan tutorial-tutorial dan praktek untuk membuat objek-objek di website. Belajar di situs-situs ini gratis, mudah dan tidak repot. Anda tidak harus mendatangkan guru untuk mengajari anda. Walaupun memang akan lebih baik jika ada pembimbing.

Berikut ini adalah 7 website terbaik yang dapat anda akses untuk belajar kode HTML, CSS dan PHP.

1. W3schools.com

W3school untuk belajar koding website


Cara Mengubah Style Scrollbar Blog/Web pada Chrome, Opera & IE

Tampilan Scrollbar di sebuah situs terkadang menjadi perhatian lebih karena sering kali scrollbar ini mengurangi keindahan desain web jika tidak diubah stylenya. Misalnya, pada desain web bergaya flat, akan sangat tidak cocok jika ada sebuah elemen memiliki konten yang banyak sehingga memanjang kebawah, namun height(tinggi)-nya dibuat tetap(fix) sehingga menampilkan scrollbar secara otomatis.

Trik Membuat Expanding Search Bar dengan CSS & JQuery



Okay, kali ini saya akan berbagi tutorial untuk membuat Search bar dengan animasi yang jika disentuh (hover) akan melebar. Sebenarnya, ada beberapa tutorial sejenis yang lebih "wow", namun menurut saya sangat rumit untuk dimengerti. Nah, Saya disini membuatnya sendiri dengan script sesedikit mungkin agar mudah anda implementasikan sendiri di website anda.


Download Offline Documentation Bootstrap 2.3.2 & 3.0.0

Untuk seorang pemula seperti saya, mempelajari Framework CSS Bootstrap cukup rumit. Hal ini disebabkan beberapa faktor berikut :

1. Bootstrap memiliki fitur yang sangat banyak, class pada cssnya juga banyak sehingga cukup menguras pikiran karena kita harus menghapalnya satu-persatu.

2. Setiap pergantian/peng-upgrade-an versi pada bootstrap seringkali mengalami perubahan yang banyak sehingga mengharuskan kita untuk mempelajarinya ulang.

3. Secara resminya, belajar atau mengeksplorasi dokumentasi bootstrap hanya bisa kita lakukan secara online di website officialnya yaitu http://getbootstrap.com. Memang, ada juga dokumentasi di file bootstrap yang kita downloadnya. Namun, tidak tahu kenapa, dokumentasinya tidak bisa diakses secara normal seperti di internet. Tampilannya tidak ada cssnya dan banyak error.



Bagi saya, poin 1 dan 2 bukanlah sebuah masalah karena itu memang resiko untuk mendapatkan hasil yang powerfull. Namun, jika setiap belajarnya harus dilakukan secara online, itu membuat saya malas karena jaringan internet yang kadang-kadang tidak memadai dan juga banyaknya godaan mengunjungi situs lain jika online. Jadi, saya tidak bisa fokus. Nah, karena itulah saya mulai mencari cara agar bisa belajar bootstrap secara offline. Saya mulai mencari software maupun tools untuk di download.

Akhirnya, setelah mencari sana sini, sekarang saya sudah mendapatkannya.

Dokumentasi Offline Bootstrap 2.3.2

Pertama, saya hanya menemukan dokumentasi offline untuk bootstrap 2.3.2 yang berbentuk ekstensi browser google chrome. Kabar baiknya, ekstensi ini dibuat oleh orang indonesia. Dan bisa di bilang ini satu-satunya dokumentasi bootstrap 2.3.2 offline yang ada karena saya hanya menemukan itu setiap searching di google.

Untuk lebih lengkapnya, anda bisa melihat detail ekstensinya disini atau langsung menuju ke website pembuatnya yaitu http://titiskaifa.me.

Dokumentasi Offline Bootstrap 3.0.0

Merasa bahwa Bootstrap 2.3.2 mulai ditinggalkan karena ada yang baru yaitu Bootstrap 3.0.0, saya mulai mencari dokumentasi offline untuk Bootstrap 3.0.0 ini. Yang ini lebih sulit ditemukan daripada dokumentasi offline Bootstrap 2.3.2. Namun, setelah mencari sana-sini, akhirnya ditemukan juga.

Dokumentasi offline Boostrap 3.0.0 berbentuk aplikasi web yang sama dengan dokumentasi onlinenya. Hanya saja ini sudah dijadikan aplikasi untuk lokal/offline. Cara mengaksesnya, seperti pada umumnya yaitu diekstrak dulu, lalu di simpan di folder htdocs (jika memakai xampp) atau folder www (jika memakai appserv) lalu dibuka lewat localhost.

Untuk mendownloadnya, silahkan klik disini.

Mengenal Twitter Bootstrap (Framework CSS)

Sebelumnya, saya pernah membahas tentang pengertian dari Framework. Nah, kali ini saya akan membahas salah satu dari framework dari jenis Framework CSS. Framework ini bernama Twitter Bootstrap. Jika anda lihat sekilas dari namanya, mungkin anda mengira software ini adalah sesuatu yang mirip dengan media sosial twitter (jika ya, sama seperti saya dulu :D). Namun, anda salah besar.

Framework CSS Bootstrap


Twitter Bootstrap adalah framework css opensource (gratis) yang awalnya dikembangkan oleh tim twitter untuk para web designer. Bootstrap merupakan framework paling banyak dipakai saat ini. Dibandingkan dengan framework css lain, bootstrap memiliki fitur yang lebih lengkap dan penggunaannya sangat mudah.

Beberapa fitur twitter bootstrap adalah responsive design, menu dropdown, clean icons, dan masih banyak lagi. Saat ini, Twitter bootstrap sudah mencapai versi 3. Karena kelengkapan fiturnya, hampir semua jenis website dapat didesain menggunakan bootstrap.

Lebih lengkap tentang Bootstrap, anda bisa langsung mengunjungi webnya yaitu http://getbootstrap.com. Sedangkan untuk mendownloadnya, anda bisa klik link github ini (Versi 3).

Mengenal apa itu CSS dan bagaimana menggunakannya

Apa itu CSS ?

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).

Pada desember 1996, W3C memperkenalkan Level 1 spesifikasi CSS atau juga dikenal CSS1 yang mendukung format, warna font teks, dan lain-lain. Kemudian, Mei 1998, W3C menerbitkan CSS2 yang di dalamnya diatur fungsi peletakan elemen. Dan sekarang, W3C telah memperbaiki dan meningkatkan Kemampuan CSS2 ke  CSS3.

CSS digunakan oleh web programmer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode css.

Sebagai blogger, Anda juga harus tahu apa itu CSS dan bagaimana menggunakannya agar mudah untuk merancang blog anda. Kode CSS membuat pembaca blog kita menjadi nyaman dan betah berlama-lama di blog kita sehingga pageviews situs kitapun meningkat. Namun, itu semua tergantung bagaimana kita menggunakannya sehingga bisa memikat pengunjung. Untuk itulah serial tutorial ini dibuat :) .

PENGENALAN DASAR

Cascading Style Sheet terdiri dari Selektor, deklarasi, Properti dan Nilai. Seperti pada HTML, PHP dan bahasa pemrograman lainnya, CSS juga memiliki aturan yang menulis itu sendiri.
Contoh penulisan kode css :

Body {background-color: white;}


‘Body’ adalah Selektor, ‘{ }’ adalah deklarasi, ‘background-color’ adalah properti dan ‘white’ adalah nilai. Maksud dari kode diatas adalah mengatur warna latar belakang (background color) dari tag ‘Body’ sebuah halaman web.

CARA-CARA PENGGUNAAN CSS


Untuk latihan penggunaan CSS, langkah pertama yang harus anda lakukan adalah membuat file  dengan menggunakan Software kode editor seperti Notepad, lalu namai file dengan format ‘.html’. Lalu praktekkanlah cara-cara berikut ini. Ada 3 cara untuk menggunakan kode CSS di situs Anda.

1. CSS sebagai atribut/elemen/bagian dari tag HTML.

Oke, sebagai contoh, lihat gambar screenshoot kode CSS di bawah ini:

CSS dalam tag html

‘Div’ adalah tag html/Mark up yang dihiasi oleh kode css. kode cssnya adalah ‘style =’ padding: 5px 20px; … ‘. Cara ini biasanya dipakai jika kode cssnya sedikit.



2. CSS dalam tag <style type=”text/css”> (Kode CSS) </ style>.

CSS dalam tag style


Kode css terletak antara tag ‘style’ yang biasanya diletakkan dibawah elemen <title></title>(Tapi, tidak untuk gambar ini). Dengan cara ini anda harus menentukan nama selektor. Pada gambar diatas, selektornya adalah ‘.download’.

3. CSS sebagai file terpisah.

Css dengan file terpisah

Kode pada gambar diatas adalah kode html untuk memanggil kode css yang terpisah. Kode itu biasanya diletakkan dibawah elemen <title></title> pada sebuah file html. Dalam cara 3 ini, kode css berada pada file .css yang dibuat dengan cara yang sama yaitu dengan sofware notepad, namun diberi format .css.

Untuk Latihan cara 3 ini silahkan anda buat folder. Dalam folder itu anda buat lagi file .html, misalnya latihan.html . Lalu buat file css-nya misalnya style.css.

Dalam file latihan.html, silahkan ketikkan kode dibawah ini :


<html>
<head>
<title>Latihan</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”/>
</head>
<body>
<div class=”download”>
<a href=”#”>Download</a>
</div>
</body>
<html>


Simpan, lalu buka di browser. File .html anda belum dihias karena kita belum menambahkan kode css kedalam file style.css. Jadi, silahkan masukkan kode seperti dibawah ini, tentu anda bisa merubah-rubahnya :


.download {
padding:5px 20px;
background:#000;
border:1px solid auto;
text-transform:uppercase;
font-size:20px;
}

setelah itu simpan, lalu refresh file latihan.html yang sedang dibuka di browser

Selamat mencoba :) .

Keterangan :
Cara 1 dan 2 sebagian besar digunakan dalam blog blogspot/blogger. Sedangkan, Cara 3  biasanya digunakan dalam situs web berbasis wordpress ataupun yang lainnya, karena membutuhkan ruang untuk menyimpan file css.

Jika menggunakan cara2 dan 3, Anda harus melengkapi tag html yang akan anda hias dengan atribut ‘id’ atau ‘class’. Ini adalah  2 cara untuk penamaan selektor pada kode css. Jika menggunakan atribut ‘id’ (misal: <div id=”download”></div>), maka selektor dalam kode cssnya adalah sebagai berikut :

#download {
Properti:nilai;
}

Sedangkan, jika menggunakan atribut ‘class’ (misal:<div class=”download”></div>), maka selektor dalam kode cssnya adalah sebagai berikut :

.download {
Properti:nilai;
}

Dengan kata lain, hanya dibedakan dengan tanda “#” dan “.” .

Nah, lalu jika anda ingin menghias tag tertentu dalam file html, misalnya seluruh tag h1 yang ada, Maka anda dapat menuliskan selektornya tanpa menggunakan tanda apapun. Seperti ini :

h1 {
properti:nilai;
}


Jika anda masih ada yang belum ngerti dengan penjelasan saya diatas, silahkan ditanyakan lewat komentar.
Sekian dari saya. Semoga bermanfaat dan selamat belajar :) .

~Muhammad Syakirurohman~
Template Designed and Created by Muhammad Syakirurohman | Syakirurahman