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 tampilan website
  • cara membuat web dengan css
  • web html sederhana
  • cara membuat tampilan web dengan css
  • membuat tampilan html
  • membuat website dengan html dan css
  • tampilan web sederhana
  • tampilan HTML
  • membuat tampilan web dengan css
  • contoh desain web sederhana
  • script web sederhana
  • cara membuat css pada html
  • web sederhana dengan html
  • cara membuat css sederhana
  • membuat halaman web dengan css
  • membuat web sederhana dengan html
  • yhs-fullyhosted_003
  • membuat tampilan dengan css
  • membuat css sederhana
  • membuat tampilan web dengan php
  • contoh script html keren
  • script website sederhana
  • contoh skrip html sederhana
  • contoh coding web pariwisata
  • contoh desain website beserta codingnya
  • beritapendidikan net/wp-admin
  • coding website penjualan
  • contoh program html periklanan
  • DESIGN TAMPILAN WEB
  • contoh web site sederhana html dan css
  • membuat web menarik & sederhana dengan php
  • contoh coding web css sederhana
  • download contoh script html
  • contoh codingan css
  • contoh tampilan web dengan php
  • script html website keren
  • contoh dan cara desain web sekolah
  • Contoh tampilan Css
  • contoh tampilan template sederhana
  • contoh desain web html sederhana
  • contoh halaman website dan coding htmlnya
  • contoh tampilan web dan scriptnya
  • coding tampilan membuat web penjualan dengan dreamweaver
  • scrip web simple bagus
  • script blog sederhana bagus
  • sintak html untuk web penjualan
  • contoh coding html web penjualan
  • membuat desain website dengan css sederhana
  • sintak css sederhana
  • contoh website keren dan script htmlnya
  • desain web sederahana
  • meembuat coding penjualan web design
  • membuat tampilan web bagus dengan css
  • membuat web sederhana dengan css dan html
  • Membuat sintax contact tentang penjualan online dengan html
  • membuat tampilan sederhana dreamweaver css
  • membuat design web sederhana dengan html
  • membuat tampilan web iklan dengan html
  • membuat halaman web beserta scriptnya
  • macam macam website sederhana
  • html desain web sekolah
  • homepage penjualan html css kode
  • homepage penjualan html code
  • download web statis sekolah
  • download script web sekolah gratis full css
  • download script web html keren
  • download script web desain html keren
  • download script html sederhana
  • download script desain web menggunakan html
  • Download contoh pemrograman sederhana html
  • desain web sederhana dengan html dan css
  • desain web dan contoh scriptnya
  • html sederhana dengan php designer
  • html sederhana tentang pendaftaran sekolah
  • kode desain web sederhana
  • Macam macam skript CSS wordpress
  • kooding tampilan utama web di dremwever
  • konsep website sederhana php dreamweaver
  • konsep website dengan tema penjualan
  • kodingan web sederhana css
  • html untuk penjualan
  • kodingan php manual tampilan halaman utama web
  • kodingan html tampilan web
  • kodingan css
  • koding desain web
  • koding dalam tampilan html
  • kode html website tampilan keren
  • desain tampilan website sekolah dengan css
  • web penjualan tereren
  • tampilan pforil admin website sederhana
  • Tampilan homepage statis Dengan html
  • tampilan home html keren
  • tampilan halaman web dan script nya
  • skrip website sekolah dengan html
  • skrip tampilan utama desain web
  • skrip desain web css sederhana
  • skrip desain html profil facebook
  • sintak web programing
  • Sintak membuat website penjualan dengan html
  • sintak css untuk tampilan dan hasil nya
  • sintak css menu sederhana
  • script web simple dan bagus
  • tampilan sederhana html penjualan
  • tampilan untuk html
  • web penjualan statis html css
  • web desain sekolah sederhana dengan css
  • tutorial membuat web desain sederhana dengan html
  • tutorial membuat konsep html sederhana
  • template web penjualan simple
  • template koding website sederhana
  • tampilan website sekolah sederhana
  • yhsm-inucbr_001
  • tampilan website sederhana menggunakan html dan css
  • tampilan website html sederhana keren
  • tampilan web yang berkaitan dengan pendidikan
  • tampilan web keren beserta scriptnya
  • tampilan web beserta scriptnya
  • Script web html yang menarik tentang pendidikan
  • Script web html yang bagus
  • script css sederhana
  • script css bagus
  • script coding membuat desain web#
  • script belajar web design sederhana dengan html
  • Scrip web html yang bagus dan menarik
  • scrip web html yang bagus 25 halaman
  • rumus tampilan web iklan
  • rumus html bsrta contoh web bagus
  • rumus css untuk membuat website sederhana
  • rumus cara untuk membuat web menurut css
  • program menu sederhana html
  • program html keren
  • mempercantik tampilan web dengan css lengkap dengan kodingnya
  • Script html membuat tampilan
  • script html membuat web sekolah
  • Script web html membuat profil
  • script untuk membuat web statis dengan css
  • script tampilan website
  • script profil bagus
  • 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
  • script html untuk tampilan
  • script html sederhana tentang web design
  • script html membuat website sekolah
  • memperCantik desain web menggunakan html
  • desain html keren serta rumusnya
  • contoh program html keren
  • contoh desain web beserta code
  • contoh desain html yang menaeik
  • contoh desain halaman utama web penjualan
  • contoh css script keren
  • contoh codingn web desingn html
  • contoh codingan html
  • contoh coding web css
  • Contoh Coding templete css dan hasilnya
  • contoh coding tampilan dari css
  • contoh coding sederhana untuk pembuatan web dengan html dan css
  • contoh coding php membuat template sederhana
  • contoh coding pembuatan program
  • contoh coding pembuatan halaman web dan tampilannya
  • contoh desain web penjualan
  • contoh desain web sederhqna beserta script#
  • contoh desain website sederhana beserta cara
  • contoh program html bagus
  • contoh php script untuk membuat web sekolah
  • contoh penngunaan css untuk mempercntik web lengkap dengan codig
  • 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 PEMBUATAN BLOG SEKOLAH
  • contoh html web sekolah dan rumus htmlnya
  • contoh homepage dengan html tentang sekolah
  • contoh halaman web sederhana beserta syntaxnya
  • contoh dsain web dengan html yang keren
  • contoh disen web sederhana
  • contoh coding html template dg css
  • contoh coding design web sederhana
  • cara penggunaan sintak div
  • cara menggunakan simple css untuk desain web
  • 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 script html tampilan web keren
  • cara membuat halaman web sekolah beserta contohnya
  • Cara bikin html sederhana tapi bagus
  • buatlah web sederhana menggunakan html dengan tema penjualan
  • buat tampilan web
  • cara tampilan web sekolah menggunakan HTML
  • coding html keren
  • coding html penjualan
  • contoh coding css beserta tampilannya
  • contoh code html sederhana di wordpress
  • contoh code html penjualan mobil
  • contoh buat web dengan html
  • codingan html sederhana dan menarik
  • codingan desain menu utama
  • coding web sederhana css
  • coding web design sederhana
  • coding untuk membuat design web sederhana
  • coding tamplate penjualan
  • coding tampilan depan facebook
  • coding pembuatan web penjualan
  • coding membuat desain web sekolah menggunakan html
  • belajar css desain web homepage
  • cotoh koding dan tampilan untuk style css pada php
  • contoh web desain sederhana
  • contoh web berita pendidikan sederhana php script
  • contoh template web desain tentang pariwisata yang simple
  • contoh tampilan website sederhana menarik
  • contoh tampilan website penjualan yang baik
  • contoh tampilan website penjualan sederhana
  • contoh tampilan website penjualan online html
  • contoh tampilan web yang menarik beserta coding pembuatannya
  • contoh tampilan web tercantik dan scripnya
  • contoh tampilan web menggunakan css
  • contoh tampilan web html untuk penjualan
  • contoh tampilan web dan secriptnya
  • contoh tampilan web dan codingnya
  • contoh web desain sederhana dan code
  • contoh web design code pemrograman web
  • contoh web design sederhana
  • cooding cooding beserta tampilanya
  • contoh website sekolah dengan kode html
  • contoh website penjualan beserta kode program
  • contoh website html
  • contoh website dengan kodingannya dengan css
  • contoh website coding
  • contoh website beserta syntax nya dengan html dan css
  • contoh web simple pariwisata
  • contoh web sekolah statis
  • contoh web sekolah dan script html nya
  • contoh web sederhana beserta kodingannya
  • contoh web programing 2 pariwisata
  • contoh web html profil sekolah
  • contoh tampilan pemrograman web
  • contoh tampilan halaman web dan scriptnya
  • contoh script pemrogaman tentang sekolah
  • 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 scrip html keren
  • contoh scrip html dr
  • contoh scrip bikin web
  • contoh program web desain html
  • contoh program tampilan web
  • contoh program penjualan php dan css
  • contoh program html yang bagus
  • contoh script sederhana pada wordpress
  • contoh script template di php sederhana
  • contoh script web penjualan dengan php
  • contoh tampilan halaman utama web
  • contoh syntax css yang bagus
  • contoh skrip css bagus
  • contoh skip membuat html sederhana
  • contoh situs pemograman web css dan videonya
  • Contoh sintaks web php html css
  • contoh sintaks html yang menarik dan bagus
  • contoh sintak tampiland dengan html
  • contoh Script website yang bagus
  • contoh script website sederhana
  • contoh script website
  • contoh script websaid sekolah css
  • contoh script web sederhana tapi menarik
  • 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 13 + 6 ?
    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