Pemrograman Web 1 : Menjalan Web HTML

Posted on January 19, 2010 by ahmadrizal

Menjalankan WEB HTML
Ahmad Rizal Abidin, M.Kom

Setelah selesai membaca dan mencobakan modul 1 sampai dengan Modul 5, langkah selanjutnya adalah mengedit setiap file html dan memastikan tidak ada kesalahan. Jenis-jenis kesalahan yang akan timbul adalah :
1. kesalahan menuliskan tag
2. kesalahan menentukan folder gambar

Anda bisa melihat kembali masing-masing html pada modul berikut
Modul 2. Membuat Frame
Modul 3. Membuat Top Menu
Modul 4 Membuat Left MEnu
Modul 5. Membuat right menu atau Home

Adapun langkah-langkahnya adalah :
1. Pastikan seluruh file html tersimpan dalam satu folder contohnya d:\Myweb
2. pastikan seluruh gambar dikumpulkan dalam satu folder dengan nama flash yaitu di c:\myweb\flash
3. jalankan file html yang bernama indeks.html dengan cara double klik yang terletak pada folder d:\myweb\indeks.html
dan lihatlah hasilnya seperti gambar berikut :

@Ahmad
Selamat Mencoba…

Filed under: Pemrograman Web | 6 Comments »

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 | 1 Comment »

Pemrograman Web : Modul 4. Membuat Menu Left

Posted on January 19, 2010 by ahmadrizal

Modul 4. Membuat Menu Left
Ahmad Rizal Abidin, M.Kom

Menu Left, merupakan tampilan dari web yang dipergunakan untuk meletakkan control dari isi web, menu ini akan selalu tampil pada saat web di tampilkan. Adapun langkah-langkah membuatnya adalah :
1. Membuat Background dengan menggunakan Macromedia Flash 8, dengan bentuk gambar seperti berikut :
Gambar 1. Background Menu Left

Dari gambar di atas memiliki ukuran atau dimension = 150 widht x 400 px height, menggambarnya menggunakan Rectangle tool, dan rubahlah warna sesuai dengan keiinginan, setiap gambar terletak pada layer yang berbeda-beda. Simpanlah gambar tersebut dengan cara mengekspor dengan nama lefback.png pada folder flash. Dan folder tersebut terletak pada folder web yang akan dibuat.
2. Langkah selanjutnya adalah menyiapkan animasi dengan menggunakan Flash delapan seperti gambar berikut :
Gambar 2. Animasi Menu

Dari gambar di atas memiliki ukuran atau dimension = 120 widht x 50 px height, menggambarnya menggunakan Rectangle tool kotaknya, dan textool untuk tulisan adapun animasinya menggunakan Mask dan rubahlah warna sesuai dengan keiinginan, setiap gambar terletak pada layer yang berbeda-beda. Simpanlah gambar tersebut dengan cara mengekspor dengan nama tommenu.swf pada folder flash. Dan folder tersebut terletak pada folder web yang akan dibuat.a

3. Langkahnya selanjuntya adalah mengetikkan tag pada notepad dan simpan dengan nama leftmenu.html, adapun tagnya adalah seperti berikut :


<html>
<head>
<title>New Page 2</title>
<base target="main">
</head>
<body  background ="flash/lefback.png" BGCOLOR="#99999">
<Table border=1 width="120" height="10">
<tr>
<td>
<center><embed  src="flash/tomMENU.swf" 
	width="120" height="50"></embed>
</tr>
</td>
<tr>
<td>
<br>
<a href="home.htm">
<b><font color=#0000ff size="4">Home</font></b> </a>
</tr>
</td>
<tr>
<td>
<br> 
<a href="home.html">
<b><font color=#0000ff size="4">Shoping</font></b></a>
</tr>
</td>
<tr>
<td>
<br> 
<a href="home.html">
<b><font color=#0000ff size="4">DownLoad</font></b></a>
</tr>
</td>
<tr>
<td>
<br> 
<a href="home.html">
<b><font color=#0000ff size="4">Contact Us</font></b></a>
</tr>
</td>
<tr>
<td>
<br> 
<a href="home.html">
<b><font color=#0000ff size="5">Ebout Us</font></b></a>
</tr>
</td>
</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 | 2 Comments »