Monday, June 27, 2016
Saturday, June 11, 2016
Mengedit Web
·
Gambar web acuan:
·
Hasil Web:
·
Script:
<!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>TMPH00043</title>
<link href="css/styles.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu-wrapper">
<div
class="menu">
<ul>
<li><a href="index.html"
class="active">home</a></li>
<li><a
href="about.html">about</a></li>
<li><a
href="services.html">services</a></li>
<li><a
href="works.html">works</a></li>
<li><a
href="contact.html">contact</a></li>
</ul>
</div>
<div
class="call">
<h1>Call us :<span> 085782366955</span></h1>
</div>
</div>
<!--- menu-wrapper div end -->
<div
class="clearing"></div>
<div
class="border-bottom"></div>
<div class="logo-wrapper">
<div
class="leftshadow"><img
src="images/logo-wrap-left.jpg" /></div>
<div
class="logo">
<h1>KERTAS</h1>
</div>
<div
class="rightshadow"><img
src="images/logo-wrap-right.jpg" /></div>
</div>
<div
class="clearing"></div>
<div class="banner-wrapper">
<div
class="bannerlef"><img
src="images/banner-wrap-left.jpg" /></div>
<div
class="banner-container">
<div class="banner">
<div class="banner-content">
<h1>Bisnis Online</h1>
<h2>jual mudah banyak pelanggan</h2>
<a href="#">eco</a> </div>
</div>
</div>
<div
class="bannerright"><img src="images/banner-wrap-right.jpg"/></div>
</div>
<!--- banner wrapper div end -->
<div
class="clearing"></div>
<div class="container">
<div
class="page-wrapper">
<div class="primary-content">
<div class="panel">
<div class="title">
<h1>The Founder</h1>
<h2>Raka Nur Wahyudi Chairman of Eco Group</h2>
</div>
<div class="content">
<p>VISI ECO : Menjadi yang terdepan dalam bisnis penjualan online
</p>
<p>MISI ECO : Menyediakan produk yang
berkualitas, pendidikan dan kesempatan bisnis kepada konsumen global,
meningkatkan kualitas hidup dan menciptakan masyarakat yang harmonis.</p>
<div class="button-link"><a
href="#">more</a></div>
</div>
</div>
</div>
<div class="sidebar">
<div class="panel">
<div class="img"><img
src="images/Image1.jpeg"/></div>
</div>
</div>
</div>
<div
class="panel-wrapper">
<div class="panel marRight30">
<div class="title">
<h1>Selamat Datang di Keluarga Besar Eco</h1>
</div>
<div class="imgbg">
<div class="img"><img
src="images/img-3.jpg"/></div>
</div>
<div class="content">
<h2>Selamat datang di keluarga besar ECO </h2>
<p>Anda yang telah
bergabung dengan ECO telah melakukan langkah
yang
tepat untuk menatap masa depan yang gemilang
dan penuh
kebebasan.
</p>
<p>Bersama ECO anda bisa menggapai impian anda.</p>
<div class="button-link"><a
href="#">more</a></div>
</div>
</div>
<div class="panel marRight30">
<div class="title">
<h1>Cara Kerja</h1>
</div>
<div class="mid-panel">
<div class="left marRight30">
<div class="imgbg">
<div class="img"><img src="images/img-5.jpg"/></div>
</div>
</div>
<div class="right"> <a
href="#">User</a>
<p class="padTop10">Patikan kita menggunakan produk
tersebut.</p>
</div>
</div>
<div class="mid-panel padTop30">
<div class="left marRight30">
<div class="imgbg">
<div class="img"><img
src="images/img-6.jpg"/></div>
</div>
</div>
<div class="right"> <a
href="#">Selling</a>
<p class="padTop10">Di tahap ini,kita menjual
produk/barang yang kita punya.</p>
</div>
</div>
<div class="mid-panel padTop30 padBottom28 borderNone">
<div class="left marRight30">
<div class="imgbg">
<div class="img"><img src="images/img-4.jpg"/></div>
</div>
</div>
<div class="right"> <a
href="#">Network</a>
<p class="padTop10">Di sini kita membuat team/group
untuk membangun bisnis bersama.</p>
</div>
</div>
<div class="content">
<div class="button-link"><a
href="#">more</a></div>
</div>
</div>
<div class="panel">
<div class="title">
<h1>Video</h1>
</div>
<div class="content">
<div class="right-panel">
<ul>
<li><a href="#">Meraih kebahagiaan bersama
eco</a></li>
<li><a href="#">PROMO ECO 21st
Anniversary</a></li>
<li><a href="#">ECO Product Demo
Renuves</a></li>
<li><a href="#">ECO AIRIZ</a></li>
<li><a href="#">ECO PASSION TRIP SPAIN
2016</a></li>
<li><a href="#">ALAT
KESEHATAN</a></li>
<li class="borderNone"><a href="#">ECO -
PROFILE OF SUCCESS YOAS</a></li>
</ul>
</div>
<div class="button-link"><a
href="#">more</a></div>
</div>
</div>
</div>
<!--- panel wrapper div end -->
</div>
<!--- container div end -->
<div
class="clearing"></div>
<div class="panel-wrapper">
<div
class="panel marRight30">
<div class="title">
</div>
<div
class="contact">
<input type="text" class="contact-input"
name="name" id="name" value="Username"/>
<input type="text" class="contact-input"
name="name" id="name" value="Password"/>
<div class="button-link"><a href="#">Log
in</a></div>
</div>
</div>
<div
class="panel marRight30">
<div class="title">
<h1>NET-P</h1>
<h2>Network Education Tools Program. </h2>
</div>
<div class="midcontent">
<div class="midcontentlink marRight40">
<ul>
<li><a href="#">Buka Topi Anda - Agus
TL</a></li>
<li><a href="#">Jika Hari Ini Terakhir - Jafrial
Jasman</a></li>
<li><a href="#">Menari Di Tengah Badai - Abdi
Suardin</a></li>
<li class="borderNone"><a href="#">menghadapi
masalah - Naga sugara</a></li>
</ul>
</div>
<div class="midcontentlink">
<ul>
<li><a href="#">Raksasa Dalam Diri Anda - Fauzan
Mutaqien</a></li>
<li><a href="#">sukses punya bnyak pilihan -
hasibuan kanata</a></li>
<li class="borderNone"><a href="#">Tidak
Bisa Beli Waktu - Rusli Gustaf</a></li>
</ul>
</div>
</div>
</div>
<div
class="panel">
<div class="title">
<h1>Follow and Share</h1>
<h2>Follow us on</h2>
</div>
<div class="social-media">
<ul>
<li><a href="#"><img
src="images/icon-ol.jpg"/></a></li>
<li><a href="#"><img
src="images/icon-fb.jpg"/></a></li>
<li><a href="#"><img
src="images/icon-twitter.jpg"/></a></li>
<li><a href="#"><img
src="images/icon-linkdin.jpg"/></a></li>
<li><a href="#"><img
src="images/icon-fb.jpg"/></a></li>
</ul>
</div>
<h2 class="padBottom10">Send us email</h2>
<div class="infolinks marginBottom"> <a href="#">info@eco.com</a>
<a href="#">sales@eco.com</a> <a
href="#">contact@eco.com</a> <a
href="#">manager@eco</a> </div>
</div>
</div>
<div class="footer-wrapper">
<div
class="footer">
<p> © 2016 All Rights Reserved.<a
href="http://www.eco.blogspot.com"> < www.eco.blogspot.com
></a> Images From: <a
href="http://eco.net">www.eco.net</a> </p>
</div>
</div>
</body>
</html>
Thursday, June 9, 2016
BELAJAR CSS2
BELAJAR
CSS2
CSS
Tutorial
1.
CSS Fonts
Font Family
·
Penjelasan:
Di
gunakan untuk mengubah jenis font-family didalam paragraph.
·
Script:
<!DOCTYPE
html>
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman",
Times, serif;
}
p.sansserif
{
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>CSS
font-family</h1>
<p
class="serif">This is a paragraph, shown in the Times New Roman
font.</p>
<p
class="sansserif">This is a paragraph, shown in the Arial
font.</p>
</body>
</html>
·
Output:
Font Style
·
Penjelasan:
Di
gunakan untuk mengubah font-style didalam paragraph.
·
Script:
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This
is a paragraph in normal style.</p>
<p
class="italic">This is a paragraph in italic style.</p>
<p
class="oblique">This is a paragraph in oblique style.</p>
·
Output:
Font Size1
·
Penjelasan:
Di
gunakan untuk mengubah ukuran font.
·
Script:
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>This
is heading 1</h1>
<h2>This
is heading 2</h2>
<p>This
is a paragraph.</p>
<p>This
is another paragraph.</p>
·
Output:
Font Size2
·
Penjelasan:
Fungsinya
hamper sama dengan font size1, Cuma difont size2 ini lebih detail.
·
Script:
<style>
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<h1>This
is heading 1</h1>
<h2>This
is heading 2</h2>
<p>This
is a paragraph.</p>
<p>Specifying
the font-size in em allows all major browsers to resize the text.
Unfortunately,
there is still a problem with older versions of IE. When resizing the text, it
becomes larger/smaller than it should.</p>
·
Output:
2.
CSS Links
Styling Links
·
Penjelasan:
Di
gunakan untuk memanggil sebuah links, dan memberikan style pada href terbut.
Jika text this is a link tersenggol cursor, text tersebut akan berubah warna.
·
Script:
<!DOCTYPE
html>
<html>
<head>
<style>
/*
unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse
over link */
a:hover {
color: #FF00FF;
}
/* selected
link */
a:active {
color: #0000FF;
}
</style>
</head>
<body>
<p><b><a
href="default.html" target="_blank">This is a
link</a></b></p>
<p><b>Note:</b>
a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective.</p>
<p><b>Note:</b>
a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>
</body>
</html>
·
Output:
Text Decoration
·
Penjelasan:
Memiliki
fungsi yang sama dengan styling links, jika text this is a link tersenggol akan
memunculkan garis bawah pada text tersebut.
·
Script:
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<p><b><a
href="default.html" target="_blank">This is a
link</a></b></p>
<p><b>Note:</b>
a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective.</p>
<p><b>Note:</b>
a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>
·
Output:
Background Color
·
Penjelasan:
Jika
text this is a link tersenggol, text tersebut akan berganti warna background.
·
Script:
<style>
a:link {
background-color: #B2FF99;
}
a:visited {
background-color: #FFFF85;
}
a:hover {
background-color: #FF704D;
}
a:active {
background-color: #FF704D;
}
</style>
</head>
<body>
<p><b><a
href="default.html" target="_blank">This is a
link</a></b></p>
<p><b>Note:</b>
a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective.</p>
<p><b>Note:</b>
a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>
·
Output:
3.
CSS Lists
Different List Item
Markers
·
Penjelasan:
Memberikan
list tyle type pada setiap order.
·
Script:
<!DOCTYPE
html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Example
of unordered lists:</p>
<ul
class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul
class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example
of ordered lists:</p>
<ol
class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol
class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
·
Output:
An Image as The List Item
Marker
·
Penjelasan:
Di
gunakan untuk memasang gambar pada list style.
·
Script:
<style>
ul {
list-style-image: url('t.jpg');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
·
Output:
Crossbrowser Solution
·
Penjelasan:
Di
gunakan untuk memberi background image pada list style.
·
Script:
<style>
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
background-image: url(p.jpg);
background-repeat: no-repeat;
background-position: 0px center;
padding-left: 15px;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
·
Output:
List-Shorthand Property
·
Penjelasan:
Di
gunakan untuk memasang image pada list style dengan square inside.
·
Script:
<style>
ul {
list-style: square inside url("t.jpg");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
·
Output:
4.
CSS Tables
Table Borders
·
Penjelasan:
Di
gunakan untuk membuat suatu table.
·
Script:
<!DOCTYPE
html>
<html>
<head>
<style>
table, th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
·
Output:
Collapse Borders
·
Penjelasan:
Di
gunakan untuk mengubah jenis border pada table.
·
Script:
<style>
table {
border-collapse: collapse;
}
table, td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<p><b>Note:</b>
If a !DOCTYPE is not specified, the border-collapse property can produce
unexpected results
in IE8 and
earlier versions.</p>
·
Output:
Table Width and Height
·
Penjelasan:
Di
gunakan untuk menentukan panjang lebar table.
·
Script:
<style>
table, td,
th {
border: 1px solid green;
}
table {
width: 100%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
·
Output:
Horizontal Text Alignment
·
Penjelasan:
Di
gunakan untuk membuat table dengan bentuk horizontal.
·
Script:
<style>
table, td,
th {
border: 1px solid black;
}
table {
width: 100%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
·
Output:
Vertikal Text Alignment
·
Penjelasan:
Di
gunakan untuk membuat table dengan bentuk verrtikal.
·
Script:
<style>
table, td,
th {
border: 1px solid black;
}
td {
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
·
Output:
Table Color
·
Penjelasan:
DI
gunakan untuk memberi warna pada table.
·
Script:
<style>
table, td,
th {
border: 1px solid blue;
}
th {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
·
Output:
Subscribe to:
Posts (Atom)
Cara Membersihkan Cache Smartphone
Assalamu’alaikum Wr. Wb. Gimana kabarnya kawan? Semoga baik selalu. Sebenarnya bingung sih mau nulis materi apa, eh tiba2 kepikiran cache. ...
