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 tampilan website
  • cara membuat website dengan css
  • cara membuat web dengan css
  • yhs-fullyhosted_003
  • membuat tampilan html
  • cara membuat tampilan web dengan css
  • web html sederhana
  • tampilan web sederhana
  • membuat website dengan html dan css
  • tampilan HTML
  • membuat tampilan web dengan css
  • contoh desain web sederhana
  • cara membuat css sederhana
  • script web sederhana
  • cara membuat css pada html
  • web sederhana dengan html
  • membuat halaman web dengan css
  • membuat web sederhana dengan html
  • membuat tampilan web dengan php
  • membuat css sederhana
  • membuat tampilan dengan css
  • contoh script html keren
  • membuat web footer yg bagus
  • beritapendidikan net/wp-admin
  • kode tampilan web statis
  • script html website keren
  • coding pembuatan web penjualan
  • yhs-1
  • script website pribadi gratis
  • contoh program html bagus
  • sintak desain web
  • contoh program penjualan menggunakan web html
  • koding html untuk desain menu utam web
  • download contoh script html
  • cara membuat website pertanaian dan codingnya
  • coding sintaks web sederhana
  • contoh html penjualan
  • web desain denGan tampilan yang lebih menarik lengkap dengan skripnya format html
  • cara membuat web html dan css denga tampilan bagus
  • Coding sintaks web
  • templete website yang dinamis beserta scriptnya
  • WDB TRIK
  • Tampilan halaman web simple
  • contoh web sederhana
  • berbagai cara agar tampilan halaman web lebih dinamis dan menarik
  • contoh web beserta scriptnya
  • yhs-fh_lsonsw
  • contoh web statis penjualan
  • membuat WEB menggunakan script atau coding
  • membuat tampilan home website
  • download website penjualan menggunakan html
  • membuat web desain sekolah simple
  • download program css untuk penjualan
  • contoh sederhana halaman maintenance web
  • halaman utama yang bagus php
  • KODINGAN desain web dengan
  • web html yang bagus
  • kode script untuk mendesain web
  • kodingan web
  • macam-macam contoh html dengan css
  • kode html sederhana
  • kode html desain sederhana blog
  • html website keren
  • membuat design html keren menggunakan css
  • html dan css contoh web
  • Membuat halaman script/coding
  • membuat tampilan web keren sederhana
  • membuat web menggunakan skrip atau coding
  • membuat web penjualan dinamis
  • sitaks coding web
  • skrip html desain web yang menarik
  • skrip html web keren
  • skrip pemrogranan web sekolah statis
  • skrip tampilan html sedaharna
  • skrit desain tampilan web menggunakan php
  • source code tampilan web sederhana dengan php
  • syntax css halaman depan web
  • tampilan halaman admin keren css
  • tampilan home web css
  • tampilan script html
  • tampilan web beserta scriptnya
  • web sederhana dan menarik html
  • web template sederhana penjualan mobil
  • sintaks html membuat blok sederhana
  • sintak halaman depan facebook
  • membuat web penjualan sederhana dengan html
  • memperindah html biodata dengan css
  • Skrip Html sederhana
  • scrip html sederhana
  • script
  • script css simpel dan lengkap
  • script halaman web
  • script halaman web keren
  • script html halaman depan facebook
  • script html membuat desain footer
  • script template website keren html
  • script web simple
  • scrpit web sekolah html dan css lengkap
  • sintak css php sederhana
  • pemrograman kodingan web sekolah statis
  • download kodingan file wdb statis
  • buatlah pemrograman website sederhana dengan judul penjualan mobil online
  • contoh coding program untuk desain home web
  • contoh coding program web biodata
  • contoh coding tampilan web
  • contoh coding web dealer mobil dengan html
  • contoh coding website
  • contoh css untuk blog sederhana
  • contoh desain halaman utama untuk penjualan html
  • contoh desain web dengan scriptnya
  • 5 contoh kode tampilan web statis
  • contoh desain web sederhana beserta script
  • contoh desain web sederhana dan menarik
  • contoh halan profil web keren
  • contoh html bagus
  • contoh koding tampilan mobil
  • contoh kodingan buat website
  • contoh kodingan program awal html
  • contoh membuat website sekolah dengan html
  • contoh coding php web sederhana
  • contoh coding html website
  • contoh coding html
  • cara agar script html bisa di search di web
  • cara contoh web menu makan
  • cara membuat codingan website penjualan online
  • cara membuat tampilan css
  • cara membuat tampilan depan web menggunakan html
  • cara membuat tampilan depan website menggunakan php
  • cara membuat tampilan menarik pada website sekolah dengan css
  • cara membuat tampilan web design yang sederhana
  • cara mempercantik tampilan php dg css
  • code desain web sederhana
  • code html untuk web statis simpe
  • coding html biodata sekolah
  • coding style css web sekolah
  • codingan untuk membuat web pendidikan
  • conto desain html penjualan
  • contoh code program web statis sederhana
  • contoh coding desain website
  • contoh program desain web sederhana
  • contoh scrip membuat website sekolah dengan css dan html
  • contoh scrip tabel
  • contoh tampilan web dan scriptnya
  • contoh tampilan web statis yang simple menark
  • contoh tampilan website penjualan
  • contoh tampilan website sekolah yang menarik
  • contoh template menarik beserta codingnya
  • contoh tutorial web html periklanan
  • contoh web html yang menarik
  • contoh web statis sekolah
  • contoh website beserta coding htmlnya
  • contoh website sederhana beserta rumusnya
  • contoh websitesederhana
  • cotoh skrip program php dengan tampilan nya
  • Css lawan html bagus mana
  • desain css yang bagus dan sederhana
  • desain halaman web penjualan kendaraan online
  • desain web beserta skripnya
  • desain web css sekolah
  • contoh tampilan menarik beranda syntax html
  • contoh tampilan iklan html
  • contoh tampilan css beserta script nya
  • contoh scrip web nkripsi
  • contoh scrip web pendaftaran online simple
  • contoh script desain web html
  • contoh script html web design
  • contoh script html web statis sederhana
  • contoh script web design iklan
  • contoh script web html php css sederhana
  • contoh script web sederhana html
  • contoh script web simple
  • Contoh Sintak - sintak membuat web sekolah
  • contoh sintaks design web
  • contoh skrip htlm
  • contoh skrip html beserta tampilannya
  • contoh skrip tema website
  • contoh skrip website keren
  • contoh syntax html menarik dan sederhana
  • contoh tampilan css
  • download contoh program 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 11 + 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