Monday 16 July 2012

HTML Scripting – Tata Letak dan Interaktivitas

No comments


Tujuan :
  • Memahami dan dapat menggunakan konsep Frame
  • Memahami dan dapat menggunakan konsep Table
  • Memahami dan dapat menggunakan konsep CSS
  • Dapat membuat Form baik dengan Javascript maupun PHP
 A.     Frame
Frame merupakan Tag HTML untuk membangun sebuah web page yang memungkinkan
menampilkan  beberapa  web  page  dalam  satu  window  browser  (page  utama).
Contoh sintak penggunaan frame :


  1. Target Frame
Atribut  “name”  merupakan
atribut  wajib sebagai   identitas,   jika   frame   yang   bersangkutan   akan   dijadikan   sebagai
tempat   untuk menampilkan URL suatu link.
Target Frame  Kegunaan
_self  Digunakan apabila target frame adalah frame tempat link berada.
_top  Digunakan apabila target frame adalah windows tempat frame berada.
_parent Digunakan apabila target frame adalah setingkat dengan frame link  berada.
_blank digunakan untuk membuka windows baru.
  1. IFrame
IFrame    memungkinkan    pemrogram    web    untuk    membuat     frame    windows
yang mengambang,  frame  ini berlaku mirip  seperti  suatu  text box,  jika browser melakukan
scroll  maka  frame  ini  juga  turut  terscroll.
B.    Table
Table digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap
kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom
menunjukkan kelompok data dalam satu kesatuan. Selain itu tabel juga dapat digunakan
untuk membuat layout dan interface dalam web dengan menggabungkan beberapa gambar
dan tag html.Elemen-elemen Tabel
Elemen  Penjelasan


Mendefinisikan sebuah tabel, bisa juga diatur bordernya

Biasanya untuk member judul pada table

Atau table row, yaitu membuat sebuah baris tabel dalam tabel.

Mendefinisikan header pada tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan di tengah

Mendefinisikan bagian body table, boleh digunakan ataupun tidak

Mendefinisikan bagian header table, boleh digunakan ataupun tidak

Mendefinisikan bagian footer table, boleh digunakan ataupun tidak


C.      Special Tag
Special  Tag terdiri  atas tag   dan  tag
, tag  body  yang  berfungsi sebagai
pembentuk  halaman  HTML karena  di  dalamnya  terdiri atas seluruh  content  yang akan
ditampilkan  pada  website



Selain  itu terdapat  beberapa  atribut  seperti bgcolor untuk  warna  dasar  body  dan
background untuk memasukkan image sebagai background pada web page.
Tag 
  berfungsi  untuk sebagai wadah  yang fungsinya sama  dengan  body. Bisa
diumpamakan  sebagai  body  di  dalam  body.  Div  berfungsi  untuk  mengelompokkan
komponen-  komponen  pada  body  sehingga  memudahkan  untuk  dilakukan.
Untuk  penggunaan  layout,  tag 
  sangat  unggul  berbeda  dengan  penggunaan  table.
Misalnya untuk membuat  layout bertumpuk dengan menambahkan position di atribut  style
dengan  value absolute  misalnya
. Berikut ini  contoh
penggunaan
sebagai alternatif pembuat layout selain tag table dan frame.






Home


Konten pada halaman utama, contoh penggunaan div



D.     CascadingStyle Sheets (CSS)
CSS  adalah  kumpulan  format  yang mengatur  tampilan  isi  dari  sebuah  halaman  web.
Dengan adanya CSS maka pengaturan halaman web akan  lebih mudah,  fleksibel baik posisi
layout, jenis  maupun tipe  huruf  yang ada  di  dalamnya
Selector berisikan nama  tag html  yang  akan dimanipulasi  atau nama  code CSS  yang
akan di panggil pada atribut “class” pada sebuah tag HTML. Properti merupakan elemen CSS
yang akan dimanipulasi misalnya “color” untuk memanipulasi warna background sedangkan
value  berisikan nilai yang akan diberikan pada property. Selain itu dikenal pula dengan jenis
selector  yang  bernama  “idselector”.  Idselector  berfungsi  untuk  memanipulasi  sebuah  id
pada tag HTML.
  1. Inline CSS
Inline CSS adalah memasukkan kode CSS pada line HTML tepatnya pada atribut “style”
pada sebuah  tag.  Inline CSS dapat digunakan  jika penggunaan CSS  tidak  terlalu banyak dan
cukup  dibutuhkan  oleh  tag  pemanggilnya saja. Karena jika  pemakaiannya  terlalu  banyak
misalnya pada  setiap  tag  yang memerlukannya.
  1. Internal CSS
Yang  dimaksud  dengan internal CSS adalah code CSS  yang  diletakkan  pada file
pemanggilnya  misalnya  pada  file  HTML.  Internal  CSS  diletakkan  pada  tag 

No comments :

Post a Comment