Tahap 12: Layout (CSS) ~ SERSAN

ukankah lebih bagus jika Anda bisa memberikan Anda halaman tata letak mereka layak?

Tentu saja, tapi bagaimana?

Untuk memberikan tata letak situs web Anda menggunakan Cascading Style Sheets (CSS). Dalam Tahap ini Anda akan mendapatkan pengenalan singkat untuk CSS. Tapi kemudian Anda dapat mempelajari semua tentang CSS dari awal dalam tutorial CSS kami . Jadi silakan mempertimbangkan Tahap ini hanya sebagai hidangan pembuka.
CSS adalah setengah lebih baik dari HTML. Dan di coding, tidak ada kesetaraan status: HTML mengurus hal-hal kasar (struktur), sementara CSS memberi sentuhan yang bagus (tata letak).
Seperti ditunjukkan dalam Tahap 7 , CSS dapat ditambahkan dengan atribut style. Misalnya, Anda dapat mengatur jenis font dan ukuran pada paragraf:
Contoh 1:

 <p style="font-size:20px;" >This is typed in size 20px</p> <p style="font-family:courier;" >This is typed in Courier</p> <p style="font-size:20px; font-family:courier;" >This is typed in Courier size 20px</p>

Akan terlihat seperti ini di browser:

Ini diketik dalam ukuran 20px

Ini yang diketik dalam Kurir 

Ini yang diketik dalam ukuran 20px Kurir 

Dalam contoh di atas kita menggunakan style atribut untuk menentukan jenis font yang akan digunakan (dengan perintah font-family ) dan ukuran font (dengan perintah font-size ). Perhatikan bagaimana di paragraf terakhir kami menetapkan kedua jenis font dan ukuran dengan titik koma memisahkan.

Sepertinya banyak pekerjaan?

Salah satu fitur pintar dari CSS adalah kemungkinan untuk mengatur tata letak Anda secara terpusat. Alih-alih menggunakan style atribut dalam setiap tag, Anda dapat memberitahu browser sekali bagaimana harus tata letak semua teks pada halaman:
Contoh 2:

 <html> <head> <title>My first CSS page</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial;} h2 {font-size: 15px; font-family: courier;} p {font-size: 8px; font-family: "times new roman";} </style> </head> <body> <h1>My first CSS page</h1> <h2>Welcome to my first CSS page</h2> <p>Here you can see how CSS works </p> </body> </html>
 <html> <head> <title>My first CSS page</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial;} h2 {font-size: 15px; font-family: courier;} p {font-size: 8px; font-family: "times new roman";} </style> </head> <body> <h1>My first CSS page</h1> <h2>Welcome to my first CSS page</h2> <p>Here you can see how CSS works </p> </body> </html>

Dalam contoh di atas CSS telah dimasukkan di bagian kepala dan karena itu berlaku untuk seluruh halaman. Untuk melakukannya, cukup gunakan tag <style type="text/css"> yang memberitahu browser bahwa Anda mengetik CSS.
Dalam contoh semua judul di halaman tersebut akan di Arial di 30px ukuran. Semua akan subjudul dalam ukuran Kurir 15. Dan semua teks dalam paragraf normal akan di Times New Roman ukuran 8.
Pilihan lain adalah dengan mengetikkan CSS dalam dokumen terpisah. Dengan dokumen CSS terpisah Anda dapat mengatur tata letak banyak halaman sekaligus. Cukup cerdas jika Anda ingin mengubah jenis font atau ukuran pada sebuah situs web besar dengan ratusan atau ribuan halaman. Kami tidak akan masuk ke yang sekarang tapi Anda bisa belajar nanti dalam tutorial CSS kita.

Apa lagi yang bisa saya lakukan dengan CSS?

CSS dapat digunakan untuk lebih dari menentukan jenis font dan ukuran. Misalnya, Anda dapat menambahkan warna dan latar belakang. Berikut adalah beberapa contoh bagi Anda untuk bereksperimen dengan:

 <p style="color:green;" >Green text</p> <h1 style="background-color: blue;" >Heading on blue background</h1> <body style="background-image: url('http://www.html.net/logo.png');" >
 <p style="color:green;" >Green text</p> <h1 style="background-color: blue;" >Heading on blue background</h1> <body style="background-image: url('http://www.html.net/logo.png');" >

Cobalah memasukkan contoh dalam beberapa halaman Anda - baik seperti yang ditunjukkan di atas dan juga sebagai CSS dimasukkan di bagian kepala.

Apakah CSS apa-apa kecuali warna dan jenis font?

Selain menambahkan tata letak seperti warna, jenis font dll, CSS juga dapat digunakan untuk mengontrol setup halaman dan presentasi (margin, float, alignment, lebar, tinggi dll). Dengan mengatur berbagai elemen dengan CSS Anda dapat tata letak halaman Anda elegan dan tepat.
Contoh 3:

 <p style="padding:25px;border:1px solid red;" >I love CSS</p>
 <p style="padding:25px;border:1px solid red;" >I love CSS</p>

Akan terlihat seperti ini di browser:

Saya suka CSS

Dengan properti float elemen dapat menjadi melayang ke kanan atau ke kiri. Contoh berikut menggambarkan prinsip:
Contoh 4:

 <img src="bill.jpg" alt="Bill Gates" style= "float:left;" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...</p>
 <img src="bill.jpg" alt="Bill Gates" style= "float:left;" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...</p>

Akan terlihat seperti ini di browser:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna Aliquam erat volutpat. Ut WISI Enim iklan minimnya veniam, Quis nostrud exerci tasi ullamcorper suscipit lobortis nisl ut aliquip mantan ea commodo consequat ...

Dalam contoh ini, salah satu elemen (gambar) mengapung ke kiri dan elemen lainnya (teks) mengisi lubang.

Dengan properti position , Anda dapat menempatkan sebuah elemen persis di mana Anda inginkan di halaman Anda:
Contoh 5:

  <img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />

Dalam contoh gambar ditempatkan 50 piksel dari bawah dan 10 pixel dari kanan dalam browser. Tapi Anda bisa menempatkannya tepat di mana Anda inginkan. Cobalah. Cukup mudah dan cukup keren, eh?

Cool, yakin. Tapi mudah?

Anda tidak belajar CSS dalam 10 menit. Dan seperti yang disebutkan di atas, Tahap ini hanya dimaksudkan sebagai pengenalan singkat. Nanti anda akan belajar jauh lebih banyak di kami Tutorial CSS .
Untuk saat ini, berkonsentrasi pada HTML, dan melanjutkan ke Tahap berikutnya di mana Anda akan belajar bagaimana untuk mendapatkan website Anda di Internet sehingga seluruh dunia dapat melihatnya!

These icons link to social bookmarking sites where readers can share and discover new web pages.