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:

  • cara membuat html sederhana
  • membuat css script
  • membuat tampilan website
  • cara membuat web dengan css
  • cara membuat website dengan css
  • cara membuat tampilan website
  • cara membuat tampilan web dengan css
  • membuat website dengan html dan css
  • membuat tampilan html
  • web html sederhana
  • tampilan HTML
  • membuat tampilan web dengan css
  • contoh desain web sederhana
  • tampilan web sederhana
  • cara membuat css sederhana
  • cara membuat css pada html
  • web sederhana dengan html
  • membuat halaman web dengan css
  • membuat web sederhana dengan html
  • script web sederhana
  • membuat css sederhana
  • membuat tampilan web dengan php
  • membuat tampilan dengan css
  • contoh program css sederhana
  • membuat tampilan website menggunakan html
  • yhs-fullyhosted_003
  • pengertian web sederhana
  • tampilan contoh halaman web
  • contoh design web sederhana beserta scriptnya
  • cara membuat tampilan bagus footer dan header sederhana php
  • contoh tampilan css sederhana dan coding
  • contoh kodingan internet
  • scrip pembuatan desan web sederhana
  • script html contoh desain web
  • contoh desain web statis menggunakan html tentang fashion
  • script php membuat tampilan web sekolah
  • script tampilan web dengan html
  • script web penjualan dgn css
  • coding untuk membuat web yang menarik php
  • skrip web sederhana html
  • koding pengembangan web dengan html
  • tampilan dinamis untuk laman blog beserata scrip nya
  • coding html tampilan websaite
  • tampilan web html sederhana
  • cara mudah desain tampilan web
  • web design program sederhana beserta contohnya
  • cara mempercantik tampilan website dengan php
  • cara membuat tampilan website di html
  • cara koding membuat tampilan web google
  • Contoh html beserta scriptnya
  • desain sederhana html
  • kode html untuk membuat tampilan web
  • kode program script untuk membuat tampilan html
  • contoh web yang menarik beserta kodenya
  • contoh syntax membuat tampilan web
  • contoh srip phph membuat web sederhana
  • membuat program php dengan tampilan html
  • contoh script desain web html
  • contoh script cara membuat website
  • membuat tampilan php yang bagus dengan php
  • membuat tampilan web agar dinamis?
  • membuat tampilan web dengan code Html
  • contoh program web desaign dan koding nya
  • membuat tampilan web dengan html
  • contoh pengembangan web html
  • contoh html dengan css sederhana
  • desain script sederhana web php
  • 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 7 + 8 ?
    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