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 DrupalLisensi GPL GPL GPL

Versi Terakhir 1.6 3.0 7.0Tahun pembuatan 2005 2003 2001

Blog Ya Ya YaBahasa program PHP PHP PHP

Forum Tidak (dg modul tambahan)

Tidak (dg modul tambahan)

Ya

Teks editor TinyMice TinyMice TinyMice,CKEditor,WhizzywigUser rule terbatas terbatas Tidak terbatasDatabase MySQL MySQL MySQLPostgreMsSQLSQLiteMultisite Tidak Tidak Ya

Multilanguage Ya (id, jv) Ya (id, jv, su) Ya (id, jv)Ukuran paket (zip) 7,6MB 3MB 3MB

Ukuran file terpasang

29MB 11MB 12MB

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.