Berkenalan dengan CSS dan HTML
10 February 2013
Comment
CSS
CSS (Cascading Style Sheet) adalah bahasa gaya yang mendefinisikan layout HTML dokumen. CSS digunakan untuk mengatur tampilan struktur isi halaman web. Misalnya, CSS bekerja dengan font, warna, margin, garis, tinggi, lebar, gambar latar belakang, posisi dan banyak hal lainnya.
Setiap aturan style CSS dibagi menjadi 3 (tiga) bagian yaitu selector, property dan value. dan penempatan CSS ini lebih efektif bila ditempatkan di antara <head> atau di atas </head> dan di apit oleh <style> dan ditutup dengan </style> . Contoh
12345678<head>
<style type="text/css">
Selector {
Property:
Value;
}
</style>
</head>
Penjelasan selector, property dan value :
h1 { color: red ;}
Elemen HTMLnya seperti dibawah
<h1> Akau adalah warna merah </h1>
Ilustrasi
- Selector di awali dengan
- tanda ( # ) untuk ( id ) dan,
- tanda ( . ) untuk ( class )
- Property dan value di apit oleh tanda kurung kurawang ( {...} )
- Pembatas Property menggunakan titik dua ( : )
- Pembatas Value menggunakan titik koma ( ; )
h1 { color: red ;}
Elemen HTMLnya seperti dibawah
<h1> Akau adalah warna merah </h1>
Ilustrasi
h1 /*-- selector --*/
{ /*-- kurawang buka untuk diintegrasikan pada nilai selector */
color /*-- properti --*/
: /*-- penutup properti--*/
red /*-- keterangan nilai sebuah properti --*/
; /*-- penutup value --*/
} /*-- kurawang tutup --*/
Sehingga keseluruhan format ini dapat kita menulisanya menjadi :
</html>
<head>
<style type="text/css">
h1 { color: red ;}</style>
</head>
<body>
<h1> Akau adalah warna merah </h1>
</body>
<html>
Contoh di atas menunjukkan bahwa h1 { color : red; } adalah ;
Selector : h1Bila di terjemahkan adalah, mengatur h1 menjadi warna merah
Property : color
Value : red;
HTML
Tag pembuka
|
Isi kontent
|
Tag penutup
|
Keterangan
|
| <html> | head, CSS, body dan lain-lain |
-
| Tag pembuka di dimulai dari head, body dll |
| <head> | Title, CSS, JS dan lain-lain | </head> | Berfungsi untuk memonitori titel dan tampilan tubuh website |
| <body> | Lihat artikel ini untuk mengetahui keseluruhan kode yang ada pada tubuh template | </body> | Pada bagian ini digunakan untuk membuat atau menampilkan text, link dsb |
-
| head, CSS, body dan lain-lain | </html> | Tag penutup dari tag html teratas |
Dan dibawah ini adalah sampel Elemen Dasar HTML yang dapat kita tempatkan di tubuh body
Tag pembuka
|
Keterangan
|
| <h1>...</h1> | Lazimnya tag h1 untuk judul |
| <p>...</p> | Paragraf |
| <b>...</b> | Tulisan tebal (bold) |
| <i>...</i> | Italic (miring) |
| <u>...</u> | Underline (garis bawah) |
| <br /> | Garis baru |
Study kasus :
1. buka sebuah notepad dan taruh kode dibawah ini di dalam notepad yang telah anda buka
<html>2. Jika sudah di taruh pada notepad masing-masing,
<head>
<title>Titel</title>
</head>
<body>
<h1>Judul</h1><br />
<p>Paragraf</p><br />
<b>Huruf tebal</b><br >
<i>Huruf miring</i><br />
<u>Garis bawah</u><br />
</body>
</html>
3. kemudian Simpan dengan catatan file name di akhiri dengan .html sehingga penyimpanan file name menjadi Admin-ganteng.html
4. Buka file yang barusan anda simpan dan lihat hasilnya
Kesimpulan CSS dengan HTML
Kesimpulannya adalah dalam bidang desain web, HTML dan CSS dianggap sebagai sesuatu yang wajib digunakan dalam menyusun sebuah halaman web/blog. Hal itu sangatlah wajar karena perpaduan keduanya mampu menciptakan sebuah tampilan yang menarik, disukai mesin pencari, dan mampu mengoptimalkan dari segi penampilan website.
0 Response
Post a Comment