Welcome to our blog.......

Minggu, 10 Oktober 2010

Episode 3 : Still about HTML! ^.^

FORM
Form merupakan daerah yang dapat berisi elemen form. Unsur-unsur form adalah elemen yang memungkinkan pengguna untuk memasukkan informasi (seperti Text Field, Text Area Field, Drop Down Menus, Radio Buttons, Check Boxes, dll). Pendefinisian form dengan menggunakan tag <form>

Text Field
Text Field digunakan ketika Anda ingin menggunakan jenis huruf, angka, dll dalam form. (20 karakter default browser), contoh:
<form>
First name:
<input type="text" name="first name">
<br />
Last name:
<input type="text" name="last name">
</form>
hasil:





Radio Button
Radio button digunakan ketika Anda menginginkan para pengguna memilih salah satu dari beberapa pilihan yang diberikan. contoh:
<form>
<input type="radio" name="sex" value="male">Male
<br />
<input type="radio" name="sex" value="female">Female
</form>
hasil:






Check Box
Check Box digunakan ketika Anda menginginkan para pengguna untuk memilih satu atau lebih pilihan dari sejumlah pilihan yang diberikan. contoh:
<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike">
<br />
I have a car:

<input type="checkbox" name="vehicle" value="Car">
<br />
I have an airplane:

<input type="checkbox" name="vehicle" value="Airplane">
<br /> </form>
hasil:
 








The Form's Action Attribute & Submit Button
Bila user mengklik pada tombol "Submit", isi formulir dikirimkan ke server. Tindakan atribut form mendefinisikan nama file untuk mengirim konten ke suatu tujuan. File didefinisikan dalam attribut action biasanya melakukan sesuatu dengan input yang diterima.
contoh:
<form name="input" action="html_form_submit.asp" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

hasil:




Method
method ada 2 bentuk, Get dan Post.
Post
Penggunaan method Post dijadikan variable yang dikirim tidak tampil pada bagian address. Berikut adalah gambar contoh:





Get
Penggunaan method Get dijadikan variable yang dikirim tampil pada bagian address. Berikut adalah gambar contoh:




CSS (Cascading Style Sheets)
merupakan teknologi yang digunakan untuk memperindah halaman website. Dengan CSS, kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yang ada di situs kita sekaligus memformat ulang situs kita.
tag yang digunakan:
<style> . . . </style>

 Sebuah style sheet terdiri dari beberapa aturan (rules). Masing-masing aturan terdiri dari satu atau lebih selektor (selector) dan sebuah blok deklarasi (declaration block). Sebuah blok deklarasi terdiri dari beberapa deklarasi yang dipisahkan oleh titik koma (;). Masing-masing deklarasi terdiri dari property, titik dua (:) dan nilai (value).






Selektor
a. Selektor dapat ditulis secara kelompok, dipisahkan dengan tanda koma.
contoh :
...
h1,h2,h3,h4,h5,h6 {color:green}
...
semua elemen header akan ditampilkan dalam teks berwarna hijau.

b. Mendefinisikan style yang berbeda untuk type elemen HTML yang sama (Class Selector)
contoh:
Terdapat dua type paragraph dalam suatu dokumen: satuparagraf rata kanan, dan paragraf yang lain rata tengah.
p.right {text-align:right}
p.center {text-align:center}

<p class="right">Paragraf ini akan rata kanan</p>
<p class="center">Paragraf ini akan rata tengah</p>

c. Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis dalam tag HTML).
d. CSS eksternal menggunakan ekstensi *.css
e. Dianjurkan untuk menggunakan CSS eksternal


contoh Internal:












contoh Eksternal:












contoh untuk Inline:












Sudah . . . ini dulu aja . . . ntar akan diupload materi baru lagi minggu depan (ekekeke....)
Terima Kasih . . . Thank You . . . Matur Nuwun . . . 谢谢 . . . ありがとう . . .

Kamis, 30 September 2010

Episode 2 : Link-Anchor

 Link-Anchor

Berikut ini adalah format penulisan tag link dalam halaman web :
<a href="alamatURL">Link Text</a>

sedangkan untuk melakukan pemanggilan diri sendiri, pada awal url diberi simbol '#'.
<a href="#alamatURL">Link Text</a>

variasi untuk membuka tab baru ketika link diklik dapat dilakukan dengan melakukan penambahan tulisan target="_blank" sesudah penulisan url.
<a href="#alamatURL" target="blank">Link Text</a>

Berikut ini digunakan untuk membagi layar browser (sangat jarang digunakan) :
<frameset rows/cols = "25%,50%,25%"> </frameset>

contoh:
<html>
<frameset rows="50%,25%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm"> 
<frame src="frame_c.htm">
</frameset>
</html>



Berikut berfungsi untuk menampilkan gambar:
<img src="Gambar.jpg"> alt="Gambar" align="left" witdh="48px" height="48px" />

untuk mengatur warna background, digunakan rumus berikut :
<body bgcolor="rrggbb"> "rrggbb" ditulis dengan bilangan hexadesimal
atau
<body bgcolor="blue">

Membuat Tabel
berikut contoh penulisan format html dalam membuat tabel:
<table border="1" width="500">
   <tr>
      <td>Header Kiri</td>
      <td align="center" width="50%">Header Tengah</td>
      <td align="right">Header Kanan</td>
   </tr>
   <tr>
      <td valign="top" rowspan="2">Menu Kiri</td>
      <td align="center" colspan="2" height="200">Bagian Isi</td>
   </tr>
   <tr>
      <td align="center">Footer Tengah</td>
      <td align="right">Footer Kanan</td>
   </td>
</table>

hasil jadi :










Ini yang terakhir... List
List terdiri atas Ordered List, Unordered List, dan Definition List.
Ordered List, menghasilkan karakter Numbering.
contoh Ordered List:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>







Unordered List, menghasilkan karakter Bullet.
contoh Unordered List:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>





Definition List, untuk membuat penomoran dengan menambahkan sub-nomor.
contoh Definition List:
<dl>
<dt>Coffee</dt>
<dd>-black hot coffee </dd>
</dl>

 







udah... segitu dulu... ntar minggu depan bikin lagi...
Matur Tenkyuu...

Kamis, 23 September 2010

Episode 1 : HTML

HTML
(Hyper-Text Markup Language)
HTML, Hyper-Text Markup Language merupakan standard bahasa yang di gunakan untuk menampilkan document web. Hal-hal yang bisa kita lakukan dengan HTML yaitu:
  • Mengontrol tampilan dari web page dan contentnya.
  • Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.
  • Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi online.
  • Menambahkan objek-objek seperti image, audio, video dan juga java applet dalam document HTML
HTML Dasar
Dokumen HTML secara umum terbagi menjadi tiga bagian utama:
HTML
Diawali oleh "<HTML>" dan pada akhir penulisan diakhiri oleh "</HTML>" 

HEAD
merupakan bagian header dari HTML. penulisan diawali dengan tag "<HEAD>". Di dalam bagian HEAD ini berisi tag TITLE yang menampilkan judul dari page pada title-browsernya. Bagian header juga dapat berisi tag META yang berfungsi menampilkan informasi mengenai halaman web sendiri

BODY
Bagian body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page.


Elemen-Elemen HTML

  • Paragraph <P>, membentuk form beralinea.
  • Heading <H1>..<H6>, untuk menentukan ukuran karakter. Semakin kecil angka, ukuran huruf makin besar.
  • Garis Horizontal <HR>, untuk mencetak garis horizontal.
  • Page Break <BR>, untuk mencetak baris baru.
  • Bold Text  <B>, mencetak karakter tebal.
  • Italic Text <I>, mencetak katakter miring.
  • Underlined Text <U>, mencetak karakter bergaris bawah.

contoh penulisan HTML :
<HTML>
<HEAD>
<TITLE>Contoh Pengaturan Judul</TITLE>
</HEAD>
<BODY>
<H1 ALIGN = “CENTER”> Pesona Tanaman Hias </H1><P>
Keindahan tanaman hias<BR>
membawa suatu pesona tersendiri<BR>
Warna-warni bunga
</BODY>
</HTML>



udah... kira-kira secara garis besar seperti itu.
terima kasih