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
  • cara membuat tampilan web dengan css
  • membuat website dengan html dan css
  • membuat tampilan html
  • contoh desain web sederhana
  • tampilan HTML
  • membuat tampilan web dengan css
  • script web sederhana
  • cara membuat css sederhana
  • cara membuat css pada html
  • web sederhana dengan html
  • membuat halaman web dengan css
  • membuat web sederhana dengan html
  • membuat tampilan web dengan php
  • syntak membuat web desain sederhana dengan php
  • membuat css sederhana
  • membuat tampilan dengan css
  • contoh web sederhana dengan html dan css
  • contoh kodingan desain web tentang kuliner
  • syntax/code home page dari website penjualan makanan ringan menggunakan html
  • contoh codingan html dan css contact us
  • syntax website masak
  • syntax html web statis design layout
  • contoh html dan css pariwisata
  • Script web penjualan css dan html
  • web tentang pariwisata beserta skrip
  • layout web statis css html js
  • contoh tampilan web sederhana
  • tampilan web sederhana wisata alam menggunakan adobe
  • contoh website sekolah beserta coding
  • cara bikin web statis pariwisata beserta kodingnya
  • membuat tampilan web sekolah dengan javascript
  • program html perusahaan
  • Scrip html dan css web untuk web wisata
  • Script dari halaman web sederhana dari sebuah halaman web menggunakan CSS
  • script desain web
  • program web sekolah
  • script html keren
  • membuat tampilan web menarik dengan css
  • kode html halaman depan google
  • kodingan css judul website
  • kodingan mempercantik website
  • kodingan web sekolah html plus css
  • halaman utama pada web dan sintaknya
  • kodingan web simple
  • kodingan wisata bali menggunakan html
  • mebuat menu dropdown html
  • contoh tampilan untuk di web beserta sintak nya
  • membuat halaman WEB sekolah dengan HTML dan CSS
  • membuat halaman website home yang menarik dengan kode html
  • membuat layout website sekolah dengan menu dropdown
  • membuat halaman about us yang bagus website script html
  • membuat tampilan web
  • isi home desain pnjualan
  • script html membuat web penjualan
  • script html tentang penjualan
  • tampilan web beserta codingnya
  • tampilan web beserta kode nya
  • tampilan web koding
  • tampilan web sederhana wisata alam
  • tampilan web wisata dan skripnya
  • tampilan website keren kode html dan css
  • tempalate web desain beserta codingnya
  • trutorial membuat website css sekolahan
  • tuliskan script lambng skolah
  • web desaign dengan judul pendidikan
  • web desain keren dan scrip nya
  • web html pariwisata bagus
  • web pariwisata menggunakan scrip html
  • web sekolah statis sederhana coding css dan html
  • web statia codingan css
  • www serbabisa com mebuat web prawisata menggunakan html css
  • tampilan layout yang sederhana bergambar
  • tampilan home pada website
  • tampilan beranda penjualan
  • syntax web tentang sekolah
  • Script membuat home pada html untuk wisata
  • script pariwisata
  • script php cara membuat iklan sederhana
  • script profil sekolah seperti facebook
  • SCRIPT STYLE WEB DINAMIS CSS
  • script tampilan halaman pertama website
  • script tampilan web keren
  • web html resep masakan
  • script web wisata
  • serbabisa membuat template css
  • Sintak cara membuat home untuk pariwisata
  • sintaks web dinamis css
  • syntak pembuatan web sekolah
  • syntax tentang website penjualan makanan ringan dengan HTML
  • tampilan awal css kode
  • script penjualan dengan css
  • free template css tentang desain tampilan beranda dan profil tampilan facebook
  • contoh scrip html domain google
  • contoh contoh desain home web sederhana
  • contoh coding html website pariwisata
  • contoh coding html sederhana iklan
  • codingan web statis
  • codingan web html lengkap css
  • codingan html untuk tampilan hp dan harganya di web
  • codingan html untuk beranda
  • codingan html dan css halaman about us
  • contoh css dengan menggunakan embeded style sheet
  • Contoh desain layout split keren web statis dengan kodenya
  • contoh desain web statis menggunakan div
  • contoh program css penjualan jasa
  • contoh membuat web simpel menarik dengan html
  • contoh membuat web sederhana menggunakan html dan css
  • contoh kode web statis keren dengan css dan html
  • contoh html dan css dengan tampilan yang menarik
  • contoh format css untuk web beserta hasilnya
  • contoh design web penjualan motor
  • contoh desain web tempat wisata menggunakan html dan css
  • codingan contact us untuk penjualan
  • coding web menggunakan css dan php bagus
  • cara membuat tampilan depan web kampus dengan html
  • cara membuat syntax web sekola
  • cara membuat layout dengan css
  • cara membuat iklan sekolah dengan html
  • cara membuat html web statis design layout
  • cara membuat html sederhana serta kode isi dan akhir
  • cara membuat harga promo makanan hrml css
  • cara membuat blog mengunakan css
  • cara membuat tampilan website dinamis pariwisata
  • cara membuat web html plus css
  • cara membuat web penjualan mengunakan css
  • coding untuk halaman utama web penjualan
  • coding html beranda dan css nya
  • coding css web dinamis
  • cara mudah membuat desain website kuliner
  • cara membuat website sederhana pejualan buku home
  • cara membuat website sederhana dengan free css
  • cara membuat web statis html dan css
  • cara membuat web script sekolah
  • buat html penjualan web html
  • contoh scrip web kuliner
  • download website sederhana
  • desain penjualan dengan css beserta scrip
  • contoh website pendidikan menggunakan kode html
  • contoh website pariwisata
  • contoh web wisata pada html dan css
  • contoh web statis tutorial hijab
  • contoh web sekolah web css keren
  • contoh web sederhana menggunakan css
  • contoh web sederhana
  • desain tampilan program penjualan web
  • desain web beserta ccript html nya lengkap css juga
  • desain web dan script nya
  • download web statis lengkap
  • download web sekolah html css
  • download web sederhana html
  • download tampilan web sederhana penjualan
  • download source web statis sederhana
  • download script web sekolahan menggunakan css
  • desain web scrip nya
  • desain web penjualan handpone dengan html
  • contoh web pariwisata beserta hasilnya
  • contoh web menarik beserta kode css dan html
  • contoh script website sekolah sederhana dg css
  • contoh script website ecommerce kuliner
  • contoh script menu makanan web
  • contoh script menggunakan php dengan judul pariwisata
  • contoh script membuat desain style css dan htnl beserta hasilnya
  • contoh script html keren untuk web sekolahan
  • contoh script html desain web dinamis
  • contoh script halaman web sederhana
  • 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 web kuliner memggunakan html
  • contoh web iklan script html
  • contoh web html penjualan dengan css
  • contoh web css dan html beserta skripnya
  • contoh tampilan web dan codingnya
  • contoh tampilan web dan coding
  • contoh tampilan koding
  • contoh tampilan design web sederhana
  • contoh script CSS yg bagus dan menarik
  • 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 5 + 11 ?
    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