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 tampilan website
  • cara membuat website dengan css
  • yhs-fullyhosted_003
  • script html website keren
  • tampilan web sederhana
  • cara membuat tampilan web dengan css
  • membuat tampilan html
  • web html sederhana
  • membuat website dengan html dan css
  • contoh script html web design
  • contoh desain web sederhana
  • tampilan HTML
  • membuat tampilan web dengan css
  • cara membuat css sederhana
  • web sederhana dengan html
  • script web sederhana
  • cara membuat css pada html
  • syntak membuat web desain sederhana dengan php
  • membuat web sederhana dengan html
  • membuat halaman web dengan css
  • membuat tampilan web dengan php
  • membuat tampilan dengan css
  • membuat css sederhana
  • tampilan website sekolah sederhana
  • contoh web keren menggunakan html
  • contoh homepage keren beserta coding
  • script mendesain web sekolah
  • contoh skrip sederhana tampilan goigle
  • Contoh scrip HTML Mudah berserta tampilan nyah
  • contoh script desain web
  • script html tampilan depan website penjualan
  • contoh sintak desain web
  • contoh script html web sederhana
  • source code pembuatan tampilan penjualan dengan html
  • syntax web sederhana
  • tampilan website yang keren beserta codingnya
  • contoh dan tampilan scrip
  • CGMSBGcHHpoYmbbZuAUiGQDxp4NLNvDgPmFCnLXSf7TBlZ_a_-oc_tk
  • cara mempercantik web statis dengan css
  • macam-macam judul website beserta listingnya
  • contoh html sederhana beranda
  • desain web keren dan scriptnya
  • download halaman depan web dengan html dan css
  • menu di awal website sekolah
  • Download gambar website sederhana beserta listingnya
  • download home page sederhana dengan html dan css
  • download koding tampilan hyml
  • download scrips contoh web html
  • membuat css html penjualan motor
  • download script html web sederhana
  • macam-macam judul website dan listingnya
  • web dinamis HTML beserta contoh dan scriptnya
  • download script web sederhana
  • membuat html tentang sekolah
  • kodingan css tampilan web yang bagus
  • membuat isi postingan blogdgn cpt menggunakan hp
  • membuat syntax html dan css yang sangat bagus
  • kode css lengkap web penjualan hp
  • download web statis simple dengan css
  • download tampilan pp webdevolefer
  • membuat web design css html penjualan motor
  • pemrograman html website sekolah
  • rumus bikin bottom kosong cara jalankan program dengan deamwever
  • skrip penjualan menggunakan wordpress
  • skripting css dan html sederhana
  • coding web statis penjualan online
  • sourcoe desain html keren
  • syntaks syntaks untuk membuat web sederhana
  • syntax membuat web statis paling keren tentang penjualan
  • Tam pilan Web Dan codingnya
  • tampilan daftar menu web penjualan
  • Tampilan home php html
  • tampilan home website pariwisata
  • tampilan webdan pengkodeannya
  • tampilan website beserta codingnya
  • Tampilan Website Keren yang Menggunakan HTML
  • web keren dan sederhana
  • web sederhana dengan html dan css
  • skrip desain web keren
  • sintak html untuk membuat web statis dengan tampilan idola
  • rumus website beserta hasilnya
  • script halaman depan web dinamis
  • skrip html yang paling bagus
  • script html website sederhana
  • script HTML website sederhana tentang sekolah
  • script penjualan dengan template php
  • script php tentang penjualan hijab
  • script tampilan
  • script tampilan awal pada web menggunakan html
  • script tampilan home cantik php
  • script tampilan utama web pada html
  • script tampilan web
  • script web html iklan makanan
  • script website sederhana
  • sintak html tampilan website sekolah
  • script halaman penjualan d html
  • download contoh program web penjualan buku dengan menggunakan tampilan CSS dan html
  • buat tampilan web sekolah sederhana
  • 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 dengan menggunakan dreamweaver penjualan hp
  • contoh halaman web file html beserta coddingnya
  • contoh halaman web keren dreamweaver beserta scriptnya
  • contoh header pariwisata simple
  • blog dgn tampilanweb dan cara pengkodeannya
  • contoh html tentang sekolah
  • Contoh kodingan css daftar makanan
  • contoh kodingan untuk membuat web bahasa html dan css
  • contoh listing desain pemograman css dalam membuat tampilan menu
  • contoh listing membuat menu makanan di html dreamweaver
  • contoh membuat web statis tentang profil sekolahan
  • contoh pemrograman web sekolah dengan html
  • contoh desain web penjualan motor
  • contoh desain web beserta codingnya menggunakan html
  • contoh coding template website
  • Cara contoh web sekolah sederhana
  • cara membuat program web html tutorial hijab
  • cara membuat script web design beserta contohnya
  • 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 website yang menarik
  • conoh web css dan skripnya
  • contog program html
  • contoh beserta coding web pariwisata
  • contoh code php tampilan beranda web
  • contoh coding html dan css membuat web keren
  • contoh program desain html seperti google
  • contoh program html dan scripnya
  • 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
  • contoh-contoh template beserta coding
  • desain web sederhana beserta codingnya
  • contoh tampilan web yang menarik dan codingnya
  • contoh tampilan web bergambar pariwisata
  • Contoh tampilan index html dan scriptnya
  • contoh program html menarik beserta sintaknya
  • contoh scrip html artikel dengan diasaen bagus
  • 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 script website php
  • contoh scrpit html untuk membuat halaman depan web
  • contoh secrib html untuk membuad blok yg bagus
  • contoh sintak web sederhana tentang tokoh idola
  • contoh sintak web template
  • contoh source code html sederhana pariwisata
  • contoh sript templete desain web
  • contoh syntax html sederhana
  • contoh tampilan home pada web
  • contoh tampilan home web
  • contoh tampilan home website mobil
  • desain web statis sederhana
  • 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