TUGAS AKHIR BIDANG MINAT WEB DESAIN

IMPLEMENTASI CSS DAN DRUPAL

DALAM SOSIALISASI GO GREEN

Kelompok :
Ni Wayan Mona Rosita (0908605013)
Luh Sukma Widiasari (0908605038)
Cok Istri Oka Diah Anggaraeni (0908605039)
I Wayan Angga Pratama (0908605058)
A. A. Ngurah Oka Abhina Amitaba (???????????)

PROGRAM STUDI TEKNIK INFORMATIKA

JURUSAN ILMU KOMPUTER
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS UDAYANA
2011
KATA PENGANTAR
DAFTAR ISI
DAFTAR GAMBAR
 BAB I

PENDAHULUAN

1.1 Latar belakang

Isu Pemanasan global dan Perubahan Iklim (Climate Change) bukan lagi sekadar isapan
jempol belaka, tapi sudah menunjukan bentuk dan wujud yang sebenarnya kehadapan umat
manusia di bumi dengan semakin tidak nyamannya bumi sebagai tempat tinggal ataupun hunian
makhluk hidup. Berbagai fenomena alam yang cenderung mengalami penyimpangan (anomali)
akhir-akhir ini, seperti iklim yang kacau, panas yang ekstrim berkepanjangan, intensitas curah
hujan yang kelewat tinggi (diluar normal), banjir, angin ribut, dan puting beliung banyak
dikaitkan dengan isu pemanasan global tersebut. Hal tersebut tidaklah keliru dan berlebihan bila
melihat fakta dan hasil-hasil penelitian para ahli yang menunjukkan bahwa ada kecenderungan
jumlah kadar gas rumah kaca seperti CO2 di atmosfer telah kelewat batas, yang terus menerus
dimuntahkan dari bumi, dimana semakin hari jumlahnya dan konsentrasinya terus membumbung
tinggi, serta ternyata sangat berkorelasi positif dengan semakin tingginya aktivitas manusia di
bumi yang dihasilkan dari berbagai kegiatan, antara lain rumah tangga (termasuk institusi,
kantor, rumah sakit, sekolah, ataupun kampus), industri, transportasi, dan lain-lain.
Seperti diketahui perubahan iklim (climate change) adalah gejala naiknya suhu permukaan
bumi akibat naiknya intensitas efek rumah kaca yang kemudian menyebabkan terjadinya
pemanasan global. Kenaikan suhu udara ini dipicu oleh semakin tingginya kadar gas rumah kaca
(GRK) di atmosfer, diantaranya oleh CO2 yang banyak dihasilkan dari aktivitas manusia, seperti
kegiatan pembakaran bahan bakar fosil (misalnya minyak, gas, dan batubara) yang banyak
digunakan untuk industri, transportasi, rumah tangga, pembangkit, dll. Menurut para ahli, dalam
waktu 70 tahun sejak tahun 1940 suhu udara rata-rata di bumi diperkirakan mengalami kenaikan
sekitar 0,50°C. Pemanasan global akan mengakibatkan terjadinya perubahan iklim dan kenaikan
permukaan air laut akibat mencairnya es di kutub, kemudian gelombang panas akan
mengacaukan iklim dan menimbulkan badai dahsyat yang dapat memporakporandakan bangunan
di berbagai kota.
 Disadari atau tidak, fenomena pemanasan global tersebut sebagian besar adalah akibat dari
ulah aktivitas manusia di bumi yang kelewat tinggi sejalan dengan trend gaya hidup manusia
modern, dimana setiap hari kita saksikan jutaan industri dan kendaran bermotor memuntahkan
gas-gas polutan ke atmosfer khususnya CO2. Kondisi atmosfer kita saat ini ibaratnya seperti
keranjang sampah raksasa, yang berfungsi sebagai wadah dari bermacam-macam gas yang
dimuntahkan dari bumi. Kondisi ini semakin diperparah dengan semakin tingginya laju
pemusnahan vegetasi atau pohon-pohon oleh manusia yang ada di bumi, seperti pembalakan
hutan yang seakan tiada hentinya, yang tidak diimbangi dengan upaya-upaya pemulihan dan
pelestarian, sehingga diluar kemampuan alam untuk menetralisir dan mendaurulang kembali gas-
gas tersebut.

Ungkapan Go green bukan hanya sebatas pada penghematan energi, tetapi juga pada
penghematan konsumsi plastik pada kehidupan sehari-hari.Plastik adalah salah satu polimer yang
paling sukar terurai secara alami.Beberapa sumber menyatakan rata-rata plastik memerlukan
waktu ratusan tahun untuk terurai secara alami.Sehingga masalah terbesar yang ditimbulkan dari
kemasan plastik adalah masalah sampah.Sampah plastik menjadi salah satu polutan yang sangat
mengancam kelestarian lingkungan. Sebagai contoh menurut www.reusablebags.com, fakta
mengenai permasalahan botol plastik antara lain adalah:

1. Orang Amerika membeli rata-rata 25 milyar minuman botol plastik per tahun dan
22 milyar botol akan berakhir di tempat sampah.
2. Pembotolan air adalah pemborosan. Konsumen membayar $ 7 milyar untuk air
botolan di Amerika tiap tahun.
3. 2,7 juta ton plastik dunia digunakan untuk pembotolan air tiap tahun.
4. 1,5 juta barrel minyak digunakan untuk memproduksi botol plastik untuk
Amerika. Hal ini sama dengan bahan bakar untuk 100.000 mobil amerika untuk
satu tahun.
5. Botol air minum dapat menjadi karsinogenik jika digunakan lebih dari satu kali,
karena mengandung polyethylene terephthalate.
6. Seperti semua plastik, botol akan terus bersama kita selamanya karena tidak dapat
terurai secara biologis (non biodegradable). Botol akan terpecah menjadi serpihan
kecil yang meracuni tanah dan air.
 7. Sampah botol akan menjadi polutan.

Sedangkan menurut sumber dari www.coolcitibag.com,permasalahan utama plastik yang

terkait dengan kelestarian lingkungan antara lain adalah:

1. Tas plastik dibuat dari sumber daya alam yang langka, yaitu minyak dan
menciptakan polusi mulai dari pembuatan sampai pembuangannya. Sebanyak 120
juta barel minyak mentah , yang termasuk sumber alam yang tidak dapat
diperbaharui, diperlukan untk produksi satu trilion kantong plastik setiap tahun
diseluruh dunia.
2. Plastik menimbulkan masalah sampah di jalan-jalan , sungai dan saluran air,
pantai, dan lingkungan kelautan. Sebanyak 47% sampah yang terbawa angin dari
tempat pembuangan akhirmerupakan sampah kantong plastik
3. Sekitar 80% sampah dilautan berasal dari daratan, dan hampir 90% adalah plastik.
Dalam bulan Juni 2006, program lingkungan PBB memperkirakan setiap mil
persegi ada 46.000 sampah plastik mengambang dilautan.
4. Suatu laporan mengenai sampah plastik di laut di dunia oleh
Greenpeacemenyatakan bahwa sedikitnya 267 jenis biota laut telah menderita dari
jeratan atau mencerna sampah laut. Diperkirakan 1 juta burung laut menelan atau
terjerat jaring plastik atau sampah lainnya setiap tahun.
5. Kantong plastik dianggap sebagai produk yang dapat dibuang dan tidak hancur
ditempat pembuangan. Diperlukan 1.000 tahun bagi plastik untuk terurai dan
hancur.
6. Hanya 0,6% s/d 1% kantong plastik yang dapat didaur ulang diseluruh dunia,
sisanya tetap mengendap ditanah.
7. Sampah plastik yang dibuang sembarangan menyumbat saluran air dan
menyebabkan banjir.
8. Sampah tas plastik yang dibuang ke saluran air mengakibat kan genangan air yang
menjadi sarang pembiak an nyamuk penyebab pe nyakit demam berdarah. Negara
dan kota-kota yang telah melarang atau mengurangi penggunaan kan tong plastik
adalah San Francisco, Hong Kong, Singapura, Australia, Irelandia,Taiwan,
Mumbai Scotlandia, Perancis, Tanzania, Switzerland, Denmark, Jerman, Afrika
 Selatan, Philippina.10. Pengenaan cukai sebesar 15 sen atas tas belanja plastik di
Republik Irlandia telah menurunkan pemakaian nya sampai dengan 90%.

Dengan kondisi atmosfer dan limbah plastik di bumi kita yang demikian, lantas hal-hal
apa kiranya yang dapat kita lakukan dalam upaya mengantisipasi atau minimal memperlambat
fenomena pemanasan global dan pencemaran lingkungan tersebut sehingga tidak semakin parah?

Sebetulnya kita semua dapat berperan dalam upaya mengurangi pemanasan global tersebut,
dimulai dari diri sendiri, keluarga, masyarakat, sampai negara atau pemerintah. Pada masyarakat,
misalnya tradisi-tradisi yag sudah diwariskan nenek moyang sejak dahulu, serta kebiasaan,
pengetahuan dan budaya yang pada dasarnya sangat baik dalam pelestarian lingkungan. Upaya
mengurangi pemanasan global tersebut juga dapat diwujudkan dengan memanfaatkan teknologi
Internet, yaitu membuat sebuah website mengenai infohal-hal yang mendukung gerakan go
green, seperti produk-produk ramah lingkungan dan tips-tips mengenai gaya hidup ramah
lingkungan, seperti upaya mendukung penghematan energi. Pembuatan website itu dapat
diwujudkan dengan menggunakan aplikasi pembuat web yang sederhana, seperti Drupal sebagai
Content Management System (CMS) dari bahasa pemrograman HTML, dan CSS sebagai style
sheet daridesign webyang akan dibahas lebih lanjut pada karya tulis ini.

I.2 Rumusan Masalah

1. bagaimanakah implementasi dari penggunaan aplikasi Drupal dan CSS di dunia
nyata?
2. Bagaimanakah cara untuk turut menjaga kelestarian lingkungan dengan
mensosialisasikan kepada masyarakat mengenai gerakan go green dengan lebih
praktis dan mudah?

I.3 Tujuan
Adapun tujuan dari penulisan karya tulis ini yaitu:
1. Dapat mengetahui tentang implementasi dari penggunaan aplikasi HTML dan
CSS di dunia nyata
2. Dapatturut menjaga kelestarian lingkungan dengan mensosialisasikan kepada
masyarakat mengenai gerakan go green dengan lebih praktis dan mudah
I.4 Manfaat

Sesuai dengan tujuan yang telah disebutkan, manfaat dari penulisan karya tulis ini adalah
selain penulis dapat mengmplementasikan penggunaan aplikasi HTML dan CSS3, penulis juga
dapat turut ambil alih dalam menjaga kelestarian lingkungan, seperti memberi informasi
mengenai produk-poduk yang ramah lingkungan, berusaha menarik minat masyarakat untuk
menggunakan produk-produk yang ramah lingkungan, dan memberikan tips-tips mengenai gaya
hidup ramah lingkungan dengan memanfaatkan kemajuan teknologi jaman sekarang, sehingga
dapat dilakukan dengan lebih praktis dan mudah

I.5 Ruang lingkup

 BAB II

TINJAUAN PUSTAKA

Dalam projek pembuatan website mengenai gerakan go green ini, penulis menggunakan
beberapa aplikasi, diantaranya Drupal sebagai Content Management System (CMS) dari bahasa
pemrograman HTML, dan CSS sebagai style sheet dari design web ini.

2.1 Cascading Styles Sheet (CSS)

Cascading Styles Sheet, atau biasa disingkat CSS berfungsi untuk menata dokumen
HTML yangsudah dibuat sebelumnya. Hal-hal yang biasa terdapat pada sebuah dokemen
HTMLyaitu: text, image, list, link, table, dan form. Dengan CSS,dokumen yang telah dibuat
dengan HTML sebelumnya dapat diatur, seperti mengatur posisi, warna,hiasan, atau apa saja
yang berhubungan dengan penampilan dari dokumen HTML yang sudah dibuat.Ada beberapa
istilah pada HTML, diantaranya TAG, Attribute, Content, dan Element.Sedangkan padaCSS,
terdapat istilahSelector, Property, dan Value.
Selector adalah sesuatu yang akan diberikan style, atau pada selector tersebut akan
diimplementasikanCSS. Property adalah sesuatu yang akan diimplementasikan pada selector.
Contoh dari property adalah:warna, jenis huruf, posisi text, dan bingkai. Sedangkan value adalah
nilai yang diberikan untuk property.
Berikut merupakan formula dari penulisan CSS.
Selector {property:value;}
P {font-family:verdana; color:red}
Keterangan:
 Letak property dan value berada didalam tanda { dan }
 Didalam selector bisa ada lebih dari satu property
 Pemisah antara property dan value adalah tanda : (titik dua)
 Pemisah antar poperty adalah ; (titik koma)
 Ada beberapa cara yang digunakan untuk mengimplementasikan CSS pada dokumen HTML,
diantaranya In-line Style Sheets, Embeded atauInternal Style Sheets, Linked atau External Style
Sheets, Linked dengan import.

2.1.1In-line Style Sheets

Implementasi CSS pada HTML dengan caraIn-line Style Sheets adalah
denganmengimplementasikan Property secara langsung pada TAG HTML. Caranaya, dengan
meletakanproperty-propertyyang ingin diimplementasikan didalam attribute style. Dengan cara
ini berarti tidak menggunakan selector, karena TAG dianggap sebagai selectornya. Contoh
implementasi CSS:
Format: attributestyle<tag style="property:value">content</tag>:
Contoh: <p style="color:red">Contoh Inline</p>
Jika jumlah property yang dimplementasikan pada TAG HTML lebih dari satu, maka
digunakan tanda ; (titik koma) sebagai tanda pemisah antar property. Contoh berikut ini
mengimplementasikan property color, font-family dan font-size pada TAG h2.
<h2 style="color:red;font-family:vardana;font-size:11px;">content</h2>
2.1.2 Embeded atau Internal Style Sheets
Internal Style Sheets mengimplementasikan property tidak secara langsung pada TAG
HTML, tapididefinisikan didalam selector.Definisi CSS ini terletak didalam TAG style yang
terletak didalamTAG head. Contoh:
<html>
<head>
<style>
h1 { color : blue; }
p { color : red; }
</style>
</head>
<body>
<h1>Ini Text Pertama</h1>
<p>Ini Text Kedua</p>
<h1>Ini Text Ketiga</h1>
<p>Ini Text Kempat</p>
 </body>

</html>
2.1.3 Linked/External Style Sheets
Linked/External Style Sheets mendefinisikan selector, property, dan value pada sebuah
file yangterpisah dengan file dokumen HTML.Untuk menggunakan file yang berisi CSS ini pada
dokumen HTML dengan menggunakan TAG link.TAG linkyang terletak didalam TAG
head.Berikut ini adalah contoh menggunakan file CSS yangmempunyai nama style.css pada
dokumen HTML:
<link rel="stylesheet" type="text/css" href="style.css">
Berikut ini adalah contoh meggunakan css dengan caraLinked/External Style Sheets.
Contoh berikut ini terdiri dari 2 buah file, yaitu index.html dan filestyle.css.
Isi file style.css
h1 { color : blue; }
p { color : red; }
Isi file index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Ini Text Pertama</h1>
<p>Ini Text Kedua</p>
</body>
</html>

2.1.4 Linked dengan Import

Untuk link
<style type="text/css" media="all">
@import url(http://us.js1.yimg.com/us.yimg.com/lib/reg/css/yregml_200507281400.css);
</style>
Dapat digunakan salah satunya, atau dikombinasikan ketiganya.

2.1.3.1 Text
 font-size
Value: xx-small | x-small | small | medium | large | x-large | xx-large larger | smaller|12px|
Property ini digunakan untuk menentukan ukuran font.
Contoh: p {font-size:12px;}
 font-weight
Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Property ini digunakan untuk ketebalan font.
Contoh : p {font-weight: bold;}
 font-style
Value: normal | italic | oblique
Property ini digunakan untuk membuat font italic atau tidak.
Contoh: p {font-style:italic;}
 text-decoration
Value: none | [ underline || overline || line-through || blink ]
ini digunakan untuk mendekorasi text.
Contoh: p {text-decoration: overline;}

 text-transform
Value: none | capitalize | uppercase | lowercase
Property ini digunakan untuk menentukan besar kecilnya huruf.
Contoh : p {text-transform: capitalize;}
 letter-spacing
Value : normal | < length >
Property ini digunakan untuk memberikan tambahan space antara huruf.
Contoh : p {letter-spacing: 12px;}
 word-spacing
Value: normal | < length >
 Property ini digunakan untuk memberikan tambahan space antara kata.
P {word-spacing: 12em;}
 line-height
Value: normal | < number > | < length > | < percentage >
Property ini digunakan untuk menentukan tinggi baris diantara text.
P {line-height:5em;}
 text-align
Value: left | right | center | justify
Property ini digunakan untuk mengatur posisi text pada element secara horizontal.
P {text-align: justify;}
 text-indent
Value: < length > | < percentage >
Property ini digunakan untuk mengatur indent baris pertama.
P {text-indent: 0.5cm;}
 vertical-align
Value: top | middle | bottom
Property ini digunakan untuk mengatur posisi text pada element secara vertical .
Contoh : td {vertical-align: top;}
 Ukuran
Berikut ini adalah beberapa cara penulisan value untuk ukuran:
Value Keterangan Contoh
em sama dengan tinggi character M font-size: 2em
px Unit dalam pixel font-size: 12px
% Prosentase font-size: 80%
pt Unit dalam point font-size: 12pt
 background
Ada beberapa property yang dapat digunakan untuk memanipulasi background.
 background-image
Value: <url> | none
Property ini digunakan untuk menentukan lokasi file yang akan dijadikan background
image.
 Contoh : p {background-image: url(‘file gambar’)}
 background-color
Value: < color > | transparent
Property ini digunakan untuk menentukan warna latarbelakang element HTML.
Contoh : body {background-color: red}
 background-repeat
Value: repeat | repeat-x | repeat-y | no-repeat
Property ini digunakan untuk menentukan perulangan penampilang image.

Contoh : p {background-repeat: repeat-x;}

 background-position
Value : [< percentage > | < length >] | [top | center | bottom] || [left | center | right]
Property ini digunakan untuk menentukan posisi background.
Contoh: p {background-position: center}
 background-attachment
Value: scroll | fixed
Property ini digunakan untuk menentukan apakah background dapat discroll bersama
dokumen atau tidak.
Contoh : p {background-attachment: fixed;}
 background
Value: < background-color > || < background-image > || < background-repeat > || <
background-attachment
> || < background-position >
Property ini digunakan untuk menentukan apakah background property ini merupakan
Shorthand Propertydari background.
 Border
Value: < border-width > || < border-style > || < color >
property ini digunakan untuk membuat bingkai disekitar element. Sama seperti margin
dan padding, Property border digunakan untuk mensetting ke-empat sisi dari
element(top, right, bottom, left).Border memiliki 3 nilai, yaitu: border-width, border-
style, dan color. border-width digunakan untukmenentukan ketebalan bingkai. border-
 styledigunakan untuk menentukan bentuk bingkai. Color digunakanuntuk menentukan
warna bingkai.ketigavalue border tersebut dapat diimplementasikan tersendiri.
 border-width
Value : [ thin | medium | thick | < length > ]
Property ini digunakan untuk ketebalan bingkai.
Contoh :
 border-style
Value: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]
Property ini digunakan untuk jenis bingkai.
 border-color
Value: < color >
Property ini digunakan untuk warna bingkai.
Contoh implementasi dari ketiganya adalah :
<p style="border: 1px solid blue;">
Ini sebuah paragaf yang menggunakan border property
</p>
 margin
Value : < length > | < percentage > | auto
Property ini digunakan untuk memberikan spasi disisi luar element.Property margin
digunakan untukmengatur empat sisi (top, right, bottom, left) element sekaligus. CSS
juga menyediakan property untukmengatur emapat sisi tersebut secara sendiri-sendiri,
yaitu: margin-top, margin-right, margin-bottom,margin-left.
Contoh:
body { margin: 5em }
Keterangan : setting semua sisi dengan margin 5em
p { margin: 2em 4em }
Keterangan : setting top dan bottom 2em, right dan left 4em

div { margin: 1em 2em 3em 4em }

Keterangan : top = 1em, right = 2em, bottom = 3em, left = 4em
 Nilai auto akan menyebabkan pengaturan posisi diatur otomatis (biasanya menyebabkan
posisinya
element menjadi ketengah)
 padding
Value : < length > | < percentage >
Property ini digunakan untuk memberikan spasi pada sisi dalam sebuah element.Sama
seperti margin,Property padding digunakan untuk mengatur empat sisi element.Property
individunya adalah padding-top,padding-right, padding-bottom, padding-left.
Contoh:
body { padding: 5em }
Keterangan: setting semua sisi dengan padding 5em
p { padding: 2em 4em }
Keterangan: setting top dan bottom 2em, right dan left 4em
div { padding: 1em 2em 3em 4em }
Keterangan: top = 1em, right = 2em, bottom = 3em, left = 4em
Contoh Pseudo Class
Berikut ini adalah contoh penggunaan pseudo class:
<style>
a:link { font-size:15px;
color:green;
text-decoration:underline;}
a:active { font-size:15px;
color:green;
text-decoration:underline;}
a:visited { font-size:15px;
color:red;
text-decoration:underline;}
a:hover { font-size:20px;
color:blue;
font-weight:bold;
text-decoration:none;}
 </style>
Untuk penggunaan class, dapat ditambahkan class pada: misalnya padaa:hover.link
{ font-size:20px; } dan untuk memanggilnya tinggal anda tambahkan class di <a href =””>
<div align="center"><a href="index.html" class=”link”>Home</a></div>
Keterangan :
Ada 4 pseudo class, biasanya diimplementasikan pada link dengan Menggunakan Tag a:
1. link - Untuk link yang belum pernah dikunjungi
2. visited- Untuk link yang pernah dikunjungi
3. active- Keadaan ketika link mendapatkan focus
4. hover - Keadaan ketika cursor berada diatas link
 Class dan ID Selector
Pada pembahasan sebelumnya, property diimplementasikan pada Selector, dalam hal ini,
selector yangdimaksud adalah TAG HTML. Dalam CSS, selector juga dapat
didefinisikan sendiri. Selectoryang didefiniskan sendiri ini disebut dengan class dan id
selector. Keuntungan dari mendefinisikan sendiri adalah dapat memiliki HTML element
yang sama, tapi memilikitampilan yang berbeda, sesuai dengan definisi CSS pada class
atau id selectornya. Jadi, class danid selector ini, digunakan untuk memberikan ciri
tertentu terhadap TAG HTML yang ingindiimplementasikan CSS.
Dalam CSS, sebuah class selector adalah nama yang didahului dengan tanda titik (.),
sedangkan id selectoradalah nama yang didahului dengan pager (#). Class dan Id
selectorhanya bisa digunakan pada Embeded/Internal Style Sheets dan Linked/External
Style Sheets.Berikut ini adalah contoh mendefinisi class selector (dengan nama intro yang
didahului dengan tanda #)dan id selector (dengan nama top yang didahului dengan
tanda .) :
#top { border: 1px solid blue; }
.intro { border: 1px solid red; }
Bila akan membuat class dan id selector, maka, untuk menggunakannya pada TAG
tertentu, anda harusmenambahkan attribute class atau id dengan nilai sesuai dengan nama
id dan class selector yangsudah anda buat sebelumnya (intro dan top).
Berikut ini adalah contoh memanfaatkan definisi class dan id selector:
<div id="top">
 <p class="intro">Test intro</p>
</div>
Keterangan:
- Untuk medefinisikan sebuah id selector didahului dengan tanda # yang kemudian
dikuti dengannama selectornya.
- Untuk menggunakan id selector, anda harus menambahkan attribute id yang diikuti
dengan nama idselectornya pada TAG HTML yang ingin menggunakan CSS yang
sudah didefinisikan pada idselector tersebut.
- Pendefinisian class selector didahului dengan tanda titik (.), yang kemudian diikuti
dengan namaselectornya.
- Untuk dapat menggunakan class selector pada TAG HTML, Anda harus
menambahkan classAttribute yang diikuti dengan nama class selectornya
 Grouping
Grouping adalah memberikan property yang sama pada selector yang berbeda tanpa
harus mengulangnya.Caranya denan menambahkan tanda koma (,) pada nama selector
yang ingin mempunyai property yang
sama. Contoh :
BODY,INPUT,TD,TEXTAREA,A { font-family : Verdana,Arial; font-size : 10px; }
 Pseudo Element
Pseudo element mengacu kepada bagian dari element, seperti huruf pertama dari sebuah
paragraph.Pseudoelement yang dapat digunakan adalah first-line dan first-letter. Cara
menggunakannya denganmenambahkan tanda titik dua (:) dan nama pseudo element pada
tag HTML.
Format : selector:pseudoelement { property : value; }
Contoh :
<html>
<head>
<style>
p.pse:first-letter { font-size: 3em; float: left;
padding-right:5px; }
p.pse:first-line { font-weight: bold; }
 </style>
</head>
<p class="pse"> Latihan terakhir </p>

2.2 Drupal

Drupal adalah sebuah perangkat lunak Content Management System (CMS)atau sistem
manajemen konten yang bebas dan terbuka yang di distribusikan dibawah lisensi GPL,
pengembangan dan perawatannya dilakukan oleh ribuan komunitas pengguna dan pengembang
di seluruh dunia. Dibuat dengan bahasa pemrograman PHP, drupal dapat dipasang pada beberapa
jenis database, seperti MySQL, PostgreSQL, SQLite,MariaDB dan juga MsSQL. Web server
yang mendukung, diantaranya Apache, Nginx, IIS yang berjalan pada sistem operasi Microsoft
Windows, Mac OS X, Linux dan FreeBSD. Dapat diunduh secara bebas dan dapat digunakan
secara bebas juga, sehingga memungkinkan setiap orang baik secara individu maupun komunitas
untuk mempublikasi, mengatur dan mengorganisir berbagai jenis dari isi/konten pada website.
Kemampuannya tidak sekedar sebagai CMS, namun dengan modul API-nya Drupal juga dapat
digunakan sebagai CMF dalam membangun aplikasi berbasis Web

Drupal dapat digunakan untuk membangun:

 Portal Web Komunitas

 Forum Diskusi
 Website Perusahaan
 Aplikasi Internal
 Website Personal atau Blog
 Aplikasi Komersial E-commerce
 Kumpulan Sumber Informasi
 Situs Jaringan Sosial
 Jaringan intranet
 Surat Kabar (Newsletter)
Drupal memiliki beberapa keunggulan, diantaranya:

 CMS (Content Management Systems) Sistem Manajemen Konten

 CMF (Content Management Framework) Sistem Platform
 Blog Pengguna tunggal dan pengguna jamak
 Built-inForumsengine
 Multi situs hanya dengan satu instalasi
 Multi bahasa, sudah mendukung bahasa Indonesia dan Bahasa Jawa.
 Konten Multimedia
 Mendukung banyak jenis database seperti MySQL, PostgreSQL, SQLite, MsSQL
dan MariaDB
 Bisa dipasang dengan webserver Apache, Nginx, IIS dan Lighttpd
 Pengaturan hak akses pengguna tak terbatas, bukan hanya pengaturan hak akses
jenis konten bahkan bisa memberikan hak akses tiap field data
 Bisa membuat jenis konten baru yang tipe datanya sesuai keinginan pengguna

Konsep dari Drupal ini adalah:

 Node, adalah satuan konten yang terdapat dalam Drupal. Sebuah node dapat merupakan
blog, topik forum, berita, halaman statis, gambar, video, audio, maupun Flash. Kumpulan
node inilah yang membentuk keseluruhan konten dalam sebuah website berbasis Drupal.
 Taxonomy. Node yang begitu banyak perlu dikategorikan sesuai topik masing-masing.
Dalam Drupal terdapat modul Taxonomy yang digunakan untuk mengkategorisasikan
konten. Nama Taxonomy diambil dari ilmu klasifikasi. Dengan demikian setiap satuan
konten bisa disebutkan apakah berkategori Politik, Ekonomi, Sains, atau Agama. Cara
mengklasifikasikan konten sepenuhnya diserahkan kepada pengguna yang punya hak
untuk mengatur Taksonomi. Modul-modul lain juga menggunakan modul Taxonomy
untuk mengklasifikasikan konten tertentu, seperti misalnya Forum dan Image Gallery.
 Comment, merupakan tanggapan terhadap sebuah node yang dituliskan oleh user
(Komentar).
  Menu, dalam drupal adalah sistem penanganan request melalui URL. Jika Clean URL
tidak diaktifkan, maka setiap query string yang berbentuk ?q= akan ditangani oleh sistem
menu.
 Module. Website Drupal dapat ditambah dengan modul-modul tertentu sesuai keperluan.
Modul adalah satuan program yang ditulis dalam PHP yang jika diaktifkan akan
menambah fungsi tertentu. Misalnya modul Organic Groups untuk memberi fungsi
group/mailing list seperti layaknya Google Groups ataupun Yahoo Groups. Modul
Images untuk mengijinkan user mengupload gambar sebagai node.
 Theme, adalah penampakan luar dari sebuah website Drupal. Sistem theme akan
mengatur bagaimana website ditampilkan, layout halaman, penempatan block, style, dan
sebagainya. Theme dapat diubah-ubah dengan memilih theme yang tersedia dalam
direktori /themes maupun /sites/all/themes.
 Hook. User tidak pernah menyadari keberadaan konsep ini dalam Drupal, kecuali mereka
adalah developer. Hook adalah metoda yang digunakan Drupal agar setiap modul dapat
menambahkan fungsi tertentu, dengan cara mengaitkan fungsi tertentu tersebut pada hook
yang dimiliki sistem Drupal. Sebagai contoh, setiap modul dapat menambah menu baru
dengan cara mendefinisikan fungsi modul_menu, yang akan menjamin Drupal tidak lupa
memperhitungkan keberadaan menu tersebut ketika diperlukan.

Fitur Joomla Wordpress Drupal

Lisensi GPL GPL GPL
Versi Terakhir 1.6 3.0 7.0
Tahun pembuatan 2005 2003 2001
Blog Ya Ya Ya
Bahasa program PHP PHP PHP
Forum Tidak (dg modul Tidak (dg modul Ya
tambahan) tambahan)
Teks editor TinyMice TinyMice TinyMice,CKEditor,Whizzywig
User rule terbatas terbatas Tidak terbatas
Database MySQL MySQL MySQLPostgreMsSQLSQLite
Multisite Tidak Tidak Ya
Multilanguage Ya (id, jv) Ya (id, jv, su) Ya (id, jv)
Ukuran paket (zip) 7,6MB 3MB 3MB
Ukuran file 29MB 11MB 12MB
terpasang
 BAB III

METODE PENELITIAN
 BAB IV

PEMBAHASAN

Penggunaan CSS dan Drupal dapat dimanfaatkan dalam dunia nyata, misalnya untuk
pembuatan website untuk menggalakkan gerakan go green. Dengan menggunakan softwareini,
dapat dibuat sebuah website yang cukup menarik, dengan beberapa contentyang berisi informasi
tentang tips-tips gerakan go green ini.

Beberapa content yang ada pada web ini, diantaranya Home, About Us, dan Contact Us.

4.1 Home

Pada content ini, terdapat artikel-artikel yang berhubungan dengan gerakan go

green.Pada content ini, user dapat memperoleh informasi mengenai upaya pelestarian lingkungan
dan gerakan go green.Pada content ini juga terdapat mesin pencari, sehingga dapat memudahkan
user jika ingin mencari suatu artikel dari websiteini dengan cara memasukkan keyword dari
artikel yang ingin dicari.

4.2 About Us

Content ini berisi tentang pembuat website, misalnya siapa pembuat web, pekerjaan, dan
sebagainya.Sehingga bila user ingin mengetahui tentang pembuat web, dapat dilihat pada
content ini.

4.3 Contact Us

Content ini berfungsi untuk membantu user bila ingin menghubungi pembuat web. Di
sini diberitahukan bagaimana cara menghubungi pembuat web, sehingga bila ada pertanyaan,
kritik, atau saran, bisa langsung menghubungi pembuat web dengan cara yang tertera pada
content ini.
 BAB V

KESIMPULAN DAN SARAN

 DAFTAR PUSTAKA

http://id.wikipedia.org/wiki/Drupal. Diakses tanggal 1 Mei 2011.

http://nasrul.nurulfikri.com/CSS.pdf. Diakses tanggal 1 Mei 2011.