Breaking News

Senin, 29 Agustus 2016

Pemrograman Web

Pada masa sekarang ini HTML merupakan interface standard internet. Halaman-halaman HTML ini bisa mengandung animasi, suara, video, bahkan sampai program interaktif yang kompleks. Jutaan halaman HTML setiap hari diakses dari web-web server seluruh dunia.
Sudah menjadi tren memang sekarang ini perusahaan-perusahaan melakukan pertukaran informasi bisnis dan informasi intern pegawai dan pelanggan-pelanggan mereka. HTML sekarang menjadi pilihan untuk presentasi. Bahkan Microsoft sendiri telah mengintegrasikan HTML ke sistem operasi Windowsnya.  Pendeknya HTML terdapat di mana-mana.
HTML adalah bahasa pemrograman dasar yang digunakan untuk membangun sebuah situs. HTML sangat mudah digunakan dan diaplikasikan, oleh karena itu apabila ingin belajar membangun sebuah situs sendiri maka bahasa HTML wajib dipelajari.

      Pengertian HTML

HTML merupakan singkatan dari Hypertext Markup Language. HTML digunakan untuk membangun halaman web. HTML digunakan untuk melakukan mark-up (penandaan) terhadap sebuah dokumen teks. Tanda tersebut digunakan untukmenentukan format atau style dari teks yang ditandai halaman web dibangun oleh  kode-kode HTML.
HTML adalah bahasa markup yang umum digunakan. Kepopuleran HTML disebakan karena HTML ini mudah digunakan. Pembuatan dokumen web dengan  HTML dapat dilakukan dengan mudah dan cepat. Dokumen web dapat tersaji dengan cepat ke banyak pembaca di seluruh dunia sekaligus. HTML mudah melakukan kontrol terhadap tampilan halaman web baik berupa teks, gambar, suara, animasi maupun video.
            HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan web browser seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.
a.         Hypertext
            Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

b.         Markup
            Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada Word Wide Web.

c.         Language 
            Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen. Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih   pada format dokumen yang berorientasi pada aplikasi.

Fungsi HTML

Hypertext Markup Language merupakan standar bahasa yang di gunakan untuk menampilkan dokumen web, yang bisa dilakukan dengan HTML yaitu:
-     Menentukan format suatu teks
-     Membuat list tentang sekelompok hal
-     Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama.
-     Menyisipkan citra atau gambar.
-     Menampilkan informasi dalam bentuk tabel
-     Memodifikasi.Mengontrol tampilan dari web page dan contentnya.
-     Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh dunia.
-     Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.
-     Menambahkan object-object seperti image, audi, video dan juga java applet dalam dokumen HTML.

Struktur HTML

1.   Elemen
     Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.Contonya untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: <title> ini adalah tag pembuka judul dokumen HTML

2.   Tag
Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body. Tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML. Yang merupakan tag-tag dasar dalam HTML adalah:

a.   <HTML> </HTML>
Tag <HTML> dan </HTML> digunakan untuk menandai awal dan akhir dari suatu file HTML.
b.   <TITLE> </TITLE>
Tulisan yang berada diantara tag <TITLE> dan </TITLE> akan ditampilkan oleh browser pada bagian title yang mana merupakan title dari jendela browser.
c.   <HEAD> </HEAD>
Berisi keterangan informasi, seperti title dan jenis dokumen, ditulis diantara HEAD tags.
d.   <BODY> </BODY>
Bagian tag BODY menandai awal dan akhir dari badan dokumen HTML. Tag ini memiliki sejumlah attribut dapat ditentukan.

Contoh:
<HTML>
<HEAD>
<TITLE>Halaman HTMLku yang pertama</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF">
Hello World
</BODY>
</HTML>
Hasil:



3.                  Atribut
Atribut mendefinisikan properti dari suatu elemen/tag dari HTML, yang
terdiri atas nama dan nilai

2.5       Pengaturan Halaman HTML

2.5.1.   Menformat Tulisan Pada halaman HTML
Untuk membuat halaman web yang rapi dan menarik, tentu saja perlu melakukan pemformatan tulisan-tulisan, baik tata cara pencetakannya, serta jenis tulisan yang dipergunakan.
Tag – tag untuk memformat tulisan:
Tag
Keterangan

<B> </B>
Membuat cetak tebal pada tulisan yang berada diantaranya.

<BLINK> </BLINK>
Menyebabkan tulisan berada diantaranya berkedip-kedip.

<CITE> </CITE>
Digunakan untuk menandai kutipan dari suatu
buku atau artikel majalah. Browser khususnya menampilkan kutipan dengan cetak miring.

<CODE> </CODE>
Menandai suatu daftar source code program. Biasanya ditampilkan oleh browser dalam suatu monospaced font yang lebih kecil

<DFN> </DFN>
Style untuk definisi dari suatu istilah. Browser
menampilkan definisi dengan cetak miring.

<EM> </EM>
Text yang berada diantara tags ini dicetak lebih lebar. Browser umumnya menampilkan cetak

<FONT SIZE = #> </FONT>
Menentukan ukuran font (#) yang digunakan untuk menampilkan HTML dalam tags. Default is 3; ukurannya dari 1 sampai 7.

<H#> </H#>
Tag yang menentukan tingkat heading dengan nilai antara 1 dan 6, dengan sebagai ukuran paling besar dan 6 paling kecil

<I> </I>
Text diantaranya ditampilkan dengan cetak miring.

<KBD> </KBD>
Keyboard tag digunakan untuk mewakili tombol keyboard seperti Del atau Enter. Umumnya ditampilkan oleh browser dengan suatu monospaced font yang lebih kecil.

<PRE> </PRE>
Preformatted text adalah menampilkan tulisan tanpa format yang khusus. Tag ini bagus digunakan bila ana ingin menangani spasi antar baris; dan juga memudahkan anda untuk meletakan tab dalam dokumen.

<MARQUEE> </MARQUEE>
(hanya pada Microsoft Internet Explorer 2.0/3.0). Tag ini menyebabkan tulisan yang berada diantaranya
Atribut untuk tulisan MARQUEE :

ALIGN
Menentukan bahwa tulisan dalam marquee harus dirapikan di TOP, MIDDLE atau BOTTOM darimarquee tersebut

BEHAVIOR
Setting yang berlaku untuk atribut ini adalah SCROLL, SLIDE, dan ALTERNATE

SCROLL
Defaultnya, dari sisi yang satu ke yang lain pada
layar secara berulang.

SLIDE
Gulung text melintasi layar, dan

ALTERNATE
Yang ini menentukan dari marquee

BGCOLOR
Memberikan Warna

DIRECTION
Menentukan arah ke

HEIGHT
Menentukan tinggi marquee dalam pixel (HEIGHT = n) atau presentasi dari layar (HEIGHT= n%).


WIDTH
Sama dengan atribut HEIGHT, tetapi
diaplikasikan untuk lebar marquee.

HSPACE
Menentukan margin kiri dan kanan untuk bagianluar marquee dalam pixel.

LOOP
Menentukan jumlah kali marquee harus berputar. Jika diabaikan, set ke -1 atau INFINITE, dan marquee bergulung sampai user meninggalkan halaman tersebut.

SCROLLAMOUNT
Menentukan antara geseran dari tulisan
marquee.

SCROLLDELAY
Menentukan dari tulisan marquee

VSPACE
Menentukan margin top dan bottom untuk bagian luar dari marquee dalam pixel.

<SAMP> </SAMP>
Menampilkan sejumlah karakter literal. Banyak
browser menampilkan dengan monospaced font.

<STRIKE> </STRIKE>
Tulisan diantaranya di coret (Example).

<STRONG> </STRONG>
Cara lain menggambarkan attention pada suatu bagian dari text; <STRONG> biasanya ditampilkan dengan cetak tebal oleh browser.

<TT> </TT>
Menampilkan bentuk typewriter style (monospaced) font.

<U> </U>
Tulisan diantaranya ditampilkan dengan garis bawah.

Contoh :
<HTML>
<HEAD>
<TITLE>Heading</TITLE>
</HEAD>
<BODY >
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
</BODY>
</HTML>
Hasil :


Contoh :
<HTML>
<HEAD>
<TITLE>Font </TITLE>
</HEAD>
<BODY>
<font size=1>ukuran 1</font><br>
<font size=2> ukuran 2</font><br>
<font size=3> ukuran 3</font><br>
<font size=4> ukuran 4</font><br>
<font size=5> ukuran 5</font><br>
<font size=6> ukuran 6</font><br>
<font size=7> ukuran 7</font>
</BODY>
</HMTL>
Hasil:


Contoh:
<HTML>
<HEAD>
<TITLE>Font Face</TITLE>
</HEAD>
<BODY>
<font face=”Arial”>Arial</font><br>
<font face=”Tahoma”>Tahoma</font><br>
<font face=”Courier New”>Courier New</font><br>
</BODY>
</HTML>
Hasil



   Menggunakan Karakter Khusus
Berikut ini tata cara pengetikkan untuk menampilkan karakter khusus pada
halaman html:

Entitas
Keterangan
Contoh

&copy;
Copyright symbol
©
&reg;
registered trademark symbol
®
&#153;
trademark symbol
&nbsp;
nonbreaking space

&lt;
less-than symbol
&gt;
greater-than symbol
&amp;
ampersand
&
&quot;
quotation mark

Contoh :
2 &lt; 3, adalah benar<br>
3 &gt; 4, adalah salah
Hasil:
2 < 3, adalah benar
3 > 4, adalah salah



2.5.3.   Mengatur Pemerataan Tulisan
Pemerataan tulisan sangat mempengaruhi tampilan dari halaman web anda, ada kalanya tulisan tertentu perlu ditampilkan pada tengah halaman, atau pun justified. Tag-tag HTML yang mengatur pemerataan tulisan pada satu halaman:
a.      <CENTER> </CENTER>
Tag ini akan menampilkan tulisan/gambar ditengah baris.
b.   <P ALIGN=LEFT|CENTER|RIGHT> </P>
Tag paragraf digunakan untuk memulai suatu paragraf baru disertai dengan pemerataan teks ke kiri, tengah, atau kanan dari tampilan browser untuk paragraf bersangkutan. Suatu paragraf dapat terdiri dari teks, gambar, hyperlink, dan element HTML lainnya.
c.   <H# ALIGN=LEFT|CENTER|RIGHT> </H#>
Ini akan merapikan tulisan ke kiri, tengah atau kanan dari tulisan yang diberi tingkat heading
Contoh :
<center>Tulisan ini berada ditengah baris</center>
<p align=left>Tulisan ini rapat kiri</p>
<p align=center>Yang ini juga ditengah baris</p>
<p align=right>Yang ini rapat kanan</p>
Hasil:
Tulisan ini berada ditengah baris
Tulisan ini rapat kiri
Yang ini juga ditengah baris
Yang ini rapat kanan


Membuat Garis Pemisah

Untuk menyisip suatu garis pemisah pada dokumen dapat digunakan <HR>. <HR> memiliki atribut:
-          NOSHADE
-          SIZE
-          WIDTH.
Contoh :
<HTML>
<HEAD>
<TITLE>Horizontal Line</TITLE>
</HEAD>
<BODY>
atas
<hr>
bawah
</BODY>
</HTML>
Hasil


   Membuat Unordered List
Agar dokumen kita mudah dibaca dan jelas, ada bagian tertentu yang perlu ditampilkan dalam list. List yang paling sederhana di HTML adalah unordered, atau bulleted list. Hal ini sesuai untuk daftar item yang tidak memiliki hirarki atau urutan yang penting.
a.      <UL> </UL>
Digunakan untuk mengawali dan mengakhiri suatu Unordered List.
b.      <LH> </LH>
Digunakan untuk membuat suatu heading untuk list tersebut.
c.       <LI> </LI>
Digunakan untuk membuat masing-masing item list tersebut.
Contoh :
<HTML>
<HEAD>
<TITLE>UL</TITLE>
</HEAD>
<BODY>
<ul type=”disc” >
<li>urutan 1</li>
<li>urutan 2</li>
<li>urutan 3</li>
</ul>
</BODY>
</HTML>
Hasil

Membuat Ordered List
Untuk membuat suatu ordered list, tag <UL> dan </UL> diganti dengan <OL> dan </OL>.
Contoh :
<HTML>
<HEAD>
<TITLE>OL</TITLE>
</HEAD>
<BODY>
<ol type=”I” >
<li>urutan 1</li>
<li>urutan 2</li>
<li>urutan 3</li>
</ol>
</BODY>
</HTML>
Hasil




2.5.7.   Table dan Pengaturannya
Tabel adalah cara yang baik untuk menampilkan informasi secara logik yang biasanya ditampilkan dalam bentuk spreadsheet. Tabel juga digunakan untuk menampilkan record-record pada database.

1.         <TABLE> </TABLE>
Berikut ini adalah atribut dari TABLE tag dan efeknya pada tabel.

a.   BORDER
Atribut BORDER menentukan tebal dari border sewaktu ditampilkan oleh browser. Cobalah dengan browser anda untuk mendapatkan setting yang optimal.

b.   CELLSPACING
Atribut CELLSPACING mementukan jumlah spasi yang browser tempatkan diantara tiap-tiap sel individual atau spasi antar sel dan border (jika sel berada di sisi dari tabel). Sekali lagi, hanya dengan percobaan yang akan menghasilkan nilai yang sesuai.

c.   CELLPADDING
Atribut CELLPADDING menentukan jumlah spasi yang browser tempatkan antara data dalam cell dan border sel.. Dalam tag tabel, ada tiga tag yang mendefinisikan header, row, dan cels. Tag-tag tersebut adalah table header <TH>, table row <TR>, dan table data <TD>.

d.   WIDTH
Atribut WIDTH dapat diset dengan angka (ukuran dalam pixel), atau sebagai suatu persentase lebar tampilan browser. Browser dapat menarik tabel, tetapi tidak dapat mengkompres jika ukuran jendela browser lebih kecil dari tabel.

e.   ALIGN
Dengan ALIGN, anda dapat menentukan pemerataan tabel di left, center, atau right dari halaman.

f.    BGCOLOR
Sebagaimana pada tag <BODY> , anda dapat menentukan warna latar belakang dari tabel dengan menggunakan attribut BGCOLOR, anda dapat menggunakan definisi warna #rrggbb atau nama warna pada Internet Explorer, (sebagai contoh, <TABLE BGCOLOR = RED).

g.   BORDERCOLOR (Hanya pada Microsoft Internet Explorer 2.0/3.0)
Hal ini menyerupai attribut BGCOLOR tetapi diaplikasikan pada eksternal dan internal border.

h.   BORDERCOLORLIGHT (hanya pada Microsoft Internet Explorer 2.0/3.0)
Setting ini adalah optional dan menentukan warna sisi terang dari garis kiri atas tabel.

i.    BORDERCOLORDARK (hanya pada Microsoft Internet Explorer 2.0/3.0)
Setting ini adalah berlawanan dengan BorderColorLight

2.         <TR> </TR>
Elemen table row menandai awal dari tiap baris pada tabel. Atribut yang sah dari tabel row adalah ALIGN, VALIGN, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT.

3.         <TH> </TH>
Elemen table header berfungsi sama seperti elemen table data <TD>, tetapi elemen table header ditampilkan dalam suatu font cetak tebal. Artibut yang sah untuk elemen table header adalah ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT.
BGCOLORLIGHT

4.         <TD> </TD>
Elemen table data menandai awal dan akhir dari tiap sel didalam tabel. Atribut yang sah untuk elemen table data :

      a.   COLSPAN
Atribut ini menentukan jumlah kolom yang akan ditarik oleh sel; sebagai contoh, jika COLSPAN di set ke 2, yang mana sel dengan span dua kolom normal dalam tabel

      b.   ROWSPAN
Atribut ini menentukan jumlah baris yang akan ditarik oleh sel; sebagai contoh, jika ROWSPAN di set ke 2, yang mana sel dengan span dua baris normal dalam tabel.

      c.   NOWRAP
Menyisipkan atribut NOWRAP untuk menjaga tulisan dalam sel semuanya dalam satu baris.

5.         <CAPTION> </CAPTION>
Tag CAPTION ditempatkan diantara tag tabel, tetapi tidak diantara row, heading, atau cell tags. Tulisan dalam CAPTION tags mendefinisikan caption untuk tabel tersebut.
Berikut ini adalah atribut sah yang CAPTION tag.

      a.   ALIGN
Setting atribut ALIGN attribute untuk Netscape adalah TOP dan BOTTOM; sedangan Microsoft Internet Explorer memasukkan TOP, BOTTOM, LEFT, RIGHT, dan CENTER.

      b.   VALIGN
Dengan VALIGN, anda dapat menentukan vertical alignment dari data diantara table cells. Atribut ini di set diantara <TD> tag yang akan dirapikan. Setting yang sah adalah TOP, MIDDLE, dan BOTTOM. Tanpa ditentukan hasil tag tersebut adalah center. Sebagai contoh , <TD VALIGN=TOP>Top Aligned</TD> menentukan suatu sel akan dirapikan dibagian atas row.
Contoh:
<HTML>
<HEAD>
<TITLE>Tabel</TITLE>
</HEAD>
<BODY>
<table border=1>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</BODY>
</HTML>
Hasil:


   Menyisipkan Gambar Dalam Halaman Web
Untuk menyisip suatu gambar dalam halaman Web adalah dengan menggunakan tag <IMG>. Tag tersebut memiliki element sebagai berikut:
a.   SRC=URL, suatu URL yang menunjuk pada sumber file gambar.
b.   ALIGN, merapikan elemen yang menentukan bagaimana gambar akan dirapikan secara relatif terhadap tulisan yang berdekatan dengan gambar. Banyak nilai yang mungkin dan tidak akan dibahas disini.
c.   ALT=text, menentukan tulisan yang akan ditampilkan (biasanya ditempatkan diantara tanda petik) jika browser tidak dapat menampilkan gambar untuk alasan tertentu.
d.   HEIGHT=h WIDTH=w, menentukan height dan width dari image yang memungkinkan Web browsermenentukan ukuran tempat yang tepat sebelum gambar benar-benar selesai diterima. Hal ini tentu saja akan membantu Web browser dalam melakukan render terhadap seluruh isi halaman sebelum gambar selesai diterima.
Contoh :

<html>
<head>
   <title>Penggunaan Tag Image</title>
</head>
<body>
   <h1>Belajar Tag Gambar</h1>
   <img src="gambar.png" />
</body>
</html>
Hasil:


 Link ke Dokumen atau Situs yang Lain
Dokumen HTML adalah dokumen-dokumen hypertext. Hal ini berarti bahwa  mereka dapat mengandung link ke dokumen lain.
Tag (<A> </A>) digunakan untuk membentuk suatu link ke dokumen atau sumber yang akan dimuat ketika user melakukan klik pada link tersebut. Tulisan dan HTML lainnya yang ada diantara link ditampilkan kepada user sebagai suatu hotlink, biasanya dengan warna yang berbeda warna tulisan browser normal atau diberi garis bawah.

a.   HREF
HREF = "URL" menentukan URL dari resource yang akan ditampilkan setelah user melakukan klik padanya.

Contoh :
<HTML>
<HEAD>
<TITLE>deslian</TITLE>
</HEAD>
<BODY>
<a href=”deslian12421003@gmail.com”>Kirim email ke deslian</a>
</BODY>
</HTML>
Hasil :

b.   TITLE
Atribut ini, walaupun tidak diperlukan, memungkinkan perancang halaman memasukkan title dari halaman tersebut.

c.   URN
Menentukan suatu URN (Universal Resource Name) untuk dokumen target.

d.   NAME
Atribut NAME menentukan lokasi dalam HTML tersebut yang dapat di link dari halaman lain. Hal ini memungkinkan dokumen lain mengacu ke lokasi tertentu dalam suatu halaman. Nama acuan dari halaman tersebut. Untuk mengacu pada suatu nama acuan, URL halaman ditentukan, diikuti dengan suatu #. Sebagai contoh, <a name="Copyright"> mendefinisikan nama link Copyright dalam dokumen tersebut.

Form dan Pengaturannya

Diawali dan diakhir dengan tag <FORM> dan </FORM>, field-field yang berada diantaranya digunakan untuk menentukan ukuran dan jenis dari masing-masing input field. Walaupun dapat memiliki banyak form dalam satu halaman, tetapi tidak dapat melakukan form dalam form.
Atribut dari elemen form adalah sebagai berikut:

a.      ACTION
URL yang menentukan resource yang akan dilakukan oleh action pada form data, dan memberi respon pada user.

b.      METHOD
Ini dapat berupa default GET atau POST. Menggunakan GET, query ditambahkan ke URL; menggunakan POST, data dikirim melalui suatu transaksi post pada melalui HTTP. Untuk data yang membutuhkan keamanan anda diajurkan untuk menggunakan metode POST.

Frame pada Netscape 2.x/Microsoft Internet Explorer 3.x

Dengan Netscape 2.0 keatas, browser mampu menampilkan frame yang menggandung kode HTML yang berbeda. Berikut ini akan dijelaskan fungsi masing-masing tag:

1.                  <FRAMESET> </FRAMESET>
Elemen FRAMESET adalah kontainer group elemen dari frame. Ada dua atribut yaitu ROWS dan COLS.

ROWS
Tag ROWS menentukan jumlah spasi yang diberikan pada tiap baris. Jumlah tersebut dapat ditentukan dalam pixel, persen dengan menempatkan suatu % setelah nilai, atau nilai relatif dengan menempatkan (*) pada tempat dari nilai.

COLS
Syntax dari atribut COLS adalah sama dengan atribut ROWS.

2.                  <FRAME>
Elemen FRAME menentukan properti dari setiap frame masing-masing dalam frameset. Karena tidak mengandung text, tidak ada pasangan end-tag. Atribut dari FRAME adalah sebagai berikut:

NAME
Atribut NAME digunakan untuk menentukan mana pada frame, sehingga dapat berlaku sebagai target dari URLs lain.

MARGINWIDTH
Ini memungkinkan perancang halaman untuk menentukan lebar dari border frame dalam jumlah pixel.


MARGINHEIGHT
Ini bekerja seperti MARGINWIDTH tetapi berefek pada tinggi dari margin.

SCROLLING
Setting yang sah untuk atribut SCROLLING attribute adalah YES, NO, dan AUTO. Jika di set ke YES, suatu scrollbar ditampilkan pada frame; NO tidak ada scrollbar, dan AUTO menampilkan scrollbar jika besar
dokumen melebihi ukuran frame.

NORESIZE
Atribut ini mencegah user untuk melakukan drag untuk mengubah ukuran dari frame. Defaultnya adalah memungkin user untuk mengubah ukuran dari frame.

3.                  <NOFRAMES> </NOFRAMES>
Data diantara NOFRAMES tags akan diabaikan oleh browser yang mampu menampilkan frame, dan di tampilkan oleh browser yang tidak mampu menampilkan frame.

Elemen-Elemen dalam Suatu Form

1.         INPUT
Elemen INPUT menentukan informasi dari user interface. Berikut ini adalah atribut untuk INPUT tag :
     a.   CHECKED
Untuk checkboxes dan radio button, atribut ini dapat di set ke TRUE (checked) atau FALSE (unchecked).
      b.   MAXLENGTH
MAXLENGTH menentukan jumlah maximum karakter yang mana dapat dimasukkan dalam suatu textbox.
      c.   NAME
Menentukan nama dari form control. Hal ini digunakan untuk menentukan elemen data pada form ke resource yang memproses elemen ini.
      d.   SIZE
Menentukan ukuran dari form control. Ini dapat berupa nilai tunggal yang menentukan lebar control dalam karakter, atau dalam width/height pair.
      e.   SRC
Ini menentukan image yang akan ditampilkan dengan kontrol.
      f.    TYPE
Ini akan menentukan jenis control yang akan digunakan.
Berikut ini daftar dari kontrol yang ada:

CHECKBOX
Kontrol sederhana TRUE/FALSE, yang mana kalau di check adalah TRUE, dan kosong menyatakan 

FALSE.
HIDDEN
Kontrol ini tidak ditampilkan oleh viewer dari halaman. Kontrol ini dapat digunakan untuk mengirim status informasi kembali ke program form-processing.

IMAGE
Klik pada akan menyebabkan form data dikirim seketika, dan nilainya lewatkan oleh image dalam x,y kordinat pixel.

PASSWORD
Fungsi ini seperti textbox, tetapi tulisan yang anda ketik ditampilkan dengan asteriks sebagai penggantinya.

RADIO
Fungsi ini menyerupai CHECKBOX control, tetapi hanya satu option button dari group yang dapat dipilih setiap saat. Pilih Ya atau Tidak
Contoh:
<HTML>
<HEAD>
<TITLE>Input radio</TITLE>
</HEAD>
<BODY>
<form>
Jenis Kelamin<br>
Pria:<input type=”radio” jenis_kelamin” value=”Pria”>
Wanita:<input type=”radio” jenis_kelamin” value=”Wanita”>
</form>
</BODY>
</HTML>
Hasil:


RESET
Ketika tombol di klik, form data dikembalikan ke keadaan awal sesuai dengan nilai initial masing-masing.
Contoh:
<HTML>
<HEAD>
<TITLE>Reset</TITLE>
</HEAD>
<BODY>
<form>
<input type=”reset”>
</form>
</BODY>
</HTML>
Hasil:

SUBMIT
Klik pada tombol akan mengirim form data ke FORM ACTION URL.

TEXT
Kontrol ini digunakan untuk menggumpulkan satu baris tunggal dari tulisan. Atribut SIZE dan MAXLENGTH dapat ditentukan untuk membatasi pengetikkan.

TEXTAREA
Kontrol ini digunakan untuk mengetikkan banyak baris.

2.                  SELECT
Tag SELECT menandai awal dan akhir dari data dalam suatu listbox atau suatu drop-down selection list. Berikut ini adalah atribut untuk elemen SELECT:

a.      MULTIPLE
Atribut multiple memungkinkan user memilih lebih dari satu item dari listbox. User menekan tombol CTRL dan clicks pada item-item berbeda untuk memilih lebih dari satu.

b.      NAME
 Ini menentukan nama dari SELECT elemen.

c.       SIZE
Ini menentukan tinggi dari list control.

3.                  OPTION
Elemen OPTION membentuk masing-masing pilihan dalam textbox atau listbox. Berikut ini atribut dari elemen OPTION :

a.      SELECTED
Atribut ini menentukan nilai default dari text pada listbox.

b.      VALUE
            Ini mengembalikan nilai dari elemen yang terpilih.


Semoga Bermanfaat. !!!!


Read more ...

Minggu, 28 Agustus 2016

Mengenal Tool Box Pada Macromedia Flash



1. Selection Tool digunakan untuk memilih dan menyeleksi objek. Tekan tombol V pada keyboard untuk mengaktifkannya.

2. Subselection Tool fungsinya hampir sama dengan selection tool tapi lebih detail. Tekan tombol A pada keyboard untuk mengaktifkannya.

3. Free Transform Tool digunakan untuk mengubah ukuran dan rotasi objek. Tekan tombol Q pada keyboard untuk mengaktifkannya.

4. Gradient Transform Tool digunakan untuk mengubah ukuran dan rotasi warna/fill. Tekan tombol F pada keyboard untuk mengaktifkannya.

5. Line Tool digunakan untuk membuat garis. Tekan tombol N pada keyboard untuk mengaktifkannya.

6. Lasso Tool digunakan untuk untuk menyeleksi objek. Tekan tombol L pada keyboard untuk mengaktifkannya.

7. Pen Tool digunakan untuk membuat garis dengan titik-titik bantu. Tekan tombol P pada keyboard untuk mengaktifkannya.

8. Text Tool digunakan untuk membuat static, dynamic, dan input text. Tekan tombol T pada keyboard untuk mengaktifkannya.

9. Oval Tool digunakan untuk membuat objek berbentuk lingkaran. Tekan tombol O pada keyboard untuk mengaktifkannya.

10. Rectangle Tool digunakan untuk membuat objek berbentuk persegi. Tekan tombol R pada keyboard untuk mengaktifkannya.

11. Polystar Tool tombol ini muncul jika anda klik dan tahan tombol Rectangle Tool dan pilih polystar Tool. Digunakan untuk membuat objek berbentuk persegi dengan jumlah segi yang sudah ditentukan.

12. Pencil Tool digunakan untuk membuat garis. Tekan tombol Y pada keyboard untuk mengaktifkannya.

13. Brush Tool digunakan untuk menggambar shape dengan kuas yang sudah ditentukan. Tekan tombol B pada keyboard untuk mengaktifkannya.


14. Ink Bottle Tool digunakan untuk mewarnai dan merubah warna garis. Tekan tombol S pada keyboard untuk mengaktifkannya.

15. Paint Bucket Tool digunakan untuk mewarnai dan merubah warna shape objek. Tekan tombol V pada keyboard untuk mengaktifkannya. Tekan tombol K pada keyboard untuk mengaktifkannya.

16. Eyedropper Tool digunakan untuk mengambil contoh warna. Tekan tombol I pada keyboard untuk mengaktifkannya.

17. Eraser Tool digunakan untuk menghapus objek. Tekan tombol E pada keyboard untuk mengaktifkannya.

18. Hand Tool digunakan untuk menggeser tampilan stage. Tekan tombol H pada keyboard untuk mengaktifkannya.

19. Zoom Tool digunakan untuk memperbesar dan memperkecil tampilan stage. Tekan tombol M atau Z pada keyboard untuk mengaktifkannya.

20. Stroke Color digunakan untuk memilih warna garis.

21. Fill Color digunakan untuk memilih warna shape objek.

22. Black & White digunakan untuk membuat warna hitam pada Stoke Color dan warna putih pada Fill Color.

23. No Color digunakan untuk menghilangkan warna pada Stroke atau Fill Color.

24. Swap Color digunakan untuk menukar warna antara Stroke Color dan Fill Color.

Read more ...

Mengenal Animasi 3D dengan Blender Bagi Pemula

Secara default atau saat membuka aplikasi Blender, tampilan awal Blender yang akan muncul adalah seperti berikut.



Klik kiri pada sembarang tempat untuk menampilkan factory settings pada Blender, sehingga akan tampil fitur seperti berikut.



Header      : Menu utama Blender yang terdiri atas File, Add, Render, dan Help.

Viewport   : Tampilan yang terdiri dari objek 3D atas objek lainnya.

Toolbar     : Terdiri atas daftar tools yang memilikisifat dinamis menurut objeknya.

Outliner     : Struktur data dari objek pada Blender.

Properties  : Panel yang memuat berbagai macam perintah untuk memodifikasi objek atau             animasi dan bersifat dinamis mengikuti objek atau tools yang sedang aktif.

Timeline    : Instruksi yang terkait dengan frame animasi atau untuk sequencer.

a. Screen Layouts
     Saat membuka Blender, layar akan menampilkan secara default seperti pada gambar di atas. Tampilan tersebut dapat diganti sesuai kebutuhan, misalnya kebutuhan untuk merancang simulasi visual, Anda dapat memilih layout animation yang merupakan tampilan untuk mengerjakan animasi dan lain-lain. Tools ini berada pada pojok kiri atas layar, merupakan bagian dari Main Header yaitu menubar yang ada di bagian atas pada tampilan Blender.



b. Splitting Windows
     Splitting windows atau pembagi tampilan lembar kerja pada software Blender, Splitting windows dalam pembuatan simulasi visual 3D seringkali digunakan. Contohnya dalam pemodelan 3D diperlukan lebih dari 1 windows. Splitting windows adalah membagi menjadi 2 windows dalam tipe yang sama dan dapat dilakukan secara horizontal maupun vertical. Berikut cara melakukan splitting windows.



Arahkan kursor pada sudut windows yang dilingkari merah, maka kursor akan berubah menjadi (+) tanda plus. Kemudian klik tombol kiri mouse, tahan dan geser seperti gambar di atas.
Note : ”Untuk melakukan splitting windows secara vertical, sama seperti splitting windows secara horizontal, namun pada hasil splitting windows secara vertical akan mendapatkan 2 windows atas dan bawah.”
Changing the Editor Type
Ada beberapa jenis “editor” yang secara default tidak ditampilkan oleh Blender, Anda dapat mengganti dengan jenis “editor” lain. Sesuai dengan kebutuhan Anda.




c. Shortcut of Numpad
     Bagi para pengguna laptop disarankan untuk mengaktifkan Emulate Numpad, karena berguna untuk menggantikan tombol Numpad, sehingga bisa menggunakan perintah Numpad dengan menekan tombol angka pada keyboard bagian atas. Untuk mengaktifkan Emulate Numpad, bisa langsung menuju File -> User Preferences kemudian ikuti langkah seperti pada gambar di bawah ini.

Berikut ini adalah fungsi angka-angka pada numpad sebagai shortcut :


[1] Tampak Depan
[3] Tampak Kanan
[7] Tampak Atas
[2] Putar bawah 15 derajat
[8] Putar atas 15 derajat
[4] Putar Kiri “15derajat”
[6] Putar Kanan “15derajat”
[5] Orthographic atau Perspektif
[0] Camera Perspektif
[CTRL][2] Menggeser View Objek Ke atas
[CTRL][8] Menggeser View Objek Kebawah
[CTRL][4] Menggeser Objek Kesamping Kanan
[CTRL][6] Menggeser objek kesamping kiri

d. Snap 3D Cursor
     Pada dasarnya 3D Cursor digunakan untuk menentukan letak objek, sedangkan Snap merupakan sebuah alat bantu dalam menemukan titik acuan. Cara melakukan snap 3D cursor adalah dengan menekan SHIFT +S.


Selain itu, Snap juga bisa digunakan saat mentransformasi objek dengan cara menekan CTRL sambil merubah objek, sehingga objek akan bertranformasi dengan skala tertentu.

e. Adding Object
     Adding Object merupakan sebuah menu untuk menambahkan objek pada bidang 3D. Lakukan dengan cara menekan SHIFT +A atau pilih menu Add pada Header menu.


Dalam menambah objek pada Blender akan menemukan dua jenis mode, yaitu
Object Mode dan Edit Mode.
Kedua mode tersebut memiliki fungsi yang berbeda. Edit Mode digunakan untuk melakukan pengeditan pada objek dengan memilih titik tertentu, sedangkan Object Mode digunakan untuk pengeditan objek secara keseluruhan. Untuk memilih modus Object Mode atau Edit mode, dapat menekan tombol Tab pada keyboard. Tampilan kedua Mode tersebut seperti pada gambar di bawah ini.


f. Transformation
     Transformation adalah upaya untuk menggeser atau memutar atau mengubah ukuran objek.
Dasar transformasi dalam Blender, meliputi:

Grab / Move : menggeser objek dengan menekan tombol [G]
Rotation        : memutar objek dengan menekan tombol [R]
Scale             : menskala (memperbesar atau memperkecil) objek dengan menekan tombol [S]

Untuk mentransformasikan objek berdasarkan sumbu ( x, y, z ), Anda dapat menggunakan shortcut keyboard,
Grab / Move [G]

[G]+[X]               : objek akan bergeser pada sumbu X.
[G]+[Y]               : objek akan bergeser pada sumbu Y.
[G]+[Z]               : objek akan bergeser pada sumbu Z.
[G]+[Shift ]+[X] : objek akan bergeser pada sumbu Y dan Z karena sumbu X telah dikunci agar tidak berubah.

Demikian Pengenal Fungsi Tool-Tool yang ada di Blender.
Semoga bermanfaat.

Read more ...
Designed By Deslian Muhamad Fadeli S.Kom