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