membuat tampilan website sederhana dengan html dan css

html adalah bahasa pemrograman inti untuk membuat halaman web, untuk membuat halaman web biasanya html dikombinasikan dengan script css agar tampilannya lebih dinamis dan mudah di edit. css adalah cascading style sheet dimana fungsinya untk mempercantik halaman web html. untuk contohnya adalah seperti berikut:

1. pertama kita ketik kodehtml berikut (copas juga bisa, hehe):

<!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>
<title>belajar membuat halaman web dengan html dan css</title>
</head>

<body>
<div>header</div>
<div>kiri</div>
<div>kanan</div>
<div>footer</div>
</body>
</html>

2. kemudian kita buat kode css nya seperti ini :

body {
height: auto;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.header {
height: 220px;
width: 900px;
background-color: #003366;
}
.leftcol {
float: left;
height: auto;
width: 225px;
background-color: #333333;
}
.rightcol {
float: right;
height: auto;
width: 675px;
background-color: #9999FF;
}
.footer {
clear: both;
height: 30px;
width: 900px;
background-color: #000033;
}

kemudia taruh kode css tersebut dibawah kode ‘</head>’ dan diawal script tambahkan <script>, kemudia di akhir kode tambahkan tag script penutup ‘</script>’ , karena disini kita membuat css yang embeded dengan html artinya  kode css menyatu dengan kode htmlnya (css di halaman html).

sehingga kode lengkapnya seperti ini :

<!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=utf-8″ />
<title>belajar membuat halaman web dengan html dan css</title>

<style type=”text/css”>
<!–
body {
height: auto;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.header {
height: 220px;
width: 900px;
background-color: #003366;
}
.leftcol {
float: left;
height: auto;
width: 225px;
background-color: #333333;
}
.rightcol {
float: right;
height: auto;
width: 675px;
background-color: #9999FF;
}
.footer {
clear: both;
height: 30px;
width: 900px;
background-color: #000033;
}
–>
</style>
</head>

<body>
<div>header</div>
<div>kiri</div>
<div>kanan</div>
<div>footer</div>
</body>
</html>

Incoming search terms:

  • contoh script html keren
  • cara membuat html sederhana
  • membuat css script
  • membuat tampilan website
  • cara membuat website dengan css
  • cara membuat web dengan css
  • cara membuat tampilan website
  • script html website keren
  • yhs-fullyhosted_003
  • tampilan web sederhana
  • contoh script html web design
  • membuat website dengan html dan css
  • web html sederhana
  • membuat tampilan html
  • cara membuat tampilan web dengan css
  • tampilan HTML
  • contoh desain web sederhana
  • membuat tampilan web dengan css
  • cara membuat css sederhana
  • script web sederhana
  • cara membuat css pada html
  • web sederhana dengan html
  • membuat web sederhana dengan html
  • membuat tampilan web dengan php
  • syntak membuat web desain sederhana dengan php
  • membuat halaman web dengan css
  • membuat tampilan dengan css
  • membuat css sederhana
  • contoh web keren menggunakan html
  • desain web keren dan scriptnya
  • script html tampilan depan website penjualan
  • contoh sintak desain web
  • contoh dan tampilan scrip
  • tampilan website yang keren beserta codingnya
  • syntax web sederhana
  • contoh script desain web
  • script mendesain web sekolah
  • membuat syntax html dan css yang sangat bagus
  • Membuat profil sederhana Beserta Kodenyah
  • tulislan script untuk membuat tampilan
  • tuliskan script tampilan
  • tutorial dw tentang dealer motor
  • coding website yang menarik
  • web sederhana dengan html dan css
  • sintak tampilan home html
  • membuat web design css html penjualan motor
  • tampilan website dan codingnya adalah
  • skrip html yang paling bagus
  • Script Web Design Sederhana
  • script tampilan utama web pada html
  • skripting css dan html sederhana
  • source code web penjualan online
  • script html pada penjualan online dan tampilannya
  • Tam pilan Web Dan codingnya
  • tampilan website beserta codingnya
  • pemrograman html website sekolah
  • membuat css html penjualan motor
  • contoh script html halaman tampilan depan web
  • contoh program desain html seperti google
  • contoh html tentang sekolah
  • contoh halaman web keren dreamweaver beserta scriptnya
  • contoh halaman web dengan css dengan kodenya
  • contoh design website dealer motor melalui dreamweaver
  • contoh desain web penjualan motor
  • contoh desain web html keren
  • contoh desain web html dengan listingnya
  • contoh coding template website
  • contoh code php tampilan beranda web
  • conto tampilan WEB tentang penjualan beserta kodingnya
  • conto tampilan WEB penjualan menggunakanHTML beserta kodingnya
  • coding web statis penjualan online
  • coding untuk tampilan beranda web
  • coding html statis penjualan
  • contoh script html web sekolah
  • contoh scrpit html untuk membuat halaman depan web
  • contoh tampilan web bergambar pariwisata
  • kodingan css tampilan web yang bagus
  • koding koding terlengkap untuk membuat web statis menggunakan html
  • kode program html dan css pembuatan tampilan domain yang simple dan menarik
  • download script web sederhana
  • download script html web sederhana
  • download scrips contoh web html
  • Deskripsi penjualan hijab menggunakan html css
  • desain web statis sederhana
  • desain web beserta scriptnya
  • desain html keren kode htmlnya
  • contoh website pariwisata beserta scripnya
  • contoh web sekolah lengkap dengan tag htmlnya
  • contoh web sederhana dan syntax nya
  • contoh web programing pariwisata bali
  • contoh web dan skrip
  • contoh tampilan website html dan css beserta coding
  • cintoh html simple
  • You can leave a response, or trackback from your own site.

    4 Responses to “membuat tampilan website sederhana dengan html dan css”

    1. noe says:

      wah , lagi blajar css ni saya , tapi file diatas kok bgna tetep putih ya?

    2. Yandi says:

      terimakasih panduannya
      tapi kenapa hasilnya belum bisa kellihatan
      Bagaimana penggabungan script css nya kedalam script html nya ?

      • admin says:

        mau kok, cara penggabungannya masukan script css tersebut setelah tag head penutupnya.

        semoga dpt membantu…

    3. ekquet says:

      saya tidak bisa ,, bagai mana caranya agar belajarnya lebih mudah

    Leave a Reply

    What is 4 + 2 ?
    Please leave these two fields as-is:
    IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)
    Powered by WordPress | T-Mobile Phones for Sale at BestInCellPhones.com | Thanks to Free Phones at iCellPhoneDeals.com, Premium Free WordPress Themes and Fat burning furnace review