Hacker's Notes

  • RSS
  • Delicious
  • Facebook
  • Twitter

  • Kejenuhan

    Jenuh, serius gue jenuh banget dengan kehiduapn gue yang mulai gak beraturan ini. Momen dimana seharusnya gue menikmati indahnya nungtut ilmu secara gratisan di PTIK malah bikin hati gue jenuh....

  • Bintang Selalu Ada

    Langit itu indah, langit itu menyiratkan berjuta hikmah, disana pun ada kehidupan, burung, bakteri-bakteri, pesawat-pesawat yang didalamnya mengangkut manusia, adalah perangkat kehidupan yang mewarnai langit. Gak Cuma itu, langit itu maha karya Illahi paling gokiel menurut gue, Dia bikin langit gak ada penopang, pun Dia buat langit bisa berubah-ubah setiap waktu, kadang ...

  • I Love Mom

    Bunda, malam menyanyikan senandung doaku padamu Seorang putra yang jauh darimu Aku disini menunaikan satu janji Tuk pulang dengan berjuta bangga Menemanimu dikala senja menyambangi siang Bersenda tiap kepingan hati mengukir cerita Bunda, rajutan sayangmu ...

Twitter
.::Welcooooooomeee in My Site::.

Frames

Contoh:



Okeyhh, liat contoh gambar di atas..

Salah satu bentuk frame yang gue buat secara iseng2 ya kayak gono.. Simple banget, namanya juga buat demo doang.. Ya gak..
hihi

sekarang lo coba buat ngertiin logika bikinnya yawh..

Nih syntagnya:

<html><head><title>FRAME
</title></head>
<frameset rows="20%,70%,10%">
<frame src="1.jpg"> <!..ini baris pertama>


<frameset cols="30%,40%,70%">
<frame src="2.jpg">
<frame src="3.jpg"> <!..ini baris kedua>
<frame src="4.jpg">

</frameset>

<frame src="5.jpg"> <!..ini baris ketiga>
</frameset></html>

See??

Selamat mencobaaaaa..

^^

0 komentar

Forms

Look at this:





Nah, pasti lo pernah ngeliat model yang kayak gini kaaan??

Yupz, biasanya kalo kita sign up ke suatu web, pasti bakalan nongol tampilan beginian.. Ya kaaaann, ho'oh kaaaaann???
hihihi

Okeh, ini gampang kok. Coba liat daftar element n atribut yang dah gue kasih di artikel Element dan Atribut.

Terus cari yang bagian Form.

Okeh let's try..

Untuk bikin tampilan kayak di atas, ini syntag-nya:

<table border="1" cellpadding="10px">
<form>

<tr>
  <td>username</td>
  <td>:</td>
  <td><input type="text"></td>
</tr>
<tr>
  <td>password</td>
  <td>:</td>
  <td><input type="password"></td>
</tr>

</table>

See??

Untuk bikin tampilan kayak di atas, kita pake element <form>. terus kita pake juga element <input> tapi element input gak bakal bisa berdiri sendiri kalo element <form> gak ditulis dulu, penting nihh buat lo2 semua hati2 ketika pengen bikin form login kayak di atas..

Okeh, gampang kaaann??

So, kita coba dengan gambar di bawah ini:



Nih syntag2nya:

<html>
<head><title></title></head>
<body><center>
<table border="1" cellpadding="10px"><form>

<tr><td>username</td><td>:</td><td><input type="text"></td></tr>
<tr><td>password</td><td>:</td><td><input type="password"></td></tr>
<tr><td>password confirm</td><td>:</td><td><input type="password"></td></tr>

<tr><td>gender</td><td>:</td><td><input type="radio" name="gender">male
                 <input type="radio" name="gender">female</td></tr>

<tr><td>marital status</td><td>:</td><td><input type="radio" name="ms">single
                      <input type="radio" name="ms">married</td></tr>

<tr><td valign="top">religion</td><td valign="top">:</td><td>
                <input type="radio" name="cb">islam<br/>
                <input type="radio" name="cb">kristen<br/>
                <input type="radio" name="cb">buddha<br/>
                <input type="radio" name="cb">hindu<br/>
                <input type="radio" name="cb">yahudi<br/></td></tr>

<tr><td valign="top">city</td><td valign="top">:</td><td><select name="manga" size="1">
                <option value="radio">Jakarta
                <option value="radio">Bogor
                <option value="radio">Depok
                <option value="radio">Tangerang
                <option value="radio">Surabaya
                <option value="radio">Yogyakarta
                <option value="radio">Semarang
                <option value="radio">Solo</td></tr></select>

<tr><td valign="top">massages</td><td valign="top">:</td><td>
                <textarea type="msg" cols="40" rows="5"></textarea>





<tr><td></td><td></td><td><input type="submit" value="login"/>
<input type="reset" value="batal"/></td>

</form></table>
</center></body></html>

Monggoo di cobaaa..
Kalo ada kesulitan, silahkan comment di bawah artikel ini, or bisa lewat shoutmix(chatting) di sebelah kanan bawah..

Hosh
^^

0 komentar

List

contoh:

<p>
Kopi:
    <ul>
       <li>ABC susu</li>
       <li>Nescafe</li>
   </ul>
</p>

N hasilnya adalaaaahh:














Ngertii??

jadi, list berfungsi untuk ngebikin daftar dalam web kita..

coba bikin kayak gini:


Bisa??

Ihihihi, kalo gak bisa lo bisa liat nih syntag-nya:

<table>
 <tr>
   <td>
   <p>
     Kopi:
      <ul>
        <li>ABC susu</li>
        <li>Nescafe</li>
     </ul> 
  </p>
  </td>
  <td width="60"></td>
  <td>
  <p>
    Es Krim:
     <ol>
       <li>Magnum</li>
       <li>Walls</li>
    </ol>
 </p>
 </td>
</tr>

Element <ul> berfungsi untuk bikin List buatan lo pake format titik item, sedangkan <ol> berfungsi untuk bikin list buatan lo pake format angka..

Okeh, sekarang gue tess.. Coba bikin kayak di gambar ini:



Nah, coba lo latihan dollo yaaaahh..

Nih syntagnya gue kasih tau, tapi jangan liat dollo yawh kalo emang masih bisa nyoba..

<table border="1">
<tr>
<th bgcolor="blue" colspan="3" align="center" width="400" height="50"><blink>Bili's Site</blink></th>
</tr>
<tr>
<td bgcolor="blueviolet" valign="top">
<table valign="top">
<tr>
<td valign="top"><a href="http://www.facebook.com"><img src="1.jpeg" width="10" height="10"/><font face="times new roman" size="2px">Facebook</font></a></td></tr>
<td valign="top"><a href="http://www.twitter.com"><img src="2.jpeg" width="10" height="10"/><font face="times new roman" size="2px">Twitter</font></a></td>
</tr>
</table>
</td>
<td rowspan="2" width="600" valign="top">
<p align="justify"><img src="25.jpg" align="left" width="40" height="40"><font face="times new roman" size="1px">
Jenuh, serius gue jenuh banget dengan kehiduapn gue yang mulai gak beraturan ini. Momen dimana seharusnya gue menikmati indahnya nungtut ilmu secara gratisan di PTIK malah bikin hati gue jenuh.

I don't know mhy, but i thing it's because i lost my motivation.

Motivasi yang selalu bikin gue tersenyum menghadapi dunia aneh ini, motivasi yang selalu bergelayutan dalam hati gue n bikin rangkaian hari menjadi indah untuk gue jadikan bingkai-bingkai sejarah hidup gue. I'm bored!!!

Kata-kata ini yang sekarang lagi pengen gue healing kayak virus n worm di kompi gue. Kayak si trojan yang dah nyuri sistem windows gue, kayak gini dehh jenuh yang gue rasain, dia dah bikin sistem kebiasaan gue jadi usang n gak ada manis-manisnya.

So how? How should i do to healing this pain??

Heeuuuuh, until now, i couldn't answer this question. Meskipun mbak Mariah Carey bilang,

There's a hero if look into ur heart
You don't have to be afraid of what You are...

Tetep aja gak ngepek buat gue. Okeyhh, mungkin ini wajar buat cowok kayak gue. Jadi gue akan jalani hari seperti biasa-biasanya, siapa tau ada hal yang luar biasa yang akan merubah kejenuhan gue ini menjadi obsesi yang kuat nantinya.

Yoouuumaaann..
</font>
</p>
</td>
<td bgcolor="antiquewhite" valign="top">
<p><font face="times new roman" size="1px">Hobi:
<ul>
<li>Mancing</li>
<li>Maen games</li>
</ul>
</font>
</p>
</td>
</tr>
<tr>
<td bgcolor="darkgray" valign="top" align="center">
<marquee direction="up">
<font face="times new roman" size="1px" color="white">
No HP: 085714855580</font>
</marquee></td>
<td bgcolor="cyan" valign="top">
<p>Foto Gue:<img src="25.jpg" align="left" width="40" height="40"></p></td>
</tr>
<tr>
<td bgcolor="blue" colspan="3" align="center">
<marquee direction="left">.::Welcooomeee::.</marquee></td>
</tr>
</table>

Selamat mencobaaaa
(^,~)

0 komentar

Tables

cek this out:

<table border="1">
<tr>
<td>kolom 1</td>
<td>kolom 2</td>
<td>kolom 3</td>
</tr>
<tr>
<td>kolom 4</td>
<td>kolom 5</td>
<td>kolom 6</td>
</tr>
<tr>
<td>kolom 7</td>
<td>kolom 8</td>
<td>kolom 9</td>
</tr>
</table>

N hasilnya addalaaaah:


See??

Dengan element <table>, lo bisa ngedesain kolom dalam web lo sesuka yang lo mao. Mangtab kaaann??

Kalo dah ngerti sampe di seneh, gue yakin lo bisa nge-explore kemampuan lo ngebikin web.

Element <tr> berfungsi untuk nentuin jumlah baris dalam table, kalo lo liat contoh di atas, pasti bakal lo dapeton kalo ada 3 <tr>, bener kan?? N cek deh di gambar, ada 3 baris kaaan??

Gettoh soobb..

Nah, kalo element <td> berfungsi untuk nentuin jumlah kolom, kalo liat gambar, pasti ada 9 kolom kaan?? Nah, liat dehh syntag di atas!! Ada 9 <td> kaaan??

Gettoh soobb..

Okeh, liat gambar di bawah:

Nah, untuk bisa bikin kayak gambar di atas, ini syntagnya:

<table border="1" width="500" height="100" bgcolor="green">
<tr>
<td colspan="3" align="center">Header</td>
</tr>
<tr>
<td bgcolor="orange">kolom 4</td>
<td bgcolor="red">kolom 5</td>
<td bgcolor="blue">kolom 6</td>
</tr>
<tr>
<td colspan="3" align="center">Footer</td>
</tr>
</table>

Coba liat di daftar Element sama Tribut yang dah gue kasih di Artikel tentang Element dan Atribut, atribut colspan berfungsi untuk ngegabungin 2 kolom atau lebih. Dengan syarat lo kudu ngapus <td> yang ada di bawahnya.

kalo atribut bgcolor, buat bikin warna background sesuai sama kemauan lo..

Gampang kaaan??
hihihihi

Selamat mencobaaaa...
^^

0 komentar

Images

What's upp brota n sista..

Now we'll learn how to add image in our HTML coding..

Okeyhh, let's start our lesson..
#inggeulis mode on
^^

Nah, kali ini kita mao nyoba nambahin gambar di web kite cooyy.. Okeyh, liat contoh:

<body>
<p align="left">
<img src="image2.jpg" />Bla3x
</p>
</body>

Wahai brota n sista, element <img> adalah element di HTML yang bakal bikin lo2 semua bisa nambahin gambar.
Coba deh perhatiin lagi di daftar Element n Atribut yang gue kasih pas materi Element dan Atribut.

Atribut src di pake buat nginput gambar kite soob. Syaratnya, gambar yang kita input harus dalam satu folder yang sama ama file HTML kita.

Do you understand??
#penonton pun geleng2

Gubragss

Okeh, karena ini agak simple, jadi langsung latihan aja dahh.
1. Buat folder image di desktop
2. Masukin gambar yang mau lo taro di HTML lo ke folder image tadi
3. terus bikin file html dengan syntag:

    <html>
    <head>
    <title>Latihan Image</title>
    </head>
    <body>
    <p align="left">
    <img src="nama_gambar" alt="kata2 yang mau lo masukin di gambar" width="lebar(isi pake angka aja, misal 12px)" height="(tinggi)">
     Saatnya mamam
    </p>
    </body>
    </html>

simpen dengan nama latihan_image.html di folder tadi
4. lo cek dehh, klik aja 2x di file html yang tadi dah lo simpen

Selamat mencobaaaa..
(^,~)

0 komentar

Links

Okeh, saatnya kita beranjak ke Hyperlink sob..

Dah pada tau belom Hyperlink kamsudnya opo?? Pasti dah tau kaaan, iya kaaaan..??
#ngedipin mata
(^,~)

"Belooooooom", sahut orang2..

Jiaaahh, oke dayyhh, kita bahas dari awal yak. Kamsudnya bukan dari materi awal lagi, but kita bahas seputar Hyperlink.

>>Hyperlink (Link)
Hyperlink (link), kita singkat link aja yak biar gampang ngetiknya :D
adalah kata, ato kalimat, ato symbol, ato gambar yang kalo lo klik, bakalan ngebawa lo pindah ke halaman lain suatu dokument, atau bagian dari dokumen itu, ato lompat ke website nyang lain. Sampe sinih pahaaam??
#penonton pun ngangguk2

Baguuuuusss..

Nah, elemen yang dipake dalam HTML untuk bisa nge-Link adddalaaaaah, iniiiih : <a>
Coba deh lo liat di daftar element n atribut yang dah gue kasih di sub materi Element dan Atribut
Terus cek di bagian tag <a>, disitu ada keterangan tentang formatnya bozz.. Jadi, syntag <a> ini bisa dipake untuk nge-Link ke bagian artikel, atau ke Web cuyy..

Okeh, kita langsung aja ngoprek yokk..

Contoh:

<a href="http://hackersnotes.blogspot.com/2011/05/element-dan-atribut.html">ini link ke artikel Element dan Atribut</a>

Nah, contoh di atas adalah link yang mengarah ke halaman Element dan Atribut, salah satu artikel yang ada di blog w ini.

Nah, contoh kedua:

<a name="cek">untuk ngecek bagian halaman di dalam suatu pargraf<a>

Kalo contoh di atas ini dipake untuk ngehubungin lu ke suatu baris atau paragraf di dalam suatu artikel..
See?? Okeyh gue rasa lu agak sedikit mudeng, jadi gue kasih buat latihan ajah yakk..

Nih lu coba:

        <html>
        <head>
        <title>Latihan Link</title>
        </head>
        <body>
        <h1><a href="latihan.html" name="cek">Ke paragraf 1</a></h1>
        <h2><a href="latihan.html" name="cuk">Ke paragraf 2</a></h2>
        <p name="cek">
There's a hero
If you look inside your heart
You don't have to be afraid
Of what you are
There's an answer
If you reach into your sould
And the sorrow that you know
Will melt away

[Chorus:]
And then a hero comes along
With the strength to carry on
And you cast your fears aside
And you know you can survive
So when you feel like hope is gone
Look inside you and be strong
And you'll finally see the truth
That a hero lies in you

It's a long road
When you face the world alone
No one reaches out a hand
For you to hold
You can find love
If you search within yourself
And the emptiness you felt
Will disappear
        </p>
        <p name="cuk">
Look into my eyes – you will see
What you mean to me
Search your heart – search your soul
And when you find me there you’ll search no more

Don’t tell me it’s not worth tryin’ for
You can’t tell me it’s not worth dyin’ for
You know it’s true
Everything I do – I do it for you

Look into your heart – you will find
There’s nothin’ there to hide
Take me as I am – take my life
I would give it all – I would sacrifice

Don’t tell me it’s not worth fightin’ for
I can’t help it – there’s nothin’ I want more
Ya know it’s true
Everything I do – I do it for you</p>
        </body>
        </html>

Kasih nama file-nya latihan.html.
Nah, lu coba dehh.. pasti nge-Link ke pargraf 1 n paragraf k-2..

Selamat mencobaaaaa...
^^

0 komentar

Fonts

Wuidiiii, dah nyampe sini nih belajar kita.

Nah, sekarang lo akan belajar untuk mendesain tampilan huruf di website lo. Caranya ya pake element <font>. For the first, coba lo liat di daftar Element n Atribut yang dah lo donlod dari postingan gue tentang Element dan Atribut

Kalo dah lo liat, sekarang cari element dari <font>. Disitu bisa lo liat kalo font punya beberapa atribut, ada size, color, sama face. Untuk sementara kita belajar yang standar dulu aja.

let's try..

contoh:

           <p>
           <font size="12px" face="arial" color="black">
           Font ini berukuran 12 dengan tipe tulisan Arial n warnanya Hitam
           </font>
           </p>

See??
Keliatan kan maksudnya??
Yupz, ketika kita pake atribut size, maka langsung ukuran tulisan kita bakal ngikut sama size yang kita kasih (untuk contoh di atas 12), kalo facenya dirubah jadi times new roman, maka tulisan di atas bakal berubah dari yang arial jadi times new roman, n begitu juga untuk color (warna).

Okeh, untuk nyoba2 dirumah, coba ketik syntax ini:

           <html>
           <head>
           <title>Latihan 1</title>
           </head>
           <body>
           <h1>I Lov Mom</h1>
           <p align="justify">
           <font size="5" face="times new roman" color="red">
          
Bunda, malam menyanyikan senandung doaku padamu
Seorang putra yang jauh darimu
Aku disini menunaikan satu janji
Tuk pulang dengan berjuta bangga
Menemanimu dikala senja menyambangi siang
Bersenda tiap kepingan hati mengukir cerita
           </font>
           </p>
           </body>
           </html>

Selamat mencobaaaa...!!

(^,~)

0 komentar