TUTORIAL WEB

TUTORIAL WEB
RPL
Disusun oleh:
M. Ilham. Akbar
KATA PENGANTAR

Puji dan syukur penulis panjatkan kehadirat Tuhan
Yang Maha Esa, karena berkat limpahan Rahmat
dan Karunia-Nya sehingga penulis dapat menyusun
makalah ini tepat pada waktunya. Makalah ini
membahas tentang cara pembuatan web
menggunakan Dreamweaver ataupun Notepad.
Penulis mengucapkan terima kasih yang
sebesar-besarnya kepada semua pihak yang telah
membantu dalam penyusunan makalah ini, semoga
bantuannya mendapat balasan yang setimpal dari
Tuhan Yang Maha Esa.
Penulis menyadari bahwa makalah ini masih
jauh dari kesempurnaan baik dari bentuk
penyusunan maupun materinya. Kritik konstruktif
dari pembaca sangat penulis harapkan untuk
penyempurnaan makalah selanjutnya.
Depok, 24 Mei 2013
Penulis
PERISTILAHAN/GLOSSARY
.Web design : Pembuatan/desain halaman-halaman web.

<strong> : Menebalkan Huruf (bold).
<p> : Membuat paragraf baru.
<center> : Agar tulisan berada di tengah.
Link : Untuk mengatur warna link dokumen dengan
warna tertentu.
Vlink : Untuk mengatur warna visited link dokumen
dengan warna tertentu.
Alink : Digunakan untuk mengatur warna active link
dokumen dengan warna tertentu.
Menginstall Adobe
Dream Weaver Cs6

Pertama: Klik setup untuk memulai menginstall:
Lalu klik install:

Klik language untuk menentukan bahasa dan Klik gambar
folder untuk menempatkan lokasi dream Weaver, lalu klik
install:
Mulai menginstall:

BAB. I
PENDAHULUAN dan Membuat Tampilan HOME
A. Struktur Dasar Html
Dalam penggunaannya, sebagian besar kode HTML
harus terletak di antara tag kontainer. Yaitu diawali
dengan <namatag> dan diakhiri dengan
</namatag> (terdapat tanda "/"). Struktur dasar
dokumen HTML berisi elemen-elemen atau tag
sebagai berikut:
<html>
<head>
<title>Judul
Form/Caption</title>
</head>
<body>
ISI WEB
</body>
</html>
Keterangan:
<html> .. </html> Mendefinisikan bahwa teks
yang berada diantara kedua tag
tersebut adalah file HTML.
<head> .. </head> Sebagai informasi page header.
Di dalam tag ini kita bisa meletakkan
tag-tag TITLE, BASE, ISINDEX, LINK,
SCRIPT, STYLE & META.
<title> .. </title> Sebagai titel atau judul
halaman/form. Kalimat yang terletak
di dalam tag ini akan muncul pada
bagian paling atas browser Anda (pada
title bar).

<body> .. </body> Mendefinisikan teks
beserta formatnya yang hendak
ditampilkan sebagai isi halaman web.
Di dalam tag ini bisa diletakkan
berbagai page attribute seperti
bgcolor, background, text, link, vlink,
alink, leftmargin dan topmargin.
Sekarang untuk latihan pertama kita, mari kita buat
dokumen HTML sederhana. Ikuti langkah-langkah
berikut ini:
1. Buka software Dreamweaver. Lalu akan muncul
tampilan sebagai berikut :
Pilih lah yang berelips merah. Pilih HTML :
2. Buka Browser, misalnya Mozilla firefox atau
Google Chrome.
3. Buka program aplikasi teks editor misalnya
dalam latihan ini adalah Dreamweaver.
4. Buatlah terlebih dahulu site : Pilih Site – New
site.

Kemudian akan muncul tampilan seperti berikut :
Masukan Nama- lalu klik Next

Kemudian pilih Yes-PHP MySQL-Next :
Lalu pilih Edit-Next :
Kemudian masukan nama yang tadi anda
inginkan : kemudian Next

Kemudian browse file. Pilih Folder habib.
Kemudian pilih habib-klik open-dan select.

Lalu pilih Yes-Next
Pilih Yes-Dreamweaver-masukan nama-next:

INGAT !
Cara membuat Table : INSERT-TABLE
Kemudian Masukan ROW dan COLUMNS-OK:

Tampilan akan seperti berikut:
Dapat anda atur hingga table menjadi seperti berikut :

INGAT ! CARA MEMASUKAN GAMBAR : INSERT-IMAGE
DAN PASTIKAN ANDA SUDAH MEMPUNYAI FOLDER
YANG BERISI GAMBAR-GAMBAR !

Kemudian jadikan sebagai Banner ! seperti gambar
dibawah ini,

INGAT ! CARA MEMBUAT KOLOM DI DALAM KOLOM !
INSERT-TABLE

Masukan Rows dan Columns !
Akan muncul sebagai berikut :

Tulis didalam kolom tersebut HOME,NEWS,GALERY,Data
Tamu dan tambahkan BG COLOR (dapat anda lihat caranya
di gambar berikutnya).
Tulis juga seperti berikut !

Masukan kembali gambar pada kolom paling kanan !
Seperti cara yang diatas saat memasukan gambar !
kemudian tulis pada kolom Space Iklan .

Lakukan seperti diatas ! pada Space Iklan.
Lakukan kembali pada gambar diatas, tapi pada kolom
Tahukah kamu (paling kiri).

Agar anda dapat melihat hasil anda sementara, Save
terlebih dahulu :
Save dengan nama Home.html:

Akan tampil sebagai berikut :
Pilih :

Inilah hasil sementara anda pada tampilan di Mozilla !
Kembali pada Tampilan Dreamweaver, Masukan Gambar
dan Kalimat pada tengah-tengah kolom yang masih
kosong ! Hingga seperti berikut:

Akhirnya pun Tampilan Home anda selesai !
Untuk mengeceknya, Masuk pada tampilan Mozilla. Klik
F5 atau KLIK KANAN RELOAD.

BAB. 2
Membuat Tampilan NEWS
Langkah pertama, agar selanjutnya menjadi lebih mudah
(lebih sederhana)
Lihatlah proses sebagai berikut :
Pilih File-New .
Kemudian Pilih HTML-Create.

Karena kita ingin lebih sederhana, Blok semua Code yang
ada di Home.html. Lalu Copy dan Paste pada halaman
yang kosong (Untitled-1). Kemudian, klik design. Lalu
hapus saja gambar yang berada di tengah dan yang di
pinggir kanan.
Kemudian, Masukan gambar pada bagian tengah. Cara:
INSERT-IMAGE.

Kemudian akan muncul tampilan seperti berikut : Klik
gambar- lalu OK
Tampilan pada Dreamweaver akan tampak seperti berikut:

Dan Masukan sebuah kata-kata. Misalnya seperti yang
tampak digambar.
Masukan kembali gambar pada kolom yang paling kanan.
Dengan INSERT-IMAGE.

Lalu, akan muncul tampilan ini. Pilih gambar dan klik OK
Dan muncul seperti berikut :
Lakukan lagi seperti yang diatas, masukan gambar dan
tulis kata-kata.

Kemudian masukan gambar kembali. Dan tambah kata-
kata.
Akan tampil seperti berikut!

Masukan gambar kembali pada bagian tengah bawah.
INSERT-IMAGE
Pilih gambar dan Klik gambar yang dipilih.

Maka. Tampilan akan menjadi seperti berikut:
Lalu simpan tampilan ini dengan cara: FILE-SAVE-dengan
nama(NEWS.html).

Lihat hasil kita di Mozilla/Google Chrome: Caranya atau
Klik kanan Reload.

Namun kita ubah background terlebih dahulu:
Dan

Dan Jadilah tampilan NEWS seperti ini :
Jadilah Tampilan NEWS.html

BAB. 3
Membuat Tampilan GALERY
(lebih sederhana)
Pilih File-New .

ada di News.html. Lalu Copy dan Paste pada halaman yang
kosong (Untitled-1). Kemudian, klik design. Lalu hapus saja
gambar yang berada di tengah dan yang di pinggir kanan.
Lalu hapus gambar pada bagian tengah dan bagian
pinggir kanan:

Lalu Masukan gambar pada bagian tengah. INSERT-
IMAGE
Kemudian: Pilih gambar dan Klik OK

Hasilnya menjadi seperti ini.
Lakukan sperti itu (memasukan gambar) sehingga dapat
memuat banyak gambar seperti berikut: INSERT-IMAGE

Dan masukan gambar juga di bagian ini
Dan pilih gambar yang anda inginkan :

Lalu akan muncul seperti berikut:
Masukan juga pada kolom dibawahnya. Hingga seperti ini.

Agar kita bisa melihat hasil kita, Save terlebih dahulu:
dengan nama Galery.html
Kemudian nama Galery.html

Dan Hasilnya akan tampak seperti berikut pada tampilan
Mozilla. Jangan lupa Klik F5 ATAU KLIK KANAN
RELOAD.

Dan jadilah tampilan Galery.html.
BAB. 4
Membuat Tampilan Data Tamu
(lebih sederhana)

Pilih File-New .
ada di galery.html. Lalu Copy dan Paste pada halaman
yang kosong (Untitled-1). Kemudian, klik design. Lalu
hapus saja gambar yang berada di tengah.

Lalu masukan Kode seperti berikut :
<p><strong>Data Tamu</strong></p>
<table width="351" height="147" border="0">
<tr>
<td width="89">Nama</td>
<td width="11">:</td>
<td width="229"><label>
<input type="text" name="nama" id="nama" />
</label></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><input type="text" name="alamat" id="alamat" /></td>
</tr>
<tr>
<td>Komentar</td>
<td>:</td>

Hasilnya :
Dan selanjutnya save terlebih dahulu:

Kemudian jadi seperti berikut:

Dan MEMBUAT DATABASE !!!! PILIH BASISDATA
Dan masukan nama lalu ciptakan :

Setelah itu masukan nama kedua, dan kolom yang ingin
kita buat :
Dan lalu mesinj penyimpanan : my isam

Dan jadilah seperti berikut !!!
Masukan juga koneksi.
<?
mysql_connect ("localhost", "root", "");
mysql_select_db("ilham");

Masukan juga add.php
Jadilah seperti berikut web saya 
<?
include "koneksi.php";
$nama =$_POST['nama'];
$alamat =$_POST['alamat'];
$komentar =$_POST['komentar'];
//cek
if (!empty($nama) || !empty($alamat) || !empty($komentar)) {
// true; insert db
$sql = "INSERT INTO nyoba (nama,alamat,komentar) VALUES
('".$nama."','".$alamat."','".$komentar."')";
$hasil=mysql_query($sql);
if ($hasil==1)
{
echo "<script> alert ('Data Sukses Disimpan');
location='home.html';
</script>";
}else{
echo "<script> alert ('Data Gagal Disimpan');
location='home.html';
</script>";
}
}else {
$msg = "Form ada yang kosong, Mohon dilengkapi";
echo $msg;

TUTORIAL WEB

Recommended

Recommended

More Related Content

What's hot

What's hot (11)

Similar to TUTORIAL WEB

Similar to TUTORIAL WEB (20)

TUTORIAL WEB