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 web dengan css
  • cara membuat website dengan css
  • web html sederhana
  • membuat tampilan html
  • cara membuat tampilan web dengan css
  • membuat website dengan html dan css
  • tampilan web sederhana
  • tampilan HTML
  • membuat tampilan web dengan css
  • contoh desain web sederhana
  • yhs-fullyhosted_003
  • script web sederhana
  • cara membuat css 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 tampilan dengan css
  • membuat css sederhana
  • contoh script html keren
  • membuat web footer yg bagus
  • kode tampilan web statis
  • beritapendidikan net/wp-admin
  • contoh skrip html sederhana
  • script website sederhana
  • contoh program penjualan menggunakan web html
  • sintak desain web
  • contoh coding web pariwisata
  • coding website penjualan
  • koding html untuk desain menu utam web
  • download contoh script html
  • contoh program html bagus
  • yhs-1
  • makalah web dengan php dan css
  • contoh desain website beserta codingnya
  • contoh html penjualan
  • web desain denGan tampilan yang lebih menarik lengkap dengan skripnya format html
  • contoh codingan css
  • yhs-fh_lsonsw
  • contoh web beserta scriptnya
  • script html website keren
  • templete website yang dinamis beserta scriptnya
  • Tampilan halaman web simple
  • contoh coding html web penjualan
  • coding tampilan depan facebook
  • contoh web site sederhana html dan css
  • membuat web menarik & sederhana dengan php
  • contoh web statis penjualan
  • contoh tampilan web dengan php
  • membuat web penjualan sederhana dengan html
  • membuat tampilan web keren sederhana
  • membuat design html keren menggunakan css
  • download coding php web sederhana menggunakan html
  • membuat tampilan sederhana dreamweaver css
  • membuat web desain sekolah simple
  • membuat halaman web beserta scriptnya
  • macam-macam contoh html dengan css
  • html desain web sekolah
  • html dan css contoh web
  • homepage penjualan html code
  • download website penjualan menggunakan html
  • download script web sekolah gratis full css
  • download program css untuk penjualan
  • download kodingan file wdb statis
  • download contoh program php
  • desain web sederhana dengan html dan css
  • html sederhana tentang pendaftaran sekolah
  • html untuk penjualan
  • html website keren
  • macam macam website sederhana
  • Macam macam skript CSS wordpress
  • kooding tampilan utama web di dremwever
  • konsep website sederhana php dreamweaver
  • konsep website dengan tema penjualan
  • kodingan web
  • homepage penjualan html css kode
  • kodingan html tampilan web
  • contoh script web sederhana html
  • desain web dan contoh scriptnya
  • web template sederhana penjualan mobil
  • tampilan halaman admin keren css
  • syntax css halaman depan web
  • skrit desain tampilan web menggunakan php
  • skrip website sekolah dengan html
  • skrip tampilan utama desain web
  • skrip tampilan html
  • Skrip Html sederhana
  • skrip html desain web yang menarik
  • skrip desain html profil facebook
  • sintaks html membuat blok sederhana
  • rumus html bsrta contoh web bagus
  • tampilan home html keren
  • Tampilan homepage statis Dengan html
  • web penjualan statis html css
  • web html yang bagus
  • WDB TRIK
  • tutorial membuat konsep html sederhana
  • template web penjualan simple
  • tampilan website sederhana menggunakan html dan css
  • tampilan web yang menarik dengan css beserta codingnya
  • tampilan web yang berkaitan dengan pendidikan
  • tampilan script html
  • tampilan keren tapi sederhana
  • sintak web programing
  • sintak list menu php
  • sintak halaman depan facebook
  • script html halaman depan facebook
  • script halaman web keren
  • script css simpel dan lengkap
  • script css bagus
  • script coding membuat desain web#
  • script
  • pemweb contoh desain profil
  • memperindah html biodata dengan css
  • mempercantik tampilan web dengan css lengkap dengan kodingnya
  • memperCantik desain web menggunakan html
  • script html membuat desain footer
  • script html membuat website sekolah
  • script html sederhana tentang web design
  • sintak css php sederhana
  • scrpit web sekolah html dan css lengkap
  • script web simple
  • script untuk membuat web statis dengan css
  • script tampilan website
  • script menu di web sekolah css
  • script membuat web sekolah menggunakan css dan html
  • script membuat web sekolah dengan html dan css
  • script html website sekolah
  • script html web sederhana
  • sintak css menu sederhana
  • desain web css sekolah
  • contoh php script untuk membuat web sekolah
  • contoh desain halaman utama untuk penjualan html
  • contoh css untuk blog sederhana
  • contoh coding website css
  • contoh coding web dealer mobil dengan html
  • Contoh Coding templete css dan hasilnya
  • contoh coding program web biodata
  • contoh coding program untuk desain home web
  • contoh coding php web sederhana
  • contoh coding html
  • contoh coding design web sederhana
  • contoh coding bikin program web penjualan
  • contoh desain halaman utama web penjualan
  • contoh desain web penjualan
  • contoh desain web sederhana dan menarik
  • contoh penngunaan css untuk mempercntik web lengkap dengan codig
  • contoh pemweb desain profil
  • contoh membuat website sekolah dengan html
  • contoh membuat web sederhana menarik menggunakan html dengan tema penjualan
  • contoh lskrip dan halaman web yang bagus css
  • contoh lskrip dan halaman web yang bagus
  • contoh koding tampilan mobil
  • CONTOH KODING PEMBUATAN BLOG SEKOLAH
  • contoh halan profil web keren
  • contoh halaman web sederhana beserta syntaxnya
  • contoh desain web sederhqna beserta script#
  • contoh code html sederhana di wordpress
  • conntoh website iklan dan css kodenya
  • codingan untuk membuat web pendidikan
  • cara membuat web penjualn css
  • cara membuat web penjualan html css
  • cara membuat web css penjualan kodingnyaa
  • cara membuat tampilan web menarik beserta kodingan
  • cara membuat tampilan web design yang sederhana
  • cara membuat tampilan menarik pada website sekolah dengan css
  • cara membuat halaman web sekolah beserta contohnya
  • cara membuat halaman web sederhana dan sintaks nya
  • cara membuat codingan website penjualan online
  • cara contoh web menu makan
  • buatlah web sederhana menggunakan html dengan tema penjualan
  • cara mempercantik tampilan php dg css
  • cara menggunakan simple css untuk desain web
  • cara penggunaan sintak div
  • codingan html sederhana dan menarik
  • codingan halaman depan
  • codingan desain menu utama
  • coding web design sederhana
  • coding untuk membuat design web sederhana
  • coding tamplate penjualan
  • coding style css web sekolah
  • coding membuat desain web sekolah menggunakan html
  • coding html penjualan
  • code html untuk web statis simpe
  • code desain web sederhana
  • 5 contoh kode tampilan web statis
  • desain html keren serta rumusnya
  • contoh tampilan website penjualan
  • contoh tampilan web yang menarik beserta coding pembuatannya
  • contoh tampilan web tercantik dan scripnya
  • contoh tampilan web menggunakan css
  • contoh tampilan web dan secriptnya
  • contoh tampilan web beserta coding css
  • contoh tampilan menarik beranda syntax html
  • contoh tampilan iklan html
  • contoh tampilan halaman web dan scriptnya
  • contoh tampilan css beserta script nya
  • contoh syntax html menarik dan sederhana
  • contoh tampilan website penjualan yang baik
  • contoh tampilan website sekolah yang menarik
  • contoh template menarik beserta codingnya
  • desain css yang bagus dan sederhana
  • Css lawan html bagus mana
  • cooding cooding beserta tampilanya
  • contoh websitesederhana
  • contoh website sederhana beserta rumusnya
  • contoh website beserta coding htmlnya
  • contoh web sederhana
  • contoh web penjualan online html
  • contoh web design sederhana
  • contoh tutorial web html periklanan
  • contoh template web desain tentang pariwisata yang simple
  • contoh syntax html dan css
  • contoh skrip tema website
  • contoh skrip htlm
  • contoh script HTML CSS web statis
  • contoh script html css
  • contoh script coding web admin
  • contoh scrip web pendaftaran online simple
  • contoh scrip tabel
  • contoh scrip membuat website sekolah dengan css dan html
  • contoh scrip html dr
  • contoh program penjualan php dan css
  • contoh program html yang bagus
  • contoh program html sederhana dan css
  • contoh program html keren
  • contoh script Html membuat tampilan seperti web
  • contoh script html tampilan web
  • contoh script sederhana pada wordpress
  • contoh situs pemograman web css dan videonya
  • contoh sintaks html yang menarik dan bagus
  • contoh sintaks design web
  • contoh sederhana halaman maintenance web
  • contoh script website sederhana
  • contoh script web simple
  • contoh script web sederhana tapi menarik
  • contoh script web penjualan dengan php
  • contoh script web html php css sederhana
  • contoh script web design iklan
  • contoh script template di php sederhana
  • contoh program desain web 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 14 + 3 ?
    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