a. Tujuan Pembelajaran Setelah mengikuti kegiatan belajar 4 ini Peserta Didik diharapkan dapat : 1) Memahami Pemformatan Teks 2) Memahami Pemformatan Paragrap Web 3) Menyajikan pemformatan paragraph pada halaman dokumen web b. Uraian Materi 1. Pemformatan Teks Berikut ini adalah contoh yang dihasilkan pemformatan teks pada dokumen web : HTML menggunakan tag seperti dan untuk memformat output, seperti teks tebal atau miring. Tag HTML ini disebut tag format, selengkapnya dalam tabel berikut : Tag HTML Pemformatan Teks Tag Deskripsi Mendefinisikan teks tebal Mendefinisikan teks menekankan Mendefinisikan teks miring Mendefinisikan teks kecil Mendefinisikan teks penting PEMROGRAMAN WEB SEMESTER 1 56 | P a g e _{Mendefinisikan teks di bawah garis ^{Mendefinisikan teks di atas garis Mendefinisikan teks sisipan Mendefinisikan teks dicoret Mendefinisikan teks ditandai Tag HTML “keluaran computer” Tag Deskripsi Mendefinisikan teks kode komputer Mendefinisikan teks keyboard Mendefinisikan teks contoh kode Mendefinisikan teks variabel}} 

 Mendefinisikan teks terformat
HTML Citations, Quotations, and Definition Tags
Tag Deskripsi
 Mendefinisikan sebuah singkatan

 Mendefinisikan alamat atau kontak informasi
 Mendefinisikan arah teks

 Mendefinisikan sebuah bagian yang dikutip dari sumber
lain
 Mendefinisikan sebuah kutipan pendek
 Mendefinisikan judul karya
 Mendefinisikan sebuah istilah definisi
2. Pemformatan Paragrap
Tag HTML untuk paragrap adalah , dengan tag penutup 

. Berikut ini
contohnya :
ini adalah paragrap


Pemrograman Web Semester 1
57 | P a g e
Ini paragrap yang lain


c. Rangkuman
Pemformatan teks digunakan untuk memformat teks, seperti huruf tebal,
miring dsb.
Perfomatan teks ini juga digunakan untuk menampilkan “keluaran computer”,
HTML Citations, Quotations, and Definition
d. Tugas
Buatlah dokumen-dokumen HTML berikut ini, diskusikan hasilnya dengan
teman-temanmu.
1.Format Teks






Tulisan ini ditebalkan (bold)




Tulisan ini ditebalkan
(strong)




PEMROGRAMAN WEB SEMESTER 1
58 | P a g e
Tulisan ini miring (emphasize)





Tulisan ini besar (big)




Tulisan ini miring (italic) 



Tulisan ini
subscript



Tulisan ini
superscript





2.Pre Format


 
Pemrograman Web Semester 1
59 | P a g e



Daftar Harga Keladi:
Red Flash.........35.000
Red Fire..........60.000
Fannie Munson.....60.000

Harga sewaktu-waktu bisa berubah.


3.Pre Format





This section provides a brief overview of the menus in
Dreamweaver.
 The File menu and Edit menu contain the standard menu 
PEMROGRAMAN WEB SEMESTER 1
60 | P a g e
 items for File and Edit.
menus, such as New, Open, Save, Save All, Cut, Copy,
Paste,
Undo,and Redo

Ini adalah
preformatted text.
Menampilkan spasi
Dan line break apa adanya.

Tag PRE cocok digunakan untuk menampilkan kode bahasa
pemrograman komputer :


for i = 1 to 10
 print i
next i

Pemrograman Web Semester 1
61 | P a g e
5.Quotation





tulisan ini BUKAN quotation

tulisan ini adalah quotation 

tulisan ini adalah quotation 

tulisan ini adalah quotation 


a. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar 5 ini Peserta Didik diharapkan dapat :
1) Memahami Pembuatan list minimal
2) Menyajikan hasil pembuatan list minimal
b. Uraian Materi
1) Pengertian List
List adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu
kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang bertema
kuliner, list dapat berupa daftar dari makanan dan minuman, beserta
harganya. List dapat juga berupa prosedur (urutan langkah-langkah) dari
suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan
dari langkah pertama sampai langkah terakhir.
Contoh List :
Daftar Makanan :
 Bakso
 Soto
 Sate
 Gule
Daftar Minuman :
 Juice Jambu
 Juice Alpukat
 Juice Tomat
2) Tipe Daftar dalam Dokumen HTML
Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu :
Pemrograman Web Semester 1
65 | P a g e
 Daftar berurutan (ordered list)
 Daftar tidak berututan (unordered list)
 Daftar definisi (definition list)
3) Daftar Berurutan (Ordered List)
Daftar yang berurutan biasanya ditandai dengan penggunaan penomoran
tertentu. Penomoran ini bias menggunakan angka (1, 2, 3,…) maupun karakter
alphabet terntentu (a, b, c,… atau i, ii, iii,…). Daftar yang berurutan umumnya
dipakai untuk item-item yang saling berhubungan satu sama lain, atau untuk
menuliskan langkah-langkah atau prosedur dari kegiatan terntentu yang tidak
dapat dilakukan secara acak.
Contoh daftar yang berurutan adalah pada cara membuat dokumen HTML,
misalnya :
Langkah-langkah membuat dokumen HTML :
1. Jalankan aplikasi Text Editor
2. Isikan kode HTML ke dalam Text Editor
3. Simpan file dengan ekstension .htm atau .html
4. Jalankan file HTML menggunakan aplikasi Web browser
untuk menampilkan hasilnya
Untuk membuat suatu daftar yang berurutan dalam dokumen HTML, digunakan
tag 
 (ordered list), yang berpasangan dengan tag 
. Tag 
 digunakan
untuk memulai suatu daftar berurutan tertentu, sedangkan 
berfungsi untuk
menandakan bahwa daftar tersebut sudah berakhir.
Masing-masing item di dalam daftar harus dibuat menggunakan tag
 (list item,
yang kemudian perlu ditutup dengan tag 
.
Contoh penulisan adalah sebagai berikut :

Urutan Pertama
PEMROGRAMAN WEB SEMESTER 1
66 | P a g e
Urutan Kedua

Adapun atribut untuk tag 
 adalah “type” yang menunjukan jenis
penomorannnya. Secara standart, tipenya adalah menggunakan penomoran 1, 2,
3, 4 dst.
Selain tipe default, tipe lain yang dapat digunakan untuk keperluan penomoran
dalam suatu list adalah :
Tipe Keterangan
A Membuat list dengan penomoran berupa karakter A, B, C, dst
a Membuat list dengan penomoran berupa karakter a, b, c, dst
I Membuat list dengan penomoran berupa karakter I, II, III, dst
i Membuat list dengan penomoran berupa karakter i, ii, iii, dst
4) Daftar Tidak Berurutan (Unordered List)
Daftar yang tidak berurutan adalah daftar yang item-itemnya dapat diubah
posisinya secara acak. Daftar seperti ni tidak menggunakan penomoran seperti
di atas, melainkan hanya dengan menggunakan tanda atau symbol tertentu,
misalnya gambar kotak atau bulat (bullet).
Contoh :
Daftar buah :
 Mangga
 Jambu
 Semangka
 Rambutan
 Jeruk
Pada contoh di atas, kita dapat mengubah/mengacak secara bebas
urutan dari masing-masing item yang ada. Hal ini disebabkan karena setiap item
yang ada tidak memiliki keterkaitan satu sama lain dengan item lainnya, berbeda
dengan suatu urutan langkah tertentu yang harus ditulis secara berurutan.
Pemrograman Web Semester 1
67 | P a g e
Untuk membuat suatu daftar yang tidak berurutan dalam dokumen HTML,
digunakan tag 
 (unordered list), yang berpasangan dengan tag 
. Tag
 digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan 
berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir.
Masing-masing item di dalam daftar harus dibuat menggunakan tag
 (list item,
yang kemudian perlu ditutup dengan tag 
.
Contoh penulisan adalah sebagai berikut :

Item satu
Item dua

Adapun atribut untuk tag 
 adalah “type” yang menunjukan jenis tanda untuk
setiap item berupa tanda bulatan untuk defaultnya..
Selain tipe default, tipe lain yang dapat digunakan untuk keperluan unordered list
adalah :
Tipe Keterangan Contoh Penulisan
Disk Tanda bulatan hitam 

Circle Tanda bulatan putih 

Square Tanda kotak 

5) Daftar Definisi (Definition List)
Daftar Definisi adalah suatu daftar yang berisi kumpulan definisi dari suatu istilah
tertentu, misalnya daftar definisi istilah HTML.
Contoh :
HTML
 Hyper Text Mark-up Language
WWW
 World Wide Web
PEMROGRAMAN WEB SEMESTER 1
68 | P a g e
Browser
 Aplikasi untuk membuka dokumen html/situs
web.
c. Rangkuman
Tag Fungsi

 ... 
Sebuah wilayah teks yang akan diformat
 ... 
Sebuah daftar definisi
 ... 
Sebuah istilah definisi, sebagai bagian dari
daftar definisi.
 ... 
 Sesuai untuk istilah definisi, sebagai
bagian dari daftar definisi
 ... 
Ordered List atau daftar berurutan
 ... 
Un-Ordered List atau daftar tidak berurutan
 ... 
Sebuah daftar item untuk digunakan dengan
 atau 
.







a. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar 6 ini Peserta Didik diharapkan dapat :
1) Memahami Pembuatan list kombinasi
2) Menyajikan Pembuatan list kombinasi
b. Uraian Materi
1) Pembuatan list Kombinasi
Perhatikan daftar berikut ini :
Daftar Menu
1. Makanan
 Bakso
 Mie Ayam
 Soto
2. Minuman
 Teh Panas
 Jeruk Panas
 Kopi
Dapat dilihat bahwa daftar di atas adalah gabungan daftar berurutan dan
daftar tidak berurutan.
Untuk membuat daftar diatas pada dokumen HTML maka cukup
menggabungkan 
 dangan 
.
Perhatikan penggabungan 
 dengan 
 berikut ini :



 



PEMROGRAMAN WEB SEMESTER 1
74 | P a g e




Ketika kita menggabungkan tag tidak berurutan 
 tipe bullet dengan tag
tidak berurutan 
 pada daftar berikutnya, maka daftar yang kedua oleh
browser akan ditampilkan secara otomatis menjadi daftar bullet.
Tidak demikian dengan daftar berurutan 
, maka agar tipenya sama
dengan daftar berurutan sebelumnya, kita harus memberikan atribut tipe
yang sama dengan daftar berurutan sebelumnya. Contoh :

 

 
 


 

 
 



 

Memulai dengan nomor tertentu
Untuk membuat daftar bernomor dengan urutan yang tidak dimulai dengan 1
(nomor/huruf awal), maka kita harus mendefinisikan dengan atribut “start”
pada elemen tag 
.
Misalnya contoh berikut :
Pemrograman Web Semester 1
75 | P a g e

Blok huruf dengan text tool
Klik tab karakter
Pilih jenis huruf pada menu pop-up .

Maka urutan daftar yang ditampilkan akan dimulai dengan 17, selanjutnya 18
dan 19.
Demikian juga apabila :

Blok huruf dengan text tool
Klik tab karakter
Pilih jenis huruf pada menu pop-up .

Maka urutan daftar yang ditampilkan akan dimulai dengan Q, selanjutnya R,
dan S.
Penggunaan daftar bernomor yang tidak dimulai dengan nomor awal,
biasanya diperlukan apabila daftar yang kita buat sudah diselingi beberapa
paragraph, sehingga ketika dibuat daftar bernomor, secara default akan
dimulai dari awal, padahal harusnya melanjutkan nomor sebelumnya. Maka
digunakanlah atribut “start=” tersebut.
c. Rangkuman
List kombinasi adalah kombinasi daftar berurutan dengan tidak berurutan
sekaligus. Untuk membuat daftar/list kombinasi yaitu menggabungkan atau
mengkombinasikan tag 
 dengan 
. Daftar berurutan tidak selalu diawali
dengan nomor satu, tetapi dapat diawali dengan nomor tertentu, yaitu dengan
memberi atribut start=” ”