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
  • cara membuat web dengan css
  • cara membuat website dengan css
  • cara membuat tampilan website
  • yhs-fullyhosted_003
  • script html website keren
  • tampilan web sederhana
  • web html sederhana
  • membuat tampilan html
  • membuat website dengan html dan css
  • cara membuat tampilan web dengan css
  • contoh script html web design
  • tampilan HTML
  • contoh desain web sederhana
  • membuat tampilan web dengan css
  • cara membuat css sederhana
  • script web sederhana
  • web sederhana dengan html
  • cara membuat css pada html
  • syntak membuat web desain sederhana dengan php
  • membuat tampilan web dengan php
  • membuat halaman web dengan css
  • membuat web sederhana dengan html
  • membuat tampilan dengan css
  • membuat css sederhana
  • contoh web keren menggunakan html
  • contoh script desain web
  • contoh homepage keren beserta coding
  • contoh dan tampilan scrip
  • contoh html sederhana beranda
  • cara mempercantik web statis dengan css
  • contoh sintak desain web
  • script mendesain web sekolah
  • script html tampilan depan website penjualan
  • desain web keren dan scriptnya
  • CGMSBGcHHpoYmbbZuAUiGQDxp4NLNvDgPmFCnLXSf7TBlZ_a_-oc_tk
  • syntax web sederhana
  • macam-macam judul website beserta listingnya
  • tampilan website yang keren beserta codingnya
  • download script web sederhana
  • koding koding terlengkap untuk membuat web statis menggunakan html
  • kode program html dan css pembuatan tampilan domain yang simple dan menarik
  • download script html web sederhana
  • download scrips contoh web html
  • download koding tampilan hyml
  • desain web statis sederhana
  • kodingan css tampilan web yang bagus
  • download home page sederhana dengan html dan css
  • membuat html tentang sekolah
  • membuat isi postingan blogdgn cpt menggunakan hp
  • Membuat profil sederhana Beserta Kodenyah
  • download contoh program web penjualan buku dengan menggunakan tampilan CSS dan html
  • membuat css html penjualan motor
  • macam-macam judul website dan listingnya
  • download halaman depan web dengan html dan css
  • Deskripsi penjualan hijab menggunakan html css
  • membuat syntax html dan css yang sangat bagus
  • membuat web design css html penjualan motor
  • skrip html yang paling bagus
  • sourcoe desain html keren
  • syntaks syntaks untuk membuat web sederhana
  • syntax membuat web statis paling keren tentang penjualan
  • Tam pilan Web Dan codingnya
  • tampilan home website pariwisata
  • rumus website beserta hasilnya
  • tampilan webdan pengkodeannya
  • tampilan website beserta codingnya
  • tampilan website dan codingnya adalah
  • tuliskan script tampilan
  • tulislan script untuk membuat tampilan
  • tutorial dw tentang dealer motor
  • web keren dan sederhana
  • source code web penjualan online
  • skripting css dan html sederhana
  • pemrograman html website sekolah
  • script halaman depan web dinamis
  • script halaman penjualan d html
  • script html pada penjualan online dan tampilannya
  • script penjualan dengan template php
  • script php tentang penjualan hijab
  • script tampilan
  • script tampilan utama web pada html
  • script web html iklan makanan
  • sintak html tampilan website sekolah
  • sintak tampilan home html
  • skrip desain web keren
  • skrip penjualan menggunakan wordpress
  • web sederhana dengan html dan css
  • blog dgn tampilanweb dan cara pengkodeannya
  • contoh coding html dan css membuat web keren
  • contoh coding template website
  • contoh desain web beserta codingnya menggunakan html
  • contoh desain web html dengan listingnya
  • contoh desain web html keren
  • contoh desain web penjualan motor
  • contoh desainweb index beserta skrip
  • contoh design website dealer motor melalui dreamweaver
  • contoh download web html
  • contoh halaman utama web statis
  • contoh halaman web dengan css dengan kodenya
  • contoh halaman web keren dreamweaver beserta scriptnya
  • contoh header pariwisata simple
  • contoh html tentang sekolah
  • Contoh kodingan css daftar makanan
  • contoh kodingan untuk membuat web bahasa html dan css
  • contoh code php tampilan beranda web
  • contoh beserta coding web pariwisata
  • buat tampilan web sekolah sederhana
  • Cara contoh web sekolah sederhana
  • cara membuat program web html tutorial hijab
  • cara membuat web menu makanan dengan dreamweaver
  • cara membuat web penjualan dengan menggunakan sintaks dari css
  • cintoh html simple
  • coding html statis penjualan
  • coding membuat menu penjualan
  • coding mempercantik template web dengan css
  • coding php tampilan home
  • coding untuk tampilan beranda web
  • coding web statis penjualan online
  • coding website yang menarik
  • conoh web css dan skripnya
  • conto tampilan WEB penjualan menggunakanHTML beserta kodingnya
  • conto tampilan WEB tentang penjualan beserta kodingnya
  • contoh listing desain pemograman css dalam membuat tampilan menu
  • contoh listing membuat menu makanan di html dreamweaver
  • contoh tampilan website html dan css beserta coding
  • contoh web coding
  • contoh web dan skrip
  • contoh web desaing html php dan scripnya
  • contoh web keren html dan scriptnya
  • contoh web pada html tentang pendidikan
  • contoh web pariwisata dengan php
  • contoh web programing pariwisata bali
  • contoh web sederhana dan syntax nya
  • contoh web sekolah dengan html
  • contoh web sekolah lengkap dengan tag htmlnya
  • contoh web sekolah sederhana dengan html
  • contoh web statis lengkap dengan sintakmya
  • contoh website biografi css simple
  • contoh website dengan sintax html
  • desain web beserta scriptnya
  • contoh tampilan web yang menarik dan codingnya
  • contoh tampilan web bergambar pariwisata
  • contoh membuat web statis tentang profil sekolahan
  • contoh pemrograman web sekolah dengan html
  • contoh program desain html seperti google
  • contoh program html dan scripnya
  • contoh program html menarik beserta sintaknya
  • contoh script css dan html keren
  • contoh script html halaman tampilan depan web
  • contoh script html web sekolah
  • contoh script untuk halaman home sebuah web
  • contoh scrpit html untuk membuat halaman depan web
  • contoh secrib html untuk membuad blok yg bagus
  • contoh sintak web template
  • contoh sript templete desain web
  • contoh tampilan home pada web
  • contoh tampilan home website mobil
  • Contoh tampilan index html dan scriptnya
  • desain web sederhana beserta codingnya
  • 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 14 + 6 ?
    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