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 web dengan css
  • cara membuat tampilan website
  • cara membuat website dengan css
  • membuat website dengan html dan css
  • cara membuat tampilan web dengan css
  • web html sederhana
  • membuat tampilan html
  • tampilan HTML
  • tampilan web sederhana
  • membuat tampilan web dengan css
  • contoh desain web sederhana
  • script web sederhana
  • cara membuat css pada html
  • cara membuat css sederhana
  • web sederhana dengan html
  • membuat halaman web dengan css
  • membuat web sederhana dengan html
  • membuat tampilan web dengan php
  • membuat tampilan dengan css
  • membuat css sederhana
  • yhs-fullyhosted_003
  • Cara membuat tampilan admin yang simple tapi bagus dengan css dan php
  • contoh web sederhana tapi menarik dengan html
  • contoh desain web penjualan
  • scrip web simple bagus
  • sintak css sederhana
  • contoh tampilan utama web
  • script website sederhana
  • script blog sederhana bagus
  • contoh koding untuk peogram web css
  • sintak html untuk web penjualan
  • contoh website sekolah dengan html
  • contoh dan cara desain web sekolah
  • web design pariwisata dengan css
  • codingan web menarik
  • contoh coding web css sederhana
  • macam kodingan website
  • membuat desain website dengan css sederhana
  • desain halaman web yang sederhana tapi bagus
  • membuat desain header syntax css dreamweaver
  • Scrip web html yang bagus dan menarik
  • scrip web html yang bagus 25 halaman
  • scrip tampilan web keren php
  • Menu dan tampilan sederhana website profil sekolah
  • contoh tampilan html beserta kode
  • membuat kode program tampilan html untuk membuat tampilan web
  • Membuat tamfilan menarik dengan css beserta coding
  • membuat tampilan aplikasi sederhana php
  • yhsm-inucbr_001
  • Membuat sintax contact tentang penjualan online dengan html
  • membuat web penjualan dengan html dan css
  • membuat tampilan website serta codennya
  • membuat tampilan web sederhana dengan php
  • rumus tampilan web iklan
  • script cara membuat tampilan web sederhana
  • skrip diweb sederhana
  • skrip html cara penjualan di website
  • skrip html untuk desain
  • syntax html membuat tampilan web
  • tampilan css penjualan mobil
  • tampilan sederhana webside tipe css
  • tampilan untuk html
  • tampilan web html yang sederhana
  • tampilan web keren beserta scriptnya
  • tampilan web site sederhana html
  • tampilan website simple tapi menarik
  • top simple web pariwisata
  • web contoh script from html beserta tampilannya
  • web penjualan tereren
  • skrip desain web css sederhana
  • sintax untuk memperindah halaman web
  • Script Cara membuat tampilan website dengan css
  • script css sederhana
  • script desain html sederhana
  • Script desain web keren
  • Script html membuat tampilan
  • script html membuat web sekolah
  • script html untuk sekolah
  • script tampilan home yang bagus
  • script template website sederhana php
  • script web hosting simple tampilan
  • Script web html yang bagus
  • Sintak membuat website penjualan dengan html
  • sintaks website facebook sederhana
  • sintax html web untuk mempercabtik tampilan web
  • website keren tentang html beserta coding
  • bikin web html sederhana
  • contoh coding sederhana untuk pembuatan web dengan html dan css
  • contoh coding web css
  • contoh coding website untuk media online
  • contoh codingan html
  • CONTOH CSS TENTANG PENJUALAN
  • Contoh desain web dasar dan scrib
  • contoh desain web html sederhana
  • contoh desain web sekolah beserta html
  • contoh desain website dan kode htmlnya
  • contoh design css dan scriptnya
  • contoh dsain web dengan html yang keren
  • contoh footer website penjualan
  • contoh halaman web menarik dan script
  • contoh homepage dengan html tentang sekolah
  • contoh coding pembuatan halaman web dan tampilannya
  • contoh code html penjualan mobil
  • contoh buat web dengan html
  • cara css web sekolah html
  • cara desain web statis keren
  • cara membuat script html tampilan web keren
  • Cara membuat sedrhana beserta kodenya
  • cara membuat tampilan web sederhana dengan css
  • cara membuat web penjualan menggunakan css
  • cara membuat website keren tentang html beserta coding
  • cara membuat website pariwisata menggunakan html
  • cara tampilan web sekolah menggunakan HTML
  • code simple buat css tampilan
  • coding bagus html css dteamwfer
  • coding html dalam membuat tampilan web dengan tema pendidikan
  • coding untuk membuat web sekolah
  • codingan menarik di html
  • contoh html web sekolah dan rumus htmlnya
  • contoh kodingan header css
  • contoh program html blog sederhana
  • contoh website coding
  • contoh website penjualan beserta kode program
  • contoh website sekolah beserta codingnya
  • contoh website sekolah dengan kode html
  • Download contoh pemrograman sederhana html
  • Download gratis script desain web sederhana
  • download script html sederhana
  • download script website simple keren
  • halaman penjualan sederhana dengan php
  • kode desain web sederhana
  • kode template web sederhana
  • kodingan php manual tampilan halaman utama web
  • kodingan web sederhana css
  • macam-macam tampilan desain web dengan dreaweaver menarik
  • contoh web simple pariwisata
  • contoh web html tema pariwisata
  • contoh web html penjualan
  • contoh progran php parawisata
  • contoh scrip bikin web
  • contoh script web html penjualan
  • contoh script website sekolah dengan dreamweaver
  • contoh Script website yang bagus
  • Contoh sintaks web php html css
  • contoh skrip html sederhana
  • Contoh tampilan Css
  • contoh tampilan halaman utama website
  • contoh tampilan halaman web desi/
  • contoh tampilan pemrograman web
  • contoh tampilan web dan scriptnya
  • contoh tampilan web html untuk penjualan
  • contoh web html desain sederhana
  • makalah web programming php beserta koding
  • 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 + 14 ?
    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