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 tampilan website
  • cara membuat website dengan css
  • cara membuat web dengan css
  • yhs-fullyhosted_003
  • tampilan web sederhana
  • web html sederhana
  • membuat website dengan html dan css
  • membuat tampilan html
  • cara membuat tampilan web dengan css
  • tampilan HTML
  • contoh desain web sederhana
  • membuat tampilan web dengan css
  • cara membuat css sederhana
  • cara membuat css pada html
  • script web sederhana
  • web sederhana dengan html
  • script html website keren
  • membuat web sederhana dengan html
  • membuat halaman web dengan css
  • membuat tampilan web dengan php
  • syntak membuat web desain sederhana dengan php
  • membuat tampilan dengan css
  • membuat css sederhana
  • contoh script html web design
  • script desain web
  • contoh website sekolah html
  • skrip web keren dan tampilanya
  • syntak website simpel di html
  • contoh coding html website
  • contoh coding web sederhana
  • contoh coding web design
  • contoh profil web penjualan
  • contoh web simple menggunakan html dan css
  • contoh koding pembuatan web sek
  • contoh website iklan jualan dan kode penjelasan kode nya
  • contoh coding web dengan tampilan menarik
  • contoh script html
  • contoh skrip html
  • Blog html sederhana keren
  • contoh desain web sederhana dengan php
  • contoh html yg menarik
  • contoh koding web design yang keren
  • contoh pemograman sederhana tentang penjualan mobil
  • scrip html dengan tema WEB sekolah
  • membangun web sekolah dengan html php & css
  • Contoh script halaman home dengan html
  • contoh sintak htm penjualan
  • koding untuk membuat profil pada web programing
  • koding membuat web penjualan dengan css
  • contoh source code sederhana sebuah halaman web lengkap
  • disain web css sederhan
  • tipe jaringan untuk membuat coding dan mendesain halaman web
  • contoh script desain untuk web
  • gambar tampilan website tentang kpop
  • contoh skrip web sederhana
  • contoh skrip desain web
  • tampilan website sederhana keren
  • contoh web sederhana dengan css
  • Contoh coding html web
  • membuat tampilan web sederhana penjualan
  • mendedain web ponsel sederhana menggunakan css
  • mengunakan css dan html untuk mengambar mobil sederhana
  • screep html tentang pendidikan lengkap
  • penjualan mobil dan motor website download
  • penampilan web dengan HTML
  • membuat tampilan web html
  • download web statis keren html css
  • mendesain web ponsel sederhana menggunakan css
  • membuat script penjualan hp sederhana
  • koding menu utama website sekolah
  • koding css web sederhana
  • html dreamweaver script css buat layout sederhana
  • html beserta css yang bagus
  • File Html web pariwisata
  • edit tampilan web dengan css sederhana
  • download web sekolah format html
  • download web dinamis profil sekolah sederhana
  • download tampilan css penjualan
  • download source code html keren
  • kodingan home web
  • kodingan tampilan home
  • kodingan web html
  • membuat html yang bagus dan sederhana
  • membuat home page tampilan depan perusahaan dengan css
  • listing cara membuat mobil truk dengan menggunakan html dancss
  • membuat home page perusahaan dengan css
  • membuat css3 tampilan homepage perusahaan
  • macam-macam rumus mempercantik web design
  • macam macam coding web statis
  • listing website penjualan aneka jenis kue
  • Listing css dan html untuk desain kendaraan mobil
  • kodingan website sekolah menggunakan html
  • download script tampilan web sederhana sekolah
  • website menggunakan HTML dan CSS beserta codingnya
  • template css penjualan mobil
  • tema tentang scrip php
  • tema desain css sederhana
  • Teknik mendesain web cantik beserta kode-kodenya pada pembuatan pemrograman web
  • tampilan website yang keren dan coding
  • tampilan website yang cantik menggunakan dreamweaver beserta sintaknya
  • tampilan website sederhana bagus
  • tampilan web sederhana menggunakan css dan html
  • tampilan web sederhana menggunakan css
  • tampilan web sederhana dengan php
  • tampilan web html keren
  • tampilan web home depan
  • template pariwisata sederhana
  • template website sederhana format html
  • website css penjualan mobil
  • web sederhana dengan html dan css
  • web keren sederhana
  • tutorial website penjualan sederhana
  • tutorial membuat profil layout html kpop
  • tutorial cara membuat desain web sekolah dengan php dan css
  • tutorial bikin program web dengan html css tentang penjualan
  • tuliskan program untuk membuat tampilan web
  • trik php tampilan
  • tipe jaringan untuk membuat coding dan menfesain halaman web
  • template website sederhana penjualan mobil
  • template website sederhana html
  • coding php untuk tampilan awal
  • tampilan simple tapi keren web sekolahan
  • tampilan utama website penjualan
  • script web html menarik
  • script untuk desain web periklanan
  • script tampilan web sederhana
  • script tampilan program menggunakan html dan css
  • script tampilan keren web
  • script sederhana web sekolah
  • script lengkap membuat website penjualan css
  • script html&css web statis
  • script html membuat halaman pertama(home)sebuah web statis
  • script html blog wisata
  • scrip tampilan css yg bagus
  • script website sederhana html css
  • sintak html untuk penjualan online
  • tampilan sederhana menggunakan css
  • tampilan depan web yang menarik
  • tampilan depan web sekolah
  • tampilan dan codingan web sekolah 4 halaman
  • syntax web design perusahaan sederhana
  • syntax desain web perusahaan
  • skript css sederhana tapi menarik beserta tampilannya
  • skrip web simpel
  • skrip desain webside
  • skrip desain web
  • sintak untuk tampilan home
  • sintak untuk membuat desain web keren
  • syntax web design penjualan online sederhana
  • contoh script html website keren
  • contoh desain web sekolah sederhana
  • contoh desain web sederhana dengan html
  • contoh desain web css dan script nya
  • contoh desain tampilan awal website penjualan
  • contoh css penjualan ponsel online
  • contoh contoh website dan skripnya
  • contoh coding website menggunakan css
  • contoh coding web untuk tampilan menu
  • contoh coding tentang website html hijab
  • contoh coding html profil template
  • Contoh coding bagus
  • codingan web simple keren
  • contoh eeb sederhana menggunakan css di dreamweaver
  • contoh halaman awal dari sebuah website sederhana tapi menarik
  • contoh halaman utama web beserta codingnya
  • contoh script html dengan tampilan menarik
  • contoh script desain web keren html css
  • contoh script css sederhana
  • contoh script beranda
  • contoh scrip halaman web sekolah
  • contoh profil sintak html
  • contoh penjualan hp dengan menggunakan css
  • contoh membut web pendidikan html
  • contoh membuat web sekolah pakai css
  • contoh membuat html yg bagus tapi simple
  • contoh listing web untuk beranda
  • contoh koding php untuk tampilan home
  • codingan web sekolah 4 halaman
  • coding website sederhana aekolah
  • cara membuat template web sekolah beserta rumus html
  • cara membuat tampilan webhtml
  • Cara membuat tampilan Home pada halaman websait
  • cara membuat tampilan depan we yang simple dan keren
  • cara membuat script website beserta cssnya
  • cara membuat html yang menarik berikut scriptnya
  • Cara membuat html penjualan dengan css
  • cara membuat css dalam tema sekolah
  • cara membuat aplikasi web sederhana tentang pariwisata
  • cara buat mobil di html dan css
  • buat website sekolah home zip
  • belajar web terkeren html beserta scriptnya
  • cara membuat web desain sederhana beserta codingnya
  • cara membuat websait menggunakan dreamweaver
  • cara membuat website dengan css dan html beserta hasilnya
  • coding web html yang bagus
  • coding untuk tampilan web penjualan online
  • coding tampilan website
  • coding php desain halaman
  • coding html web sekolah
  • code menu tampilan web yang bagua
  • cintoh script html untuk web keren
  • cara tampilan yang sederhana php dan html
  • cara tampilan beranda menggunakan php
  • cara mempercantik web dinamis dengan css
  • cara mempercantik tampilan yang sederhana php dan html
  • cara mempercantik tampilan php dan html
  • bagaimana cara membuat program sederhana menggunakan drem weper
  • contoh script html yang bagus dan simple
  • download script progam web dinamis penjualan online
  • contoh web terkeren html beserta scriptnya
  • contoh web statis penjualan dengan html
  • contoh web statis menggunakan css
  • contoh web statis design pariwisata
  • contoh web statis dengan css
  • Contoh web sederhana tetapi menarik dengan mengunakan dreamever
  • contoh web sederhana menggunakan koding php
  • contoh web penjualan html css
  • contoh web pariwisata skrip html
  • contoh web menarik menggunakan html
  • contoh web keren sederhana
  • Contoh web html yang simple tapi bagus
  • Contoh website keren dan contoh html ya
  • contoh website sederhana beserta coding nya
  • contoh website sederhana menggunakan HTML dan CSS beserta codingnya
  • download script html code sebuah website
  • download css sederhana tentang web perusahaan
  • dowload web desain mobil
  • dowload pemrograman web css
  • donlot script web sederhana
  • desain web sederhana dan kode nya
  • desain web lengkap dengan scripnya
  • desain web keren beserta script nya
  • desain web dan code codenya
  • desain html tentang penjualan
  • desain css beserta codingnya keren
  • contoh website sederhana sekolah
  • contoh web design sederhana dan contoh kodingnya
  • contoh web design pemasaran simple
  • contoh tampilan awal website sederhna
  • contoh skrip web html
  • contoh skrip html web sekolah
  • contoh sintax sederhana dari html
  • contoh sintax ccs sederhana?
  • contoh sintak web html
  • contoh sintak menggunakan dreamweaver
  • contoh sebuah website simple
  • contoh script website sederhana
  • contoh script website keren s tapi sederhana
  • contoh script web templet
  • contoh script web statis html keren
  • contoh tampilan css
  • contoh tampilan desain web dan code nya
  • contoh tampilan float css dan codingannya
  • contoh template web profil html
  • contoh template profil web html
  • contoh tampilan website layout dengan css
  • contoh tampilan web sederhana menggunakan bahasa pemrograman
  • Contoh tampilan web dinamis yang menarik
  • contoh tampilan web beserta codingannya
  • contoh tampilan php menggunakan css
  • contoh tampilan html beserta coding css
  • contoh tampilan home menggunakan css
  • contoh tampilan halaman web
  • contoh tampilan halaman depan web
  • contoh tampilan floating dan codingannya
  • contoh script program sederhana rental mobil menggunakan html 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 4 + 12 ?
    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