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 website dengan css
  • cara membuat web dengan css
  • cara membuat tampilan website
  • cara membuat tampilan web dengan css
  • web html sederhana
  • membuat tampilan html
  • 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
  • web sederhana dengan html
  • cara membuat css sederhana
  • cara membuat css pada html
  • membuat web sederhana dengan html
  • membuat halaman web dengan css
  • membuat css sederhana
  • membuat tampilan dengan css
  • membuat tampilan web dengan php
  • contoh script html keren
  • beritapendidikan net/wp-admin
  • membuat web footer yg bagus
  • kode tampilan web statis
  • contoh skrip html sederhana
  • script website sederhana
  • coding website penjualan
  • contoh program html bagus
  • contoh coding web pariwisata
  • sintak desain web
  • contoh desain website beserta codingnya
  • makalah web dengan php dan css
  • contoh program html periklanan
  • DESIGN TAMPILAN WEB
  • download contoh script html
  • contoh tampilan template sederhana
  • contoh tampilan web dengan php
  • contoh tampilan web dan scriptnya
  • contoh codingan css
  • membuat web menarik & sederhana dengan php
  • script html website keren
  • contoh desain web html sederhana
  • contoh halaman website dan coding htmlnya
  • contoh coding html web penjualan
  • yhs-fh_lsonsw
  • Tampilan halaman web simple
  • templete website yang dinamis beserta scriptnya
  • coding tampilan membuat web penjualan dengan dreamweaver
  • contoh web beserta scriptnya
  • web desain denGan tampilan yang lebih menarik lengkap dengan skripnya format html
  • coding tampilan depan facebook
  • yhs-1
  • contoh web site sederhana html dan css
  • contoh web statis penjualan
  • contoh website keren dan script htmlnya
  • download script web html keren
  • download script web desain html keren
  • membuat halaman web beserta scriptnya
  • download script desain web menggunakan html
  • membuat tampilan sederhana dreamweaver css
  • membuat tampilan web bagus dengan css
  • download program css untuk penjualan
  • desain web sederhana dengan html dan css
  • membuat web sederhana dengan css dan html
  • membuat web penjualan sederhana dengan html
  • download coding php web sederhana menggunakan html
  • konsep website dengan tema penjualan
  • download contoh program php
  • membuat web desain sekolah simple
  • membuat tampilan web iklan dengan html
  • download kodingan file wdb statis
  • desain web sederahana
  • membuat design web sederhana dengan html
  • membuat design html keren menggunakan css
  • html desain web sekolah
  • konsep website sederhana php dreamweaver
  • html sederhana dengan php designer
  • html sederhana tentang pendaftaran sekolah
  • html untuk penjualan
  • kode html website tampilan keren
  • kodingan html tampilan web
  • contoh sederhana halaman maintenance web
  • koding dalam tampilan html
  • kooding tampilan utama web di dremwever
  • html dan css contoh web
  • kodingan css
  • download script web sekolah gratis full css
  • download web statis sekolah
  • meembuat coding penjualan web design
  • download website penjualan menggunakan html
  • homepage penjualan html code
  • macam-macam contoh html dengan css
  • macam macam website sederhana
  • homepage penjualan html css kode
  • Macam macam skript CSS wordpress
  • koding desain web
  • memperindah html biodata dengan css
  • tampilan home html keren
  • tampilan halaman web dan script nya
  • tampilan halaman admin keren css
  • syntax css halaman depan web
  • 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
  • sintak web programing
  • sintak list menu php
  • Tampilan homepage statis Dengan html
  • tampilan keren tapi sederhana
  • tampilan pforil admin website sederhana
  • web penjualan statis html css
  • web html yang bagus
  • web desain sekolah sederhana dengan css
  • tutorial membuat web desain sederhana dengan html
  • tutorial membuat konsep html sederhana
  • template web penjualan simple
  • tampilan website sederhana menggunakan html dan css
  • tampilan website html sederhana keren
  • tampilan web yang menarik dengan css beserta codingnya
  • tampilan web yang berkaitan dengan pendidikan
  • tampilan web beserta scriptnya
  • tampilan sederhana html penjualan
  • tampilan script html
  • sintak halaman depan facebook
  • sintak css untuk tampilan dan hasil nya
  • sintak css php sederhana
  • script html membuat desain footer
  • script html halaman depan facebook
  • script css simpel dan lengkap
  • script css bagus
  • script coding membuat desain web#
  • script belajar web design sederhana dengan html
  • script
  • rumus html bsrta contoh web bagus
  • rumus css untuk membuat website sederhana
  • rumus cara untuk membuat web menurut css
  • program menu sederhana html
  • pemweb contoh desain profil
  • mempercantik tampilan web dengan css lengkap dengan kodingnya
  • script html membuat website sekolah
  • script html sederhana tentang web design
  • script html untuk tampilan
  • sintak css menu sederhana
  • scrpit web sekolah html dan css lengkap
  • script web simple
  • script untuk membuat web statis dengan css
  • script tampilan website
  • script profil bagus
  • script menu di web sekolah css
  • script membuat web sekolah menggunakan css dan html
  • script membuat web sekolah dengan html dan css
  • script maintenance simple keren
  • script html website sekolah
  • Script html web yang bagus dan menarik
  • script html web sederhana
  • memperCantik desain web menggunakan html
  • contoh program desain web sederhana
  • contoh desain halaman utama untuk penjualan html
  • contoh css untuk blog sederhana
  • contoh css script keren
  • contoh codingn web desingn html
  • contoh coding website css
  • Contoh Coding templete css dan hasilnya
  • contoh coding tampilan dari css
  • contoh coding program web biodata
  • contoh coding program untuk desain home web
  • contoh coding php membuat template sederhana
  • contoh coding html
  • contoh coding design web sederhana
  • contoh coding css beserta tampilannya
  • contoh coding bikin program web penjualan
  • contoh desain halaman utama web penjualan
  • contoh desain html yang menaeik
  • contoh desain web penjualan
  • contoh php script untuk membuat web sekolah
  • contoh penngunaan css untuk mempercntik web lengkap dengan codig
  • contoh pemweb desain profil
  • contoh menu utama php yg bagus
  • 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 disen web sederhana
  • contoh desain website sederhana beserta cara
  • contoh desain web sederhqna beserta script#
  • contoh code html sederhana di wordpress
  • conntoh website iklan dan css kodenya
  • cara membuat web penjualn css
  • cara membuat web penjualan html css
  • cara membuat web mengguna kan dreanweaver penjualan mobil
  • cara membuat web css penjualan kodingnyaa
  • Cara membuat web bagus dengan coding sederhana
  • cara membuat tampilan web menarik beserta kodingan
  • cara membuat tampilan web design yang sederhana
  • cara membuat halaman web sekolah beserta contohnya
  • cara membuat halaman web sederhana dan sintaks nya
  • cara contoh web menu makan
  • Cara bikin html sederhana tapi bagus
  • buatlah web sederhana menggunakan html dengan tema penjualan
  • buat tampilan web
  • belajar css desain web homepage
  • cara mempercantik tampilan php dg css
  • cara menggunakan simple css untuk desain web
  • cara penggunaan sintak div
  • codingan untuk membuat web pendidikan
  • codingan html sederhana dan menarik
  • codingan halaman depan
  • codingan desain menu utama
  • coding web sederhana css
  • coding web design sederhana
  • coding untuk membuat design web sederhana
  • coding tamplate penjualan
  • coding style css web sekolah
  • coding pembuatan web penjualan
  • coding membuat desain web sekolah menggunakan html
  • coding html penjualan
  • coding html keren
  • code html untuk web statis simpe
  • 5 contoh kode tampilan web statis
  • contoh program html keren
  • desain web dan contoh scriptnya
  • contoh web desain sederhana dan code
  • contoh web desain sederhana
  • contoh web berita pendidikan sederhana php script
  • contoh template web desain tentang pariwisata yang simple
  • contoh tampilan website penjualan yang baik
  • 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 dan codingnya
  • contoh tampilan web beserta coding css
  • contoh tampilan iklan html
  • contoh tampilan halaman web dan scriptnya
  • contoh web design code pemrograman web
  • contoh web design sederhana
  • contoh web html profil sekolah
  • desain tampilan website sekolah dengan css
  • desain html keren serta rumusnya
  • desain css yang bagus dan sederhana
  • Css lawan html bagus mana
  • cotoh koding dan tampilan untuk style css pada php
  • cooding cooding beserta tampilanya
  • contoh websitesederhana
  • contoh website html
  • contoh website beserta syntax nya dengan html dan css
  • contoh website beserta coding htmlnya
  • contoh web sekolah dan script html nya
  • contoh web sederhana
  • contoh web programing 2 pariwisata
  • contoh web penjualan online html
  • contoh tampilan halaman utama web
  • contoh tampilan css beserta script nya
  • contoh script sederhana pada wordpress
  • contoh script html web design
  • contoh script html tampilan web
  • contoh script Html membuat tampilan seperti web
  • 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 tampilan web
  • contoh program penjualan php dan css
  • contoh program html yang bagus
  • contoh script template di php sederhana
  • contoh script web html php css sederhana
  • contoh script web penjualan dengan php
  • contoh syntax html dan css
  • contoh syntax css yang bagus
  • contoh skrip tema website
  • contoh skrip htlm
  • contoh skrip css bagus
  • contoh situs pemograman web css dan videonya
  • contoh sintaks html yang menarik dan bagus
  • contoh sintaks design web
  • contoh sintak tampiland dengan html
  • contoh script website sederhana
  • contoh script website
  • contoh script web simple
  • contoh script web sederhana tapi menarik
  • contoh script web sederhana html
  • contoh program html sederhana dan css
  • 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 5 + 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