Untuk Seseorang Disana

Senin, Februari 28, 2011 | 0 Comments

Tak ada kata yang bisa mengungkapkan betapa aq kangen dan rindu kepadamu. Semua kenangan indah dulu tidak akan terulang lagi. Sekarang aq hanya disini sendiri menjalani hidup yang semakin lama semakin keras. Dulu kau selalu ada di sampingq, setiap saat dan setiap waktu. Aq kangen masa-masa itu.

Aq manja, aq nakal, aq sering membuatmu jengkel, tapi kau selalu menyayangiq dengan tulus. Apa yang aq minta, kau selalu berusaha untuk memenuhi keinginanq itu. Kadang, saat kau marah-marah aq ikut marah, bahkan aq pernah membentakmu. Maavkan aq. Aq lebih banyak membuatmu sedih daripada membuatmu bahagia.


Baca Selengkapnya...
Untuk membuat halaman web sederhana, kita dapat mengkombinasikan CSS dan HTML5. CSS ini digunakan untuk mengurangi penggunaan table pada suatu halaman web. Contoh halaman web sederhana dapat dilihat di bawah ini :


Untuk kode css-nya "teknikelektro.css" dapat dilihat dibawah ini :


Baca Selengkapnya...

Membuat Kerangka Web dengan CSS

Sabtu, Februari 26, 2011 | 4 Comments

Sebelum membuat halaman web, sebaiknya kita membuat kerangka dari halaman web tersebut. Ini akan memudahkan kita karena dengan adanya kerangka, kita tinggal mengisikan apa yang akan kita isikan pada kerangka-kerangkla web tersebut. Contoh kerangka suatu halaman web dapat dilihat di bawah ini :


Untuk kode css-nya "kerangka.css" dapat dilihat di bawah ini :

Baca Selengkapnya...

Rounded Border dengan CSS

Minggu, Februari 20, 2011 | 0 Comments

Untuk membuat bentuk-bentuk seperti lingkaran, segitiga, persegi panjang dan bentuk-bentuk yang lain pada CSS, kita dapat membuatnya dengan memainkan height dan width serta radius sesuai dengan bentuk yang kalian inginkan.

di bawah ini terdapat beberapa bentuk yang dibuat dengan CSS....


Lihat codenya di bawah ini...

<!DOCTYPE html>
<html lang="en">

<head>
<title>Demo Rounded Border</title>
<style type="text/css">
<!-- .round1 {
 background-color: #0573fb;
 -moz-border-radius: 250px;
 -webkit-border-radius: 50px;
 border: 2px solid black;
 padding: 50px;
 width: 100px;
 height: 100px
 font-family: courier;
 color: white;
 }
 .round2 {
 background-color: #ddccb5;
 -moz-border-radius-topleft: 20px;
 -moz-border-radius-bottomright: 20px;
 padding: 20px;
 width: 300px;
 height: 50px;
 border: 4px solid #897048;
 }
 .round3 {
 background-color: #3ef572;
 -moz-box-shadow: 10px 10px 5px #222;
 box-shadow: 10px 10px 5px #222;
 border: 2px solid #05912c;
 padding: 30px;
 width: 200px;
 height: 50px;
 }
 -->

</style>
</head>

<body>
<h1>Rounded Border</h1>
<div class="round1">
Ini lingkaran.. hehehehe... gampang lhoo biqin lingkaran
</div>
<br />

<div class="round2">
pembuatan rounded border menggunakan css3 memang sangat mudah. tidak perlu file gambar sama sekali, seperti pada css sebelumnya
</div>
<br />

<div class="round3">
biqin shadooow.... baguuus.. hho.. gampang juga lhooo...
</div>

</body>
</html>

selamat mencobaaaa!!!!
Baca Selengkapnya...

Tampilan Face-mu

Minggu, Februari 20, 2011 | 2 Comments

Kali ini, aq mencoba membuat tampilan web "face-mu" dimana tampilannya seperti tampilan awal facebook. Disini aq menggunakan CSS dalam pembuatan face-mu ini. Meskipun tidak mirip dengan facebook yang asli, bisa dikatakan lumayan untuk tingkat pemula seperti aq..hhe..

Inilah tampilan web face-mu buatanq..hhe


Untuk melihat code .html tampilan face-mu ini, dapat dilihat dibawah ini:
<!DOCTYPE html>
<html lang="en">

<head>
<link rel="shortcut icon" href="icon.png" />
<title>Face-mu</title>
<link rel="stylesheet" href="facemu.css" type="text/css" />


</style>
</head>

<body>

<div class="header">

<div class="logo"><img src="facemu.png"></div>

<div class="kotak">
<br />

<input type="button" value="Masuk" id="button_masuk">
<br />
</div>

<div class="kotak">
Password :
<br />
<input type="text" size=20>
<br />
Lupa kata sandi Anda?
</div>

<div class="kotak">
Email :
<br />
<input type="text" size=30>
<br />
<input type="checkbox">Biarkan saya tetap masuk
</div>

</div>

<div class="isi">
<div class="isi_kiri">
<br />
<br />
<br />
Face-mu membantu Anda terhubung dan berbagi<br />
dengan orang-orang dalam kehidupan Anda di<br />
Indonesia.
<br />
<br />
<br />
<img src="indonesia.png" width=400>
</div>
<div class="isi_kanan">
<br />
<font size=5><b>Mendaftar</b></font><br />
Gratis, sampai kapanpun
<hr color="#4283d4" width=400 align="left"/>

<table cellpadding=5>
<tr>
<td>Nama Depan</td>
<td> : <input type="text" size=25 /></td>
</tr>

<tr>
<td>Nama Belakang</td>
<td> : <input type="text" size=25 /></td>
</tr>

<tr>
<td>Email Anda</td>
<td> : <input type="text" size=25 /></td>
</tr>

<tr>
<td>Masukkan Ulang Email</td>
<td> : <input type="text" size=25 /></td>
</tr>

<tr>
<td>Kata Sandi Baru</td>
<td> : <input type="text" size=25 /></td>
</tr>

<tr>
<td>Saya Seorang</td>
<td> : <select name="kelamin">
<option>Wanita</option>
<option>Pria</option>
</select></td>
</tr>

<tr>
<td>Tanggal Lahir</td>
<td> : <select name="tanggal">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>

<select name="bulan">
<option>Januari</option>
<option>Februari</option>
<option>Maret</option>
<option>April</option>
<option>Mei</option>
<option>Juni</option>
<option>Juli</option>
<option>Agustus</option>
<option>September</option>
<option>Oktober</option>
<option>November</option>
<option>Desember</option>
</select>

<select name="tahun">
<option>1980</option>
<option>1981</option>
<option>1982</option>
<option>1983</option>
<option>1984</option>
<option>1985</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
</select>

</td>
</tr>

<tr>
<td></td>
<td><font size=1>Mengapa saya perlu mengisinya?</font></td>
</tr>
</table>

<center><input type="button" value="Mendaftar" id="button_masuk"></center>
<hr color=#4283d4 width=400 align="left"/>
<font size=1>Buat halaman <font color="black">untuk selebritis, grup musik, atau bisnis</font></font>
</div>
</div>

<div class="footer" align="center">
Face-mu &copy; 2011 Alivi Nur Rosida
</div>

</body>
</html>

Untuk melihat code .css lihat dibawah ini :

<!--.header {
float: left;
background-color: #4283d4;
height: 60px;
margin: 0px auto;
width: 1230px;
padding: 10px;
}
.logo {
float: left;
height: 50px;
margin:20px 10px 10px 200px;
}
.kotak {
float: right;
height: 100px;
padding: 5px;
font-family: arial;
font-size: 10px;
color: white;
}
#button_masuk{
background-color: #4283d4;
color: white;
}
#button_mendaftar{
background-color: #4283d4;
color: white;
}
.isi {
float: left;
height: 470px;
background-image: url(bg.jpg);
padding: 0px;
}
.isi_kiri {
float: left;
width: 500px;
font-size: 18px;
font-family: arial;
color: #4283d4;
font-weight: bold;
margin:0px 10px 10px 200px;
}
.isi_kanan {
float: right;
width: 507px;
font-family: arial;
color: #4283d4;
margin:0px 0px 10px 30px;
}
.footer {
clear: both;
width: 1247px;
height: 20px;
background-color: #4283d4;
font-family: arial;
font-size: 12px;
font-weight: bold;
color: white;
}
-->


Baca Selengkapnya...
Dengan menggunakan elemen table dan hyperlink, kita sudah bisa membuat suatu tampilan web yang sederhana tapi bagus. Pada halaman web ini, digunakan 3 buah halaman web yang nantinya saling dikaitkan satu sama lain. Di dalam halaman web tersebut juga terdapat informasi yang juga memiliki link dengan website lain.

Silahkan lihat kodenya untuk halaman "Dokumen" dibawah ini :


<!DOCTYPE HTML>
<html lang="en">
<head>
<LINK REL="SHORTCUT ICON" HREF="Dossier.png" />
<title>Dokumen</title>
</head>
<body bgcolor="#b2b3b9">
<br />
<hr size=5 color="#505152" />
<h1 align="center"><font face="courier new" color="#505152">WELCOME TO MY PAGE</font></h1>
<hr size=5 color="#505152" />
<br />
<br />
<table align="center" cellspacing=0>

<!--Baris 1 -->
<tr align="center">
<td height=40 width=20 rowspan=3 bgcolor="black"></td>
<td width=20></td>
<td width=200 bgcolor="#666769"><a href="studi_kasus.html"><font color="white"><b>Dokumen</b></font></a></td>
<td width=20></td>
<td width=200 bgcolor="black"><a href="video.html"><font color="white"><b>Video</b></a></font></td>
<td width=20></td>
<td width=200 bgcolor="black"><a href="musik.html"><font color="white"><b>Musik</b></font></a></td>
<td width=20></td>
<td width=20 rowspan=3 bgcolor="black"></td>
</tr>

<!--Baris 2 -->
<tr>
<td height=150 width=20 colspan=7 bgcolor="#666769">
<ol>
<a href="http://www.4shared.com/document/RNUdOuVc/modul_01_pti438_java.html"><font color="white"><li>Modul 1 Praktikum Praktikum Berorientasi Objek</li></font></a>
<a href="http://www.4shared.com/document/OfRD9Y1N/MODUL_PRAKTIKUM_II.html"><font color="white"><li>Modul 2 Praktikum Praktikum Berorientasi Objek</li></font></a>
<a href="http://www.4shared.com/document/pgK3grmk/MODUL_PRAKTIKUM_III.html"><font color="white"><li>Modul 3 Praktikum Praktikum Berorientasi Objek</li></font></a>
<a href="http://www.4shared.com/document/mF_hnxWR/Modul_4_PBO.html"><font color="white"><li>Modul 4 Praktikum Praktikum Berorientasi Objek</li></font></a>
<a href="http://www.4shared.com/document/K2M62ang/praktikum_5.html"><font color="white"><li>Modul 5 Praktikum Praktikum Berorientasi Objek</li></font></a>
</ol>
</b></td>
</tr>

<!-- Baris 3 -->
<tr align="center">
<td height=35 colspan=9 bgcolor="black"><font color="white">&copy; Alivi Nur Rosida</font></td>
</tr>
</table>
</body>
</html>

untuk kode di atas, gambar hasilnya dapat dilihat dibawah ini :


Untuk kode dari halaman "Video" dapat dilihat di bawah ini :

<!DOCTYPE HTML>
<html lang="en">
<head>
<LINK REL="SHORTCUT ICON" HREF="dossier-video.png" />
<title>Video</title>
</head>
<body bgcolor="#b2b3b9">
<br />
<hr size=5 color="#505152" />
<h1 align="center"><font face="courier new" color="#505152">WELCOME TO MY PAGE</font></h1>
<hr size=5 color="#505152" />
<br />
<br />
<table align="center" cellspacing=0>

<!--Baris 1 -->
<tr align="center">
<td height=40 width=20 rowspan=3 bgcolor="black"></td>
<td width=20></td>
<td width=200 bgcolor="black"><a href="studi_kasus.html"><font color="white"><b>Dokumen</b></font></a></td>
<td width=20></td>
<td width=200 bgcolor="#666769"><a href="video.html"><font color="white"><b>Video</b></font></a></td>
<td width=20></td>
<td width=200 bgcolor="black"><a href="musik.html"><font color="white"><b>Musik</b></font></a></td>
<td width=20></td>
<td width=20 rowspan=3 bgcolor="black"></td>
</tr>

<!--Baris 2 -->
<tr>
<td height=150 width=20 colspan=7 bgcolor="#666769">
<ol>
<a href="http://www.youtube.com/watch?v=bc6OcZ3BoRQ"><font color="white"><li>Upin dan Ipin 1</li></font></a>
<a href="http://www.youtube.com/watch?v=NA8kdmMt4pU"><font color="white"><li>Upin dan Ipin 2</li></font></a>
<a href="http://www.youtube.com/watch?v=0j5tOSRV5Qg"><font color="white"><li>Upin dan Ipin 3</li></font></a>
<a href="http://www.youtube.com/watch?v=m_Rq23PK8WI"><font color="white"><li>Upin dan Ipin 4</li></font></a>
<a href="http://www.youtube.com/watch?v=pkuKEGCO37k"><font color="white"><li>Upin dan Ipin 5</li></font></a>
</ol>
</b></td>
</tr>

<!-- Baris 3 -->
<tr align="center">
<td height=35 colspan=9 bgcolor="black"><font color="white">&copy; Alivi Nur Rosida</font></td>
</tr>
</table>
</body>
</html>

Untuk hasil tampilan dari halaman "Video" dapat dilihat di bawah ini :

Untuk halaman terakhir yaitu "musik", kodenya dapat dilihat dibawah ini :

<!DOCTYPE HTML>
<html lang="en">
<head>
<LINK REL="SHORTCUT ICON" HREF="Dossier-music.png" />
<title>Musik</title>
</head>
<body bgcolor="#b2b3b9">
<br />
<hr size=5 color="#505152" />
<h1 align="center"><font face="courier new" color="#505152">WELCOME TO MY PAGE</font></h1>
<hr size=5 color="#505152" />
<br />
<br />
<table align="center" cellspacing=0>

<!--Baris 1 -->
<tr align="center">
<td height=40 width=20 rowspan=3 bgcolor="black"></td>
<td width=20></td>
<td width=200 bgcolor="black"><a href="studi_kasus.html"><font color="white"><b>Dokumen</b></font></a></td>
<td width=20></td>
<td width=200 bgcolor="black"><a href="video.html"><font color="white"><b>Video</b></font></a></td>
<td width=20></td>
<td width=200 bgcolor="#666769"><a href="studi_kasus.html"><font color="white"><b>Musik</b></font></a></td>
<td width=20></td>
<td width=20 rowspan=3 bgcolor="black"></td>
</tr>

<!--Baris 2 -->
<tr>
<td height=150 width=20 colspan=7 bgcolor="#666769">
<ol>
<a href="http://www.4shared.com/audio/RFT01l21/Kotak_-_Pelan_Pelan_Saja.html"><font color="white"><li>Kotak -- Pelan-Pelan Saja</li></font></a>
<a href="http://www.4shared.com/audio/Vlh0xbwo/Kotak_-_Beraksi.html"><font color="white"><li>Kotak -- Beraksi</li></font></a>
<a href="http://www.4shared.com/audio/rvZE4VG2/Kotak_-_Masih_Cinta.html"><font color="white"><li>Kotak -- Masih Cinta</li></font></a>
</ol>
</b></td>
</tr>

<!-- Baris 3 -->
<tr align="center">
<td height=35 colspan=9 bgcolor="black"><font color="white">&copy; Alivi Nur Rosida</font></td>
</tr>
</table>
</body>
</html>

Untuk tampilan halaman "musik" dapat dilihat dibawah ini :


selamat mencobaaa...semoga ini dapat membantuuu...
terimakasiiih..
Baca Selengkapnya...
Untuk membuat web sederhana dibutuhkan beberapa tools seperti server, browser, notepad dan HTML validator. Disini saya menggunakan webserver sebagai servernya, mozilla firefox tipe 3.6.13 sebagai browsernya, notepad++ dan HTML validator yang sudah termasuk dalam add ons mozilla.

Web sederhana di bawah ini menggunakan beberapa komponen dari HTML5 seperti pemberian background, membuat garis dengan panjang dan warna yang bervariasi, menambahkan foto, menggunakan format list, dll. Untuk lebih memahami dalam membuat web sederhana, lihat kode di bawah ini kemudian coba kalian membuat sendiri web sederhana kalian.

Contoh web sederhana dengan menggunakan HTML5 dapat dilihat dibawah ini :


Kode html dari tampilan di atas dapat dilihat dibawah ini :


Baca Selengkapnya...
Untuk membuat suatu tabel, biasanya kita harus mengelompokkan suatu data. Dalam HTML, untuk mengelompokkan data berdasarkan kolom digunakan <colgroup> dan untuk mengelompokkan data berdasarkan baris digunakan kode <tbody>.

Contoh Tabel pengelompokan dalam HTML5


Kode tampilan di atas dapat dilihat dibawah ini :

Baca Selengkapnya...
Dalam microsoft office misalnya word, power point dan excel, kita semua bisa membuat tabel dengan cara yang mudah. Masukkan data dan beberapa detik kemudian grafik sudah jadi. Namun, apa jadinya jika kita membuat grafik dengan menggunakan kode HTML 5 dengan memanfaatkan tabel?

Untuk membuat grafik ini, kita hanya memanfaatkan fungsi merge antar cell di dalam tabel. Kita harus jeli bagian mana yang harus kita merge dan bagian mana yang harus kita pertahankan. Dibawah ini merupakan salah satu contoh grafik yang dibuat dengan menggunakan table.

Contoh grafik yang dibuat dengan menggunakan tabel dapat dilihat dibawah ini :



Untuk kode HTML dapat dilihat dibawah ini :


Baca Selengkapnya...
Semester 4 ini ada matakuliah Bahasa Pemrograman Visual. disini aq diajarin tentang bahasa pemrograman VB.net 2008. dibawah ne gambar design kalkulator buatanqyang pertama di vb.net..hhe. ini hanya design belaka. belum bisa beroperasi sebagai kalkulator..hhi..maklum baru pemula di dunia vb.net.


script dapat dilihat dibawah ini :


Public Class Form1
   
Private Sub Panel1_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs)
End Sub

Private Sub Btn0_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Btn0.Click
txtLayar.Text = txtLayar.Text & "0"
End Sub

Private Sub Btn1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Btn1.Click
txtLayar.Text = txtLayar.Text & "1"
End Sub

Private Sub Btn2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Btn2.Click
txtLayar.Text = txtLayar.Text & "2"
End Sub

Private Sub Btn3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Btn3.Click
txtLayar.Text = txtLayar.Text & "3"
End Sub

Private Sub Btn4_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Btn4.Click
txtLayar.Text = txtLayar.Text & "4"
End Sub

Private Sub Btn5_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Btn5.Click
txtLayar.Text = txtLayar.Text & "5"
End Sub

Private Sub Btn6_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Btn6.Click
txtLayar.Text = txtLayar.Text & "6"
End Sub

Private Sub Btn7_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Btn7.Click
txtLayar.Text = txtLayar.Text & "7"
End Sub

Private Sub Btn8_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Btn8.Click
txtLayar.Text = txtLayar.Text & "8"
End Sub

Private Sub Btn9_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Btn9.Click
End Sub

Private Sub BtnKoma_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BtnKoma.Click
txtLayar.Text = txtLayar.Text & "."
BtnKoma.Enabled = False
End Sub

Private Sub BtnTambah_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BtnTambah.Click
txtLayar.Text = txtLayar.Text & "+"
End Sub

Private Sub BtnKurang_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BtnKurang.Click
txtLayar.Text = txtLayar.Text & "-"
End Sub

Private Sub BtnKali_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BtnKali.Click
txtLayar.Text = txtLayar.Text & "*"
End Sub

Private Sub BtnBagi_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles BtnBagi.Click
txtLayar.Text = txtLayar.Text & "/"
End Sub

Private Sub Label3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Label3.Click
End Sub

Private Sub txtLayar_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles txtLayar.TextChanged
End Sub

Private Sub Label2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Label2.Click
End Sub

Private Sub PictureBox1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox1.Click
End Sub

Private Sub Label1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Label1.Click
End Sub

End Class
Baca Selengkapnya...

About

- alivi -