Belajar Web

Rabu, 06 Februari 2013

Belajar HTML 5

Pertama kita belajar membuat form dari html 5, untuk seterusnya menyusul,.... haha, karena saya juga masih belajar,....

pertama kita buat form warna.... berikut contoh kodingnya...

<html>
<title>Belajar Form HTML 5</title>
<head>
</head>
<body>
<form method="post" action="">
<input type="color" name="warna">
</form>
</body>
</html>

jangan lupa type-nya di kasih "color"...
dan inilah jadinya.....

Belajar Form HTML 5 kalau yang ini adalah form untuk validasi text atau email...
berikut contoh kodingnya

<html>
<title>Belajar Form HTML 5</title>
<head>
</head>
<body>
<form method="post" action="">
<input type="email" name="vemail">
<input type="submit" value="submit">
</form>
</body>
</html>

kode di atas menunjukkan bahwa ketika kita ketik email yang tidak valid,maka validasi akan tampil di bawah form inputnya.... berikut contohnya....

Belajar Form HTML 5

berikutnya validasi form kosong, jika form tersebut tidak diisi, maka form tersebut otomatis muncul peringatan, untuk membuat validasi form tersebut kita cukup menambahkan code seperti berikut

<input type="text" name="nama" required="required">
<input type="submit"value="submit">

dan inilah jadinya.....

Belajar Form HTML 5

Untuk yang lainnya besok ya gan....
soalnya aq mau pulang prakerin..... capek, hehehe
semoga berhasil n sukses selalu.....

Selasa, 23 Oktober 2012

Membuat Efek Getaran Pada Gambar

Ketiklah Kode Seperti Ini:

<html>
<head>
<style type="text/css">
.shakeimage{
position:relative
}
</style>
<script language="JavaScript1.2">

//configure shake degree (where larger # equals greater shake)
var rector=3

///////DONE EDITTING///////////
var stopit=0
var a=1

function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}

function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector+"px"
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector+"px"
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector+"px"
}
else{
shake.style.left=parseInt(shake.style.left)-rector+"px"
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}

function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}

</script>

</head>
<body>

<img class="shakeimage"
onclick="top.focus()"
onmouseout="stoprattle(this);
top.focus()" onmouseover="init(this);
rattleimage()" src="bedugul.jpg" />
</body>
</html>

dan jadinya seperti ini

Tutorial CSS

Minggu, 21 Oktober 2012

Lowongan Pekerjaan

LOWONGAN PEKERJAAN DI CV. KARYA HIDUP SENTOSA (QUICK)

(Update: Senin, 22 Oktober 2012 ) Untuk SMA/SMK:
Operator Produksi Kualifikasi:
- Laki-laki usia maksimal 27 tahun
- Lulusan SMK Teknik Mesin/Otomotif
- Nilai rata-rata minimal 7.00
- Diutamakan menguasai alatukur, gambar kerja dan mesin produksi
- Belum pernah melamar dantes di QUICK Jumlahdibutuhkan: 69 Operator Administrasi Kualifikasi:
- Laki-laki usia maksimal 27 tahun
- Lulusan SMA atau SMK (Akuntansi/TKJ)
- Nilai rata-rata minimal 7.00 - Diutamakan menguasai komputer
- Belum pernah melamar dan tes

di QUICK Jumlah dibutuhkan:

4 Untuk D3/S1:
Staf Produksi (Quality Assurance;Desain; Maintenance PengembanganAlat; Machining Prototype; Rekayasa; Pembelian Supplier) Kualifikasi:
- Laki-laki usia maksimal 30 tahun
- Lulusan S1 TeknikMesin
- IPK minimal 2.75
- Memiliki kemampuan BahasaInggris (minimal pasif)
- Mengenal software desain Pro-E atau CATIA untukDesain
- Belum pernah melamar dan tes di QUICK

Jumlahdibutuhkan: 4 Staf Produksi (Production Engineering; Machining; MaintMekanik; Pembelian Subkontraktor) Kualifikasi:
- Laki-laki usia maksimal 30 tahun
- Lulusan D3/S1 Teknik Mesin
- IPK minimal 2.75
- Memiliki kemampuan BahasaInggris (minimal pasif)
- Belum pernah melamar dan tes di QUICK

Jumlah dibutuhkan: 10 Staf Produksi (Rekayasa; Machining Prototype; Tool Making A; Machining) Kualifikasi:
- Laki-laki usia maksimal 30 tahun
- Lulusan D3 Teknik Mesin ATMI
- IPK minimal 2.25
- Memiliki kemampuan Bahasa Inggris (minimal pasif)
- Belum pernah melamar dan tes di QUICK

Jumlah dibutuhkan: 4 Staf Produksi (Painting & Packaging) Kualifikasi:
- Laki-laki usia maksimal 30 tahun
- Lulusan S1 Teknik Kimia
- IPK minimal 2.75
- Memiliki kemampuan BahasaInggris (minimal pasif)
- Belum pernah melamar dan tes di QUICK

Jumlah dibutuhkan: 1 StafProduksi (Rekayasa) Kualifikasi:
- Laki-laki usia maksimal 30 tahun
- Lulusan S1 Teknik Industri
- IPK minimal 2.75
- Memiliki kemampuan Bahasa Inggris (minimal pasif)
- Belum pernah melamar dan tes di QUICK

Jumlah dibutuhkan: 2 Staf Pemasaran Pusat Kualifikasi:
- Laki-laki usia maksimal 30 tahun - Lulusan S1 (TeknikMesin/Akuntansi/Manajemen/Pertanian/TeknologiPertanian/SegalaJurusan)
- IPK minimal 2.75
- Memiliki kemampuan BahasaInggris (minimal pasif)
- Belum pernah melamar dan tes di QUICK

Jumlah dibutuhkan: 6 Staf Pemasaran Cabang Kualifikasi:
- Laki-laki usia maksimal 30 tahun
- Lulusan S1 Teknik Mesin/Akuntansi/Manajemen/Pertanian/TeknologiPertanian
- IPK minimal 2.75
- Memiliki kemampuan Bahasa Inggris (minimal pasif)
- Belum pernah melamar dan tes di QUICK
- Bersedia ditempatkan di Surabaya, Medan, atau Jakarta

Jumlah dibutuhkan: 3 Staf Akuntansi Kualifikasi:
- Laki-laki/Perempuanusiamaksimal 30 tahun
- Lulusan S1 Akuntansi - IPK minimal 2.75
- Memiliki kemampuan Bahasa Inggris (minimal pasif)
- Belum pernah melamar dan tes di QUICK

Jumlah dibutuhkan: 2 Staf Program Komputer Kualifikasi:
- Laki-laki/Perempuan usia maksimal 30 tahun
- Lulusan S1 Ilmu Komputer/Teknik Informatika/Sistem Informasi
- IPK minimal 2.75 - Memiliki kemampuan BahasaInggris (minimal pasif)
- Menguasaiaplikasi Ms. Office, Database, My SQL/SQL Server, Visual Basic
- Belum pernah melamar dan tes di QUICK

Jumlah dibutuhkan: 1 StafGudang Kualifikasi:
- Laki-laki usia maksimal 30 tahun
- Lulusan D3/S1 TeknikMesin/TeknikIndustri/Akuntansi
- IPK minimal 2.75
- Memiliki kemampuan Bahasa Inggris (minimal pasif)
- Belum pernah melamar dan tes di QUICK

Jumlah dibutuhkan: 4 Staf PPB (PengadaandanPemeliharaanBangunan) Kualifikasi:
- Laki-laki usia maksimal 30 tahun
- Lulusan S1 Teknik Industri
- IPK minimal 2.75
- Memiliki kemampuan Bahasa Inggris (minimal pasif)
- Diutamakan dapat mengoperasikan software Scheduling
- Belum pernah melamar dan tes di QUICK

Jumlah dibutuhkan: 1 Staf Pengecoran Logam Kualifikasi:
- Laki-laki usia maksimal 30 tahun
- Lulusan S1 Metalurgi/D3 PolmanTeknik PengecoranLogam
- IPK minimal 2.75
- Memiliki kemampuan Bahasa Inggris (minimal pasif)
- Belum pernah melamar dan tes di QUICK

Jumlah dibutuhkan: 1 StafHubunganKerja Kualifikasi:
- Laki-laki usia maksimal 30 tahun
- Lulusan S1 Hukum
- IPK minimal 2.75
- Memiliki kemampuan Bahasa Inggris (minimal pasif)
- Belum pernah melamar dan tes di QUICK

Jumlah dibutuhkan: 1 Berkas lamaran dapat dikirimkan ke:
Seksi Seleksi dan Orientasi Kantor Pusat CV. KaryaHidupSentosa (QUICK)
Jl. Magelang 144 Yogyakarta 55241 Atau
Email ke: recruit.sec1@quick.co.id
Dengan melampirkan:
1. Pas fotoukuran 4x6: 3 lembar
2. Daftar riwayat hidup: 1 lembar
3. Foto copy KTP: 1 lembar
4. Foto copy ijazah dan transkrip nilai: 1 lembar
5. Mencantumkan nomor telepon yang dapat dihubungi Hanya pelamar yang memenuhi kualifikasi yang akan kami proses lebihlanjut.

Untuk Info lengkapnya : http://cybersatu.blogspot.com/2012/10/lowongan-pekerjaan-di-cv-karya-hidup.html

Tutorial CSS

Rabu, 10 Oktober 2012

Membuat Efek 3D Dengan CSS

Ketiklah Kode Seperti Berikut ini

<html>
<head>
</head>
<body>
<h4 style="text-shadow:
    1px 0px #ccc, 0px 1px #ccc,
    2px 1px #ddd, 1px 2px #bbb,
    3px 2px #ddd, 2px 3px #bbb,
    4px 3px #ddd, 3px 4px #bbb,
    5px 4px #ddd, 4px 5px #bbb,
    6px 5px #ddd, 5px 6px #bbb,
    7px 6px #ddd, 6px 7px #bbb,
    8px 7px #ddd, 7px 8px #bbb,
    8px 8px #ddd; font-size: 50px;
    color: #666; text-align:center;
    text-height:font-size;">
    EFEK 3D DENGAN CSS</h4>
</body>
</html>

Dan Jadinya Seperti Ini :

EFEK 3D DENGAN CSS

Tutorial CSS

Selasa, 09 Oktober 2012

Efek Teks Dengan CSS

Ketiklah Kode Seperti Berikut ini :

<html>
<head>
<style type="text/css">
h2 {
background:#3e6a06;
color:#3e6a06;
text-shadow:
-1px -1px 1px #528e06,
-1px -1px 3px #528e06,
1px 1px 1px #243d05,
1px 1px 3px #243d05,
1px -1px 1px #eafed2,
-1px 1px 1px #eafed2;
}
</style>
</head>
<body>
<h2>Teks Cembung</h2>
</body>
</html>

Dan jadinya Seperti ini:

Tutorial CSS

Senin, 08 Oktober 2012

Membuat Efek Link Dengan CSS

Ketiklah Kode seperti Dibawah Ini

<html>

<head>

<title>Membuat efek link</title>

a.otowebsite {

color:#ccc;

text-decoration:none;

text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;

-webkit-transition:all .5s ease-out;

-moz-transition:all .5s ease-out;

-o-transition:all .5s ease-out;

transition:all .5s ease-out;

}

a.otowebsite:hover {

color:#fff;

text-shadow:

0px 1px 0px #FF00FF,

0px 0px 3px #FF00FF,

0px 0px 5px #FF00FF,

0px 0px 30px #FF00FF,

0px 3px 50px #FF00FF;

</style>

</head>

<body>

<a class="otowebsite" href="Facebook.com">Login Facebook</a>

</body>

</html>

Dan jadinya seperti ini...

Membuat efek link Login Facebook

Tutorial CSS

Membuat Efek Pada Gambar

Ketiklah Kode Seperti Berikut :

<html>
<head>
<title>Membuat Efek Pada Gambar</title>
<style type="text/css">
/* Efek Goyang */

img {
margin: 5px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);

}

/* Efek Glow */

img {
margin: 5px;
border: 10px solid #eee;
/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
img:hover {
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

/* Efek Bergulung */

img {
-webkit-transition-duration:.4s;
}
img:hover {
filter: alpha(opacity=60);
opacity: .9.9;border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

</style>
</head>
<body>

<img src="arema.jpg">

</body>
</html>

Membuat Efek Pada Gambar

Tutorial CSS

Kamis, 27 September 2012

Membuat Table Style

Berikut Ini Kita Akan membuat table style dengan CSS
Inilah kode/scriptnya :

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table {
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
th
{
background:#00FF00;

}

</style>
</head>

<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama Belakang</th>
</tr>

<tr>
<td>Bukhari </td>
<td>Daud</td>
</tr>

<tr>
<td>Edi </td>
<td>Wirawan</td>
</tr>
<tr>
<td>Nana</td>
<td> Istiana</td>
</tr>
<tr>
<td>Nurhidayat</td>
<td>aldila</td>
</tr>
</body>
</html>

Dan Jadinya Seperti Ini :

Nama Depan	Nama Belakang
Bukhari	Daud
Edi	Wirawan
Nana	Istiana
Nurhidayat	aldila

Tutorial CSS

Senin, 24 September 2012

Border Style Pada CSS

Border CSS adalah Bingkai Yang Bisa di Buat di Blog,maupun web yang biasanya digunakan untuk memisahkan beberapa konten blog ataupun elemen tertentu. Selain itu, Border CSS juga bisa digunakan sebagai modul untuk memperindah tampilan blog.

Inilah Pengertian Kode Border Style

None = Tidak mnggunakan border (none).
Hidden = Hampir Mirip seperti kode "none".
Dashed = Tipe border dengan gaya putus-putus.
Dotted = Tipe border dengan gaya titik-titik.
Solid = Tipe border dengan garis lurus.
Double = Tipe border lebih dari satu garis lurus
Ridge = Tipe border dengan gaya 3D bergerigi
Groove = Tipe border 3D beralur
Outset = Tipe border 3D batas luar
Inset = Tipe border 3D batas dalam
Inherit = Menentukan kalau gaya perbatasan diwarisi dari elemen induk

contohnya adalah sebagai berikut :

<html>

<title>Border Style Pada CSS</title>

<head>

#content {

border : 3px solid #000;

}

</style>

</head>

Kode CSS adalah bahasa pemrograman yang digunakan dalam desain website dan dalam penciptaan HTML pada template, misalnya template blog, wordpress, website, dll.</div>

</body>

</html>

Border Style Pada CSS

Kode CSS adalah bahasa pemrograman yang digunakan dalam desain website dan dalam penciptaan HTML pada template, misalnya template blog, wordpress, website, dll.

Tutorial CSS

Membuat Efek Form

Ketik Kode di bawah ini

<!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>
<style type="text/css">
.nama {
border:2px solid red;
background-color :#FFE4C4;
width :175px;
height:20px;
}
.nama:focus {
border:2px solid green;
background-color : #FFFFFF;
width :175px;
height:20px;
}

.kelas {
border:2px solid red;
background-color :#FFE4C4;
width :175px;
height:20px;
}
.kelas:focus {
border:2px solid green;
background-color : #FFFFFF;
width :175px;
height:20px;
}

.alamat {
border:2px solid red;
background-color :#FFE4C4;
width :175px;
height:30px;
}
.alamat:focus {
border:2px solid green;
background-color : #FFFFFF;
width :175px;
height:30px;
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form method="post" action="">

<p> </p>
<table width="403" height="172" border="0">
<tr>
<td width="141">Nama</td>
<td width="11"> : </td>
<td width="229"><input type="text" name="nama" id="nama" class="nama" /></td>

<tr>
<td>Kelas </td>
<td> : </td>
<td><input type="text" name="kelas" id="kelas" class="kelas"/></td>
</tr>
</tr>
<tr>
<td>Alamat</td>
<td> : </td>
<td><textarea name="alamat" id="alamat" class="alamat"></textarea></td>
</tr>
<tr>
<td>Hoby</td>
<td> : </td>
<td><input type="checkbox" name="hoby2" id="hoby2" />
Memancing </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="checkbox" name="hoby" id="hoby" />
Sepak Bola
</p></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td> : </td>
<td><select name="select"><option value="Tidak Ada">Tidak Ada</option>
<option value="Laki-laki">Laki-laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td></td>
<td>
<input type="submit" value="Kirim">
<input type="reset" value="Clear">
</td>
</tr>

</table>
<p> </p>
</body>
</html>

Dan Jadinya Seperti ini

Untitled Document

Jenis Kelamin :

Tutorial CSS

Membuat Border Melengkung di Web

Untuk membuat rounded Corner sangatlah mudah sobat tinggal menghapalkan beberpa code di bawah ini.
-webkit-border-radius: ukuran;
-moz-border-radius: ukuran;

Contohnya Sebagai Berikut :

<html>
<head>
<style type="text/css">
#corner {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border:#d81b21 solid;
width:200px;
}
</style>
</head>
<body>
<div id="corner">
-webkit-border-radius: 10px;<br>
-moz-border-radius: 10px;<br>
border:#d81b21 solid;<br>
</div>
</body>
</html>

Dan Jadinya Seperti Ini :

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border:#d81b21 solid;

Semakin besar radius yang soba berikan makan lengkungnya akan semakin dalam sebagai contoh kita tambahkan yang tadinya 10px menjadi 20px.

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border:#d81b21 solid;

itu untuk dasar membuat rounded corner, sekarang bagaimana jika kita ingin membuat garis lengkungnya cuma sebelah kanan saja

Rounded Corner Sebelah kanan

-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border:#d81b21 solid;
width:200px;

-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border:#d81b21 solid;

Rounded Corner Sebelah kiri

-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border:#d81b21 solid;

-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border:#d81b21 solid;

Tutorial CSS

Membuat Efek Transparan Pada Gambar

Ketiklah Kode Seperti Di bawah ini

<html>
<title>Membuat Efek Transparan Pada Gambar</title>
<head>
<style type="text/css">

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

</style>
</head>
<body>

<img src="foto1.jpg">
<img src="foto2.jpg">
</body>
</html>

Dan Jadinya Seperti Ini

Tutorial CSS

Rabu, 19 September 2012

CSS

Kode CSS adalah bahasa pemrograman yang digunakan dalam desain website dan dalam penciptaan HTML pada template, misalnya template blog, wordpress, website, dll. Hal ini digunakan untuk memformat tampilan dan format dari suatu halaman web, pengaturan desain elemen seperti tata letak dasar, warna, dan font. CSS memungkinkan untuk kontinuitas yang lebih besar antara halaman web yang berbeda di situs dan membuat pengembangan halaman web lebih mudah dan lebih cepat.

CSS singkatan dari Cascading style sheet. Sebuah bahasa style sheet yaitu bahasa pemrograman yang digunakan untuk membuat dan menyajikan dokumen terstruktur. Deretan dalam CSS mengacu pada kemampuan bahasa untuk menetapkan prioritas antara gaya penulis, gaya yang ditetapkan oleh halaman web itu sendiri, dan gaya yang ditetapkan oleh web browser

Tutorial CSS

Belajar Web

Halaman

Rabu, 06 Februari 2013

Belajar HTML 5

Selasa, 23 Oktober 2012

Membuat Efek Getaran Pada Gambar

Minggu, 21 Oktober 2012

Lowongan Pekerjaan

Rabu, 10 Oktober 2012

Membuat Efek 3D Dengan CSS

EFEK 3D DENGAN CSS

Selasa, 09 Oktober 2012

Efek Teks Dengan CSS

Senin, 08 Oktober 2012

Membuat Efek Link Dengan CSS

Membuat Efek Pada Gambar

Kamis, 27 September 2012

Membuat Table Style

Senin, 24 September 2012

Border Style Pada CSS

Membuat Efek Form

Membuat Border Melengkung di Web

Membuat Efek Transparan Pada Gambar

Membuat Garis underline link menghilang

Rabu, 19 September 2012

CSS