Kamis, 25 Agustus 2011

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

Selasa, 23 Agustus 2011

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.

    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.

    Senin, 22 Agustus 2011

    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 listharus 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
    <textarea>

    </textarea>
    name
    value
    cols
    rows

    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.

    Minggu, 21 Agustus 2011

    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.

    Kamis, 18 Agustus 2011

    Launcing Blog Ilham Hamdani, Goooo .... blog !!!

    Assalamu'alaikum Wr. Wb.
    Salam blogger selalu, syukur alhamdulillah saya ucapkan kepada Alloh Swt, dzat yang maha menciptakan segala sesuatu, di langit maupun di bumi. sholawat serta salam semoga selalu tercurah limpahkan kepada baginda kita yakni Habibana Wanabiyana Muhammad Saw, kepada keluarganya, sahabatnya, tabi'in tabi'atnya, dan mudah - mudahan kepada kita selaku ummatnya sampai akhir zaman. amin.
    Saya ucapkan syukur alhamdulillah juga kepada orang tua yang membersarkan saya hingga menjadi seperti sekarang, kepada teman - teman saya, khususnya kepada Saeful Fajar yang telah menginsfirasi saya hingga terciptalah rumah saya ini.
    oke ,. siap - siap ,.. (pengguntingan pita peresmian) haha ,.. formal banget,.. hehe ,.. dalam kesempatan ini saya ingin mengucapkan kepada para blogger sejati bahwasannya (wissss ,.. kata - katanya) ,. hehhe ,.. bertambah lagi 1 orang yang mudah - mudahan betah menempati dunia baru yaitu DUNIA MAYA (eiit bukan luna maya), yang mungkin dan hanya saya tahu masih tetap di kuasai oleh kerajaan GOOGLE dan anaknya pangeran FACEBOOK ,.. (haha ,. lebay), dan para petinggi keranjaan sampai antek2nya, termasuk saya yang mungkin menambah sempit dunia maya sekaligus mengurangi lapak yang ada, jadi mohon bimbingannya nih buat para MASTER BLOGGER. (hehe ,. ngarep).
    PRONOLOGNYA seperti ini : tiga hari yang lalu pada saat sedang main dengan teman - teman saya di kota FACEBOOK ,.. hehe ,.. eh tiba - tiba datang seorang teman saya pake motor baru yang bermerk kenzzo-saeful.blogspot.com, nah dari situ saya mulai tertarik dengan dunia maya yang serba ada, baik yang bermanfaat maupun yang maksiat (semoga dijauhkan), percakapan dimulai ,..
    ilham : wiss,. apa kabar pul ? ..
    saeful : alhadulillah baik, kamu ham ?
    ilham : alhamdulillah masih diberikan kenikmatan sehat oleh Alloh Swt (so' alim) ,.. heheh ,.. wah motor baru nih ?
    saeful : yoi,.. ?
    ilham : wah ,.. "gmna nih kalau saya pengen kya kmu" ,.. ???? (dst. panjang!!)
    nah dari statment yang bertanda kutip (") saya mulai tertarik untuk membuat blog ini. maka dari saya ucapkan SELAMAT DATANG DI RUMAH SAYA DAN SELAMAT DATANG DUNIA ,.. semoga rumah saya ini bermanfaat bagi para netter indonesia khususnya, karena dalam hadist dikatakan "khairunnas anfa'uhum linnas" yang artinya : sebaik - baiknya manusia diantaramu adalah yang paling banyak bermanfaat bagi orang lain.
    oke sampai berjumpa lagi di postingan berikutnya, Salam Blogger Selalu.

     
    Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Grants For Single Moms