Cara Mudah Membuat Web Site

Kali ini saya ingin membahas tentang langkah-langkah untuk membuat desain web site dengan mudah. Kita akan membahasnya dari mulai perencanaan, mendesain web, membangun web, melakukan testing, mempublikasikan website, hingga melakukan maintenance terhadap web tersebut.

Untuk mempersempit bahasan, kita batasi pembahasan kita pada pembuatan website dengan menggunakan bahasa HTML, CSS, dan Javascript. Untuk pemrograman backend yang biasanya ditulis dengan bahasa php dengan menggunakan database mysql tidak akan kita bahas disini. Jadi bisa dikatakan tujuan akhir kita adalah membuat website dalam bentuk halaman web statis, yang terdiri beberapa halaman web site.

Guna memudahkan pembaca mempelajarinya, saya akan mengelompokkan pembahasan kedalam bagian-bagian tertentu, yaitu:

Bagian 1. Persiapan untuk Memulai Pekerjaan

  • Merencanakan web site
  • Menentukan pembaca
  • Mengumpulkan konten
  • Memilih alat yang tepat

Bagian 2. Mendesain Web Site

  • Menentukan tampilan dan nuansanya
  • Membuat mock-up desain
  • Memotong dan mengoptimasi gambar

Bagian 3. Membangun Web Site

  • Menambahkan teks, gambar dan link
  • Mengorganisasikan gambar dengan tabel dan list
  • Mengatur tampilan dengan CSS
  • Memahami properti CSS
  • Membuat Layout web site
  • Membangun sistem navigasi
  • Mendesain form untuk web
  • Membuat halaman web menjadi interaktif
  • Membangun web site

Bagian 4. Melakukan Tes pada Web Site

  • Mengikuti standard web
  • Pengujian, Aksesibilitas, Kepatuhan, dan Validasi

Bagian 5. Mempublikasikan Web Site dan Memeliharanya

  • Registrasi domain dan hosting
  • Mempublikasikan web site
  • SEO dan memelihara web site

Untuk memudahkan proses pembuatan, kita akan menggunakan alat-alat pengembangan dari adobe, seperti adobe photoshop untuk mengolah gambar dan foto, serta adobe dreamweaver untuk mendesain web site dengan html, css, dan javascript.

Bagi pembaca yang ingin segera mempelajari hal ini, silahkan kontak penulis di 0838 9874 5551 untuk mengikuti kursus desain web secara privat maupun berkelompok.

Iklan

I. Memulai sebuah proyek [Manajemen Proyek Web] – Part 1

I. Memulai sebuah proyek

Jadi Anda akan melaksanakan proyek web? Sudah waktunya untuk mempertimbangkan tujuan, proses manajemen proyek Anda dan membuat sketsa lintasan fase proyek. Pada bagian ini, saya akan membahas metodologi manajemen proyek yang mapan, cara terbaik untuk melakukan meeting dan trik untuk menjual karya web serta membuat penawarannya. Membuat ikhtisar dan proposal yang bagus, dan memperkirakan skala proyek potensial juga. Setelah penawaran dimenangkan dan tim Anda diasah, bagian ini juga akan memberikan tips perencanaan untuk memulai proyek secara efektif, whorkshop dan komunikasi proyek.

Tujuan yang ingin dicapai

Tujuan umum proyek pembuatan web misalnya :

  • Anda menginginkan situs web yang mencerminkan nilai-nilai organisasi.
  • Anda ingin situs yang akan menciptakan nilai bisnis yang terukur.
  • Anda ingin mendapatkan proyek dilakukan tepat waktu dan sesuai anggaran.

Ini adalah tujuan besar untuk dicapai. Tapi ada juga subgoals yang  sedikit bervariasi tergantung pada di mana Anda berada dalam bisnis pembuatan website ini.

Sub tujuan Sebagai Agensi

Ketika bekerja untuk sebuah agensi kreatif, tugas Anda adalah untuk melakukan pekerjaan yang dapat Anda  banggakan dan yang mengisi permintaan klien. Anda mungkin akan menyadari beberapa jenis tujuan lainnya, seperti:

  • Anda ingin website menggunakan teknologi saat ini, dan harus tetap didukung di masa depan.
  • Anda ingin dapat menggunakan kembali strategi dan teknologi yang digunakan.
  • Anda ingin dibayar untuk pekerjaan yang Anda lakukan, dan tidak melakukan pekerjaan lebih dari yang dibayarkan.
  • Anda ingin membuat website yang indah, berguna dan dapat diakses, yang menunjukkan bakat tim desain Anda.

Memperkirakan waktu pengerjaan proyek adalah sesuatu yang harus Anda lakukan dengan sangat baik. Tentu anda tidak ingin adanya tambahan waktu yang tidak seharusnya karena salah memperkirakan total waktu pengerjaan proyek. Tiap waktu yang terpakai tentu akan berpengaruh pada biaya pengerjaan proyek. Selain waktu, kualitas akhir proyek web anda juga harus mendapat perhatian khusus. Kualitas yang tinggi tentu akan menambah nilai lebih bagi portofolio anda sendiri nantinya.

Sub Tujuan Sebagai Klien

sebagai klien calon pemilik web, anda mungkin berpikir bahwa website yang akan dibuat setidaknya bisa mencapai tujuan sebagai berikut :

  • Membuat uang untuk organisasi Anda (dan ya, itu adalah tujuan untuk non-profit juga, meskipun bekerja sedikit berbeda).
  • Memperluas pangsa pasar untuk produk, jasa atau ide anda.
  • Menghemat waktu (dan karena itu uang) dengan mengotomatisasi proses, mengurangi staf layanan pelanggan, atau mencapai lebih banyak orang dengan pengeluaran yang lebih kecil.

Ringkasan

Agensi pembuat web menginginkan efisien dengan waktu mereka, dan fokus pada melakukan pekerjaan secara akurat untuk memenuhi kebutuhan dalam waktu singkat. Pemilik website terfokus pada efektivitas web site yang akan dibuat, dan memastikan bahwa web itu akan mendukung tujuan offline perusahaan.

Metodologi pengerjaan proyek

beberapa metodologi dalam pengerjaan proyek web yang sudah mapan adalah sebagai berikut :

  1. Waterfall
  2. RUP (Rational Unified Proses)
  3. Agile

1. Waterfall

dalam wikipedia model pengembangan waterfall adalah sebagai berikut :

The waterfall model is a sequential design process, often used in software development processes, in which progress
is seen as flowing steadily downwards (like a waterfall) through the phases of Conception, Initiation, Analysis,
Design, Construction, Testing, Production/ Implementation and Maintenance.

Jadi dalam model waterfall, proses pengerjaan dilakukan secara berurutan dari awal hingga akhir. urutannya adalah sebagai berikut :

  1. Konsepsi
  2. Inisiasi
  3. Analisa
  4. Desain
  5. Konstruksi
  6. Testing
  7. Produksi/Implementasi
  8. Maintenance

Salah satu kesulitan dalam menggunakan model ini adalah tidak mudah menerima perubahan pada tingkat fase sebelumnya dari apa yang sedang dikerjakan saat ini. Misal jika sudah memasuki fase konstruksi, perubahan di fase desain menjadi tidak mungkin lagi untuk dilakukan.

2. RUP (Rational Unified Programming)

Ketika saya pertama mulai bekerja pada proyek perangkat lunak, Rational Unified Process adalah standar emas, dan masih menikmati banyak popularitas. Proses ini menggabungkan aspek diskrit dan berulang, memungkinkan overlap fase dan beberapa iterasi dalam setiap fase. RUP membuat perbedaan antara rilis umum dan rilis internal – Anda dapat terus berjalan pada proses iterasi yang lengkap secara berulang-ulang, tetapi menunjukkan pada stakeholder Anda hanya pekerjaan yang telah selesai.

3. Proses Agile

Semua orang ingin menjadi Agile hari ini. Mengikuti beberapa keberhasilan dalam pengembangan perangkat lunak sebelumnya, banyak orang di dunia web telah memutuskan bahwa desain dan proses pembangunan Agile akan membantu mereka menghemat waktu dan uang dalam proyek-proyek mereka, dan untuk mengirimkan perangkat lunak tepat waktu dan website dengan kebutuhan pengguna yang belum pernah diperhatikan sebelumnya.

Meskipun ada beberapa proses Agile yang sudah ditetapkan secara eksplisit (pemrograman ekstrim / XP, misalnya), sebagian besar Agile masih digunakan untuk setiap proses berulang-ulang yang tidak khas siklus pengembangan waterfall. Agile berarti bahwa Anda akan memberikan sesuatu yang kecil, mengevaluasinya, kemudian kembali dan memperbaiki dan memperluas apa yang telah disampaikan, kemudian mengevaluasinya lagi. Idenya adalah bahwa Anda dapat terus mengikuti siklus ini sedikit demi sedikit sampai semua persyaratan fungsional dan kualitas telah dipenuhi.

Satu masalah dalam metodologi agile adalah panjang siklus iterasi proyek sulit untuk diperkirakan. Contohnya jika kamu ingin membangun sebuah website, kamu akan kesulitan menentukan berapa banyak weekly cycles (sprints, dalam bahasa agile) yang dibutuhkan sampai projek selesai. Karena dalam pendekatan Agile secara murni, kamu tidak akan benar-benar tahu apa yang dimaksud selesai, sampai klien menyetujuinya. Ini bisa dua kali iterasi, atau bisa jadi setelah delapan kali iterasi (cycle). Dan bagaimana kamu bisa memutuskan harga secara tetap untuk proyek web tersebut?

Menemukan metodologi yang cocok

Anda harus menemukan apa yang bisa bekerja dengan baik untuk Anda, tapi untuk kebanyakan proyek-proyek web saya telah menemukan bahwa siklus seperti berikut adalah masuk akal. Rencanakan waktu yang cukup untuk mempersiapkan, menyajikan, dan mendokumentasikan lokakarya dengan klien. Lokakarya ini akan berfungsi sebagai pos pemeriksaan untuk kemajuan proyek, serta menjadi kesempatan untuk melakukan beberapa desain kolaboratif dengan orang-orang yang paling tahu tentang organisasi, produk atau jasa yang akan kamu sajikan secara online.

Inisiasi Proyek

Fase ini adalah tentang mampu menyelesaikan kalimat “Proyek ini akan berhasil jika …

Arsitektur Informasi dan Desain User Experience

Ini adalah saat di mana Anda melakukan penelitian terhadap pengguna dan mulai mencari tahu bagaimana situs akan bekerja. Dalam fase ini, kamu akan membuat sketsa dan pengujian. Situs ini akan mulai terbentuk di atas kertas, dan Anda mungkin bisa mulai mengembangkan kodenya. Lokakarya akan mencapai kesepakatan mengenai bentuk perjalanan pengguna utama Anda. Contohnya adalah desain struktur navigasi web yang memudahkan pengguna dalam menjelajahi informasi dari website ini.

Desain Visual dan Membuat Prototipe

Di sini anda mulai mengembangkan bahasa visual yang akan mengekspresikan dan mendukung desain interaksi Anda. Sekali lagi, situs akan terus berkembang dalam siklus pendek dicoba, diuji dan diterima, ditolak atau dimodifikasi. Lokakarya di sini akan membantu untuk memfokuskan jumlah dan jenis halaman template dan mendapatkan kesepakatan tentang unsur-unsur umum, gaya dan nada. Halaman-halaman prototipe yang Anda buat akan terus berkembang menjadi produk yang disampaikan di akhir.

Membangun dan Menyebarkan

Fase ini akan tumpang tindih dengan yang sebelumnya. Di sini kamu akan membangun situs sebenarnya, termasuk fungsi dan integrasi tiap titik yang kamu butuhkan untuk produk akhir. Prototipe kerja Anda akan terus berkembang, tapi kamu sekarang melakukan tes terhadap satu set kriteria lengkap mengenai keberhasilan yang disepakati untuk situs ini. Lokakarya dalam hal ini adalah tentang memecahkan tantangan teknis dan integrasi tertentu, dan untuk memvalidasi penerimaan klien pada website sebelum dilakukan penyebaran.

Evaluasi

Bahkan setelah penyebaran, Anda akan menghabiskan beberapa waktu melihat apa yang bekerja dan apa yang perlu modifikasi. Situs web akan terus berkembang sedikit ketika Anda memperbaiki, mengkonsolidasikan dan membagi konten yang diterbitkan dan fungsionalitas. Lokakarya selama fase ini akan fokus pada Retrospektif (melihat apa yang telah bekerja dengan baik dan apa yang perlu untuk diperbaiki), serta untuk melihat bagaimana website ini memberikan nilai pada organisasi.

Sertifikasi

Klien kamu mungkin akan bertanya metodologi apa yang akan kamu gunakan – ini mungkin salah satu faktor untuk menentukan akan menyewa jasa kamu untuk proyeknya atau tidak. Layak untuk dipertimbangkan bagimu untuk mempelajari salah satu metodologi ini secara formal. Disinilah peran sertifikasi. Sertifikasi bukanlah indikasi kecerdasan, kreatifitas, atau dedikasi sebagai manajer proyek. Sertifikasi menunjukkan bahwa kamu telah meluangkan waktu untuk mempelajari di sekolah formal mengenai metodologi manajemen proyek.

Mengadakan Meeting

Terkadang, tugas seorang proyek manager hanyalah mengadakan meeting. Dan karena meeting secara umum dikenal sebagai pemborosan waktu, kesempatanmu untuk menjadi orang yang disukai dalam tim menjadi terbatas. Tentu saja kamu tahu seorang manajer proyek dan penghubung proyek diharapkan untuk melakukan segalas sesuatu dari negosiasi kontrak analisis bisnis, sehingga mungkin akan memimpin sebagian besar pertemuan dan lokakarya untuk proyek anda.

Biaya Meeting

Jangan lupa meeting sangat mahal bagi proyek. Cara paling mudah untuk menghitungnya adalah mengambil tarif rata-rata perjam untuk orang-orang di ruangan dan mengalikan jumlah orang yang datang dan mengalikan dengan lamanya meeting. Angkanya sangat menakutkan, tetapi jangan lupakan :

  • Waktu yang dibutuhkan ( bagi tiap partisipan ) untuk waktu meeting di jadwal.
  • Waktu untuk persiapan.
  • Waktu untuk mendokumentasikan diskusi atau workshop.
  • Waktu untuk menuju dan dari diskusi.
  • Waktu yang hilang ketika beralih dari pekerjaan lainnya ke meeting, dan waktu untuk kembali ke zona itu.
Perencanaan dan Agenda

Jangan repot-repot meeting kecuali anda tahu :

  • Apa yang perlu dibicarakan atau dipresentasikan (Agenda).
  • Berapa lama tiap item akan dilaksanakan.
  • Siapa yang kamu perlukan untuk hadir di ruangan dan siapa yang tidak.
  • Siapa yang akan mendokumentasikan meeting
Mendokumentasikan dan Menindaklanjutin

Seseorang perlu sekretaris rekaman dalam pertemuan apapun. Jika kamu menjadi pemimpin pertemuan, fokus kamu adalah menjaga diskusi untuk tetap pada pokok bahasannya. Itu sangat sulit dilakukan jika kamu juga mencoba untuk membuat coretan-coretan dokumentasi pertemuan.

Catatan meeting adalah sama seperti transkrip. Kebanyakan meeting tidak membutuhkan transkrip –  tetapi mereka membutuhkan hal-hal dibawah ini:

  • Catatan meeting harus meringkas informasi yang disampaikan, dikelompokkan berdasarkan topiknya.
  • Tugas yang dihasilkan melalui diskusi harus ditulis dalam bagian-bagiannya.

Motivasi

Untuk memahami bagaimana proyek bekerja, kamu harus memikirkan secara serius bagaimana pendekatan tiap orang terhadap proyek tersebut, dan apa yang membuat mereka tertarik. Dari sana, anda harus memiliki sudut pandang yang baik ketika membuat keputusan.

Manajemen Proyek Web

Manajemen proyek adalah tentang memastikan Anda dan tim Anda memiliki waktu yang lebih baik untuk melakukan sesuatu yang Anda cintai. Orang yang melakukan pekerjaan sebagai manajer proyek memastikan Anda tetap berada di atas permainan, memenuhi tujuan dan melestarikan sumber daya Anda.

Manajemen Proyek Web

Untuk membahas bagaimana menangani proyek web, kita akan membagi bahasan menjadi 5 bab bahasan sebagai berikut :

  1. Memulai sebuah proyek
  2. Menganalisa kebutuhan
  3. Desain dan Prototipe
  4. Konstruksi (koding) dan Testing
  5. Deployment dan evaluasi

I. Memulai sebuah proyek

  • Memulai proyek
  • Menjual proyek web
  • Kick Off
  • Kebutuhan dan Batasan

II. Menganalisa kebutuhan

  • Riset Pengguna
  • Strategi Konten
  • Kegunaan dan Kemudahan Diakses
  • Spesifikasi Integrasi

III. Desain dan Prototipe

  • Wireframing
  • Desain Grafis
  • Membuat prototipe awal
  • Interaksi Wireframing

IV. Konstruksi (koding) dan Testing

  • Sistem Manajemen Konten (CMS)
  • Beberapa pertimbangan mengenai Integrasi
  • Saatnya membangun (koding)
  • Saatnya melakukan testing

V. Deployment dan evaluasi

  • Persiapan deployment
  • Strategi Sosial
  • Pengukuran
  • Apakah kita menang?
  • Merencanakan masa depan

disarikan dari buku http://www.goodreads.com/book/show/16202533-a-practical-guide-to-managing-web-projects.

 

Membuat web sosial network dengan PHP

Dalam proyek ini kita akan membahas beberapa hal sebagai berikut :

  1. Mengenal pembuatan sosial network
  2. Merencanakan dan membangun inti framework yang akan digunakan
  3. Pengguna, registrasi, dan authentikasi
  4. Pertemanan dan relasi
  5. Profil dan Status
  6. Streaming Status
  7. Pesan publik dan pesan pribadi
  8. Status – media lainnya
  9. Event dan Tanggal lahir
  10. Grup
  11. Membangun API
  12. Mendeploy, Keamanan, dan Maintenance
  13. Marketing, SEO, User Retention, dan Strategi Monetisasi
  14. Merencanakan pengembangan selanjutnya.

Bagi yang sudah membaca buku php5 social networking, yang di keluarkan oleh pack publishing pasti langsung bisa menebak, bahwa apa yang dibahas di sini sudah tertulis semua di buku tersebut. Ya penulis memang ingin menelaah secara tuntan mengenai buku tersebut. Namun untuk bisa membaca apa yang penulis paparkan pada tiap-tiap bab nantinya, harap menjadi member di bloh ini yang bisa di daftarkan secara gratis untuk saat ini.

CSS untuk Teks

Warna Teks

Properti color digunakan untuk mengatur warna teks.

Dengan CSS, warna  adalah yang paling sering ditentukan:

  • Nilai HEX – seperti “#ff0000″
  • Nilai RGB – seperti “rgb(255,0,0)”
  • Nama warna – seperti “red”

Lihat pada Nilai Warna CSS untuk daftar lengkap nilai warna yang mungkin.

Warna default untuk halaman didefinisikan dalam selektor body.

Contoh

body {color:blue;}
 h1 {color:#00ff00;}
 h2 {color:rgb(255,0,0);}

Cobalah sendiri »

Remark Untuk W3C compliant CSS: Jika Anda menentukan properti color, Anda juga harus menentukan properti background-color.


Perataan Teks

Properti text-align digunakan untuk mengatur alignment horizontal teks.
Teks dapat terpusat di tengah, atau sejajar ke kiri atau kanan, atau justify (rata kanan dan kiri).
Ketika text-align diatur ke “justify”, setiap baris ditarik sehingga setiap baris memiliki lebar yang sama, dan margin kiri dan kanan lurus (seperti di majalah dan surat kabar).

Contoh

h1 {text-align:center;}
 p.date {text-align:right;}
 p.main {text-align:justify;}

Try it yourself »


Dekorasi Teks

Properti text-decoration digunakan untuk mengatur atau menghapus dekorasi teks.

Properti text-decoration banyak digunakan untuk menghapus garis bawah pada link untuk tujuan desain:

Contoh

a {text-decoration:none;}

Cobalah sendiri »

Hal ini juga dapat digunakan untuk menghias teks:

Contoh

h1 {text-decoration:overline;}
 h2 {text-decoration:line-through;}
 h3 {text-decoration:underline;}
 h4 {text-decoration:blink;}

Cobalah sendiri »

Remark Tidak dianjurkan untuk menggarisbawahi teks yang bukan link, karena hal ini sering membingungkan pengguna.


Transformasi Teks

Properti text-transform digunakan untuk menentukan huruf besar dan huruf kecil dalam teks.

Hal ini dapat digunakan untuk mengubah segalanya menjadi huruf besar atau kecil, atau memanfaatkan huruf pertama dari setiap kata.

Contoh

p.uppercase {text-transform:uppercase;}
 p.lowercase {text-transform:lowercase;}
 p.capitalize {text-transform:capitalize;}

Cobalah sendiri »


Indentasi Teks

Properti text-indentation digunakan untuk menentukan indentasi dari baris pertama dari teks.

Contoh

p {text-indent:50px;}

Cobalah sendiri »


Examples

Contoh lainnya

Tentukan ruang antara karakter
Contoh ini menunjukkan bagaimana untuk menambah atau mengurangi ruang antara karakter.

Tentukan ruang antara baris
Contoh ini menunjukkan bagaimana untuk menentukan ruang antara baris dalam sebuah paragraf.

Mengatur arah teks elemen
Contoh ini menunjukkan bagaimana untuk mengubah arah teks elemen.

Meningkatkan white space antar kata
Contoh ini menunjukkan bagaimana untuk meningkatkan white space di antara kata-kata dalam sebuah paragraf.

Nonaktifkan pembungkus teks dalam suatu elemen
Contoh ini menunjukkan bagaimana untuk menonaktifkan pembungkus/wrapper teks dalam suatu elemen.

Perataan vertikal dari suatu gambar
Contoh ini menunjukkan bagaimana untuk mengatur align vertikal dari gambar dalam teks.


Semua Properti Teks CSS

Property Description
color Mengatur warna teks
direction Menentukan arah teks / tulisan arah
letter-spacing Menambah atau mengurangi ruang antara karakter pada teks
line-height Mengatur tinggi baris
text-align Menentukan alignment horizontal teks
text-decoration Menentukan dekorasi yang ditambahkan ke teks
text-indent Menentukan indentasi dari baris pertama dalam blok-teks
text-shadow Menentukan efek bayangan ditambahkan ke teks
text-transform Mengontrol kapitalisasi teks
unicode-bidi
vertical-align Mengatur alignment vertikal dari elemen
white-space Menentukan bagaimana white-space di dalam elemen ditangani
word-spacing Menambah atau mengurangi ruang antara kata-kata dalam teks

Terjemahan bebas dari http://www.w3schools.com/css/css_text.asp

CSS Background

Properti background CSS digunakan untuk menentukan efek latar belakang suatu elemen.

properti CSS yang digunakan untuk efek latar belakang:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background Color

Properti background-color menentukan warna latar belakang dari elemen.

Warna latar belakang halaman didefinisikan dalam pemilih body:

 

Contoh

body {background-color:#b0c4de;}

Cobalah sendiri »

Dengan CSS, warna paling sering ditentukan dengan:

  • Nilai HEX – seperti “#ff0000”
  • Nilai RGB – seperti “rgb(255,0,0)”
  • Nama warna – seperti “red”

Lihat pada Nilai Warna CSS untuk daftar lengkap nilai warna yang mungkin.

Dalam contoh di bawah, h1, p, dan elemen div memiliki warna latar belakang yang berbeda:

Contoh

h1 {background-color:#6495ed;}
 p {background-color:#e0ffff;}
 div {background-color:#b0c4de;}

Cobalah sendiri »


Background Image

Properti background-image menentukan gambar untuk digunakan sebagai latar belakang dari elemen.

Secara default, gambar diulang sehingga meliputi seluruh elemen.

Gambar latar belakang untuk halaman dapat diatur seperti ini:

Contoh

body {background-image:url('paper.gif');}

Cobalah sendiri »

Di bawah ini adalah contoh dari kombinasi buruk teks dan gambar latar belakang. Teks hampir tidak dapat dibaca:

Contoh

body {background-image:url('bgdesert.jpg');}

Cobalah sendiri »


Background Image – Ulangi secara Horizontal atau Vertikal

Secara default, properti background-image mengulangi gambar secara horisontal dan vertikal.

Beberapa gambar harus diulang hanya secara horizontal atau vertikal, atau mereka akan terlihat aneh, seperti ini:

Contoh

body
 {
 background-image:url('gradient2.png');
 }

Cobalah sendiri »

Jika gambar diulang hanya secara horizontal (repeat-x), latar belakang akan terlihat lebih baik:

Contoh

body
 {
 background-image:url('gradient2.png');
 background-repeat:repeat-x;
 }

Try it yourself »


Background Image – Set position dan no-repeat

Remark Bila menggunakan gambar latar belakang, menggunakan gambar yang tidak mengganggu teks.

Menampilkan gambar hanya sekali ditentukan oleh properti background-repeat:

Contoh

body
 {
 background-image:url('img_tree.png');
 background-repeat:no-repeat;
 }

Cobalah sendiri »

Dalam contoh di atas, gambar latar belakang ditampilkan di tempat yang sama sebagai teks. Kami ingin mengubah posisi gambar, sehingga tidak terlalu banyak mengganggu teks.

Posisi gambar ditentukan oleh properti background-position:

 

Contoh

body
 {
 background-image:url('img_tree.png');
 background-repeat:no-repeat;
 background-position:right top;
 }

Cobalah sendiri »


Background – Shorthand property

Seperti yang dapat Anda lihat dari contoh di atas, ada banyak properti yang harus dipertimbangkan ketika berhadapan dengan latar belakang.

Untuk mempersingkat kode, juga mungkin untuk menentukan semua properti dalam satu properti tunggal. Ini disebut shorthand property.

Properti singkatan untuk latar belakang hanya “background”:

Contoh

body {background:#ffffff url('img_tree.png') no-repeat right top;}

Cobalah sendiri »

Bila menggunakan properti singkatan urutan nilai properti adalah:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Tidak masalah jika salah satu dari nilai properti yang hilang, asalkan salah satunya hadir dalam urutan ini.

Contoh ini menggunakan CSS lebih maju. Coba lihat: Contoh tingkat lanjut


Examples

Lebih banyak Contoh

Bagaimana mengatur gambar latar belakang yang tetap
Contoh ini menunjukkan bagaimana untuk mengatur gambar latar belakang tetap. Gambar tidak akan bergulir bersama dengan sisa halaman.


Semua Properti Background CSS

Property Description
background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated

Terjemahan bebas dari http://www.w3schools.com/css/css_background.asp

Bagaimana menambahkan CSS

Ketika browser membaca sebuah style sheet, maka akan memformat dokumen sesuai untuk itu.


Tiga Cara Menyisipkan CSS

Ada tiga cara untuk memasukkan sebuah style sheet:

  • External style sheet
  • Internal style sheet
  • Inline style

External Style Sheet

Sebuah style sheet eksternal sangat ideal bila gaya diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian head dokumen html:

<head>
 <link rel="stylesheet" type="text/css" href="mystyle.css" />
 </head>

Sebuah style sheet eksternal dapat ditulis dalam editor teks apapun. File tidak boleh mengandung tag html. Style sheet Anda harus disimpan dengan ekstensi .css. Sebuah contoh dari sebuah file style sheet adalah sebagai berikut:

hr {color:sienna;}
 p {margin-left:20px;}
 body {background-image:url("images/back40.gif");}

Remark Jangan menambahkan spasi antara nilai properti dan unit (seperti margin-left: 20 px). Cara yang benar adalah: margin-left: 20px


Internal Style Sheet

Sebuah style sheet internal harus digunakan bila dokumen tunggal memiliki gaya yang unik. Anda mendefinisikan gaya internal di bagian head halaman HTML, dengan menggunakan tag <style>, seperti ini:

<head>
 <style type="text/css">
 hr {color:sienna;}
 p {margin-left:20px;}
 body {background-image:url("images/back40.gif");}
 </style>
 </head>

Inline Styles

Sebuah style inline kehilangan banyak keuntungan dari style sheet karena mencampurkan konten dengan presentasi. Gunakan metode ini sesedikit mungkin!

Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. Contoh ini menunjukkan bagaimana untuk mengubah warna dan margin kiri paragraf:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Multiple Style Sheets

Jika beberapa properti telah ditetapkan untuk pemilih yang sama dalam lembar style yang berbeda, nilai-nilai akan diwariskan dari style sheet yang lebih spesifik.

Sebagai contoh, sebuah style sheet eksternal memiliki sifat-sifat untuk pemilih h3:

h3
 {
 color:red;
 text-align:left;
 font-size:8pt;
 }

Dan style sheet internal memiliki sifat-sifat untuk pemilih h3:

h3
 {
 text-align:right;
 font-size:20pt;
 }

Jika halaman dengan internal style sheet juga link ke style sheet eksternal properti untuk h3 akan menjadi:

color:red;
 text-align:right;
 font-size:20pt;

Warna diwariskan dari style sheet eksternal dan teks-alignment dan font-size digantikan oleh style sheet internal.


Multiple Styles Will Cascade into One

Styles dapat ditentukan:

  • dalam sebuah elemen HTML
  • dalam bagian head halaman HTML
  • dalam file CSS eksternal

Tip: Bahkan beberapa style sheet eksternal dapat dirujuk di dalam dokumen HTML tunggal.

Urutan Cascading

Gaya apa yang akan digunakan ketika ada lebih dari satu gaya yang ditentukan untuk elemen HTML?

Secara umum kita dapat mengatakan bahwa semua gaya akan di “cascade” menjadi lembaran “virtual” style baru oleh aturan berikut, di mana nomor empat memiliki prioritas tertinggi:

  1. browser default
  2. Eksternal style sheet
  3. Internal style sheet (di bagian head)
  4. Inline style (dalam elemen HTML)

Jadi, gaya inline (dalam elemen HTML) memiliki prioritas tertinggi, yang berarti bahwa itu akan menimpa gaya didefinisikan di dalam tag head, atau dalam style sheet eksternal, atau dalam browser (nilai default).

Remark Note: Jika link ke style sheet eksternal ditempatkan setelah style sheet internal <head> HTML, style sheet eksternal akan menimpa style sheet internal!

Terjemahan bebas dari http://www.w3schools.com/css/css_howto.asp

Id dan Class CSS

Selectors id dan Class

Selain menetapkan style untuk elemen HTML, CSS memungkinkan Anda untuk menentukan penyeleksi Anda sendiri yang disebut “id” dan “class”.


Selector Id

Pemilih id digunakan untuk menentukan gaya untuk elemen tunggal yang unik.

Pemilih id menggunakan atribut id dari elemen HTML, dan didefinisikan dengan “#”.

Aturan gaya bawah ini akan diterapkan ke elemen dengan id = “elemen1”:

Contoh

#elemen1
 {
 text-align:center;
 color:red;
 }

Cobalah sendiri »

Remark JANGAN memulai nama ID dengan nomor! Ini tidak akan bekerja di Mozilla / Firefox.


Selector class

Pemilih class digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan pemilih id, pemilih class yang paling sering digunakan pada beberapa elemen.

Hal ini memungkinkan Anda untuk menetapkan gaya tertentu untuk banyak elemen HTML dengan class yang sama.

Pemilih class menggunakan atribut class HTML, dan didefinisikan dengan “.”

Pada contoh di bawah ini, semua elemen HTML dengan class=”center” akan menjadi rata tengah:

Contoh

 .center {text-align:center;} 

Cobalah sendiri »

Anda juga dapat menentukan bahwa hanya elemen HTML khusus harus dipengaruhi oleh class.

Pada contoh di bawah ini, elemen p semua dengan akan menjadi rata-tengah:

Contoh

 p.center {text-align:center;} 

Cobalah sendiri »

RemarkJANGAN memulai nama class dengan nomor! Ini hanya didukung di Internet Explorer.

 

Terjemahan bebas dari w3schools.com

Sintaks CSS

Contoh


Sintaks CSS

Sebuah aturan CSS memiliki dua bagian utama: pemilih, dan satu atau lebih deklarasi:

Pemilih biasanya elemen HTML yang ingin anda berikan style.

Setiap deklarasi terdiri dari properti dan nilai.

Properti adalah atribut style yang ingin Anda ubah. Setiap properti memiliki nilai.


Contoh CSS

Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal:

p {color:red;text-align:center;}

Untuk membuat CSS lebih mudah dibaca, Anda dapat menempatkan satu deklarasi pada setiap baris, seperti ini:

Example

p
{
color:red;
text-align:center;
}

Cobalah sendiri »


Komentar CSS

Komentar digunakan untuk menjelaskan kode Anda, dan dapat membantu Anda ketika Anda mengedit kode sumber di kemudian hari. Komentar diabaikan oleh browser.

Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini:

/*Ini adalah komentar*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
Terjemahan bebas dari w3schools.

Pengenalan CSS

Apa yang Sudah Harus Anda Ketahui

Sebelum melanjutkan, anda harus memiliki pemahaman dasar sebagai berikut:

HTML / XHTML


Apa itu CSS?

  • CSS singkatan dari Cascading Style Sheets
  • Styles mendefinisikan bagaimana menampilkan elemen HTML
  • Styles ditambahkan ke HTML 4.0 untuk memecahkan masalah
  • Style Sheets Eksternal dapat mengurangi banyak pekerjaan
  • Style Sheets Eksternal disimpan dalam file CSS

CSS Demo

Sebuah dokumen HTML dapat ditampilkan dengan gaya yang berbeda: Lihat cara kerjanya


Styles Menyelesaikan Masalah Besar

HTML tidak pernah dimaksudkan untuk berisi tag untuk memformat dokumen.

HTML dimaksudkan untuk menentukan isi dari dokumen, seperti:

<h1> Ini adalah heading </ h1>

<p> Ini adalah sebuah paragraf. </ p>

Ketika tag seperti <font>, dan atribut warna ditambahkan ke spesifikasi HTML 3.2, itu memulai sebuah mimpi buruk bagi pengembang web. Pengembangan situs web yang besar, di mana font dan informasi warna yang ditambahkan ke setiap halaman, menjadi proses yang panjang dan mahal.

Untuk mengatasi masalah ini, World Wide Web Consortium (W3C) menciptakan CSS.

Dalam HTML 4.0, semua format bisa dihapus dari dokumen HTML, dan disimpan dalam file CSS yang terpisah.

Semua browser mendukung CSS hari ini.


CSS Mengurangi Banyak Pekerjaan!

CSS mendefinisikan BAGAIMANA elemen HTML yang harus ditampilkan.

Styles biasanya disimpan dalam file css eksternal.. Style sheet eksternal memungkinkan Anda untuk mengubah tampilan dan tata letak dari semua halaman di situs Web, hanya dengan mengedit satu file tunggal!

Terjemahan bebas dari w3school