Home » bali media design » 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
  • script html website keren
  • cara membuat tampilan website
  • cara membuat website dengan css
  • cara membuat web dengan css
  • yhs-fullyhosted_003
  • contoh script html web design
  • tampilan web sederhana
  • membuat website dengan html dan css
  • cara membuat tampilan web dengan css
  • membuat tampilan html
  • web html sederhana
  • tampilan HTML
  • contoh desain web sederhana
  • membuat tampilan web dengan css
  • script web sederhana
  • cara membuat css sederhana
  • cara membuat css pada html
  • web sederhana dengan html
  • membuat tampilan web dengan php
  • membuat halaman web dengan css
  • syntak membuat web desain sederhana dengan php
  • membuat web sederhana dengan html
  • membuat tampilan dengan css
  • membuat css sederhana
  • cara coding web html tanpa sintak
  • contoh web html dan css dengan scriptnya
  • web sederhana dan kodenya
  • tampilan web sekolah sederhana
  • Scrip pembuatan web kampus sederhana
  • tampilan web penjualan hp html dan css
  • website sekolah dan kode html
  • cara membuat web sederhana html contoh seperti web google
  • script html bagus faint dan div
  • kodingan tampilan web
  • contoh web sederhana dengan html dan css
  • design web php kodingnya
  • membuat tampilan profil sekolah dengan css
  • contoh tampilan web site html beserta sekripnya
  • scrip sederhana tampilan awal
  • layout web tema pendidikan beserta skrip html
  • listing program web sekolah
  • membuat tampilan web menarik dengan css
  • web sekolah lengkap kodingan
  • tag css web sekolah
  • tampilan html web penjualan
  • soure code halam website perusahaan dengan html
  • sintaks html simple tapi menarik
  • tampilan syntax css dan kodingnya
  • tampilan web berserta scripnya
  • script html untuk footer
  • tampilan website wisata menggunakan html
  • sintaks dari tampilan home
  • qodingan web html
  • membuat website penjualan makanan menggunakan html beserta scrip
  • template sederhana beserta codingnya
  • website html sederhana penjualan mobil
  • tag untuk membuat sebuah web perusahaan
  • desain web beserta scrift nya
  • desain wabsite membuat resep makanan
  • cara coding membuat web wisata deng
  • contoh coding halaman sebuah web sekolah
  • contoh coding pemakaian css pembuatan website
  • contoh coding web wisata
  • contoh html beranda
  • contoh html beserta codingnya
  • contoh membuat wabsite rumah makan dengan coding html
  • contoh membuat websederhana beserta kodingannya yang sederhana
  • contoh pemrograman web perusahaan
  • contoh program web css beserta listingnya
  • contoh beranda web html
  • contoh beranda di html
  • coding html penjualan mobil
  • cara membuat halaman utama atau tampilan utama beserta codingnya
  • cara membuat tampilan css
  • cara membuat template website sederhana
  • cara membuat web HTML dengan tema sekolah
  • buat html yang simpel tenang penjualan
  • cara membuat web statis dengan html dan css
  • cara-membuat-desain-website-sekolah-menggunakan-bahasa-tampilan
  • code html rental mobil web dinamis
  • coding css tampilan html
  • contoh scrip pembuatan halaman web
  • contoh scrip website html sekolah
  • contoh script html untuk membuat desain web
  • contoh web sekolah html beserta skripnya
  • contoh web sekolah html css beserta skripnya
  • Contoh web sekolah sederhana dengan html dan css
  • contoh web simple keren dengan koding html dan css
  • contoh web yang bagus dan bahasa htmlnya
  • contoh webdesain sekolah beserta codingnya
  • contoh website e-commerce menggunakan php oop
  • contoh website masakan dengan html beserta script
  • contoh website sederhana dan codingnya
  • contoh web sederhana dengan html
  • contoh web fashion serta coding
  • contoh web disain beserta script html dan css
  • contoh script web
  • contoh script web dinamis beserta hasilnya
  • contoh tampilan web dengan javascript
  • contoh tampilan web dinamis beserta kodenya
  • contoh tampilan web sederhana
  • contoh tampilan website dan skripnya
  • contoh tamplate yang menarik dan codingnya
  • contoh template sederhana
  • contoh template sederhana beserta scriptnya
  • desain wabsite html membuat resep makanan
  • 4 thoughts on “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 ?

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

    Your email address will not be published. Required fields are marked *

    *
    *

    What is 10 + 6 ?
    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) :-)
    Google+ Plus Follow on Twitter Like On Facebook Email to us

    Latest

    cara menampilkan kode html dalam postingan
    Cara cek artikel yang sudah di index oleh mesin pencari google
    Cara disable pesan update notification di wordpress
    Cara Merubah URL Login WordPress
    menghapus watermark WonderPlugin Slider Free Version 4.3

    Recent Posts

    Visitor Counter