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