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
  • membuat website dengan html dan css
  • cara membuat tampilan web dengan css
  • web html sederhana
  • membuat tampilan html
  • tampilan web sederhana
  • tampilan HTML
  • membuat tampilan web dengan css
  • contoh desain web sederhana
  • cara membuat css sederhana
  • script web sederhana
  • web sederhana dengan html
  • cara membuat css pada html
  • membuat halaman web dengan css
  • membuat web sederhana dengan html
  • membuat tampilan web dengan php
  • membuat css sederhana
  • membuat tampilan dengan css
  • yhs-fullyhosted_003
  • DESIGN TAMPILAN WEB
  • contoh skrip html sederhana
  • Cara membuat tampilan admin yang simple tapi bagus dengan css dan php
  • script website sederhana
  • sintak css sederhana
  • contoh desain web html sederhana
  • sintak html untuk web penjualan
  • contoh tampilan web dan scriptnya
  • contoh tampilan utama web
  • contoh tampilan template sederhana
  • membuat desain header syntax css dreamweaver
  • script blog sederhana bagus
  • scrip web simple bagus
  • Contoh tampilan Css
  • contoh halaman website dan coding htmlnya
  • contoh dan cara desain web sekolah
  • web design pariwisata dengan css
  • codingan web menarik
  • coding website penjualan
  • membuat desain website dengan css sederhana
  • coding tampilan membuat web penjualan dengan dreamweaver
  • contoh website sekolah dengan html
  • contoh coding web css sederhana
  • contoh web sederhana tapi menarik dengan html
  • contoh website keren dan script htmlnya
  • kode html website tampilan keren
  • program html keren
  • koding dalam tampilan html
  • program menu sederhana html
  • Membuat tamfilan menarik dengan css beserta coding
  • rumus cara untuk membuat web menurut css
  • kode desain web sederhana
  • rumus css untuk membuat website sederhana
  • html sederhana dengan php designer
  • koding desain web
  • kodingan css
  • kodingan php manual tampilan halaman utama web
  • Membuat sintax contact tentang penjualan online dengan html
  • membuat kode program tampilan html untuk membuat tampilan web
  • membuat design web sederhana dengan html
  • contoh tampilan html beserta kode
  • membuat tampilan web sederhana dengan php
  • membuat tampilan web bagus dengan css
  • macam-macam tampilan desain web dengan dreaweaver menarik
  • kodingan web sederhana css
  • membuat tampilan website serta codennya
  • membuat web sederhana dengan css dan html
  • download web statis sekolah
  • rumus tampilan web iklan
  • yhsm-inucbr_001
  • tampilan untuk html
  • tampilan sederhana webside tipe css
  • tampilan sederhana html penjualan
  • tampilan pforil admin website sederhana
  • tampilan halaman web dan script nya
  • tampilan css penjualan mobil
  • skrip html untuk desain
  • skrip desain web css sederhana
  • sintax untuk memperindah halaman web
  • tampilan web beserta scriptnya
  • tampilan web keren beserta scriptnya
  • website keren tentang html beserta coding
  • web penjualan tereren
  • web contoh script from html beserta tampilannya
  • tutorial membuat web desain sederhana dengan html
  • top simple web pariwisata
  • template koding website sederhana
  • tampilan website sekolah sederhana
  • tampilan website html sederhana keren
  • tampilan web site sederhana html
  • sintax html web untuk mempercabtik tampilan web
  • Sintak membuat website penjualan dengan html
  • script html membuat web sekolah
  • Script html membuat tampilan
  • Script desain web keren
  • script css sederhana
  • Script Cara membuat tampilan website dengan css
  • script cara membuat tampilan web sederhana
  • script belajar web design sederhana dengan html
  • Scrip web html yang bagus dan menarik
  • scrip web html yang bagus 25 halaman
  • script html untuk sekolah
  • Script html web yang bagus dan menarik
  • sintak css untuk tampilan dan hasil nya
  • script web simple dan bagus
  • Script web html yang menarik tentang pendidikan
  • Script web html yang bagus
  • Script web html membuat profil
  • script tampilan home yang bagus
  • script profil bagus
  • script maintenance simple keren
  • script html website keren
  • scrip tampilan web keren php
  • download script website simple keren
  • contoh scrip bikin web
  • contoh desain website dan kode htmlnya
  • contoh desain web sekolah beserta html
  • contoh desain web beserta code
  • contoh desain html yang menaeik
  • contoh css script keren
  • contoh codingan html
  • contoh coding website untuk media online
  • contoh coding web css
  • contoh coding tampilan dari css
  • contoh desain website sederhana beserta cara
  • contoh disen web sederhana
  • contoh program web desain html
  • contoh program tampilan web
  • contoh menu utama php yg bagus
  • contoh kodingan header css
  • contoh html web sekolah dan rumus htmlnya
  • contoh homepage dengan html tentang sekolah
  • contoh halaman web menarik dan script
  • contoh footer website penjualan
  • contoh dsain web dengan html yang keren
  • contoh coding sederhana untuk pembuatan web dengan html dan css
  • contoh coding pembuatan program
  • contoh coding pembuatan halaman web dan tampilannya
  • coding bagus html css dteamwfer
  • cara tampilan web sekolah menggunakan HTML
  • cara membuat website keren tentang html beserta coding
  • Cara membuat web bagus dengan coding sederhana
  • cara membuat tampilan web sederhana dengan css
  • Cara membuat sedrhana beserta kodenya
  • cara membuat script html tampilan web keren
  • cara css web sekolah html
  • Cara bikin html sederhana tapi bagus
  • coding html dalam membuat tampilan web dengan tema pendidikan
  • coding html keren
  • contoh coding html web penjualan
  • contoh coding html template dg css
  • contoh coding css beserta tampilannya
  • contoh code html penjualan mobil
  • contoh buat web dengan html
  • belajar css desain web homepage
  • codingan menarik di html
  • coding untuk membuat web sekolah
  • coding pembuatan web penjualan
  • buat tampilan web
  • contoh scrip html keren
  • download script web html keren
  • contoh website dengan kodingannya dengan css
  • contoh website coding
  • contoh website beserta syntax nya dengan html dan css
  • contoh web simple pariwisata
  • contoh web sekolah statis
  • contoh web sederhana beserta kodingannya
  • contoh web html tema pariwisata
  • contoh web html profil sekolah
  • contoh web html penjualan
  • contoh website html
  • contoh website penjualan beserta kode program
  • download script web desain html keren
  • download script html sederhana
  • download script desain web menggunakan html
  • Download gratis script desain web sederhana
  • Download contoh pemrograman sederhana html
  • desain web sederahana
  • desain tampilan website sekolah dengan css
  • cotoh koding dan tampilan untuk style css pada php
  • contoh website sekolah dengan kode html
  • contoh web html desain sederhana
  • contoh web design code pemrograman web
  • contoh web desain sederhana dan code
  • contoh skip membuat html sederhana
  • Contoh sintaks web php html css
  • contoh sintak tampiland dengan html
  • contoh Script website yang bagus
  • contoh script website sekolah dengan dreamweaver
  • contoh script website
  • contoh script websaid sekolah css
  • contoh script web html penjualan
  • contoh script pemrogaman tentang sekolah
  • contoh skrip css bagus
  • contoh tampilan halaman utama web
  • contoh web desain sederhana
  • contoh tampilan website sederhana menarik
  • contoh tampilan website penjualan sederhana
  • contoh tampilan website penjualan online html
  • contoh tampilan web html untuk penjualan
  • contoh tampilan web dan codingnya
  • contoh tampilan pemrograman web
  • contoh tampilan halaman web desi/
  • contoh tampilan halaman utama website
  • contoh script html web design
  • 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 4 + 14 ?
    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