. .

WEB DESIGN : Memulai Dan Mengenal Cascading Style Sheet - CSS

Posted by CHRISTIANTO D,WIBOWO | D3MI-2016 STMIK BUMI GORA On Minggu, Januari 01, 2017 No comments

WEB DESIGN : Memulai Dan Mengenal Cascading Style Sheet - CSS, Sebelum lanjutkan pembelajaran ini, perlu diketahui bacalah dulu artikel pembelajaran sebelumnya dan kuasai pengenalan pengetahuan dasar di :
WEB PROGRAMMING
  1. WEB DESIGN
  2. MEMULAI BELAJAR WEB PROGRAMMING
  3. Memulai Membangun WEBSITE Dengan HTML - Panduan Bagi Pemula
Pengantar Cascading Style Sheets - CSS.
HTML tidak dimaksudkan untuk menjadi alat desain grafis. HTML didirikan sebagai cara sederhana untuk menampilkan teks dalam browser, bukan seperti prosesor teks yang menampilkan kata  pada halaman/webpage. Tags ditambahkan untuk menambahkan sedikit warna dan kehidupan ke dalam halaman berdasar putih (sebenarnya, abu-abu pada awalnya) - background colour. Webpage bukan hanya teks berdasar putih tapi ada hal-hal seperti gambar, tabel, frame, dan bentuk. Ini semua bisa disajikan di halaman web menggunakan kode HTML secara langsung.

Para web desainer berusaha untuk menemukan cara yang lebih baik untuk mempresentasikan karya mereka pada halaman web. Plain HTML tidak cukup. Setelah semua, dengan HTML, untuk mendapatkan teks atau gambar tepat di mana yang kita inginkan, Kita harus berusaha keras untuk tabel rumit untuk membuat keselarasan. Dan misalkan kita ingin warna belakang satu paragraf teks, dan tidak perlu mewarnai keseluruh halaman ? Sangat rumit dengan HTML secara langsung. Dan bagaimana dengan hyperlink ? Apakah ada cara, dengan HTML, kita dapat mengubah garis bawah dan memposisikannya pada keadaan tertentu ?

Pertanyaan masih banyak, akhirnya hal tersebut bisa di atasi dengan pengenalan Cascading Style Sheet. CSS pada dasarnya, hanya cara untuk memanipulasi elemen pada halaman web, untuk membawa gaya/style dalam desain web kita.
Apakah Style Sheet itu ?
Jika kita menggunakan pengolah kata seperti Microsoft Word, kita bisa mengatakan pengolah kata yang memblok teks yang akan diformat. Misalnya, semua pos halaman web bisa menggunakn font Times 28, tebal, dan berwarna merah. Jika kita ingin memiliki Heading, bisa klik daftar drop-down dan pilih mengatur gaya Heading kita.

Tetapi dengan menggunakan HTML secara langsung, kita tidak bisa melakukan seprti Microsoft Word. Tidak ada cara untuk menerapkan format yang sama dengan Tag tunggal, tetapi dengan Cascading stylesheet, hal tersebut bisa dilakukan dengan tepat bahwa 'mengubah seluruh blok teks dengan tag tunggal. Hal ini tidak hanya membuat kode kita lebih mudah dibaca, juga sangat sederhana untuk mengubah semua blok yang diformat teks mengatakan ukuran font atau warna font yang berbeda.

Misalnya, dalam HTML, jika kita ingin mengatur paragraf pertama dari setiap halaman untuk huruf tebal dan miring, Kita harus melakukan hal ini untuk setiap kita membuat satu paragraph tunggal (Tanpa CSS) :
<!DOCTYPE html>
<html>
<head>
         <H2>CHRISTIANTO "GEMBLONG" DHARMA WIBOWO WEBPAGE</H2>
</head>
<body>

<h1>Contoh Paragraph Tanpa CSS</h1>
<p><B><i>Ini adalah paragraf pertama dari halaman pertama. Gaya font yang sama diperlukan untuk setiap halaman di situs web saya.</i></B></p>

</body>
</html>
Saya sangat menganjurkan sangat (insist) kita semua memakai Notepad++ dan browser Google Chrome sebagai editor text dan Jendela browser, dibandingkan dengan editor text lainnya, karena sangat mudah sekali kita membuat HTML program dan melihat hasilnya langsung pada jendela browser kita, seperti yang saya lakukan ini :
HTML without CSS
Dengan Stylesheets, kita dapat menyingkirkan semua kode itu <b><i>........</b></u>, dan menempatkannya di bagian HEAD halaman web, kemudian hanya berlaku Style untuk setiap ayat yang memerlukannya. Seperti ini :
<!DOCTYPE html>
<html>
<head>
         <H2>CHRISTIANTO "GEMBLONG" DHARMA WIBOWO WEBPAGE</H2>
<style>
body {
    background-color: lightblue;
}

h1 {color: blue; text-align: center;}

p {
    font: italic bold 12px Georgia, serif;
}
</style>
</head>
<body>

<h1>Contoh Paragraph Dengan CSS</h1>
<p>Ini adalah paragraf pertama dari halaman pertama. Gaya font yang sama diperlukan untuk setiap halaman di situs web saya.</p>

</body>
</html>
HTML with CSS
Sekarang kita sudah mempunyai halaman web dengan backgroun color;background-color: lightblue;  dan posisi tengah untuk heading body; h1 {color: blue; text-align: center;}  (hal yang sama bisa juga kita lakukan dengan heading head, coba saja), dan posisi dan gaya setiap paragraph pada body akan tetap bold italic (tebal dan miring), tanpa penambahan kode tag HTML lagi setiap kita membuat satu paragraph baru (coba saja buat paragraph barunya). 
<!DOCTYPE html>
<html>
<head>
         <H2>CHRISTIANTO "GEMBLONG" DHARMA WIBOWO WEBPAGE</H2>
<style>
body {
    background-color: lightblue;
}

h1 {color: blue; text-align: center;}

p {
    font: italic bold 12px Georgia, serif;
}
</style>
</head>
<body>

<h1>Contoh Paragraph Dengan CSS</h1>
<p>Ini adalah paragraf pertama dari halaman pertama. Gaya font yang sama diperlukan untuk setiap halaman di situs web saya.</p>
<p>Ini adalah paragraf kedua dari halaman pertama. Gaya font juga sama dengan paragraf pertama karena sudah ada Stylesheet di situs web saya.</p>
<p>Ini adalah paragraf ketiga dari halaman pertama. Gaya font juga sama dengan paragraf pertama dan kedua karena sudah ada Stylesheet di situs web saya.</p>
</body>
</html>
Dengan CSS terlihat jauh lebih bersih dan rapi. Dan kita bisa merubah gaya stylesheet kita sesuka hati dan semua paragraf pertama halaman akan berubah.
Sebuah stylesheet diatur dengan menggunakan kata <STYLE> dalam antara dua kurung sudut. Tag akhir </STYLE> diperlukan untuk memberitahu browser untuk menghentikan format gaya/style:
<!DOCTYPE html>
<html>
<head>
         <H2>CHRISTIANTO "GEMBLONG" DHARMA WIBOWO WEBPAGE</H2>
<style>
body {
    background-color: lightblue;
}

h1 {color: blue; text-align: center;}

p {
    font: italic bold 12px Georgia, serif;
}
</style>
</head>
<body>

<h1>Contoh Paragraph Dengan CSS</h1>
<p>Ini adalah paragraf pertama dari halaman pertama. Gaya font yang sama diperlukan untuk setiap halaman di situs web saya.</p>
<p>Ini adalah paragraf kedua dari halaman pertama. Gaya font juga sama dengan paragraf pertama karena sudah ada Stylesheet di situs web saya.</p>
<p>Ini adalah paragraf ketiga dari halaman pertama. Gaya font juga sama dengan paragraf pertama dan kedua karena sudah ada Stylesheet di situs web saya.</p>
</body>
</html>
Kode stylesheet kita berada di antara dua tag Style. 
<style>
body {
    background-color: lightblue;
}

h1 {color: blue; text-align: center;}

p {font: italic bold 12px Georgia, serif;}
</style>
Sekarang bagian dari kode di mana kita menerapkan gaya p {font: italic bold 12px Georgia, serif;} akan memiliki teks yang diperbarui.
Jadi CSS adalah cara untuk mengubah blok kode (atau kata-kata bahkan individu) dan menerapkan format ke block secara keseluruhan. Kita tidak perlu memberi tag HTML individu dalam BODY halaman web; cukup menggunakan nama stylesheet sekali saja akan memastikan bahwa format kita diterapkan untuk seluruh blok.
Dalam pembelajaran berikutnya, kita akan belajar tentang CSS Rule.
Sebagai recommended learning site coba kunjungi situs ini yang begitu sederhana menjelaskan tentang CSS dan langsung memperlihatkan layoutnya pada kita di http://learnlayout.com/no-layout.html 

0 komentar:

Posting Komentar