Pemrograman Web 1: Modul 5. Membuat Menu Right

Posted on January 19, 2010 by ahmadrizal

Modul 5. Membuat Menu Right
Ahmad Rizal Abidin, M.Kom

Menu right ini merupakan tampilan web di awal atau sering disebut Home, dimana pada menu right ini berisi tentang konten yang sifatnya sebagai pengantar dari web, atau ingin mempromoasikan hal-hal baru dari konten tersebut. Adapun langkah-langkah dalam pembuatan menu right ini adalah :
1. Menggambar background dengan menggunakan flash

Keterangan gambar, gambar tersebut dibuat dengan ukuran 800 x 600 pada flash 8 dan simpan dengan nama back1.png, simpan pada folder yang sama dengan tag html yang anda buat.
2. Menggambar item-item yang akan ditampilkan pada html

Keterangan gambar, dari gambar disamping buatlah gambar sebanyak empat buah dengan nama gambar1, gambar2, gambar3, dan gambar4 sesuai dengan gambar yang ada pada tagg html di bawah ini. bisa menggunakan bmp atau png dan foldernya disusuaikan juga.
3. Membuat tag dengan menggunakan notepad dan simpan dengan nama home.html adapun tagnya adalah :

<html>
<head>
<title>
Web Design </title>
</head>
<body  background ="back1.png" BGCOLOR="#99999">

<br>
<br>
<br>

<table >

<tr>
<td colspan="4" ><center><b> <h1> Item Barang </h1></b> </td>
</tr>
<tr>

<td rowspan = "3"> <a href="menukanan.html"> <img border ="0" src ="gambar1.bmp"> </a> </td>
<td> <a border ="0" href="Software.html"><font color="#003300">  <B> SOFTWARE </font> <font color="#FF3300"> LISING </b></font> </a> </td>
<td rowspan = "3"> <a href="menukanan.html"> <img src ="gambar2.bmp"> </a> </td>
<td> <a> <font color="#00FFFF"> <b> SERVER ANDA </FONT>  <FONT COLOR="#990099"> KUNO </a></font></td>
</tr>


<tr>
<Td align ="justify" > 
Ingin menggunakan software original tapi tidak
mengetahui bagaimana caranya mendapatkan investasi
terbaik ?
</td>
<Td align ="justify"> 
Terjebak dengan kebutuhan fungsi server yang makin
banyak namun bingung memilih fitur aplikasi serveryang 
pas dan sesuai ? Ingin mengetahui solusi terbaik
untuk server bisnis  Anda ?
</td>
</tr>

<tr>

</td>
<td> <a href ="Software.html"> Klik untuk info lanjut </a> </td>
<td> <a href ="Software.html"> Klik untuk info lanjut </a> </td>
</tr>

<tr>
<td>
<br>
</td>
</tr>

<td rowspan = "3"> <a "menukanan.html"> <img border ="0" src ="Images/gambar3.bmp"> </a> </td>
<td> <a href="lanjut1.html"> <B> <FONT COLOR="#990099"> FAX </FONT><FONT COLOR ="#006600"> SERVER </FONT>  <b> </a> </td>
<td rowspan = "3"> <a "menukanan.html"> <img src ="gambar4.bmp"> </a> </td>
<td> <a> <b><FONT COLOR="#990099"> Backup & </font> <FONT COLOR="#006600"> RECOVERY </FONT> </a></td>
</tr>


<tr>
<Td align ="justify" > 
Ingin sering hilang ? Kualitas fas tidak bagus ? Boros ?
Beralihlah ke digital fax, share ke semua network dan
sortir fax yang tidak diperlukan.
</td>
<Td align ="justify"> 
Khawatir dengan keamanan data anda? Merasa kesulitan dalam
melakukan backup data ? Symantec Backup Exec hadir sebagai 
solusi pengamanan data dan system yang akan mudah digunakan dan terjangkau
</td>
</tr>

<tr>

</td>
<td> <a href ="lanjut1.html"> Klik untuk info lanjut </a> </td>
<td> <a href ="lanjut1.html"> Klik untuk info lanjut </a> </td>
</tr>
</table>

</body>
</html>

@Ahmad
Selamat Mencoba…

Materi Yang berhubungan :
Modul 7.
Modul 6.
Modul 5.
Modul 4.
Modul 3.
Modul 2.
Modul 1.

Filed under: Pemrograman Web |

« »

One Response

  1. Putra, on March 14, 2011 at 3:44 am said:

    maaf pak.. kok tidak ditampilakn hasil web na…
    jadikan bs lebh tau bentuik jadinya…
    maaf pak bru belajar..
    mohon bantuan nya….

    Reply

Leave a comment