MODUL 2 PARAGRAF, KARAKTER SPESIAL & DAFTAR/LIST Tujuan Instruksional Umum : Agar mahasiswa dapat mengenal dan memahami pembuatan paragraf, jenis-jenis karakter spesial dan daftar/list Tujuan Instruksional Khusus : - Mahasiswa dapat membuat paragraf dalam dokumen HTML - Mahasiswa dapat mengenal atribut-atribut dalam tag <P> - Mahasiswa dapat membuat karakter spesial dalam dokumen HTML - Mahasiswa dapat membuat daftar bullet dan numbering Pokok Bahasan : - Membuat paragraf, atribut pada paragraf - Membuat karakter spesial - Membuat Daftar dengan Bullet (UnOrderedList) - Membuat Daftar bernomor (Ordered List) - Membuat Daftar Definisi (Keterangan) - Membuat Daftar Direktori dan Daftar Menu - Daftar Pustaka : - Abdul Kadir, Pemrograman Web Mencakup : HTML, CSS, JavaScript & PHP, Penerbit Andi, Yogyakarta, 2002 - Ahmad Bustami, Cara Mudah Belajar Internet HomeSite dan HTML, Penerbit Dinastindo, Jakarta 1999 - Betha Sidik, etc, Pemrograman Web dengan HTML, Penerbit Informatika, Bandung, 2002 - Inixindo, Pengembangan HomePage & Intranet, Jakarta 1998 Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 1
2.1. Paragraf Penahkah Anda belajar Bahasa Indonesia untuk materi mengarang? Jika Anda mengarang suatu dokumen, maka karangan Anda akan tersusun beberapa paragraf atau biasanya disebut dengan alinea. Pada dokumen HTML, untuk memisahkan antar paragraf satu dengan paragraf lainnya dapat digunakan tag <P>. Tag ini merupakan tag yang berpasangan sehingga seharusnya ditutup dengan tag slash-nya </P>. Jika Anda mempunyai 3 paragraf, untuk paragraf pertama dan kedua, masing-masing <P> tidak harus ditutup dengan </P>, dan pada paragraf ke tiga harus Anda tuliskan tag slash-nya </P>. Jadi setiap paragraf haruslah dimulai dengan memberikan tag <P>. Di akhir masing-masing paragraf tidak diharuskan menuliskan </P> sebagai akhir paragraf. Namun jangan lupa, setiap pergantian pargraf harus dimulai dengan <P> kembali. FILE : paragraf.htm <TITLE> Membuat Paragraf </TITLE> <P>Teks pada paragraf pertama <P>Teks pada paragraf kedua <P>teks pada paragraf ketiga</p> Gambar 2.1 Hasil paragraf.htm Pada Gambar 2.1, browser tersebut membperlihatkan bahwa setiap paragraf akan ditampilkan dengan loncat satu baris. Jika teks yang akan ditampilkan melebihi lebar jendela browser, maka Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 2
secara otomatis tek yang tidak cukup akan ditampilkan pada baris berikutnya seperti pada contoh di bawah ini. FILE : parag1.htm <TITLE> Teks melebihi lebar jendela </TITLE> <P>Teks baris pertama pada paragraf pertama. teks pada baris kedua. Teks pada baris ke tiga. Teks pada pada baris keempat. <P>Teks pada paragraf kedua <P>Teks pada paragraf ketiga</p Gambar 2.2 Hasil parag1.htm Pada initnya jika ingin mendefiniskan paragraf baru, maka harus dituliskan secara eksplisit tag <p>-nya. Tidak ada pengaruhnya jika meng-enter berapa kalipun di dalam editornya (NotePad), karena semuanya akan dianggap sebagai suatu paragraf dengan sebelumnya. Ukuran jendela browser akan menyebabkan hasil yang berbeda-beda. Browser akan melakukan pemformatan tampilan sesuai dengan ukuran windownya. Yang harus diingat adalah jangan menggunakan tag <P> untuk menyisipkan baris kosong. Gunakan tag <BR> seperti pada Bab 1 sebagai penggantinya. Tag <P> mempunyai atribut ALIGN dengan value (nilai) adalah left, center dan right. Penulisannya sebagai berikut : FILE : parag2.htm <P ALIGN = [left, center, right] > teks paragraf </P> <TITLE>Paragraf dengan ALIGN </TITLE> <P ALIGN = "left">teks baris pertama pada paragraf pertama. teks pada baris kedua. Teks pada baris ke tiga. Teks pada pada baris keempat. <P ALIGN = "center">teks pada paragraf kedua <P ALIGN = "right">teks pada paragraf ketiga</p Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 3
Gambar 2.3 Hasil parag2.htm 2.2. Karakter Spesial Beberapa karakter mempunyai arti khusus dalam HTML, seperti tanda lebih kecil (<) yang berarti awal tag HTML dan tanda lebih besar (>) yang berarti akhir tag HTML. Jika Anda menginginkan browser untuk menampilkan karakter-karakter tersebut, maka harus disisipkan entitas karakter ke dalam source HTML. Entitas karakter mempunyai 3 bagian : sebuah ampersand (&), sebuah nama entitas atau sebuah # dan nomor entitas, dan terakhir adalah tanda titik koma/semicolon (;). Kelebihan dengan menggunakan nama dibanding dengan nomor adalah nama mudah diingat. Sedangkan kekurangannya adalah tidak semua browser mendukung nama entitas terbaru; sedangkan dukungan untuk nomor entitas hampir ada pada setiap browser. Entitas karakter pada dokumen HTML mempunyai sifat case-sensitive. Artinya, dalam menuliskan entitas kareakter tersebut, haruslah diperhatikan huruf kecil dan huruf kapitalnya. Misalnya : Penulisan akan berbeda dengan © atau &Copy; atau © Tabel 2.1 Karakter Spesial / Entitas Karakter Nama Entitas Nomor Entitas Keterangan Hasil Copyright ® Registered trademark Trademark Non-breaking space & & Ampersand & ««Angle quotation mark (left) <<»» Angle quotation mark >> (right) Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 4
" " Tanda kutip < < Lebih kecil < > = Lebih besar > Tanda kali x ÷ Tanda bagi FILE : karakter.htm <TITLE>Karakter Spesial </TITLE> Gambar 2.4 Hasil karakter.htm Untuk membuat teks dicetak lebih tebal, Anda harus menggunakan tag <B> dan juga harus ditutup dengan tag slash-nya </B> Gambar 2.4 Hasil karakter.htm 2.3. Daftar / List Daftar atau List digunakan untuk menguraikan daftar sesuatu, misalnya jenis-jenis list yang terdapat pada dokumen HTML tidak berbeda jauh dengan list-list yang berada pada dokumen MS. WORD, yaitu : 1. List dengan nomor (Ordered List / Numbering) 2. List tanpa nomor/dengan suatu lambang (Unordered List / Bullet) 3. List definisi Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 5
List dengan nomor adalah model daftar yang setiap itemnya diberi nomor. Sedangkan list tanpa nomor setiap itemnya menggunakan sebuah lambang/bullet. Selain kedua list tadi, ada juga list yang memberi uraian terhadap suatu item dalam daftar yang disebut list definisi. 2.3.1. List dengan Nomor / OrderedList / OL Seperti yang telah diuraikan di atas, bahwa list dengan nomor selalu menggunakan angka-angka 1, 2, 3, 4, 5,...dst sampai dengan namyaknya jumlah item dalam list tersebut. Dalam penomorannya, tidaklah harus menggunakan format nomor seperti di atas, tetapi dapat juga digunakan format penomoran lainnya, seperti huruf kecil, huruf kapital angka romawi kecil ataupun angka romawi besar. Secara umum penggunaan OL, dapat dilihat seperti di bawah ini : FILE : ol1.htm <TITLE>List dengan nomor standar </TITLE> <H3>DAFTAR MAHASISWA SISTEM INFORMASI</H3> <OL> <LI>Ardhi Sasongko <LI>Endah Mawar Indah <LI>Sandy Nayoan <LI>Dewi Aritonang <LI>Rosarie Kumala Dewi <LI>Yusrizal Fahmi <LI>Umniy Salamah <LI>Seto Tri Wasono <LI>Yudi Renaldo <LI>Met Sekendra </OL> Gambar 2.5 Hasil ol1.htm Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 6
Selain format standar penomoran di atas, dapat juga dilakukan penomoran seperti yang ditunjukkan oleh tabel 2.2 berikut ini : Tabel 2.2 Format penomoran pada OrderedList Jenis Keterangan Penomoran A Ditampilkan menggunakan abjad huruf besar/kapital a Ditampilkan menggunakan abjad huruf kecil I Ditampilkan menggunakan angka romawi besar i Ditampilkan menggunakan angka romawi kecil Format penomoran di atas digunakan pada atribut TYPE pada tag <OL>. Jika tidak digunakan atribut TYPE, maka default format penomoran adalah menggunakan angka biasa (1, 2, 3,...). Selain TYPE, atribut yang dimiliki oleh tag <OL> adalah atribut START. Atribut START digunakan untuk mendefinisikan nomor awal yang akan digunakan pada ORDERED LIST <OL>. FILE : ol2.htm <TITLE>List dengan abjad besar </TITLE> <H3>NAMA-NAMA BUNGA</H3> <OL TYPE = "A" START="2"> <LI>Mawar <LI>Melati <LI>Anggrek <LI>Nusa Indah <LI>Kamboja </OL> Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 7
Gambar 2.6 Hasil ol2.htm Pada gambar 2.6 di atas, format penomoran menggunakan TYPE = A, artinya adalah daftar yang akan ditampilkan menggunakan huruf besar/kapital. Sedangkan atribut START= 2, dimaksudkan sebagai awal dari penomoran yang dimulai pada abjad ke-2 yaitu dimulai dari huruf B. 2.3.2. List Tanpa Nomor / UnOrderedList / UL List tanpa nomor dapat ditampilkan dengan format/bullet standar berupa noktah/bulatan. Jenis ini dapat diubah menjadi disk (bentuk noktah tetapi tidak diarsir tengahnya dan bentuk kotak/box. Untuk dapat mengubah bentuk bulletnya dapat digunakan atribut TYPE pada tag <UL>, yang penggunaannya sama dengan tag <OL>. Berbeda dengan tag <OL>, tag <UL> tidak mempunyai atribut start. FILE : ul1.htm <TITLE>UnorderedList dengan bullet standar </TITLE> <H3>NAMA-NAMA BUNGA</H3> <UL> <LI>Mawar <LI>Melati <LI>Anggrek <LI>Nusa Indah <LI>Kamboja </UL> Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 8
Gambar 2.7 Hasil ul1.htm Contoh berikut ini, akan ditampilkan beberapa jenis bullet lainnya yaitu circle dan square FILE : ul2.htm <TITLE>UnorderedList dengan bullet lainnya </TITLE> <H3>NAMA-NAMA BUNGA</H3> <UL TYPE="circle"> <LI>Mawar <LI>Melati <LI>Anggrek <LI>Nusa Indah <LI>Kamboja </UL> <H3>NAMA-NAMA BUNGA</H3> <UL TYPE="square"> <LI>Mawar <LI>Melati <LI>Anggrek <LI>Nusa Indah <LI>Kamboja </UL> Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 9
Gambar 2.8 Hasil ul2.htm 2.3.3. List Definisi / Definition List List definisi digunakan untuk memberikan uraian terhadap suatu item di dalam daftar. Tag yang digunakan pada Definition List adalah tag <DL>, tag <DT>, dan tag <DD>. Semua tag tersebut merupakan tag yang berpasangan, sehingga harus diakhiri dengan tag slash-nya masing-masing. Contoh berikut ini merupakan penerapan dari definition list. FILE : dl.htm <TITLE>Membuat Definition List </TITLE> <H3>Daftar Definisi</H3> <DL> <DT>Bunga Mawar</DT> <DD>Berwarna merah, merah muda, bahkan ada yang putih serta berduri</dd> <DT>Bunga Melati</DT> <DD>Berwarna putih, bentuknya kecil, bisa juga digunakan untuk hiasan sanggul</dd> </DL> Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 10
Gambar 2.9 Hasil dl.htm ---------------------------- Latihan Untuk Dikerjakan Di Laboratorium Komputer Buatlah seluruh contoh file program yang ada di dalam BAB 2 dengan menggunakan kode-kode HTML! Latihan Untuk Dikerjakan Di Rumah Buatlah dokumen HTML dengan ketentuan sebagai berikut : 1. Judul pada title bar latihan BAB 2 2. Judul dokumen PT. EXSAKOMPUTINDO dengan ukuran heading 1. Diakhir judul sisipkan karakter spesial Registered trademark 3. Isi dokumen terdiri atas 3 paragraf (Tentukan sendiri isi masing masing paragrafnya, ukuran font dan jenis font) - Paragraf 1 : Posisi paragraf berada di kanan jendela browser - Paragraf 2 : Posisi paragraf berada di tengah jendela browser dan isi dokumen pada paragraf ini harus mengandung ORDERED LIST / UNORDERED LIST - Paragraf 3 : Posisi paragraf berada di kiri jendela browser 4. Berikan warna pada backgrounnya (bebas) 5. Berikan warna pada teksnya (bebas) Pemrograman Web : HTML & JavaScript/Sarwati Rahayu, ST., MMSI 11