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 website dengan css
  • cara membuat tampilan website
  • membuat website dengan html dan css
  • web html sederhana
  • cara membuat tampilan web dengan css
  • membuat tampilan html
  • tampilan HTML
  • membuat tampilan web dengan css
  • contoh desain web sederhana
  • tampilan web sederhana
  • cara membuat css sederhana
  • cara membuat css pada html
  • web sederhana dengan html
  • script web sederhana
  • membuat web sederhana dengan html
  • membuat halaman web dengan css
  • membuat tampilan dengan css
  • membuat css sederhana
  • membuat tampilan web dengan php
  • yhs-fullyhosted_003
  • contoh website html sekolah codenya
  • contoh desain web penjualan
  • contoh desain web statis memakai html
  • contoh tampilan web beserta script html
  • contoh design pemrograman web menggunakan php code
  • contoh tampilan menu html yang bagus
  • contoh tampilan html beserta codingnya
  • contoh script html web yang menarik
  • contoh script website sekolah menggunakan dreamwiver
  • cara membuat html beserta scripnya
  • contoh koding untuk peogram web css
  • contoh tampilan web paling bagus di web html
  • macam kodingan website
  • contoh web dan skripnya
  • contoh coding html membuat website
  • desain halaman web yang sederhana tapi bagus
  • contob script pembuatan web yang menarik
  • coding beserta tampilannya
  • kode html untuk membuat tampilan web
  • kode template web sederhana
  • makalah desain websit sekolah dengan html
  • makalah web programming tentang penjualan
  • kode tampilan web sederhana
  • membuat web bagus beserta codingnya
  • membuat web penjualan dengan html dan css
  • Kode Script html Website keren
  • koding tampilan web
  • koding untuk html membuat desain web dengan menarik sekali
  • membuat tampilan html dengan oop
  • makalah web programming php beserta koding
  • membuat tampilan aplikasi sederhana php
  • makalah tetntang css dan scripnya
  • tutorial membuat tampilan home website sekolah dengan php
  • macam macam script html dan css
  • kodingan web sekolah memakai css
  • kodingan php membuat desain website
  • membuat tampilan html beserta coding menarik
  • membuat website menarik beserta kodenya
  • membuat website penjualan html php css
  • sintaks website facebook sederhana
  • skrip diweb sederhana
  • skrip html cara penjualan di website
  • syintax pembuaan web penjualan
  • syntax html membuat tampilan web
  • tampilan home web sederhana menggunakan html
  • tampilan web beserta script
  • tampilan web dan scriptnya
  • tampilan web html resmi beserta scriptnya
  • tampilan web html yang sederhana
  • tampilan website simple tapi menarik
  • tampilan website skripnya
  • tampilanweb html
  • totorial buat desain web penjualalan
  • web sederhana bagus html
  • website beserta scripnya
  • website sederhana penjualan online html dan css
  • script website sederhana
  • script web statis tema sekolah menggunakan html
  • script web hosting simple tampilan
  • membut pogram web tampilan penjualan
  • Menu dan tampilan sederhana website profil sekolah
  • pemrograman html penjualan
  • pemrograman Web membuat tampilan html sederhana
  • penjualan online web html dengan kodingan
  • Program sederhana div html
  • scrib koding web sederhana
  • scrib pembuatan website yang bagus
  • scrip html membuat halaman web sekolah
  • scrip html program sekolah
  • Scrip membuat desain
  • Scrip membuat tampilan desain pada halaman web
  • Script dan contoh tampilan web
  • script desain html sederhana
  • script html contoh desain web
  • script tampilan html
  • script template website sederhana php
  • yhs-mystartdefault
  • bikin web html sederhana
  • contoh code html pada pemograman web untuk mempercantik tampilan
  • contoh coding web html
  • contoh coding web programming seperti tampilan facebook
  • contoh codingan simple
  • CONTOH CSS TENTANG PENJUALAN
  • Contoh desain web dasar dan scrib
  • contoh desain web penjualan belajar php css
  • contoh desain web php
  • contoh desain web simpel dan menarik beserta htmlnya
  • contoh desain web statis html dan codingnya
  • contoh design css dan scriptnya
  • Contoh halaman web beserta coding
  • contoh halaman web dengan program html dengan tampilan
  • Contoh kode pembuatan website dengan html yang bagus
  • contoh koding html desain bagus
  • contoh koding membuat tampilan menu dengan css
  • codingan php untuk membuat web pariwisata
  • coding website html yang keren
  • coding tampilan css
  • buat tampilan cloud computing dengan memakai div
  • buat tampilan web dengan php
  • cara css wordpress membuat tampilan bagus
  • cara desain web statis keren
  • cara membuat scrip tampilan
  • cara membuat tampilan web dengan html
  • cara membuat tampilan web statis
  • cara membuat tampilan-tampilan program memakai HTML
  • Cara membuat web iklan php css
  • Cara membuat web pariwisata dengan code css dan php
  • cara membuat web penjualan menggunakan css
  • cara membuat website pariwisata menggunakan html
  • cara membuat website yang bagus beserta scriptnya
  • cara membuat website yang keren beserta codingnya
  • cntoh desain web sederhana dan simple HTML
  • code simple buat css tampilan
  • contoh makalah web sederhana php
  • contoh membuat desain web html yang menarik
  • contoh membuat tampilan html beserta coding menarik
  • contoh tampilan web dengan kodenya
  • contoh tampilan web html resmi beserta scriptnya
  • contoh tampilan web keren dan coding
  • contoh tampilan web yang cantik dengan html
  • contoh template website sekolah beserta script
  • Contoh web design dinamis sederhana
  • contoh web sederhana php css
  • contoh web sekolah dg program html
  • contoh website html yg sederhana tentang pendidikan
  • contoh website penjualan beserta syntax menggunakan dreamweaver 8
  • contoh website penjualan menggunakan html dan css
  • contoh website sekolah beserta codingnya
  • contoh website serta koding
  • desain halaman web beserta kodenya
  • halaman penjualan sederhana dengan php
  • kode html dan tampilannya
  • contoh tampilan web dan html
  • contoh tampilan html dan coding nya
  • Contoh tampilan halaman web beserta scriptnya
  • Contoh membuat web dengan css beserta coding
  • contoh prog html bagus
  • contoh program html blog sederhana
  • contoh program html untuk penjualan online
  • contoh program php dan tampilan nya
  • contoh program untuk membuat tampilan website
  • Contoh program wab yang bagus
  • contoh progran php parawisata
  • contoh project sederhana html beserta scriptnya
  • contoh scrib pembuatan website
  • contoh scrip template web sekolah
  • contoh script desain web sederhana
  • contoh script tampilan desain web halaman utama
  • contoh script tampilan website sederhana
  • contoh script web kampus html
  • contoh skrip css yang bagus
  • kode html untuk membuat tampilan
  • 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 9 + 5 ?
    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