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 tampilan website
  • cara membuat web dengan css
  • cara membuat website dengan css
  • yhs-fullyhosted_003
  • contoh script html web design
  • tampilan web sederhana
  • membuat website dengan html dan css
  • membuat tampilan html
  • web html sederhana
  • cara membuat tampilan web dengan css
  • contoh desain web sederhana
  • tampilan HTML
  • membuat tampilan web dengan css
  • script web sederhana
  • cara membuat css sederhana
  • web sederhana dengan html
  • cara membuat css pada html
  • membuat web sederhana dengan html
  • syntak membuat web desain sederhana dengan php
  • membuat tampilan web dengan php
  • membuat halaman web dengan css
  • membuat css sederhana
  • membuat tampilan dengan css
  • contoh web sederhana dengan html dan css
  • contoh desain web menggunakan html dan css
  • cara membuat web statis dengan html dan css
  • membuat tampilan web menarik dengan css
  • layout web statis css html js
  • web tentang pariwisata beserta skrip
  • web statis sintak dan tampilan outputnya
  • contoh codingan html dan css contact us
  • contoh tampilan web sederhana
  • contoh html dan css pariwisata
  • membuat website kampus menarik dengan HTML dan CSS
  • program css sederhana menggunakan dreamweaver
  • membuat web statis dengan html dan css
  • membuat web sederhana kodingan mudah
  • membuat tampilan web sekolah dengan javascript
  • membuat tampilan web
  • download web sekolah html css
  • download web statis lengkap
  • download website sederhana
  • halaman utama pada web dan sintaknya
  • isi home desain pnjualan
  • kode css tentang penjualan
  • kode html halaman depan google
  • kodingan css judul website
  • kodingan tampilan untuk web
  • kodingan web statis
  • mebuat menu dropdown html
  • membuat css sederhana dreamweaver
  • membuat halaman about us yang bagus website script html
  • membuat halaman web dinamis menggunakan html dan css
  • membuat halaman website home yang menarik dengan kode html
  • membuat tampilan home html
  • download web sekolah dgnhtml dan css
  • program html perusahaan
  • Scrip html dan css web untuk web wisata
  • syntak web kampus
  • tampilan beranda penjualan
  • tampilan layout yang sederhana bergambar
  • tampilan web koding
  • tampilan web menarik beserta codingnya
  • script css untuk tampilan web sekolahan
  • tampilan web terkeren
  • tampilan web wisata dan skripnya
  • tampilan website keren kode html dan css
  • tampilan website penjualan
  • template web sederhana html css dan javascript
  • tuliskan script css dan html untuk membuat untuk membuat website
  • tuliskan script lambng skolah
  • tulislah scrip sederhana pembuatan web yg disertai css
  • tutorial cara membuat penjualan motor di html dan css
  • web desain keren dan scrip nya
  • web pariwisata menggunakan scrip html
  • syntak pembuatan web sekolah
  • skrip css dan html keren
  • sintaks web dinamis css
  • script blog html dan css terlengkap dan terkeren menggunakan adobe dreamweaver
  • script desain web
  • script di php untuk tampilan beranda yang keren
  • script html home pariwisata
  • script html membuat web penjualan
  • script html tentang penjualan
  • script html website sekolah
  • Script membuat home pada html untuk wisata
  • script pariwisata
  • script profil sekolah seperti facebook
  • script tampilan web keren
  • script web html keren
  • script web masakan
  • script web statis dan css
  • script web wisata
  • serbabisa membuat template css
  • sintaks css tampilan website beserta isinya
  • web statis dengan html dan css
  • contoh halaman web pariwisata
  • codingan web dinamis dengan html fan css
  • codingan html untuk beranda
  • codingan html dan css halaman about us
  • coding web menggunakan css dan php bagus
  • coding html lengkap
  • coding css web dinamis
  • coding blog wisata
  • code desain web sederhana dengan html dan css
  • codingan web statis
  • Codingan website pariwisata
  • contih web sekolah beserta scrip hyml
  • contoh format css untuk web beserta hasilnya
  • contoh desain web tempat wisata menggunakan html dan css
  • contoh desain web statis menggunakan div
  • contoh desain web html sederhana
  • contoh desain web dan kode cssnya
  • Contoh desain layout split keren web statis dengan kodenya
  • contoh coding html website pariwisata
  • contoh coding html sederhana
  • cara mudah membuat desain website kuliner
  • cara mempercantik tampilan web html
  • cara membuat html sederhana serta kode isi dan akhir
  • cara membuat harga promo makanan hrml css
  • cara membuat css tentang wisata
  • cara membuat css di web tema wisata
  • cara membuat css dalam penjualan Hp
  • cara membuat blog mengunakan css
  • cara buat design web pariwisata dengan css
  • bikin template di html dan css beserta artinya
  • cara membuat iklan sekolah dengan html
  • cara membuat layout dengan css
  • cara membuat tampilan depan website beserta menu
  • cara membuat website sederhana dengan free css
  • cara membuat web statis html dan css
  • cara membuat web script sekolah
  • cara membuat web penjualan mengunakan css
  • cara membuat tampilan website sederhana
  • cara membuat tampilan web penjualan online sederhana lengkap dengan listingnya
  • cara membuat tampilan web menarik dengan css
  • cara membuat tampilan untuk pengunjung web penjualanan menggunakan php coder
  • background website keren tema edukasi
  • contoh halaman web sederhana html dan css
  • download web sederhana html dan css
  • desain tampilan program penjualan web
  • desain penjualan dengan css beserta scrip
  • contoh website sederhana beserta script pembuatannya
  • contoh website pendidikan menggunakan kode html
  • contoh website dengan tampilan yang menarik dan coding nya
  • contoh web wisata pada html dan css
  • contoh web sekolah dengan css
  • contoh web sederhana menggunakan PHP serta kodingnya
  • desain web dan script nya
  • desain web penjualan handpone dengan html
  • desain web scrip nya
  • download web sederhana html
  • download template web sederhana
  • download tampilan web sekolah php dengan css
  • download source web statis sederhana
  • download script web sekolahan menggunakan css
  • download scriprt html web sederhana
  • download coding template web css untuk sekolahan
  • download coding php web sekolah menggunakan css
  • contoh web sederhana dan script nya
  • contoh web sederhana
  • contoh script halaman web sederhana
  • contoh script coding untuk web
  • contoh listing web sederhana
  • contoh kodingan web
  • contoh kodingan simple statis untuk membuat web
  • contoh koding web pariwisata
  • contoh koding frofil website
  • contoh html dan css dengan tampilan yang menarik
  • contoh script menggunakan php dengan judul pariwisata
  • contoh script web css sederhana
  • contoh script website sekolah sederhana dg css
  • contoh web pariwisata beserta hasilnya
  • contoh web iklan script html
  • contoh web css bersama listingnya
  • contoh tampilan web dan codingnya
  • Contoh tampilan script web
  • contoh tampilan koding
  • contoh sintaks coding css dan htmlnya
  • contoh sintak penjualan membuat web
  • contoh halaman web simple
  • 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