Membuat halaman website dengan desain css style (Pengenalan Dasar)

Assalamu alaikum wr wb?

Dalam membuat sebuah website tentu bukan hanya sistem nya saja yang di perlukan tetapi kerapihan juga memang perlu diperhatikan, karena orang cenderung memilih untuk tetap tinggal ditempat yang bersih dan enak untuk dipandang.

IKLAN:


Dalam hal ini saya akan coba menjelaskan tentang cara pembuatan halaman website dengan dekorasi menggunakan Cascading Style Sheet atau yang disebut dengan CSS. Mungkin di antara rekan-rekan sekalian pernah melihat serangkaian program html yang disertai dengan External Style, maksudnya adalah Stylesheet yang di ambil dari file lain atau CSS yang terpisah, ini biasanya diterapkan pada bagian header, tepatnya di antara <head>...</head>


<head>
<link rel="stylesheet" href="http://www.domain.com/style.css" />
</head>

Sedangkan fungsi dari CSS ini adalah untuk menyesuaikan tampilan sebuah halaman website tersebut, seperti misalnya warna latar belakang, warna garis pinggir, lebar halaman, dekorasi teks, dan sebagainya. Sedangkan untuk penerapanya bisa di masing-masing tag pada bagian <body> untuk di tampilkan, seperti misalnya tag <p>, <div>, <span>, dan lain-lain.

Contoh:
<p style="color:#339900;">ini adalah paragraf</p>

Hasilnya adalah:
ini adalah paragraf

Sedangkan untuk mempermudah pembuatanya, butlah inline style pada bagian yang ingin menggunakan stylesheet tersebut, seperti pada contoh di atas, kemudian setelah selesai mendekorasinya anda bisa memindahkan nya menjadi satu bagian dengan memberikannya masing-masing nama class atau id, seperti contoh dibawah ini:

<style type="text/css">
.span_satu{color:#339900;}
#id_satu{color:#339900;}
</style>

Kemudian tambahkan style class atau id tersebut pada bagian <div> atau yang lainya yang ingin menggunakan dekorasi stylesheet tersebut.

Contoh:
<div class="span_satu">ini adalah paragraf</div>

Hasilnya adalah:
ini adalah paragraf

Apakah anda sudah paham dengan yang saya maksud...?
Baiklah, dibawah ini adalah contoh sebuah halaman website dengan dekorasi CSS Style, silahkan Copy dan Paste pada form dibawah kemudian berikan sedikit perubahan pada teks atau dekorasi CSS nya dan tekan tombol Preview untuk melihat hasilnya.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Halaman Website</title>
<style type="text/css">
#header{
background-color:#00CCFF;
color:#999999;
margin-left:20%;
margin-right:20%;
padding:10px 10px 10px 10px;
font-family: "Comic Sans MS";
font-size:18px;
}
</style>
</head>
<body>
<div id="header">Selamat Datang...!</div>
</body>
</html>

Tekan tombol ini untuk melihat hasilnya :

Ko perasaan lumayan susah ya, masalahnya saya kan belum hapal tentang kode warna, tag-tag html, dan lain-lain...!!

IKLAN

Masalahnya bukan ada pada anda, melainkan penjelasan saya yang mungkin kurang dimengerti, tapi Anda tidak perlu khawatir dengan masalah ini, silahlan gunakan software DreamWeaver8 untuk membuat atau mengedit kode tersebut, disana nanti anda akan di pandu dalam pembuatannya, silahkan perhatikan Video berikut untuk penggunaan DreamWeaver8, tapi sebelumnya ganti ke kwalitas HD untuk memutarnya lebih jelas:





Semoga tutorial di atas berguna bagi anda yang sedang membaca nya, dan jika ada kata atau penulisan yang kurang dimengerti harap maklum...
Wassalam!

Posting Komentar

5 Komentar

  1. tiasa atuh mandu sim kuring , hhe

    BalasHapus
  2. wah manteb infona boss, rencananya saya mau bikin style sndiri buat blog saya

    BalasHapus
  3. Video slot machines, which simulate reels on a monitor, were launched in Las Vegas in 1975. Sittman and Pitt of Brooklyn, New York developed a gambling machine in 1891 that was a precursor to the modern slot machine. It 1xbet contained five drums holding a total of fifty card faces and was based mostly on poker. The machine proved extraordinarily in style, and shortly many bars in the city had quantity of} of them. Players would insert a nickel and pull a lever, which might spin the drums and the cards that they held, the player hoping for a great poker hand. There was no direct payout mechanism, so a pair of kings may get the player a free beer, whereas a royal flush could pay out cigars or drinks; the prizes were wholly dependent upon what the institution would provide.

    BalasHapus