Kadek Bagus Official Site » kode html http://www.kadekbagus.com Membahas teknologi informasi, Programming, Networking, Database, dll Tue, 17 Jan 2012 14:32:56 +0000 en hourly 1 Menambahkan Video http://www.kadekbagus.com/menambahkan-video.html http://www.kadekbagus.com/menambahkan-video.html#comments Mon, 13 Oct 2008 09:09:06 +0000 Kadek Bagus http://localhost/wp1/?p=10 Menambahkan video ke dalam dokumen HTML ? bisa saja…..tidak sulit koq cukup dengan memberikan tag <embed>. Perlu diingat tidak semua format video disupport, yang sudah pasti bisa video quicktime (*.mov). Selain video, tag <embed> juga bisa digunakan untuk menambahkan musik ke halaman website.

Sebelum memulai terlebih dahulu persiapkan file video yang akan ditampilkan di web, kemudian upload file video tersebut ke server, tetapi jika anda berniat mencoba tanpa mengunakan server (dieksekusi langsung menggunakan browser) maka file video harus diletakkan satu folder dengan file HTML nya. Sebagai contoh saya akan mencoba menambahkan video quicktime dengan nama skate.mov ke halaman web, maka saya tambahkan tag berikut :

<embed src=”skate.mov” width=”320″ height=”320″></embed>

src : file video yang akan ditampilkan beserta path (lokasinya) jika diletakkan di folder lain

width : lebar video

height : tinggi video

Sedangkan untuk file musik, misalkan anda akan menambahkan file midi dengan nama lagu1.mid maka anda cukup mengganti parameter src=”lagu1.mid”, parameter width dan height tidak perlu dituliskan. Berikut ini contoh halaman web yang memuat sebuah video quictime :

<html>
<head>
<title>Nonton Film</title>
</head>
<body>
<embed src=”skate.mov” width=”320″ height=”320″></embed>
</body>
</html>

Simpan sebagai film.htm , jalankan maka hasilnya akan seperti berikut ini :

HTML

]]> http://www.kadekbagus.com/menambahkan-video.html/feed 1 Membuat Form http://www.kadekbagus.com/membuat-form.html http://www.kadekbagus.com/membuat-form.html#comments Sun, 12 Oct 2008 05:45:35 +0000 Kadek Bagus http://localhost/wp1/?p=9 Kali ini saya akan membahas mengenai form, untuk membuat form gunakan tag <form>, lalu apa kegunaan dari tag ini ? di dalam tag <form> anda dapat meletakkan komponen lainnya seperti tombol submit, textfield, textarea, combo box, radio button dan lain sebagainya. Semuanya akan dibahas disini, tetapi terlebih dahulu anda perlu mengetahui parameter apa saja yang ada di dalam tag <form>

  • parameter tag <form>

name : nama tag <form>

action : tujuan data yang akan dikirim

method : metode transfer data apakah GET atau POST

  • membuat textfield

untuk membuat textfield gunakan tag sebagai berikut :

<input type=”text” name=”field1″ size=”20″ maxlength=”15″> , dimana

name : adalah nama

size : adalah ukuran panjang dari textfield tersebut

maxlength : maksimal huruf yang bisa ditampung textfield tersebut

  • membuat hidden field

hidden field sebenarnya sama saja dengan textfield bedanya hidden field tidak terlihat di browser (hidden) tetapi kalau dibuka sourcenya baru akan terlihat. untuk membuat hidden field cukup dengan mengubah parameter type=”hidden” seperti berikut ini :

<input type=”hidden” name=”field2″ value=”123″>

name : nama dari hidden field

value : isi data

  • membuat textarea

untuk membuat textarea gunakan tag sebagai berikut :

<textarea name=”area1″ cols=”10″ rows=”5″></textarea>

cols : lebar textarea

rows : panjang textarea

  • membuat checkbox

untuk membuat checkbox gunakan tag sebagai berikut :

<input type=”checkbox” name=”cek1″ value=”ya” checked>

name : nama dari checkbox

value : isi data

checked : jika parameter ini dituliskan maka checkbox tersebut akan tercentang

  • membuat radio button

untuk membuat radio button gunakan tag sebagai berikut :

<input type=”radio” name=”r1″ value=”ok” checked>

name : nama dari radio button

value : isi data

checked : jika parameter ini dituliskan maka radio button tersebut akan terpilih

jika terdapat radio button dengan name yang sama maka akan terbentuk radio group, dimana hanya salah satu radio button yang bisa di pilih ( tidak bisa memilih lebih dari satu)

  • membuat combo box

untuk membuat combo box gunakan tag <select> kemudian untuk membuat isi dari combo box tersebut gunakan tag <option> seperti berikut ini :

<select name=”box1″>

<option value=”senin”>Senin</option>

<option value=”selasa”>Selasa</option>

<option value=”rabu”>Rabu</option>

</select>

name : nama dari combo box

value : isi data

  • membuat tombol

untuk membuat tombol submit gunakan tag berikut ini :

<input type=”submit” name=”tombol1″ value=”ok”>

name : nama dari tombol

value : teks yang akan ditampilkan pada tombol

sedangkan untuk membuat tombol reset cukup ubah parameter type=”reset”

]]> http://www.kadekbagus.com/membuat-form.html/feed 0 Belajar HTML bagian 3 http://www.kadekbagus.com/belajar-html-bagian-3.html http://www.kadekbagus.com/belajar-html-bagian-3.html#comments Sat, 11 Oct 2008 06:29:53 +0000 Kadek Bagus http://localhost/wp1/?p=8 Pada kesempatan kali ini saya akan membahas lebih banyak lagi tag tag HTML yang sering digunakan untuk membuat suatu halaman web, antara lain memformat teks, menambahkan gambar, membuat link, tabel dan lain sebagainya. Semoga bermanfaat.

  • membuat garis horizontal

untuk membuat garis horizontal gunakan tag <hr>, tag ini mempunyai beberapa parameter antara lain :

align : untuk mengatur posisi garis apakah LEFT, RIGHT atau CENTER

width : menentukan lebar garis

size : ketebalan garis

noshade : menonaktifkan shade

color : warna garis

contoh : <hr align=”center” width=”500″ size=”3″ color=”red”>

<hr align=”left” width=”337″ size=”10″ color=”blue”>

  • memformat teks

untuk memformat teks gunakan tag <font>, tag ini mempunyai beberapa parameter antara lain :

face : jenis font (misal arial, verdana, times new roman)

size : ukuran font (1,2,3,dst)

color : warna font

contoh : <font face=”arial” size=”5″ color=”blue”>halo</font>

<font face=”verdana” size=”3″ color=”red”>halo</font>

  • membuat teks berjalan

untuk membuat teks berjalan gunakan tag <marquee>, tag ini mempunyai beberapa parameter antara lain :

direction : arah teks apakah UP, DOWN, LEFT atau RIGHT

behavior : tingkah laku teks apakah ALTERNATE, SCROLL atau SLIDE

contoh : <marquee direction=”left”>halo sobat</marquee>

<marquee behavior=”alternate”>ayo</marquee>

  • menambahkan gambar

untuk menambahkan gambar gunakan tag <img>, tag ini mempunyai beberapa parameter antara lain :

src : nama file gambar yang akan ditampilkan beserta lokasinya

width : lebar gambar

height : tinggi gambar

alt : teks alternatif yang akan muncul jika gambar tidak bisa ditampilkan

contoh : <img src=”gambar/mobil.jpg” alt=”gambar mobil”>

<img src=”bunga.gif” width=”300″ height=”200″>

  • membuat link ke halaman lain

untuk membuat link ke halaman lain gunakan tag <a>, tag ini mempunyai beberapa parameter antara lain :

href : halaman web yang hendak di panggil beserta lokasinya

target : untuk menampilkan link pada jendela baru gunakan “_blank”

contoh : <a href=”login.html”>menu login</a>

<a href=”berita.htm” target=”_blank”>klik disini</a>

  • membuat list

list atau daftar ada dua macam yaitu list tanpa angka dan list dengan angka, untuk membuat list tanpa angka gunakan tag <ul> sedangkan list dengan angka gunakan tag <ol>, lalu untuk setiap item di dalamnya gunakan tag <li>

contoh : <ul>

<li>mangga</li>

<li>jeruk</li>

<li>pisang</li>

</ul>

<ol>

<li>mangga</li>

<li>jeruk</li>

<li>pisang</li>

</ol>

  • membuat tabel

untuk membuat tabel gunakan tag <table>, tag ini mempunyai beberapa parameter antara lain

border : bingkai dari tabel, semakin besar nilai semakin tebal bingkai

bordercolor : warna bingkai

cellspacing : jarak antar sel dalam tabel

tag <table> tidak bisa berdiri sendiri, diperlukan tag <tr> untuk membuat baris (row) dan tag <td> untuk membuat kolom, ada juga tag <th> untuk membuat judul kolom. untuk tag <td> dan <th> mempunyai beberapa parameter antara lain

align : untuk menentukan posisi

rowspan: untuk mengabungkan dua atau lebih kolom

colspan : untuk mengabungkan dua atau lebih baris

contoh : <table width=”200″ border=”1″>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>jambu</td>

<td>melon</td>

<td>semangka</td>

</tr>

</table>

]]> http://www.kadekbagus.com/belajar-html-bagian-3.html/feed 2 Belajar HTML bagian 2 http://www.kadekbagus.com/belajar-html-bagian-2.html http://www.kadekbagus.com/belajar-html-bagian-2.html#comments Fri, 10 Oct 2008 14:39:32 +0000 Kadek Bagus http://localhost/wp1/?p=6 Pada artikel sebelumnya anda sudah belajar struktur dasar dokumen HTML. Perlu diingat isi dari suatu halaman web terletak pada tag <body> , jadi jika anda ingin membuat paragraf, link, menampilkan gambar dan lain sebagainya letakkan pada tag <body>. Nah sekarang, saya akan bahas satu persatu tag HTML apa saja yang bisa kita pakai untuk membuat halaman web.

  • membuat paragraf

untuk membuat paragraf gunakan tag <p> dan diakhiri tag </p>

contoh : <p>ini ibu budi</p>

  • membuat heading

untuk membuat heading gunakan tag <h1> sampai <h6>, <h1> adalah yang terbesar sedangkan <h6> adalah heading yang terkecil

contoh : <h1>ini heading ke 1</h1>

<h2>ini heading ke 2</h2>

  • membuat teks cetak tebal

untuk membuat teks cetak tebal (bold) gunakan tag <b>

contoh : <b>halo apa kabar</b>

  • membuat teks cetak miring

untuk membuat teks cetak miring (italic) gunakan tag <i>

contoh : <i>halo teman</i>

  • membuat teks bergaris bawah

untuk membuat teks bergaris bawah (underline) gunakan tag <u>

contoh : <u>halo kawan</u>

  • membuat garis coret di tengah teks

untuk membuat garis coret di tengah teks gunakan tag <strike>

contoh : <strike>salah tulis</strike>

  • membuat posisi di tengah

untuk membuat posisi di tengah gunakan tag <center>

contoh : <center><p>ini adalah sebuah paragraf</p></center>

  • membuat teks menjorok ke dalam

untuk membuat teks menjorok ke dalam gunakan tag <blockquote>

contoh : <blockquote><p>halo apa kabar?</p></blockquote>

  • membuat baris baru (ganti baris)

untuk berganti baris gunakan tag <br>, dimana tag ini tidak memerlukan tag penutup

contoh : <p>ini adalah sebuah paragraf</p><br>

Sekarang buatlah sebuah dokumen HTML lalu ketikan tag tag tersebut diatas diantara tag <body>, jalankan dan lihat hasilnya. Selamat mencoba.

]]> http://www.kadekbagus.com/belajar-html-bagian-2.html/feed 0 Belajar HTML bagian 1 http://www.kadekbagus.com/belajar-html-bagian-1.html http://www.kadekbagus.com/belajar-html-bagian-1.html#comments Thu, 09 Oct 2008 12:47:34 +0000 Kadek Bagus http://localhost/wp1/?p=5 Kode HTML adalah pondasi dari suatu website, semua perintah yang diolah di server hasilnya akan dikirimkan ke client dalam bentuk kode HTML kemudian oleh web browser diterjemahkan sebagai suatu halaman website. Untuk membuktikannya sekarang coba lakukan klik kanan pada browser anda lalu pilih view source. Maka akan muncul sekumpulan kode kode ‘aneh’ yang biasa sebut sebagai kode HTML.

Struktur utama dari sebuah dokumen HTML adalah sebagai berikut :

<html>

<head> </head>

<body>

</body>

</html>

Ok, sekarang langsung praktek saja, untuk membuat sebuah dokumen HTML (*.htm atau *.html) yang anda butuhkan adalah aplikasi teks editor seperti notepad dan sebuah browser seperti IE , Mozilla, atau Opera. Pertama buka dulu teks editor kemudian ketikan kode berikut ini :

<html>

<head>

<title>Ini judul halaman web saya</title>

</head>

<body>

<h1>Selamat datang</h1>

<p>ini adalah halaman website pertama saya…..</p>

</body>

</html>

Kemudian save file tersebut dengan ekstensi *.htm atau *.html, misalnya index.htm atau index.html seperti berikut ini :

HTML

Lalu jalankan file tersebut dengan mengklik dua kali, maka akan muncul tampilan sebagai berikut :

html

Selamat anda sudah berhasil membuat sebuah halaman web.

Kalau anda perhatikan kode HTML selalu terdiri dari tag buka <> dan diakhiri dengan tag tutup </>, sebagian besar kode HTML memang seperti itu, tetapi ada juga beberapa tag yang tidak memerlukan tag penutup misalnya tag <br> , tag ini fungsinya untuk ganti baris (tentang tag HTML lainnya akan dibahas lebih mendalam pada artikel berikutnya).

]]> http://www.kadekbagus.com/belajar-html-bagian-1.html/feed 0