LIST

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
- 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
. Tag ini merupakan tag yang berpasangan sehingga seharusnya ditutup dengan tag slash-nya
. Jika Anda mempunyai 3 paragraf, untuk paragraf pertama dan kedua, masing-masing
tidak harus ditutup dengan
, dan pada paragraf ke tiga harus Anda tuliskan tag slash-nya
. Jadi setiap paragraf haruslah dimulai dengan memberikan tag
. Di akhir masing-masing paragraf tidak diharuskan menuliskan
sebagai akhir paragraf. Namun jangan lupa, setiap pergantian pargraf harus dimulai dengan
kembali.

FILE : paragraf.htm <TITLE>
Teks
Teks
teks

Membuat Paragraf

pada paragraf pertama pada paragraf kedua pada paragraf ketiga

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


2

secara otomatis tek yang tidak cukup akan ditampilkan pada baris berikutnya seperti pada contoh di bawah ini. FILE : parag1.htm <TITLE>
Teks Teks
Teks
Teks

Teks melebihi lebar jendela

baris pertama pada baris ke pada paragraf pada paragraf

pada paragraf pertama. teks pada baris kedua. tiga. Teks pada pada baris keempat. kedua ketiga
Gambar 2.2 Hasil parag1.htm Pada initnya jika ingin mendefiniskan paragraf baru, maka harus dituliskan secara eksplisit tag
-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
untuk menyisipkan baris kosong. Gunakan tag
seperti pada Bab 1 sebagai penggantinya. Tag
mempunyai atribut ALIGN dengan value (nilai) adalah left, center dan right. Penulisannya sebagai berikut :
teks paragraf
FILE : parag2.htm <TITLE>Paragraf dengan ALIGN
Teks baris pertama pada paragraf pertama. teks pada baris kedua. Teks pada baris ke tiga. Teks pada pada baris keempat.
Teks pada paragraf kedua
Teks pada paragraf ketiga

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 &cOPy; Tabel 2.1 Karakter Spesial / Entitas Karakter Nama Entitas

Nomor Entitas

Keterangan

©

©

Copyright

©

®

®

Registered trademark

®

™

Trademark

™

¡

Non-breaking space

&

&

Ampersand

&

«

«

Angle quotation mark (left)

<<

»

»

Angle

>>

quotation

Hasil

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 Gambar 2.4 Hasil karakter.htm <TITLE>Karakter Spesial Untuk membuat teks dicetak lebih tebal, Anda harus menggunakan tag dan juga harus ditutup dengan tag slash-nya

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


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
DAFTAR MAHASISWA SISTEM INFORMASI

Ardhi Sasongko
Endah Mawar Indah
Sandy Nayoan
Dewi Aritonang
Rosarie Kumala Dewi
Yusrizal Fahmi
Umniy Salamah
Seto Tri Wasono
Yudi Renaldo
Met Sekendra

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
. Jika tidak digunakan atribut TYPE, maka default format penomoran adalah menggunakan angka biasa (1, 2, 3, .....). Selain TYPE, atribut yang dimiliki oleh tag
adalah atribut START. Atribut START digunakan untuk mendefinisikan nomor awal yang akan digunakan pada ORDERED LIST
.

FILE : ol2.htm <TITLE>List dengan abjad besar
NAMA-NAMA BUNGA

Mawar
Melati
Anggrek
Nusa Indah
Kamboja


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
, yang penggunaannya sama dengan tag
. Berbeda dengan tag
, tag
tidak mempunyai atribut start.

FILE : ul1.htm <TITLE>UnorderedList dengan bullet standar
NAMA-NAMA BUNGA

Mawar
Melati
Anggrek
Nusa Indah
Kamboja


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
NAMA-NAMA BUNGA

Mawar
Melati
Anggrek
Nusa Indah
Kamboja

NAMA-NAMA BUNGA

Mawar
Melati
Anggrek
Nusa Indah
Kamboja


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
, tag
, dan tag
. 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
Daftar Definisi

Bunga Mawar

Berwarna merah, merah muda, bahkan ada yang putih serta berduri

Bunga Melati

Berwarna putih, bentuknya kecil, bisa juga digunakan untuk hiasan sanggul


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)


11

LIST

Recommend Documents

DAFTAR MAHASISWA SISTEM INFORMASI

NAMA-NAMA BUNGA

NAMA-NAMA BUNGA

NAMA-NAMA BUNGA

NAMA-NAMA BUNGA

Daftar Definisi