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
  • web html sederhana
  • cara membuat tampilan web dengan css
  • membuat tampilan html
  • tampilan HTML
  • contoh desain web sederhana
  • membuat tampilan web dengan css
  • cara membuat css sederhana
  • script web sederhana
  • web sederhana dengan html
  • cara membuat css pada html
  • membuat web sederhana dengan html
  • syntak membuat web desain sederhana dengan php
  • membuat tampilan web dengan php
  • membuat halaman web dengan css
  • membuat css sederhana
  • membuat tampilan dengan css
  • contoh web sederhana pariwisata
  • sintak desain layout sebuah halaman web
  • cara membuat web design sederhana
  • cara coding web html tanpa sintak
  • contoh tampilan web dan scriptnya
  • contoh web html dan css dengan scriptnya
  • coding html web penjualan
  • script layout css html dan scriptnya
  • script html bagus faint dan div
  • Scrip pembuatan web kampus sederhana
  • contoh halaman website penjualan
  • kodingan tampilan web
  • listing code web statis dalam pembuatan halaman web perusahaan dengan html
  • cara membuat web statis sederhana dengan css
  • cara membuat web sederhana html contoh seperti web google
  • cara membuat inputan websete
  • cara membuat tampilan web sekolah dengan html
  • website sekolah dan kode html
  • tampilan website sekolah
  • cara perbagus tampilan coding html php
  • template web statis sederhana full html
  • contoh website sederhana menarij
  • css untuk desai beranda untuk blog
  • desain web beserta scrift nya
  • kodingan web otomotif
  • desain web penjualan online sederhana css
  • download coding html dan css web sekolah sederhana
  • website html sederhana penjualan mobil
  • download contoh html simple
  • website edukasi sederhana
  • kodingan web
  • html sederhana tapi keren
  • contoh website masakan dengan html beserta script
  • contoh website sederhana dan codingnya
  • Contoh web otomotif html beserta coding
  • contoh web penjualan online dengan html
  • contoh web sederhana dengan html
  • contoh web sederhana perusahaan
  • contoh web sekolah da kodingannya
  • contoh web serta sintax penjualan computer
  • contoh web simple keren dengan koding html dan css
  • contoh web yang bagus dan bahasa htmlnya
  • contoh website beserta coding nya
  • contoh website beserta codingnya
  • contoh website beserta htmlnya
  • skrip website html keren
  • contoh website e-commerce menggunakan php oop
  • layout web tema pendidikan beserta skrip html
  • template sederhana beserta codingnya
  • listing program web sekolah
  • pemrograman web contoh sintaks
  • program html penjualan
  • scrip css untuk memepercantik tampilan web statis
  • tag html membuat sorum mobil
  • scrip sederhana tampilan awal
  • script beranda webaite
  • script css full halaman web html
  • tag css web sekolah
  • script html web sekolah
  • soure code halam website perusahaan dengan html
  • source code untuk mempercantik halamn web di html
  • skrip website sekolah css
  • script membuat web tentang profil
  • cara membuat web HTML dengan tema sekolah
  • membuat website dengan html beserta codingnya
  • macam macam tampilan web beserta codding nya
  • tampilan website wisata menggunakan html
  • tampilan web google sites sederhana
  • tampilan html web penjualan
  • membuat tampilan profil sekolah dengan css
  • tampilan halaman web sederhana dengan htmlnya
  • sintak membuat web sederhana dengan html dan css dan hasilnnya
  • membuat tampilan web menarik dengan css
  • tampilan halaman web beserta kodenya
  • membuat web site dengan rumus css
  • tampilan css beserta skrip
  • membuat web statis bagus dengan html dan css
  • tag untuk membuat sebuah web perusahaan
  • script wisata html beserta tampilannya
  • contoh codingan tampilan web
  • coding sederhana tampulan web html
  • coding html untuk membuat website sekolah
  • coding html penjualan mobil
  • coding buat tampilan utama
  • code html rental mobil web dinamis
  • cari website yang simpel dan sintaknya simpel
  • cara-membuat-desain-website-sekolah-menggunakan-bahasa-tampilan
  • cara mempercantik website di html tanpa memakai CSS
  • codingan html perusahaan
  • contoh beranda di html
  • contoh beranda web html
  • contoh codingan halaman web
  • contoh coding web wisata
  • contoh coding pemakaian css pembuatan website
  • contoh coding menu website pariwisata
  • contoh coding html website
  • Contoh coding html membuat daftar harga pariwisata
  • contoh coding halaman sebuah web sekolah
  • contoh blog html beaerta css nya
  • cara mempercantik program sederhana
  • cara mempercantik php sederhana
  • cara membuat website jasa pariwisata menggunakan html
  • cara membuat informasi di dalam search di design web html
  • cara membuat halaman web yang menarik plus kodingnya
  • cara membuat halaman utama atau tampilan utama beserta codingnya
  • cara membuat halaman depan web sekolah
  • cara membuat desain web beserta codingan di php
  • cara coding membuat web wisata deng
  • cara buat web css beserta kodingnannya
  • cara buat script tampilan utama
  • cara membuat nesting tampilan web
  • cara membuat profil penjual di html
  • cara membuat tampilan home dengan 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 membuat web php tema pendidikan
  • cara membuat web penjualan mobil html
  • cara membuat template website sederhana
  • cara membuat tampilan web statis yang menarik
  • buat html yang simpel tenang penjualan
  • contoh web fashion serta coding
  • contoh tampilan web dengan javascript
  • contoh tampilan web beserta codingannya
  • contoh tampilan html tentang toko online serta tag htmlnya
  • contoh skrip html web sekolah
  • contoh sintak blog simple
  • contoh script web
  • contoh script menu keren
  • contoh script html web wisata
  • contoh tampilan web site html beserta sekripnya
  • contoh tampilan web sorum mobil beserta script
  • contoh tampilan web statis css
  • contoh web disain beserta script html dan css
  • contoh web dinamis tema pariwisata
  • contoh web design wisata dan skrip nya
  • contoh template sederhana beserta scriptnya
  • contoh template sederhana
  • contoh template html dan scriptnya
  • contoh tamplate yang menarik dan codingnya
  • contoh tampilan website dan skripnya
  • contoh script html web sekolah
  • contoh script html untuk membuat desain web
  • contoh script html sekolah
  • contoh koding css dalam web dinamis
  • contoh html untuk web
  • contoh html membuat sorum mobil
  • contoh html keren
  • contoh html dengan css yang simple
  • contoh html dan css dalam pembuatan web tentang informasi pariwisata
  • contoh html beserta codingnya
  • contoh html beranda
  • contoh kodingan html css menyatu
  • contoh kodingan html css menyatu sederhana
  • contoh membuat html beserta hasilnyanya
  • contoh script html keren sederhana
  • contoh script dan tampilan web
  • contoh scrip website
  • contoh program tampilan awal dng html
  • contoh pemrograman web perusahaan
  • contoh membuat websederhana beserta kodingannya yang sederhana
  • contoh membuat web dan cara nya beserta kode nya
  • contoh membuat wabsite rumah makan dengan coding html
  • contoh halaman script home web html
  • 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 + 11 ?
    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