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 web dengan css
  • cara membuat tampilan website
  • cara membuat website dengan css
  • yhs-fullyhosted_003
  • contoh script html web design
  • tampilan web sederhana
  • cara membuat tampilan web dengan css
  • membuat tampilan html
  • membuat website dengan html dan css
  • 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
  • syntak membuat web desain sederhana dengan php
  • membuat halaman web dengan css
  • membuat web sederhana dengan html
  • membuat tampilan web dengan php
  • membuat css sederhana
  • membuat tampilan dengan css
  • contoh web sederhana pariwisata
  • cara coding web html tanpa sintak
  • sintak desain layout sebuah halaman web
  • contoh web html dan css dengan scriptnya
  • contoh tampilan web dan scriptnya
  • cara membuat web design sederhana
  • listing code web statis dalam pembuatan halaman web perusahaan dengan html
  • script layout css html dan scriptnya
  • cara membuat web sederhana html contoh seperti web google
  • script html bagus faint dan div
  • contoh halaman website penjualan
  • coding html web penjualan
  • filw html dan css tentang pariwisata
  • cara membuat tampilan web sekolah dengan html
  • tampilan website sekolah
  • cara membuat inputan websete
  • cara membuat web statis sederhana dengan css
  • website sekolah dan kode html
  • cara perbagus tampilan coding html php
  • contoh website beserta htmlnya
  • kode html website keren
  • koding untuk membuat tampilan home tentang website penjualan
  • koding web html dan css tentang pariwisata
  • kodingan tampilan web
  • kodingan web
  • membuat web statis bagus dengan html dan css
  • kodingan web otomotif
  • contoh web yang bagus dan bahasa htmlnya
  • macam macam tampilan web beserta codding nya
  • template web statis sederhana full html
  • contoh web statis yg keren beserta kodingannya
  • tampilan webset sederhana
  • html sederhana tapi keren
  • home web dari html dengan kode nya
  • web design beserta contoh scripnya
  • contoh website perusahaan beserta skript htmlnya
  • download contoh html simple
  • contoh website sederhana dan codingnya
  • contoh website sederhana menarij
  • contoh website beserta codingnya
  • css untuk desai beranda untuk blog
  • css untuk web sederhana tapi keren
  • desain web beserta scrift nya
  • desain web penjualan online sederhana css
  • download coding html dan css web sekolah sederhana
  • contoh website beserta coding nya
  • website edukasi sederhana
  • contoh web site dinamisdan listingnya
  • tampilan web google sites sederhana
  • tampilan css beserta skrip
  • script html web sekolah
  • tag html membuat sorum mobil
  • tag css web sekolah
  • script membuat web tentang profil
  • script tampilan layout
  • script tampilan web
  • script web html keren
  • soure code halam website perusahaan dengan html
  • script wisata html beserta tampilannya
  • source code untuk mempercantik halamn web di html
  • sintak membuat web sederhana dengan html dan css dan hasilnnya
  • sintak penempatan profil beranda home pada web html
  • skrip website html keren
  • tampilan dan script web
  • script css full halaman web html
  • script beranda webaite
  • tampilan web beserta scrif html nya
  • tampilan koding wisata
  • membuat tampilan layout website keren dengan css
  • membuat tampilan profil sekolah dengan css
  • tampilan koding html wisata
  • template desain web beserta codingnya
  • tampilan halaman web sederhana dengan htmlnya
  • membuat web site dengan rumus css
  • tampilan halaman web beserta kodenya
  • membuat website dengan html beserta codingnya
  • tampilan depan web simple
  • pemrograman web contoh sintaks
  • program html penjualan
  • scrip css untuk memepercantik tampilan web statis
  • skrip website sekolah css
  • contoh html dengan css yang simple
  • contoh beranda web html
  • codingan html perusahaan
  • coding tampilan depan web
  • coding sederhana tampulan web html
  • coding html untuk membuat website sekolah
  • coding buat tampilan web yang keren
  • coding buat tampilan utama
  • cari website yang simpel dan sintaknya simpel
  • contoh blog html beaerta css nya
  • contoh blog sekolah dengan program HTML
  • contoh coding halaman sebuah web sekolah
  • contoh html dan css dalam pembuatan web tentang informasi pariwisata
  • contoh halaman script home web html
  • contoh design website beserta scriptnya
  • contoh codingan tampilan web
  • contoh codingan halaman web
  • contoh coding menu website pariwisata
  • contoh coding html website
  • Contoh coding html membuat daftar harga pariwisata
  • cara mempercantik website di html tanpa memakai CSS
  • cara mempercantik program sederhana
  • cara mempercantik php sederhana
  • cara membuat tampilan home dengan html
  • cara membuat profil penjual di html
  • cara membuat nesting tampilan web
  • cara membuat informasi di dalam search di design web html
  • cara membuat halaman web yang menarik plus kodingnya
  • cara membuat halaman depan web sekolah
  • cara membuat desain web beserta codingan di php
  • cara buat web css beserta kodingnannya
  • cara membuat tampilan web dinamis dengan html dan css
  • cara membuat tampilan web statis yang menarik
  • cara membuat web penjualan mobil html
  • cara mempercantik halaman web sederhana
  • cara membuat website jasa pariwisata menggunakan html
  • cara membuat webset penjualan dengan html dam css
  • cara membuat web tentang informasi pariwisata dengan html dan css
  • cara membuat web statis dengan html dan css
  • cara membuat web sederhana tentang penjualan
  • cara buat desain program penjualan sorum Mobil yang keren
  • cara membuat web php tema pendidikan
  • cara buat script tampilan utama
  • contoh html keren
  • contoh web serta sintax penjualan computer
  • contoh tampilan web statis css
  • contoh tampilan web sorum mobil beserta script
  • contoh tampilan web site html beserta sekripnya
  • contoh tampilan web lay out pertama beserta scriptnya
  • contoh tampilan web beserta codingannya
  • contoh tampilan script html
  • contoh tampilan html tentang toko online serta tag htmlnya
  • contoh tampilan html
  • contoh tamplate yang menarik dan codingnya
  • contoh template html dan scriptnya
  • contoh web design wisata dan skrip nya
  • contoh web sekolah da kodingannya
  • contoh web sederhana perusahaan
  • contoh web sederhana dengan html
  • contoh web penjualan online dengan html
  • contoh web pariwisata dengan html
  • Contoh web otomotif html beserta coding
  • contoh web disain beserta script html dan css
  • contoh web dinamis tema pariwisata
  • contoh tampilan beranda pada website
  • contoh skrip html web sekolah
  • contoh sintaks tampilan html
  • contoh pemrograman web perusahaan
  • contoh membuat web dan cara nya beserta kode nya
  • contoh membuat html beserta hasilnyanya
  • contoh kodingan html css menyatu sederhana
  • contoh kodingan html css menyatu
  • contoh koding homepage sederhana tpi keren
  • contoh koding css dalam web dinamis
  • contoh html untuk web
  • contoh program tampilan awal dng html
  • contoh program web index beserta codingnya
  • contoh scrip website
  • contoh sintak tampilan
  • contoh sintak blog simple
  • contoh script menu keren
  • contoh script html web wisata
  • contoh script html web sekolah
  • contoh script html sekolah
  • contoh script html keren sederhana
  • contoh script dan tampilan web
  • contoh html membuat sorum mobil
  • 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 13 + 12 ?
    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