Jumat, 01 November 2013
Belajar Web Design
Kali Ini Gue pengen berbagi pengetahuan gue dgn kalian tentang pelajaran web design
yang telah kami pelajari di smkn4 banjarmasin
Langsung saja
Pertama Folder xampp atau mysql simpan di htdocs buat folder baru....
Beri aja nama filenya
index.php ini adalah inti dari semuanya jadi lo jalanin ini duluan
isi dari index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"> <h1>Belajar Web Desain</h1>
</div><!--ini akhiran header-->
<div id="menu">
<marquee><h2>Belajar HTML dan PHP Bersama Adiya SMKN 4 Banjarmasin</h2></marquee>
</div><!--ini akhiran menu-->
<div id="main">
<div id="kiri">
<ul>
<li><a href="index.php?menu=home">Home</a></li>
<li><a href="index.php?menu=html">HTML</a></li>
<li><a href="index.php?menu=css">CSS</a></li>
<li><a href="index.php?menu=jsp">Java Script</a></li>
<li><a href="index.php?menu=abm">About ME</a></li>
</ul>
</div><!--ini akhiran kiri-->
<div id="kanan">
<?php include("menu.php");?>
</div><!--ini akhiran kanan-->
</div><!--ini akhiran main-->
<div id="halat">
</div><!--ini akhiran halat-->
<div id="footer">
<h2>Copyright © created By Adiya Rachman</h2>
</div><!--ini akhiran footer-->
</div><!--ini akhiran wrapper-->
</body>
</html>
ini cssnya
save dlu gambar background sama headernya disini
buat dlu folder baru dengan nama gambar
Ini background lo kasih nama aja background.jpg
Ini header lo kasih nama aja header.jpg
simpan dengan style.css, sama seperti nama style diatas, gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
@charset "utf-8";
/* CSS Document */
body{
background-image:url(gambar/background.jpg);
}
h1{
margin:0;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-style:oblique;
font-size:66px;
}
#menu h1{
margin:0px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-style:oblique;
}
h2{
margin:0;
text-align:center;
}
#wrapper{
border:#CC6600 solid 10px;
border-radius:10px;
width: 960px;
margin: 0 auto;
}
#header{
background:url(gambar/header.jpg);
height:150px;
}
#menu{
background:#FF9900;
padding:1px;
}
#main{
overflow:hidden;
background:#FFFFFF;
}
#kiri{
float: left;
min-height:400px;
width:200px;
}
#kanan{
border-left:1px solid #CCCCCC;
float:right;
min-height:400px;
width:750px;
}
#halat{
background:#CCCCCC;
height:40px;
}
#footer{
clear:both;
padding: 20px;
background:#FF3300
}#kiri ul{
margin:1px;
padding:0;
list-style:none;
}
#kiri ul li{
display:block;
margin:15px;
}
#kiri a{
display:block;
background:#ff9900;
text-decoration:none;
color:#CC0000;
padding: 3px 15px;
border:1px solid #006699;
border-radius:10px;
}
#kiri a:hover{
background-color:#ff8400;
}
menu.php
<?php
@$menu=$_GET['menu'];
if($menu=='home'){
include('home.php');
}elseif($menu=='html'){
include('html.php');
}elseif($menu=='css'){
include('css.php');
}elseif($menu=='jsp'){
include('jsp.php');
}elseif($menu=='abm'){
include('abm.php');
}
else{
include('home.php');
}
?>
Kalo Sampai Sini LINK Yg ada di INDEX nggak bkal Jalan karena file terpisah
buat aja nama filenya
home.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h2>Ini Adalah Halaman Home</h2>
<h2>Anda Dapat Mengisi Apa saja yg Ada Di dalam home.php</h2>
</body>
</html>
html.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h2>Ini Adalah Halaman HTML</h2>
<h2>Anda Dapat Mengisi Apa saja yg Ada Di dalam html.php</h2>
</body>
</html>
css.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h2>Ini Adalah Halaman CSS</h2>
<h2>Anda Dapat Mengisi Apa saja yg Ada Di dalam css.php</h2>
</body>
</html>
jsp.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h2>Ini Adalah Halaman JavaScript</h2>
<h2>Anda Dapat Mengisi Apa saja yg Ada Di dalam jsp.php</h2>
</body>
</html>
Dan Ini yg terakhir tpi terserah lo mau lu ikutin apa nggak...
klo ngga lo ikutin, lo harus hapus link about me diatas.. karna ngga bkal guna
abm.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tugas Table</title>
</head>
<body>
<font>
<table border = '0' align = "center">
<tr>
<td rowspan = "2" width='570' height = '550' valign = 'top' align = "justify">
<h2>Adiya's Profile</h2>
<pre>
Nama : <b>Adiya</b><br>
NIM : 3132<br>
Jurusan : Rekayasa Perangkat Lunak<br>
Tempat Tanggal Lahir : Banjarmasin, 17 juli 1995<br>
Alamat : Jl. Semangat Dalam Handil Bakti<br>
Kecamatan Alalak<br>
Kotamadya Barito Kuala<br>
</pre>
Riwayat Pendidikan :<ol type ="A">
<li>SDN Pekapuran)</li>
<li>SMPN 2 Alalak</li>
<li>SMK Negeri 4 Banjarmasin (2011-Sekarang)</li>
</ol>
<pre>
Email : adiyatkd@gmail.com<br>
Homepage : <b>adiyatkd.blogspot.com</b><br>
Biografi : <br>
Seorang Lelaki yg tumbuh dan besar di sebuah Kota di kalimantan Selatan. Lelaki
Yg Mempunyai Motivasi tinggi dalam Meraih Mimpinya dan diantara sekian banyak Mimpinya
adalah menjadi seorang pendidik agar bisa menjadi sumber manfaat bagi orang-orang
disekitarnya. ada yg mengatakan dia unik, namun ada juga yg mengatakan dia aneh. Tapi,
terlepas dari itu semua, dari semua kebebasan orang untuk menilai dirinya, di bangga
dan bersyukur menjadi dirinya, <b>Adiya</b>
</pre>
</td>
<td width="150" align = "center" valign = "center" height="150">
<img src="gitar.jpg" height="100" width="100"/>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</font>
</body>
</html>
Langganan:
Postingan (Atom)