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 website dengan css
  • cara membuat web dengan css
  • cara membuat tampilan website
  • yhs-fullyhosted_003
  • script html website keren
  • tampilan web sederhana
  • web html sederhana
  • membuat website dengan html dan css
  • membuat tampilan html
  • cara membuat tampilan web dengan css
  • contoh desain web sederhana
  • tampilan HTML
  • membuat tampilan web dengan css
  • cara membuat css sederhana
  • script web sederhana
  • web sederhana dengan html
  • cara membuat css pada html
  • membuat tampilan web dengan php
  • syntak membuat web desain sederhana dengan php
  • membuat halaman web dengan css
  • contoh script html web design
  • membuat web sederhana dengan html
  • membuat css sederhana
  • membuat tampilan dengan css
  • skrip web keren dan tampilanya
  • tampilan website sekolah sederhana
  • contoh homepage keren beserta coding
  • contoh pemograman sederhana tentang penjualan mobil
  • contoh script html web sederhana
  • contoh tampilan css beserta source codenya
  • contoh skrip sederhana tampilan goigle
  • contoh html sederhana beranda
  • source code pembuatan tampilan penjualan dengan html
  • Contoh scrip HTML Mudah berserta tampilan nyah
  • Blog html sederhana keren
  • cara mempercantik web statis dengan css
  • CGMSBGcHHpoYmbbZuAUiGQDxp4NLNvDgPmFCnLXSf7TBlZ_a_-oc_tk
  • code tampilan web yg atraktif
  • downlod srip login html tema selolah
  • contoh web keren menggunakan html
  • macam-macam judul website beserta listingnya
  • html coding template website sederhana
  • rumus bikin bottom kosong cara jalankan program dengan deamwever
  • desain web keren dan scriptnya
  • rumus website beserta hasilnya
  • scrip tampilan css yg bagus
  • script halaman depan web dinamis
  • macam-macam judul website dan listingnya
  • download contoh program web penjualan buku dengan menggunakan tampilan CSS dan html
  • desain web sederhana beserta codingnya
  • script halaman penjualan d html
  • menu di awal website sekolah
  • Download gambar website sederhana beserta listingnya
  • membuat web skolah dengan html yang paling bagus
  • membuat isi postingan blogdgn cpt menggunakan hp
  • download web statis simple dengan css
  • download web statis keren html css
  • membuat html tentang sekolah
  • kode css lengkap web penjualan hp
  • kodingan tampilan home
  • download tampilan pp webdevolefer
  • download home page sederhana dengan html dan css
  • download halaman depan web dengan html dan css
  • download source tampilan halaman skrip web php css html
  • script html blog wisata
  • skrip desain web keren
  • skript css sederhana tapi menarik beserta tampilannya
  • sourcoe desain html keren
  • Syntact halaman depan
  • syntaks syntaks untuk membuat web sederhana
  • syntax membuat web statis paling keren tentang penjualan
  • syntax web sederhana
  • tampilan beranda yang menarik beserta sintak php nya
  • tampilan daftar menu web penjualan
  • Tampilan home php html
  • tampilan home website pariwisata
  • tampilan web sederhana dengan php
  • tampilan webdan pengkodeannya
  • Tampilan Website Keren yang Menggunakan HTML
  • tampilan website yang keren dan coding
  • trik php tampilan
  • web dinamis HTML beserta contoh dan scriptnya
  • web keren dan sederhana
  • skrip penjualan menggunakan wordpress
  • skrip html web online
  • script html website sederhana
  • script HTML website sederhana tentang sekolah
  • script html&css web statis
  • 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 keren web
  • script tampilan web
  • script web html iklan makanan
  • script web keren html css php
  • script website sederhana
  • sintak buat tamilan google
  • sintak html tampilan website sekolah
  • sintak html untuk membuat web statis dengan tampilan idola
  • sintak program untuk pembuatan halaman beranda
  • script html untuk membuat tampilan home
  • contoh program html dan scripnya
  • contoh header pariwisata simple
  • contoh halaman web file html beserta coddingnya
  • contoh halaman web dengan menggunakan dreamweaver penjualan hp
  • contoh halaman utama web statis
  • contoh download web html
  • contoh desainweb index beserta skrip
  • contoh desain web html sederhana
  • contoh desain web css dan script nya
  • contoh home di html
  • contoh html simple
  • contoh isi homepag3 website sekolah sederhana
  • contoh pemrograman web sekolah dengan html
  • contoh menu web sekolah sederhana dan kodenya
  • contoh membuat web statis tentang profil sekolahan
  • contoh membuat html yg bagus tapi simple
  • contoh listing membuat menu makanan di html dreamweaver
  • contoh listing desain pemograman css dalam membuat tampilan menu
  • contoh kodingan untuk membuat web bahasa html dan css
  • Contoh kodingan css daftar makanan
  • Contoh codingan web html dan css
  • contoh coding template penjualan
  • cara membuat tampilan webhtml
  • CARA MEMBUAT TAMPILAN PHP KEREN
  • cara membuat script web design beserta contohnya
  • cara membuat program web html tutorial hijab
  • Cara membuat html penjualan dengan css
  • cara membuat home php dan css dan hasilnya
  • Cara contoh web sekolah sederhana
  • buat tampilan web sekolah sederhana
  • cara membuat web menu makanan dengan dreamweaver
  • cara membuat web penjualan dengan menggunakan sintaks dari css
  • coding membuat menu penjualan
  • contoh coding html dan css membuat web keren
  • contoh beserta coding web pariwisata
  • contog program html
  • conoh web css dan skripnya
  • codingan membuat tampilan menu web sekolah
  • coding web html yang bagus
  • coding php tampilan home
  • coding mempercantik template web dengan css
  • blog dgn tampilanweb dan cara pengkodeannya
  • contoh program html menarik beserta sintaknya
  • contoh-contoh template beserta coding
  • contoh web desaing html php dan scripnya
  • contoh web coding
  • contoh tampilan web yang menarik dan codingnya
  • Contoh tampilan web dinamis yang menarik
  • Contoh tampilan index html dan scriptnya
  • contoh tampilan html beserta coding css
  • contoh tampilan home website mobil
  • contoh tampilan home web
  • contoh web keren html dan scriptnya
  • contoh web pada html tentang pendidikan
  • contoh web pariwisata dengan php
  • contoh website dengan sintax html
  • contoh website biografi css simple
  • Contoh website beserta skrip
  • contoh web statis lengkap dengan sintakmya
  • contoh web sekolah sederhana dengan html
  • contoh web sekolah dengan html
  • contoh web sederhana beserta codingan dan css
  • contoh web pariwisata skrip html
  • contoh tampilan home pada web
  • contoh syntax html sederhana
  • contoh script website php
  • contoh script untuk halaman home sebuah web
  • Contoh script listing program untuk mebuat tampilan awal
  • contoh script html yang bagus dan simple
  • contoh script html website keren
  • contoh script desain web
  • contoh script css dan html keren
  • contoh script beranda
  • contoh secrib html untuk membuad blok yg bagus
  • contoh sintak css dan html tampilan web sederhana
  • contoh sintak desain web
  • contoh sript templete desain web
  • contoh source code html sederhana pariwisata
  • contoh skrip web home sederhana
  • Contoh sintaks website sederhana dengan bahasa pemrograman html dan css
  • contoh sintak web template
  • contoh sintak web sederhana tentang tokoh idola
  • contoh sintak web keren tapi mudah
  • contoh sintak html home web
  • contoh scrip html artikel dengan diasaen bagus
  • 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 10 + 15 ?
    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