CSS Tutorial: Part 3

Di Bagian 2 tutorial kita memecah bagian utama HTML pada halaman dan membuat pemisahan menggunakan tag DIV dengan ID unik yang melekat padanya:

<div id="navigation"> ... </div>
<div id="centerDoc"> ... </div>

Menggunakan DIV (untuk memposisikan bagian halaman utama) adalah metode alternatif untuk apa yang kebanyakan orang gunakan: tabel. Saya berpendapat satu metode tidak selalu lebih baik dari yang lain, tetapi menganggap bahwa CSS adalah metode 'resmi' untuk memposisikan elemen halaman dan tabel hanya boleh digunakan untuk menyimpan data tabular. Di sisi lain, ada kalanya menggunakan tabel jauh lebih mudah dan CSS tidak memotongnya. Dengan tata letak kita saat ini (navigasi sisi kiri atau kanan) CSS jauh lebih mudah digunakan dan merupakan solusi yang lebih baik secara keseluruhan.

Sekarang setelah kita membahasnya, semuanya menjadi sangat mudah dari sini. kita telah menetapkan dokumen utama kita dan bagian-bagian utama sudah ada, yang perlu kita lakukan adalah menambahkan teks dan gambar kita.

Memecah halaman:

Halaman ini sederhana, kita hanya memiliki satu judul:

<h1>The Main Heading</h1>

Dan satu paragraf:

<p>
    Halaman ini adalah halaman saya membuat halaman website dengan CSS
</p>

kita mendefinisikan bagaimana paragraf dan judul akan terlihat dalam kode CSS kita:

p { 
	width: 80%; 
} 
h1 { 
	font-family: Georgia, &quot;Times New Roman&quot;, Times, serif; 
	font-size: 18px; 
	font-weight: bold; 
	color: #000000; 
}

Ini cukup jelas. Satu-satunya hal yang harus disebutkan adalah kita mengatur lebar tag < p > menjadi 80%. Ini memungkinkan kita untuk mengontrol semua lebar teks kita di satu tempat yang mudah diedit.

Satu-satunya hal yang hilang dari halaman adalah navigasi yang sebenarnya. Cara terbaik dan termudah untuk melakukannya adalah dengan menggunakan tag daftar (< li >). Itu masuk akal, karena menu navigasi pada dasarnya adalah daftar halaman.

kita menata tag item daftar dengan CSS ini:

li { 
	list-style-type: none; 
	line-height: 150%; 
	list-style-image: url(../images/arrowSmall.gif); 
}

Kode di atas menggunakan gambar sebagai peluru untuk daftar dan membuat jarak antara item yang terdaftar 1 dan ½ kali lebih besar dari biasanya (Saya suka sedikit lebih banyak 'ruang bernafas'). Anda tidak harus memiliki gambar untuk peluru, Anda bisa membiarkannya tanpa gambar dan tanpa peluru hanya dengan menghapus atribut:

list-style-image: url(../images/arrowSmall.gif);

Atau Anda dapat menggunakan salah satu opsi peluru bawaan: ‘disc’, ‘circle’ dan ‘square’.

Selanjutnya Anda harus menambahkan daftar tidak terurut (< ul > </ul>) di antara DIV navigasi tepat di bawah 'navigasi utama' menuju ke halaman HTML:

<h2>The Main Navigation</h2> 
<ul>
	<li><a href="cssTutorialPage1.php">Page One</a></li> 
	<li><a href="cssTutorialPage2.php">Page Two</a></li> 
</ul>

Untuk mempermudahnya (untuk tujuan artikel), ubah CSS yang memengaruhi tag item daftar (< li >) sehingga kita menggunakan peluru bawaan:

li { 
	list-style-type: disc; 
	line-height: 150%; 
}

Sekarang kita memiliki navigasi!

Itu cukup banyak mencakup tujuan kita untuk tutorial ini, tetapi kita baru saja menggaruk permukaan CSS. Seperti yang Anda lihat, kita membuat halaman yang terlihat bagus dengan menggunakan sangat sedikit jenis tag HTML. Pada saat ini tidak ada banyak teks pada halaman, tetapi kita dapat menambahkan ke halaman dengan mudah, membangunnya untuk memasukkan banyak informasi dan gambar dengan praktis tidak ada pekerjaan HTML sama sekali!

Saya harap tutorial CSS bermanfaat bagi Anda, mungkin agak sulit untuk memahami masalah ini pada awalnya, tetapi seiring waktu Anda akan melihat bahwa usaha Anda akan membuahkan hasil.