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 

12345678<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.

No comments:
Write komentar