Home » bali media design » 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
  • script html website keren
  • cara membuat website dengan css
  • cara membuat tampilan website
  • cara membuat web dengan css
  • yhs-fullyhosted_003
  • contoh script html web design
  • 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
  • script web sederhana
  • cara membuat css sederhana
  • cara membuat css pada html
  • web sederhana dengan html
  • syntak membuat web desain sederhana dengan php
  • membuat tampilan web dengan php
  • membuat web sederhana dengan html
  • membuat halaman web dengan css
  • membuat css sederhana
  • membuat tampilan dengan css
  • contoh web sederhana dengan html dan css
  • tampilan web sekolah sederhana
  • contoh kodingan desain web tentang kuliner
  • web sederhana dan kodenya
  • syntax html web statis design layout
  • Script web penjualan css dan html
  • contoh website sekolah beserta coding
  • syntax website masak
  • syntax/code home page dari website penjualan makanan ringan menggunakan html
  • tampilan web penjualan hp html dan css
  • tampilan web sederhana wisata alam menggunakan adobe
  • cara bikin web statis pariwisata beserta kodingnya
  • qodingan web html
  • program web sekolah
  • membuat website penjualan makanan menggunakan html beserta scrip
  • web desaign dengan judul pendidikan
  • web html pariwisata bagus
  • web html resep masakan
  • tampilan awal css kode
  • contoh tampilan web dinamis beserta kodenya
  • syntax web tentang sekolah
  • web sekolah lengkap kodingan
  • web sekolah statis sederhana coding css dan html
  • membuat layout website sekolah dengan menu dropdown
  • membuat halaman website home yang menarik dengan kode html
  • membuat halaman WEB sekolah dengan HTML dan CSS
  • web statia codingan css
  • www serbabisa com mebuat web prawisata menggunakan html css
  • trutorial membuat website css sekolahan
  • Script dari halaman web sederhana dari sebuah halaman web menggunakan CSS
  • script html keren
  • tampilan home pada website
  • tampilan syntax css dan kodingnya
  • syntax tentang website penjualan makanan ringan dengan HTML
  • tampilan web berserta scripnya
  • tampilan web beserta codingnya
  • coding html beranda dan css nya
  • sintaks html simple tapi menarik
  • sintaks dari tampilan home
  • Sintak cara membuat home untuk pariwisata
  • tampilan web beserta kode nya
  • tampilan web sederhana wisata alam
  • script tampilan halaman pertama website
  • SCRIPT STYLE WEB DINAMIS CSS
  • script php cara membuat iklan sederhana
  • script penjualan dengan css
  • tempalate web desain beserta codingnya
  • script html untuk footer
  • kodingan wisata bali menggunakan html
  • buat html penjualan web html
  • contoh design web penjualan motor
  • contoh kode web statis keren dengan css dan html
  • contoh membuat web sederhana menggunakan html dan css
  • contoh membuat web simpel menarik dengan html
  • contoh program css penjualan jasa
  • contoh program web css beserta listingnya
  • contoh scrip html domain google
  • contoh scrip pembuatan halaman web
  • contoh scrip web kuliner
  • contoh scrip website html sekolah
  • contoh script CSS yg bagus dan menarik
  • contoh script html desain web dinamis
  • contoh script html keren untuk web sekolahan
  • contoh css dengan menggunakan embeded style sheet
  • contoh contoh desain home web sederhana
  • cara membuat html web statis design layout
  • cara membuat syntax web sekola
  • cara membuat tampilan css
  • cara membuat tampilan depan web kampus dengan html
  • cara membuat tampilan website dinamis pariwisata
  • cara membuat web html plus css
  • cara membuat website sederhana pejualan buku home
  • coding css tampilan html
  • coding untuk halaman utama web penjualan
  • codingan contact us untuk penjualan
  • codingan html untuk tampilan hp dan harganya di web
  • codingan web html lengkap css
  • contoh coding html sederhana iklan
  • contoh script membuat desain style css dan htnl beserta hasilnya
  • contoh script menu makanan web
  • contoh script web dinamis beserta hasilnya
  • Contoh web sekolah sederhana dengan html dan css
  • contoh web sekolah web css keren
  • contoh web statis tutorial hijab
  • contoh webdesain sekolah beserta codingnya
  • contoh website pariwisata
  • desain wabsite html membuat resep makanan
  • desain wabsite membuat resep makanan
  • desain web beserta ccript html nya lengkap css juga
  • design web php kodingnya
  • download tampilan web sederhana penjualan
  • free template css tentang desain tampilan beranda dan profil tampilan facebook
  • kodingan mempercantik website
  • kodingan web sekolah html plus css
  • contoh web sekolah html css beserta skripnya
  • contoh web sekolah html beserta skripnya
  • contoh script website ecommerce kuliner
  • contoh site bagus beserta dengan scripmya
  • contoh syntax / code home page dari website penjualan makanan ringan menggunakan html
  • contoh tag html untuk membuat tampilan website yang keren
  • contoh tampilan design web sederhana
  • contoh tampilan untuk di web beserta sintak nya
  • contoh tampilan web dan coding
  • contoh tampilan web sederhana
  • contoh web css dan html beserta skripnya
  • contoh web html penjualan dengan css
  • contoh web kuliner memggunakan html
  • contoh web menarik beserta kode css dan html
  • contoh web sederhana menggunakan css
  • kodingan web simple
  • 4 thoughts on “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 ?

      1. 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

    Your email address will not be published. Required fields are marked *

    *
    *

    What is 13 + 2 ?
    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) :-)
    Google+ Plus Follow on Twitter Like On Facebook Email to us

    Latest

    cara menampilkan kode html dalam postingan
    Cara cek artikel yang sudah di index oleh mesin pencari google
    Cara disable pesan update notification di wordpress
    Cara Merubah URL Login WordPress
    menghapus watermark WonderPlugin Slider Free Version 4.3

    Recent Posts

    Visitor Counter