Pemrograman Web 1: Modul 5. Membuat Menu Right

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.

One Response

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: