BAB III - Yenikustiyahningsih's Blog



BAB III

HTML LANJUT

|Tujuan Umum : |Mahasiswa dapat menggunakan konsep dan tag HTML lanjut untuk mendesain WEB yang terkoneksi dengan |

| |database |

|Tujuan Khusus : |Mampu menjelaskan format teks, table, frame, form, image, hyperlink pada HTML Lanjut dan membuat |

| |aplikasinya |

3.1. Memformat Teks

Ada beberapa fasilitas tag yang dapat menjadikan tampilan HTML menjadi lebih menarik. Pemformatan teks tersebut dibagi menjadi 4 yaitu :

• Logical formating

• Physical formating

• Font

• Karakter khusus

3.1.1. Logical Formating

Logical format akan menerapkan layout secara logis dan terstruktur, dimana tag-tag yang termasuk dalam logical formating adalah :

|1. | : |Untuk menandai suatu kutipan atau citation |

|2. | : |Untuk menampilkan kode pemograman misal bahasa C |

|3. | : |Untuk menandai suatu teks yang ditekankan oleh penulis |

|4. | : |Untuk menandai suatu teks yang harus dimasukkan oleh user melalui keyboard |

|5. | : |Untuk menandai suatu teks yang dimaksudkan sebagai contoh |

|6. |: |Untuk menandai bagian terpenting dari suatu teks |

|7. | : |Untuk menampilkan nama variabel |

|8. | : |Untuk menandai sebuah sub definisi dari daftar definisi |

3.1.2. Physical Formatting

Physical Formatting merupakan format terhadap fisik suatu font. Adapun tag-tag yang termasuk kedalam Physical Formatting adalah :

|1. | : |Untuk Menampilkan huruf tebal |

|2. | : |Untuk menampilkan huruf miring |

|3. | : |Untuk menampilkan huruf seperti huruf mesin ketik |

|4. | : |Untuk menampilkan garis bawah pada suatu kata |

|5. | : |Untuk menampilkan garis horizontal pada bagian tengah huruf |

|6. | : |Untuk menampilkan ukuran huruf yang lebih besar |

|7. | : |Untuk menampilkan ukuran huruf yang lebih kecil |

|8. | : |Untuk menampilkan subscript |

|9. | : |Untuk menampilkan superscript |

3.1.3. FONT

Tag dapat digunakan untuk menentukan format tampilan font dalam document HTML seperti color, size, style dan lainnya. Di bawah ini fungsi dari masing-masing attribute dari FONT :

Tabel 3.1. Attribute dari FONT

|Attribute |Description |

|Color |Untuk menentukan warna font, anda bisa menggunakan nama font atau hexadecimal (#000000 - #ffffff) |

|Size |Untuk menentukan ukuran font 1-7 |

|Face |Untuk menentukan jenis Font biasanya dalam satu list ada beberapa font dan akan dibaca mulai yang |

| |paling kiri. |

COLOR

Color merupakan attribute yang bida anda tambahkan pada beberapa element seperti body, font, link dan lainnya. Dibagi dalam tiga kategori warna primer yaitu red, green, blue. Masing-masing color didefinisikan dalam 2 digit hexadecimal number.

#RRGGBB

Penulisan hexadecimal untuk warna tertentu dapat dilihat pada tabel dibawah ini :

Tabel 3.2. Penulisan hexadecimal untuk warna tertentu

|Hexadecimal |Warna |

|#FF0000 |Merah |

|#00FF00 |Hijau |

|#0000FF |Biru |

|#000000 |Hitam |

|#FFFFF |Putih |

Bentuk Standar Penulisannya:

...........

SIZE

Atribut yang digunakan untuk menentukan ukuran teks, yang mempunyai standar ukuran font 1-7.

Standar penulisannya adalah :

.......

FACE

Atribut yang digunakan untuk menentukan jenis font dari teks, jenis font yang sering digunakan diantaranya adalah : Time New Roman, Arial, Sanserif, Courier New, Verdana, Monotype Corsiva.

Bentuk Standar penulisannya adalah :

.......

3.1.4. Karakter Khusus

Digunakan untuk menampilkan karakter-karakter tertentu misal Tanda lebih besar, lebih kecil, derajat, dll. Adapun beberapa symbol untuk menampilkan karakter tertentu adalah sebagai berikut :

Tabel 3.3. symbol untuk menampilkan karakter tertentu

|Symbol |Karakter |Arti |

|< |< |Lebih kecil |

|> |> |Lebih besar |

|& |& |Ampersand |

|" |“ |Petik ganda |

|® |® |Terdaftar |

|- |™ |Merek Dagang |

|© |© |Hak cipta |

|÷ |÷ |Pembagian |

|× |X |Perkalian |

3.2. Tabel

3.2.1. Membuat Daftar

HTML telah menyediakan tag-tag untuk pembuatan daftar, yaitu tag untuk membuat daftar tanpa nomor (Unordered List ) dan tag untuk membuat daftar dengan nomor (Ordered List ).

a. Tag Daftar Tanpa Nomor

Sesuai dengan namanya maka implementasinya adalah pembuatan daftar tanpa menggunakan nomor baris, contohnya misalkan dibuat suatu daftar negara-negara yang kesebelasannya termasuk 5 besar dalam pertandingan sepak bola piala dunia 2002 di Jepang dan Korea. Berikut diberikan contoh 3.1. daftar tanpa nomor.

| |

| |

|unordered list with tag & |

| |

| |

|enam besar kesebelasan |

|Piala dunia 2002 korea-jepang |

| |

| |

|brazil |

|jerman |

|amerika serikat |

|spayol |

|korea selatan |

|senegal |

| |

| |

| |

| |

[pic]

Gambar 3.1. Daftar tanpa nomor

b. Tag Daftar Dengan Nomor

Apabila diinginkan pemberian nomor pada daftar, maka dapat dilakukan dengan mengganti tag menjadi tag , sedangkan tag lainnya tetap.

Berikut disajikan bentuk perubahan dari HTML pada contoh 3.2. :

| |

| |

|ordered list with tag & |

| |

| |

|enam besar kesebelasan |

|piala dunia 2002 korea-jepang |

| |

| |

|braziljerman |

|amerika serikatspayol |

|korea selatansenegal |

| |

| |

| |

| |

[pic]

Gambar 3.2. Daftar Dengan Nomor

Default penomoran daftar adalah menggunakan angka desimal, apabila diinginkan untuk menampilkan penomoran daftar menggunakan selain desimal (misalkan menggunakan huruf), maka dapat dilakukan dengan menambahkan atribut TYPE, dimana dapat diberikan format “A” atau “a” (untuk abjad) serta “I” atau “i” (untuk rowawi) seperti pada contoh 3.5. dibawah ini:

| |

| |

|ordered list with type="i" |

| |

| |

|enam besar kesebelasan |

|piala dunia 2002 korea-jepang |

| |

| |

|braziljerman |

|amerika serikatspayol |

|korea selatansenegal |

| |

| |

| |

| |

[pic]

Gambar 3.3. Daftar Dengan angka decimal

c. Tag Daftar Bersarang (Nested)

Sesuai dengan namanya bersarang yang berarti didalam daftar ada daftar lagi, ini dapat dilakukan dengan melakukan penulisan tag didalam tag sehingga didapatkan daftar bersarang sebagai berikut seperti pada contoh 3.6. :

| |

| |

|ordered list with type="i" |

| |

| |

|daftar kesebelasan |

|piala dunia 2002 korea-jepang |

| |

|grup a |

| |

|denmarksenegal |

|uruguayfrance |

| |

| grup b |

|spainparaguay |

|south africaslovenia |

| |

| |

| |

[pic]

Gambar 3.4. Daftar bersarang

3.3 Tag Tabel

Seperti yang telah dijelaskan diatas bahwa table banyak digunakan pada pembuatan halaman web dan dapat memisahkan teks menjadi beberapa kolom sehingga penempatan teks lebih mudah pengaturannya. Untuk membuat table maka diperlukan tag dan ditutup dengan tag , karena table melibatkan banyak pengaturan dan pilihan untuk pembuatan bentuk table, maka guna mendukung keperluan pembuatan table, telah disediakan atribut-atribut yang khusus disediakan untuk keperluan pembuatan table, adapun atribut-ataribut tersebut seperti pada table 3.4. dibawah ini:

Tabel 3.4. atribut-atribut untuk keperluan pembuatan table

|Kode |Value |Keterangan |

|border |0 sampai 15 |Meniadakan atau menampilkan ketebalan |

| | |garis-garis pada tabel |

| |- |Membuat baris table, pengaturan semua |

| | |teks dapat dilakukan disini |

| |- |Membuat kolom judul |

| | | |

| |- |Membuat kolom table isi |

| | | |

|align |LEFT CENTER RIGHT |Mengatur horizontal alignment |

|valign |TOP |Mengatur vertical alignment |

| |MIDDLE BOTTOM | |

|nowrap |- |Meniadakan pindah baris baru pada saat |

| | |table ditampilkan pada jendela broser |

| | |yang tidak mencukupi |

|rowspan |N |Menggabungkan baris table menjadi satu |

| | |(merge cells) |

|colspan |N |Manggabungkan kolom table menjadi satu (merge cells) |

3.3.1 Atribut ROWSPAN

Atribut ini digunakan untuk menggabungkan beberapa baris dalam satu kolom menjadi satu baris (merge cell) seperti contoh 3.5. dibawah ini:

| |

| |

|rowspan on table 4x4 |

| |

| |

| |

|itanayadosennrpnama |

|nilaiPurnama Sari, S.Kom |

|7401.040.001Anton Irawan80 |

|7401.040.005Santi W76 |

|7401.040.014Anastasia H90 |

| |

| |

| |

[pic]

Gambar 3.5. penggunaan Atribut ROWSPAN

3.3.2 Atribut COLSPAN

Atribut ini digunakan untuk menggabungkan beberapa kolom dalam satu baris menjadi satu kolom (merge cell), dimana atribut ini juga dapat digabungkan dengan atribut sebelumnya yaitu ROWSPAN seperti contoh .8. dibawah ini: Rowspan=3

| |

| |

|colspan on table 4x4 |

| |

| |

| |

|Daftar mahasiswa semester genap 2001/ 2002 |

|DosenNRPNama |

|nilai |

|Ariyanto, S.T2008.12.2002 |

|Rita Sugiarto80 |

|2008.12.2003Ria Agustina |

|762008.12.2004 |

|Tio pasukadewa90 |

| |

| |

| |

[pic]

Gambar 3.6. penggunaan Atribut COLSPAN

3.3.3 Atribut Latar Belakang Tabel

Untuk memberikan warna latar belakang didalam table maka dapat digunakan atribut bgcolor disertai dengan latar yang diinginkan, misalkan latar belakang table akan diisi dengan warna biru, maka dapat dilakukan BGCOLOR=”BLUE”, atau latar belakang diisi dengan gambar maka dapat dilakukan dengan BACKGROUND=”namafile.jpg”, file yang dapat digunakan untuk latar belakang adalah *.JPG, *.GIF, *.BMP dan *.PNG.

3.3.4 Atribut Align

Artribut ini digunakan untuk pengaturan pelurusan dari suatu cell, adapun macam pelurusan ini ada tiga yaitu LEFT, CENTER, dan RIGHT. Pelurusan cell ini diperlukan terutama untuk informasi data mengenai mata uang, atau yang berhubungan dengan nilai uang misalkan daftar harga. Bila ada daftar harga maka sebaiknya digunakan align RIGHT, sehingga akan memudahkan pembacaan.

Pada menggunakan align default dari table yaitu menggunakan align LEFT. Lebih jelasnya perhatikan script dan tampilan hasilnya contoh 3.9 dibawah ini:

| |

| |

|align on table |

| |

| |

| |

|Daftar harga handphone nokia |

|TipeGaransiNon garansi |

|Bekas |

|3210- |

|-700.000 |

|33101.350.000 |

|1.100.000800.000 |

|33301.400.000 |

|1.200.000950.000 |

|33501.750.000 |

|1.500.0001.100.000 |

| |

| |

| |

[pic]

Gambar 3.7. penggunaan Atribut Align

Untuk menampilkan garis pada table maka digunakan atribut border sebagai berikut, BORDER=1 atau BORDER=n, dimana n merupakan ketebalan Rata kanan dari border, yang dapat bernilai dari 0 sampai dengan 1000. Bila tab tanpa disertai atribut border, maka table akan ditampilkan tanpa border atau sama dengan bila atribut border diberikan angka nol yaitu .

Pada contoh table diatas dan dibawah terdapat karakter entitas yaitu   (non backspace ) yang artinya mengisi cell dengan karakter kosong.

3.3.5 Tabel Bersarang (Nested Table)

Kata bersarang (nested) sering digunakan pada istilah-istilah pemrograman dan sering dijumpai dalam setiap pemrograman. Demikian pula dalam pembuatan script HTML yaitu table bersarang, yang artinya adalah didalam suatu table terdapat table yang lain, kemungkin ini bias saja terjadi dengan meletakkan tag didalam tag lainnya, sehingga didapatkan table yang bersarang didalam table lainnya.

Pada contoh 3.8. dibawah terdapat karakter entitas yaitu   (non backspace ) yang artinya mengisi cell dengan karakter kosong.

| |

|nested table |

| |

| |

|Daftar harga handphone di jakarta mei 2002 |

| |

|Handphone Nokia |

|TipeGaransi |

|Non garansi |

|Bekas |

|3210  |

| 700.000 |

|33101.350.000 |

|1.100.000800.000 |

|33301.400.000 |

|1.200.000950.000 |

|33501.750.000 |

|1.500.0001.100.000 |

| |

| |

|Handphone ericson |

|Tipegaransi |

|Non garansiBekas |

|T20875.000 |

|650.000600.000 |

|T28s  |

| 700.000 |

|T662.800.000 |

|2.550.000  |

|R3804.000.000 |

|3.000.0002.500.000 |

| |

| |

| |

[pic]

Gambar 3.8. penggunaan Tabel Bersarang (Nested Table)

3.4 Tag FrameSet

Sesuai dengan namanya frame yang berarti bingkai, adalah berhubungan dengan pengaturan bingkai sebagai pembentuk jendela tampilan pada browser. Sehingga dapatlah jendela browser dibagi menjadi beberapa frame. Ada tiga pengaturan frame, yaitu secara vertical, horizontal dan kombinasi dari vertical dan horizontal. Script HTML yang digunakan untuk pengaturan frame maka tidak dapat digunakan untuk membuat halaman tampilan web, untuk itu diperlukan file yang berisi script HTML lain dan disisipkan kedalam script frame tesebut. Jadi bila ada dua frame maka diperlukan dua file HTML. Untuk dapat menyisipkan ketiga file HTML tesebut kedalam frame, diperlukan nama yang jelas dan benar serta dimana letak folder/ direktorinya, karena informasi tersebut digunakna didalam tag .

Berikut ini diberikan contoh ketiga file HTML tersebut dan sebuah file HTML lagi untuk

mengatur tampilan frame, sehingga disini diperlukan 3 (tiga) file HTML sekaligus. Berikut ini diberikan contoh 3.11. untuk membuat dua frame jendela secara horizontal.

File Script HTML pertama disimpan dengan nama SURAT.HTML

Panas sebelum DUEL

SHIZUOKA - Partai perempat final Piala Dunia antara Brazil dan Inggris mulai menyembulkan hawa panas. Kedua tim ini sudah melakukan psywar untuk menjatuhkan mental pemain masing-masing sebelum laga tersebut digelar di Stadion Shizuoka.Udara Shizuoka yang sedikit

menyengat diperkirakan juga bakal mempengaruhi penampilan kedua tim. Barangkali pemain-pemain Brazil sedikit diuntungkan dengan kondisi cuaca bagus tersebut. Menurut laporan, udara disekitar Shizuoka besok diperkirakan 22-27 derajad Celsius.Wartawan Jawa Pos Kholili Indra di Jepang melaporkan, publik Shizuoka juga sudah menyabut duel klasik tersebut. Para suporter Jepang yang sudah tidak mendukung timnya bakal terpecah untuk memilih salah satu tim.Bahkan sejak kemarin stadion yang berkapasitas 51.349 penonton itu sudah dijaga ketat.

Sumber: Jawa Pos, Kamis Pahing 20 Juni 2002

File Script HTML kedua disimpan dengan nama KABAR.HTML

PlayStation 2 Resmi versi Indoensia

Apakah penulis sedang mimpi atau berkhayal? Tidak! Jelas tidak! Judul ini adalah sebuah cita-cita, harapan dengan penuh keyakinan dari penulis. Siapa pemain video game di Indonesia yang tidak ingin punya PlayStation2 atau bahkan Xbox maupun Gamecube versi Indonesia? Mungkin banyak yang tidak perduli, tapi bagi pecinta video game sejati pasti akan bertanya balik, apa bedanya dengan versi Jepang atau AS. Apa untungnya membeli versi Indonesia, apa gengsinya membeli produk inpor yang dimodifikasi atau dirakit khusus untuk Indonesia.Penulis: Edwin Gunawan Pengamat dan pecinta Video Game Tinggal di Jakarta Komputek edisi 267, Minggu ke V, Mei, Tahun 2002

File Script HTML ketiga disimpan dengan nama INDEX.HTML

HORIZONTAL FRAME

[pic]

Gambar 3.9. Jendela Browser dengan dua Frame Horisontal

Gambar 3.9. Jendela Browser dengan dua Frame Horisontal Perhatikan bahwa pembuatan script HTML untuk frame tidak menggunakan tag , apabila tag diberikan maka frame tidak akan terbentuk, karena tag merupakan tampilan isi halaman web dan bukan untuk membuat frame.

Untuk membuat frame secara vertical, dapat dilakukan dengan mengubah atribut ROWS pada file INDEX.HTML menjadi atribut COLS, sehingga pada tag dapat dimodifikasi menjadi tag, perhatikan contoh 3.10. dibawah ini:

VERTICAL FRAME

[pic]

Gambar 3.10. Jendela Browser dengan dua Frame Vertikal

Dari kedua tampilan frame diatas dapat dibuat kombinasi antara frame vertikal dengan frame horizontal, sehingga menjadi satu jendela yang mempunyai frame vertical dan horizontal. Untuk keperluan tersebut maka diperlukan satu file HTML lagi yang digunakan untuk mengisi frame yang ketiga sebagai berikut.

File Script HTML tambahan disimpan dengan nama BERITA.HTML

Sekilas Tentang HTML

HTML

adalah singkatan dari Hyper Text Markup Language, merupakan bahasa teks yang menggunakan tanda-tanda (markup) yang dikenal dengan <tag>, dimana merupakan pengembangan dari SGML (Standard Generalize Markup Language).

Untuk mendapatkan hasil seperti pada Gambar 3.11 diatas maka script pada file INDEX.HTML dimodifikasi menjadi sebagai berikut:

VERTICAL & HORIZONTAL FRAME

[pic]

Gambar 3.11. Jendela Browser dengan Frame Vertikal dan horisontal

3.5. Form

Fungsi: Menerima informasi atau meminta umpan balik dari user dan memproses informasi tersebut di server

Standar penulisan:

3.5.1. Elemen Form

Tag digunakan untuk membuat form dalam document HTML

Tabel 3.5. Attribut untuk membuat form dalam document HTML

|Atribut |Fungsi |

|Method |Metode pengiriman data ke file tujuan (POST atau GET) |

| |Get : data akan dikirim dengan menggunakan query string pada URL |

| |Protokol_transfer://nama_host/path/nama_file : lokasi informasi pada suatu web server. |

| | |

| |Post : data akan dikirim ke server sebagai block data ke skrip. |

| | |

|Action |Aksi yang akan dilakukan jika user menekan tombol Submit |

|Name |Memerikan nama tiap masukan |

|Value |Memberikan nilai suatu masukan |

|Type |Tipe form yang akan digunakan |

3.5.2. HTML Input Elemen

Pada saat membuat form anda bisa meletakkan control-control pada form untuk memperbolehkan inputan dari user . semua control biasanya di letakkan di antara tag tapi anda juga bias meletakkan control diluar tag tersebut. Untuk menambahkan control gunakan tag .

Berikut macam-macam component input:

1. Textbox

Untuk membuat sigle line text control. Attribute size digunakan untuk menentukan jumlah character yang bisa ditampilkan, sementara maxlength attribute digunakan untuk menentukan maximum character yang bisa di masukkan. Contoh Penulisan syntax textbox :

Atribut-atribut:

Tabel 3.6. Attribut textbox

|Atribut |Fungsi |

|type=["text"|"password"] |Menentukan jenis field masukan |

| |Text, submit, password |

|name |Menentukan nama untuk field sehingga dapat dirujuk nantinya |

|value |Memberi nilai suatu input |

|Size |mengatur lebar field secara horisontal, berapa huruf maksimal yang dapat ditampilkan |

|maxlength |menentukan jumlah maksimum huruf (karakter) yang dapat dimasukkan |

2. Submit dan Reset

Tombol Submit: digunakan ketika user mengisi form dan ingin mengirimkan ke server, sedangkan Tombol Reset: digunakan ketika user ingin menghapus/mengosongkan semua masukan yang ditulis dalam form

3. Checkbox digunakan Untuk memberi beberapa pilihan kepada user

Tabel 3.7. Attribut untuk Checkbox

|Atribut |Fungsi |

|Checked |Untuk memberi default check |

|Name |Nama dari control |

|Size |UKURAN CONTROL |

|Type | |

|Value |UNTUK MEMBERIKAN VALUE KE INPUT |

Contoh:

Bacaan yang Anda sukai:

Novel

Koran

Majalah

Tabloid

4. Radio button

Fungsi: Untuk memberi (hanya) satu pilihan kepada user, Setiap radio button control harus memiliki nama yang sama, sehingga user hanya bisa memilih satu option saja. Radio button juga harus secara explisit memberikan nilai ke atribut value.

Tabel 3.8. Attribut untuk Radio button

|Atribut |Fungsi |

|Checked |Untuk memberi default check |

|Name |Nama dari control |

|Size |UKURAN CONTROL |

|Type | |

|Value |UNTUK MEMBERIKAN VALUE KE INPUT |

5. Text Area

Fungsi:Sebagai field masukan untuk pengunjung (dapat menerima lebih dari satu baris teks). Biasa disebut sebagai kotak komentar. Untuk membuat textarea gunakan tag

Atribut-atribut:

Tabel 3.9. Attribut untuk Text Area

|Atribut |Fungsi |

|Rows |Menetukan lebar kotak komentar |

|Columns |Menentukan tinggi kotak komentar |

|Wrap= |Menentukan fitur word wrapping |

|["off"|"virtual"|"physical"] | |

6. Daftar Drop Down

Fungsi:Memberikan menu pilihan kepada user (cara kerjanya seperti radio button yang hanya mengijinkan user untuk memilih 1 pilihan saja)

3.6. Image

Ada banyak format image yang ditambahkan dalam dokumen HTML, tapi ada tiga jenis format yang paling sering digunakan : GIF, JPEG, PNG. Untuk menambahkan gambar kedalam dokumen HTML digunakan tag . tag ini mempunyai beberapa attribut sebagai berikut :

Tabel 3.10. Attribut untuk Image

|Attribut |Keterangan |

|SRC |Menunjuk ke direktori file gambar |

|ALIGN |Menentukan posisi teks disekitar gambar dengan value : TOP, MIDDLE, BOTTOM, LEFT dan RIGHT |

|WIDTH |Menentukan lebar gambar dalam pixel |

|HEIGHT |Menentukan tinggi gambar dalam pixel |

|ALT |Menampilkan teks sebagai keterangan / tool tip dari gambar |

Menambahkan gambar

Penulisan skrip secara umum adalah sebagai berikut :

3.6.1. Image map

Yaitu suatu area pada gambar /image yang dapat kita beri hyperlink area yang biasanya disebut ”hotspots”. Koordinatnya ditentukan menggunakan bidng geometri seperti rectangle, polygon dan lainnya. Untuk membuat image map digunakan tag dan . Lihat atrribut dan nilai dari tag dan untuk image map pada tabel dibawah ini :

Tabel 3.11. Attribut untuk Image map

|Shape Type |Keterangan |

|Default |Semua area image |

|Rect |Area kotak tertentu |

|Circle |Area lingkaran tertentu |

|Poly |Area poligon |

Penulisan value / nilai untuk menentukan koordinat pada image yang berguna sebagai area hyperlink dapat dilihat pada daftar tabel di bawah ini:

Tabel 3.12. value / nilai untuk menentukan koordinat pada image

|Shape type |Keterangan |

|Rect |LEFT-X, TOP-Y, RIGHT-X, BOTTOM-Y |

|Circle |CENTER-X, CENTER-Y, RADIUS |

|Poly |X1, Y1, X2, Y2, ...XN, YN. |

Penulisan skript secara umum adalah sebagai berikut :

3.7. Hyperlink

Fasilitas hyperlink dipergunakan untuk menghubungkan atau membuat suatu link didalam sebuah dokumen maupun alamat URL. Ada beberapa hal yang perlu diketahui tentang model model dari hyperlink diantaranya yaitu :

• Link Address

• Anchor

• Link Ke dokumen lain

• Link ke bagian tertantu dalam dokumen

• Link ke bagian tertentu pada dokumen lain

Link Address

Merupakan metode link yang disediakan oleh HTML. Metode link tersebut dapat dibagi menjadi dua yaitu :

1. Absolute Address merupakan full internet address (URL) yang meliputi protocol, metwork location, path dan nama file. Contoh :

2. Relatif Address merupakan URL yang tidak menyebutkan protocol dan network locationnya (hanya path dan nama filenya).

Anchor

Anchor tag untuk menentukan hyperlink dalam dokumen HTML. Href digunakan untuk menentukan tujuan dari hyperlink tersebut.

Link ke dokumen lain

Link ke Bagian tertentu dalam dokumen

Untuk membuat link ke bagian tertentu dalam suatu dokumen gunakan property name untuk membuat nama tujuan dari link. Skrip secara umum adalah :

Sintaks name anchor :

Untuk lebih jelasnya silakan coba skrip di bawah ini.

Link ke bagian tertentu pada dokumen lain

Untuk membuat link ke bagian tertentu pada dokumen lain bias digunakan anchor name di dokumen yang menjadi tujuan hyperlink.

Contoh :

Pada page1.htm

Untuk membuat link ke name :

Pennjelasan E-commerce

Pada page 2.htm

Sintaks name anchor :

3.8. Bahan Diskusi :

Buatlah suatu halaman web yang menampilkan tampilan suatu daftar harga suatu barang (misalnya buku, peralatan musik, alat elektronik, VCD, komputer,dan sebagainya) dimana berisi nomor, nama (tipe), spesifikasi (keterangan), dan data lain yang berkaitan dengan barang tersebut. Gunakan tag-tag yang telah dipelajari diatas.

3.9. Bacaan / Rujukan Pengayaan

1. Abdul Kadir, ”Dasar Pemrograman WEB Dinamis menggunakan PHP”. ANDI Yogyakarta.Yogyakarta, 2003.

2. Arief Ramadahan, dkk. ”Buku Latihan PHP 5 & MYSQL”. PT. Elex Komputindo. Jakarta. 2005.

3. Chris Bates, Web Programming: Building Internet Applications, Third Edition, John Wiley & Sons Ltd, England, 2006.

4. Moh. Sulhan, ”Pengembangan Aplikasi Berbasis Web Dengan PHP & ASP”, Gava Media, Yogyakarta. 2007.

5. Welling Luke, Thompson Laura, ”PHP and MySQL Web Development”, Sams Publishing, 2003.

6.

7.

3.10. Kesimpulan

← Fasilitas tag yang dapat menjadikan HTML lebih menarik adalah dengan menggunakan format teks yang mana dibagi menjadi 4 yaitu Logical formating, Physical formating, Font, Karakter khusus

← Pemakaian Tabel dalam halaman web dapat membuat informasi tampil secara terstruktur, ringkas dan mudah dibaca serta membuat tampilan web menjadi lebih menarik.

← Untuk menampilkan beberapa dokumen HTML secara sekaligus dalam satu jendela web browser adalah dengan menggunakan Frame.

← Untuk menuliskan beberapa entitas karakter HMTL yang tidak terdapat di keyboard, diperlukan kombinasi entitas dengan format tertentu.

← Oleh karena web browser hanya akan mengenal dan memformat satu spasi antar kata meskipun di dalam kode HTML telah dibuat lebih dari satu spasi, maka kombinasi entitas “ ” digunakan untuk menampilkan spasi tambahan

← Simbol “” adalah simbol pembuka dan penutup tag. Untuk menampilkannya di dalam web browser dapat dengan menggunakan kombinasi entitas “<” dan “>”.

← Embed Tag digunakan untuk menyisipkan media (misalnya musik) ke dalam halaman web.

← Form digunakan untuk menerima informasi atau meminta umpan balik dari user dan memproses informasi tersebut di server.

← Format image yang ditambahkan dalam dokumen HTML ada tiga jenis format yang paling sering digunakan : GIF, JPEG, PNG

← Image map Yaitu suatu area pada gambar /image yang dapat kita beri hyperlink area yang biasanya disebut ”hotspots”. Koordinatnya ditentukan menggunakan bidng geometri seperti rectangle, polygon dan lainnya

← Hyperlink adalah Fasilitas hyperlink dipergunakan untuk menghubungkan atau membuat suatu link didalam sebuah dokumen maupun alamat URL.

3. 11. Latihan Soal

Buatlah halaman WEB yang berisi tentang cara-cara pembuatan halaman web sederhana mulia dari dasar. Buat seindah mungkin dengan gambar yang menarik sehingga orang tertarik dan akan membaca serta mempelajari petunjuk yang diberikan. Syarat pada halaman web tersebut harus menggunakan tag :

• Formating Teks

• Tabel

• Frame

• Image

• Form

• Hyperlink.

-----------------------

Hypertext

Hypertext

Topic name

Untuk membuat link ke name :

menuju ke topic nama

. . .

topic name

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download