Implementasi & perancangan sebuah Web

MEMAHAMI TEKNIK IMPLEMENTASI SITUS WEB DASAR
Metodologi pembangunan situs WEB

Elemen dari metodologi pembangunan situs web adalah sebagai berikut:
· Informasi audience
Informasi-informasi ini termasuk latar belakang pengguna, minat, dan semua perincian yang membantu untuk mempertajam informasi untuk dicocokkan dengan kebutuhan audience.
· Proposal
Berisi tentang informasi yang jelas tentang alasan dan ruang lingkup dari existensi web.
· Pernyataan yang Objektif
Sebuah pernyataan objektif yang berdasarkan pada proposal
· Informasi Domain
Kumpulan pengetahuan dan informasi tentang subjek domain yang ada di cover web, yaitu informasi yang disediakan untuk audience web dan informasi yang dibutuhkan oleh perancang web.
· Spesifikasi Web
Adalah gambaran secara rinci dari batasan dan elemen yang akan ditampilkan di web.
· TampilanWeb
Adalah informasi yang akan dikirimkan kepada user. Tampilan tersebut adalah hasil dari rancangan dan proses implementasi pembangunan web.

Ada enam proses dari metodologi perancangan situs web berikut:
Ø Perencanaan
Antisipasi dan memutuskan target untuk audience, tujuan dan sasaran dari informasi. Perencanaan juga dilakukan untuk informasi domain melewati sebuah proses pendefinisian, spesifikasi informasi pendukung yang harus dikumpulkan,
bagaimana informasi dikumpulkan dan bagaimana informasi tersebut di up date.
Ø Analisis
Proses mengumpulkan dan membandingkan informasi tentang web dan pengoperasiannya dengan tujuan untuk memperbaiki kualitas web secara keseluruhan.
Ø Perancangan
Sebuah proses yang dilakukan oleh perancang web, mengerjakan spesifikasi web, membuat keputusan tentang bagaimana komponen web diaktualisasikan.
Ø Implementasi
Proses dibangunnya web menggunakan Hyper Text Markup Language (HTML), sehingga proses implementasi mungkin lebih mirip dengan pengembangan software sebab menggunakan syntax yang spesifik untuk pengkodean struktur web dalam sebuah bahasa formasi dalam file komputer.
Ø Promosi
Proses mengendalikan semua masalah promosi di web. Termasuk di dalamnya bagaimana web ini dikenal eksis oleh komunitas on line melewati publisitas, sebaik bisnis atau hubungan informasi lain dengan web yang lain.
Ø Inovasi
Proses pengembangan dan perbaikan secara terus menerus.

Teknologi Program
Seiring dengan perkembangan intemet, teknologi web dari waktu ke waktu juga mengalami perkembangan yang pesat.Web saat ini tidak hanya merupakan sebuah halaman on-line yang hanya dapat dibaca atau statis, namun telah berkembang menjadi web yang lebih dinamis dan interaktif, yang mampu
memberikan dan menerima respon dari dan ke pengakses.
Di dalam pembuatan web yang statis dan dinamis tersebut, web memiliki
Teknologi web yang dikenal sebagai web server dan web browser. Web server
berfungsi untuk melakukan service sedangkan web browser berfungsi untuk
memakai/meminta service.
Web server yang ada saat ini adalah Microsoft IIS (Internet Information Service), Apache, Microsoft PWS (Personal Web Server), dan lain-lain. Sedangkan untuk web browser, hanya ada dua yang mendominasi yaitu Microsofit IE (lnternet Explore) dan Netscape Navigator, selain beberapa nama seperti Opera, Magellan, dan lain-lain.
Karena web server dan juga web browser dapat diprogram, maka untuk
bahasa pemrograman web browser dikenal JavaScript, dan CSS yang dikeluarkan
oleh W3C {World Wide Web Consortium) dan untuk formatnya digunakan sudah
ada standar yang jelas yaitu HTML. Sedangkan untuk web server, tidak pernah
ada standar seperti itu. Sehingga, ada banyak bahasa pemrograman yang saling
bersaing. Di antaranya PHP, ASP, dan lain-lain.

Teknologi Client
Perancangan aplikasi client server harus mempertimbangkan hal-hal sebagai berikut:
1. Banyaknya client di dalam sistem.
2. Apakah sistem menggunakan lebih dari satu DBMS.
3. Kebutuhan update aplikasi di masa mendatang.
Saat ini arsitektur client-server yang banyak digunakan dalam industri disebut two-tier architecture. Pada arsitektur ini, server mengirim data dan client mengakses data. Server memainkan peranan yang dominan pada arsitektur ini. Keuntungan sistem ini adalah kesederhanaan dan kompatibilitas dengan sistem yang legal.
Arsitektur client-server yang dikembangkan kemudian adalah three-tier architecture. Pada model ini, layer direpresentasikan sebagai host, server dan client. Server memainkan peranan sebagai penengah dengan mengirim aturan bisnis (prosedur atau constraint) yang digunakan untuk mengakses data dari host.

Teknologi Server
Perkembangan teknologi Server memang tidak sepesat perkembangan perangkat komputer lain, mengingat market Server yang terbatas. Salah satu fungsionalitas dari server adalah sebagai web server yang memungkinkan server tersebut mengelola beberapa website dan melayani browser dari klien yang mengakses halaman yang terdapat dalam website tersebut. Sebuah web server mampu memberikan layanan halaman web, file, gambar, atau data kepada klien yang mengakses.Web server adalah fungsionalitas yang paling umum yang diimplementasikan dalam sebuah server. Sebuah web server dapat mengelola beberapa website dan setiap website dapat diakses oleh beberapa klien.
Dampak dari sentralisasi informasi ini adalah kebutuhan akan sistem server yang dituntut untuk mampu melayani sebanyak apapun klien yang mengakses. Selain itu sentralisasi ini menjadikan internet yang tanpa batas, diisi oleh penyedia informasi yang sifatnya masih terbatas.

Teknologi Content
Jika Anda seorang webmaster yang mengelola sebuah situs maka sudah mengenal apa yang dinamakan dengan CMS. CMS merupakan singkatan dari Content Management System , suatu software yang berguna untuk memanipulasi content atau isi dari suatu situs web. Maksud dari memanipulasi disini adalah bisa menambah, mengedit atau menghapus isi dari suatu situs. Dengan CMS, semua itu bisa dilakukan tanpa pengguna harus belajar HTML atau bahasa pemrograman web.
Karena CMS adalah suatu software (perangkat lunak) maka CMS bisa berbasis web ataupun aplikasi desktop biasa. Saat ini CMS yang paling banyak adalah CMS yang berbasis web. Apa kelebihan dari CMS berbasis web? Kelebihannya adalah Anda bisa melakukan update (perubahan) isi situs dari mana saja selama Anda terhubung ke internet dan tool atau alat yang digunakan hanyalah web browser. Selain itu dengan CMS maka Anda bisa melakukan update atau perubahan isi situs tanpa harus mengutak-atik layout atau struktur dari situs Anda.
Ada lima fungsi yang dalam kenyataannya memang tidak dapat secara tegas dipisahkan satu terhadap yang lain yaitu bahwa mereka itu saling terkait dan bahkan pada aspek-aspek tertentu berimpitan seperti yang digambarkan pada gambar berikut.

Penjelasan dari kelima fungsi tersebut diuraikan berikut ini :
Ø Author
Yang membangun isi atau content adalah author dengan kedudukan yang cukup penting karena suatu intranet tanpa content tidak punyai nilai apa-apa.

Ø Administrator
Administrator adalah individu yang bertanggung jawab terhadap proses manajemen dan kebijaksanaan dari isi (content) serta untuk membangun halaman-halaman dari perantara jasa (broker pages) ditempat sendiri (on-site) maupun pada direktori ataupun melalui perangkat bantu navigasi dilokasi luarnya (off-site). Termasuk juga dalam tugas ini penetapan pagar-pagar pengaman (fire-walls) serta menyajikan kiat-kiat strategi pengamanan, serta berwenang menindak melalui penyidikan dimana perlu, atas ketidak taatan terhadap kebijaksanaan dan prosedur yang berkaitan dengan isi (content) dari kelompok serta lain-lain, termasuk yang kemunculan tidak secara formal.
Ø Webmaster
Peranannya dapat dikatakan sebagai komplimen dari seorang manajer jaringan. Tugas-tugas yang banyak ditemui, berkaitan dengan pendaftaran nama domain (domain name), penginstalasian dari Web servers bahkan sampai pada penyiapan konsep dari perjanjian kerja dengan penyedia layanan (service providers), pencatatan prestasi (performance monitoring), dan implementasi dari scripts khusus serta bermacam antar muka (intefaces), termasuk misalnya modul-modul pengamanan, akses pada basis data maupun antar muka e-mail.
Ø Publisher
Isi atau content formal dari Intranet menjadi tanggung jawab dari Publisher.
Ø Editor
Editor bertanggung jawab atas pembentukan dan perawatan content yang terkait dengan lingkup individual dari intranet.

Comments (115) Posted by kumala on Friday, August 15th, 2008

readmore...

Cara Membuat tombol icon Menu pada Frontpage Sreenshot

Cara Membuat Tombol PADA Frontpage Screenshots

Video Tutorial

Tombol Vista add-in untuk Expression Web dan Frontpage memungkinkan Anda untuk membuat menu yang kuat menu dropdown, langsung di Expression Web, FrontPage 2000 (versi 9), Microsoft FrontPage 2002 (versi 10), Microsoft Office FrontPage 2003 (versi 11). Sepenuhnya disesuaikan penampilan! Gunakan salah satu dari 500 + tombol web, 100 desain submenu, 6600 + ikon, 50 siap pakai sampel, atau membuat sendiri menggunakan editor tema. Dengan dukungan untuk gambar kustom, ikon, warna, gaya font, karena kemungkinan tidak terbatas. Anda akan membuat benar-benar baik mencari situs web menu dan tombol html html dengan kemampuan desain sedikit atau tidak ada sama sekali! Membuat, masukkan, memodifikasi menu website tanpa meninggalkan web favorit Anda lingkungan pengembangan!

Menu, Button, dan Icon Collection

Expression Web menyediakan menu koleksi 1400 tombol web, ikon 6600, 300 siap pakai sampel, sehingga Anda akan membuat menu tampak benar-benar baik dan tombol dengan keterampilan sedikit atau nodesign sama sekali! Web 2.0, Mac, iPhone, Aqua tombol, Vista, XP, transparan, bulat, mengkilap, logam, 3d, menu tab, menu drop-down akan menjadi angin! Button dan Icon Sampel

      

Beli Sekarang!    ::   Unduh Free Trial    ::   Info Lebih

Fitur

Simpan proyek. Simpan tombol gambar Anda sebagai html
Anda dapat menyimpan proyek saat ini dalam file proyek (*. XWB) atau ke dalam file HTML (*. html).menu berbasis teks Anda dapat membuat menu dengan berbasis teks item atas. Menu tersebut akan dimuat lebih cepat di website Anda (dibandingkan dengan gambar navigasi berbasis). Struktur Menu terdiri dari UL bersarang HTML dan tag LI. Standar compliant struktur menu sederhana untuk menyesuaikan dan memperbarui. Search Engine Friendly Expression Web menu menghasilkan kode html yang transparan untuk mencari laba-laba. Orientasi Menu Buat kedua menu horisontal dan vertikal dan submenu dengan jumlah menu pada satu halaman. Besar Mencari Web Navigasi dengan Upaya Minimum Expression Web menyediakan menu 500 + tombol web, 100 desain submenu, 6600 + ikon, 50 siap pakai sampel, sehingga Anda akan membuat menu situs benar-benar baik mencari html dan tombol html dengan kemampuan desain sedikit atau tidak ada sama sekali ! Vista, XP, Win98, Mac, Aqua tombol, bulat, mengkilap, logam, gaya 3d, menu tab, menu drop-down akan menjadi angin! Kualitas Tinggi dan Hasil profesional Anda tidak perlu tahu HTML, JavaScript, CSS atau bahasa coding lain untuk membuat multi-state tombol rollover web, profesional lintas-browser, mesin pencari ramah DHTML menu. Semua harus Anda lakukan adalah membuat beberapa klik dan menyesuaikan tombol yang Anda inginkan untuk mereka untuk tampil. Vista Web Buttons akan menghasilkan semua gambar yang diperlukan, html, javascripts, gaya css otomatis!

Beli Sekarang!    ::   Unduh Free Trial    ::   Info Lebih

Cara menggunakan Tombol Vista dengan FrontPage


Tombol vista tidak dikembangkan sebagai ekstensi Frontpage, tetapi Anda dapat menggunakannya sebagai file standar Javascript. Untuk menginstal menuinto halaman html Anda, Anda harus melakukan hal-hal berikut: 1).Membuat dan menyimpan tombol Anda dalam folder temp menggunakan Vista aplikasi Buttons. Anda CANUSE "Simpan sebagai HTML" fungsi.



Anda dapat memasukkan nama yang Anda suka, misalnya masukkan "menu":

Jadi Anda akan memiliki menu.html file dan "menu-file" folder dengan semua file menu.

2). Anda dapat menambahkan drop-down menu javascript ke halaman tunggal atau banyak halaman menggunakan Shared Borders, Sertakan Halaman atau Template Web Dinamis sehingga Anda tidak perlu menambahkannya ke dalam setiap halaman secara terpisa

readmore...

Manfaat Penggunaan CSS dalam Border

Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline

23^‘11

Febru

HTML & CSS Categories

Semua bentuk elemen di HTML seperti div, p, h, ul, li dan lain sebagainya pada dasarnya adalah sebuah kolom kotak yang membungkus isi (content) HTML. Ada beberapa property dalam box model CSS diantaranya Border, Padding, Margin dan content HTML itu sendiri. Setiap box model ini memungkinkan kita untuk membuat jarak antara yang satu dengan yang lainya, jadi dengan box model ini setiap kolom bisa di beri ukuran jarak antara satu dengan yang lainya sehingga kotak-kotak kolom tidak tampil menyatu dan tampak lebih bagus untuk di lihat.

Apabila box model kita gambarkan mungkin anda bisa lebih paham, berikut ini saya tampilkan sebuah illustrasi box model



penjelasan:

• Margin - memungkinkan kita untuk memberi jarak batas antara kolom kotak satu dengan yang lainya. margin tidak memiliki background warna (transparan)
• Border - sama halnya dengan border memungkinkan kita memberi jarak bedanya border kita bisa mendefinisikan warna background
• Padding - memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content
• Content - adalah isi seperti text dan gambar yang ada di kolom elemen HTML seperti div, p, h, dan lainnya

Bila anda menggunakan CSS box model untuk suatu elemen HTML maka aturan lebar dan tinggi dari content bisa berubah, misalnya anda menuliskan Kode CSS berikut pada sebuah div yang berukuran lebar 300px dan tinggi 200px

div.column {
 width:300px;
    height:200px;
    margin:10px;
    border:5px solid #000;
    padding:10px;
}

berdasarkan kode diatas maka lebar dan tinggi kotak div bukanlah 300 pixel x 200 pixel, melainkan 350 pixel x 250 pixel

• Lebar : 300 px + batas kiri (margin:10px + border:5px + padding:10px) + batas kanan (margin:10px + border:5px + padding:10px)
• Tinggi : 200 px + batas atas (margin:10px + border:5px + padding:10px) + batas bawah (margin:10px + border:5px + padding:10px)
• Total lebar 350px dan tinggi 250px

Maaf hanya untuk pecinta i.e ukurannya tidak akan 250 pixel, box model adalah apa yang menjadi sebuah dilema untuk banyak pengembang web mengenai kompatibiltas browser. Design CSS yang sudah mulus di browser lain banyak sekali berantakan di i.e dan sedikit yang tau untuk menyelesaikan masalah ini
i.e secara otomatis menyertakan lebar dan tinggi pada setiap elemen yang kita buat, supaya i.e tidak seenaknya menambah atau mengurangi komposisi lebar dan tinggi komposisi elemen maka tambahkan tag berikut di awal pembuatan HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div.column {
 width:300px;
    height:200px;
    margin:10px;
    border:5px solid #000;
    padding:10px;
}
</style>
</head>
<body>
<div class="column"> Test </div>
</body>
</html>

Penggunaan Border

Pada border terdapat property Border Width, Border Color, dan Border Style. Proprty border-width digunakan untuk menentukan lebar dari border, border-color untuk warna dan border-style digunakan untuk gaya borrder itu sendiri misalnya membentuk garis lurus, putus-putus, atau garis titik-titik.

Cara menuliskan border adalah sebagai berikut:

div.column {
 width:200px;
    height:20px;
    border-width:5px;
 border-color:#39F;
 border-style:solid;
}

/* CSS border diatas bisa juga dituliskan seperti ini*/

div.column {
 width:200px;
    height:20px;
    border:5px #39F solid;
}

Hasilnya dari penerapan border diatas :

Sample

Property dari border dan masing-masing nilainya dapat dilihat pada tabel di bawah

Property	Keterangan	Nilai
border	Menentukan semua gaya border dalam satu deklarasi	border-width border-style border-color
border-bottom	menentukan semua gaya border bawah dalam satu deklarasi	border-bottom-width border-bottom-style border-bottom-color
border-bottom-color	menentukan warna border bawah	border-color
border-bottom-style	menentukan gaya border bawah	border-style
border-bottom-width	menentukan lebar border bawah	border-width
border-color	menentukan warna kolom border	color_name hex_number rgb_number transparent inherit
border-left	menentukan semua gaya border kiri dalam satu deklarasi	border-left-width border-left-style border-left-color
border-left-color	menentukan warna border kiri	border-color
border-left-style	menentukan gaya border kiri	border-style
border-left-width	menentukan lebar border kiri	border-width
border-right	menentukan semua gaya border kanan dalam satu deklarasi	border-right-width border-right-style border-right-color
border-right-color	menentukan warna border kanan	border-color
border-right-style	menentukan gaya border kanan	border-style
border-right-width	menentukan lebar border kanan	border-width
border-style	menentukan gaya dari keseluruhan kolom border	none hidden dotted dashed solid double groove ridge inset outset inherit
border-top	menentukan semua gaya border atas dalam satu deklarasi	border-top-width border-top-style border-top-color
border-top-color	menentukan warna border kanan	border-color
border-top-style	menentukan gaya border kanan	border-style
border-top-width	menentukan lebar border kanan	border-width
border-width	menentukan lebar dari keseluruhan kolom border	thin medium thick length inherit

Penggunaan Outline

Outline jarang di gunakan tapi fungsinya untuk membuat elemen terlihat dan berada di luar garis border sangat tipis. Penulisan Outline tidak jauh berbeda dengan penulisan border, sedangkan property dari outline dapat dilihat pada tabel dibawah

	Keterangan	Nilai
outline	Menentukan semua opsi outline dalam satu deklarasi	outline-color outline-style outline-width inherit
outline-color	menentukan warna outline	color_name hex_number rgb_number invert inherit
outline-style	menentukan gaya outline	none dotted dashed solid double groove ridge inset outset inherit
outline-width	menentukan lebar outline	thin medium thick length inherit

Penggunaan Margin

Margin memberikan ruang atau jarak di sekitar elemen HTML, apabila anda menguasai microsoft office atau open office pasti lah tau apa itu margin, prinsipnya sama saja. Penulisan margin sama saja seperti penulisan HTML lainnya sedangkan property margin pada CSS dapat di lihat pada tabel di bawah.

	Keterangan	Nilai
margin	digunakan untuk memnentukan jarak margin pada satu deklarasi	margin-top margin-right margin-bottom margin-left
margin-bottom	menentukan jarak margin bawah	auto length %
margin-left	menentukan jarak margin kiri	auto length %
margin-right	menentukan jarak margin kanan	auto length %
margin-top	menentukan jarak margin atas	auto length %

Penggunaan Padding

memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content berikut saya berikan sampel penggunaan padding dan border bersamaan:

div.column {
 width:200px;
    height:20px;
    padding 20px;
    border:5px #39F solid;
}

Hasilnya akan seperti kolom berikut, kalau anda bandingkan dengan contoh pada border diatas akan terlihat perbedaanya:

Sample

Property dari padding dan masing-masing nilainya dapat dilihat pada tabel di bawah

Property	Description	Values
padding	Menentukan keseluruhan opsi padding dalam satu deklarasi	padding-top padding-right padding-bottom padding-left
padding-bottom	menentukan lapisan padding bawah	length %
padding-left	menentukan lapisan padding kiri	length %
padding-right	menentukan lapisan padding kanan	length %
padding-top	menentukan lapisan padding atas	length %

readmore...

Cara mudah membuat Bloquete Dengan menambahkan tag CSS

Merubah Blockquote di Blog

Blockquote merupakan koding HTML yang biasanya digunakan untuk mengutip artikel atau postingan dari sumber-sumber lain. Biasanya dalam HTML blockquote biasa dipanggil dengan menggunakan tag <blockquote></blockquote>.Secara default hampir semua template baik itu berbayar ataupun gratis menyediakan atau telah memasang blockquote ini. Namun yang jadi masalah adalah apakah blockquote yang tersedia ini telah sesuai dengan selera kita.

[blockquote 1]

Tapi jangan khawatir karena blockquote ini dapat kita rubah semau kita dengan sedikit mengutak-atik bagian css dari blog kita. Modifikasi blockquote yang bisa kita lakukan adalah seperti penambahan background, membuat border, merubah ukuran font, merubah jenis font, merubah warna, dan masih banyak lagi.

[blockquote 2]

Ada yang perlu di ingat dalam merubah blockquote ini. Usahakan anda memilih blockquote yang sesuai dengan kebutuhan blog anda. Jika blog anda ber niche pendidikan misalnya, usahakan menggunakan blockquote yang sederhana dan memiliki gambar quote atau tanda petik. Berbeda jika blog anda ber niche tutorial blogging. Biasanya blogger yang membuat tutorial blogging menggunakan fungsi quote ini untuk menampilkan kode HTML atau CSS yang diberikan.

[blockquote 3]

Bagaimana tertarik untuk merubah blockquote seperti yang ada di postingan ini? Silahkan salin kode CSS di bawah ini dan gantikan pada bagian CSS blockquote anda. Biasanya blockquote dibagian CSS ditulis pada bagian awal, blockquote.

[blockquote 4]

KODE HTML 
Hanya cukup dengan membuat <blockquote>bla.. blaa... blaaa</blockquote>. KODE CSS blockquote 1

blockquote style {font: 14px/20px italic Times, serif; padding-left: 70px; padding-top: 18px; padding-bottom: 18px; padding-right: 10px; background-color: #dadada; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 5px; background-image: url('http://css-tricks.com/examples/Blockquotes/images/openquote4.gif'); background-position: middle left; background-repeat: no-repeat; text-indent: 23px;}

blockquote 2

blockquote style {font: 18px/30px normal Tahoma, sans-serif; padding-top: 22px; margin: 5px; background-image: url('http://css-tricks.com/examples/Blockquotes/images/closequote3.gif'); background-position: top left; background-repeat: no-repeat; text-indent: 65px;}

blockquote 3

blockquote style {background-image: url('http://css-tricks.com/examples/Blockquotes/images/closequote1.gif'); background-position: middle left; background-repeat: no-repeat; text-indent: 23px; font: 16px/25px centaur, serif; padding: 10px; border: 2px dotted #333;}

blockquote 4

blockquote style {font: 14px/22px normal helvetica, sans-serif; margin-top: 10px; margin-bottom: 10px; margin-left: 50px; padding-left: 15px; border-left: 3px solid #ccc;}

  Cara penggunaan

• Buka edit HTML dan masuk ke bagian CSS (jika wordpress di file style.css).
• Cari bagian tag .blockquote atau sejenisnya. Biasanya kode akan seperti di bawah ini, bagian yang di blok adalah bagian yang bisa kita ganti sesuka kita.

• Selanjutnya ganti kode css yang berada di dalam kurung kurawal dengan kode CSS di atas.
• Save dan lihat hasilnya.

Blockquote berbeda di postingan Untuk membuat blockquote berbeda ini caranya mudah, hanya tinggal membuat tag CSS baru misal blockquote2 {} dan memanggilnya dengan tag HTML <blockquote2></blockquote2>. Namun jika anda kesulitan melakukan ini bisa juga menanamkan langsung CSS ke dalam tag div. Tag div yang dimasukkan CSS menjadi,

<div style="background-image: url('http://css-tricks.com/examples/Blockquotes/images/closequote1.gif'); background-position: middle left; background-repeat: no-repeat; text-indent: 23px; font: 16px/25px centaur, serif; padding: 10px; border: 2px dotted #333;">artikel anda</div>

readmore...