Berkenalan dengan CSS dan HTML

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

<head>
<style type="text/css">
Selector { 
   Property:
   Value;
}
</style>
</head>

Penjelasan selector, property dan value :
  1. Selector di awali dengan
  2. tanda ( # ) untuk ( id ) dan,
  3. tanda ( . ) untuk  ( class )
  4. Property dan value di apit oleh tanda kurung kurawang ( {...} )
  5. Pembatas Property menggunakan titik dua ( : )
  6. Pembatas Value menggunakan titik koma ( ; )
Karena css digunakan untuk mengatur tampilan struktur isi maka css harus mengacu pada elemen tertentu dari dokumen/TAG yang diformat. Contoh

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 : h1
Property : color
Value     : red;
Bila di terjemahkan adalah, mengatur h1 menjadi warna merah



HTML

HTML kepanjangan dari HyperText Markup Language adalah sebuah bahasa standar yang digunakan oleh browser Internet untuk membuat halaman dan dokumen pada sebuah Web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel. Elemen HTML yang biasa dengan sebutan  TAG digunakan untuk menyusun struktur isi halaman web. Berikut contoh sederhana dari seluruh struktur tag template ;

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>
<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>
2. Jika sudah di taruh pada notepad masing-masing,
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.


Terkait dengan ini

1 komentar:

Saya mohon maaf atas ketidak terurusnya blog ini, dan saya pun tidak tahu kapan ada waktu luang agar blog ini dapat membalas kritik dan pertanyaan, apalagi untuk melanjutkan postingan saya yang sempat tertunda pada akhir-akhir ini.
Kemungkinan besar blog ini tidak akan aktif selama paling sebentar 2-3bulan karena saya (admin) sibuk mencari nafkah di dunia nyata.
Saya mohon maaf yang sebesar-besarnya karena tidak bertanggung jawab dalam hal yang seperti ini.

Untuk menyisipkan kode <i rel="pre">KODE ANDA YANG TELAH DI PARSE...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>

Link hidup akan terhapus secara otomatis
Convert kode terlebih dahulu bila komentar anda mengandung kode HTML/JScript pada tombol di bawah ini

Parse HTML