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
  • tampilan web sederhana
  • contoh script html web design
  • web html sederhana
  • membuat website dengan html dan css
  • cara membuat tampilan web dengan css
  • membuat tampilan html
  • tampilan HTML
  • contoh desain web sederhana
  • membuat tampilan web dengan css
  • cara membuat css sederhana
  • web sederhana dengan html
  • cara membuat css pada html
  • script web sederhana
  • membuat tampilan web dengan php
  • syntak membuat web desain sederhana dengan php
  • membuat web sederhana dengan html
  • membuat halaman web dengan css
  • membuat css sederhana
  • membuat tampilan dengan css
  • contoh web html showroom
  • script tampilan web
  • cara mempercantik halaman web sederhana
  • web design beserta contoh scripnya
  • membuat tampilan layout website keren dengan css
  • script web html keren
  • Script Web Design Sederhana
  • script tampilann depan sorum mobil
  • script sorum mobil sederhana html
  • web statis dan codingnya
  • skript html perusahaan
  • script tampilan layout
  • tampilan dan script web
  • Contoh tampilan home di html untuk penjualan
  • koding css sederhana
  • contoh showroom web html
  • contoh script website simple
  • contoh script website dengan html
  • contoh script temple web
  • contoh script template html
  • cara buat desain program penjualan sorum Mobil yang keren
  • contoh script coding web
  • contoh program sederhan html perusahaan
  • contoh design website beserta scriptnya
  • contoh desain web html dan scriptnha
  • contoh sintaks tampilan html
  • contoh syntax beranda htmk dan css
  • contoh syntax beranda html dan css
  • kode kode mendesain web dan contoh membuat iklan penjualan
  • kode html website keren
  • desain tersederhana sorum mobil scrip
  • desain html keren kode htmlnya
  • css untuk web sederhana tapi keren
  • contoh website perusahaan beserta skript htmlnya
  • contoh website pariwisata beserta scripnya
  • contoh web site simple dengan html tentang penjualan
  • contoh tampilan web dinamis beserta scriptnya
  • contoh tampilan script html
  • coding buat tampilan web yang keren
  • 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 4 + 13 ?
    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