Tutorial web nizar

481 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
481
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tutorial web nizar

  1. 1. TUTORIAL WEBRPL
  2. 2. KATA PENGANTARKATA PENGANTARModul dengan judul “WWeebb DDeessiiggnn && WWeebb PPrrooggrraammiinngg“ merupakan bahan acuan yang digunakansebagai panduan dalam proses belajar Teman untuk membentuk salah satu bagian darikompetensi bidang keahlian Teknologi Informasi dan Komunikasi.Modulinimencakuppenguasaankonsepfile-filegrafik, memahamidasar-dasarpemrogramanWeb,memahamiperintah-perintahpemrogramanWeb,danbagaimanamembangunsebuahaplikasipemrogramanberbasisWeb.PenyusunNizar Zulmi Ramadhan
  3. 3. Menginstal Adobe DreamWeaver Cs6PertamaKlik setup untukmemulaimenginstal:
  4. 4. Laluklik install:LaluKlik Accept:
  5. 5. Klik language untukmenentukanbahasadanKlikgambar folder untukmenempatkanlokasi dream Weaver,laluklik install:Mulaimenginstall:
  6. 6. Menginstallselesai:
  7. 7. Langkah Pembuatan SiteTulisnama web yang ingindibuat, LaluKlikgambar folder untukMenempatkan web yang ingindisimpan:Apabila folder sudahdibuatlalusimpan web di folder yang dibuat:
  8. 8. Apabilasudahdimpan, lanjutklik server-kliktanda plus +:Hasilya,laluisidansimpan:
  9. 9. LaluCheklist testing-simpan:
  10. 10. MulaiMembuat WebHal pertama yang sayalakukandalammembuat web adalahmembuatpokokdari web yangsayainginbuatadalahtable.Berikutlangkah-langkahnya :Pertamaklikinsert :Lalu klik TableLalu tentukan baris/rows dan colomnya:Apabila sudah menentukan baris/rows dan colomnya lalu klik ok.
  11. 11. Hasilnya:Apabila ada baris/rows yang ingin dihilangkan, blok baris yang ingin dihilangkan:
  12. 12. Lalu klik rows, Hasilnya:Apabila ada colom yang ingin dihilangkan, blok colom yang ingin dihilangkan:
  13. 13. Lalu klik cell, Hasilnya:Apabila table ingin diisi colom, caranya klik table yang ingin diisi colom laluklik insert-klik Table-tentukanberapa colom yang di isi.
  14. 14. Pertamaklikinsert :Lalu klik TableLalu tentukan baris/rows dan colomnya:
  15. 15. Hasilnya:Apabila ingin meratakan tulisan, blok table yang ada tulisannya dan yang ingin diratakan:Lalu Horznya diganti dengan Center:
  16. 16. Hasilnya:
  17. 17. Mendesain WebApabila ingin memasukan gambar untuk background, caranya klik Page propertiesLalu klik browser, untuk mencari gambar yang ingin di jadikan backgroundCara Membuat CSSKode:/*Design by Free CSS Templateshttp://www.freecsstemplates.orgReleased for free under a Creative Commons Attribution 2.5 License*/
  18. 18. 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 {
  19. 19. 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;
  20. 20. }#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 {
  21. 21. 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;}
  22. 22. .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 {
  23. 23. 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;}
  24. 24. Cara Membuat Tampilan Home:--><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=""><fontcolor="#f0e920" font face="Vineta BT">Home</a></li><li><a href="blog.html" accesskey="2" title=""><font color="#f0e920" fontface="Vineta BT">Blog</a></li><li><a href="photos.html" accesskey="3" title=""><font color="#f0e920" fontface="Vineta BT">Photos</a></li><li><a href="About.html" accesskey="4" title=""><font color="#f0e920" fontface="Vineta BT">About</a></li><li><a href="contact.php" accesskey="5" title=""><font color="#f0e920" fontface="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 <ahref="admin.html">admin</a> </small></p><div class="entry"><p> <font face="Arial"><strong>Selamat datang</strong>di Websitesederhana saya, maaf jika masih banyak sekali kekurangan. i hope you can enjoy:)</p></div><p class="meta">Read More</a> &nbsp;&nbsp;&nbsp; Comments (33)</p></div><div class="post"><h2 class="title">Tentang Paskibra</h2><p class="byline"><small>Posted on April 9th, 2013 by <ahref="admin.html">admin</a> </small></p>
  25. 25. Tampilan blog:Code:
  26. 26. --> <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=""><fontcolor="#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><ahref="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="VinetaBT">Contact</a></li></ul></div></div><!-- end header --><div id="gallery"><div id="top-photo"><p><ahref="#"><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 suatuOrganisasi yang dibentuk pada tahun 2002, yang pertama kali didirikan di SMP Negeri 6 Depok. Dan sampaisaat ini sudah terdiri dari 25 sekolah Se-Jabode.</p></div><p class="meta">Read More</a> &nbsp;&nbsp;&nbsp; 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 Pusakadengan tugas utamanya mengibarkan duplikat bendera pusaka dalam upacara peringatan proklamasikemerdekaan 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 1ATAU 2. Penyeleksian anggotanya biasanya dilakukan sekitar bulan April untuk persiapan pengibaran pada17 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 satuajudannya, Mayor (Laut) Husein Mutahar, untuk menyiapkan pengibaran bendera pusaka di halaman IstanaGedung Agung Yogyakarta. Pada saat itulah, di benak Mutahar terlintas suatu gagasan bahwa sebaiknyapengibaran bendera pusaka dilakukan oleh para pemuda dari seluruh penjuru Tanah Air, karena merekaadalah generasi penerus perjuangan bangsa yang bertugas.Tetapi, karena gagasan itu tidak mungkin terlaksana, maka Mutahar hanya bisa menghadirkan lima orangpemuda (3 putra dan 2 putri) yang berasal dari berbagai daerah dan kebertulan sedang berada di
  27. 27. 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=""><fontcolor="#f0e920" font face="Vineta BT">Photos</a></li><li><a href="About.html" accesskey="4" title=""><fontcolor="#f0e920" font face="Vineta BT">About</a></li><li><a href="contact.php" accesskey="5" title=""><fontcolor="#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"><imgsrc="gambar/foto3.jpg" width="200" height="150"></td><td width = "200" height= "150"><img src="gambar/foto4.jpg" width="200"height="150"></td></tr>
  28. 28. 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%>
  29. 29. Untuk Menghubungkan Web dengan database. Beri nama folder nya Koneksi.phpCode:Cara Membuat Database:<?mysql_connect ("localhost", "root", "");mysql_select_db("tugas");?>

×