Dasar Dasar HTML

1

BAB I

HTML (Hypertext Markup Language) 1.1 Tag Dasar HTML HTML (Hyper Text Markup Language) adalah bahasa pemrograman yang berfungsi untuk menampilkan halaman website yang diakses melalui protokol http. Dalam dokumen HTML dikenal istilah tag yang diawali dengan tanda < dan ditutup dengan tanda >.

Format dasar : <tag awal> …… </tag akhir> (tidak semua tag html memerlukan tag akhir). Contoh tag html yang tidak memerlukan tag akhir adalah : <br>, <meta>. Sedangkan contoh tag html yang memerlukan tag akhir adalah : <html>, <head>, <title>, <body>, <table>, dll. Tag html tidak bersifat case sensitive, artinya tidak membedakan huruf besar atau kecil.

Contoh : <html> = <Html> = <hTml> dan seterusnya.

Masing – masing tag memiliki attribute sendiri. <tag attribute = nilai>.

Contoh : <body bgcolor=”white”> Tag = <body> Attribte = bgcolor Nilai/Value = white

Struktur dasar penulisan dokumen html:

Nama File : dokumen.html

1 2 3 4 5 6 7 8

<html> <head> <title>Dokumen HTML</title> </head> <body> Ini adalah isi website </body> </html>

Ket title à judul dari halaman website, body à isi dari halaman website

2

Hasil dari kode di atas adalah:

Gambar 1.1 Dokumen HTML Sederhana

1.2 Block Level Element

Berfungsi untuk pengaturan ukuran teks. Dari yang mulai besar adalah <h1> sampai yang paling kecil <h6>. Penomoran tag paragraph terbalik dengan kondisi yang sebenarnya, dimana angka 1 akan menampilkan teks dengan ukuran terbesar dan angka 6 menampilkan teks dengan ukuran terkecil. Berikut contoh penggunaan tag ini : Nama File : blocklevel.html

1 2 3 4 5 6 7 8 9

<html> <head> <title>Penggunaan Tag Block Level Element</title> </head> <body> <h1>Selamat Datang di kjoew3dx zone </h1> <h2>Selamat Datang di kjoew3dx zone </h2> <h3>Selamat Datang di kjoew3dx zone </h3> <h4>Selamat Datang di kjoew3dx zone </h4>

Tag title

Tag body

3

10 11 12 13

<h5>Selamat Datang di kjoew3dx zone </h5> <h6>Selamat Datang di kjoew3dx zone </h6> </body> </html>

Ket Hasil dari script di atas adalah : akan menampilkan teks dari ukuran terbesar sampai ukuran terkecil

Dan hasilnya adalah sebagai berikut :

Gambar 1.2 blocklevel.html

1.3 Paragraf

Berfungsi untuk pengaturan paragraf. Pengatuan yang dilakukan sama dengan pengaturan paragraf pada software pengolah kata(micrsoft office, open office, dll). Diawali dengan tag <p> dan diakhiri dengan </p> Nama File : paragraf.html

1 2 3

<html> <head> <title>Penggunaan Paragraf</title>

H1

H6

4

4 5 6 7 8 9

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

</head> <body> <p align="left"> Karena attribut align = left, maka paragraf yang ada di tag ini adalah menjadi rata kiri </p> <p align="center"> Karena attribut align = center, maka paragraf yang ada di tag ini adalah menjadi rata tengah </p> <p align="right"> Karena attribut align = right, maka paragraf yang ada di tag ini adalah menjadi rata kanan </p> <p align="justify"> Dengan menggunakan tag ini, maka sama saja dengan membuat pargraf baru di microsoft word, atau open office. Karena attribut align = justify, maka tulisan yang ada di tag ini adalah menjadi rata kanan kiri </p> </body> </html>

Ket

Hasil dari script di atas adalah : akan menampilkan paragraph rata kiri, rata tengah, rata kanan dan rata kanan kiri. Selain attibut align, tag ini juga bisa diatur propertinya dengan menggunakan suatu class tertentu dari pendefinisan cascading stylesheet (css), misalnya dengan mengganti jenis font, memberi background teks, dll

Hasil dari baris perintah di atas adalah :

Gambar 1.3. paragraf.html

5

1.4 List Item Berfungsi untuk mengelompokkan data tertentu kedalam bentuk yang terurut (ordered list) maupun yang tidak terurut (unordered list). Terdapat 3 jenis pengurutan, yaitu :

1.4.1 Ordered list Tag ini akan memberikan penomoran untuk beberapa item secara otomatis, seperti pada dokumen word, nomor yang digunakan bisa berupa huruf atau angka. Tag nya adalah : <ol> ……… </ol> dan mempunyai attribute :

Nama Nilai Fungsi Type 1, a, A, i, I Type ordered list Start Angka atau huruf Nilai awal dari list Id teks Mencatat id teks onCLick Javascript event Event ketika teks di klik onDblClick Javascript event Event ketika teks di double klik Title teks Memberikan hint teks Style border, background, dll Memberikan efek tulisan Class Css Mendefinisikan class style

sheet Contoh penggunaan ordered list adalah :

Nama File : ordered_list.html

1 2 3 4 5 6 7 8 9

10 11 12 13 14 15 16 17 18 19 20

<html> <head> <title>Penggunaan Ordered List</title> </head> <body> <h1> Daftar menu rumah makan “POKOK E ENAK…”</h1> Menu Makanan : <ol type="1"> <li value="1000"> Nasi Krawu</li> <li> Soto Ayam Lamongan</li> <li> Otak - Otak Bandeng</li> <li> Pudak dan Jubung</li> <li> Nasi Roomo</li> <li> Rujak Cingur</li> </ol> Menu Minumam : <ol type="a"> <li> Es Teh</li> <li> Es Jeruk</li> <li> Es Degan</li>

6

21 22 23 24 25

<li> Es Onyen</li> <li> Es Campur</li> <li> Es Teler</li> </ol></body> </html>

Ket

Hasil dari script di atas akan menampilkan list item dengan menu makanan berupa nomor urut angka yang akan dimulai dari seribu.Sedangkan untuk menu minuman berupa huruf kecil yang dimulai dari a.

Hasil dari baris perintah di atas adalah sebagai berikut :

Gambar 1.4 ordered_list.html

1.4.2 Unordered list

Tag ini akan melakukan pengurutan dalam bentuk bullet seperti pada dokumen word. Jenis bullet yang tersedia adalah berbentuk square, circle dan round. Tag nya adalah : <ul> ……… </ul> dan mempunyai attribute :

7

Nama Nilai Fungsi Type square, disc circle Type ordered list Id teks Mencatat id teks onCLick Javascript event Event ketika teks di klik onDblClick Javascript event Event ketika teks di double klik Title teks Memberikan hint teks Style border, background, dll Memberikan efek tulisan Class Css Mendefinisikan class style sheet Contoh penggunaan unordered list adalah :

Nama File : unordered_list.html

1 2 3 4 5 6 7 8 9

10 11 12 13 14 15 16 17 18 1920 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<html> <head> <title>Penggunaan Un-Ordered List</title> </head> <body> <h1> Daftar menu rumah makan "POKOK E ENAK"</h1> Menu Makanan : <ul type="square"> <li > Nasi Krawu</li> <li> Soto Ayam Lamongan</li> <li> Otak - Otak Bandeng</li> <li> Pudak dan Jubung</li> <li> Nasi Roomo</li> <li> Rujak Cingur</li> </ul> Menu Minumam : <ul type="circle"> <li> Es Teh</li> <li> Es Jeruk</li> <li> Es Degan</li> <li> Es Onyen</li> <li> Es Campur</li> <li> Es Teler</li> </ul> Menu Buah-Buahan : <ul> <li> Apel</li> <li> Nanas</li> <li> Pisang</li> <li> Pepaya</li> <li> Melon</li> <li> Manggis</li> </ul> </body> </html>

8

Ket

Hasil dari script di atas akan menampilkan list item dengan menu makanan berupa list item yang berbentuk kotak (square), untuk menu minuman berbentuk lingkaran tepi dan untuk menu buah-buahan berbentuk lingkaran penuh.

Hasil dari baris perintah di atas adalah sebagai berikut :

Gambar 1.5 unordered_list.html

1.4.3 Definition list

Tag ini akan melakukan pengurutan data tanpa memberikan penomoran pada masing - masing item. Tag html nya adalah <dl> ……… </dl> sedangkan untuk menentukan term definition adalah dengan tag html <dt>…………</dt> dan untuk menentukan definitionnya adalah dengan tag <dd>…………</dd> Nama File : definition_list.html

1 2 3 4 5

<html> <head> <title>Penggunaan Definition List</title> </head> <body>

9

6 7 8 9

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<dl> <dt> Ini Term Definition I <dd> Ini Definition 1</dd> <dd> Ini Definition 2</dd> </dt> <dt> Ini Term Definition II <dd> Ini Definition 1</dd> </dt> <dt> Ini Term Definition III <dd> Ini Definition 1</dd> <dd> Ini Definition 2</dd> <dd> Ini Definition 3</dd> </dt> </dl> </body> </html>

Ket Hasil dari script di atas akan menampilkan list item tanpa memberikan nomor urut atau symbol tertentu.

Hasil dari baris perintah di atas adalah :

Gambar 1.6 definition_list.html

1.5 Hyperlink Berfungsi untuk menghubungkan halaman web sesuai dengan alamat yang dituju. Ada 2 tipe dari hyperlink, yaitu bookmark dan link. Untuk bookmark, biasanya digunakan untuk membuat link anchor. Jadi untuk memanggil link bookmark diperlukan nama dari link tersebut dengan menambahkan tanda “#” pada awal nama link. Berikut perbedaan link dan bookmark(anchor link).

10

Target yang dapat digunakan adalah :

1. _blank : membuka window baru

2. _self : link dihalaman yang sama

3. _parent : link di halaman yang sama

Secara default, target dari hyperlink adalah : _self Nama File : hyperlink_1.html

1 2 3 4 5 6 7 8 9

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

<html> <head> <title>Perbedaan Link dan Bookmark (Anchor Link)</title> </head> <body> <h1>Tips membuat <a href='#otak_otak'>Otak - Otak Bandeng</a></h1> <strong>Bahan :</strong> <ul> <li> 2 ekor (@300 gram) ikan bandeng, bersihkan </li> <li> 100 ml santan dari 1/2 butir kelapa </li> <li> 1 butir telur </li> <li> Daun pisang untuk alas </li> <li> 1 butir telur, kocok lepas untuk pencelup </li> <li> Minyak untuk menggoreng </li> </ul> <b>Bumbu halus :</b> <ul> <li> 10 butir bawang merah </li> <li> 4 siung bawang putih </li> <li> 2 cm kunyit </li> <li> 2 cm jahe </li> <li> 1 sdt ketumbar </li> <li> 4 buah cabai merah keriting </li> <li> 3/4 sdt merica bubuk </li> <li> 3/4 sdt gula pasir </li> <li> 1/2 sdt garam </li> </ul> <b>Cara membuat :</b> <ol> <li> Pukul-pukul ikan bandeng. Patahkan tulang ekornya. Keluarkan tulang dari bagian leher ikan. </li> <li> Keruk daging ikan bandeng yang memenpel di tulang dan kulit ikan. Buang durinya. Giling ikan sampai halus. </li> <li> Aduk rata bumbu halus, santan, telur dan ikan bandeng. Isi perut ikan bandeng. Alasi ikan bandengan dengan daun pisang. </li>

11

42 43 44 45 46 47 48 49 50 51 52 53 54 55

<li> Kukus 20 menit dengan api sedang sampai matang. Dinginkan. </li> <li> Celup ikan bandenga ke telur. Goreng dalam minyak yang dipanaskan di atas api sedang sampai kecoklatan. </li> </ol> <b>Catatan : </b><br> Jangan mengisi adonan isi sampai terlalu penuh supaya kulit bandeng tidak pecah. <br> <a name='otak_otak'>Untuk 2 ekor</a><br> Untuk tips membuat kue lumpur, klik <a href=hyperlink_2.html'>disini</a>

Ket

Untuk bookmark, nama link ‘otak_otak’ akan dipanggil ketika <a href=’#otak_otak’> diklik. Dan link akan dipanggil ketika <a

href=hyperlink_2.html’> diklik. Dan halaman akan menuju ke file hyperlink_2.html. Begitu juga di halaman hyperlink_2.html, ketika <a href=hyperlink_1.html> diklik, maka akan kembali ke halaman tersebut. Tambahan : Untuk bookmark bisa digunakan pada file lain, dengan ketentuan nama link anchornya harus ada atau bisa juga menampilkan window baru dengan menambah attribute target = ‘_blank’ (misalnya)

Berikut tampilan dari bari kode di atas :

Gambar 1.7.1 Link bookmark dan link antar halaman

12

Nama File : hyperlink_2.html

1 2 3 4 5 6 7 8 9

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<html> <head> <title>Perbedaan Link dan Bookmark (Anchor Link)</title> </head> <body> <h1>VARIASI KUE LUMPUR DARI TERIGU </h1> <strong>Bahan dan Bumbu :</strong> <ul> <li> Terigu Segitiga Biru / Gunung Bromo 100 gr</li> <li> Kentang kukus 500 gr. Dikukus dan dihaluskan</li> <li> Kuning telur 3 butir</li> <li> Margarin 90 gr, dicairkan</li> <li> Susu 200 gr</li> <li> Daging asap secukupnya</li> <li> Keju secukupnya</li> <li> Garam dan merica secukupnya </li> </ul> <b>Cara Memasak :</b> <ul> <li> Aduk kentang yang sudah dihaluskan bersama kuning telur, terigu, garam, merica, dan susu.</li> <li> Setelah semua tercampur rata, masukkan margarin yang telah dicairkan, keju, dan daging asap.</li> <li> Taruh dalam cetakan, panggang hingga matang. </li> </ul> <b>Tips:</b> <ul> <li>Agar kue lumpur bertekstur lembut, mudah dipotong, dan tidak berlubang - gunakan terigu berprotein sedang seperti Segitiga Biru / Gunung Bromo. </li> </ul> Kembali ke tips <a href='hyperlink_1.html'>sebelumnya</a>

Ket Jika link di atas diklik, maka akan kembali ke halaman sebelumnya. Bisa juga ditambahi dengan attribute target=’_blank’ jika ingin membuka window yang lain.

13

Berikut tampilan dari baris kode di atas :

Gambar 1.7.2 Halaman setelah link di klik

1.6 Tabel

Berfungsi untuk mengolah tabel. Memiliki 3 tag pendukung dalam pembuatannya, diantaranya adalah <th> <tr> dan <td>. Tag <th> untuk mendefinisikan judul dari tabel yang akan dibuat, tetapi bisa juga menggunakan tag <td>. Untuk membuat suatu row, maka tag <tr> bisa digunakan. Berikut contoh pembuatan table dengan 5 kolom dan 5 baris/row. Nama File : tabel_1.html

1 2 3 4 5 6 7

<html> <head> <title>Pembuatan Tabel</title> </head> <body> <table width="100%" border="1" cellspacing="0" cellpadding="0">

14

8 9

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

<tr> <td>Kolom 1 Baris 1</td> <td>Kolom 2 Baris 1</td> <td>Kolom 3 Baris 1</td> <td>Kolom 4 Baris 1</td> <td>Kolom 5 Baris 1</td> </tr> <tr> <td>Kolom 1 Baris 2</td> <td>Kolom 2 Baris 2</td> <td>Kolom 3 Baris 2</td> <td>Kolom 4 Baris 2</td> <td>Kolom 5 Baris 2</td> </tr> <tr> <td>Kolom 1 Baris 3</td> <td>Kolom 2 Baris 3</td> <td>Kolom 3 Baris 3</td> <td>Kolom 4 Baris 3</td> <td>Kolom 5 Baris 3</td> </tr> <tr> <td>Kolom 1 Baris 4</td> <td>Kolom 2 Baris 4</td> <td>Kolom 3 Baris 4</td> <td>Kolom 4 Baris 4</td> <td>Kolom 5 Baris 4</td> </tr> <tr> <td>Kolom 1 Baris 5</td> <td>Kolom 2 Baris 5</td> <td>Kolom 3 Baris 5</td> <td>Kolom 4 Baris 5</td> <td>Kolom 5 Baris 5</td> </tr> </table> </body> </html>

Ket

Untuk width dan height dari table, satuan ukuran yang bisa digunakan adalah persen dan pixel. Jika width tidak disebutkan, maka pembagian width masing-masing kolom adalah proporsional. Cellpadding untuk mengatur jarak antara tulisan dalam tabel dengan garis, dan cellspacing untuk mengatur jarak antara garis dalam tabel. Untuk mengatur ketebalan garis tabel, bisa menggunakan attribute style="border-collapse:collapse" yang dapat dipisahkan dalam bentuk CSS, sehingga pada tabel tersebut hanya memanggil nama class nya.

Berikut adalah tampilan dari baris kode di atas, jika ingin mengganti tebal garis tabel bisa menggunakan attribute style di atas :

15

Gambar 1.8.1 Tabel dengan 5 kolom dan 5 baris

Hal yang menarik dalam manipulasi tabel adalah ketika beberapa kolom atau baris di dalam tabel tersebut di merge baik secara horisontal maupun secara vertikal. Berikut contoh sebuah tabel yang kolom dan baris nya telah dimerge. Nama File : table_2.html

1 2 3 4 5 6 7 8 9

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<html> <head> <title> Tabel Merge Horisontal dan Vertikal</title> </head> <body> <table width="100%" border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse"> <tr> <th rowspan="2">Nama Makanan</th> <th colspan="4" align="center">Harga Promosi</th> </tr> <tr> <td align="center">Paket A</td> <td align="center">Paket B</td> <td align="center">Paket C</td> <td align="center">Paket D</td> </tr> <tr> <td>Pudak</td> <td align="right">5.000,-</td> <td align="right">6.000,-</td> <td align="right">7.000,-</td> <td align="right">8.000,-</td> </tr>

16

25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<tr> <td>Otak - Otak Bandeng</td> <td align="right">30.000,-</td> <td align="right">40.000,-</td> <td align="right">50.000,-</td> <td align="right">60.000,-</td> </tr> <tr> <td>Kue Lumpur</td> <td align="right">3.000,-</td> <td align="right">4.000,-</td> <td align="right">5.000,-</td> <td align="right">7.000,-</td> </tr> </table> </html>

Ket

Untuk tulisan makanan dan harga promosi akan otomatis dicetak lebih tebal, karena menggunakan tag <th> jadi diasumsikan sebagai judul. Untuk merge horisontal adalah dengan menambahkan colspan dan untuk merge vertikal adalah dengan menambahkan rowspan. Dan untuk mengatur aligment, menggunakan attribute align. Terlihat bahwa tebal garis tabel lebih tipis dari pada tabel sebelumnya, karena ditambahkan attribute style="border-collapse:collapse"

Berikut adalah tampilan dari baris kode di atas :

Gambar 1.8.2 Merge Tabel horisontal dan vertikal

17

1.7 Form Berfungsi untuk menangani kebutuhan interaksi antara website dengan pengguna. Interaksi tersebut bisa berupa pengguna memasukkan beberapa informasi yang yang dibutuhkan oleh website. Misalnya adalah formulir pendaftaran anggota, dimana pengguna diminta memasukkan nama, alamat, email, dsb. Untuk memulai sebuah form adalah dengan menuliskan tag <form>…</form>. Element – element yang bisa dipakai dalam form adalah textfield, textarea, select, radio button, checkbox, file, image, password, dan submit atau reset. Berikut contoh sebuah form pendaftaran anggota. Nama File : form.html

1 2 3 4 5 6 7 8 9

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<html> <head> <title>Form Pendaftaran Anggota</title> </head> <body> <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> <fieldset> <legend> Form Pendaftaran Anggota </legend> <table width="100%" border="0" cellspacing="0" cellpadding="5"> <tr> <td width="20%">Nama</td> <td width="1%">:</td> <td width="79%"><input type="text" name="nama" id="nama" ></td> </tr> <tr> <td width="20%">Password</td> <td width="1%">:</td> <td width="79%"><input type="password" name="password" id="nama" ></td> </tr> <tr> <td>Alamat</td> <td>:</td> <td><textarea name="alamat" id="alamat" cols="45" rows="5"></textarea></td> </tr> <tr> <td>Jenis Kelamin</td> <td>:</td> <td><input type="radio" name="radio" id="jk" value="Pria" > Pria <input type="radio" name="radio" id="jk" value="Wanita" > Wanita</td>

18

39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92

</tr> <tr> <td>Tgl Lahir</td> <td>:</td> <td> <select name="tgl"> <option value="1">1</option> <option value="30">30</option> </select> - <select name="bln"> <option value="1">1</option> <option value="12">12</option> </select> - <select name="thn"> <option value="1970">1970</option> <option value="1980">1980</option> </select> </td> </tr> <tr> <td>Hobi</td> <td>:</td> <td><input type="checkbox" name="hobi" id="hobi" > Makan <input type="checkbox" name="hobi2" id="hobi2" > Memancing <input type="checkbox" name="hobi3" id="hobi3" > Tidur</td> </tr> <tr> <td>Foto</td> <td>:</td> <td><input type="file" name="foto" id="foto" ></td> </tr> <tr> <td>Zodiak</td> <td> </td> <td><select name="zodiak" id="zodiak"> <option>Leo</option> <option>Libra</option> <option>Gemini</option> <option>Aquarius</option> <option>Cancer</option> </select> </td> </tr> <tr> <td> </td> <td> </td> <td><input type="submit" name="submit" id="submit" value="Submit" >

19

93 94 95 96 97 98 99

100

<input type="reset" name="reset" id="reset" value="Reset" ></td> </tr> </table> </fieldset> </form> </body> </html>

Ket

Pada tag form ada attribute enctype=”multipart/form-data”, hal ini dikarenakan ada elemen input type file, jadi attribute tersebut harus ada. Jika dalam suatu form tidak memakai element input type file, attribute enctype boleh tidak disertakan. Untuk attribute id dan name bisa berbeda, untuk name akan diproses pada sisi server dan klien dan id hanya bisa diproses pada sisi klien. Untuk element radio button, nama harus sama tetapi value yang berbeda. Untuk checkbox, nama harus beda. Tag <fieldset> dan <legend> adalah untuk memberi garis dan judul formnya

Berikut adalah tampilan dari baris kode di atas :

Gambar 1.9.1 Form Pendaftaran anggota

1.8 Karakter khusus Pada sebuah website tentunya pernah dijumpai adanya symbol © atau ®, dsb. Atau pada sebuah forum diskusi online pernah dijumpai ada sebuah posting yang menampilkan source code suatu program. Agar dapat menampilkan semacam itu, diperlukan manipulasi text terlebih dahulu dengan mengetahui karakter khusus yang didukung oleh browser.

20

Semua browser mengenal karakter ASCII berkode 32 sampai 126, yaitu : kode untuk angka 0 s/d 9, huruf a s/d z dan A s/d Z serta tanda baca seperti ? atau !. tetapi untuk dapat menampilkan karakter seperti di atas, maka harus menyertakan kode ASCII khusus yang disebut ASCII Escape Sequence. Format penggunaannya adalah &#n, dimana n adalah nomor kode ASCII yang diinginkan (0-31 && 127-255). Akan tetapi ada beberapa karakter ASCII yang juga digunakan sebagai komponen tag, misalnya : <, & dan > maka karakter – karakter tersebut harus ditangani secara khusus dengan kode yang diberikan dalam tabel berikut :

Karakter Notasi Keterangan < &lt Kurung runcing buka / kurang dari > > Kurung runcing tutup / lebih dari & & Tanda dan “ " Tanda petik ganda + ± Tanda plus minus Spasi Tanda spasi © © Tanda copyright ® ® Tanda Register ™ ™ Tanda trade mark dsb Untuk karakter – karakter yang lain, jika menggunakan dreamweaver sudah disediakan beberapa karakter khusus yang mungkin akan dibutuhkan. 1.9 Frame

Digunakan untuk membagi halaman website menjadi beberapa bagian yang bisa diakses secara mandiri. Maksudnya adalah, jika seorang pengguna mengakses menu sebelah kiri maka tidak ada hubungannya dengan menu yang sebelah kanan, maka proses yang dilakukan adalah hanya menu yang sebelah kiri. Jadi akan mempercepat proses loading dari website tersebut.

Contoh membuat tampilan website dengan 3 bagian, yaitu : judul, menu dan isi. Dengan menggunakan frame maka akan ada 4 file yang harus dibuat. File pertama adalah halaman utama yang mendefinisikan pembagian tampilan website. Ketiga file berikutnya adalah file yang ditunjuk oleh masing – masing frame. Berikut contoh baris kode untuk membagi website menjadi 3 bagian. Nama File : frameset.html

1 2

<html> <head>

21

3 4 5 6 7 8 9

10 11 12 13 14 15 16 17 18 19

<title>Website dengan 3 bagian Frame</title> </head> <frameset rows="80,*" cols="*" frameborder="yes" border="1" framespacing="0"> <frame src="frame_header.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" /> <frameset cols="200,*" frameborder="yes" border="1" framespacing="0"> <frame src="frame_kiri.html" name="leftFrame" scrolling="Yes" noresize="noresize" id="leftFrame" title="leftFrame" /> <frame src="frame_utama.html" name="mainFrame" scrolling="Yes" id="mainFrame" title="mainFrame" /> </frameset> </frameset> </html>

Ket

Untuk mendefinisikan bagian website, dengan menggunakan frameset. Kemudian pada attribute rows, itu merupakan pembagian dari tampilan web, dimana perbandingannya adalah 80(dalam pixel) kemudian * (berarti sisa dari seluruh isi website). Kemudian ada frame src yang memanggil file frame_header.html yang akan diisi dengan judul. Kemudian ada frameset yang kedua, dengan komposisi cols 200,*. Berarti akan dibagi 2 bagian secara horisontal. Dengan lebar pertama adalah 200 (pixel) kemudian sisanya adalah seluruhnya. Dengan masing – masing memanggil file frame_kiri.html (untuk menu kiri) dan frame_utama.html (untuk main menu).

Nama File : frame_header.html

1 2 3 4 5 6 7 8

<html> <head> <title>Website dengan 3 bagian Frame</title> </head> <body> <h1 align="center">Ini adalah judul Website</h1> </body> </html>

Ket File ini akan mengisi judul website Nama File : frame_kiri.html

1 2 3 4 5 6 7

<html> <head> <title>Website dengan 3 bagian Frame</title> </head> <body> Ini adalah menu kiri</body> </html>

Ket File ini akan mengisi menu kiri dari website

22

Nama File : frame_utama.html

1 2 3 4 5 6 7

<html> <head> <title>Website dengan 3 bagian Frame</title> </head> <body> Ini adalah main menu</body> </html>

Ket File ini akan mengisi bagian utama website

Berikut adalah tampilan dari ke empat baris kode di atas :

Gambar 1.10.1 Frame 3 bagian

Selain membagi website menjadi beberapa bagian, penggunaan frame juga untuk memasukkan file lain di website dimanapun letaknya dengan menggunakan iframe. Berikut contoh penggunaan iframe :

Nama File : iframe.html

1 2 3 4

<html> <head> <title>Website dengan menggunakan iframe</title> </head>

23

5 6 7 8 9

10

<body> Ini adalah teks di website <br> <iframe src="iframe_target.html" name=”insert_frame” rows="40" cols="10" frameborder="1" scrolling="yes"></iframe> </body> </html>

Ket File ini akan memanggil file lain dengan perintah iframe.dengan tinggi 40px dan lebar 10px border 1 dan bisa di scroll. Jika ingin frame yang di panggil tidak bisa di scroll maka set scrolling = no

Nama File : iframe_target.html

1 2 3 4 5 6 7 8

<html> <head> <title>Website dengan 3 bagian Frame</title> </head> <body> ini adalah iframe </body> </html>

Ket File ini akan dipanggil oleh file iframe.html

Berikut adalah tampilan dari 2 baris kode di atas :

Gambar 1.10.2 Halaman dengan iframe

1.10 Div dan span

Yang dimaksud layout design adalah tag <div>…</div> atau <span>…</span>. Kedua tag ini biasa digunakan dalam sebuah website yang menggunakan teknologi ajax atau jQuery untuk memanipulasi interface yang

24

ada, sehingga terkesan lebih interaktif. Pada dasarnya kedua tag tersebut sama dengan tag <p> untuk mengatur tata letak tulisan yang akan ditampilkan, tetapi lebih flexible karena bukan hanya teks saja yang dapat ditampung, melainkan seluruh komponen website. Pengaturannya biasanya dilakukan menggunakan CSS (Cascading Style Sheet) yang akan dibahas pada bab selanjutnya. Nama File : div_span.html

1 2 3 4 5 6 7 8 9

10 11 12

<html> <head> <title>Menggunakan DIV dan SPAN</title> </head> <body> <div>tulisan ini diletakkan pada div </div> <span>tulisan ini diletakkan pada div </span> <br /> <span>tulisan ini diletakkan pada div </span> <div>tulisan ini diletakkan pada div </div> </body> </html>

Ket

Pada tag div, jika ada teks / objek lain setelahnya maka akan ditampilkan di bawahnya. Dan untuk tag span, jika ada teks / objek lain setelahnya maka akan ditampilkan sebaris dengan tag span tersebut.

Berikut hasil dari baris kode di atas :

Gambar 1.11 Penggunaan div dan span

Dasar Dasar HTML

Documents

Transcript of Dasar Dasar HTML