Membuat Website Sederhana Menggunakan HTML dan CSS (1)

on

Postingan kali ini saya akan memberikan sedikit tutorial bagaimana cara nya kita membuat website sederhana dengan menggunakan fitur dari bahasa HTML dan CSS. Pertama-tama seperti biasa buatlah dokumen baru pada Notepad++ atau bisa juga dengan hanya menggunakan Notepad bawaan Windows tapi menurut saya menggunakan Notepad++ akan terasa lebih nyaman karena bisa langsung di run dan di pratinjau.

Selanjutnya siapkan beberapa gambar yang akan dipakai untuk menghiasi Web kita nanti, di sini saya menggunakan 3 buah gambar untuk header/sampul, nav bar, dan untuk diletakkan di dalam kerangka postingannya. Nah pada bagian ini terserah anda saja mau memilih gambar apa saja. Setelah bahan-bahan nya terkumpul kita simpan di dalam satu folder, jika terpisah maka gambar tersebut tidak bisa ditampilkan.

Berikut nya adalah Copy kan saja Source yang telah saya rancang di bawah ini ke dokumen yang sudah dibuat sebelumnya, lalu kita save dengan ekstensi (dot)php.

<html>
<head>
<style type="text/css">

table{
border-colapse:colapse;
 border:1px solid black;
  }
           
 #menu{
 height:40px;
 width:960px;
 background:url(bg-nav.jpg) repeat-x;
 }
          
#menu table{
 border:none;
 }
           
 #menu a{
 color:yellow;
 text-decoration:blink;
 }
           
 #menu a:hover{
 background-color:white;
 color:black;
 }
           
 #menu td{
 height:40px;
 text-align:center;
 vertical-align:middle;
 color:#fff;
 font: bold 14px Candara, Arial, Tahoma;
 }
           
 #isi{
 padding: 10 10 10 10;
 }
           
 #isi p{
 color:black;
 font: 11px Candara, Arial, Tahoma;
 padding-bottom:5px;
 }
           
 #isi img{
 boder: 1px solid black;
 width: 80px;
 height: 100px;
 }
           
 .table-menu{
 vertical-align: top;
 border-colapse: colapse;
 border: 1px solid black;
 background-color: #0066cc;
 }
           
 .table-menu{
 color:yellow;
 text-align:center;
 }
           
 .header{
 background-color:white;
 }
           
 .footer{
 background-color:red;
 }
           
 </style>
 </head>
   
  <body>
  <table width="70%" align="center">
  <tr>
  <td colspan=2><p align = "center">MINUM SUSU ITU PENTING COY</p><img src="header.jpg"></td>
  </tr>
  <tr>
  <td colspan=2>
  <div id="menu">
  <table width="100%">
  <tr>
  <td align="center"><a href="">Depan</a></td>
  <td align="center"><a href="">Profil</a></td>
  <td align="center"><a href="">Produk</a></td>
  <td align="center"><a href="">Kontak</a></td>
  <td align="center"><a href="">Forum</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="70%">
<div id="isi">
<h1 style="color:red; font:bold 20px Candara, Arial, Tahoma;">Ayo Minum Susu</h1>
<img src="susu.jpg"/>
<p>Susu adalah sebuah cairan bergizi yang dihasilkan oleh kelenjar susu dari mamalia betina.
Susu adalah sumber gizi utama bagi bayi sebelum mereka dapat mencerna makanan padat.
Susu binatang (biasanya sapi) juga diolah menjadi berbagai produk seperti mentega, yoghurt, es krim, keju, susu kental manis, susu bubuk dan lain-lainnya untuk konsumsi manusia.
Semua orang di dunia ini membutuhkan susu untuk menopang kehidupannya. Baik dari bayi sampai orang yang sudah lanjut usia.</p>


klik link dibawah  ini untuk melihat postingan selanjutnya 

https://gox-trix.blogspot.com/2019/01/membuat-website-sederhana-menggunakan_38.html


Comments

Post a Comment