Selamat Datang di Blog AGUNG PANJI SASMITO

Sabtu, 26 Februari 2011

Belajar Web Programming : Tugas Praktikum Modul 4 - Desain Web CSS

Selamat malam teman-teman =)
Nah, kali ini sudah sampai ke modul 4, di mana kita dituntut mampu membuat sebuah halaman web dengan menggunakan CSS.
Nah, mau tahu bagaimana caranya?

body {
margin: 10px auto;
width: 850px;
}

header,nav,section,footer {
display:block;
}

button input{
height:30px;
width:50px;
border: 1px solid black;
}

menukanan :hover{
color : blue;
background-color : white;
text-align : center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

header{
background-image: url(desa.png);
height:250px;
}

nav{
background-image : url(menubarcolor.jpg);
height: 32px;
padding-top: 10px;
padding-left: 10px;
border: 1px solid blue;
font-family: Arial;
font-size: 15px;
color: white;
}

menukiri {
float: left;
margin-left: 2px;
}

menukanan{
float: right;
margin-right: 15px;
}

section{
float:left;
background-image : url(peta.jpg);
height:380px;
width: 240px;
border: 1px solid red;
}

article, aside{
padding-left: 10px;
font-family: Arial;
font-size: 15px;
color: blue;
border: 1px dashed blue;
}

article{
background-image : url(artikelbgcolor.jpg);
float:right;
width:595px;
height:250px;
line-height: 20px;
}

aside{
background-image : url(asidebgcolor.jpg);
float:right;
width:595px;
height:129px;
}

footer{
background-image : url(footercolor.jpg);
clear:both;
padding:12px;
border: 1px solid blue;
height: 26px;
font-family: Arial Rounded mt bold;
font-size: 15px;
color: white;
line-height: 20px;
}


Untuk sintaks HTMLnya
<!DOCTYPE HTML>
<html lang="en">

<head>
<title>Selamat Datang di Situs Desa Pesanggrahan</title>
<link rel="stylesheet" href="Mod4TgsPrak.css" type="text/css" />
<link rel="icon" type="image/x-icon" href="batu.jpg">
</head>

<body>

<header>

</header>

<nav>
<menukiri>
Cari di Situs Ini <input type="text">
</menukiri>
<menukanan>
<button>
Beranda
</button>
<button>
Tentang Kami
</button>
<button>
Layanan
</button>
<button>
Hubungi Kami
</button>
</menukanan>
</nav>

<section>
</section>
<article>
<strong>Pesanggrahan</strong>, pada zaman dahulu adalah sebuah tempat dimana para Petinggi Kerajaan beristirahat.
Konon para Raja, Ratu, Adipati dan Punggawa Kerajaan antara lain Raja Mataram bersama para Istri selirnya sering mandi di sumber mata air panas Songgoriti dan beristirahat atau “Mesanggrah” (bersinggah) di tempat yang sekarang ini orang menyebut <strong>Desa Pesanggrahan</strong>. <br />
Desa Pesanggrahan berlokasi tepat pada lereng gunung Panderman persis berada pada lereng sebelah utara gunung panderman.
Wilayah Pesanggrahan yang karena letaknya di bawah lereng Gunung Panderman, panoramanya yang indah serta hawanya yang sangat sejuk menjadi daya tarik tersendiri bagi orang dari luar untuk beristirahat di tempat ini, disamping itu tempat ini sudah menjadi salah satu tempat di mana banyak Petinggi Kerajaan beristirahat pada zaman itu, maka pada akhirnya wilayah ini dinamakan Desa Pesanggrahan.
</article>
<aside>
<br/><strong>Berita terkait:</strong>
<ul>
<li><a href="coba.html">Sejarah Desa Pesanggrahan</a><br/></li>
<li><a href="coba.html">Struktur Desa Pesanggrahan</a><br/></li>
<li><a href="coba.html">Data Penduduk</a><br/></li>
<li><a href="coba.html">Organisasi Desa</a><br/></li>
</ul>
</aside>



<footer>
<marquee direction="alternate">©2011 by Agung Panji Sasmito - Tugas Praktikum Modul 4 - Dedicated for My Homeland</marquee>
</footer>

</body>
</html>
;

Screenshoot
Untuk demo bisa klik di sini.

Belajar Web Programming : Studi Kasus Modul 4 - Desain Web CSS

Selamat malam =)
Sekarang kita akan mencoba membuat tempate sebuah halaman web

CSSnya adalah sebagai berikut.

body {
margin: 10px auto;
width: 750px;
}

header,nav,section,footer {
display:block;
padding: 10px;
}

button input{
height:15px;
width:50px;
border: 1px solid black;
}

right{
float: right;
}

header{
height:40px;
border: 1px solid green;
}

nav{
height:40px;
border: 1px solid blue;
}

section{
clear: both;
height:400px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border: 1px solid red;
}

article{
float:left;
width:500px;
height:380px;
border: 1px dashed red;
}

aside{
float:right;
width:210px;
height:380px;
border: 1px dashed blue;
}
footer{
clear:both;
height:10px;
border: 1px solid green;
}



Sementara itu untuk file HTMLnya
<!DOCTYPE HTML>
<html lang="en">

<head>
<title>Desain Layout Sederhana HTML5</title>
<link rel="stylesheet" href="StudiKasus.css" type="text/css" />
</head>

<body>

<header>
header
</header>

<nav>
nav
<right>
<button>
Home
</button>
<button>
Menu
</button>
</right>
</nav>

<section>
<article>
article
</section>
<aside>
aside
</aside>
section
</section>

<footer>
footer
</footer>

</body>
</html>


Screenshoot


Untuk tampilan demo-nya bisa dilihat di sini.

Minggu, 20 Februari 2011

Belajar Web Programming : Tugas Praktikum Modul 3 - CSS

Selamat malam teman-teman =)
Kali ini ayo kita bikin homepage sebuah situs jejaring sosial dengan menggunakan CSS =)
Mau tahu caranya?
Ayo kita pelajari listingnya =)

<!DOCTYPE html>
<html lang="en">
<head>
<title>BONGbook : Facebook untuk Kecebong - Tugas Praktikum 3 - Modul 3 - ajungpangi</title>
<!-- Agung Panji Sasmito - 109533423242 - S1 PTI 2009 / Off-B -->
<style type="text/css">

.header, .footer{
background-color : rgb(34, 204, 4);
}

.header{
height : 70px;
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
}

#lebar{
width : 1000px;
}

.footer{
padding-top : 5px;
padding-bottom : 5px;
padding-right : 200px;
padding-left : 30px;
color : white;
font-family : Arial;
font-size : small;
font-weight : bold;
}

.bg-color{
height : 450px;
background-image : url(bg.jpg);
background-color : black;
background-repeat : repeat-x;
}

.login{
float : right;
color : white;
font-family : arial;
font-size : small;
}

#logo{
margin-top : 20px;
float : left;
height : 35px;
}

#kanan{
float: left;
padding: 5px;
width:370px;
height: 380px;
}

#tengah {
float: left;
}

#kiri {
float: left;
width: 780px;
height: 380px;
}

#gambar{
padding-top : 10px;
padding-bottom : 10px;
padding-left : 150px;
width: 400px;
height: 200px;
font-family : Arial;
font-size : small;
font-weight : bold;
color: green;
}

#huruf{
font-family : Arial;
font-size : small;
font-weight : bold;
line-height : 30px;
color: green;
}

#button_masuk{
background-color : green;
color : white;
}

#button_daftar{
background-color : green;
color : white;
}

</style>
<link type="image/x-icon" rel="icon" href="icon.jpg">
</head>
<body>
<div class="header">
<div id="lebar">
<div id="logo">
<img src="logo.png">
</div>
<div class="login">
<table>
<tr>
<td>Email</td>
<td>Password</td>
<td> </td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="password"></td>
<td><input type="submit" value="Masuk" id="button_masuk"></td>
</tr>
<tr>
<td height="25"><input type="checkbox" checked>Ingat saya</td>
<td height="25">Lupa kata sandi?</td>
<td height="25"> </td>
</tr>
</table>
</div>
</div>
</div>
<div class="bg-color">

<form action="my_action.jsp">
<div id="tengah">
<div id="kiri">
<div id="gambar">
<font size="5">BONGbook menghubungkan Facebook untuk KeceBONG </font>
<img src="foto.png">
</div>
</div>
</div>
</form>
<div id="kanan">
<div id="huruf">
<h2>Registrasi GRATIS selamanya. </h2>
<hr style="color: green">
<form action="my_action.jsp">
<table>
<tr>
<td>Nama Depan :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Nama Belakang :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Email Anda :</td>
<td><input type="text" size="35"></td>
</tr>
<tr>
<td>Kata Sandi Baru:</td>
<td><input type="password" size="35"></td>
</tr>
<tr>
<td>Ulangi Kata Sandi:</td>
<td><input type="password" size="35"></td>
</tr>
<tr>
<td>Jenis Kelamin :</td>
<td><select name="kelamin">
<option value="pria" selected>Laki-laki
<option value="wanita">Perempuan
</select></td>
</tr>
</table>
</form>
<input type="submit" value="Daftarkan Sekarang" id="button_daftar">
</div>
</div>
</div>
<div class="footer">
Powered by Agung Panji Sasmito - S1 PTI 2009 / Off - B - Inspired by kece-BONG
</div>
</body>
</html>


Untuk Screenshootnya sebagai berikut


Belajar Web Programming : Studi Kasus Modul 3 - CSS

Selamat malam teman-teman =) Nah, pertemuan kali ini saya dituntut untuk menguasai CSS. Nah-nah, mau tahu caranya membuat border yang lucu-lucu dengan CSS? Silakan dipelajari sintaksnya =)

<!DOCTYPE html>
<html lang="en">
<!-- Agung Panji Sasmito - 109533423242 - S1 PTI 2009 / Off-B -->
<head>
<title>Studi Kasus Modul 3 - CSS</title>
<style type="text/css">

<!--
.bulat{
background-color:#ff99ff;
-moz-border-radius: 180px;
-webkit-border-radius: 2px;
border : 2px solid #660099;
padding : 30px;
width : 120px;
height : 120px;
font-family : arial;
font-size : medium;
color : red;
}
-->

<!--
.kotak_rounded{
background-color:#0000cc;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-radius: 10px;
border : 4px solid #33ffcc;
padding : 10px;
width : 250px;
height : 100px;
font-family : arial;
font-size : medium;
color : white;
}
-->

<!--
.berbayang{
background-color:#00ff66;
-moz-border-radius-topleft: 0px;
-moz-box-shadow: 10px 7px 5px #99ff66;
-webkit-border-radius: 10px;
border : 1px solid #009900;
padding : 10px;
width : 250px;
height : 50px;
font-family : arial;
font-size : big;
color : #003333;
}
-->
</style>
</head>

<body>
<div class="bulat" align="center">
Kalau ingat<br/>
yang BUNDER?<br/><br/>
...yaa INTAN...<br/>
...yaa DIAN...<br/>
...yaa VE...<br>
</div>
<br />

<div class="kotak_rounded">
Kalo yang ganteng-ganteng?<br/><br/>
...yaa AGUNG...<br/>
...yaa ALIF...<br/>
...yaa RASTRA...<br/>
</div>

<br />

<div class="berbayang">
jadi terbayang-bayang...<br/>
kece-BONG
</div>

</body>

</html>

Ini hasil screenshotnya

Minggu, 13 Februari 2011

Belajar Web Programming : Tugas Praktikum 2 Modul 2 - Komponen HTML Lanjut

Selamat sore teman-teman =)

Puji syukur kepada Tuhan akhirnya tugas tinggal Tugas Praktikum yang kedua yang belum saya share di sini T_T. Namun, walaupun lelah, tidak ada kata menyerah bukan?

Kali ini kita diminta untuk menggunakan fitur grouping dalam bentuk tabel dan adanya border tabel yang dihilangkan di sisi kiri dan kanan. Mau tahu rahasianya? Ayoo, cermati sintaks berikut =)

<!DOCTYPE HTML>
<html lang = "en">
<title>Tabel Pengelompokan - Tugas Praktikum 2 Modul 2 - ajungpangi</title>
<body>
<center>

<table border ='1'cellspacing='0'frame=hsides rules='groups'summary='Grouping Table'>
<caption><font face="Copperplate Gothic Bold"size='6'color='blue'>Perbandingan Layanan WindowsVISTA</font><br/><br/></caption>

<colgroup align='center'>
<colgroup align='center'>
<colgroup align='center' span='2'>
<colgroup align='center'>
<colgroup align='center'>
<thead valign='middle'>

<tr>
<th width='25'bgcolor='black'><font color='white'face='Palatino Linotype' size='3'>No</font></th>
<th width='250'bgcolor='black'><font color='white'face='Palatino Linotype' size='3'>Fitur</font></th>
<th width='150'bgcolor='black'><font color='white'face='Palatino Linotype' size='3'>Home Basic</font></th>
<th width='150'bgcolor='black'><font color='white'face='Palatino Linotype' size='3'>Home Premium</font></th>
<th width='150'bgcolor='black'><font color='white'face='Palatino Linotype' size='3'>Business</font></th>
<th width='150'bgcolor='black'><font color='white'face='Palatino Linotype' size='3'>Ultimate</font></th>
</tr>

<tbody>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>1.</font></td>
<td><font face='Palatino Linotype' size='3'>Sekuritas Tinggi</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>2.</font></td>
<td><font face='Palatino Linotype' size='3'>Pencarian Cepat</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>3.</font></td>
<td><font face='Palatino Linotype' size='3'>Fitur Back-Up</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>4.</font></td>
<td><font face='Palatino Linotype' size='3'>Konektivitas Bisnis</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>

<tbody>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>5.</font></td>
<td><font face='Palatino Linotype' size='3'>Support Mobile PC dan Tablet</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>6.</font></td>
<td><font face='Palatino Linotype' size='3'>Support XBOX 360</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>

<tbody>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>7.</font></td>
<td><font face='Palatino Linotype' size='3'>Windows Aero</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>8.</font></td>
<td><font face='Palatino Linotype' size='3'>Windows Media Center</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>9.</font></td>
<td><font face='Palatino Linotype' size='3'>Windows Teamwork</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>
<tr>
<td align='right'><font face='Palatino Linotype' size='3'>10.</font></td>
<td><font face='Palatino Linotype' size='3'>Windows BitLocker</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Tidak</font></td>
<td align='center'><font face='Palatino Linotype' size='3'>Ya</font></td>
</tr>
<tbody>
<tr>
<td align='center'colspan='2'bgcolor='black'><font color='white'face='Palatino Linotype' size='3'>Kesimpulan</font></td>
<td align='center'bgcolor='gray'><font face='Palatino Linotype' size='3'><strong>Dasar</strong></font></td>
<td align='center'bgcolor='gray'><font face='Palatino Linotype' size='3'><strong>Pendidikan</strong></font></td>
<td align='center'bgcolor='gray'><font face='Palatino Linotype' size='3'><strong>Kalangan Bisnis</strong></font></td>
<td align='center'bgcolor='gray'><font face='Palatino Linotype' size='3'><strong>Programmer-Grafis</strong></font></td>
</tr>
</table>

<table>
<tr>
<td width='875'>Sumber : <a href='www.windowsvista.com'title='WebSite WindowsVISTA'>WebSite Windows VISTA</a></td>
</tr>
<tr>
<td><i>Diposkan di Batu, 13 Februari 2011 oleh <a href="http://twitter.com/ajungpangi"title="Agung Panji Sasmito"><b>ajungpangi</b></a>.</i></td>
</tr>
</table>
</center>
</html>


Screenshoot :


Mau tahu webpage ini secara langsung?
Klik saja ajungpangi.110mb.com =)

Belajar Web Programming : Tugas Praktikum 1 Modul 2 - Komponen HTML Lanjut

Selamat siang =)
Setelah mengerjakan studi kasus, langkah selanjutnya adalah mengerjakan tugas praktikum. Nah, kali ini di modul 2 kita dituntut untuk bisa menggunakan tabel. Sekarang saatnya kita membuat diagram batang statis dengan menggunakan tabel.

Mau tahu caranya? Algoritmanya cukup sederhana. Baris-baris yang ingin kita buat diagram cukup kita span kemudian kita beri background colour. Sekarang akan saya tunjukkan cara membuat diagram dengan menggunakan tabel.

Sintaks:


<!DOCTYPE HTML>
<html lang = "en">
<title>Grafik - Tugas Praktikum 1 Modul 2 - ajungpangi</title>
<body>
<center>
<font face="Copperplate Gothic Bold"size='5'color='blue'>Layanan Internet Broadband <br/>yang Digunakan oleh Mahasiswa PTI</font>
<br/><br/>
<table border = '0' cellspacing='0'>
<tr>
<td height='20'width='10'><div align='right'><font face='Arial'>100 </font></div></td>
<td rowspan='13'height='20'width='2' bgcolor='black'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>

<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='10'height='20'width='20'bgcolor='blue'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td rowspan='9'height='20'width='20'bgcolor='red'></td>
<td rowspan='9'height='20'width='20'bgcolor='green'></td>
<td height='20'width='20'></td>
<td rowspan='9'height='20'width='20'bgcolor='aqua'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td rowspan='8'height='20'width='20'bgcolor='yellow'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'><div align='right'><font face='Arial'>50 </font></div></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='5'height='20'width='20'bgcolor='red'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='5'height='20'width='20'bgcolor='aqua'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='5'height='20'width='20'bgcolor='blue'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='5'height='20'width='20'bgcolor='aqua'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='4'height='20'width='20'bgcolor='blue'></td>
<td height='20'width='20'></td>
<td rowspan='4'height='20'width='20'bgcolor='yellow'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='4'height='20'width='20'bgcolor='green'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='4'height='20'width='20'bgcolor='green'></td>
<td rowspan='4'height='20'width='20'bgcolor='yellow'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='3'height='20'width='20'bgcolor='green'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='3'height='20'width='20'bgcolor='yellow'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='3'height='20'width='20'bgcolor='red'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='2'height='20'width='20'bgcolor='red'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td rowspan='2'height='20'width='20'bgcolor='blue'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
<td height='20'width='20'bgcolor='aqua'></td>
<td height='20'width='20'></td>
<td height='20'width='20'></td>
</tr>
<tr>
<td rowspan='2'height='2'width='10'><div align='right'><font face='Arial'>0 </font></div></td>
<td colspan='26'height='2'bgcolor='black'></td>
</tr>
<tr>
<td colspan='26'height='10'></td>
</tr>
<tr>
<td height='20'width='10'></td>
<td height='20'width='2'></td>
<td height='20'width='20'></td>
<td colspan='5'height='20'width='20'><center><font face='Arial 'color='purple'><b>PTI 2007</b></font></center></td>
<td height='20'width='20'></td>
<td colspan='5'height='20'width='20'><center><font face='Arial 'color='purple'><b>PTI 2008</b></font></center></td>
<td height='20'width='20'></td>
<td colspan='5'height='20'width='20'><center><font face='Arial 'color='purple'><b>PTI 2009</b></font></center></td>
<td height='20'width='20'></td>
<td colspan='5'height='20'width='20'><center><font face='Arial 'color='purple'><b>PTI 2010</b></font></center></td>
<td height='20'width='20'></td>
</tr>
</table>
</center>
<br/>
<div align = 'center'>
<table border = '0' cellspacing='0'>
<tr>
<td colspan='3'width='50'height='20'><font face='Arial'><i><b>Keterangan</b></i></font></td>
</tr>
<tr>
<td width='50'height='20'bgcolor='red'></td>
<td align='center'width='10'height='20'>:</td>
<td width='470'height='20'><font face='Arial 'color='purple'><b>Telkomsel Flash (PT. Telekomunikasi Seluler)</b></font></td>
</tr>
<tr>
<td width='50'height='20'bgcolor='blue'></td>
<td align='center'width='10'height='20'>:</td>
<td width='470'height='20'><font face='Arial 'color='purple'><b>Mobi - Smart EvDO (PT. Smartfren Sinarmas)</b></font></td>
</tr>
<tr>
<td width='50'height='20'bgcolor='green'></td>
<td align='center'width='10'height='20'>:</td>
<td width='470'height='20'><font face='Arial 'color='purple'><b>Wimode - Aha (Bakrie Connectifity)</b></font></td>
</tr>
<tr>
<td width='50'height='20'bgcolor='yellow'></td>
<td align='center'width='10'height='20'>:</td>
<td width='470'height='20'><font face='Arial 'color='purple'><b>Lintasarta (Indosat Broadband)</b></font></td>
</tr>
<tr>
<td width='50'height='20'bgcolor='aqua'></td>
<td align='center'width='10'height='20'>:</td>
<td width='470'height='20'><font face='Arial 'color='purple'><b>Other Wireless</b></font></td>
</tr>
</table>
</div>
</body>
</html>


Sintaks yang cukup panjang dan membuat pusing -_-
Kira-kira seperti apa yaa jadinya?

Hasil Screenshoot:


Mau lebih dekat dengan webpage ini?
Kunjungi ajungpangi.110mb.com =)

Belajar Web Programming : Studi Kasus Modul 2 - Komponen HTML Lanjut

Hai semua =) Sekarang dengan bahasan yang baru, yaitu komponen HTML tingkat lanjut diantaranya adalah tabel dan kawan-kawannya. Adapun saya mendapatkan tugas studi kasus berupa penggunaan tabel dan hiperlink dalam pembuatan tabel berkorespondensi. Mau tahu?

Screenshoot 1:

Sintaks:
<!DOCTYPE HTML>
<html lang = "en">
<title>Download Dataku - Studi Kasus Modul 2 - ajungpangi</title>
<body>
<br/>
<center>
<font face = "copperplate gothic bold" size = 6 color = "blue">AJUNGPANGI's Data Store!</font>
</center>
<br/>

<table align = "center" border = 0>
<tr>
<th width = "200" height = "40" bgcolor = "#99ffff"><font face = "copperplate gothic bold" size = 5><a href=film.html>Film</a></font></th>
<th width = "10" height = "40"></th>
<th width = "200" height = "40" bgcolor = "#6633ff"><font face = "copperplate gothic bold" size = 5><a href=dokumen.html>Dokumen</a></font></th>
<th width = "10" height = "40"></th>
<th width = "200" height = "40" bgcolor = "#6633ff"><font face = "copperplate gothic bold" size = 5><a href=musik.html>Musik</a></font></th>
</tr>

<tr>
<td colspan=5 bgcolor = "#99ffff">
<ol>
<li><a href = "http://www37.indowebster.com/a9237ff0315fb6e61d5cd995525cc7f3.avi"title="Doraemon"><font face = "arial" size = 4>Doraemon</font></a></li>
<li><a href = "http://www5.indowebster.com/a1d5335318135a0fa1c31aa738405dbd.avi"title="Detective Conan"><font face = "arial" size = 4>Detective Conan</font></a></li>
<li><a href = "http://www28.indowebster.com/c2cf8875651499341a9cd4b57d331968.avi"title='SpongeBob'><font face = "arial" size = 4>Spongebob</font></a></li>
</ol>
</td>
</table>

</body>
</html>


Screenshoot 2:

Sintaks:
<!DOCTYPE HTML>
<html lang = "en">
<title>Download Dataku - Studi Kasus Modul 2 - ajungpangi</title>
<body>
<br/>
<center>
<font face = "copperplate gothic bold" size = 6 color = "blue">AJUNGPANGI's Data Store!</font>
</center>
<br/>

<table align = "center" border = 0>
<tr>
<th width = "200" height = "40" bgcolor = "#6633ff"><font face = "copperplate gothic bold" size = 5><a href=film.html>Film</a></font></th>
<th width = "10" height = "40"></th>
<th width = "200" height = "40" bgcolor = "#99ffff"><font face = "copperplate gothic bold" size = 5><a href=dokumen.html>Dokumen</a></font></th>
<th width = "10" height = "40"></th>
<th width = "200" height = "40" bgcolor = "#6633ff"><font face = "copperplate gothic bold" size = 5><a href=musik.html>Musik</a></font></th>
</tr>

<tr>
<td colspan=5 bgcolor = "#99ffff">
<ol>
<li><a href = "pi-2011.zip"title="Praktik Industri"><font face = "arial" size = 4>Praktik Industri</font></a></li>
<li><a href = "big.doc"title='Try Out BIG'><font face = "arial" size = 4>Try Out Bahasa Inggris</font></a></li>
<li><a href = "mat.doc"title='Try Out MAT'><font face = "arial" size = 4>Try Out Matematika</font></a></li>
</ol>
</td>
</table>

</body>
</html>

Screenshot 3:

Sintaks:
<!DOCTYPE HTML>
<html lang = "en">
<title>Download Dataku - Studi Kasus Modul 2 - ajungpangi</title>
<body>
<br/>
<center>
<font face = "copperplate gothic bold" size = 6 color = "blue">AJUNGPANGI's Data Store!</font>
</center>
<br/>

<table align = "center" border = 0>
<tr>
<th width = "200" height = "40" bgcolor = "#6633ff"><font face = "copperplate gothic bold" size = 5><a href=film.html>Film</a></font></th>
<th width = "10" height = "40"></th>
<th width = "200" height = "40" bgcolor = "#6633ff"><font face = "copperplate gothic bold" size = 5><a href=dokumen.html>Dokumen</a></font></th>
<th width = "10" height = "40"></th>
<th width = "200" height = "40" bgcolor = "#99ffff"><font face = "copperplate gothic bold" size = 5><a href=musik.html>Musik</a></font></th>
</tr>

<tr>
<td colspan=5 bgcolor = "#99ffff">
<ol>
<li><a href = "http://dc102.4shared.com/download/33043371/33a88e2d/file.mp3?tsid=20110126-054743-7817d87c"title="Hari Ini Esok dan Seterusnya - Nirina"><font face = "arial" size = 4>Hari Ini Esok dan Seterusnya - Nirina</font></a></li>
<li><a href = "http://dc93.4shared.com/download/4GeU3cIS/Maia_Ft1Pasto-Yang_Penting_Hap.mp3?tsid=20110126-082149-146172d8"title='Yang Penting Hepi'><font face = "arial" size = 4>Yang Penting Hepi</font></a></li>
<li><a href = "http://dc143.4shared.com/download/5z4D-MnU/Rod_Stewart_-_You_Are_Everythi.mp3?tsid=20110203-093850-6a4da2ad"title='Youre My Everything'><font face = "arial" size = 4>You're My Everything</font></a></li>
</ol>
</td>
</table>

</body>
</html>

Mau tahu akan menjadi seperti apa jadinya?
Silakan cek di ajungpangi.110mb.com.

Belajar Web Programming : Studi Kasus Modul 1 - Dasar dan Elemen Dasar HTML

Nah, jumpa lagi dengan saya kembali di sini =)
Sekarang mari kita pelajari dasar-dasar HTML seperti garis, gambar, dan elemen-elemen dasar.

Sintaks


<!DOCTYPE HTML>
<html lang = "en">
<link rel="shortcut icon" href="ajunk1 twit.ico">
<head>
<title>
FRIENDSHIP - Halaman Web Sederhana, Studi Kasus Modul 1 PPBW- ajungpangi
</title>
</head>
<body>
<center>
<hr color = "blue">
<h1><font face="century gothic"size="7"color="blue">FRIENDSHIP</font></h1>
</head>
</center>
<hr color = "blue"><hr color = "blue">
<body background="friendship.jpg">
<font face = "monotype corsiva" color = "blue" size = "7">
<h1 align="center"><blink><b><i>for my best friend . . .</font></b></i></blink><br /></h1>
<p align = "left"><font face="arial"size="5"color="red">
kaulah yang menaruh bintang<br />
dalam mata, hati, dan genggamanku . . .</p></font><br /><br />
<font face="arial"size="5"color="red"><p align="right">
kau tak pernah meninggalkanku<br />
mungkin sesaat aku tak melihatmu di bawah matahari<br />
tapi ketika sampai pada malam<br />
kau selalu di sana menjelma pelita<br />
di lorong paling gelap dan berdebu . . .</p></font><br /><br />
<font face="kristen itc"color="blue"size="9"><marquee direction = "alternate"><b>SAHABAT. . .</b></marquee></font><br />
<font face="arial"size="5"color="red"><p align = "center">
<b>kaulah bintang sejati<br />
yang tertawa, menangis, berjalan,<br />
dan tak henti berkelip<br />
dalam langit hidupku . . .<br /></p></font></b>
<hr color = "red">
<hr color = "red" width="400" align = "right">
<hr color = "red" width="300" align = "right">
<hr color = "red" width="200" align = "right">
</font>
<img src="ajunk1.jpg" height="128" border="7" align="right"><br />
<p align = "right">
<font face = "arial narrow" size = "4" color = "red"><i><b>
Agung Panji Sasmito<br />
PTI 2009 Off - B<br />
109533423252</font></i></b>
</body>
</html>


Saat dieksekusi

File ini dapat juga dilihat selengkapnya di blog kedua saya ajungpangi.110mb.com

Belajar Web Programming : Langkah Awal

Nah nah nah....


Sebelum memulai ke pelajaran pertama, saya akan sharing pengalaman saya selama saya berada di kelas web. Pada mulanya kita akan diberikan beberapa pertanyaan untuk menguji seberapa besar "bekal" kita mengenai pemrograman web. Mau tahu pertanyaannya?

Pertanyaannya cukup simpel. Apa yang Anda ketahui mengenai internet, www, html, dan http?
Nah lho, walaupun pertanyaannya mudah, tetapi tetap saja saya kebingungan karena memang belum belajar di rumah. Walhasil saya mengarang indah namun untungnya jawabannya menyerempet dengan kebenarannya =D

Adapun internet adalah kumpulan jaringan dari jaringan komputer. Ibarat sebuah fungsi pemetaan, internet menghubungkan antara komputer yang satu dengan lainnya, sehingga komputer tidak hanya bertindak sebagai domain namun juga bisa sekaligus sebagai range dari jaringan tersebut.

Apa yang teman-teman ketahui mengenai www? betul-betul-betul, world wide web, sebuah kumpulan dari halaman web dari seluruh dunia. Mirip server-server dari halaman-halaman web se-dunia dikumpulin dalam satu jalur www. WWW ini sudah disepakati bersama looh, sehingga otomatis memang sebuah halaman web ada www-nya.

Siapa belum kenal html? HTML (HyperText Markup Language) adalah sebuah bahasa markah untuk standar coding bagi sebuah halaman web. Dalam perkembangannya, sekarang sudah dikenal HTML5 yang semakin canggih teman!

HTTP pada intinya adalah sebuah jalur untuk mengakses sebuah halaman web. Dengan kata lain, untuk mengakses sebuah situs kita perlu sebuah protokol (pintu) untuk memasukinya.

Nah, kali ini akan saya share juga mengenai persiapan untuk membuat halaman web. Ada baiknya kita mempunyai beragam web browser untuk memaksimalkan hasil karya web desain kita. Sebagai saran saja, teman-teman bisa menggunakan Firefox 3.6.13 atau Google Chrome yang sudah support HTML 5. Lantas, bagaimana kita tahu browser kita sudah support HTML 5?

Ada sebuah situs web pengecek HTML 5 di peramban kita. Coba memasuki www.html5test.com dan usahakan score browser kita lebih dari 120. Berikut adalah contoh dari hasil pemindaian html5test.

1. Mozilla Firefox 3.6.13

2. Google Chrome'

3. Opera 11

Selain itu, ada baiknya jika kita menggunakan browser firefox kita menambahkan addons HTML VALIDATOR untuk mengetahui halaman web kita error atau sudah baik. Mau validatornya? Silakan request via komentar di bawah ya!

Sampai jumpa di praktikum pertama!

TInggalkan Komentar