Kurniawan Blogs

Just share about knowladge

  • Full Screen
  • Wide Screen
  • Narrow Screen
  • Increase font size
  • Default font size
  • Decrease font size

Belajar Web HTML dan CSS

Sunday, 02 October 2011 14:40 Kurniawan
 E-mail | Print | PDF 

Tidak usah babibu, langung saja...
Ketiklah di Dreamweaver atau di Notepad scripts berikut :

<HTML><HEAD><title>belajar web</title>
<style>
#kotak{
    width:300 px;
    height: 80 px;
    background-color: #36F;
    padding:5 px;
    margin-top:10 px;
    border: 1 px #999999 solid;
    left: 300px;
    right: 300px;
    position: inherit;
}
#kotak-1{
    width:300 px;
    height: 80 px;
    background-color:#008000;
    padding:5 px;
    margin-top:10 px;
    border: 1 px #999999 solid;
    position: inherit;
    left: 300px;
    right: 300px;
}
.kelas-1{
    font-family:Arial, Helvetica, sans-serif;
    color:#ff0000;
    font-size:12px;
    text-align:left;
    text-decoration:underline;
    text-decoration:blink;
    line-height:3 px;
}
.kelas-2{
    font-family:"Times New Roman", times, serif;
    color:#0000ff;
    font-size:14px;
    text-align:right;
    text-decoration:none;
    font-weight:bold;
    line-height:3 px;
}
.kelas-3{
    font-family: verdana, helvetica, sans-serif;
    color:#0000;
    font-size:13px;
    text-align:center;
    text-decoration:none;
    line-height:3 px;
}
</style>
</HEAD>
<body>
---------Contoh 1
---------Contoh 2
---------contoh 3
---------contoh 4 
</body>
</HTML>
  Selanjutnya ketik cripts HTML di bawah ini di antara bagian tag <body></body> : 
--------contoh 1
<div id="kotak">
<p class="kelas-1">Tulisan ini terletak di dalam ID Kotak</p>
<p class="kelas-1">dengan lebar kotak 300 px dan tinggi 80 px</p>
<p class="kelas-1">warna background biru dan</p>
<p class="kelas-1">menggunakan attribut class-1</p>
</div>
---------Contoh 2
 <div id="kotak-1">
<p class="kelas-2">Tulisan ini terletak di dalam ID kotak-1</p>
<p class="kelas-2">Dengan lebar kotak 300 px dan tinggi 80 px</p>
<p class="kelas-2">warna background hijau dan </p>
<p class="kelas-2">menggunakan attribut class-2</p>
</div>
---------Contoh 3
 <div id="kotak">
<p class="kelas-3">Tulisan ini terletak di dalam ID kotak</p>
<p class="kelas-3">Dengan lebar kotak 300 px dan tinggi 80 px</p>
<p class="kelas-3">warna background biru dan </p>
<p class="kelas-3">menggunakan attribut class-3</p>
</div>
---------Contoh 4

<div id="kotak-1">
<p class="kelas-3">Tulisan ini terletak di dalam ID kotak-1</p>
<p class="kelas-3">Dengan lebar kotak 300 px dan tinggi 80 px</p>
<p class="kelas-3">warna background hijau dan </p>
<p class="kelas-3">menggunakan attribut class-3</p>
</div>

Terimakasih kepada

sumber belajar :
http://www.linksukses.com/2010/01/penggunaan-id-dan-class.html

Add comment

Security code
Refresh

Latest Comment

RSS
You are here: Desin Web Mulok Belajar Web HTML dan CSS