Post on 18-Nov-2014
description
TUTORIAL WEB
RPL
KATA PENGANTARKATA PENGANTAR
Modul dengan judul “Web Design & Web ProgramingWeb Design & Web Programing“ merupakan bahan acuan yang digunakan sebagai panduan dalam proses belajar Teman untuk membentuk salah satu bagian dari kompetensi bidang keahlian Teknologi Informasi dan Komunikasi.
Modulinimencakuppenguasaankonsepfile-filegrafik, memahamidasar-dasarpemrogramanWeb, memahamiperintah-perintahpemrogramanWeb, danbagaimanamembangunsebuahaplikasipemrogramanberbasisWeb.
Penyusun
Nizar Zulmi Ramadhan
Menginstal Adobe Dream Weaver Cs6
PertamaKlik setup untukmemulaimenginstal:
Laluklik install:
LaluKlik Accept:
Klik language untukmenentukanbahasadanKlikgambar folder untukmenempatkanlokasi dream Weaver, laluklik install:
Mulaimenginstall:
Menginstallselesai:
Langkah Pembuatan SiteTulisnama web yang ingindibuat, LaluKlikgambar folder untukMenempatkan web yang ingindisimpan:
Apabila folder sudahdibuatlalusimpan web di folder yang dibuat:
Apabilasudahdimpan, lanjutklik server-kliktanda plus +:
Hasilya,laluisidansimpan:
LaluCheklist testing-simpan:
MulaiMembuat WebHal pertama yang sayalakukandalammembuat web adalahmembuatpokokdari web yang
sayainginbuatadalahtable.Berikutlangkah-langkahnya :
Pertamaklikinsert :
Lalu klik Table
Lalu tentukan baris/rows dan colomnya:
Apabila sudah menentukan baris/rows dan colomnya lalu klik ok.
Hasilnya:
Apabila ada baris/rows yang ingin dihilangkan, blok baris yang ingin dihilangkan:
Lalu klik rows, Hasilnya:
Apabila ada colom yang ingin dihilangkan, blok colom yang ingin dihilangkan:
Lalu klik cell, Hasilnya:
Apabila table ingin diisi colom, caranya klik table yang ingin diisi colom laluklik insert-klik Table-tentukan berapa colom yang di isi.
Pertamaklikinsert :
Lalu klik Table
Lalu tentukan baris/rows dan colomnya:
Hasilnya:
Apabila ingin meratakan tulisan, blok table yang ada tulisannya dan yang ingin diratakan:
Lalu Horznya diganti dengan Center:
Hasilnya:
Mendesain WebApabila ingin memasukan gambar untuk background, caranya klik Page properties
Lalu klik browser, untuk mencari gambar yang ingin di jadikan background
Cara Membuat CSSKode:
/*Design by Free CSS Templateshttp://www.freecsstemplates.orgReleased for free under a Creative Commons Attribution 2.5 License*/
body {margin: 0;padding: 0;background: #0f3041 url(gambar/img.jpg) repeat-x;font-size: 13px;/* [disabled]color: #FFFFFF; */
}
body, th, td, input, textarea, select, option {font-family: Arial, Helvetica, sans-serif;
}
h1, h2, h3 {text-transform: lowercase;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-weight: normal;color: #fff04f;
}
h1 {letter-spacing: -2px;font-size: 3em;
}
h2 {letter-spacing: -1px;font-size: 2em;
}
h3 {font-size: 1em;
}
p, ul, ol {line-height: 200%;
}
blockquote {padding-left: 1em;
}
blockquote p, blockquote ul, blockquote ol {
line-height: normal;font-style: italic;
}
a {color: #FFEA6F;
}
a:hover {text-decoration: none;
}
img { border: none; }
/* Header */
#header {width: 830px;height: 280px;margin: 0 auto;background: url(gambar/img11.jpg) no-repeat;
}
/* Logo */
#logo {height: 170px;background: url(/.gif) no-repeat left 65%;
}
#logo h1 {float: left;padding: 40px 40px 0 50px;letter-spacing: -2px;font-size: 48px;
}
#logo h2 {float: right;padding: 68px 0 0 0;font-size: 24px;
}
#logo a {text-decoration: none;color: #372412;
}
/* Gallery */
#gallery {clear: both;width: 830px;height: 300px;margin: 0 auto;
}
#top-photo h2 {height: 1.4em;font-size: 1em;
}
#top-photo p {margin: 0;padding: 0 0 10px 0;
}
/* Menu */
#menu {width: 830px;height: 70px;background: url(gambar/Untitled-4.jpg) no-repeat;
}
#menu ul {margin: 0;padding: 0;list-style: none;
}
#menu li {
display: inline;}
#menu a {display: block;float: left;width: 166px;height: 73px;padding-top: 35px;text-transform: lowercase;text-decoration: none;text-align: center;letter-spacing: -1px;font-size: 24px;color: #FFFFFF;
}
#menu a:hover {background: url(gambar/graphic1.gif) no-repeat;color: #FFFFFF;
}
#menu .active a {background: url(gambar/graphic1.gif) no-repeat;color: #372412;
}
/* Page */
#page {width: 830px;margin: 0 auto;padding: 20px 0;
}
/* Content */
#content {float: left;width: 532px;
}
.post {padding: 0 0 20px 0;
}
.title {margin: 0;border-bottom: 2px solid #4A3903;
}
.byline {margin: 0;
}
.meta {border-top: 1px solid #4A3903;text-align: right;color: #646464;
}
.meta a {padding-left: 15px;background: url(images/img06.gif) no-repeat left center;font-weight: bold;
}
/* Sidebar */
#sidebar {float: right;width: 240px;
}
#sidebar ul {margin: 0;padding: 0;list-style: none;
}
#sidebar li {}
#sidebar li ul {
padding: 15px 0;}img#sidebar li li {
padding-left: 30px;border-bottom: 1px dotted #4A3903;background: url(images/img06.gif) no-repeat 15px 50%;
}
#sidebar h2 {margin: 0;padding: 20px 0 2px 30px;background: url(gambar/tes.jpg) no-repeat left bottom;border-bottom: 2px solid #4A3903;
}
#sidebar a {text-decoration: none;
}
#sidebar a:hover {text-decoration: underline;
}
/* Footer */
#footer {clear: both;padding: 20px 0;background: #FFEA6F;border-top: 3px solid #E8AD35;text-align: center;font-size: smaller;color: #E8AD35;
}
#footer a {color: #C28C21;
}
strict.dtd">
--> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Nizar Zulmi Ramadhan X RPL 2</title><meta name="keywords" content="" /><meta name="description" content="" /><link href="default.css" rel="stylesheet" type="text/css" media="screen" /></head><body><!-- start header --><div id="header">
<div id="logo"><h1></h1><h2></h2>
</div><div id="menu">
<ul> <li class="active"><a href="default.html" accesskey="1" title=""><font color="#f0e920" font face="Vineta BT">Home</a></li>
<li><a href="blog.html" accesskey="2" title=""><font color="#f0e920" font face="Vineta BT">Blog</a></li>
<li><a href="photos.html" accesskey="3" title=""><font color="#f0e920" font face="Vineta BT">Photos</a></li>
<li><a href="About.html" accesskey="4" title=""><font color="#f0e920" font face="Vineta BT">About</a></li>
<li><a href="contact.php" accesskey="5" title=""><font color="#f0e920" font face="Vineta BT">Contact</a></li>
</ul></div>
</div><!-- end header --><div id="gallery">
<div id="top-photo"><p><a href="#"><img src="gambar/Untitled-2.jpg" alt="" width="830" height="300"
/></a></p></div>
</div><!-- start page --><div id="page">
<!-- start content --><div id="content">
<div class="post"><h1 class="title"><marquee>Welcome to My Website</marquee></h1><p class="byline"><small>Posted on April 9th, 2013 by <a
href="admin.html">admin</a> </small></p><div class="entry">
<p> <font face="Arial"><strong>Selamat datang</strong>di Website sederhana saya, maaf jika masih banyak sekali kekurangan. i hope you can enjoy:)</p>
</div><p class="meta">Read More</a> Comments (33)</p>
</div><div class="post">
<h2 class="title">Tentang Paskibra</h2><p class="byline"><small>Posted on April 9th, 2013 by <a
href="admin.html">admin</a> </small></p>
Cara Membuat Tampilan Home:
strict.dtd">
--> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Nizar Zulmi Ramadhan X RPL 2</title><meta name="keywords" content="" /><meta name="description" content="" /><link href="default.css" rel="stylesheet" type="text/css" media="screen" /></head><body><!-- start header --><div id="header">
<div id="logo"><h1></h1><h2></h2>
</div><div id="menu">
<ul> <li class="active"><a href="default.html" accesskey="1" title=""><font color="#f0e920" font face="Vineta BT">Home</a></li>
<li><a href="blog.html" accesskey="2" title=""><font color="#f0e920" font face="Vineta BT">Blog</a></li>
<li><a href="photos.html" accesskey="3" title=""><font color="#f0e920" font face="Vineta BT">Photos</a></li>
<li><a href="About.html" accesskey="4" title=""><font color="#f0e920" font face="Vineta BT">About</a></li>
<li><a href="contact.php" accesskey="5" title=""><font color="#f0e920" font face="Vineta BT">Contact</a></li>
</ul></div>
</div><!-- end header --><div id="gallery">
<div id="top-photo"><p><a href="#"><img src="gambar/Untitled-2.jpg" alt="" width="830" height="300"
/></a></p></div>
</div><!-- start page --><div id="page">
<!-- start content --><div id="content">
<div class="post"><h1 class="title"><marquee>Welcome to My Website</marquee></h1><p class="byline"><small>Posted on April 9th, 2013 by <a
href="admin.html">admin</a> </small></p><div class="entry">
<p> <font face="Arial"><strong>Selamat datang</strong>di Website sederhana saya, maaf jika masih banyak sekali kekurangan. i hope you can enjoy:)</p>
</div><p class="meta">Read More</a> Comments (33)</p>
</div><div class="post">
<h2 class="title">Tentang Paskibra</h2><p class="byline"><small>Posted on April 9th, 2013 by <a
href="admin.html">admin</a> </small></p>
Tampilan blog:
Code:
--> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Nizar Zulmi Ramadhan X RPL 2</title><meta name="keywords" content="" /><meta name="description" content="" /><link href="default.css" rel="stylesheet" type="text/css" media="screen" /></head><body><!-- start header --><div id="header"> <div id="logo">
</div><div id="menu"><ul><li><a href="default.html" accesskey="1" title=""><font color="#f0e920" font face="Vineta BT">Home</a></li><li class="active"><a href="blog.html" accesskey="2" title=""><font color="#f0e920" font face="Vineta BT">Blog</a></li><li><a href="photos.html" accesskey="3" title=""><font color="#f0e920" font face="Vineta BT">Photos</a></li><li><a href="About.html" accesskey="4" title=""><font color="#f0e920" font face="Vineta BT">About</a></li><li><a href="contact.php" accesskey="5" title=""><font color="#f0e920" font face="Vineta BT">Contact</a></li></ul></div></div><!-- end header --><div id="gallery"><div id="top-photo"><p><a href="#"><img src="gambar/Untitled-7.jpg" alt="" width="830" height="300" /></a></p></div></div><!-- start page --><div id="page"><!-- start content --><div id="content"><div class="post"><h1 class="title">Welcome to My Website</h1><p class="byline"><small>Posted on April 09th 2013 by <a href="admin.html">admin</a> </small></p><div class="entry">
<p> <font face="Arial"><strong>Manajemendes </strong>adalah suatu Organisasi yang dibentuk pada tahun 2002, yang pertama kali didirikan di SMP Negeri 6 Depok. Dan sampai saat ini sudah terdiri dari 25 sekolah Se-Jabode.</p>
</div><p class="meta">Read More</a> Comments (33)</p></div><div class="post"><h2 class="title">Sejarah Kepaskibraan</h2>
<p class="byline"><small>Posted on April 09th 2013 by <a href="admin.html">admin</a> </small></p><div class="entry"><blockquote><p>“Praesent augue mauris, accumsan eget, ornare quis, consequat malesuada, leo.”</p></blockquote>
<p>Paskibraka adalah singkatan dari Pasukan Pengibar Bendera Pusaka dengan tugas utamanya mengibarkan duplikat bendera pusaka dalam upacara peringatan proklamasi kemerdekaan Indonesia di 3 tempat, yakni tingkat Kabupaten/Kota (Kantor Bupati/Walikota), Provinsi (Kantor Gubernur), dan Nasional (Istana Negara). Anggotanya berasal dari pelajar SLTA Sederajat kelas 1 ATAU 2. Penyeleksian anggotanya biasanya dilakukan sekitar bulan April untuk persiapan pengibaran pada 17 AgustusGagasan Paskibraka lahir pada tahun 1946, pada saat ibukota Indonesia dipindahkan ke Yogyakarta. Memperingati HUT Proklamasi Kemerdekaan RI yang ke-1, Presiden Soekarno memerintahkan salah satu ajudannya, Mayor (Laut) Husein Mutahar, untuk menyiapkan pengibaran bendera pusaka di halaman Istana Gedung Agung Yogyakarta. Pada saat itulah, di benak Mutahar terlintas suatu gagasan bahwa sebaiknya pengibaran bendera pusaka dilakukan oleh para pemuda dari seluruh penjuru Tanah Air, karena mereka adalah generasi penerus perjuangan bangsa yang bertugas.
Tetapi, karena gagasan itu tidak mungkin terlaksana, maka Mutahar hanya bisa menghadirkan lima orang
Tampilan foto:
Code:
<body><!-- start header --><div id="header"> <div id="logo"> <h1></h1><h2></h2></div><div id="menu">
<ul><li><a href="default.html" accesskey="1" title=""><font color="#f0e920" font face="Vineta BT">Home</a></li>
<li><a href="blog.html" accesskey="2" title=""><font color="#f0e920" font face="Vineta BT">Blog</a></li>
<li class="active"><a href="photos.html" accesskey="3" title=""><font color="#f0e920" font face="Vineta BT">Photos</a></li>
<li><a href="About.html" accesskey="4" title=""><font color="#f0e920" font face="Vineta BT">About</a></li>
<li><a href="contact.php" accesskey="5" title=""><font color="#f0e920" font face="Vineta BT">Contact</a></li>
</ul> </div></div><!-- end header --><div id="gallery"><div id="top-photo">
<p><a href="#"><img src="gambar/Untitled-1.jpg" alt="" width="830" height="300" /></a></p> </div></div><!-- start page --><div id="page"> <!-- start content -->
<table width="830" height="750" border="0" align="center"> <tr> <td width = "200" height= "150"><img src="gambar/foto1.jpg" width="200" height="150"></td> <td width = "200" height= "150"><img src="gambar/foto2.jpg" width="200" height="150"></td> <td width = "200" height= "150"><img src="gambar/foto3.jpg" width="200" height="150"></td> <td width = "200" height= "150"><img src="gambar/foto4.jpg" width="200"
Tampilan Contact:
Code:<!-- start page --><div id="page"><hr></hr><h1><marquee> Welcome To Contact</marquee></h1>
<!-- start content --> <tr><td align = "center" width = "800" Height = "350"><? include "koneksi.php"; ?><form action="add.php" method="post">
<table border=0 align=center width=500> <tr><td width=11%>Nama</td> <td width=3%>:</td><td width=86%><input type=text name=nama size=50></td>
</tr><tr>
td width=11%>Alamat</td><td width=3%>:</td><td width=86%><input type=text value=Jl. name=alamat size=50></td>
</tr> <tr><td width=11%>Email</td><td width=3%>:</td><td width=86%><input type=text name=email size=50></td>
</tr><tr>
<td width=11%>No HP</td><td width=3%>:</td>
<td width=86%>
Untuk Menghubungkan Web dengan database. Beri nama folder nya Koneksi.php
Code:
Cara Membuat Database:
<?
mysql_connect ("localhost", "root", "");
mysql_select_db("tugas");
?>