Ilmu Teknik Informatika : Membuat Halaman Web Berbasis CSS

Berikut Ini saya Akan Membuat Halaman Web Berbasis CSS

sebelumnya anda harus mengetahui terlebih dahulu perbedaan PHP,HTML,DAN CSS anda bisa baca selengkapnya mengetahui HTML dan CSS dasar KLIK DISINI

CODE HTMLNYA
SAVE BERI NAMA : Halaman Web edo CSS.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(EDO FEBRIAN PRATAMA PUTRA)http://teknikinformatika4.blogspot.coml -->
<html xmlns="http://www.w3.org/1999/xhtml" data-find="_4"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>WEB EDO Berbasis CSS</title>
<style type="text/css">
body{
 background-image:url(Halaman%20Web%20edo%20CSS_files/MYPCT.gif);
 background-repeat:no-repeat;
 background-color:#00FFFF;
 font-family:"Kristen ITC";
 font-size:18px;
 color:#FF0000;
 padding:100 px;
 }
#bungkus{
 border:1px dotted #0099FF; background-color:#FFFFFF; background-repeat:no-repeat; background-position:top right;
 margin-left:250px;
 }
#judul{
font-size:42px; color:#33FF00; font-weight:bold;
 text-align:center;
}
#subjudul{
 font-family:Geneva; font-size:24px; color:#FF6600; font-weight:bold;
}
#menu{
 margin-left:15px;
}
#menu a:hover{
 background-color:#00FFFF; font-weight:normal;
 padding:15px;
 }
a:link{
 color:#FF9900; text-decoration:blink;
 }
a:hover{
 font-weight:bold;
 color: #00FF00;
 }
a:visited{
 color:#FF6600;
 }
a:active{
 color:#FF6600;
 }
.gambar1{
 width:300px; height:300px; float:left;
 padding:5px;
 }
.gambar2{
 width:150px; height:200px; float:right;
 padding:5px;
 }
ul{
 list-style:none;
 }
li{
 background-image:url(panah.png); background-repeat:no-repeat; padding:4px 0px 0px 25px;;
 }
#konten{
 margin:10px;
 padding: 10px;
}
.teks{
 text-align:justify;
}
#footer{
 margin:10px 0px 0px 250px; border:1px dotted #0099FF;
 padding:5px; text-align:center; color:#0099FF; background-color:#FFFFFF;
}
#Garis{
padding: 5px;
Border-top: 3px solid  #C0C0C0 ;
Border-bottom: 3px solid  #C0C0C0 ;
Border-left: 3px solid  #C0C0C0 ;
Border-right: 3px solid  #C0C0C0 ;
Margin-bottom: 10px; 
}
.style1 {color: #FF0000}
.style3 {color: #00FF00}
.style7 {font-size: x-large}
.style8 {font-size: 16}
.style10 {font-size: xx-large; }
.style12 {font-size: 14px}
.style13 {color: #0000FF}
.style16 {text-align: justify; color: #0000FF; }
</style>
</head>
<body data-find="_3">
<div id="bungkus" data-find="_2">
  <div id="judul">
   <p class="style13"><img src="Halaman Web edo CSS_files/foter gambar.jpg" width="800" height="232" longdesc="Halaman Web edo CSS.html" /></p>
    <p><span class="style12"><span class="style1">
      <marquee align="center" direction="left" width="100%" scrollamount="2" class="style7"><strong>WELCOME To Web Site Edo Febrian Pratama Putra</strong>
      </marquee>
      
    </span></span></p>
  </div>
 <div class="style7" id="menu"><span class="style13">Copyright Edo Febrian Pratama Putra@ 2014</span> | <a href="file:///F|/HALAMAN WEB BERBASIS CSS EDO FEBRIAN PRATAMA PUTRA/Halaman Web edo CSS.html" class="style1">HOME</a>|<a href="Profil.html"> Profil</a>| <a href="Contact Us.html"><em>Contact Us</em></a>|</div>
 <div id="konten" data-find="_1">
     <table width="200" border="1" class="gambar1">
          <tr>
            <td><img src="Halaman Web edo CSS_files/fotosaya (2).jpg" width="640" height="480" class="gambar1" longdesc="Halaman Web edo CSS.html" /></td>
          </tr>
        </table>
     <p align="center" class="teks">&nbsp;</p>
     <p align="center" class="teks"><span class="style1">Nama Saya <span class="style13">EDO FEBRIAN PRATAMA PUTRA</span> Biasa Dipangil dengan Nama EDO, saya mahasiswa dari <span class="style13">AKN POLTEK BOJONEGORO,   </span> Jurusan saya adalah TEKNIK INFORMATIKA, Hobby Saya ada dua yang pertama adalah mendengarkan music, music yang paling saya suka adalah <span class="style13">RADJA BAND</span> saya fans banget dengan band radja sejak SD sampai sekarang , dan hoby ke dua saya Adalah <span class="style13">Ngeblog</span> Saya belajar blog sejak masih sekolah di SMK BIMA Bojonegoro kelas 1, Saya Mempunyai 5 alamat bloger yang masih dalam proses. saya sekarang telah banyak belajar membuat desain web diantaranya dengan belajar membuat halaman web sederhana html dan php dan sekarang halaman web berbasis CSS yang saya gunakan di web saya ini, </span>Salam Para webmaster <span class="style1">indonesia </span>!!!!!!! Mari Tetap Semangat Menjalani Hidup ini !!!!!! </p>
     <p align="center" class="style16">&nbsp;</p>
     <div id="subjudul">
       <div align="center" class="style10"><span class="style13"><strong>
         <marquee behavior="alternate">
            <strong>Biografi Tentang Saya </strong>
            </marquee>
       </strong></span><strong></strong></div>
      </div>
      <ol>
        <li class="style8 style1"><img src="Halaman Web edo CSS_files/Fotosaya1.jpeg" width="256" height="256" class="gambar2" longdesc="Halaman Web edo CSS.html" />Saya orang yang penuh daya upaya,   tidak takut mengambil resiko dan peluang. Saya penuh semangat, lebih   baik mencoba walau gagal dari pada tidak melakukan apa-apa. </li>
        <li class="style8 style1">Saya menerima segala kekurangan saya, Saya memperbaiki apa yang bisasaya perbaiki dan menerima apa yang ada diluar kontrol saya.</li>
        <li class="style8 style1"> Saya menerima diri saya apa adanya Manusia   adalah makhluk ciptaan Tuhan paling sempurna yang tetap tidak terlepas   dari kesalahan.</li>
        <li class="style8 style1">Manusia yang berjaya akan memperolehi keuntungan daripada kesilapannya, dan mencoba lagi dengan cara yang lain</li>
        <li class="style8 style1">Kegagalan bermakna bahawa anda belum berjaya lagi.</li>
        <li class="style8 style1">Ingatlah bahawa anda boleh gagal dalam apa saja dalam hidup asalkan tidak menjadi seorang yang gagal.</li>
        <li class="style8 style1">Kegagalan bukan bermakna anda tidak mencapai apa-apa.Ia bermakna anda telah mempelajari sesuatu.<br />
        </li>
     </ol>
     <ul class="style1">
       <li class="style3"></li>
     </ul>
     <p class="style1"></p>
  </div>
</div>
<div id="footer">Copyright Edo Febrian Pratama Putra@ 2014 |  <a href="https://www.facebook.com/eddo.ednis" class="style1">join facebook saya </a>|  <a href="https://twitter.com/IanKasEddo">join twitter saya </a>|   <a href="http://teknikinformatika4.blogspot.com/">join blog saya</a> </div>


</body></html>

Printscreen :

GAMBAR HALAMAN PERTAMA BERBASIS CSS | KLIK GAMBAR UNTUK MEMPERBESAR

CODE HTMLNYA untuk Laman Profil

SAVE BERI NAMA : Profil.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(EDO FEBRIAN PRATAMA PUTRA)http://teknikinformatika4.blogspot.coml -->
<html xmlns="http://www.w3.org/1999/xhtml" data-find="_4"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>WEB EDO Berbasis CSS</title>
<style type="text/css">
body{
 background-image:url(Halaman%20Web%20edo%20CSS_files/MYPCT.gif);
 background-repeat:repeat-x;
 background-color:#00FFFF;
 font-family:"Kristen ITC";
 font-size:18px;
 color:#FF0000;
 padding:100 px;
 }
#bungkus{
 border:1px dotted #0099FF; background-color:#FFFFFF; background-repeat:no-repeat; background-position:top right;
 margin-left:250px;
 }
#judul{
font-size:42px; color:#33FF00; font-weight:bold;
 text-align:center;
}
#subjudul{
 font-family:Geneva; font-size:24px; color:#FF6600; font-weight:bold;
}
#menu{
 margin-left:15px;
}
#menu a:hover{
 background-color:#00FFFF; font-weight:normal;
 padding:15px;
 }
a:link{
 color:#FF9900; text-decoration:blink;
 }
a:hover{
 font-weight:bold;
 color: #00FF00;
 }
a:visited{
 color:#FF6600;
 }
a:active{
 color:#FF6600;
 }
.gambar1{
 width:300px; height:300px; float:left;
 padding:5px;
 }
.gambar2{
 width:150px; height:200px; float:right;
 padding:5px;
 }
ul{
 list-style:none;
 }
li{
 background-image:url(panah.png); background-repeat:no-repeat; padding:4px 0px 0px 25px;;
 }
#konten{
 margin:10px;
 padding: 10px;
}
.teks{
 text-align:justify;
}
#footer{
 margin:10px 0px 0px 250px; border:1px dotted #0099FF;
 padding:5px; text-align:center; color:#0099FF; background-color:#FFFFFF;
}
#Garis{
padding: 5px;
Border-top: 3px solid  #C0C0C0 ;
Border-bottom: 3px solid  #C0C0C0 ;
Border-left: 3px solid  #C0C0C0 ;
Border-right: 3px solid  #C0C0C0 ;
Margin-bottom: 10px; 
}
.style1 {color: #FF0000}
.style3 {color: #00FF00}
.style7 {font-size: x-large}
.style10 {font-size: xx-large; }
.style12 {font-size: 14px}
.style13 {color: #0000FF}
</style>
</head>
<body data-find="_3">
<div id="bungkus" data-find="_2">
  <div id="judul">
    <p><span class="style12"><span class="style1"><img src="Halaman Web edo CSS_files/my profil.jpg" width="800" height="243" longdesc="Profil.html" />
      <marquee align="center" direction="left" width="100%" scrollamount="2" class="style7">
      <strong><br /><br />
      Inilah Profil Saya Selamat Membaca !! <span class="teks">Salam Para webmaster indonesia !!!!!!! Mari Tetap Semangat Menjalani Hidup ini !!!!!! </span></strong>
      </marquee>
      
    </span></span></p>
  </div>
 <div id="konten" data-find="_1">
   <p align="center" class="teks"><em><img src="Halaman Web edo CSS_files/foto1.JPG" width="908" height="605" class="gambar1" longdesc="Profil.html" />Assalamualaikum !!!!!!!</em><br />
   Apa kabar pembaca sekalian? Senang rasanya saya dapat berbagi sekilas informasi tentang saya. Layaknya seperti yang lain, saya adalah manusia biasa :) Nama lengkap saya <span class="style13">EDO FEBRIAN PRATAMA PUTRA </span>dan saya lahir dan dibesarkan di kota <span class="style13">BOJONEGORO</span>. Kini saya sedang kuliah di <span class="style13">AKN Politeknik BOJONEGORO</span> jurusan D2 Teknik Komputer . Sebelumnya saya berada di <span class="style13">SMK BIMA BOJONEGORO</span> , <span class="style13">SMPN 7 Bojonegoro</span>, dan <span class="style13">SDN KADIPATEN II BOJONEGORO</span>. Mungkin terpikirkan oleh para pembaca sekalian mengapa saya mempelajari dunia Komputer di kehidupan nyata tetapi dapat membuat blog,web disgn, <br />
        <br />
      Pada dasarnya, <span class="style13">saya suka dunia komputer</span>. Mulai dari komponen komputer (hardware), software, internet, bahkan pemrograman.   Oke, bagaimana dengan dunia komputer? Tentu saja saya tetap berada disitu. Dikala saya jenuh, saya sempatkan untuk mempelajari lebih dalam secara otodidak mengenai hardware, software, pemrograman, dan internet. Akhirnya saya menemukan yang namanya blog. Blogging adalah suatu hobi yang saya sukai sejak SMK. Masih dengan lugunya saya membuat blog tanpa berpikir panjang untuk apa blog tersebut dibuat dan diisi dengan gambar-gambar lucu hasil pencarian di Google. Beberapa tahun kemudian, blog tersebut dihapus karena saya ingin berkomitmen untuk membuat blog baru lagi yang isinya adalah catatan harian, tutorial, dan konten mainstream lainnya yang ada pada blog dengan nama &quot;<span class="style13">RADJAKU FANS CLUB INDONESIA</span> &quot; alamat blog saya pertama kali buat blog : <span class="style13">iankaseddo.blogspot.com</span> dan sekarang saya mengurus blog blog saya mempunyai 5 alamat blog yang masih dalam proses pembenahan . <span class="style1">aya sekarang telah banyak belajar membuat desain web diantaranya dengan belajar membuat halaman web sederhana html dan php dan sekarang halaman web berbasis CSS yang saya gunakan di web saya ini, </span></p>
   <p align="center" class="teks"><br />
     <br />
      </p>
   <div id="subjudul">
       <div align="center" class="style10"><span class="style13"><strong>
         <marquee behavior="alternate">
         Selamat Membaca !! Semoga Bermanfaat bagi anda !! 
         </marquee>
         
       </strong></span><strong></strong></div>
        <br />
     <a href="Halaman Web edo CSS.html">Untuk menuju Halaman pertama Silahkan KLIK Gambar</a> <a href="Halaman Web edo CSS.html"><img src="Halaman Web edo CSS_files/images.jpg" width="176" height="89" border="0" longdesc="Halaman Web edo CSS_files/images.jpg" /></a></div>
      <ul class="style1">
       <li class="style3"></li>
     </ul>
     <p class="style1"></p>
  </div>
</div>
<div id="footer">Copyright Edo Febrian Pratama Putra@ 2014 |  <a href="https://www.facebook.com/eddo.ednis" class="style1">join facebook saya </a>|  <a href="https://twitter.com/IanKasEddo">join twitter saya </a>|   <a href="http://teknikinformatika4.blogspot.com/">join blog saya</a> </div>


</body></html>

Printscreen :

GAMBAR Profil.html|KLIK GAMBAR UNTUK MEMPERBESAR GAMBAR

CODE HTMLNYA untuk Laman Contact us

SAVE BERI NAMA : Contact us.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(EDO FEBRIAN PRATAMA PUTRA)http://teknikinformatika4.blogspot.coml -->
<html xmlns="http://www.w3.org/1999/xhtml" data-find="_4"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>WEB EDO Berbasis CSS</title>
<style type="text/css">
body{
 background-image:url(Halaman%20Web%20edo%20CSS_files/MYPCT.gif);
 background-repeat:repeat-x;
 background-color:#00FFFF;
 font-family:"Kristen ITC";
 font-size:18px;
 color:#FF0000;
 padding:100 px;
 }
#bungkus{
 border:1px dotted #0099FF; background-color:#FFFFFF; background-repeat:no-repeat; background-position:top right;
 margin-left:250px;
 }
#judul{
font-size:42px; color:#33FF00; font-weight:bold;
 text-align:center;
}
#subjudul{
 font-family:Geneva; font-size:24px; color:#FF6600; font-weight:bold;
}
#menu{
 margin-left:15px;
}
#menu a:hover{
 background-color:#00FFFF; font-weight:normal;
 padding:15px;
 }
a:link{
 color:#FF9900; text-decoration:blink;
 }
a:hover{
 font-weight:bold;
 color: #00FF00;
 }
a:visited{
 color:#FF6600;
 }
a:active{
 color:#FF6600;
 }
.gambar1{
 width:300px; height:300px; float:left;
 padding:5px;
 }
.gambar2{
 width:150px; height:200px; float:right;
 padding:5px;
 }
ul{
 list-style:none;
 }
li{
 background-image:url(panah.png); background-repeat:no-repeat; padding:4px 0px 0px 25px;;
 }
#konten{
 margin:10px;
 padding: 10px;
}
.teks{
 text-align:justify;
}
#footer{
 margin:10px 0px 0px 250px; border:1px dotted #0099FF;
 padding:5px; text-align:center; color:#0099FF; background-color:#FFFFFF;
}
#Garis{
padding: 5px;
Border-top: 3px solid  #C0C0C0 ;
Border-bottom: 3px solid  #C0C0C0 ;
Border-left: 3px solid  #C0C0C0 ;
Border-right: 3px solid  #C0C0C0 ;
Margin-bottom: 10px; 
}
.style1 {color: #FF0000}
.style3 {color: #00FF00}
.style7 {font-size: x-large}
.style10 {font-size: xx-large; }
.style12 {font-size: 14px}
.style13 {color: #0000FF}
.style14 {text-align: justify; color: #0000FF; }
</style>
</head>
<body data-find="_3">
<div id="bungkus" data-find="_2">
  <div id="judul">
    <p><span class="style12"><span class="style1"><img src="Halaman Web edo CSS_files/Contact Us.jpg" width="831" height="175" longdesc="Contact Us.html" />
      <marquee align="center" direction="left" width="100%" scrollamount="2" class="style7">
      <strong><br />
      Bila inggin menghubungi saya saran dan kritik bisa anda kirimkan lewat email dan no hape yang sudah tercantum disini !!
      </strong>
      </marquee>
    </span></span></p>
  </div>
 <div id="konten" data-find="_1">
   <p align="left" class="teks"><img src="Halaman Web edo CSS_files/foto2.JPG" width="908" height="605" class="gambar1" longdesc="Contact Us.html" />NAMA : EDO FEBRIAN PRATAMA PUTRA<br />
   NIM : 1321180101</p>
   <p align="left" class="teks">TTL : BOJONEGORO, 22 Februari 1995</p>
   <p align="left" class="teks">Alamat : JL.WR.SUPRATMAN GG.USENG no 34B BOJONEGORO</p>
   <p align="left" class="teks">email yahoo : edoselamanya@ymail.com </p>
   <p align="left" class="teks">email Gmail : iankaseddo@gmail.com</p>
   <p align="left" class="teks">HP : 085641297598 </p>
   <p align="left" class="teks">&nbsp; </p>
   <p align="left" class="teks">Alamat BLOG :</p>
   <p align="left" class="teks"><span class="style13"><a href="http://dukunsoftware22.blogspot.com/" target="_top">http://dukunsoftware22.blogspot.com/ </a></span></p>
   <p align="left" class="style14"><a href="http://komandolipsing.blogspot.com/">http://komandolipsing.blogspot.com/ </a></p>
   <p align="left" class="style14"><a href="http://iankaseddo.blogspot.com/">http://iankaseddo.blogspot.com/</a></p>
   <p align="left" class="style14"><a href="http://eddnis.blogspot.com/">http://eddnis.blogspot.com/</a></p>
   <p align="left" class="style14"><a href="http://teknikinformatika4.blogspot.com/">http://teknikinformatika4.blogspot.com/</a></p>
   <p align="left" class="teks"><br />
     <br />
      </p>
   <div id="subjudul">
       <div align="center" class="style10"><span class="style13"><strong>
         <marquee behavior="alternate">
         Selamat Membaca !! Semoga Bermanfaat bagi anda !! 
         </marquee>
         
       </strong></span><strong></strong></div>
        <br />
     <a href="Halaman Web edo CSS.html">Untuk menuju Halaman pertama Silahkan KLIK Gambar</a> <a href="Halaman Web edo CSS.html"><img src="Halaman Web edo CSS_files/images.jpg" width="176" height="89" /></a></div>
      <ul class="style1">
       <li class="style3"></li>
     </ul>
     <p class="style1"></p>
  </div>
</div>
<div id="footer">Copyright Edo Febrian Pratama Putra@ 2014 |  <a href="https://www.facebook.com/eddo.ednis" class="style1">join facebook saya </a>|  <a href="https://twitter.com/IanKasEddo">join twitter saya </a>|   <a href="http://teknikinformatika4.blogspot.com/">join blog saya</a> </div>


</body></html>

Printscreen :