Download tutorial css framework

11/13/2014
TUTORIAL CSS
FRAMEWORK
NAMA
NIM
MATA KULIAH
DOSEN
: DUWI PARYANTO
: 12141367
: PEMROGRAMAN WEB STATIS
: WAHYU WIDODO
CSS FRAMEWORK FONT AWESOME
A. Pengertian Framework
Sebelum mempelajari bagaimana menggunakan CSS Framework, dalam pembahasan ini
adalah “Cara menggunakan Font Awesome”, tidak ada salahnya kita mengetahui
pengertian framework. Adalah suatu pekerjaan yang membosankan, menulis script yang
sangat banyak hanya untuk membuat tampilan website tampak indah dan menarik, untuk
memudahkan serta meningkatkan kenyamanan dalam penulisan script telah disediakan
Framework. Apa itu Framework ??
Jika dilihat dari asal kata Framework berarti kerangka kerja, sekumpulan script yang
disediakan oleh pengembang framework untuk membantu dalam menangani berbagai
masalah dalam pemrograman, sehingga lebih fokus dan cepat dalam membangun aplikasi.
Secara sederhana bisa dijelaskan bahwa framework adalah kumpulan dari fungsi-fungsi,
maka seorang programmer tidak perlu lagi membuat fungsi-fungsi tersebut dari awal,
tinggal memanggil kumpulan fungsi yang sudah ada didalam framerwork, tentunya cara
menggunakan fungsi-fungsi itu sudah ditentukan oleh framework. Ada beberapa kelebihan
menggunakan framework antara lain mempermudah dan menghemat waktu pengerjaan.
CSS adalah kependekan dari Cascading Style Sheets, berfungsi untuk merubah tampilan
halaman web, mempercantik penampilan HTML atau menentukan bagaimana elemen
HTML ditampilkan, seperti merubah warna teks atau background, menentukan posisi, dan
lain sebagainya.
Framework CSS adalah sekumpulan class CSS yang telah disediakan untuk memudahkan
dalam pengembangan web secara default. Class CSS yang disediakan oleh vendor atau
pembuat framework tentunya. Pada intinya framework CSS ini memudahkan kita untuk
membuat tampilan web dengan cepat dan rapi (terstruktur), dengan hanya menuliskan CSS
secara minimal.
Mengapa menggunakan Framework ?
Dibawah ini adalah alasan-alasan mengapa sebuah software framework menjadi sangat
penting didalam pemrograman CSS.
1. Dibutuhkan waktu yang tidak sebentar untuk membuat web. Tapi dengan
menggunakan Framework kita tidak harus memulai semuanya dari awal untuk setiap
projek, menjadi lebih cepat.
2. Tableless adalah teknik dimana struktur website tidak menggunakan table untuk
melayout, tetapi dengan cara memisahkan data antara html dan css. Ini dilakukan agar
berbagai media aplikasi lebih mudah maintenance dan mengakses, berkurangnya
kebutuhan bandwidth, dan yang lebih utama adalah lebih SEO friendly.
3. Website dapat diakses oleh berbagai browser
4. Adanya patokan dari framework membuat setiap kesalahan akan lebih sedikit.
5. Kode menjadi lebih mudah dibaca dan lebih jelas, baik itu oleh kita sendiri maupun
oleh team kita, menjadi bersih dan rapi.
Beberapa contoh CSS Framework :
1. Blueprintcss
2. 960.gs
3. Bootswatch
4. Bootsnipp
5. Font Awesome
6. Getskeleton
7. Getbootstrap
8. Metroui
Dari beberapa contoh diatas, point kelima akan dibahas pada tutorial CSS Framework kali
ini.
B. FONT AWESOME
Font Awesome memberikan kemudahan dalam menggunakan icon di blog atau website,
sehingga kita tidak perlu lagi menggunakan gambar-gambar dalam bentuk JPEG, PNG,
GIF, dll yang tentunya tidak efektif dan efisien. Font awesome ini berarti kumpulan icon
yang berbentuk font berupa vector dan scalable yang artinya gambar icon tidak akan pecah
dengan ukuran berapapun, tidak seperti icon gambar lainnya.
Kelebihan lain dari font awesome ialah icon yang berbentuk font , sehingga mudah
mengubah icon-icon yang ditampilkan. Seperti ketika kita merubah font , merubah ukuran,
merubah warna icon, menambahkan shadow, menambahkan efek animasi dan yang lain
dengan dukungan CSS.
Kenapa Font Awesome?
Seperti yang tertulis di website Font Awesome ( fontawesome.io ) , berikut ini adalah
beberapa alasan menggunakan font awesome untuk website :
1. Satu font terdiri dari lebih 400 icon
2. Tidak membutuhkan javascript untuk penggunaanya
3. Infinite Scalability, ini berarti setiap ikon yang ditampilkan akan tetap terjaga kualitas
gambarnya berapapun ukuran diperbesar
4. Free, Font Awesome dapat Anda gunakan secara gratis
5. CSS Control, mudah di styling dengan CSS seperti icon color, size, shadow dan yang
lain
6. Perfect on Retina Displays, Font Awesome icons adalah vector yang berarti akan
terlihat sangat baik di tampilan dengan resolusi tinggi
7. Plays well with others, font awesome dapat bekerja sangat baik dengan semua
frameworks, karena memang dirancang untuk bootstrap.
Tahapan Menggunakan Font Awesome
Siapkan Alat dan bahan :
a. Laptop atau Komputer
b. Text editor
c. Browser
d. Font Awesome
Langkah-langkah :
1. Download Font Awesome terlebih dahulu, di http://fortawesome.github.io/FontAwesome/ , kemudian ekstrak
2. Buka text editor, pada kesempatan ini saya gunakan Netbeans IDE 8.0, anda bisa
juga menggunakan text editor lain seperti Notepad ++, Adobe Dreamweaver CS5, dll.
3. Buat project baru di Netbeans IDE 8.0, caranya :
-
Pilih file  New project
-
Pilih HTML5 Apllication
-
Beri nama di project name dan pilih tempat menyimpan di project location
-
Next  finish
4. Buka folder Font Awesome yang sudah di ekstrak, copy folder “fonts dan style”, ke dalam
project yang sudah anda buat tadi. misalnya : D/UTS/Tugas/public_html
5. Kembali ke Netbeans IDE 8.0 anda !
Ketikkan sintak di bawah pada elemen <head> … </head>
<link href=”style/fontawesome.css” type=”text/css” rel=”stylesheet”>
Screenshot :
Fungsi sintak di atas adalah untuk menghubungkan file HTML dengan file CSS, atau
memanggil CSS Frameworknya.
6. Setelah itu, kita akan memilih “icon” yang diinginkan. Dengan mengetikkan sintak dibawah ini
pada elemen <body> …. </body>.
<div style="font-size: 22px; color: #333;">
<h2> Contoh Penggunaan icon Font Awesome </h2>
<h4>Web Application Icons</h4>
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-lg"></i>&nbsp;
Home</a> <br>
<a class="list-group-item" href="#"><i class="fa fa-book fa-2x"></i>&nbsp;
Library</a><br>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-3x"></i>&nbsp;
Applications</a><br>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-4x"></i>&nbsp;
Settings</a><br>
</div>
…………..…………………………………………………………………………………………
Screenshot :
Syntax dasar pada Font Awesome adalah <i class=”fa fa-code”></i> atau bisa juga
menggunakan <span> …. </span>
Fungsi sintak diatas adalah untuk memilih icon yang ada di Font Awesome, contohnya icon
home dibawah ini:
Fa-lg, fa-2x, fa-3x, dan fa-5x untuk ukuran icon yang ditampilkan.
Jika anda ingin lebih jelas icon apa saja yang diinginkan, silahkan dilihat di
http://fortawesome.github.io/Font-Awesome/icons/
7. Menyisipkan Medical Icons
Screenshot :
Cara memanggil class CSS
Di bagian awal telah disebutkan cara untuk menghubungkan HTML dan CSS, atau
memanggil CSS frameworknya dengan sintak dibawah ini :
<link href=”style/fontawesome.css” type=”text/css” rel=”stylesheet”>
Pada sintak diatas, kita memanggil CSS frameworknya yang bernama “fontawesome.css”
difolder “style”.
Selector class digunakan untuk menentukan style dari sebuah group elemen, bisa dipakai
berulangkali pada sebuah dokumen web. Artinya sebuah nama class dapat dipanggil
beberapa kali pada elemen-elemen yang ada pada sebuah halaman web. Selector class
dituliskan dengan ditandai dengan tanda titik “.”
Langkah-langkah :
1. Buka Netbeans IDE 8.0, kemudian pilih file  open file
2. Pilih tempat dimana anda menyimpan project anda
3. Buka folder style, pilih fontawesome.css kemudian open
Maka akan tampil seperti ini :
Contoh :
Penggunaan class menggunakan . dalam CSS ( menambah bayangan warna icon )
.fa {
Display : inline-block;
Font : normal normal normal 14px/1 fontAwesome;
Font-size : inherit;
text-shadow: 0 0 10px #f02d95;
}
Sintak tersebut berfungsi untuk memanggil class CSS yang diterapkan di dalam HTML
yang mempunyai class = “fa” sebagai berikut :
<i class=”fa fa-ambulance”></i> fa-ambulance </br>
<i class=”fa fa-h-square”></i> fa-h-square </br>
…………………………..………………………………………………………………………………………………………………………………….
Sehingga ketika anda merubah sintak ( .fa ) di CSS, maka yang mempunyai class Fa di dalam
HTML akan berubah.
Screenshoot :
Screenshot sintak HTML :
Screenshot sintak CSS :
Hasil di browser penggunaan Framework CSS Font Awesome
SEKIAN
~SEMOGA BERMANFAAT ~
