Membuat Formulir Pendaftaran dengan tag form

Salam Blogger Selalu .. 

Duh rasanya udah lama banget ga posting, bahasan kali ini saya akan post tentang pembuatan form atau formulir.

Jadi contohnya kita akan membuat formulir pendaftaran seperti kalo kita akan daftar email ataupun daftar facebook, tau kan ??? sip ! kita teruskan aja deh, kita ambil contoh membuat formulir pendaftarn facebook.

Mungkin kurang lebih tampilannya seperti di bawah ini : 

Pertanyaan pertama gimana caranya supaya tampilan formnya rapih seperti gambar diatas ? nah ! tipsnya dengan menggunakan tag table, jadi sobat blogger harus udah ngerti pembahasan table.

Yang harus di perhatikan :

1. Jenis huruf yang di pakai : verdana | size : 11px.
2. Background biru muda, kalo mau sama seperti face harus pake gambar, karena gambarnya gradient antara biru sama putih.

Langsung aja di bawah ini scripnya :

<html> <head> <title>Form pendaftaran facebook</title> </head> <body> <table border="0">     <form method="post">     <tr>         <td>Nama Depan</td>         <td>:</td>         <td><input type="text" name="nama_depan" size="30"></td>     </tr>     <tr>         <td>Nama Belakang</td>         <td>:</td>         <td><input type="text" name="nama_belakang" size="30"></td>     </tr>     <tr>         <td>Email Anda</td>         <td>:</td>         <td><input type="text" name="email1" size="30"></td>     </tr>     <tr>         <td>Masukan Ulang Email</td>         <td>:</td>         <td><input type="text" name="email2" size="30"></td>     </tr>     <tr>         <td>Kata Sandi Baru</td>         <td>:</td>         <td><input type="password" name="sandi" size="30"></td>     </tr>     <tr>         <td>Saya Seorang</td>         <td>:</td>         <td>         <select name="jk">             <option value="">Pilih Jenis Kelamin :</option>             <option value="laki - laki">Laki - laki</option>             <option value="Perempuan">Perempuan</option>         </select>         </td>     </tr>     <tr>         <td>Tanggal Lahir</td>         <td>:</td>         <td>         <select name="tanggal">             <option value="">Tanggal :</option>             <option value="1">1</option>             <option value="2">2</option>             <option value="3">3</option>             <option value="4">4</option>         </select>         <select name="bulan">             <option value="">Bulan :</option>             <option value="Januari">Januari</option>             <option value="Februari">Februari</option>             <option value="Maret">Maret</option>             <option value="April">April</option>         </select>         <select name="tahun">             <option value="">Tahun :</option>             <option value="1990">1990</option>             <option value="1991">1991</option>             <option value="1992">1992</option>             <option value="1993">1993</option>         </select>         </td>     </tr>     <tr>         <td></td>         <td></td>         <td><input type="submit" value="Mendaftar"></td>     </tr>     </form> </table> </body> </html>

Berikut screenshoot dari script pertama :

Catatan :

1. Untuk 1 tag <tr> berlaku 1 baris, misal nama depan berlaku dengan isiannya.
2. dalam 1 baris/<tr> ada 3 kolom, kolom pertama dengan nama, kedua (:), tiga textboxnya.
3. table border=0, supaya tidak terlihat garisnya.

Script berikutnya supaya tampilannya agak seperti facebook :

<html> <head> <title>Form pendaftaran facebook</title> </head> <body bgcolor="#FOF8FF" style="font-size:11px; color:darkblue;"> <font face="verdana"> <font color="darkblue" size="5"><b>Mendaftar</b></font><br> Gratis, sampai kapanpun. <hr color="darkblue" style="border-style:solid; border-width:0.1px;"> <table border="0" style="font-size:11px;">     <form method="post">     <tr>         <td align="right">Nama Depan</td>         <td>:</td>         <td><input type="text" name="nama_depan" size="35"></td>     </tr>     <tr>         <td align="right">Nama Belakang</td>         <td>:</td>         <td><input type="text" name="nama_belakang" size="35"></td>     </tr>     <tr>         <td align="right">Email Anda</td>         <td>:</td>         <td><input type="text" name="email1" size="35"></td>     </tr>     <tr>         <td align="right">Masukan Ulang Email</td>         <td>:</td>         <td><input type="text" name="email2" size="35"></td>     </tr>     <tr>         <td align="right">Kata Sandi Baru</td>         <td>:</td>         <td><input type="password" name="sandi" size="35"></td>     </tr>     <tr>         <td align="right">Saya Seorang</td>         <td>:</td>         <td>         <select name="jk">             <option value="">Pilih Jenis Kelamin :</option>             <option value="laki - laki">Laki - laki</option>             <option value="Perempuan">Perempuan</option>         </select>         </td>     </tr>     <tr>         <td align="right">Tanggal Lahir</td>         <td>:</td>         <td>         <select name="tanggal">             <option value="">Tanggal :</option>             <option value="1">1</option>             <option value="2">2</option>             <option value="3">3</option>             <option value="4">4</option>         </select>         <select name="bulan">             <option value="">Bulan :</option>             <option value="Januari">Januari</option>             <option value="Februari">Februari</option>             <option value="Maret">Maret</option>             <option value="April">April</option>         </select>         <select name="tahun">             <option value="">Tahun :</option>             <option value="1990">1990</option>             <option value="1991">1991</option>             <option value="1992">1992</option>             <option value="1993">1993</option>         </select><br>         Mengapa Saya harus memberikan tanggal lahir saya ?         </td>     </tr>     <tr>         <td></td>         <td></td>         <td><input type="submit" value="Mendaftar"></td>     </tr>     </form> </table> </font> <hr color="darkblue" style="border-style:solid; border-width:0.1px;"> </body> </html>

Berikut screenshoot dari script diatas :

Catatan :

1. Script yang berwarna merah tambahan dari script yang pertama.

Ok ! selamat mencoba !!

Read more »

Membuat Halaman Web Sederhana Dengan Hanya Menguasai Pembahasan Table

Salam Blogger Selalu,

Duh udah 2 hari gak posting, gimana kabarnya para netter Indnesia mudah-mudahan baik deh, postingan kali bisa di sebut percobaan pertama dari pembahasan HTML sebelumnya, and mudah - mudahan udah ngerti di pembahasan tentang Table.

Kenapa saya katakan bahwa dengan hanya menguasai pembahasan tentang table kita udah bisa bikin web sederhana ? karena saya rasa pembahasa tentang misal link, pengaturan font, penyisipan gambar itu hanya sebagai atribut, dan saya pikir yang paling inti di html itu cuma table sama form.

Ok ! kita langsung aja, tapi sebelumnya sekedar mengingatkan aja, bahwa tag table itu ada 3 yang intinya, yaitu tag <table> .. </table>, tag <tr> .. </tr>, dan tag <td> .. </td>, juga perhatikan bahwa di setiap tag <table> pasti di dalamnya ada tag <tr> dan di dalam tag <tr> pasti di dalamnya ada tag <td>, siipp !! udah ingat !! kalo kita lanjutkan.

Pertama yang harus di persiapkan adalah tema dari web yang akan kita buat, di sini saya bawa tema yang mudah dulu aja, yaitu web tentang profil, saya contohkan dengan profil saya sendiri, hehehe (sambil promosi) .. terus siapkan juga foto & gambar - gambar yang mendukung, penyesuaan warna yang akan dipakai, font/jenis huruf yang akan dipakai, link yang akan di tampilkan, dan yang terakhir tata letak, misal buat header, link sidebar, isi, dan fotter. yuup's mungkin kurang lebih seperti ini :

Pembuatan Web Sederhana Ala Ilham :

1. Tema : Web Profil Ilham Hamdani
2. Header & foto saya sendiri
3. Warna : Background (#800080), Kombinasi (#EEBBEE & #FFEEDD)
4. Lebar Web : 90% di relosusi monitor 1024
5. Font : Verdana
6. Link : Home, Profil, Tentang dan Kontak

Kita langsung ke TKP !! untuk script pertama anda coba seperti di bawah ini :

<html> <head> <title>Home Page Ilham Hamdani</title> </head> <body bgcolor="#800080" text="#FFEEDD" link="#FFEEDD" vlink="#EEBBEE"> <table border="1" cellpadding="1px" cellspacing="1" width="90%" align="center">     <tr>         <td colspan="2">bar atas</td>     </tr>     <tr>         <td colspan="2">Header Judul</td>     </tr>     <tr>         <td colspan="2">link atas</td>     </tr>     <tr>         <td>Home</td>         <td rowspan="5">isi web</td>     </tr>     <tr>         <td>Profil</td>     </tr>     <tr>         <td>Tentang </td>     </tr>     <tr>         <td>Kontak</td>     </tr>     <tr>         <td>Gambar </td>     </tr>     <tr>         <td colspan="2">Fotter </td>     </tr> </table> </body> </html>

Tampilan Pertama.

Penjelasan :

1. Layoutnya kira - kira seperti diatas.
2. Untuk header di atas, link sebelah kiri, isi di sebelah kiri
3. Perhatikan script yang saya kasih warna kuning, dalam pemakaian "COLSPAN" dan "ROWSPAN".
4. Untuk Colspan saya kasih nilai 2, karena ada 2 colom yang di "MARGE".
5. Untuk Rowspan saya kasih nilai 5 karena ada 5 baris yang di "MARGE"

Lanjut ke tahap berikutnya :

<html> <head> <title>Home Page Ilham Hamdani</title> </head> <body bgcolor="#800080" text="#FFEEDD" link="#FFEEDD" vlink="#EEBBEE"> <table border="1" cellpadding="1px" cellspacing="1" width="90%" align="center">     <tr>         <td colspan="5">Selamat Datang Di Web Site Ilham Hamdani</td>     </tr>     <tr>         <td colspan="5" height="130">Header Judul</td>     </tr>     <tr>         <td align="center">Menu</td>         <td align="center">Home</td>         <td align="center">Profil</td>         <td align="center">Tentang</td>         <td align="center">Kontak</td>     </tr>     <tr>         <td width="21%">Home</td>         <td rowspan="5" colspan="4">isi web</td>     </tr>     <tr>         <td>Profil</td>     </tr>     <tr>         <td>Tentang </td>     </tr>     <tr>         <td>Kontak</td>     </tr>     <tr>         <td height="150">Gambar </td>     </tr>     <tr>         <td colspan="5">Fotter </td>     </tr> </table> </body> </html>

Tampilan Kedua.

Penjelasan :

1. Perhatikan Script yang di beri warna merah, disitu bagian link atas yang tadinya hanya 2 kolom, sekarang menjadi 5 kolom dan text berada di tengah.
2. Otomatis penambahan nilai Colspan di tambah beradasarkan banyak kolom yaitu 5 (script yang berwarna kuning.
3. Penambahan atribut height untuk header nilainya "130" dan bagian untuk gambar di bawah link kiri nilainya "150".

Nah kalo sudah seperti ini kita tinggal sisipkan gambar - gambar yang kira - kira menarik dan konten buat halaman pertama dari web.

Lengkapnya seperti dibawah ini :

<html> <head> <title>Home Page Ilham Hamdani</title> </head> <body bgcolor="#800080" text="#FFEEDD" link="#FFEEDD" vlink="#EEBBEE"> <table border="1" cellpadding="1px" cellspacing="1" width="90%" align="center">     <tr>         <td colspan="5" bgcolor="#EEBBEE">         <font color="Black">         <marquee>         Selamat Datang Di Web Site Ilham Hamdani         </marquee>         </font>         </td>     </tr>     <tr>         <td colspan="5" height="130">         <img src="banner.jpg" width="100%" height="130">         </td>     </tr>     <tr>         <td align="center">Menu</td>         <td align="center"><a href="home.html">Home</a></td>         <td align="center"><a href="prohfiltml">Profil</a></td>         <td align="center"><a href="tentang.html">Tentang</a></td>         <td align="center"><a href="kontak.html">Kontak</a> </td>     </tr>     <tr>         <td width="21%"> <a href="home.html">Home</a></td>         <td rowspan="5" colspan="4" valign="top">         Nama : Ilham Hamdani <br>         Email  : maulidan90@gmail.com<br>         dll.         </td>     </tr>     <tr>         <td><a href="home.html">Profil</a></td>     </tr>     <tr>         <td><a href="home.html">Tentang</a></td>     </tr>     <tr>         <td><a href="home.html">Kontak</a></td>     </tr>     <tr>         <td height="150" align="center"><img src="print.bmp"></td>     </tr>`     <tr>         <td colspan="5" bgcolor="#EEBBEE" align="center">         <font color="Black">Copyright&copy; Ilham Hamdani 2011</font>         </td>     </tr> </table> </body> </html>

Tampilan Akhir.

Catatan : 

1. Setiap script yang di beri warna, anda analisis,caranya denga menghapus dulu scriptnya, nah nanti pasti ada perubahan.
2. Gambar berada dalam 1 folder dengan file html

Ok  !! kalau ada yang mau di tanyakan silahkan komen dibawah, Selamat mencoba !!!!
Salam Blogger Selalu

Read more »

Latihan HTML part 2

Salam Blogger Selalu,

Biasa basa - basi dengan sapaan, kumaha (gimana) rerencangan (temen2) blogger setelah membaca postingan saya Latihan html part 1 mudah - mudahan dah ngerti, kita lanjutkan ke pembahasa tabel, link, menampilkan gambar dan form.

Mungkin pada bagian ini yang saya rasa sangat penting dalam mempelajari html, kok bisa ? kita liat aja nanti setelah anda mempelajari pembahasan tentang tabel dan form, pokonya serasa ada hasilnya pada saat kita mempelajari html ini. 

Untuk yang pertama kita masuk ke tabel dulu, sebetulnya bagian tabel ini kalau dikatakan paling seru mempelajarinya, gimana yah ? susah - susah gampang !! saya akan simpulkan dalam mempelajari tabel ini, yang harus anda perhatikan tag table ini yang intinya hanya ada 3 tag, yang pertama tag <table>...<able>, <tr> ...</tr>, dan <td>...</td>, setelah kita tahu tag inti, yang harus anda ingat juga bahwa ketiganya ini saling berhubungan, statment penting (wisss .. ) hehee  "diawali dengan tag <table> dan dalam table itu pasti ada tag <tr> dan didalam tag tr itu pasti ada tag <td> dan tag <tr> adalah untuk membuat sebuah baris sedang tag <td> untuk membuat sebuah kolom" contoh penulisannya :

<table> <tr> <td> isi yang akan ditampilkan </td> </tr> </table>

berikut contohnya lengkapnya :

<html> <head> <title>latihan tabel</title> <body> <table border="1"> <tr> <td> baris 1 kolom 1 </td> <td> baris 1 kolom2 </td> </tr> <tr> <td> baris 2 kolom1 </td> <td> baris 2 kolom2 </td> </tr> <tr> <td> baris 3 kolom1 </td> <td> baris 3 kolom2 </td> </tr>  </table> </body> </html>

latihan tabel.

Selanjutnya yang harus di pahami dalam table yaitu atribut "colspan" dan "rowspan", awas anda harus tahu dulu perbedaan tag dan atribut, kalau belum baca di artikel saya sebelumnya sekilas tag - tag html, kalau sudah ngerti kita lanjutkan, untuk colspan dan rowspan saya menyimpulkan dan mencontohkan bahwa colspan dan rowspan, kalau di Microsoft Word/Excell ada yang disebut dengan istilah "Marge And Center" saya anggap anda tahu, misal : untuk mengatur table yang tadinya di baris pertama itu 2 kolom, selanjutnya dengan pengaturan colspan akan menjadi 1 kolom, ok ! kita lihat contoh penerapannya :

<html> <head> <title>latihan tabel</title> <body> <table border="1"> <tr bgcolor="blue"> <td colspan="2"> baris 1 kolom 1 (pengaturan dengan colspan) </td> </tr> <tr> <td> baris 2 kolom1 </td> <td> baris 2 kolom2 </td> </tr> <tr> <td rowspan="2" bgcolor="red"> baris 3 kolom1 (pengaturan dengan rowspan) </td> <td> baris 3 kolom2 </td> </tr> <tr> <td> baris 4 kolom2 </td> </tr>  </table> </body> </html>

contoh penggunaan colspan & rowspan.

Catatan :

1. Atribut colspan dan rowspan hanya berlaku di tag <td> (<td colspan="2">)
2. Nilai yang kita masukan misal "2", nilai tersebut adalah berapa banyak colom/baris yang akan kita merge, misal diatas karena ada 2 kolom sedang baris 1 hanya ada 1 kolom, nah untuk bisa kelihatan bersatu kita gunakan atribut colspan, begitu juga penggunaan rowspan.
3. Harus diingat, saya katakan diatas "statment penting", saya katakan lagi bahwa <tr> adalah baris dan <td> adalah kolom, jadi anda analisis dalam penulisan <tr> dan <td>, harus dimana anda meletakkan colspan dan rowspan.

Selanjutnya link , apa itu link ???? ... bisa dibilang link itu sebuah alat (misalkan) yang berfungsi dimana kita akan berpindah tempat, misalkan : anda masuk ke om http://www.google.com,  nah yang disebut link adalah tulisan yang ada di atas seperti ada tulisan (web, gambar, Maps, Berita, dll) nah disaat kita masuk ke halaman Om google, kita akan berada di halaman "link web" yang pencariannya pun hasilnya akan berupa web, nah setelah kita klik link "gambar" otomatis berpinda ke halaman google gambar, otomatis hasil yang akan kita cari adalah gambar, ok! mengerti pemirsa ?? hehe ,. misal  contoh sederhananya anda memiliki 2 file dokumen html, file 1 (nama filenya lat1.html) dan file 2 (nama filenya lat2.html), kemudian kita jalankan/doble klik lat1.html, isinya adalah link yang apabila di "klik" kita akan berada di file lat2.html, sipp mudah - mudahan ngerti, berikut contoh penerannya :

<html> <head> <title>latihan link</title> <body bgcolor="yellow" text="white"> <a href="lat2.html">akan masuk ke lat2.html</a> </body> </html>

Catatan :

1. Tagnya adalah <a> ... </a>
2. Atribut yang harus di perhatikan adalah "href" 
3. Penulisannya <a href="lat2.html">akan masuk ke lat2.html</a>, jadi atribut "href" berfungsi untuk menuliskan akan kemana link ini di sambungkan.
4. perhatikan di browser paling bawah adal tulisan "file://home/theberingin/Unduhan/blog/lat2.html" itu menunjukkan bahwa apabila kita klik akan menuju ke dokumen html yang bernama "lat2.html"
5. Cara penulisannya sama seperti atribut background di tag body, <a href=" nama_file.html"> atau kalau beda folder <a href="nama_folder/nama_file.html">

Next ->> .. Cara menampilkan gambar, tag yang digunakan adalah <img> penulisannya sama seperti link, tapi kalau di <img> tag yang berlaku adalah "src" contoh : <img src="nama_file_gambar.jpg"> atau <img src="nama_folder/nama_file_gambar.jpg">, berikut contohnya :

<html> <head> <title>latihan menampilkan gambar</title> <body bgcolor="yellow" text="white"> <h3 align="center">Menampilkan Gambar</h3><br> <img src="Windows-8.jpg" width="200px" height="200px"> </body> </html>

Menampilkan gambar.

Catatan :

1. Nama file gambar harus sama, cantumkan beserta type file gambarnya, misal : *.jpg, *.gif, sesuai gambar yang akan ditampilkan.
2. Beda dengan background, kalau background itu keseluruhan browser, kalau image bebas kita akan menampilkannya dimana, dan juga bisa diatur lebar dan tinggi gambar tersebut dengan atribut width & height.

Huft ,.. cape juga ,.. kita sampai ke pembahasan yang terakhir yaitu FORM,  menurut saya pembahasan form itu yang paling mudah, langsung aja ke contoh penerapannya :

<html> <head> <title>latihan tag form</title> <body bgcolor="yellow" text="black"> <h3 align="center">Masukkan Data Anda</h3><br> <p align="center"> <form method="post" action="lat7.html"> nama : <input type="text" name="nama" size="20"><br> alamat : <input type="text" name="alamat" size="30"><br> jenis kelamin  : <input type="radio" name="jk" value="l">Laki - laki <input type="radio" name="jk"  value="p">Perempuan<br> status : <select name="status"> <option value="l">lajang</option><option value="n">nikah</option> </select><br> pekerjaan : <input name="pek" type="checkbox" value="s">Swasta <input name="pek" type="checkbox" value="b">buruh<br> pesan : <textarea name="pesan"> isi pesan</textarea><br> password : <input type="password" name="passwd" size="20"><br> <input type="submit" value="Save"><input type="reset" value="batal"> </p> </body> </html>

latihan tag form.

Catatan :

1. Mengapa dibilang mudah ? yang harus di perhatikan bahwa dalam pembuatan form diawali dengan tag <form> </form>.
2. Selanjutnya tag <input> ada atribut "type" nah disini anda tinggal coba apa saja type - typenya, misal <input type="text"> yang akan tampil adalah atau <input type="radio"> yang akan tampil adalah jadi kita tinggal coba type - typenya aja.
3. Kemudian di tag <select> .. </select> itu berlaku <option>..</option>.

Alhamdulillah, akhirnya !! mudah bukan ??? Selamat mencoba, postingan selanjutnya bakalan makin seru, tunggu aja ! ..
Salam Blogger Selalu.

Read more »

Latihan HTML part 1

Salam Blogger Selalu,

hai sobat blogger yang budiman (inget alangkah lucunya negri ini,.. heheh) ,. setelah kita mengenal sekilas tag - tag html kali ini saya akan mencoba mempraktekkannya, untuk latihan html part 1 ini kita akan membahas tentang pengaturan text, tapi sebelumnya saya akan memberikan tips cara cepat belajar HTML, ok ! kita langsung aja !!!.

Tips ini menurut pendapat sih,.. hehe ,. tapi boleh anda coba ! yang pertama, yang harus kita pahami adalah setruktur penulisan HTML, setelah kita mengerti cara penulisannya, saya anjurkan anda fokus ke mempelajari bagian pembahasan Tabel, Menampilkan gambar, link dan Form, setelah paham mempelajari yang 3 ini, kita langsung coba tag - tag pengaturan teks, tapi untuk kali ini saya akan bahas dalam pengaturan teks.

berikut contoh pertama yaitu Heading/Judul :

<html> <head> <title>Latihan tag heading</title> </head> <body> <h1>Belajar heading/judul dengan h1</h1> <h2>Belajar heading/judul dengan h2</h2> <h3>Belajar heading/judul dengan h3</h3> <h4>Belajar heading/judul dengan h4</h4> <h5>Belajar heading/judul dengan h5</h5> <h6>Belajar heading/judul dengan h6</h6> </body> </html>

latihan tag header.

Berikut contoh penggunaan tag Paragraf <p> :

<html> <head> <title>latihan tag paragraf</title> </head> <body bgcolor="blue" text="white"> <p align="left"><b>paragraf rata kiri</b></p> <p align="center"><i>paragraf rata tengah</i></p> <p align="right"><u>paragraf rata kanan</u></p> <p align="justify">paragraf rata kiri kanan, coretan-ilham.blogspot.com coretan-ilham.blogspot.com coretan-ilham.blogspot.com coretan-ilham.blogspot.com coretan-ilham.blogspot.com</p> </body> </html>

 

latihan paragraf, b, i, dan u

Berikut contoh penggunaan tag font :

<html> <head> <title>latihan tag font</title> </head> <body bgcolor="blue" text="white"> <font face="arial" color="yellow" size="7">http://coretan-ilham.blogspot.com  </font><br> <font face="times new roman" color="blue" size="6">http://coretan-ilham.blogspot.com  </font><br> <font face="courier" color="yellow" size="5">http://coretan-ilham.blogspot.com  </font><br> <font face="helvetica" color="yellow" size="2">http://coretan-ilham.blogspot.com  </font><br> </body> </html>

latihan tag font.

Berikut contoh penggunaan tag list/daftar :

<html> <head> <title>latihan tag list/daftar</title> </head> <body background="Windows-8.jpg" text="white"> <h3 align="center" >Contoh list/daftar dengan ul</h3> <ul type="square"> <li>http://coretan-ilham.blogspot.com</li> <li>http://coretan-ilham.blogspot.com</li> </ul> <hr> <h3 align="center">Contoh list/daftar dengan ol</h3> <ol type="1"> <li>http://coretan-ilham.blogspot.com</li> <li>http://coretan-ilham.blogspot.com</li> </ol> </body> </html>

 contoh penggunaan list dan background image.

Catatan : 

background adalah atribut dari body, cara penulisannya (background ="nama_gambar.jpg") beserta type filenya misal *.jpg, harus ada dalam satu directory, misal dokumen html tersebut disimpan dalam folder latihan 4, nah si gambar pun harus ada dalam folder latihan 4, ataupun di misalkan dokumen html kita simpan dalam folder latihan 4, nah gambar kita simpan di dalam folder latihan 4/gambar, kita simpan di folder gambar, berarti cara penulisannya adalah <body backgorund="folder_gambar/nama_gambar.jpg">, jadi nama folder gambar dulu cantumkan, selanjutnya nama file gambarnya.

Oke gampangkan ?? ,.. selamat mencoba dan tunggu postingan berikutnya !! Salam Blogger Selalu.

Read more »

Sekilas Tag - tag HTML

Salam Blogger Selalu,

Kali ini saya akan memaparkan sedikit dari beberapa tag - tag html, tapi perlu di ketahui bahwa ada yang dinamakan tag dan ada juga yang dinamakan atribut, tag adalah komponen utama sedangkan atribut adalah subab dari tag, bisa dikatakan bahwa setiap tag mempunyai atributnya masing - masing, misalkan saya contohkan pada tag untuk mengatur huruf yaitu tag <font> .. </font>, misalkan untuk mengatur huruf, kita akan memberikan pengaturan bahwa huruf tersebut contoh : "SMK Cijangkar" akan diatur dengan type huruf : Arial, warna : hitam, dan besar huruf : 7, maka sintak/tag yang akan kita tuliskan sebagai berikut : 

<font face="arial" color="black" size="7"> SMK Cijangkar </font>

jadi bisa disimpulkan tag utama dari sintak tersebut adalah tag "font" dan atribut yang "Berlaku" adalah face (type huruf), color (warna huruf), dan size (besar huruf). Mengapa kata berlaku saya beri tanda kutip ? karena tidak setiap atribut berlaku pada semua tag, misal atribut "bgcolor" yang berlaku di tag "body" kita simpan di tag "font", sudah tentu tidak akan ada pengaruh pada atau tidak berlaku, ok ! berarti sudah tahu kan perbedaan tag dengan atribut ??.
berikut adalah Tag - tag,  Atribut - atribut, beserta fungsinya  :

Tag Utama
Tag	Atribut	Deskripsi
<html> </html>		Jenis Dokumen, terdapat pada awal dan akhir file HTML
<head> </head>		Keterangan umum, seperti judul atau pemanggilan fungsi misal : css, js, ajax dsb.
<title> </title>		Judul dokumen, terdapat pada bagian head.
<body> </body>	bgcolor background text link vlink bgsound font topmargin leftmargin marginheight marginwidth	harus diketahui, atribut yang terdapat tag body otomatis akan mengatur semua isi dokumen html tersebut.
Pengaturan Teks
Tag	Atribut	Deskripsi
<b></b>		Cetak Tebal (contoh)
<i></i>		Cetak miring (contoh)
<u></u>		Garis bawah (contoh)
<strike> </strike>		Huruf tercoret (contoh)
<sub> </sub>		Subscript (Contoh)
<sup> </sup>		Superscript (contoh)
<center> </center>		rata tengah (contoh)
<blink> </blink>		huruf berkedip (contoh)
<h1></h1>		Contoh
<h2></h2>		Contoh
<h3></h3>		Contoh
<h4></h4>		Contoh
<h5></h5>		Contoh
<h6></h6>		Contoh
<font> </font>	color face size	format teks
<p></p>	align	Paragraf
Link
Tag	Atribut	Deskripsi
<a></a>	href target title style class name id	link, agar bisa saling terkait antara dua/lebi dokumen
List (Daftar)
Tag	Atribut	Deskripsi
<ul></ul>	type (Disc, Circle, square)	Daftar dengan simbol (digunakan dengan li)
<ol></ol>	type(A,a,I,i,1)	Daftar dengan angka dan huruf(digunakan dengan li)
li	Element list	harus ada di setiap ul maupun li
Image/Gambar
Tag	Atribut	Deskripsi
img	src(url) alt width height border	Menampilkan sebuah
Table
Tag	Atribut	Deskripsi
<table> </table>	border align width height cellspacing cellpadding id style bgcolor background valign title	Mengatur semua elemen table
<tr></tr>	height bgcolor background align valign title	Membuat baris baru
<td></td>	width height align valign colspan rowspan bgcolor background title	Membuat kolom baru
<th></th>	width height align valign colspan rowspan bgcolor background title	Sama seperti <td>, hanya husus untuk header table, otomatis huruf tercetak tebal dan posisi huruf di tengah.
Form
Tag	Atribut	Deskripsi
<form> </form>	method (post, get) action(url) name enctype (multipart/eta form-data)	Pengatuan form
<input>	text password checkbox radio image hidden submit reset size name maxlength value	checkbox radio hidden
<select> <option> </option> </select>	name value selected	Pilihan 1 Pilihan 2
<textarea> </textarea>	name value cols rows	Textarea

Read more »

Mengenal HTML lebih lanjut

Salam Blogger Selalu, ..

Postingan kali saya akan melanjutkan materi tentang HTML, kita langsung aja ok!.

Sebuah dokumen html pada dasarnya berstruktur dan dibagi menjadi 2 bagian  besar, yaitu HEADER (bagian atas) dan BODY (tubuh dokumen). Masing - masing berisikan judul dokumen dan informasi - informasi dasar lain, sedangkan BODY adalah data/isi yang akan di tampilkannya ke halaman web. secara umum bentuknya seperti gambar di bawah ini.

Struktur HTML

Berhubung HTML adalah sebuah file dokumen tentu kita membutuhkan alat untuk mengetikkan simbol - simbol tersebut, seperti halnya kita akan membuat sebuah dokumen word tentu alat/software yang harus ada dikompi kita adalah Microsoft Office Word, nah untuk mengetikka html pun ada alat khusus diantaranya NOTEPAD ataupun text editor lain misalnya seperti Notepad++, Microsoft Ofiice Front Page, atau yang lebih canggihnya lagi yaitu Macromedia Dreamwever, oke ! setelah kita mengetahui dimana harus menulis sebuah dokumen html, kita lanjutkan lagi setrukutur html atau setruktur penulisan dokumen html.

Sudah jelas kita lihat gambar diatas bahwa dalam sebuah dokumen html ada dua bagian penting yaitu bagian HEAD dan BODY, sebelumnya ganti istilah simbol - simbol html denga Tag - tag / sintak html, tag - tag html selalu di awali dengan < ... > dan diakhiri </ ... > dimana titik - titik tersebut diisi dengan tag - tag html seperti b, i, u, font, html, body, titile dsb. namun ada juga tag yang tidak diakhiri dengan </ ... > seperti tag <br>, <hr> dll. 

Selanjutnya tag yang pertama kali harus kita tulis adalah :

<html>

............

</html>

tag tersebut akan memberi tanda awal dan akhir suatu dokumen html. kemudian titik tersebut kita isi dengan bagian yang pertama dan kedua, yaitu bagian head dengan tagnya adalah <head> dan </head>. di dalam tag ini kita akan meletakan judul dokumen , dengan tag <title> dan </title>, kemudian ke-2 adalah bagian BODY, nah perlu anda ketahui bahwa semua yang akan kita tampilkan di browser adalah terdapat dibagian ini yaitu andara <body> ..... isi yang akan di tampilkan ... </body>, saya akan beri contoh kecil sebuah dokumen html.

<html> <head> <title> Belajar HTML bagian 1 </title> <body> Selamat datang di web pertamaku </body> </html>

belum cukup sampai sini, setelah kita mengetahui struktur penulisan html dan dimana kita menuliskan dokumen html, kita juga harus mengetahui type file sebuah dokumen html, type file sebuah dokumen html adalah (*.html) jadi setelah kita mengetiknya kita save dengan type/ekstensi file .html.

berikut hasil dari tag/sintak diatas setelah di tampilkan di browser, oh ia lupa untuk membuka dokumen html kita langsung doble-click aja langsung.

save & type file dokumen html.

Hasil dari tag diatas.

Nah para netter selamat mencoba, semoga berhasil, Salam Blogger Selalu.

Read more »

HTML (Hypertext Markup Language) ???

Assalamu'alaikum ,.. 

Salam Blogger Selalu, hai para netter sejati dan blogger sejati indonesia, (langsung tancap gas) .. mungkin bisa di katakan postingan ini dan di blog saya ini termasuk postingan pertama.

Nah .. berhubungan pada saat saya masih berada di bangku smk termasuk anak RPL (Rekayasa Perangkat Lunak) ,. katanya sih,.. untuk postingan pertama ini , saya teringat saat - saat saya masih sekolah yaitu pelajaran produktif yang paling saya sukai "HTML", saat kita mendengar kata "HTML", timbul pertanyaan, "Apa itu HTML ?? " oke kita mulai deh .. 

HTML singkatan dari Hypertext markup Language, yang karena anak RPL itu agak bergengsi "menurut saya" jadi mereka menyebutnya dengan istilah/sebutan yang agak tinggi "Bahasa Pemrograman WEB", kalau buat saya yang masih awam apalagi para netter yang mungkin enggak pernah mendengar apa itu HTML di tambah mendengar denga istilah "bahasa pemrograman", nah kalau sudah mendengar kata pemrograman wah ... dalam pikiran kita udah di save bahwa pasti mempelajarinya sulit. nah sekarang saya akan menerangkan menurut pendapat saya sendiri.

HTML (Hypertext Markup language) merupakan simbol - simbol atau tag - tag yang dimaksudkan untuk menampilkannya sebuah bentuk/tampilan di web browser, baik menampilkan berupa text, image/gambar, audio, maupun video, yang di tik/di tulis di dalam sebuah file document yang type filenya pun / ekstensionnya (*.html), jadi simpan/ save baik - baik dalam pikiran kita bahwa html adalah hanya sebuah simbol - simbol.

Tujuan dari kita mempelajari html ini yaitu bagaimana cara kita membuat sebuah halaman web, contoh : membuat halaman web "ilmu komputer"  ataupun tampilan blog ini, jadi semua yang ada dari mulai text , grapich dan bentuk web ini dibuat dengan simbol - simbol HTML, terus apa dong manfaatnya ??? 

Eiiittt ,... jangan salah sekarang udah serba teknologi, udah serba online, udah serba jaringan kalau yang lebih ekstrimnya lagi udah serba gaib (Wisss) ,.. sampai - sampai ada istilah perusahaan virtual, orang yang punya perusahaan tersebut kaya tapi kok gak ada perusahaannya, dimana dibangun perusahaannya ataupun produk apa yang dibuatnya, jangan heran semua udah serba teknologi. nah dari situ ada yang disebut dengan istilah jaringan,  terus ada internet, sekarang bicara internet, manfaatnya banyak manfaat yang bisa diambil diantaranya yaitu kebutuhan pada "Informasi" dari mulai informasi yang dibutuhkan baik untuk perorangan, organisasi maupun perusahaan, dari situ ada yang dinamakan dengan "WEB SITE", nah seperti yang sudah saya katakan bahwa html itu tujuannya untuk membuat halaman web site, nah timbul juga perusahaan jasa pembuatan web site, kalau di pikir - pikir UUD lagi (ujung - ujungnya duit) ,.. hahhah ,.. kalau kita udah mahir dalam bidang  ini, insya alloh deh bisa jadi peluang bisnis juga, karena yang saya tahu omsetnya bukan seratus duaratus ribu, tapi sampai jutaan. 

nah gimana apakah anda tertarik mempelajrinya ?? .. kalau anda tertarik mempelajarinya tunggu dipostingan saya berikutnya !! heheh ,.. 

Huuuhhh ... cape juga ,. akhir kata saya ucapkan Salam Blogger Selalu.

Read more »