Sabtu, 21 Januari 2012

Pelajaran CSS Mengawali dengan HTML + CSS

Published : 19.44 Author :

Pelajaran CSS
Mengawali dengan HTML + CSS

Pelanjaran singkat ini ditujukan untuk orang yang ingin mulai menggunakan CSS dan sebelumnya tidak pernah menulis sebuat syle sheet.
Pelajaran ini tidak menjelaskan benyak mengenai CSS. Hal ini hanya menjelaskan bagaimana membuat sebuah file HTML, sebuah file CSS dan bagaimana membuat keduanya berkerja sama. Setelah itu, anda dapat membaca beberapa pelajaran lain untuk menambah lebih banyak lagi fitur kedalam file HTML dan CSS. Atau anda dapat beralih menggunakan sebuah editor HTML atau CSS khusus yang dapat membantu anda membuat situs situs yang kompleks.
Di akhir pelajaran ini, anda akan selesai membuat sebuah file HTML yang terlihat sebagai berikut:

Hasil halaman HTML, dengan warna dan tata letak, seluruhnya menggunakan CSS.
Sebagai catatan saya tidak menganggap HTML ini indah ☺
Alert! Advanced: Bagian bagian yang tampak seperti ini adalah tidak wajib. Hal tersebut mengandung penjelasan lebih lanjut mengenai kode-kode HTML dan CSS yang terdapat dalam contoh. Tanda “perhatian!” diawal menandakan bahwa ini adalah materi yang lebih sulit dari teks yang lain.

Langkah 1: menulis HTML

Untuk pelajaran, saya menyarankan anda untuk menggunakan alat yang sangat sederhana. Seperti, Notepad (bila menggunakan Windows), TextEdit (untuk Mac) atau KEdit (bila menggunakan KDE) dapat berkerja dengan baik. Setelah anda mengerti prinsipnya, anda dapat beralih ke peralatan yang lebih canggih, atau bahkan ke program-program komersil, seprti Style Master, Dreamweaver atau GoLive. Tetapi untuk CSS file anda yang pertama, adalah sesuatu hal yang baik untuk bila perhatian anda tidak teralihkan dengan banyak fitur yang terlalu canggih bagi.
Jangan menggunakan pengolah kata, seperti Microsoft Word atau OpenOffice. Mereka pada umumnya akan membuat file-file yang tidak dapat dibaca oleh browser web. Untuk HTML dan CSS, kita menginginkan file teks, yang sederhana.
Langkah 1 ialah dengan membuka editor teks anda (Notepad, TextEdit, KEdit, atau apa pun favorit anda), mulai dengan file yang kosong dan ketik berikut ini kedalamnya: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Halaman dengan style saya yang pertama</title>
</head>

<body>

<!-- Menu navigasi situs -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="renungan.html">Renungan</a>
  <li><a href="kota.html">Kotaku</a>
  <li><a href="links.html">Link-link</a>
</ul>

<!-- Isi utana -->
<h1>Halaman dengan style saya yang pertama</h1>

<p>Selamat datang ke halaman dengan style saya!

<p>Halaman ini tidak ada gambar, tatapi paling tidak memiliki style.
Dan juga memiliki link, meskipun mereka tidak pergi kemana-mana…

<p>Disini seharusnya ada lebih banyak lagi, tetapi saya belum tahu apa.

<!-- Tandatangani dan beri tanggal, hanya bersikap sopan! -->
<address>Dibuat 5 April 2004<br>
  oleh diriku sendiri.</address>

</body>
</html>
Malah anda tidak harus mengetiknya: anda dapat melakukan copy dan paste dari halaman ini ke dalam editor.
(Bila anda menggunakan TextEdit pada Mac, jangan lupa memberi tahu TextEdit bahwa teksnya benar-benar teks sederhana (plain text), dengan pergi ke menu Format dan memilih “Make plain teks”.)
Alert! Advanced: Baris pertama dari file HTML diatas memberi tahu browser apa tipe HTML-nya (DOCTYPE berarti DOCument TYPE). Dan dalam hal ini, adalah HTML versi 4.01.
Kata-kata yang tertulis diantara < dan > dinamakan tag, dan seperti yang ada lihat, dokumen ini terdapat di antara tag <html> dan </html>. Antara <head> dan </head> ada tempat untuk berbagai informasi yang tidak ditampilkan di layar. Saat ini pada tempat tersebut terdapat judul dari dokumen, tetapi kita akan menambahkan juga style sheet CSS disana.
Bagian <body> adalah tempat aktual dari isi dokumen. Secara garis besar, segala sesuatu yang ditempatkan disitu akan ditampilkan, kecuali teks yang terdapat diantara <!-- dan -->, yang berfungsi sebagai komentar bagi diri kita sendiri. Hal ini akan diabaikan oleh browser.
Dalam contoh, tag <ul> memperkenalkan kita pada “Unordered List (daftar tak beraturan)”, dalam artian, sebuah daftar yang isinya tidak bernomor. Tag <li> adalah awal dari “List Item (Item dari daftar).” Tag <p> adalah untuk “Paragraph (alinea/paragraf).” Dan <a> adalah untuk jangkar “Anchor (jangkar),” yang merupakan hal yang membuat sebuah hyperlink.
Source HTML terlihat di Notepad
Editor Notepad menunjukan sumber HTML.
Alert! Advanced: Bila anda ingin mengetahui apa arti dari nama yang berada diantara <…>, salah satu tempat yang baik untuk memulai adalah Getting started with HTML. Tapi sedikit penjelasan mengenai struktur dari halaman HTML contoh milik kita.
  • Tag “ul” adalah sebuah daftar dengan sebuah hyperlink per item. Ini akan kita pergunakan sebagai “menu navigasi situs,” yang me-link ke halaman-halaman lain dari halaman Web kita. Sebagai anggapan, seluruh halaman dari situs kita mempunya menu yang serupa.
  • Elemen-elemen “h1” dan “p” adalah elemen elemen yang membentuk konten yang unik dari halaman ini, sedangkan tanda tangan (signature) dibagian bawah (“address”) akan tampil serupa di seluruh halaman situs.
Perhatikan bahwa saya tidak menutup elemen “li”dan “p”. Dalam HTML (tapi bukan dalam XHTML), tidak menuliskan tag penutup </li> dan </p> adalah sesuatu yang diperbolehkan, seperti apa yang saya lakukan disini, untuk membuat teks lebih mudah dibaca. Tetapi jika anda inginkan, anda bisa menambahkannya sendiri.
Mari kita asumsikan bahwa halaman ini akan menjadi sebuah halaman dari situs Web dengan halaman-halaman yang serupa. Sesuatu yang umum untuk halaman-halaman website saat ini, yang ini memiliki menu yang me-link ke halaman-halaman lain di situs ini, beberapa konten yang unik dan sebuah tanda tangan (signature).
Sekarang pilih “Save As…” dari menu File, arahkan ke ke direktori tempat anda ingin menaruhnya (Desktop pilihan yang baik) dan simpan file tersebut sebagai “halamanku.html”. Jangan tutup dulu editor tersebut, kita akan menggunakannya lagi.
(Bila anda menggunakan TextEdit di Mac OS X sebelum versi 10.4, anda akan melihat opsi untuk tidak menambahkan extension .txt pada tampilan Save as. Pilih opsi tersebut, karena nama “halamanku.html” sudah memiliki sebuah extension. Versi TextEdit yang lebih baru akan memperhatikan extension .html secara otomatis.)
Sekarang, buka file tersebut di sebuah browser. Anda dapat melakukannya dengan cara berikut: cari file tersebut dengan file manager (Windows Explorer, Finder atau Konqueror) dan mengklik atau menkliknya dua kali. File tersebut seharusnya terbuka di default Web browser anda. (Bila tidak, buka browser anda dan seret (drag) file tersebut kedalamnya)
Seperti yang anda lihat, halaman tersebut tampak membosankan…

Langkah 2: menambahkan beberapa warna

Anda mungkin melihat beberapa teks hitam dengan latar belakang putih, tetapi tergantung dari bagaimana brorser tersebut dikonfigurasi. Jadi salah satu hal mudah yang dapat kita lakukan untuk membuat halaman tersebut menjadi lebih gaya adalah dengan menambahkan beberapa warna. (Biarkan browser tetap terbuka, akan kita gunakan kembali nanti.)
Kita akan mulai dengan sebuah style sheet yang dibuat di dalam file HTML. Kemudian, kita akan menaruh HTML dan CSS pada file yang terpisah. File terpisah merupakan hal yang baik, karena akan lebih mudah menggunakan style sheet yang sama untuk beberapa file HTML: anda hanya perlu menuliskan style sheet tersebut sekali. Tetapi untuk langkah ini, kita akan menaruhnya di sebuah file.
Kita perlu menambahkan sebuah elemen <style> pada file HTML. Style sheet tersebut akan berada didalam elemen itu. Jadi kembali ke jendela editor dan tambahkan lima baris berikut dibagian head dari file HTML. Baris-baris yang di tambahkan tampil dengan warna merah. 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Halaman dengan style saya yang pertama</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[dsb.]
Baris pertama menjelaskan bahwa ini adalah sebuah style sheet dan ditulis dalam CSS (“text/css”). Baris kedua mengatakan bahwa kita menambahkan style ke dalam elemen “body”. Yang ketiga menjadikan teks berwarna ungu dan baris berikutnya menjadikan latar belakang jadi kuning kehijauan.
Alert! Advanced: Style sheet dalam CSS terbuat dari aturan-aturan. Tiap aturan memiliki tiga bagian:
  1. Selector (dalam contoh: “body”), memberi tahu browser bagian dokumen (elemen HTML) yang mana yang terkena dampak aturan tersebut;
  2. property (dalam contoh, 'color' dan 'background-color' keduanya adalah property), yang menentukan aspek dari elemen yang sedang di atur;
  3. dan value ('purple' dan '#d8da3d'), yang memberikan nilai pada property dari style.
Contoh tersebut memperlihatkan bahwa aturan-aturan tersebut bisa dikombinasikan. Kita memiliki dua set property, jadi kita juga bisa membuat dua aturan yang berbeda: 
body { color: purple }
body { background-color: #d8da3d }
tetapi karena kedua atauran tersebut hanya berdampak pada body, kita hanya menulis “body” setu kali dan menulis kedua property dan value bersama. Untuk mengetahui lebih lanjut mengenai selectors, baca bab 2 dari Lie & Bos.
Latar belakang dari elemen body juga akan menjadi latar belakang dari seluruh dokumen. Kita belum memberi elemen-elemen lain (p, li, address…) latar belakang apapun secara eksplisit, jadi secara normal mereka tidak mempunyainya (atau: akan menjadi transparan). Property 'color' menetapkan warna teks dari elemen body, tetapi elemen elemen lain dalam body akan turut mewarisi warna tersebut, kecuali bila secara eksplisit di kesampingkan . (Kita akan menambahkan beberapa warna lain nanti.)
Sekarang simpan file ini (gunakan “Save” dari menu File) dan balik ke jendela browser. Bila anda menekan tombol “Reload”, tampilan seharusnya berubah dari halaman “menbosankan” menjadi sebuah halaman yang berwarna (tetapi masih agak membosankan). Selain dari daftar link diatas, seluruh teks sekarang seharusnya berwarna ungu dengan latar belakang kuning kehijauan.
Gambar dari halaman yang sudah diberi warna page Opera
Bagaimana sebuah browser menampilkan halaman tersebut setelah ditambahkan warna.
Alert! Advanced: Warna dapat ditetapkan dengan beberapa cara. Contoh menunjukkan dua diantaranya: menggunakan nama (“purple”) dan dengan kode hexadesimal (“#d8da3d”). Ada sekitar 140 nama warna dan kode hexadesimal memungkinkan lebih dari 16 juta warna. Adding a touch of style menjelaskan lebih lanjut menganai kode-kode ini.

Step 3: menambahkan fonta

Hal lain yang mudah dilakukan adalah dengan membuat perbedaan dalam fonta untuk berbagai elemen di halaman. Jadi marilah kita jadikan teks dengan fonta “Georgia”, kecuali untuk heading h1, yang mana akan kita beri fonta “Helvetica.”
Di Web, anda tidak pernah dapat memastikan fonta apa yang dimiliki oleh para pembaca di dalam komputer-komputer mereka, jadi kita tambahkan juga beberapa alternatif: bila Georgia tidak tersedia, Times New Roman atau Times juga merupakan pilihan yang baik, bila semua itu tidak ada, browser bisa menggunakan fonta dengan serifs. Bila Helvetica tidak ada, Geneva, Arial dan SunSans-Regular juga serupa dalam bentuk, dan bila tak ada satupun hal tersebut yang jalan, browser dapat memilih fonta lain tanpa serif.
Dalam teks editor tambahkan baris-baris berikut: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Halaman dengan style saya yang pertama</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[dsb.]
Jika anda menyaimpan file tersebut lagi dan menekan “Reload” di browser, seharusnya ada fonta-fonta yang berbeda untuk heading dan teks lainnya.
Gambar halaman dengan fonta ditambahkan
Sekarang teks utama telah memiliki fonta yang berbeda dari heading.

Step 6: Menambahkan garis horizontal

Tambahan terakhir pada style sheet adalah sebuah garis horizontal untuk memisahkan teks dengan signature yang berada dibawah. Kita akan menggunakan 'border-top', untuk menambahkan garis yang terdiri dari titik-titik diatas elemen <address>: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Halaman dengan style saya yang pertama</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[dsb.]
Sekarang style kita sudah lengkap. Selanjutnya mari kita lihat bagaimana kita dapat menaruh style sheet di file yang terpisah, sehingga halaman-halaman lain dapat menggunakan style yang sama.

Step 7: Menaruh style sheet di sebuah file terpisah

Kita sekarang mempunyai sebuah HTML file dengan sebuah style sheet yang dibuat di dalamnya. Tetapi bila situs milik kita berkembang, kemungkinan kita menginginkan banyak halaman menggunakan style yang sama. Ada cara yang lebih baik daripada meng-copy style sheet ke setiap halaman: bila kita menaruh style sheet di sebuah style terpisah, semua halaman dapat mengarah padanya.
Untuk membuat sebuah file style sheet, kita harus membuat sebuah teks file kosong yang lain. Anda bisa memilih “New” dari menu File di editor, untuk membuat sebuah jendala kosong. (Bila anda menggunakan TextEdit, jangan lupa untuk membuatnya menjadi file teks lagi, menggunakan menu Format.)
Lalu cut dan paste segala sesuatu yang terdapat dalam elemen <style> dari file HTML ke dalam jendela baru. Jangan copy <style> dan </style>. Mereka meruupakan bagian dari HTML, dan bukan untuk CSS. Dalam jendela editor yang baru, anda sekarang sudah memiliki style sheet yang lengkap: 
body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }
Pilih “Save As…” dari menu File, pastikan bahwa anda berada di directory/folder yang sama dengan file halamanku.html, dan simpan style sheet tersebut dengan nama “styleku.css”.
Sekarang balik ke jendela dengan kode HTML. Hapus segalanya dimulai dari tag <style> hingga dan termasuk tag </style> dan gantikan dengan sebuah elemen <link> element, seperti berikut: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Halaman dengan style saya yang pertama</title>
  <link rel="stylesheet" href="styleku.css">
</head>

<body>
[dsb.]
Ini akan mangatakan pada browser bahwa style sheet dapat ditemukan di sebuah file bernama “styleku.css” dan karena tidak ada disebutkan nama direktori, browser akan akan mencarinya di direktori dimana file HTML ditemukan.
Bila anda menyimpan file HTML dan menekan tombol reload di browser, anda tidak akan melihat adanya perubahan: halamannya akan tetap diberi style yang sama, tetapi sytle tersebut datang dari sebuah file external.
Hasil akhir dari penambahan style
Hasil akhir
Langkah berikutnya adalah menaruh kedua file, halamanku.html dan styleku.css di situs Web anda. (Anda mungkin ingin merubahnya sedikit terlebih dahulu, …) Tetapi bagaimana melakukannya tergantung pada Internet provider anda.

Bacaan lebih lanjut

Label: |

0 komentar:

Posting Komentar

lakukan yang terbaik

Langganan: Posting Komentar (Atom)

Artikel saya

You can replace this text by going to "Layout" and then "Page Elements" section. Edit " About "

Tambah Sesuai Hati kamu