Chellme LS: Dasar Web

Hypertext Markup Language (HTML)

Dokumen HTML merupakan sebuah file text. Karena hanya berisi text, maka dokumen HTML menjadi sangat sederhana, HTML memiliki kelemahan, salah satunya adalah Anda harus mengetikan sendiri semua kode HTML jika ingin membuat sebuah halaman web. Memang sekarang telah banyak beredar HTML editor yang dapat membantu Anda dalam membuat sebuah halaman web tanpa menyentuh kode HTML sama sekali, namun dalam pengembangan halaman web dengan menggunakan bahasa script seperti VBScript dan JavaScript, pengetahuan mengenai HTML harus mutlak diperlukan, karena Anda harus tahu dengan pasti dimana harus menyisipkan script yang diinginkan dalam HTML. Untuk menuliskan HTML VBScript dan JavaScript dapat menggunakan teks editor sederhana, seperti Notepad atau EditPad.

Sebuah dokumen HTML berisi element-element kode HTML yang disebut HTML Tag. Penulisannya diapit oleh apa yang disebut delimiter (pembatas). Delimiter adalah suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag. Untuk HTML delimiter yang dipakai adalah dengan karakter < dan >. Sebuah kode program HTML selalu diawali dan diakhiri dengan sebuah tag.Tag pada awal kode disebut opening tag, dan pada akhir kode disebut ending tag. Ending tag ditandai dengan karakter/ diikuti dengan opening tag.

Contoh tag :

<HTML>

-----Kode program

</HTML >

Sebuah dokumen HTML dibagi menjadi 2 bagian yaitu body (badan) dan head (kepala). Bagian head ditandai dengan tag <HEAD> sedangkan bagian body ditandai dengan tag <BODY>. Bagian head digunakan untuk menyimpan informasi mengenai dokumen tersebut, misalnya judul, nama penulis, komentar- komentar, dan lain-lain. Sedangkan bagian body digunakan untuk menuliskan isi utama dari dokumen web tersebut.

Contoh dari tag dokumen web sederhana :

<HTML>

<HEAD><H1>Pelatihan web dasar </H1>

</HEAD>

<BODY>

Selamat dating ke pelatihan web dasar.

</BODY>

</HTML>

Tampilan dari web akan tampak seperti berikut:

Berikut ini adalah beberapa tag dasar yang penting dari HTML (penulisan tidak case sensitive, boleh huruf besar atau kecil.)

1. <html>…</html>.

Menjelaskan bahwa teks file adalah merupakan HTML format.Diletakkan pada awal dan akhir dari setiap halaman web.

2. <head>…</head>

Diantaranya adalah area dari heading halaman. Digunakan untuk script/perintah khusus yang tidak mempunyai hubungan dengan format dari halaman.

3. <title>…</title>

Memberi judul yang ditampilkan pada ujung kiri atas dari browser window.

4. <body> ….. </body>

Setelah tag <head> dapat dilihat tampilan dari web/isi dari halaman. Pada tag <body> di dalamnya dapat ditambahkan beberapa atribut berikut ini :

- bgcolor= “….” à memberikan warna latar belakang (background halaman)

- text=”…” àmemberikan warna tulisan/teks.

- Link=”…” à memberikan warna pada hyperlinks (link halaman)

- vlink=”…” à memberikan warna pada hyperlinks yang telah dimasuki/ dilink

- alink=”…” à memberi warna pada link yang aktif.

Warna yang diberikan merupakan kode heksadesimal. Contoh #000000 warna putih, #FF0000 warna merah, #00FF00 warna hijau, dan #0000FF warna biru.

5 <b>…</b>

Membuat tulisan tebal (Bold Text)

6 <p>…</p>

Merupakan perintah paragrap yang termasuk diantaranya pengaturan posisi tulisan, indentansi dan jarak. Antara lain sebagai berikut :

<p align=”left”>…</p> à untuk pengaturan paragrap rapat kiri (left)

<p align=”center”>…</p> à untuk pengaturan paragrap di tengah (center)

<p align=”right”>…</p> à untuk pengaturan paragrap rapat kanan (right)

<p nowrap>…</p> à untuk membuat penulisan paragrap tanpa pemotongan batas pinggir halaman untuk berganti baris, dan hanya bias berganti baris, dan hanya bias berganti baris dengan tag <br>

7 <br>

Untuk memberikan baris baris baru/ pergantian baris. Diletakan pada bagian teks yang mau berganti baris.

8 <a>…</a>

Membuat link antara dua halaman web. Tag <a> adalah merupakan tag penghubung (anchor tag). Biasanya ditulis dengan <a href link file>…</a>. Tatacara penulisan letak file ini juga bergantung dari letak relative dari link file sbb (file web referensi adalah file dimana kita menuliskan link halaman) :

o href=”file.html” à file.html terletak di direktori yang sama dengan file web referensi

o href=”dir/file.html” à letak file.html di dalam direktori dir dan direktori dir terletak pada direktori yang sama dengan file web referensi

o href=”dir/dir2/file.html” à letak file.html di dalam direktori dir2 dimana direktori ini di dalam direktori dir

o href=”../file.html” àletak file.html di direktori yang berada satu level diatas direktori posisi file web referensi sekarang

o href=”../../dir/file.html” à letak file.html pada dua level di atas

Untuk beberapa tambahan pada penulisan alamat adalah sbb :

o <a href=mailto: email@yahoo.com>…<a>

Penulisan seperti ini adalah untuk memberikan link email dari seseorang/ perusahaan.

o <a href= http://www.satu.com>…<a>

Memberikan link ke website lainnya.

o <a name=”nama”> dan <a href=”#nama”>…<a>

Kedua tag diatas memberikan hubungan saling terkait, dimana jika kita meletakkan tag pertama diatas dari halaman (top) dan tag kedua merupakan link yang diletakkan pada paling bawah halaman sendiri, jika link diklik, maka posisi kursor langsung menuju pada letak pemberian tag pertama. Hal ini biasa dibuat untuk membuat link keatas dan ke bawah dari satu halaman.

9 <img src =”gambar.jpg”…>…</img>

Jika Anda ingin meletakan gambar / file photo di web Anda, maka dapat dilakukan dengan memberikan tag ini. Perlu diingat bahwa tag ini juga mempunyai beberapa atribut yang dituliskan di belakang keterangan nama file seperti :

o width=”…” àmemberikan lebar dari gambar.

o Height=”…” àtinggi dari gambar.

o Border=”…” àmemberikan ketebalan dari bingkai gambar.

o Alt=”…” à memberi nama dari gambar.

o Align=”…” à memberikan posisi dari gambar.

Pemberian link web/ dokumen dengan gambar juga bias dilakukan. Contohnya jika kita mempunyai file gambar : web.gif dan kita ingin membuat link dengan file tersebut. Maka cara penulisannya adalah dengan :

</a>

Jenis file yang dipakai bias berupa file bmp, gif dan jpg.

10 Pengaturan bentuk, ukuran, dan warna tulisan.

Pengaturannya dilakukan dengan tag-tag seperti contoh berikut

<font size=”2” color=”#ffff00” face=”arial”>…</font>	contoh	Mengubah ukuran, warna dan bentuk tulisan. Ukurannya antara 1-7 atau angka relatif +1 (lebih besar satu kali dari sebelumnya). Warna berdasarkan kode warna heksadesimal.Jenis tulisan biasanya seperti arial,times new roman, helvetika, Tahoma, arial black,arial”>
<basefont size=”2” color=”#FFFF00” face=”arial”>	-	Mengeset untuk default dari bentuk font baik ukuran, warna dan juga jenisnya.
<big>…</big>	example	Membuat tulisan lebih besar.
<small>…</small>	example	Membuat tulisan lebih kecil
<b>…</b>	example	Huruf cetak tebal (BOLD)
<i>…</I>	Example	Huruf cetak miring (ITALIC)
<s>…</s>	Example	Mencoret kata (overstrike)
<strike>…</strike>	Example	Mencoret kata
<u>…</u>	Example	Memberi garis bawah text (biasanya sering membuat bingung dengan link),UNDERLINE
<tt>…</tt>	Example	Huruf teletype / spasi tunggal
<h1>…</h1>	Example	Head #1
<h2>…</h2>	Example	Head#2
<h3>…</h3>	Example	Head #3
<h4>…</h4>	Example	Head #4
<h5>…</h5>	Example	Head # 5
<h6>…</h6>	Example	Head #6

11 <ol>…</ol>, <ul>…</ul> dan <li>…</li>

Biasanya untuk membuat list / memberikan penomoran langsung pada list baris. Contohnya

<ol>

</lo>

akan tampak seperti berikut :

1) List item # 1

2) List item # 2

3) List item # 3

4) List item # 4

Selain itu juga dengan mengganti tag <ol> dengan <ul> maka akan tampak seperti berikut :

· List item # 1

· List item # 2

· List item # 3

· List item # 4

12 <hr>

Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen web. Dapat diberikan attribute seperti pada atribut gambar/ image.

13 Tag table.

Untuk membuat table didokumen web dapat dilakukan dengan memberikan tag-tag table. Dalam tag-tag table ini terdiri dari beberapa tag seperti contoh berikut.

Untuk membuat table seperti tampak di bawah ini :

Sel 1, baris 1	Sel 2, baris 1	Sel 3, baris 1	Sel 4, baris 1
Sel 1, baris 2	Sel 2,baris 2	Sel 3, baris 2	Sel 4, baris 1

Maka tag yang harus ditulis adalah sbb:

< tr > <!—baris 1 awal--->

<td>sel 1, baris 1< /td >

<td>sel 2, baris 1< /td >

<td>sel 3, baris 1< /td >

<td>sel 4, baris 1< /td >

< /tr> <!—baris 1 akhir-->

<td>sel 1, baris 2< /td >

<td>sel 2, baris 2< /td>

<td>sel 3, baris 2< /td>

<td>sel 4, baris 2< /td>

< /tr> <!—baris 2 akhir-->

< / table >

Pemberian Tag  adalah sebagai pemberian komentar pada pengkodean dengan tujuan mempermudah pengecekan baris script.

Penulisan dari tag teble adalah diwali dengan tag <table> dan untuk memberikan sel pertama dengan tag <td>, sedangkan untuk ganti baris dengan tag <tr>

14.

Tujuannya memberikan komentar terhadap dokumen dan membantu pengecekan dokumen

2.2. Prinsip-prinsip Desain Web

2.2.1. Fokus pada kebutuhan.

Pada saat membuat halaman Web, yang pertama kali harus ditanyakan adalah “untuk apa yang saya menampilkan halaman Web ini?” Apakah untuk memperkenalkan diri pribadi, memperkenalkan perusahaan saya. Produk-produk yang saya akan jual, menunjukan alamat kantor-rumah. Menawari software-software yang dibikin ini untuk keperluan apa.

2.2.2. Efisien dalam menggunakan sumber daya

Seringkali dalam mendasien halam Web, seseorang menjadi sangat tergoda untuk memasukan semuanya. Ya! Semuanya!

Harap diingat bahwa akses Internet –utamanya dinegara kita umumnya menggunakan jalur yang lambat. Sehingga untuk mengakses sebuah halaman Web diperlukakan waktu yang cukup lama.Jaganlah factor hambatan ini ditambah lagi dengan menimbun semuanya, apakah itu berupa file gambar berukuran besar, file suara wav, dan lain sebagainya, di dalam satu halaman.

Sebuah halaman Web yang baik, mesti efisien dalam menggunakan sumber daya dan menampilkan yang perlu-perlu saja. Adalah hal yang baik untuk memberikan suasana yang berbeda dan mengesankan, yang hendaknya dengan seefisien mungkin.

Sebagus-bagusnya sebuah halaman, tidak akan pernah oleh orang lain, bila halaman tersebut terlampau besar dan karena terlalu besarnya, menjadi sangat lama untuk menunggu penampilaanya, lalu user akan bosan menanti dan beralih kesitus lain.

Halaman besar bukan berarti bahwa ukuran file page halaman itu yang besar, namaun perhatin juga link-link yang berada didalamnya. Ada beberapa isu disini, yaitu waktu akses, Information overload < too much information > dan multimedia overkill.

Untuk menghindarimultimedia overkill, bila halaman-halaman Web anda memakai image yang sama berulang-ulang pastikan untuk memakai satu file saja. Karena dengan hanya menunjukan pada satu file yang sama, user tidak perlumendownload berulang-ulang juga.

2.2.3. Mendukung navigasi

Di belantara samudra Internet, seseorang peselancar Web ( Web surfer ) gampang sekali tersesat.

Oleh karna itu sediakanlah jalan yang mudah bagi pengunjung Web Anda untuk dapat menelusuri satu demi satu semua halaman Web yang hendak anda sajikan, melalui link-link yang dapat di aksesdengan mudah pula, Jangan sampai, seseorang tidak jadi mengakses sebuah halaman padahal ia sangat ingin untuk itu, hanya karena ia tidak dapat menemukan halaman itu!! Sangat tragis dan ironis bukan?

Dari sini, struktur pohon (tree) halaman-halaman Web menjadi penting.

2.2.4. Buatlah halaman Web senyaman dan seramah munkin

Bila mungklin berkunjung kerumah orang lain, maka yang kita harapkan adalah kenyamanan dan keramahan. Seorang tuan rumah yang baik, akan merancang ruang-ruang rumahnya –terutama ruang tamu—senyaman dan seramah mungkin, agar pengunjung atau tamu merasa nyaman dan keramahan dari pemilik rumah.

Keindahan artistic, tatawarna merupakan bagian dari desain ini, yang mencerminkan pula citarasa seni dari pemilik rumah.

Di halaman Web, teks-teks meruoakan bagian dari ucapan-ucapan tulisan desainer Web. Buatlah halaman selamat dating seramah mungki, agar pengunjung situs anda tersebut tertarik untuk melihat-lihat lebih jauh, jangan malah mengusirnya.

2.2.5. Mendukung interaksi, bila diperlukan

Seringkali dibutuhkan satu interaksi dari penguna untuk keperluan tertntu. Contoh yang sederhana adalah buku tamu (guest book). Dengan buku tamu, seseorang pengunjung dapat menuliskan kesan-pesan saat berkunjung ke Web anda. Lalu dari catatan para pengunjung, barangkali Anda dapat melakukan perbaikan-perbaikan.

Contoh yang lain yang sangat sedikit lebih kompleks adalah Web jual-beli barang, atau yang popular dengan sebutan belanja online lewat Web (online shopping e-commerce). Seorang pengunjung dapat memesan barang lewat Web.

Bagaiman sebuah interaksi via Web dapat dilakukan? Untuk itulah, diperlukan pengetahuan, keterampilan dan kemampuan untuk mendesain sebuah Web yang dinamis, yang mampu melakukan interaksi dengan pengguna. Web tersebut pastilah menggunakan bahasapemograman script tertentu, misalnya ASP,JSP,atau PHP.

Contoh berikut halaman yang buruk.

2.3 Lebih lanjut tentang Table

Saat ini barangkali yang paling penting dari spesifikasi HTML 3.2 (Wilbur) adalah table.

<caption>Skor bulan agustus< / capation>

<tr>

<th Colspan=”2”>Total< /th>

< /tr>

<tr>

<th>Menang< /th>

<th>kalah< /th>

< /tr>

<tr>

<th Align=”left”>Elist-Junior< /th>

< /tr>

<tr>

<th Align=”left”>PIKSI-ITS< /th>

< /tr>

< /table >

Tampilan :

Skor bulan Agustus

	Total
	Menang	Kalah
ELIST- Junior	22	55
PIKSI-ITS	84	8

2.4 Form tag

Form digunakan untuk mengumpulkan jawaban dari pengunjung Web, melalui sebuah antarmuka berbasis Web yang terdiri blok isian teks, radio box, chek box, list box, password, dan sebagainya. Setelah pengguna mengisikan data-datanya, form dapat di-SUBMIT yabg kemudian diproses oleh sebuah program (yang dapat berupa ASP ataupun CGI).

Berikut adalah diagram hubungan cclient dan server dari form HTML

Sebuah form HTML memiliki bentuk dasar sbb:

isi FORM

< / FORM>

· Action menunjukan program atau halaman yang akan diproses kiriman data hasil isian dari form HTML tersebut

· Method menunjukan bagaimana cara data-data isi form HTML tersebut dikirimkan ke server. Ada dua mrthod yang umum yaitu GET dan POST

Elemen-elemen form:

· INPUT

· SELECT

· OPTION

· TEXTAREA

2.5. INPUT tag

Fungsi: mengumpulkan informasi isian dari pengguna

Atribut INPUT

· ALIGN: dipakai bersama file gambar (image). Nilai-nilai yang mungkin adalah TOP, MIDDLE dan BOTTOM.

· CHECKED: menempatkan posisi awal dari tipe isian CHECKBOX dan RADIO

· MAXLENGTH: Jumlah maksimal karakter yang dapat diisikan

· NAME: nama dari variable input yang dipakai ketika memproses form

· SIZE: Ukuran tampilan. Jika SIZE<MAXLENGTH maka isian bisa digulung(scroll).

· SRC: sumber file gambar/image

· TEXT: satu baris isian teks. Untuk isian banyak baris, dapat dipakai TEXTAREA.

· TYPE: tipe dari INPUT. Dapat berupa

· CHECKBOX: cawang(Ö ), dapat memilih lebih dari satu.

· HIDDEN: tersembunyi. Isian variable tidak dapat diubah oleh pengguna.

· IMAGE: setelah pengguna mengklik gambar IMAGE ini, maka form akan di-submit (dikumpulkan/dikirim) ke server web. Pasangan data posisi x dan y kursor sewaktu mengklik, juga ikut dikirimkan

· PASSWORD: isian text, namun ketika pengguna mengisi, tidak ditampakan ke layar (biasanya tampilan berupa asterik*)

· RADIO: berfungsi untuk menawarkan beberapa alternatif yang haanya dapat dipilih satu item saja oleh pengguna

· RESET: kalau di-klik akan mereset data-data di dalam form ke nilai asal (default)

· SUBMIT : jika di-klik akan mengirimkan data-data isian form ke server

· TEXT : satu baris isian teks.

· VALUE : menentukan nilai default dari isian

2.6. OPTION tag

Hanya diperlukan untuk SELECT.

Atribut OPTION:

· SELECTED: menunjukan posisi terpilih awal dari alternatif-alternatif yang ditawarkan

· VALUE: nilai dari alternatif

2.7. SELECT tag

Atribut SELECT:

· MULTIPLE: Jika tidak didefisinikan maka pengguna hanya bisa memilih satu. Tetapi bila didefisinikan MULTIPLE, maka pengguna boleh memilih lebih dari satu.

· NAME: nama variable untuk select ini.

· SIZE: ukuran tampilan

2.8. TEXTAREA tag

Memungkinkan pengguna mengisi lebih dari satu baris teks. Atribut TEXT AREA adalah:

- COLS: jumlah kolom tampilan

- NAME:nama variabel TEXTAREA ini

- ROWS: jumlah baris tampilan

2.9. FRAME tag

Netscape Navigator menambahkan ekstensi berupa FRAME. Dengan frame sebuah tampilan Web dapat dibagi-bagi menjadi beberapa bingkai, yang dapat berubah-ubah isiannya secara independen.

Namun sayangnya frame menimbulkan beberapa masalah, seperti navigasinya menjadi berantakkan bila pengaturan frame tidak tepat, dan ada kemungkinan frame didalam frame menjadi tak terbatas . Sekarang pengguna frame menjadi sangat sedikit di situs-situs terkenal. Disarankan daloam membuat Web, tidak menggunakan frame. Dibahas di sini lebih karena untuk diketahui.

C. NOFRAMES

a. Atribut FRAMESET

I. COLS: besar kolom frame

II. ROWS: besar baris frame

III. Angka dibelakang COLS atau ROWS dapat berupa angka biasa dalam satuan pixel, atau prosentase. Jika berupa *, maka berarti sisa ruangan akan tempati oleh frame.

b. Atribut FRAME

1. MARGINHEIGHT : tinggi batas tepi frame

II. MARGINWIDHT: lebar batas tepi frame

III. NAME: nama frame, yang dapat dipakai dalam petunjuk URL

IV. NORESIZE: menunjukan frame tidak dapat diunbah ukurannya. Normalnya, pengguna dapat mengubah besar kecil sebuah frame.

V. SCROLLING: bisa berisi YES, AUTO atau NO, yang menentukan apakan tombol scroll dapat dipakai oleh pengguna atau tidak.

VI. NOFRAMES: dipakai untuk menampilkan pesan bagi browser yang tidak mendukung pemakain frame.

C. Atribut TARGET

I.BLANK: bila diklik akan menampilkan dokumen Web dijendela browser baru.

II. _ NAME: nama frame yang akan dibuka sebagai dokumen target

III._ PARNET: dokumen akan ditampilkan didalam bingkai induk

IV._ SELF: dokumen akan ditampilkan didalam bingkai ini.

V _ TOP: dokumen akan ditampilkan diseluruh jendela browser ini.

Dapat dipakai elemen BASE untuk mendefisinikan setiap link agar diberi harga tertentu, missal TARGET=_BLANK. Contoh pemakain frame.

2.10. Cascade Style Sheet (CSS)

Dengan style sheet kita dapat memisahkan stlye (Format tampilan) dengan isi dokumen HMTL yang sebenarnya. Hal ini dilakukan dengan tujuan kita ingin mengubah tampilan yang ada dokumen HMTL, kita tidak perlu menggantikan sebagian besar isi source dengan mengotak-atik setuap baris source dokumen HMTL yang ingin kita ubah tersebut. Cukup dengan mengubah definisi style sheet atau dengan membuat style sheet merupakan sarana yang efisian dan fleksibel untuk mengatur tampilan homepage.

Pembuatan homepage dapat memberikan spesipikasi informasi style dari Style sheet Languae yang akan digunakan dalam sebuah dokumen HMTL. Untuk itu, sebaiknya digunakan elemen META untuk meletakan default Style sheet Language untuk dokumen tersebut. Contoh untuk deklerasi CSS (Cascading Style Sheet) Language, maka deklarasi formatnya adalah sbb:

Cara lain mendefisinikan tipe style adalah seperti contoh berikut:

<head>

</head>

Penulisan dengan TYPE seperti ini tidak harus dilakukan, tujuannya adalah untuk bagi browser yang tidak support untuk menggabaikannya.

2.10.1 Inline style information

Menggunkan atribut STYLE. Atribut ini digunakan untuk mendefisinikan informasi style dokumen HMTL untuk sebuah elemen tunggal. Sintaks dari data style tergantung pada Style Sheet Langguae yang digunakan. Contoh warna ukuran huruf suatu paragraph tertentu.

<p style=”font-size:12pt; Color: blue;”>aang

Dalam CSS format pendeklarasi property style adalah:

“nama : nilai”

dan diantara property yang satu dengan lainnya dipisahkan dengan tanda titik kome (;).

Atribut style bias digunakan untuk mengaplikasikan sebagian style pada sebuah dokumen HMTL. Jika style ingin digunakan pada beberapa tag lainnya kembali (re-used), pembuat humepage harus menggunakan elemen STYLE untuk mengelompokan informasi tersebut dalam bentuk hesder. Agar kemampuan lebih optimal dan fleksibel, pembuat homepeg bias mendefisikan style pada Exteral Style Sheet (style sheet luar).

2.10.2 Header Style Information

Style sheet bisa diletakan di bagian kepala dokumen HMTL. HMTL mengizinkan elemen-elemen STYLE berada di bagian HEAD maupun di dalam BODY. Imlementasi style sheet kali ini bisa diterapkan lebih bervariasi dibandingkan dengan Inline Steyle Information. Sebagai contoh, pendeklarasian elamen STYLE dalam bentuk header ini digunakan untuk:

1) Hal-hal yang berkaitan dengan sebuah tag spesifikasi HMTL, misalnya pendeklarasian untuk semua tag P atau untuk semua tag H, dsb

2) Mendefisinikan sebuah tag HMTL tertntu yang memiliki nama class spesifik dengan nilai-nilai style sheet tertentu (digunakan untuk mendefisinikan style tag tertentu). Misalnya, atribut CLASS yang berisi nilai-nilai tertentu tersebut digunakan tag P.

Contoh:

p.aang(teks-align:center)

maka style ini hanya digunakan oleh

3) Mendefisinikan sebuah nama identitas spesifik yang memiliki nilai-nilai style sheet tertentu (mendefisinikan tag-tag yang mengandung identitas spefisik tersebut.) Misalnya, atribut ID yang memiliki nilai-nilai tertentu dengan identitas yang khusus pula digunakan oleh tag P dan DIV yang memiliki identitas khusus pula

Contoh:

#aang(teks-align:center;)

maka style digunakan oleh tag-tag apapun yang menggandung nama identitas khusus “aang”, misalnya:

2.10.3 Memformat tampilan teks dengan CSS

Dengan style sheet kita juga dapat membuat cetak tebal,miring, menentukan jenis dan ukuran huruf, dsb.

1) Menentukan ukuran huruf

Untuk mengatur huruf dengan menggunakanstyle sheet, gunakan perintah font-size dengan nilai tertentu yang menggandung satuan tertentu pula. Untuk ukuran dilihat pada table berikut:

Penulisaan di HTML	Menyatakan ukuran
Cm	Centimeter
Em	Em unit (tinggi default font).
In	Inci
Mm	Milimeter
Pi	Pica (ada 12 ponit per pica).
Pt	Point (ada 72.27 point per inchi).
Px	Pixel (default unit).

Contoh penulisan:

<p style=”font-size:12pt”>Riska Meita Sovie </p>

Berarti semua teks yang berada di antara tag <p> dan <p> akan memiliki ukuran huruf 12 point.

Pada contoh tadi kita menggunakan teknik “Inline Style”. Kita juga bisa menggunakan berbagai macam teknik style sheet yang lain. Berbagai macam alternatif penulisan pada style sheet lain:

1. Inline Style:

<p style=”font-size:12pt”>Riska Meita Sofie <p/>

2. Defisinisikan dulu style sheet pada dokumen HMTL tersebut di antara elemen <head></head> maupun antara <body></body> dengan contoh penulisan seperti ini…

<head>

</head>

<body>

<p> Riska Meita Sovie

</body>

3. Dengan menggunakan “External style sheet (style sheet luar)” yang akan kita pelajari nanti.

4. Ingat juga, pada contoh-contoh yang akan dibuat oleh penulis nanti akan digunakan teknik seperti pada sebelumnya, yaitu mendefisinisikan style sheet di antara <style></style> terlebih dahulu.

2). Menentukan bentuk huruf.

Ada berbagai macam bentuk huruf seperti Courier new, Arial,Verdana, Times New Roaman , dan masih banyak lagi yang lainnya. Pada pembuatan Homepage, jika kita tidak menentukan jenis huruf pada source HMTL-nya, bentuk huruf default browser yang telah ditetapkan sebelumnya. Bagaimana kita mengaturnya dengan style sheet? Gunakan perintah style sheet front-family.

Perhatikan contoh berikut ini.

P{font-family:arial;}

Div{font-family:”times new roman”;}

Jika bentuk huruf yang digunakan terdiri atas beberapa kata seperti “times new romwn”, “arial black”…”. Jika hanya terdiri atas satu kata saja seperyi “arial”, “verdana”, lain-lain, Anda boleh menggunakan tanda kutip tersebut boleh juga tidak.

3). Menentukan jenis cetakan huruf

Jenis cetakan ada bermacam-macam, antara lain, cetakan tebal,cetakan miring, bergaris bahwa, ada garis diatasnya dan teks yang tercoret garis lurus.

Perintah style sheet yang digunakan adalah:

· Cetakan miringfont-style:italic;

· Cetakan tebeal font-weight:bold;

· Bergaris bawah text-decoration:underline;

· Ada garis diatas teks text-decoration:overline;

· Teks tercoret garis lurus text-decoration:line-througd;

4). Menentukan warna huruf

Perintah style sheet yang digunakan untuk menentukan warana huruf yang digunakan adalah color. Nilai dari perintah itu bisa berupa nama warna dalam bahasa inggris seperti “white”, “blck”, :red”, “green”, dan sebagainya.

Perhatikan contoh berikut ini.

<style>

div.merah{color:red;}

</style>

semua teks yang berada pada daerah ini akan berwarna merah

</div>

5). Mengatur jarak baris antara daerah teks

Kita juga bisa mengatur jarak baris antara daerah teks tertentu, misalnya antara paragraph, dengan menggunakan style sheet, Perintah yang digunakan adalah line-height, dengan nilai berupa angka disertai dengan satuan ukuran tertentu. Perhatikan contoh berikut ini:

<style>

p{line-height:1cm}

</style}

<p>

ini paragraph kedua…. Dan jarak antara paragraph Saturday dan dua adalah sebesar 1 cm

6). Mengatur perataan teks

Blok-blok teks tertentu, kita bisa menentukan jenis peralatan teksnya, seperti teks rata kiri, rata kanan, dan teks yang ditengah-tengah. Dalam style sheet digunakan perintah text-align untuk menentukan jenis perataan teks tersebut. Nilai-nilai adalah left (rata kiri), right (rata kanan),justify (rata kanan dan kiri), dan center (teks ditengah-tengah). Perhatikan contoh berikut ini.

<style>

div.rata_kanan{teks:right;}

</style>

semua teks yang berada pada daerah ini akan rata kanan

</div>

7). Membuat jarak spasi masuk pada awal paragraph

Untuk menentukan identitas, yaitu membuat jarak spasi pada awal paragraph (baris yang masuk ke dalam atau seperti fungsi tombol <TAB>) di gunakan atribut text-indent. Satuan yang digunakan oleh atribut-atribut ini sama seperti satuan-satuan yang telah kita ketahui sebelumnya, seperti pixel (px), centimeter (cm),point(pt) dan sebagainya. Perhatikan contoh berikut ini:

<style>

p.masuk_5 cm(text-indent:5 cm;)

</style>

paragraph ini memiliki jarak masuk awal sebesar 5 cm di awal paragraph…

8). Mengatur batas tepi (margin)

]Pada pembuataan homepage, kita juga perlu mengatur margin dari halaman homepage tersebut untuk memeindah tampilan. Dalam style sheet, untuk mengatur margin digunakan empat macam atribut, antara lain:

Margin-top untuk mengatur batas tepi atas

Margin-right untuk mengatur batas tepu kanan

Margin-bottom untuk mengatur batas tepi bawah

Margin-left untutk mengatur batas tepi kiri

Semua batas tersebut adalah relatif, maksudnya jika kita besarkan maupun kita kecilkan layar browser, dan style sheet telah menentukan batas tepi kiri 3 cm dan tepi kanan 3 cm tampilan akan selalu berusaha menyesuaikan agar kondisa penuliasan:

BODY{ margin-top:4 cm;

Margin-right : 3 cm;

Margin-bottom : 3 cm;

Margin-left : 4 cm;)

Penentuan batas-batas tepi (margin) tersebut bisa disederhanakan. Kita tidak perlu lagi menulis margin top, margin-right, dan sebaginya. Dengan atribut margin, kita dapat menyederhanakan bentuk penulisan tersebut.

Oleh karna itu, pada contoh sebelumnya kita bisa menggantinya dengan penuliasan:

BODY{margin: 4 cm 3 cm 3 cm 4 cm;}

Kita lihat urutan nialai atribut margin. Dari kiri ke kanan menunujukan urutan margin-top,margin-right,margin-bottom,margin-left.

Juka penulisan hanya terdiri atas satu nilai batas, nilai batas lainnya secara otomatis akan dibuat sama. Jika terdiri atas dua atau tiga nilai batas, nilai-nilai batas yang berlawanan (atas dengan bawah,kiri dengan kanan) akan sama.

Contoh:

(Margin: 1 cm 2 cm 3 cm;)

Berarti batas atas 1 cm, batas kanan akan sama dengan batas kiri yaitu 2 cm, dan batas bawah 3 cm.

9). Membuat tampilan border

Boeder merupakan pembatas suatu daerah /blok tertentu. Dalam hal ini, pembatas tertentu. Dan , daerah/blok tertentu. Dalam hal ini, pembatas tersebut berupa garis. Dan, daerah/blok tertentu yang dibatasi oleh border tersebut adalah daerah yang berada di dalam tag-tag blok seperti P, DIV, dan sebagainya.

Atribut-atribut yang berkaitan dengan pembuatan border:

a. Border, untuk mendefisinikan ada tidaknya garis pembatas. Nilai yang di berikan adalah none (tidak ditampakan border/garis pembatasnya),solid ( gari pembatasnya berupa garis tebal dengan ukuran default), solid thin (garis pembatasannya lebih tipis dari pada solid)

b. border-width, untuk menentukan ukuran tebal garis pembatas. Satuan digunakan adalah satuan-satuan dalam HTML seperti px, cm, mm dan sebagainya

c. background, untuk memberikan latar belakang pada daerah yang dibatasi oleh border tersebut. Latar belakang ini bisa berupa warna maupun gambar. Untuk membuat latar belakang ini bisa berupa warna, nilai background adalah nama warna atau kode warna RGB hesadesimal. Sedangkan untuk membuat latar belakang berupa gambar, nillai background adalah URL (nama atau URL gambar yang digunakan sebagai latar belakang’)

d. margin, untuk mendefisinisikan batas-batas wilayah border relatif terhadap wilayah tag-tag blok yang digunakan diman tag-tag blok melingkupi wilayah border tersebut. Selain itu, kita juga bisa menggantikan margin-top, margin-right,margin-bottom,dan margin left

e. padding, untuk mendefisinisikan jarak antara isi border dengan garisan pembatasnya. Nilai yang diberi satuan seperti px,cm,mm dan sebagainya. Bentuk dan aturan penulisannya margin yang sederhana. Contohnya

{padding: 20px 20px 10px 10px;)

dengan urutan top right bottom left. Terdapat atribut lain yang bisa digunakan yaitu paddingh-top, paddingh-right. Paddingh –bottom, paddingh-left yang digunakan untuk mendefisinisikan padding di satu sisi saja.

f. blockquote merupakan tag block yang penulisannya dalam bentuk indetasi ( masuk ke dalam) dan biasa digunakan untuk pembuatan kutipan. Berbeda p, walaupun keduanya sama-sama tag blok, pada BLOCKQUOTE pada umumnya bisa berisi tag-tag blok yang lain (pada div juga demikian), sedangkan pada p perlakuan seperti itu jarang dilakukan. Jadi pada BLOCKQUOTE bisa saja terjadi.

</BLOCKQUOTE>

2.10.4 Pendefisinisian Style Tag dengan Nama Class Khusus

Style dapat dibuat dengan mendefisinisikan sebuah tag HTML tertentu dengan atribut style sheet yang memiliki sebuah nama class yang spesifik/khusus. Yaitu dengan menggunakan atribut CLASS dengan nama Class tertentu yang dapat menunjukan cirri khususu untuk siapa definisi style tersebut digunakan.

DIV dan span biasa digunakan untuk mengkelompokan tag-tag. Selain keduanya bisa digabungkan dengan atribut ID dan CLASS yang menawarkan mekanisme generic untuk memperluas struktur dokumen (mempermudah dan mengefisienkan pengaturan tampilan).

SPAN merupakan inline conent (text level), sedangkan div merupakan block level. Kedua sangat bermanfaat untuk style sheet. Dimana <DIV></DIV> itu sendiri maupun antara DIV dengan tag-tag lainnya, pada penggantinya barisnya tidak terdapat baris kosong (line break). Sedangkan seperti kita ketahui sebelumnya, antara P yang satu dengan P dengan tag-tag lainnya, terdapat penggantinya baris. Lihat kembali penggalan source dari tampilkan baris.

Ryan Giggs berhasil meraih MVP dan hadiah berupa sport <SPAN CLASS=”hadiah”>Toyota Celica SS-II</SPAN>

Perhatian baik-baik, tidak ada pergantian baris pada SPAN.

2.10.5 Pendefisinisikan Style sebuah Nama Identitas Khusus

Teknik ini berbeda dengan teknik yang telah dipelajari sebelumnya. Pendefisinisian style dapat dibuat dengan mendefisinisikan sebuah nama identitas khusus tertentu dengan atribut style sheet.Untuk itu gunakanlah #nama-identitas-spesifik dengan atribut style tertentu yang telah didefisinisikan. Bentuk pendefisinisikan ini dapat dipakai oleh tag-tag apapun yang disertai nama identitas tersebut.

Terlihat jelas bahwa identitas ID “identitasku” bisa digunakan oleh tag-tag lain asalkan tag tersebut mencamtumkan ID=”identitasku

2.10.6 Pendefisinisian dengan External style Sheet

Pada pembahasan-pembahasan sebelumnya, style sheet dalam bentuk header di letakan didalam dokumen yang bersangkutan. Baik itu didalam HEAD,maupun di dalam BODY. Bagaimana jika kita inginagar pendefisinisian style sheet tersebut diletakan pada sebuah file tertentu terpisah dalam dokumen HMTL tersebut ? Inilah yang disebut External Styley Sheet (style sheet luar).

Keuntungan dari External Style Sheet ini adalah mempermudah modifikasi style tanpa harus menyentuh dokumen HTML yang bersangkuttan. Selain itu juga, pembuat homepage tidak usah scapek-capek membuat definisi-defisinisi baru di setiap dokumen. Dengan adanya External Style Sheet, misalnya alternatif yang pertama ukuran huruf besar. Pembuat homepage juga dapat menentukan mana alternatif terbaik yang akan di gunakan.

Hal-hal yang perlu diketahui dalam membuat External Style Sheet:

a. Tag yang digunakan adalah LINK

b. Atribut utama yang digunakan adalah HREF dengan nilai nama External Style Sheet tersebut(misalkan aangstyle.css) atau URL dari file External Style Sheet tersebut

c. Untuk membuat “Pesistent style sheet” (Style Sheet yang paten),di gunakan atribut tambahan REL dengan nilai stylesheet, tetapi jangan sampai menyertai atribut TITEL

d. Untuk memebuat”Persistent Style Sheet” (Style Sheet terbaik), digunakan atribut tambahan

e. Untuk memebuat “Alternate Style Sheet” (Style Sheet Alternatif),digunakan atribut tambahan REL dengan nilai alternate stylesheet dan atribut TITLE dengan nilai nama tertentu

Bisa juga ditambahkan atribut lainnya yaitu TYPE dengan nilai, misalnya text/css.

Contoh :

Untuk membuat”Persisent Style Sheet” :

<Link Href =”aangstyle.css”

Rel=”stylesheet” Type=”text/css.

Untuk membuat “Preffered Style Sheet” :

<Link HERF=”terbaik.css” TITLE=”Medium” REL=”stylesheet”

TYPE=”text/css.

Untuk memebuat “Alternate Style Sheet” :

Ingat nila dari HREF=”../style/mystyle.css”>atau

<LINK HREF=http://www.aang.com/mystyle.css Rel=”stylesheet” TYPE=”text/css.

Ingat, bentuk penulisan LINK bias seperti :

Namun jangan sekali-sekali menulisnya hanya dengan bentuk seperti berikut :

Karena, tampilan pada browser nanti,l tidak akan sesuai dengan style sheet yang telah didefisinisikan. Ini disebabkan karena tidak adanya REL=”STYLESHEET” yang mengkhibatkan browser tidak mengenali adanya External Style Sheet yang dipanggil oleh homepage tersebut.

3.1 Perkenalan FrontPage

Paket aplikasi FP terdiri dari FP Explorer, dimana dapat dibuat, dirancang dan menejemen situs Web dan FP Editor, Penyunting halaman Web, tanpa pengguna harus terlampau berumit-rumit dengan kode HTML. Tetapi nantinya pun dapat dilihat bahwa FP Editor yang bersifat WYSISYG serta visual ini masih memiliki kekurangan-kekurangan yang pada akhirnya akan “memaksa” seorang perancang Web Noteped, EditPlus, atau WinEdit

Di dalam EPFditor ada tiga tab menu:

- NORMAL: untuk melihat secara normal visual dan melakukan editing visual. Mode normal lazimnya hanya menampilkan visual namun berhenti (tidak teranimasi).

- HTML : untuk mengetikan kode HTML langsung.

- PREVIEW : untuk melihat tampilan hasil di browser, tetapi tidak dapat dilakukan modifikasi. Untuk memodifikasi halaman, pindahlah ke mode NORMAL.

Satu dokumen Web yang sama (sebuag file HMTL) dapat dilihat dan diedit menggunakan tiga mode ini secara berganti-ganti.

Bekerja dengan FP Editor sangat mudah, persis ketika bekerja dengan pengolah kata biasa, semacam MS-Word. Cobalah Praktekan!Setelah membuat dokumen Web, intiplah kode HTML yang dibangkitkan oleh FP Editor dengan ke menu tab.

3.2 Page Properti

Sebuah halaman Web memiliki sesuatu (property). Menu Property dapat diaktfkan dari “File:Page Properties”atau klik kanan pada halaman Web dan pilih “Page Properties”. Dua yang paling penting adalah:

1). General

a) Title: judul halaman Web, yang biasanya ditampilkan di caption browser.

b) Background Suond: untuk diisi suara latar bila halaman Web tersebut diakses. Suara latar dapat dimainkan terus menerus, atau beberapa kali saja ketika Web tsb diakses.

Suara latar di-loop selamanya (Forefer) atau beberapa kali saja

Backgruond

a) Background color (warna latar)

Secara default, lazimnya warna latar halaman adalah putih. Warna latar ini dapat diganti. Demikian pula dengan warna link, link aktif,dan link yang telah dikunjungi/telah diklik (visited link)

b) Background image

Jika diperlukan, latar belakang bias diberi gambar. Gambar ini akan ditumpuk merata pada semua layar. Dengan gambar latar, dapat dilakukan trick-trick tertentu, misalnya membuat semacam kotak-kotak grid atau papan catur, atau warna gradasi.

Opsi “Watermark” gunanya untuk setting agar gambar tetap mengambang ketika halaman web digulung (scroll).

3.3. Menyisipkan Gambar

Untuk menyisipkan gambar ke dalam halaman web, pakailah menu “insert:Image” atau “Insert:ClipArt”. Bila yang digunakan menu “ClipArt” maka yang dapat disisipkan tidak saja gambar, tetapi juga bisa berupa suara, atau vidio.

Gambar yang di sisipkan bias berformat nyaris apa saja, seperti TIFF, RAS, PCX,BMP (bitmap) tetapi yang umum format GIF dan JPG/JPEG. Mengapa dua format gambar GIF dan JPG ini menjadi kelaziman di internet?

a) Format GIF dan JPEG menyediakan kompresi yang sangat memadai, sehingga ukuran file gambar kecil. Ukuran file yang kecil cocok untuk kebutuhan ber-internet-ria

b) GIF menyediakan format tambahan, yaitu berupa animasi (GIF Animation,*disediakan ulasan lebih lanjut). Sedang JPG progressive, yaitu gambar yang dimuat perlahan dimulai dari gambar yang paling kecil (dengan resolusi paling rendah, yang menampilkan sketsa samar-samar) sampai format gambar paling bagus, bila pengguna sabar menunggu atau membiarkan halaman dimuat sampai bener-bener komplit. Setelah file gambar disisipkan ke dalam halaman Web, dapat dimodifikasi lebih lanjut tampilannya dengan klik kanan pada gambar tsb, kemudian memilih “Image Properties”.

c). Text: menunjukan teks apa yang bakal tampil di sisi kursor ketika kursor berada di atas gambar tsb. Di dalam kode HTML, teks ini diletakkan setelah “alt=”

d). Default Hyperlink: gambar tsb dapat merupakan wakil link. Bila gambar tsb diklik maka pengguna akan di antarkan ke link yang telah didefinisikan di “Location”.

3.4 Menyisipkan Link

Cara termudah untuk mendefisiniikan link pada sebuah teks adalah kata-kata terlebih dahulu, mem blok dengan korsor, lalu “Insert:Hyperlink” atau Ctrl-k.

Macam-macam link:

1. Link dengan representasi gambar atau teks.

Sebetulnya link dengan representasi gambar atau teks sama saja, hanya beda penampilannya

2. Link ke situs web lain.

Selalu diawali dengan definisi protocol “http:/”, atau suatau URL tertentu. Misal www.b b-201.com/user/-surya/ personal.htm.

3. Link Lokal

Untuk link local, bila berada dalam satu folder yang sama, akan langsung menunjukan ke file bersangkutan. Contoh : “diriku.htm”. kalau berada di folder di bawahnya, akan berbunyi seperti ini “folderbawah/lebihbawah/fileku.htm”. Untuk pemakaian web sesungguhnya pastikan kode HMTL memuat filder tanpa di dahului teks file:// atau memakai huruf drive seperti “d:/”, karena bila demikian, link tsb tidak valid kalau sudah diletakan ke sebuah server web.

4. Link ke anchor/bookmark (“penanda buku”)

Link ke anchor/bookmark adalah link yang menunjukan ke suatu bagian tertentu yang telah diberi nama, dalam satu halaman web yang sama. Untuk mendefisinisikan nama bookmark atau anchor, ketika kode HTML <a name=”nama_anchor”>di tempat teks yang dinginkan, lalu seperti biasa tutup dengan </a>.

5. Link e-mail.

Menunjukan suatu alamat email tertentu, yang bila diklik, browser akan memanggil aplikasi klien pengirim e-mail. Cirinya: diawali protocol “mailto”.

3.5 Theme

Salah satu keistimewaan FP Editor adalah theme (tema). Tema mendefisinisikan tampilan sebuah halaman web, yang meliputi kepala halaman badan, gambar, gambar latar belakang, item-item bullet dan sebagainya. FP Editor menyediakan beberapa tema yang dapat dipilih sesuai selsra, seperti blueprint, expedition, auotomotive dan lain-lain. Menu Thema dapat diakses dari menu “Format:Thema”

3.6. Efek-efek di fontpage Editor

FP Editor menyediakan bermacam efek, namun satu hal yang harus diingat bahwa efek ini pada umumnya hanya berfungsi untuk browser Misrosoft Internet Explorer (MSIE) mulai versi 4.0

3.6.1 Animasi Teks

Untuk menembah efek transisi kata misalnya, agar kata demi kata bias jatuh dari atas maka gunakan “Format:Animation:Drop In By Word”. Sorot teks yang akan diberi efek dapat dipilih salah satu dari bermacam pilihan. FP Editor secara otomatis akan menambah script Dynamic HTML (bias dalam bentuk javaScript) ke dalam kode HTML yang panjang sekali. Tentang dokumen dengan script akan di pelajari lebih lanjut pada ulasan VBScript dan javaScript.

Ketika menggunakan efek-efek ini, jangan terlampau beerlabihan, Karena pengguna mungkin bisa bosan akibat terlalu menunggu halaman tersebut tampil sepenuhnya. Jika efek animasi terlalu banyak, jagan heran juga bila kadang-kadang efek animasi web tersebut tidak bekerja sempurna (barang kali akibat semuanya berebutan mendapat jatah giliran CPU untuk dieksekusi).

3.6.2 Hover Button

Tombol ini di ginakan untuk navigasi ke link-link lain.

Menu: “Insert: Active Element: Hover Button”.

Di dalam Hover Button dapat dipilih efek-efek tombol yang muncul saat kursor diarahkan ke tombol tersebut, antara lain:

1. Glow: tombol berpendar dengan warna lain

2. ColorFill: tombol berubah warna

3. Bevel in: tombol seolah ditekan

Hover button ini mengunakan kelas applet java (fphover.class) yang tersedia di browser klien MSIE

3.6.3. Marquee

Marque adalah efek untuk animasi teks bagi Ative Page (halaman yang menggunakan eksentasi Active produk Microsoft)

4.1 Animasi GIF

Animasi GIF sebetulnya merupakan kumpulan gambar-gambar(frame gambar)dalam format GIF yang berada dalam satu file GIF. Salah satu program yang dapat membangkitkan file animasi GIF dari gambar-gambar adalah PaintShop Animation Shop.

File animasi GIF berbeda dengan animasi file film (movie) seperti AVI, QTW, atau MPEG, file animasi GIF adalah file gambar biasa. Jadi, jika sebuah browser tidak mendukung (sekarang hampir semua browser berbasis grafis mendukungnya)

Maka yang tampil di browser adalah GIF yang mati. Sementara file movie dapat di-play (dimainkan dari titik tertentu), di-rewind dan dinikmati sebagai film bersuara, file animasi GIF tidak.

Seperti halnya file animasi lazimnya, animasi GIF memiliki Frame-frame. Seluruh frame ukurannya harus sama. Masing-masing frame mewakili gerakan perlahan dari satu langkah animasi tersebut.

Setiap Frame dapat di-set berapa lama frame tsb akan tampil. Menu : pilih panah, klik kanan sebuah frame, lalu pilih Properties. Satuan lama adalah 1/100 detik . jadi jika diinginkan satu frame tampil selama setengah detik. Isilah dengan angka 50.

Satu buah animasi dapat di-set agar berputer selamanya, atau hanya beberapa kali ketika file gambar tsb tampil layar browser. Menu: “Edit:Animation Properties”. Canvas Color (warna kanvas) dapat dibuat transparan (bening) yang berarti mengikuti warna latar dari halaman Web. Atau di-set sesuai dengan warna latar animasi tersebut (opaque).

4.2 Pemuat Efek

PaintShop Animation Shop telah menyediakan beberapa efek untuk teks dan gambar.

4.2.1. Efek Teks.

1. Bukalah dokumen baru dengan menggunakan file: New

2. Bila Canvas Color dipilih Trasparant, maka latar belakang ditampilkan kotak-kotak papan catur abu-abu.

3. Menu: Effects: Text Transition.

4. Ketikkan kata-kata yang hendak diberi efek. Tentukan jenis huruf (Font), termasuk besar-kecilnya, dan pilihan efek teks, seprti

5. Ada beberapa pilihan efek teks, seperti:

· Marquee (gerakan teks mirip dengan efek FP)

· Bouncing: teks bergerak memantul dari lantai seperti bola

· Flag: seperti bendera berkibar

6. Definisikan lamanya transisi dan berapa frame yang dibangkitkan. Semakin banyak frame, semakin halus gerakan animasi yang ditampilkan, tetapi juga semakin besar file animasi GIF yang dihasilkan. Sebagai patokan sederhana, 15-20 fps ( Frame per second ) sudah cukup memadai untuk animasi biasa.

4.2.2. Efek Image

1. Bukalah terlebih dahulu satu buah file gambar apa saja.

2. Siaipkan sebuah frame (atau beberapa frame) jika menu Effect Image belum dapat diaksese

3. Menu: Effect Images

4. Pilihlah satu dari beberapa efek gambar yang disediakan, antara lain:

· Clock : dibuka/ditutp per bagian seperti putaran jam

· Curtain :

· Tirai

· Pinch: ditekuk

· Bind: tirai dengan kisi-kisi

· Masing-masing efek dapat dikustomasi, missal efek jam apakah searah atau berlawanan putaran jarum jam.

· Efek ini berlaku pada awal gambar dan akhir gambar. Gambar awal dan akhir dapat berbeda. Umpamanya,efek clock akan menutup gambar A dan membuka gambar B. Jika hanya satu gambar yang diefek, dapat di pakai gambar akhir kosong.

4.3 ANIMASI dengan FLASH

Macromedia sudah memulai sejak lama animasi untuk web ini. Update mutakhir adalah pengguna shockwave untuk animasi, sekaligus antar muka pengguna (user interface). Dengan Macromedia Flash, animasi tidak hanya gambar bergerak, tetapi juga menu yang beranimasi, sehingga pemakaiannya bisa sangat kompleks. Perbedaan lain aniamasi yang dibuat dengan flash menggunakan vector. Grafik vector memiliki keunggulan, yaitu tidak akan pecah gambarnya bila di perbesar (di-zoom).

Animasi dengan flash bahkan dapat diprogram (programmable). File Animasi Flash bereksentasi FLA untuk file sumber, sedangkan file hasil berformat SWF (Shockwavefile ). File hasil animasi dapat dilihat dari dalam browser sebagai objek ataupun disimpan sebagai file yang berdiri sendiri (stand alone) executable berekstensi EXE.

5.1 Perkenalan

Saat ini kita akan mulai membahas tentang script HTML yang popular dan banyak dipakai, yaitu JavaScript dan VisualBasic Script. Keduanya. Merupakan script yang banyak dipakai saat ini untuk membantu dalam modifikasi dokumen HTML.

VBScript merupakan salah satu angota keluarga bahasa permograman Visual Basic, bahkan merupakan inti dati bahasa permograman Visual Basic itu sendiri. Jika anda telah mengenal Visual Basic, maka VBScript tidak akan asing bagi anda. Jika belum, Anda tidak perlu khawatir karena VBScript relatif sederhana dan mudah dipelajari. Namun sekalipun sederhana, VBScript dapat digunakan untuk menangani pemrograman yang rumit sekalipun. Perbedan mendasar dari Visual Basic dan VBScript ini adalah bahwa Visual Basic memiliki lingkungan desain kerja (desain-time envorment). Dalam Visual Basic, anda dapat menciptakan form dan menulis mode program dengan menggunakan shell yang interaktif. Sedangkan VBScript tidak memiliki lingkungan tersendiri terdiri, karena VBScript “menumpang” didalam HTML.

Tentu saja agar VBScript dapat dijalankan oleh sebuah browser, maka browser tersebut harus mendukung pengguna VBScript selain HTML. Browser yang paling kompatibel dengan VBScript adalah Microsoft Internet Explorer. Kemampuan VBScript antara lain adalah validasi data, kalkulasi data, penyimpan, animasi, umpan baik multimedia, ataupun memberikan respon terhadap input yang diberikan oleh pengguna. VBScript juga mendukung pengguna Active X Control dan OLE Internet. OLE (Objek Linking and Embedding) adalah kemampuan untuk berinteraksi dengan berbagai macam jenis file, misalnya teks, grafis, vidio, sound dalam sebuah dokumen.

Untuk penempatan VBScript dalam dokumen HTML digunakan tag <SCRIPIT>. VBScrip dapa diletakan dibagian head maupun body. Umumnya script yang ditruh pada bagian head adalah script yang berhubung dengan deklarasi ataupun prosedur. Sedangkan script yang diletakan di paling akhir. Hal ini bertujuan agar script tersebut telah mengenal semua objek HTML yang ada pada bagian body tersebut, sebab jika tidak, maka akan terjadi error. Penulisannya adalah sbb.

<!—

… KODE VBScriptnya.-->

</SCRIPT>

Tujuan pemberian comment tag  adalah untuk browser yang tidak mendukung VBScript. Sehingga jika browser tidak mengenali sricpt Anda maka comment tag tersebut akan diabaikan. Perhatikan bahwa comment tag tersebut harus langsung ditulisakan tepat setelah tag <SCRIPT>.

3.2 Data dan Variabel

VBScript memiliki fleksibilitas dalam hal pengguna tipe data. VBScript cukup pandai untuk menerima tipe data apa saja yang anda masukan ke dalam variabel, tanpa harus terlebih dahulu diperkenalkan. Hal ini dikarenakan hanya satu type data saja yang menampung berbagai informasi. Mudahnya, variant dapat menampung data berupa teks, menarik, tanggal, bahkan objeck lainnya. Sekalipun VBScript hanya mengenal satu tipe data, tepi variant sendiri memiliki beberapa subtipe. Keterangan subtipe dapat dilihat pada Referensi.

Dalam penulisan sebuah variabel, dapat diberikan penamaan secara eksplisit (dideklarasikan dahulu) ataupun sebuah implicit (langsung tanpa adanya pendeklarasian variabel terlebih dahulu). Pandeklarasian secara eksplisit dilakukan dengan sintaks.

DIM nama variabel

Contoh penulisan pada script HMTL

<!—

Option Explicit

DIM nama variabel

…SCRIPT

</SCRIPT>

Aturan penamaan dari varianel / konstanta adalah sbb:

· Harus dimulai dengan huruf.

· Tidak boleh ada nama variabel yang sama pada ruang lingkup yang sama.

· Dapat mencapai 255 karakter.

· Tidak boleh menggunakan karakter-karakter tertentu, seperti karakter yang digunakan untuk menulis kode program.

· Tidak boleh ada spasi, untuk spasi digantikan dengan karakter underscore ( _ )

Untuk fungsi pengecekan tipe maka disediakan berbagai fungsi seperti:

· VarType

· IsDate

· IsNumeric

· Dll

Penulisan fungsi adalah seperti berikut

Parameter = Fungsi (namaVariabel)

Paraneter adalah merupakan variabel penyimpan kode kebenaran dari fungsi berupa bilangan integer. NamaVariabel adalah variabel yang akan diselidiki subtipenya. Selebihnya anda dapat melihat pada Referensi.

Berhubungan dengan variabel, oprasi matematika dan logika juga dapat dilakukan pada VBScript, diman operator matematika juga logika berlaku dalam penulisan rumus dan oprasi. Contoh

<HTML>

<HEAD>

<TITLE> Operasi pembandingan </TITLE>

</HEAD>

<BODY>

<!—

A = (10 / 3 >= 0) AND (5+1>2) bernilai “ & A & “<BR>”

-->

</SCRIPT>

</BODY>

</HTML>

5.3. Pernyataan bersyarat, perulangan, Prosedur & Fungsi.

Bentuk-bentuk yang digunakan pada pemograman dasar seperti pernyataan kondisi, perulangan bersarang, prosedur, fungsi juga berlaku. Contoh:

Sub Konversi_panjang (cm)

If cm < 0 then

Exit Sub

Else

Inci = 2.54 * cm

Document. Write inci

End If

End Sub

5.4. MessageBox dan InputBox.

Jika anda pernah perhatikan pada browser windows, pada beberapa site ada pernah bahwa adanya muncul suatu windows kecil dimana berisi informasi ataupun berupa inputan. Windows kecil / kotak kecil ini dinamakan sebagai Box. Ada 2 box yaitu InputBox dan MsgBox (MesseageBox). Keduanya menampilakan kotak dialog yang berinteraksi dengan anda pengguna.

Untuk InputBox cara penulisannya adalah sbb:

Variabel= InputBox (pesan, [, judul] [, default] [, xpos] [,ypos) ],filehelp, konteks])

- Variabel ® menyimpan masukan pengguna

- Pesan ® Teks yang ditampilkan pada kotak dialog

- Judul ® teks yang ditampilkan pada kotak judul.

- Default ® nilai yang dihasilkan jika tidak ada masukan.

- Xpos dan Ypos ® Koordinat posisi kotak dialog pada monitor.

- Filehelp ® file help memberi petunjuk pengguna kotak dialog.

- Konteks ® Bilangan merujuk pada topik help tertentu.

Sedangkan untuk MsgBox car penilisannya adalah sbb:

Variabel= MsgBox(pesan, [, tombol] [, judul ] [,filehelp, konteks])

- Variabel ® adalah variabel yang menampung nilai dari tombol yang diklik

- Pesan ® pasan yang ditampilkan pada dialog box

- Tombol ® Konstanta / bilangan menunjukan tombol apa yang muncul di kotak dialog. Nilai konstanta tombol dapat anda lihat pada Referensi.

- Judul ® teks yang tampil di balo judul kotak dialog

- Filehelp ® file help petunjuk pengguna kotak dialog.

- Konteks ® bilangan merujuk ke topic help tertentu.

Misalnya untuk script berikut:

Hasil = MsgBox (“Selamat Datang”, vboknly, Hallo”)

5.5. Event dan Event Handler.

Pada browser ataupun pada dialog box adanya suatu aksi penekanan tombol, pemasukan input, dll yang dilakukan pengguna untuk memicu suatu prosedur. Aksi inilah yang biasanya disebut dengan Event. Sedangkan prosedur yang dipicu selalu merupakan prosedur sub, dan disebut event handler. Event ininlah sebenarnya kunci untuk membuat dokumen web yang dinamis dan interaktif. Sebagai contoh jika kita melihat beberapa site ada bentuk tombolnya berupa gambar yang dapat berubah-ubah baik ketika kita mengkliknya ataupun muose pointer kita berada diatasnya. Untuk daftar event yang umum digunakan di VBScrpt dapat dilihat di Referensi

Jika kita perhatikan pada tag HTML sebelumnya terlihat bahwa setiap kontrol seperti kontrol input, tombol dan teks mempunyai property seperti adanya nama dan value. Properti ini adalah merupakan sifat dari sebuah kontrol. Dan property seperti adanya nama dan ditampilkan di web atau dapat dimasukan ke sebuah variabel. Untuk itu kita perlu digunakan sintakannya adalah:

Namakontrol.properti

Jika kontrol merupakan bagian dari suatu form HMTL maka sintak-nya adalah sbb:

Namaform.Namunkontrol.property

Dengan penjelasan dari Event yang ada, tentu juga ada yang mengontrol dari pada event tersebut. Pengontrol event ini di sebut dengan Event Handler. Cara penulisan dari Event Handler ini adalah sbb:

Sub namakontrol_namaevent()

…. Prosedur

End Sub

Contoh jika kita ingin memberikan event OnClick pada suatu tombol dengan nama “Tombol” maka penuliasan dokumen HTML –nya adalah:

<!—

Sub tomboll_Onclick

MsgBox “Hello”

End Sub

-->

</SCRIPT>

Atau dapat dengan cara penulisan

<!—

sub klik ( )

MsgBox “Hello”

End Sub

-->

</ SCRIPT>

Event yang paling penting sering dipakai adalah OnClick, tapi juga tidak menutup kemungkinan akan event handler lain yang ikut terlibat.

5.6. Objek VBScript

Ada beberapa macam objek yang merupakan objek bawaan dari VBScript, yaitu:

5.6.1 Objek Window

Digunakan untuk memanipulasi windows browser. Mempunyai Property:

· Name Name Browser

· Self Merujuk pada browser sekarang

· Default Status Teks yang ditampilkan pada status windows default.

· Status Teks yang ditampilkan padastatus windows

· Frames Menunjukan pada frame dokumen web.

· Document Dokumen web

· History Alamat URL yang pernah dikunjungi

· Navigator Informasi tentang Browser

· Location Informasi alamat URL sekarang

Mempunayi Metode antara lain:

· Alert Menampilkan kotak berisi peringatan

· Confirm Menampilkan kotak berisi konfirmasi

· Prompt Menampilakan kotak dialog meminta masukan

· Open Membuka window browser baru. Mempunyai beberapa atribut, dijelaskan di Referensi

· Close Menutup suatu window browser

· Set TimeOut Memanggil suatu prosedur setelah jangka waktu tertentu.

· Clear TimeOut Menghentikan metode Set TimeOut

· Navigate Menuju ke alamat URL tertentu

5.6.2 Objek Dokumen

Digunakan sebagai objek yang mengarah ke dokumen web dan digunakan memanipulasi dokumen tersebut. Mempunyai property:

· LinkColor Warna link dokumen HTML

· AlinkColor Warna link pada dokumen HTML pada saat tombol mouse ditekan.

· VlinkColor Warna link pada dokumen HTML yang pernah dikunjungi

· BgColor Warna latar belakang dokumen HTML

· FgColor Warna latar depan dokumen HTML

· Anchor Merujuk pada Anchor (tag <A>)

· Links Merujuk pada link (tag <A HREF=”>)

· From Merujuk pada form

· Action Aksi yang akan dilakukan pada form.

· Encoding Cara meng-encode form.

· Methode Cara mengirim data form ke server

· Target Nama dari window browser yang akan menampilkan hasil dari data form

· Element Merujuk pada element form

· LastModified Tanggal terakhir kalinya dokumen dimodifikasi

· Cookie Menyimpan data cookie

· Title Judul dokumen HTML

5.6.3 Objek Location.

Digunakan mengambil informasi tentang alamat URL yang sedang dibuka Alamat URL tersebut dapat berua alamat ada internet / alamat file di komputer local. Properti dari Obejk Location adalah:

· Href Alamat lengkap sebuah dokumen

· Protokol Protokol yang digunakan

· Host Nama host dan nomor port URL.

· HostName Nama Host

· Port Nomor port URL

· PathName Path lengkap dari dokumen yang dibuka

· Search String pencarian pada URL

· Hash Nama Anchor pada URL

Beberapa contoh objek lainnya dapat dilihat di Referensi

5.7 Fungsi String VBScript.

Dalam suatu data dan pengiriman variabel pasti diperlukan adanya suatu fungsi memanipulasi string. Fungsi-fungsi tersebut antara lain:

- Fungsi Asc(string) dan Chr(ASCII)

Kedua fungsi ini bekerja berlawanan, jika Asc mengambil nilai ASCII dari string sedangkan Chr adalah mendapatkan string dari ASCII

- Fungsi Ucase (hkecil) dan lcase(HBESAR)

Fungsi ini untuk mengubah huruf menjadi huruf besar/ kapital atau huruf kecil/biasa.

- Fungsi Ltrim(string), Rtrim(srting), dan Trim(string)

Fungsi ini untuk menghilangkan spasi di sebelah kiri, atau di sebelah kanan atau di keduanya

- Fungsi Left(string,jumlah) dan Right(stering,jumlah)

Fungsi ini untuk mengambil sejumlah karakter stering dari sebelah kiri atau dari sebelah kanan

- Fungsi Len(stering)

Fungsi ini untuk mencari panjang dari stering yang dihitung.

- Fungsi Space(jumlah)

Fungsi ini untuk menambahkan sejumlah spasi di depan suatu string

- Fungsi Stering(jumlah, karakter)

Fungsi ini untuk mengulang suatu karakter sebanyak jumlah tertentu.

- Fungsi InStr(string 1, stering2)

Fungsi ini mencari karakter di stering1 apa ada didalam stering2.

Beberapa Fungsi lain seperti fungsi waktu, fungsi matematika dapat anda lihat di Referensi.

Sekarang sampai disini dulu tentang VBScript. VBScript merupakan script yang sederhana dan mudah dipelajari, karena VBScript jauh lebih sederhana dibandingkan bahasa pemograman seperti C/C +. Diharapkan dengan mempelajarinya anda dapat membuat suatu webg yang menarik dan interaktif.

Perkenalan.

Selain VBScript juga ada script pemrogaraman yang harus kita ketehaui, salah satunya adalah JavaScript. Diani kita hanya memberikan ulasan singkat. Bahwa ada sesuatu yang tidak bisa dilakukan oleh VBScript dan bisa dilakukan oleh JavaScript. Ada perbedaan mendasar antara JAVA dan JavaScript. Keduanya bukan meruoakan produk yang berasal dari perusahaan yang sama. JAVA dikembangkan oleh Sun Misrosystem, sedangkan JavaScript oleh Netscape, yang juga dikatakan sebagai LiveScript. Kita belajar JavaScript karena script inilah yang disupprot oleh Netscape dan Internet Explorer, dikarenakan sebelum versi browser Netscape terbaru, Netscape hanya mensupprot JavaScrpit. Disini ada perbandingan antara IE (Internet Explorer) dengan Netscape tentang support dari JavaScrpit.

Versi Browser	Netscape Navigator	Microsoft Internet Explore
2	JavaScript 1.0	Not Support
3	JavaScript 1.1	JavaScript 1.0
4	JavaScript 1.2	JavaScript 1.2

Tentang cara penulisan dari JavaScript mirip dengan VBScript. Sintaks penulisannya adalah sbb:

<HTML>

<HEAD>

<TITLE> Web Programming </TITLE>

< !—

…(JavaScript diletakkan disini.)

</SCRIPT>

</HEAD>

<BODY>

…( HTML dokumen)

</BODY>

</HTML>

Untuk JavaScript ada beberapa sifat yang harus diperhatikan, yaitu:

- penulisannya adalah bersifat case-sensitive (memperhatikan perbedaan huruf besar dan kecil)

- Setiap perintah harus diakhiri dengan tanda titik koma( ; )

- Spasi tidak berlaku disini.

- Digunakan petik satu dan petik dua.

- Digunakan backslash ( \ ) sebagai fungsi dari staring.

- Digunakan tanda // untuk memberikan komentar dan setiap tring yang dimulai dengan tanda itu tidak akan diikutkan dalam pemrograman.

- Penggunaan variable tidak boleh kata-kata yang dipakai oleh JavaScript.

6.2. Dasar Pemrograman.

6.2.1 Variabel dan konstanta.

Pendefinisian variable dituliskan dengan kata var dan sifatnya adalah casa-sensitive. Tipe dari variable adalah jenis untyped, berarti variable dari JavaScript dapat menyimpan semua jenis data, dan tek perlu diset terlebih dahulu untuk tiap variable. Contoh

Var x = 1, y = 3, sum = 0;

If { sum == 0}

{

Sum = x + y;

}

6.2.2. Operator Logika dan Matematika.

Bermacam-macam operator logika dan Matematika yang dipakai di VBScript juga dapat dipakai di sini. Contohnya adalah :

· Nagasi ( - )

· Peningkatan jumlah ( ++ )

· Penurunan jumlah ( -- )

· Perkalian ( * )

· Pembagian ( / )

· Modulus ( % )

· Penambahan ( + )

· Pengurangan ( - )

· NOT ( ! )

· Kurang dari ( < )

· Lebih dari ( > )

· Kurang dari atau sama dengan ( <= )

· Lebih dari atau sama dengan ( >= )

· Sama ( = = )

· Tidak sama ( ! = )

· OR ( | | )

· Kondisional ( ? : )

· Koma ( ,)

· Bitwise XOR (^)

· Bitwise OR (|)

· Bitwise AND ( & )

· Bitwise NOT ( ~ )

· Bitwise Shif Left (<<)

· Bitwise Shif Right (>>)

· Unsigned Shif Right (>>>)

6.2.3 Perluangan dan Percabangan (kondisional)

Untuk percabangan, perintah seperti

· If

· Switch

Juga dapat dipakai dengan sintaks

If ( kondisi )

{

…( jika benar )

}

else

{

… (jika salah)

}

demikian juga dengan switch dengan sintaks

switch (n)

{

case kondisi n: ….

…;

default;

….

}

Untuk perulangan, perintah seperti for, while juga dipakai.

6.2.4 Fungsi

Untuk penulisan fungsi maka sintaksnya adalah mengikuti sbb:

Function funcition_name ( argumentl, argument2, …)

{

… ( JavaScript )

}

Terlihat bahwa untuk fungsi yang kita difinisikan sendiri ataupun fungsi yang merupakan fungsi standar dari JavaScript, penulisannya diapit dengan kurung kurawal ( tanda {} ).

6.3. Object, Event dan Dokumen Objek

Basis pemrograman dari JavaScript ini adalah bersifat Object Programming, dimana sama seperti VBScript bahwa di mempunyai property dan metode serta atribut. Selain itu JavaScript juga mempunyai Event dan Event Handler seperti pada VBScript. Disini kita akan membahas hal-hal yang penting dan sering digunakan dalam dokumen HTML seperti event handler ( ingat case-sensitive):

1. onClick()

2. onSumbit()

3. onLoad()

4. onUnload()

5. onmouseOver()

6. onMouseOut()

7. onFocus()

8. onChage()

9. onBlur()

Keterangan lebih lanjut dapat dilihat pada Referensi.

Sebenarnya apa yang ada diVBScript juga dimiliki oleh JavaScript, hanya perbedaannya terletak pada tata cara penulisan, dimana JavaScript lebih bersifat object programming dan bersifat case-sensitive. Untuk selanjutnya mungkin dapat dipelajari sendiri dengan melihat pada Referensi dan membandingkannya dangan cara penulisannya VBScript.

7.1. Personal Web Server

Untuk mempublikasi Halaman-halaman web yang telah dibuat ke Internet, diperlukan server Web. Seperti telah dikemukakan saat ini di internet tersedia banyak sekali pilihan server web ( web hosting ), baik yang gratis maupun yang membeyar. Untuk memuat file-file web halis karya kita ke server web tsb, biasanya dipergunakan fasilitas FTP (File Transfer Protocol) atau Web Publishing.

Bila masih dalam lingkup web tanpa ada akses ke entitas data eksternal ( luar), maka file HTML dapat langsung dilihat dari klien browser MSIE, tanpa perlu server Web. Namun kadangkala ingin dicoba apakah Halaman-halaman web tsb memiliki link-link yang benar, maka dibutuhkan server web. Microsoft telah menyediakan server web di Windows 98 berupa Personal Web Server (pws) dalam paket Option pack, sedangkan Windows NT dan Windows 2000 Propesional menggunakan IIS ( Internet Information Server). Instalasi pws dapat dipilih:

· Minimum

· Typical

· Custom

Jika tidak ingin repot-repot pilihan Minimum ( sudah dapat menjalankan ASP dengan spasi hard disk yang sedikit) atau Typical. Setelah instalansi berhasil, reset PC Windows.

Bila instalansi pws berhasil, akan muncul di start:Microsoft Personal Web Server.

- Aktifkan Personalkan Web Managrem (pwm), dengan klik pada icon pws di system tray ( layar kanan bawah Windows)

- Untuk mengakses web personal, gunakan htpp://nama_komputer/ atau htpp://localhost/

- Di layar pwm, dapat dilihat bahwa home directory (root untuk web server personal ini) ada direktori C:\inetpub\wwwroot\

- Untuk menambahkan nama alias baru, klik icon Advanced di pwm (icon paling kiri bawah dari jendela pwm).

- Yang tampil adalah folder-folder pws yang dapat digunakan sebagai demo/contoh. Enable Default Document telah diaktifkan dan nama-nama filenya untuk default document adalah Default.asp. Default document adalah dokumen yang akan dimuat secara otomatis oleh pws, kalau user sewaktu browsing tidak menetap nama file akan yang akan dibrowse.

- Tambahan alis baru dengan Add, missal ingin ditambahkan nama masing-masing user untuk setiap home direktorinya.

7.2. FTP Server

Anda harus mentransper halaman web yang telah anda buat ke sebuah Web server agar dapat memperoleh hasilnya. Salah satu sara adalah dengan program FTP ( File Transfer Protocol). Banyak macam program FTP, seperti WS_FTP, leap FTP, juga program FTP bawaan dari Windows sendiri. Kebanyakan dari program FTP tersebut, menanpilkan 2 buah list window. Yang kiri adalah web server tujuan, sedangkan yang kanan adalah local komputer anda sendiri. Cara pengesatnnya bermacam-macam, tergantung dari setting program masing-masing FTP. Yang paling sering anda jumpai mungkin adalah:

· Pemberian alamat Tiujuan FTP

· User ID ( kebanyakan butuh user, jika bebas berarti diisi Anonymous).

· Password ( tiap user mempunyai password sendiri, user Anonymuos tidak butuh password).

· Pemberian alamat local komputer.

A.1. Struktur Tag HTML :

Body

<BODY BACKGROUND=”URL” BGCOLOR=”#rrggbb or colorname” TEXT=”#rrggbb or colorname”

LINK=”#rrggbb or colorname” ALINK=”#rrggbb”or colorname” VLINK=”#rrggbb or colorname”>document-body< /BODY>

MSIE Only:

<BODY LEFTMARGIN=margin TOPMARGIN=margin BGPROPERTIES=”FIXED”> document-body< / BODY>

Comment

Division

Head

<HEAD> head-section </ HEAD>

Meta

<META HTTP-EQUIT=”HTTP header field name”

CONTENT=”Field value”

Span

Title

<TITLE> title-text </TITLE>

A.2. Teks Blok Tag HTML:

Block Quote

Center

Headings 1, 2, 3, 4, 5, 6

<H#> text < /H#>

<H# ALIGN=alignment>

Note # = untuk penomoran heading 1, 2, 3, 4, 5, 6

Horizontal Rule

<HR>

<HR WIDTH= Widht (pixels or percent)>

IE Only! <HR COLOR=” colorname”>

Line Break

<BR>

<BR CLEAR>

Paragraph

<p> text

<p ALIGN= alignment> text

<p NOWRAP> text

Plain Text

Preformatted Tex

A.3. Format Teks Tag HTML :

Address

Big Text

Bold

Citation

Code

Definition

Tag ini tidak berjalan di Netscape.

<DFN> text </DFN

Emphasized

FONT

Italic

<1> text </1>

Keyboard

Sample

Small Text

Strikethrough

Strong

Subscript

Teletype

Underlined

Beberapa versi dari Netscape tidak support untuk tag ini!

Variable

A.4. List Tag HTML :

Definition List

<DL> list entries < /DL>

<DL COMPACT> list entries < /DL>

<DT> term

<DD> definition

List Item

< LI > text </LI>

< LI > SKIP=number> text < /LI >

< LI > TYPE= type> text < / LI >

< LI > VALUE=number> text < /LI >

Ordered List

<OL> list entries </OL>

<OL COMPACT> list entries </OL>

<OL SEQNUM=number> list entries </OL>

<OL CONTINUE> list entries </OL>

<OL START=number> list entries< /OL>

<OL TYPE=type> list entries < /OL>

Unodered List

< UL > list entries < /UL >

< UL COMACT> list entries < / UL >

< UL SRC=”URL”> List entries < /UL >

< UL PLAIN >

<type> liest entries < / UL >

Note : type dapat berupa DISC, CIRCLE, or SQUARE

A.5. Tabel Tag HTML :

Caption

< CAPTION> text < /CAPTION >

Netscape- <CAPTION ALIGN=alignment> text < / CAPTION>

Internet Explorer- <CAPTION ALIGN=alignment> text </ CAPTION>

Not supported in Netscape- < CAPTION VALIGN=vertical-alignment> text < / CAPTION>

Table

< TABLE atribut> table-content < /TABLE >

isi dari atributs adalah

ALIGN=”aligment”

“alignment” yang dimaksud adalah:

· LEFT : rapat margin kiri

· Center : tengah halaman ( hidupkan tag NOFLOW )

· RIGHT : margin kanan

· BLEEDRIGHT : ujung kanan windows

· JUSTIFY : kedua margin ( Table dirapikan. Hidupkan NOFLOW.)

Note : ini tidak mempengaruhi dari inputan table:

WIDHT: number

BORDER

BORDER=number

CELLPADDING=number

CELLSPACING=number

Note : Number adalah isian dari angka besaran.

MSIE only- BGCOLOR=”#rrggbb”

BGCOLOR=”colorname”

MSIE only-BORDERCOLOR=”#rrggbb”

BORDERCOIOR=”colorname”

MSIE only- BGCOLORLIGHT=”#rrggbb”

BORDERCOLORLIGHT=”colorname”

MSIE only- BORDERCOLORDARK=”#rrggbb”

BORDERCOLORDARK=”colorname”

MSIE only- VALIGN=”valign”

CLEAR=clear

NOFLOW

COLSPEC=colspec

UNITS=units

Terlihatkan jika tag COLSPEC atau WIDHT digunakan untuk lebar units kolom atau table. Units isinya adalah

· En: lebar sesuai dengan ukuran font, dan proporsional.

· Relative : lebar kolam adalah persentasi dari lebar keseluruhan table.

· Pixels :lebar dengan ukuran pixel.

DP=”character”

Untuk meratakan decimal point.

NOWRAP

Table Data

isi dari attributes adalah:

CLOSPAN=”number”

ROWSPAN=”number”

NOWRAP

ALIGN=”align”

“align”dapat diisikan LEFT, RIGHT or CENTER

VALIGN=”align”

“align” dapat diisikan TOP, BOTTOM, or BASELINE

MSEI only-BGCOLOR=”#rrggbb”

BGCOLOR=”colorname”

MSEI only-BGCOLOR=”#rrggbb”

BORDERCOLOR=”colorname”

MSEI only- BORDERCOLORLIGHT=”#rrggbb”

BORDERCOLORLIGHT=”colorname”

MSEI only-BORDERCOLORDRAK=”#rrggbb”

BORDERCOLORDRAK=”colorname”

Table Header

isi dari attributes adalah sama seperti tag <TD>

Table Row

isi dari attributes seperti tag <TD>

A.6 Frame Tag HTML :

Frame

<frame name=”name” src=”link.html” frameborder=”on/off” marginwidht=”pixels” marginheight=”pixels” noresize=”yes/no/auto”>

Frameset

<frame rows=”pixels or “ COLS=”pixels or “

Noframes

<noframes>HTML to be shown< /noframes>

A.7 Objeck Tag HTML :

Applet

Area

Image

Map

<MAP NAME=”name”> Image map info< /MAP>

Objeck

< OBJECK CLASSD=”url” CODEBASE=”url” DATA=”url” CODETYPE=”content type” STANDAY=”loading message” HEIGHT=”value” WIDHT=”width” USEMAP=”url” NAME=”url” TABINDEX=”number” ALIGN=”left, center,right,justify” BORDER=”WIDHT”>object information< /object>

A.8. Form Tag HTML

Form

Note : target window name diisikan berupa:

- blank

- Self

- Parent

- Top

Form Input Check Box

Form Input File

Form Input Hidden

Form Input Image

Form Input Password

Form Input Radio Button

Form Input Range

This is not supported in many browsers.

<INPUT TYPE=RANGE NAME=name MIN=min> MAX=max VALUE=value>

Form Input Reset

Form Input Submit

From Input Button

From Input Text

From Select

<SELECT NAME=name> option entries < /SELECT>

<SELECT NAME=name MULTIPLE> option entries < /SELECT>

<SELECT NAME=name SIZE=size>option entries < /SELECT>

<SELECT NAME=name SCR=URL WIDHT=width HEIGHT=height UNITS=units> option entries < /SELECT>

<OPTION> content

<OPTION SELECTTED> content

<OPTION VALUE=value> content

From Text Area

<TEXTAREA NAME=name COLS=#columns ROWS=#rows> content < /TEXTAREA>

A.9. Script Tag HTML :

Scripts

Noscript

.1. Subtipe

Subtip	Fungsi	Nilai (Var Type)	Keterangan
Empety	Is Empty	0	Tidak ada nilai berarti 0 utk numeric, atau string kosong
Null	Is Null	1	Tidak ada data sama sekali
Bolean	-	11	Mempunyai dua nilai yaitu TRUE atau FALSE, secara numeric berupa 0 atau 1
Byte		17	Bilangan 0 sampai 255
Integer		2	Bilangan dari –32.768 sampai 32.767
Currency		6	Bilangan dari –922.337.203.685.477,5808 sampi dengan –922.337.203.685.477,5807
Long		3	Bilangan dengan jangkauan –2.147.483.648 sampai 2.147.483.647
Single	IsNumeric	4	Bilangan bulat persisi tunggal jangkauan- 3.402823E38 sampai-1.401298E-45 untuk nilai negatif dan 1.401298E-45 sampai 3.402823E38 untuk nilai positif
Double		5	Bilangan bulat presisi ganda jangkauan-1.797693486232E308 sampai dengan –4.94065645841247E-324 untuk negatif dan 4.94065645814247E-324 sampai dengan 1.797693486232E308 untuk nilai positif
Date (Time)	IsDate	7	Tanggal jangkauan 1 Januari 100 sampai 31 Desember 9999
String		8	Kumpulan karakter mencapai 2 miliyar karakter
Objeck	IsObjeck	9	Berupa sebuah objeck
Error		10	Nomor keterangan error

Fungsi	Keterangan
CBool	Konversi Ke Boolean
CByte	Konversi ke Byte
Cdate	Konversi ke Data
CLnt	Konversi ke Lnteger
Clng	Konversi ke LongInt
CSng	Konversi ke Single
CDbl	Konversi ke Double
CStr	Konversi ke String

B.3. Nilai Konstanta tombol

MessageBox :

Konstanta	Bilangan	keterangan
VbOKOnly	0	Menampilkan tombol OK
VbOKCanel	1	Menampilkan tombol OK & Canel
VbAbortRetryIgnore	2	Menampilkan tombol Abort,Retry,dan Ignore
VbYesNoCanel	3	Menampilkan tombol Yes, No, dan Canel
VbYesNo	4	Menampilkan tombol Yes dan No
VbRetryCanel	5	Menampilkan tombol Retry dan Canel
VbCritical	16	Menampilkan icon Critical Message
VbQuestion	32	Menampilkan icon Warning Query
VbExclamation	48	Menampilakan icon Warning Message
VbInformation	64	Menampilkan icon Information Mesange
VbDefaultButton1	0	Tombol Pertama default
VbDefaultButton2	256	Tombol kedua default
VbDefaultButton3	512	Tombol ketiga default
VbDefaultButton4	768	Tombol keempat default
VbApplicationModal	0	Application modal;pengguna harus merespon terlebih dahulu sebelum melanjutkan script
VbSystemModal	4096	System modal;semua aplikasi pada system akan ditunda sampai pengguna merespon kotak dialog

Nilai dari tombol yang diklik akan diberikan pada table berikut:

Tombol	Nilai
OK	1
Cancel	2
Abort	3
Retry	4
Ignore	5
Yes	6
No	7

B.4. Daftar event dalam VBScript:

Event	Tindakan pemicu
OnBlur	Kontrol kehilangan focus
OnChange	Isi control berubah, misalnya pada kotak isian (texbox).
OnClik	Kontrol diklik
OnDblClik	Kontrol diklikganda
OnLoad	Dokumen web ditampilkan
OnMouseMove	Mouse digerakan
OnMouseOut	Mouse pointer meninggalkan suatu control
OnMouseOver	Mouse pointer melewati suatu control
OnResize	Window browser diresize

B.5. Objeck Built-In VBScript

Window

Properti:

Properti	Keterangan
Name	Nama Window browser
Default Status	Merujuk yang ditampilkan pada bagian windows secara default
Status	Teks yang ditampilkan pada bagian status window secara default
Frame	Merujuk pada frame dokumen HTML
Document	Dokumen HTML
History	Alamat URL yang pernah dikunjungi
Self	Merujuk window browser sekarang
Navigator	Informasi tentang Browser
Location	Informasi alamat URL sekaeang

Metode:

Metode	Keterangan
Alert (pesan)	Menampilkan kotak dialog berisi peringatan
Confirm (pesan)	Menampilkan kotak dialog berisi konfirmasi
Prompt (pesan, default)	Menampilkan kotak dialog untuk meminta masukan
Open [alamat,nama,atribut]	Membuka window browser baru.
Close	Menutup window browser baru
Set TimeOut (“ekspresi”,waktu,[bahasa])	Memanggil suatu produser setelah jangka waktu tertentu.
ClearTimeOut waktu	Menghentikan metode SetTimeOut
Nagate alamat	Menuju ke alamat URL Tertentu.

Untuk atribut dari Open adalah

Atribut	Subtipe Atribut	Keterangan
Toolbar	Boolean	Window baru memiliki toolbar atau tidak
Location	Boolean	Window baru memiliki address bar
Directories	Boolean	Window baru memiliki tombol direktori
Status	Boolean	Window baru memiliki status bar
Menubar	Boolean	Window baru memiliki sroll bar
Scrollbar	Boolean	Window baru dapat dirubah ukurannya
Resizable	Boolean	Lebar window baru dalam pixel
Width	Integer	Tinggi window baru dalam pixel
Height	Integer	Tinggi window baru dalam pixel
Top	Integer	Jarak dari atas monitor dalam pixel
Left	Integer	Jarak dari kiri monitor dalam pixel

Document

Properti:

Properti	Keterangan
LinkColor	Warna link pada dokumen HTML
AlinkColor	Warna link dokumen HTML saat mouse ditekan
VlinkColor	Warna link dokumen HTML yang pernah dikunjugi
BgColor	Warna latar belakang dokumen HTML
FgColor	Warna latar depan dokumen HTML
Anchors	Merujuk pada Anchor (tag <A>)
Links	Merujuk pada link (tag<A HREF=” “>
Form	Merujuk pada form
Action	Aksi yang akan dilakukan pada form
Encoding	Cara meng-encode form
Method	Cara mengirim data form ke server
Target	Nama dari Window browser yang akan menampilkan hasil data
Elements	Merujuk pada elemen form
LastModified	Tanggal terakhir kalinya dokumen dimodofikasi
Cookie	Menyimpan data cookie
Title	Judul dokumen HTML

Metode:

Metode	Keterangan
Write	Menampilkan string pada dokumen
WriteLn	Menampilakan string pada dokumen dan membuat baris baru
Open	Membuka dukumen baru
Close	Metode untuk menutup metode Open

History

Properti:

Properti	Keterangan
Length	Menunjukan jumlah item yang terdapat pada history

Metode:

Metode	Keterangan
Back	Mundur satu langkah dalam daftar History
Forward	Maju satu langkah dalam daftar History
Go n	Maju sebanyak n langkah dalam daftar History, jika nilai n negative berarti mundur

Navigator

Properti:

Properti	Keterangan
AppCodeName	Nama kode dari Browser
AppName	Nama dari Browser
App Version	Versi dari Browser
User Agent	User Agent dari Browser

Location

Properti:

Properti	Keterangan
Herf	Alamat lengkap sebuah dokumen
Protocol	Protokol yang digunakan
Host	Nama host dan nomor port URLa
HostName	Nama Host
Port	Nomor port URL
PathNme	Patih lengkap dari dokumen yang dibuka
Search	String pencarian pada URL
Hash	Nama Anchor pada URL

Sumber Belajar Otodidak's With google And Smk Merdeka Bandung

Tags : info,

Dasar Web

Related Post

0 Comments for "Dasar Web"