Buat Web yuk! (XHTML + CSS)

[Èxsharaèn]

CSS mengenal beberapa unit yang nanti bisa kita gunakan untuk menyatakan suatu ukuran, misalnya di selector font-size yang baru saja kita kenal. Unit-unit itu adalah:

%
Mudah saja, ini adalah persentase. Persentase dari apa? Tergantung. Pada font-size tadi, persentase ini dihitung dari ukuran standar, yaitu 12 point (asalkan font size perambah 100%). Jika perlu, nanti aku akan beri tahukan ukuran 100% dari suatu selector tertentu.

in, cm, mm
Hayo, siapa yang nggak tahu singkatan ini berturut-turut, mereka adalah inch, centimeter, dan milimeter. Cocok untuk desain yang memerlukan ketelitian ukuran saat dicetak (misalkan brosur).

em
1em sama dengan ukuran font yang berlaku saat ini. Jadi, misalkan ukuran font sekarang adalah 14pt, 2em berarti 28pt, 2.5em (yup, bisa pecahan) berarti 35pt. Tidak percaya?

Kode: [Pilih]

<p style="font-size: 14pt;">Ini ukurannya 14pt.</p>
<p style="font-size: 2em;">2em sama dengan 28 pt.</p>
<p style="font-size: 2.5em;">2.5em sama dengan 35 pt.</p>

hasilnya

Ini ukurannya 14pt.

2em sama dengan 28 pt.

2.5em sama dengan 35 pt.

ex
1ex adalah tinggi huruf x dalam sebuah font, biasanya setengah dari ukuran font itu sendiri. Coba tuliskan huruf besar dan satu x, kira-kira setengahnya kan?

pt
Ukuran ini yang biasanya kita gunakan di pengolah kata dan sebagainya kalau merujuk ukuran font. Mungkin sudah banyak yang tahu, satu point sama dengan 1/72 inci. Tidak percaya? Ayo buktikan: teks dengan ukuran 1in akan sama dengan 72pt:

Kode: [Pilih]

<p><span style="font-size: 1in;">Teks yang ukurannya 1in ini</span><span style="font-size: 72pt"> sama dengan 72pt.</span></p>

Coba sendiri hasilnya karena di forum ini teksnya menumpuk atau kalau malas, aku berikan teks yang pendek:

Kode: [Pilih]

<p><span style="font-size: 1in;">Teks ini</span><span style="font-size: 72pt"> sama.</span></p>

menghasilkan

Teks ini sama.

pc
Ukuran ini mungkin agak jarang didengar, tapi disediakan oleh CSS. 1pc = 12pt. Buktikan sendiri yah

px
Seharusnya sudah pada tahu semua, 1px adalah satu titik pada layar komputer. Ukuran ini juga paling sering digunakan untuk memastikan ukuran suatu elemen pada layar, jadi tidak peduli resolusi layarnya, ukuran elemen tersebut akan tetap sama (tapi hati-hati kalau halamannya harus dicetak).

Tidak perlu dihapalkan semua, karena yang paling sering digunakan adalah %, pt, dan px.

Tunggu sebentar, itu ada tag baru ya? Apa itu <span>?

[Èxsharaèn]

Tidak perlu pusing dulu dengan <span>. Pengertian paling mudah, <span> digunakan untuk mengatur style di dalam suatu elemen. Jadi, pada contoh di atas, kita mengatur style beberapa kalimat (atau kata) di dalam sebuah paragraf. <span> digunakan untuk keperluan ini.

Nanti ada lagi tag yang lingkupnya lebih besar dari <span>, yaitu <div>. Tag ini akan mengelompokkan beberapa elemen yang terkandung di dalamnya, jadi kita bisa memberi style pada beberapa elemen sekaligus. Kita akan bahas <div> lebih lanjut pada topik layout situs nanti, jadi sementara lupakan dulu saja. Kita hanya akan pakai <span> sepanjang artikel CSS ini.

Lanjut!

[Èxsharaèn]

Kembali lagi ke font dan style...

font-style
Nilainya hanya ada tiga: normal, italic, dan oblique. normal adalah nilai dasar. Kalau dicoba, sekilas tidak ada perbedaan antara italic dan oblique, karena dua-duanya menghasilkan teks miring:

Kode: [Pilih]

<p style="font-style: normal;">Font-style normal</p>
<p style="font-style: italic;">Font-style italic</p>
<p style="font-style: oblique;">Font-style oblique</p>

hasilnya

Font-style normal

Font-style italic

Font-style oblique

font-variant
Hanya ada dua nilai: normal (dasar), dan small-caps. Tahu ya small caps?

Kode: [Pilih]

<p style="font-variant: normal;">Font-variant normal</p>
<p style="font-variant: small-caps;">Font-variant small-caps</p>

menghasilkan

Font-variant normal

Font-variant small-caps

font-weight
Selector ini mendefinisikan ketebalan huruf. Nilainya antara 100 hingga 900 (hanya kelipatan 100), atau nilai relatif: normal, bold, bolder, lighter. 400 sama dengan normal sementara 700 sama dengan bold.

Untuk mencoba kode ini, ukuran hurufnya harus diperbesar supaya kelihatan bedanya. Daripada mendefinisikan seluruh <p> dengan selector font-size, kita bisa minta bantuan tag <div>.

Kode: [Pilih]

<div style="font-size: 36pt;">
<p style="font-weight: normal;">Teks normal.</p>
<p style="font-weight: bold;">Teks tebal.</p>
<p style="font-weight: bolder;">Teks agak tebal.</p>
<p style="font-weight: lighter;">Teks agak tipis.</p>
</div>

akan menghasilkan

Teks normal.

Teks tebal.

Teks agak tebal.

Teks agak tipis.

Mungkin bold dan bolder serta normal dan lighter agak nggak kentara bedanya

font
Ini adalah shorthand untuk kelima selector di atas. Kalau menggunakan selector ini, urutannya adalah:

font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar

Tidak harus semuanya dipakai. line-height adalah jarak antarbaris, nilainya bisa menggunakan unit apa saja. Semua properti di belakang font-family diisi dengan nama font yang diinginkan untuk, secara berturut-turut: elemen yang punya teks (tombol, menu, dll.), label ikon, menu tarik-jatuh (dropdown menu), kotak pesan, dan status bar perambah. Entah kenapa small-caption tidak ada keterangannya di W3schools...

Contoh, untuk font Arial 24pt, style lengkapnya seperti ini:

Kode: [Pilih]

<p style="font: 24pt Arial,sans-serif;">Teks Arial 24pt</p>

Hasilnya:

Teks Arial 24pt

Itu untuk font. Berikutnya, kita akan utak-atik teks kita dengan berbagai macam style.

[Èxsharaèn]

Nah, setelah main-main dengan font, sekarang kita main-main dengan teks. Bisa diapakan saja sih teks kita?

color
Ini mungkin properti yang paling ditunggu-tunggu. Yup, properti ini akan mengubah warna teks kita dari hitam menjadi apapun yang kita mau! Kombinasi warnanya adalah 256³ dari putih murni ke hitam murni. Jadi, gimana pakainya nih?

Kode: [Pilih]

<p style="color:red;">Teks ini warnanya merah.</p>
<p style="color:#FF0000;">Teks ini warnanya juga merah.</p>

Hasilnya:

Teks ini warnanya merah.

Teks ini warnanya juga merah.

Nah, gimana caranya tuh? Kok value-nya beda tapi hasilnya sama?

Cara pertama adalah menggunakan nama warna dalam bahasa Inggris. Ada red, yellow, white, black, green, blue, dan lain-lain (cari sendiri ).

Cara kedua, kalau ingin menggunakan warna yang agak tidak standar, ya kita harus membuatnya sendiri. Komposisi warna pada layar komputer pada dasarnya terdiri dari 3 warna: Red, Green, Blue. (Note: Yang dapat pelajaran seni rupa tidak boleh protes karena di seni rupa, tiga warna dasar adalah Cyan, Magenta, dan Yellow). Cara mencampurnya?

Cara termudah adalah menggunakan Paint. Buka saja menu Colors > Edit Colors.... Tekan tombol Define Custom Colors >> untuk melebarkan jendela warna. Sekarang, silakan pilih warna yang diinginkan dan catat baik-baik nilai Red, Green, dan Blue. Langkah berikutnya, ubah ketiga nilai tersebut ke dalam heksadesimal secara berurutan (jangan dibolak-balik). Tahu ya caranya?

Untuk mengubah desimal ke heksadesimal: bagi terus dengan 16 (sambil dicatat sisa pembagiannya) sampai tidak bisa dibagi lagi, lalu baca semua sisanya dari sisa terakhir.
Untuk kasus kita sekarang, karena nilai maksimalnya hanya 255, pembagiannya jadi mudah. Cukup bagi sekali saja (jangan buang sisanya). Angka heksadesimalnya adalah hasil pembagiannya diikuti hasil sisa pembagiannya. Kemudian, karena heksadesimal memiliki 16 angka, ubah dulu angka-angka berikut menjadi huruf: 10 = A, 11 = B, 12 = C, 13 = D, 14 = E, dan 15 = F. Contoh!
212 --> 212 / 16 = 13 sisa 4. Berarti angka heksadesimalnya adalah D4 (13 = D)

Tidak mau ribet? Gunakan saja Calculator pastikan mode Scientific aktif, lalu ketikkan angka desimal kita, dan klik Hex. Jadi deh!

Value ini berlaku untuk semua properti yang berurusan dengan warna, jadi diingat-ingat yah

direction
Ini sudah pernah dicontohkan dan mungkin kita akan jarang pakai (kecuali ada yang menulis bahasa Arab atau bahasa apapun yang ditulis dari kanan ke kiri). Value-nya hanya ada dua: ltr (left-to-right, normalnya) dan rtl (right-to-left).

line-height
Gampangannya, ini mengatur jarak antarbaris (berapa spasi kalau kita bicara di Word). Nilainya bisa menggunakan angka biasa atau menggunakan unit. 100% di sini merujuk pada ukuran font terakhir yang digunakan. Kalau angka biasa yang digunakan, artinya jarak antarbaris dihitung dengan mengalikan angka tersebut dengan ukuran font terakhir yang digunakan (mirip %).

Contoh:

Kode: [Pilih]

<p>Paragraf satu</p>
<p>Paragraf dua, jarak antarbarisnya normal.</p>
<p style="line-height:2;">Paragraf tiga, jarak antarbarisnya dua kali ukuran font sekarang.</p>
<p style="line-height:1in;">Paragraf empat, jarak antarbarisnya satu inci. Jauh amat ya???</p>
<p style="line-height:500%;">Paragraf lima, jarak antarbarisnya 500%. Lebih jauh lagi...</p>

Hasilnya:

Paragraf satu

Paragraf dua, jarak antarbarisnya normal.

Paragraf tiga, jarak antarbarisnya dua kali ukuran font sekarang.

Paragraf empat, jarak antarbarisnya satu inci. Jauh amat ya???

Paragraf lima, jarak antarbarisnya 500%. Lebih jauh lagi...

[Èxsharaèn]

letter-spacing
Mudah saja, ini adalah jarak antarhuruf. Nilainya menggunakan unit.

text-align
Properti ini mengatur perataan teks: left, center, right, atau justify. Pengguna sejati Word tidak perlu mencoba properti ini

text-decoration
Jangan berpikiran dekorasi yang macam-macam dekorasi yang bisa diberikan adalah none, underline (pengganti tag <u>), overline, line-through (bahasa lainnya strikethrough, pengganti tag <s>), atau blink. Khusus yang terakhir tidak berjalan di semua perambah, jadi silakan dites dulu di berbagai perambah

text-indent
   Tahu ya indentasi? Itu seperti yang terjadi pada paragraf ini. Normalnya sih kita cenderung akan pakai Tab untuk melakukan indentasi. Andaikan ternyata kurang atau terlalu menjorok, properti ini bisa membantu kita mengatur indentasi yang diinginkan. Nilainya dalam unit, 100% merujuk pada lebar elemen induk yang dipengaruhi properti ini. Contoh:

Kode: [Pilih]

<p style="text-indent:1em">Paragraf ini diindentasi sejauh 1 em.</p>
<p style="text-indent:15%">Paragraf ini diindentasi sejauh 15% dari ukuran elemen induk, yaitu body. Karena body tidak memiliki properti width, dianggap ukurannya adalah 100% dari lebar layar perambah. Untuk melihat efek value ini, kecilkan ukuran jendela perambah.</p>
<p style="text-indent:-1em">Paragraf ini diindentasi sejauh 1 em ke kiri (nilai properti ini minus). Jadinya aneh kalau batas kirinya adalah batas kiri halaman ini...</p>
<div style="border-width:1pt; border-style:solid; border-color:black; text-indent:-1em; left:100px; position:relative; width: 600px;">...tapi andaikan paragraf ini ada di elemen yang kebetulan letaknya tidak di batas kiri halaman (seperti di elemen ini), efeknya dapat terlihat jelas. Mengubah posisi elemen akan diterangkan nanti.</div>

Abaikan sebentar properti-properti baru yang ada di blok div, nanti kita akan gunakan saat melakukan layout situs.

Hasilnya:

Paragraf ini diindentasi sejauh 1 em.

Paragraf ini diindentasi sejauh 15% dari ukuran elemen induk, yaitu body. Karena body tidak memiliki properti width, dianggap ukurannya adalah 100% dari lebar layar perambah. Untuk melihat efek value ini, kecilkan ukuran jendela perambah.

Paragraf ini diindentasi sejauh 1 em ke kiri (nilai properti ini minus). Jadinya aneh kalau batas kirinya adalah batas kiri halaman ini...

...tapi andaikan paragraf ini ada di elemen yang kebetulan letaknya tidak di batas kiri halaman (seperti di elemen ini), efeknya dapat terlihat jelas. Mengubah posisi elemen akan diterangkan nanti.

Keterangannya jadi tidak valid karena kebetulan sekali hasilnya ditampung di sebuah <div> lain, jadi pastikan coba di halaman baru

text-transform
Properti ini akan mengubah teks kita dalam suatu elemen yang punya properti ini menjadi capitalize (Semua Huruf Pertama Dibesarkan, Atau Istilah Lainnya Titlecase), uppercase (SEMUA HURUF MENJADI HURUF BESAR), lowercase (semua huruf menjadi huruf kecil), atau none (normal). Contoh:

Kode: [Pilih]

<p style="text-transform:capitalize;">paragraf ini Dikapitalisasi. aku sengaja melanggar kaidah bahasa indonesia...</p>
<p style="text-transform:uppercase;">paragraf ini ditulis dengan UPPERCASE, tidak PEDULI baGaimANa aku meNULIsnyA.</p>
<p style="text-transform:lowercase;">PARAGRAF INI DITULIS DENGAN lowercase, tidak PEduLI sebERapA nGawuR aku MenULIsnyA.</p>
<p style="text-transform:none;">Jangan nulis AcAk-ACakAn di paragraf ini, tidak ada transformasinya!!!</p>

akan menghasilkan

paragraf ini Dikapitalisasi. aku sengaja melanggar kaidah bahasa indonesia...

paragraf ini ditulis dengan UPPERCASE, tidak PEDULI baGaimANa aku meNULIsnyA.

PARAGRAF INI DITULIS DENGAN lowercase, tidak PEduLI sebERapA nGawuR aku MenULIsnyA.

Jangan nulis AcAk-ACakAn di paragraf ini, tidak ada transformasinya!!!

white-space
Eee... ini tidak ada terjemahannya di bahasa Indonesia, jadi sepertinya langsung contoh saja biar jelas. Perhatikan bahwa teks pada paragraf pertama dan kedua sama persis cara penulisannya.

Kode: [Pilih]

<p style="white-space:pre;">Ini adalah sebuah paragraf
yang formatnya
agak
...
           acak-acakan :P</p>
<pre>Ini adalah sebuah paragraf
yang formatnya
agak
...
           acak-acakan :P</pre>
<p style="white-space:nowrap;">Paragraf ini ditulis dengan property <strong>white-space</strong> yang diberi nilai <strong>nowrap</strong>. Sepanjang apapun tulisannya, paragraf ini tidak akan pernah turun baris, namun akan terus memanjang ke samping hingga paragrafnya berhenti. Jangan panjang-panjang, kasihan yang baca topik ini nanti :D</p>

Heemmm...

Ini adalah sebuah paragraf yang formatnya agak ... acak-acakan :P

Ini adalah sebuah paragraf
yang formatnya
agak
...
           acak-acakan :P

Paragraf ini ditulis dengan property white-space yang diberi nilai nowrap. Sepanjang apapun tulisannya, paragraf ini tidak akan pernah turun baris, namun akan terus memanjang ke samping hingga paragrafnya berhenti. Jangan panjang-panjang, kasihan yang baca topik ini nanti :D

Kita sekaligus kenalan dengan satu tag baru: <pre>. Tag ini akan membiarkan teks yang berada di dalamnya diformat apa adanya. Normalnya, spasi berlebih akan dihilangkan, namun dengan <pre> semua spasi ekstra itu dibiarkan. Font-nya memang Courier New, nilai dasar di semua perambah

Terakhir!

word-spacing
Mirip letter-spacing, tapi ini berlaku untuk kata. Nilainya dalam unit. Silakan utak-atik sendiri

Oke! Kita selesai dengan font dan teks. Apa? Kurang bagus hasilnya? Masih ingin memperindah halaman Web-nya? Artikel berikutnya akan membahas bagaimana kita mengganti background halaman Web kita, seperti yang terlihat di situs RPGFWID dan kebanyakan profil Friendster. Penasaran?

[Èxsharaèn]

Berikut ini kita akan pelajari senjata ampuh para pemilik profil Friendster yang suka mengganti-ganti gambar latar (background) profilnya. Dengan apa mereka melakukannya? CSS

Catatan: Seluruh contoh di bawah ini akan aku aplikasikan ke tag <div> berukuran 100 x 100, walaupun seharusnya yang diutak-atik oleh profil Friendster adalah tag <body>. Tapi, kode aku berikan untuk tag <body>. Selain itu, ganti seluruh URL gambar dengan gambar kesukaan sendiri, karena aku yakin nggak semua orang punya gambar yang sama.

background-image
Inilah tersangka utama yang bisa mengubah-ubah gambar latar kita Tinggal isi value-nya dengan format url(url_gambar_kita). Masih ingat ya dengan URL relatif dan absolut?

Contoh! Sori aku lagi nggak ada gambar lain, jadi contohnya pakai ini aja yah

Andaikan aku mau pakai gambar ini sebagai gambar latar:

(ukurannya hanya 64 x 64, disengaja untuk ilustrasi berikut)

Kodenya:

Kode: [Pilih]

<body style="background-image:url(masseffect_shephard64x64.jpg);"></body>

Hasilnya:

Kalau-kalau ada yang ngintip source halaman ini, mungkin ada yang bingung. Gambar kok URL-nya seperti ini: http://forum.rpgfantasy.web.id/index.php?action=dlattach;attach=32;type=avatar Mana gambarnya? Well, menggunakan bahasa pemrograman sisi-server (server-side programming), kita bisa saja membuat halaman yang mengeluarkan gambar. Ini nanti akan dibahas di topik lebih lanjut Buat Web Yuk! (PHP + MySQL).

Hmm... kalau gambarnya lebih kecil dari ukuran elemen yang dikasih gambar latar, ternyata dia otomatis mengulang diri sendiri. Gimana kalau aku ingin gambarnya nggak berulang? Atau hanya berulang ke satu arah saja?

background-repeat
Properti ini mengatur perulangan gambar kita. Kita bisa atur apakah gambar kita akan repeat (diulang ke segala arah), repeat-x (diulang ke arah sumbu x saja, i.e. kiri-kanan saja), repeat-y (diulang ke arah sumbu y saja, i.e. atas-bawah saja), atau no-repeat (tidak diulang sama sekali).

Untuk ilustrasi properti ini, kita harus gabungkan dengan satu properti lagi untuk melihat efeknya.

background-position
Nah, andai saja kita ingin mengatur posisi awal gambar latar kita, tinggal atur properti ini. Mau di top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, atau pada koordinat tertentu xpos ypos atau x% y%.

Untuk 9 posisi pertama tadi, andaikan hanya satu kata pertama saja yang digunakan, CSS akan otomatis menggunakan center untuk posisi berikutnya. Kalau tidak digunakan, nilai yang digunakan adalah top left alias 0% 0%.

Untuk posisi x% y%, x% menunjukkan posisi horizontal, relatif terhadap elemen yang diberi gambar latar. Misal ukurannya 100px dan aku memberikan 5% untuk x%, maka posisi sesungguhnya gambar itu ada di 5px. Sementara itu, y% menunjukkan posisi vertikal, relatif terhadap elemen yang diberi gambar latar. Posisi 0% 0% sama dengan top left sedangkan posisi 100% 100% ada di bottom right. Kalau hanya nilai pertama yang diberikan, nilai kedua otomatis diisi 50%.

Untuk posisi xpos ypos, ini mudah sekali karena mirip dengan sumbu Cartesius biasa, hanya saja 0 0 ada di kiri atas (top left) dan y ke bawah bernilai positif. Kalau nilai pertama tidak diberikan, nilai kedua akan diisi 50%. Baik xpos dan ypos bisa diisi dengan unit, termasuk %.

Nah, sekarang kita bisa coba berbagai variasi pengaturan background-repeat. Semua contoh di bawah ini menggunakan gambar yang sama dengan di atas, dengan elemen <div> berukuran lebih besar, yaitu 192 x 192 (persis 3 x 3 lebih besar dari ukuran gambar latar). Kalian silakan coba saja di <body>

Kita coba otak-atik perulangannya dulu.

Kode: [Pilih]

<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:top left; background-repeat:repeat;"></body>

Hasilnya:

Yang ini:

Kode: [Pilih]

<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:top left; background-repeat:repeat-x;"></body>

akan menghasilkan:

Terlihat kan, dia hanya diulang ke arah samping? Bisa ya coba sendiri untuk repeat-y

Kalau tidak diulang seperti ini:

Kode: [Pilih]

<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:top left; background-repeat:no-repeat;"></body>

jadinya ya...

Nah, coba gambarnya kupindah ke... tengah-tengah:

Kode: [Pilih]

<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:center center; background-repeat:no-repeat;"></body>

Jadinya:

Oke deh, kali ini giliran repeat-y...

Kode: [Pilih]

<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:center center; background-repeat:repeat-y;"></body>

Hasilnya:

Tujuh posisi lainnya bisa dicoba-coba sendiri

background-color
Andaikan gambar kita ternyata lebih kecil dari ukuran elemen, kan terlihat ada sisa elemen yang berwarna putih (default). Kalau terlihat jelek atau tidak cocok, warna putih itu bisa diganti ke warna lain menggunakan properti ini. Masih ingat ya tentang warna?

Contoh! Kalau aku ingin mengisi area yang kosong dari DIV-ku (yang ukurannya tetap 192 x 192 dan gambarnya kuletakkan di tengah-tengah tanpa perulangan) dengan warna hitam, kodenya seperti ini:

Kode: [Pilih]

<body style="background-image:url(masseffect_shephard64x64.jpg); background-position:center center; background-repeat:no-repeat; background-color:black;"></body>

Hasilnya:

Properti ini sebaiknya disiapkan dengan nilai warna yang dominan dari warna gambar latar, andaikan saja tiba-tiba terjadi sesuatu pada gambar latar (hilang).

background-attachment
Pernah lihat halaman yang cukup panjang sehingga kita harus menggulir halamannya ke bawah, tapi gambar latarnya tidak ikut bergerak? Pembuat halamannya menggunakan properti ini, yang diset ke fixed agar gambarnya tidak bergerak. Jika diabaikan, nilai dasarnya adalah scroll, yang berarti gambarnya ikut bergerak. Contohnya lihat saja di situs RPGFWID, itu menggunakan properti ini yang diset ke fixed.

background
Kalau tidak ingin repot-repot menggunakan semua properti di atas, kita bisa menggunakan shorthand background, dengan urutan background-color background-image background-repeat background-attachment background-position. Tidak semua harus digunakan.

Selesai! Untuk pencinta Friendster, seluruh variasi sudah diberikan di sini untuk mengkustomisasi profil. Tapi, artikel ini belum selesai di sini. Perjalanan kita masih belum berakhir! Berikutnya, aku akan berikan cara untuk membuat tepian (border) seperti yang sudah tampak pada contoh-contoh di atas.

[Bagus Cahyo Jaya Pratama]

Kelihatannya mudah tetapi sulit  dipraktekkan untuk membuat sebuah website.

[Èxsharaèn]

Untuk sekarang, sebenarnya nggak susah untuk buat website, karena sudah banyak alat-alat praktis, misalkan saja Adobe Dreamweaver, Microsoft Visual Web Developer, bahkan CMS seperti joomla!, jadi sudah tidak perlu melakukan HTML dan CSS manual. Tapi memang ada kalanya lebih enak mengedit HTML/CSS langsung, apalagi kalau sudah dicampur dengan pemrograman Web (PHP, ASP.NET, JavaScript, dll.)