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 web dengan css
  • cara membuat tampilan website
  • web html sederhana
  • membuat tampilan html
  • cara membuat tampilan web dengan css
  • membuat website dengan html dan css
  • tampilan HTML
  • membuat tampilan web dengan css
  • tampilan web sederhana
  • contoh desain web sederhana
  • cara membuat css sederhana
  • cara membuat css pada html
  • web sederhana dengan html
  • script web sederhana
  • membuat web sederhana dengan html
  • membuat halaman web dengan css
  • membuat tampilan dengan css
  • membuat tampilan web dengan php
  • membuat css sederhana
  • contoh program css sederhana
  • yhs-fullyhosted_003
  • membuat tampilan website menggunakan html
  • pengertian web sederhana
  • contoh kodingan internet
  • contoh script html web yang menarik
  • contoh tampilan css sederhana dan coding
  • kode html untuk membuat tampilan web
  • contoh tampilan web beserta script html
  • contoh website html sekolah codenya
  • contoh tampilan web paling bagus di web html
  • tampilan contoh halaman web
  • contoh design pemrograman web menggunakan php code
  • contoh design web sederhana beserta scriptnya
  • cara membuat tampilan bagus footer dan header sederhana php
  • contoh desain web statis memakai html
  • contoh coding html membuat website
  • membuat tampilan web dengan html
  • pemrograman Web membuat tampilan html sederhana
  • membuat tampilan web dengan code Html
  • totorial buat desain web penjualalan
  • membuat tampilan web agar dinamis?
  • tampilan website skripnya
  • membuat tampilan php yang bagus dengan php
  • kodingan php membuat desain website
  • kodingan web sekolah memakai css
  • website sederhana penjualan online html dan css
  • website beserta scripnya
  • web sederhana bagus html
  • membuat program php dengan tampilan html
  • web design program sederhana beserta contohnya
  • tutorial membuat tampilan home website sekolah dengan php
  • membuat tampilan html dengan oop
  • tampilan web html resmi beserta scriptnya
  • tampilan web dan scriptnya
  • script tampilan web dengan html
  • script tampilan html
  • syintax pembuaan web penjualan
  • skrip web sederhana html
  • script html contoh desain web
  • Script dan contoh tampilan web
  • Scrip membuat tampilan desain pada halaman web
  • Scrip membuat desain
  • scrib pembuatan website yang bagus
  • penjualan online web html dengan kodingan
  • script php membuat tampilan web sekolah
  • pemrograman html penjualan
  • membuat website penjualan html php css
  • tampilan dinamis untuk laman blog beserata scrip nya
  • membuat website menarik beserta kodenya
  • tampilan home web sederhana menggunakan html
  • tampilan web beserta script
  • script web penjualan dgn css
  • cara css wordpress membuat tampilan bagus
  • contoh desain web statis html dan codingnya
  • contoh desain web statis menggunakan html tentang fashion
  • contoh halaman web dengan program html dengan tampilan
  • Contoh html beserta scriptnya
  • contoh html dengan css sederhana
  • Contoh kode pembuatan website dengan html yang bagus
  • contoh membuat desain web html yang menarik
  • Contoh membuat web dengan css beserta coding
  • contoh pengembangan web html
  • contoh prog html bagus
  • contoh program html untuk penjualan online
  • contoh desain web simpel dan menarik beserta htmlnya
  • contoh desain web php
  • contoh coding web programming seperti tampilan facebook
  • cara koding membuat tampilan web google
  • cara membuat scrip tampilan
  • cara membuat tampilan website di html
  • Cara membuat web iklan php css
  • cara membuat website yang keren beserta codingnya
  • cara mempercantik tampilan website dengan php
  • cara mudah desain tampilan web
  • coding html tampilan websaite
  • coding untuk membuat web yang menarik php
  • contoh code html pada pemograman web untuk mempercantik tampilan
  • contoh coding web html
  • contoh program php dan tampilan nya
  • contoh program untuk membuat tampilan website
  • contoh program web desaign dan koding nya
  • contoh web yang menarik beserta kodenya
  • contoh website html yg sederhana tentang pendidikan
  • contoh website penjualan beserta syntax menggunakan dreamweaver 8
  • desain halaman web beserta kodenya
  • desain script sederhana web php
  • desain sederhana html
  • kode html dan tampilannya
  • kode program script untuk membuat tampilan html
  • kode tampilan web sederhana
  • koding pengembangan web dengan html
  • koding tampilan web
  • contoh web sekolah dg program html
  • Contoh web design dinamis sederhana
  • contoh tampilan web yang cantik dengan html
  • contoh scrib pembuatan website
  • contoh script cara membuat website
  • contoh script desain web html
  • contoh script tampilan website sederhana
  • contoh srip phph membuat web sederhana
  • contoh syntax membuat tampilan web
  • Contoh tampilan halaman web beserta scriptnya
  • contoh tampilan html dan coding nya
  • contoh tampilan web dan html
  • contoh tampilan web dengan kodenya
  • contoh tampilan web html resmi beserta scriptnya
  • koding untuk html membuat desain web dengan menarik sekali
  • 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 13 + 7 ?
    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