Home » php » Tutorial » Codingan Web di Php Part I

Jumat, 20 Desember 2013

Codingan Web di Php Part I

Posted By: Sony Surahman on: 23.06 In: ,
Share it Please
Malem gan / sis,,
ane mau sharing Codingan Web di Php nih .
Webnya sih masih jelek gan / sis tapi bermanfaat juga kok bagi yang belum tahu tentang Web
Saya membuat Web lagi iseng-iseng aja gan/sis sekalian belajar buat Ujian Tengah Semester , hehehe...
Oiya Siapin Software Sublime Text ya gan/sis..
yaudah sekarang buat folder aja di Sublime Text , saya menamakan foldernya Website
jika sudah buat file index.php
lalu copy script dibawah ini
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Trainee Anonymous Website</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div>
<a href="index.php" id="logo"><img src="URL gambar anda"
alt="logo"></a>
<ul>
<li class="selected">
<a href="index.php">Home</a>
</li>
<li>
<a href="profile.php">Profile</a>
</li>
<li>
<a href="about.php">About</a>
</li>
<li>
<a href="contact.php">Contact</a>
</li>

</ul>
</div>
</div>
<div id="body" class="home">
<div class="blog">
<img src="URL gambar anda" height="250" width="400" alt="">
<div>
<h1>Welcome</h1>
<p>Ini adalah web buatan saya sendiri.
</p>
</div>
</div>
<div class="article">
<div>
<h3>Kunjungan Industri</h3>
<p>
Gambar diatas adalah ketika kami (sekolah SMK Taruna Bhakti) kunjungan industri ke 
PT CHIP ONLINE INDONESIA.
</p>
<p>Disana kami mendapatkan berbagai informasi tentang dunia industri seperti
Game<br>
Hardware & Software<br>
dan juga Fotografi
</p>
<p>Dan juga kami jadi mengetahui bagaimana cara kerja di PT CHIP ONLINE INDONESIA
tersebut.
</p>
</div>
<img src="URL gambar anda" width="320" height="150" alt="">
</div>
<div class="news">
<img src="URL gambar anda" height="350" width="350" alt="">
<div>
<h3>Aplikasi Chatting TB</h3>
<p>
Gambar disamping adalah Aplikasi Chatting<br> buatan guru saya sendiri
yaitu Pak Adam.<br>
TB pun tak mau kalah bersaing dalam membuat Aplikasi-Aplikasi Chatting<br>
dan akhirnya -undefined- lah yang membuat Tb-Messenger itu
</p>
</div>
</div>
</div>
<div id="footer">
<div>
<p>
&#169; 2013 Sony Surahman. All Rights Reserved.
</p>
<div class="connect">
<a href="http://facebook.com/id" id="facebook">facebook</a> <a href="http://twitter.com/id" id="twitter">twitter</a>
</div>
</div>
</div>
</body>

</html>

ini screenshoot indexnya gan/sis yang belom dikasih CSS



nb : <title> itu untuk judul di adress bar gan/sis ,
nah kalo yang saya warnain biru muda itu contentnya gan.. kalo yang biru agak tua itu Judul Content

 Lalu buat cssnya gan/sis,
buat folder dulu di folder Website
lalu buat file style.css , itu untuk membuat Web menjadi lebih bagus gan/sis
lalu copy script dibawah ini

 /* */
/*------------------------- Fonts ------------------------*/
@font-face {
font-family: 'anticregular';
src: url('../fonts/antic-regular-webfont.eot');
src: url('../fonts/antic-regular-webfont.eot?#iefix') format('embedded-opentype'),  url('../fonts/antic-regular-webfont.woff') format('woff'),  url('../fonts/antic-regular-webfont.ttf') format('truetype'),  url('../fonts/antic-regular-webfont.svg#anticregular') format('svg');
font-weight: normal;
font-style: normal;
}
/*------------------------- Layout styles ------------------------*/
body {
margin:0;
font-family:Arial, Helvetica, sans-serif;
background:url(../images/bg-body.jpg);
font-size:12px;
}
a {
outline:none;
}
a img {
border:0;
display:block;
}
p {
font-size:12px;
line-height:24px;
letter-spacing:0.05em;
color:#959595;
}
p a {
color:#959595;
}
p a:hover {
color:#1bb5ac;
}
/*------------------------- Header ------------------------*/
#header {
background:url(../images/bg-header.jpg);
height:130px;
}
#header div {
margin:0 auto;
overflow:hidden;
padding:0 0 0 29px;
width:931px;
}
#header div a#logo {
display:block;
float:left;
margin:25px 0 0;
}
#header div ul {
float:right;
list-style:none;
margin:0;
overflow:hidden;
padding:0;
}
#header div ul li {
float:left;
height:130px;
text-align:center;
width:110px;
}
#header div ul li a {
color:#787b66;
display:block;
height:130px;
letter-spacing:.075em;
line-height:150px;
text-align:center;
text-decoration:none;
text-shadow:0 1px 0 #fff;
width:110px;
}
#header div ul li.selected a {
background:url(../images/bg-nav-selected.png) repeat-x;
}
#header div ul li.selected a, #header div ul li a:hover {
color:#1bb5ac;
}
/*------------------------- Body ------------------------*/
#body {
margin:0 auto 97px;
min-height:1005px;
padding:38px 29px 0;
width:902px;
}
#body.home .blog {
overflow:hidden;
}
#body.home .blog > img {
display:block;
float:left;
margin:45px 0 0;
}
#body.home .blog div {
float:right;
padding:5px 0 0;
width:430px;
}
#body.home .blog div img {
display:block;
margin:0 0 0 28px;
}
#body.home .blog div h1 {
color:#e49e06;
font-family:anticregular;
font-size:25px;
font-weight:400;
letter-spacing:.1em;
line-height:24px;
margin-bottom:3px;
text-align:right;
text-indent:110px;
}
#body.home .blog div p {
margin:0;
text-align:right;
}
#body.home .article {
margin:63px 0 0;
overflow:hidden;
}
#body.home .article div {
float:left;
padding:0 0 0 25px;
width:465px;
}
#body.home .article div h3 {
color:#e49e06;
font-family:anticregular;
font-size:20px;
font-weight:400;
letter-spacing:.1em;
line-height:24px;
margin:6px 0 3px;
text-align:left;
}
#body.home .article div p {
margin:0 0 24px;
text-align:left;
}
#body.home .article > img {
display:block;
float:right;
margin:0 44px 0 0;
}
#body.home .news {
overflow:hidden;
padding:37px 0 0;
}
#body.home .news > img {
display:block;
float:left;
margin:0 0 0 80px;
}
#body.home .news div {
float:right;
padding:25px 0 0;
width:430px;
}
#body.home .news div h3 {
color:#e49e06;
font-family:anticregular;
font-size:20px;
font-weight:400;
letter-spacing:.1em;
line-height:24px;
margin:6px 0 3px;
text-align:right;
}
#body.home .news div p {
margin:0 0 24px;
text-align:right;
}
#body.subdivisions ul li {
margin:0 0 40px;
overflow:hidden;
}
#body.subdivisions ul li div {
float:left;
margin:0 45px 0 0;
width:585px;
}
#body.subdivisions ul li div p {
margin:6px 0 0;
text-align:justify;
}
#body.subdivisions ul li > a {
float:right;
}
#body.about p {
margin:6px 0 72px;
text-align:justify;
}
#body.contact h3 {
color:#e49e06;
font-family:anticregular;
font-size:20px;
font-weight:400;
letter-spacing:.05em;
margin:11px 0 0;
}
#body.contact p {
margin:0;
}
#body.contact h3 a {
color:#1bb5ac;
text-decoration:none;
text-transform:capitalize;
}
#body.contact > div {
padding:18px 0 0 40px;
}
#body.contact > div div:first-child {
margin-bottom:71px;
}
#body.contact > div div:first-child span:first-child {
color:#a3a3a3;
font-size:12px;
line-height:14px;
margin:0;
}
#body.contact > div div:first-child span:first-child a {
color:#a3a3a3;
}
#body.contact > div div:first-child span:first-child a:hover {
color:#1bb5ac;
}
#body.contact > div div:first-child p {
margin:4px 0 24px 40px;
}
#body.contact > div div:first-child span {
display:block;
line-height:24px;
margin:0 0 0 40px;
}
#body.contact > div div span:first-child {
color:#A3A3A3;
display:block;
font-size:14px;
line-height:24px;
margin:0;
}
#body.contact > div div span {
color:#a3a3a3;
display:block;
line-height:24px;
margin:0 0 0 40px;
}
#body.blog {
background:url(../images/bg-border.png) repeat-y 660px 0;
margin-top:38px;
overflow:hidden;
padding-top:0;
}
#body.blog > div:first-child {
float:left;
width:599px;
}
#body.blog > div:first-child > ul > li {
background:url(../images/bg-mid.png) repeat-y left top;
margin:0 0 18px;
overflow:hidden;
position:relative;
}
#body.blog > div:first-child > ul > li span.bg-top {
background:url(../images/bg-top.jpg) no-repeat left top;
display:block;
height:10px;
width:580px;
}
#body.blog > div:first-child > ul > li > a {
display:block;
float:left;
margin:8px 20px 0;
}
#body.blog > div:first-child > ul > li > div {
float:right;
padding:0 39px 0 0;
width:390px;
}
#body.blog > div:first-child > ul > li > div h3 {
color:#e49e06;
font-family:anticregular;
font-size:16px;
font-weight:400;
line-height:24px;
margin:2px 0 0;
}
#body.blog > div:first-child > ul > li > div h3 a {
color:#1bb5ac;
text-decoration:none;
}
#body.blog > div:first-child > ul > li > div p {
margin:2px 0 0;
}
#body.blog > div:first-child > ul > li > div div {
border-top:1px solid #e5e5e5;
margin:15px 0 0;
padding:13px 0 25px;
}
#body.blog > div:first-child > ul > li > div div span:first-child {
float:left;
}
#body.blog > div:first-child > ul > li > div div span {
color:#959595;
float:right;
font-size:12px;
letter-spacing:.05em;
}
#body.blog > div:first-child > ul > li span.bg-bottom {
background:url(../images/bg-bottom.jpg) no-repeat left bottom;
clear:both;
display:block;
height:10px;
width:580px;
}
#body.blog > div:first-child > ul > li span.triangle {
background:url(../images/bg-triangle.jpg) no-repeat;
display:block;
height:20px;
position:absolute;
right:0;
top:52px;
width:20px;
}
#body.blog > div:first-child > ul.paging {
overflow:hidden;
padding:35px 0 0;
text-align:center;
width:580px;
*margin:0 0 0 140px;/* Needed for IE7 and old versions */
}
#body.blog > div:first-child > ul.paging li {
background:none;
display:inline-block;
margin:0;
*float:left;/* Needed for IE7 and old versions */
}
#body.blog > div:first-child > ul.paging li a {
color:#636363;
font-family:anticregular;
font-size:16px;
letter-spacing:.1em;
line-height:24px;
margin:0;
padding:0 5px;
text-decoration:none;
}
#body.blog > div:first-child > ul.paging li a:hover {
color:#E49E06;
}
#body.blog > div:first-child > ul.paging li.first a {
margin:0 15px 0 0;
}
#body.blog > div:first-child > ul.paging li.last a {
margin:0 0 0 15px;
}
#body.blog .sidebar {
background:url(../images/bg-sidebar-bottom.jpg) no-repeat left bottom;
float:left;
margin:0 0 0 83px;
padding:0 0 10px;
width:220px;
}
#body.blog .sidebar h4 {
background:url(../images/bg-archive.jpg) no-repeat;
color:#627a0e;
font-family:anticregular;
font-size:20px;
font-weight:400;
height:42px;
line-height:44px;
margin:0;
text-align:center;
text-shadow:0 1px 0 #fff;
width:220px;
}
#body.blog .sidebar ul {
background:url(../images/bg-sidebar-mid.png) repeat-y;
list-style:none;
margin:0;
padding:0 20px;
}
#body.blog .sidebar ul li.selected {
border-bottom:1px solid #e5e5e5;
padding:0 0 10px;
}
#body.blog .sidebar ul li.last a {
border:0;
}
#body.blog .sidebar ul li.selected > a {
background:url(../images/arrow-up.png) no-repeat right center;
color:#e49e06;
margin:0 0 13px;
padding:15px 0;
}
#body.blog .sidebar ul li > a {
background:url(../images/arrow-down.png) no-repeat right center;
border-bottom:1px solid #e5e5e5;
color:#1bb5ac;
display:block;
font-family:anticregular;
font-size:16px;
letter-spacing:.05em;
line-height:24px;
padding:12px 0;
text-decoration:none;
text-indent:10px;
}
#body.blog .sidebar ul li span {
display:block;
padding:0 0 0 50px;
}
#body.blog .sidebar ul li span a {
color:#a3a3a3;
font-size:12px;
letter-spacing:.05em;
line-height:24px;
text-decoration:none;
}
#body.home .blog div h3 a, #body.home .article div h3 a, #body.home .news div h3 a, #body.subdivisions ul li div h3 a {
color:#1bb5ac;
text-decoration:none;
}
#body.home .blog div h3 a:hover, #body.home .article div h3 a:hover, #body.home .news div h3 a:hover, #body.subdivisions ul li div h3 a:hover, #body.contact h3 a:hover, #body.blog > div:first-child > ul > li > div h3 a:hover {
text-decoration:underline;
}
#body.subdivisions ul, #body.blog > div:first-child > ul {
list-style:none;
margin:0;
padding:0;
}
#body.subdivisions ul li div h3, #body.about h3 {
color:#e49e06;
font-family:anticregular;
font-size:20px;
font-weight:400;
letter-spacing:.05em;
line-height:24px;
margin:14px 0 0;
}
#body.subdivisions ul li > a img:hover, #body.blog > div:first-child > ul > li > a img:hover {
filter:alpha(opacity=90);/* Needed for IE8 and old versions */
opacity:0.9;
}
#body.blog > div:first-child > ul.paging li.selected a, #body.blog .sidebar ul li > a:hover, #body.blog .sidebar ul li span a:hover {
color:#e49e06;
}
/*------------------------- Footer ------------------------*/
#footer {
background:url(../images/bg-footer.png) repeat-x;
height:130px;
}
#footer div {
margin:0 auto;
padding:0 10px;
width:940px;
}
#footer div p {
color:#5bdee6;
display:block;
float:left;
margin:20px 0;
}
#footer div .connect {
float:right;
padding:14px 0 0;
width:auto;
}
#footer div .connect a {
display:block;
float:left;
height:30px;
margin:0 0 0 28px;
text-indent:-99999px;
width:30px;
}
#footer div .connect a#googleplus {
background:url(../images/icons.png) no-repeat 0 0;
}
#footer div .connect a#contact {
background:url(../images/icons.png) no-repeat -31px 0;
}
#footer div .connect a#facebook {
background:url(../images/icons.png) no-repeat -62px 0;
}
#footer div .connect a#twitter {
background:url(../images/icons.png) no-repeat -93px 0;
}
.body div div.contact {
padding:0 0 40px;
}
.body div div.contact h3 {
font-family:QuicksandRegular;
font-size:24px;
margin:0 0 30px;
padding:21px 20px 0;
}
.body div div.contact p {
margin:0;
}
.body div div.contact form {
padding:30px 20px;
}
.body div div.contact form table {
width:753px;
}
.body div div.contact form tr {
margin-bottom:10px;
display:block;
overflow:hidden;
}
.body div div.contact form td:first-child {
float:left;
}
.body div div.contact form td {
display:inline-block;
float:right;
}
.body div div.contact form label span {
color:#fa1c17;
}
.body div div.contact form label.message {
margin:0 0 0 3px;
}
.body div div.contact form input {
display:block;
width:302px;
height:15px;
font-family:QuicksandRegular;
font-size:14px;
color:#383836;
border-color:#464646 #8C8678 #64615C #7C756B;
border-style:solid;
border-width:1px;
padding:5px;
}
.body div div.contact form textarea {
display:block;
width:735px;
height:186px;
font-family:QuicksandRegular;
font-size:14px;
color:#383836;
border-color:#464646 #8C8678 #64615C #7C756B;
border-style:solid;
border-width:1px;
margin:0 0 10px 3px;
padding:5px;
}
.body div div.contact form input#submit {
display:block;
background:url(../images/interface.png) no-repeat -10px -276px;
width:79px;
height:30px;
color:#fff;
font-family:QuicksandRegular;
text-transform:uppercase;
border:0;
cursor:pointer;
margin:0 0 0 3px;
padding:0;
overflow:auto;
}
.body div div.contact form input#submit:hover {
background:url(../images/interface.png) no-repeat -10px -352px;
}
.body div div.contact div {
background:none;
border:1px solid #285167;
height:98px;
margin:0 20px;
padding:5px 65px;
}
.body div div.contact div p {
background:url(../images/icon-home.png) no-repeat left 5px;
float:left;
font-family:QuicksandRegular;
font-size:14px;
color:#383836;
text-align:left;
text-transform:none;
padding:0 30px;
}
.body div div.contact div span#phone {
background:url(../images/icons.png) no-repeat -10px -126px;
height:20px;
margin-top:8px;
float:left;
width:285px;
padding:0 0 0 25px;
}
.body div div.contact div span#fax {
float:left;
width:285px;
background:url(../images/icons.png) no-repeat -10px -96px;
margin:13px 0 14px;
padding:0 0 0 25px;
}
.body div div.contact div span#email2 {
width:285px;
float:left;
background:url(../images/icons.png) no-repeat -10px -156px;
padding:0 0 0 25px;
}
.body div div.contact div span#email2 a {
color:#464646;
}
.body div div.contact div span#email2 a:hover {
color:#437f90;

nah itu style webnya
ini Screenshoot jika sudah dikasih css

nah segitu dulu ya gan/sis nanti disambung di part II
untuk yang Profile , About , dan Contact, dan juga pastinya full script.rar  ada ditutorial  "Codingan Web Php Part II"

Semoga Bermanfaat ^_^

Written by

Hello , My name is Sony Surahman.I'am a newbie Blogger

6 komentar:

Tolong kalau komentar pake bahasa yang sopan ya... :)

Langganan: Posting Komentar (Atom)

© 2014 T-A_Blog'z. All rights resevered. Designed by Templateism | Edited by Me