5-Paragraf, Karakter Spesial, Daftar List

MODUL PERKULIAHAN
W182100012 –
PEMROGRAMAN
WEB
PARAGRAF, KARAKTER SPESIAL &
DAFTAR/LIST
Fakultas Program Studi Tatap Muka Disusun Oleh
05
TIM DOSEN
FASILKOM SISTEM INFORMASI
Pemrograman Web
. 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 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
paragraf harus dimulai dengan <P> kembali..
FILE : paragraf.htm
<HTML>
<HEAD>
<TITLE> Membuat Paragraf </TITLE>
</HEAD>
<BODY>
<P>Teks pada paragraf pertama
<P>Teks pada paragraf kedua
<P>teks pada paragraf ketiga</P>
</BODY>
</HTML>
Gambar 2.1 Hasil paragraf.htm
2021 Pemrograman Web PusatBahan Ajar dan eLearning

1 Tim Dosen http://www.mercubuana.ac.id
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 secara otomatis
tek yang tidak cukup akan di tampilkan pada baris berikutnya seperti pada contoh di bawah ini.
FILE : parag1.htm
<HTML>
<HEAD>
<TITLE> Teks melebihi lebar jendela </TITLE>
</HEAD>
<BODY>
<P>Teks baris pertama pada paragraf pertama. teks pada baris keeeedua.
Teks pada baris ketiga. Teks pada baris keempat.
<P>Teks pada paragraf ketiga</P
</BODY>
</HTML>
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 :
<P ALIGN = “[left, center, right]”> teks paragraf </P>
FILE : parag2.htm
<HTML>
<HEAD>
<TITLE> Teks melebihi lebar jendela </TITLE>
</HEAD>
<BODY>
<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 ketiga</P
</BODY>
</HTML>
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 &COPY; atau &Copy; atau &cOPy;
Tabel 2.1 Karakter Spesial / Entitas Karakter

Nama Entitas Nomor Entitas Keterangan Hasil
© © Copyright ©
&reg ® Registered trademark ®
™ Trademark ™
¡ Non-breaking space
& & Ampersand &
« « Angle quotation mark (left) <<
» » Angle quotation mark (right) >>
" " Tanda kutip ”
< < Lebih kecil <
> = Lebih besar >
× × Tanda kali x
&divide ÷ Tanda bagi ÷
FILE : karakter.htm
<HTML>
<HEAD>
<TITLE>Karakter Spesial </TITLE>
</HEAD>
<BODY>
Untuk membuat teks dicetak lebih tebal, Anda harus menggunakan tag <B> dan juga harus
ditutup dengan tag slash-nya </B>

</BODY>
</HTML>
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
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
<HTML>
<HEAD>
<TITLE>List dengan nomor standar </TITLE>
</HEAD>

<BODY>
<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>
</BODY>
</HTML>
Gambar 2.5 Hasil ol1.htm

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 Penomoran Keterangan
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
<HTML>
<HEAD>
<TITLE>List dengan abjad besar </TITLE>
</HEAD>
<BODY>
<H3>NAMA-NAMA BUNGA</H3>
<OL TYPE = "A" START="2">
<LI>Mawar
<LI>Melati
<LI>Anggrek
<LI>Nusa Indah
<LI>Kamboja
</OL>
</BODY>
</HTML>

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
<HTML>
<HEAD>
<TITLE>UnorderedList dengan bullet standar </TITLE>
</HEAD>
<BODY>
<UL>
<LI>Mawar
<LI>Melati
<LI>Anggrek
<LI>Nusa Indah
<LI>Kamboja
</UL>
</BODY>
</HTML>
Gambar 2.7 Hasil ul1.htm

Contoh berikut ini, akan ditampilkan beberapa jenis bullet lainnya yaitu circle dan square
FILE : ul2.htm
<HTML>
<HEAD>
<TITLE>UnorderedList dengan bullet lainnya </TITLE>
</HEAD>
<BODY>
<UL TYPE="circle">
<LI>Mawar
<LI>Melati
<LI>Anggrek
<LI>Nusa Indah
<LI>Kamboja

</UL>
<UL TYPE="square">
<LI>Mawar
<LI>Melati
<LI>Anggrek
<LI>Nusa Indah
<LI>Kamboja
</UL>
</BODY>
</HTML>
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
<HTML>
<HEAD>
<TITLE>Membuat Definition List </TITLE>
</HEAD>
<BODY>
<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>
</BODY>
</HTML>
Gambar 2.9 Hasil dl.htm

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

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)
4. Isinya :
• 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

5. Berikan warna pada backgrounnya (bebas)
1.1. Berikan warna pada teksnya (bebas)


5-Paragraf, Karakter Spesial, Daftar List

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

5-Paragraf, Karakter Spesial, Daftar List

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL PERKULIAHAN

Fakultas Program Studi Tatap Muka Disusun Oleh

Gambar 2.1 Hasil paragraf.htm

2021 Pemrograman Web PusatBahan Ajar dan eLearning

Gambar 2.2 Hasil parag1.htm

2021 Pemrograman Web PusatBahan Ajar dan eLearning

Gambar 2.3 Hasil parag2.htm

2.2. Karakter Spesial

2021 Pemrograman Web PusatBahan Ajar dan eLearning

Tabel 2.1 Karakter Spesial / Entitas Karakter

2021 Pemrograman Web PusatBahan Ajar dan eLearning

Gambar 2.4 Hasil karakter.htm

2.3. Daftar / List

2.3.1. List dengan Nomor / OrderedList / OL

2021 Pemrograman Web PusatBahan Ajar dan eLearning

Gambar 2.5 Hasil ol1.htm

2021 Pemrograman Web PusatBahan Ajar dan eLearning

Tabel 2.2 Format penomoran pada OrderedList

2021 Pemrograman Web PusatBahan Ajar dan eLearning

2.3.2. List Tanpa Nomor / UnOrderedList / UL

Gambar 2.7 Hasil ul1.htm

2021 Pemrograman Web PusatBahan Ajar dan eLearning

Gambar 2.8 Hasil ul2.htm

2021 Pemrograman Web PusatBahan Ajar dan eLearning

Gambar 2.9 Hasil dl.htm

2021 Pemrograman Web PusatBahan Ajar dan eLearning

Buatlah dokumen HTML dengan ketentuan sebagai berikut :

• Paragraf 3 : Posisi paragraf berada di kiri jendela browser

2021 Pemrograman Web PusatBahan Ajar dan eLearning

Anda mungkin juga menyukai