Penggunaan Font

HTML menyediakan elemen <FONT> yang dapat dipakai untuk mengubah ukuran, jenis,
dan warna suatu teks.

2.1 Ukuran Teks

Elemen <FONT> dilengkapi dengan atribut SIZE yang memiliki nilai dari 1 hingga 7. Nilai
1 digunakan untuk membuat ukuran terkecil, sedangkan nilai 7 adalah ukuran terbesar.
Nilai default dari ukuran standar teks adalah 3. Default standar ukuran teks dapat
diubah dengan menggunakan tag <BASEFONT>. Contoh :

Tampilan kode HTML di atas :

2.2 Warna Teks

Pemakaian warna pada dokumen HTML menggunakan atribut COLOR pada elemen
<FONT>. Beberapa contoh nama warna dan kode RGB-nya :
Nama Kode RGB
Warna
Aqua #00FFFF
Blue #0000FF
Black #000000
 Lime #00FF00
Gray #808080
Green #008000
Purple #800080
Red #FF0000
White #FFFFFF
Silver #C0C0C0

2.3 Jenis Font

Pemilihan jenis font yang hendak digunakan dapat dilakukan melalui atribut FACE.
Contoh :

Tampilan kode HTML di atas :

2.4 Pemisah Antarteks

Beberapa elemen pemisah antarteks sebagai berikut :
 ganti dengan baris baru
Elemen <BR> bermanfaat untuk menuliskan teks pada baris baru.
 Garis pemisah horizontal
Elemen <HR> berfungsi untuk membuat garis horizontal guna memisahkan teks
yang satu dengan teks lainnya. Elemen ini memiliki atribut SIZE (mengatur
ketebalan), WIDTH (mengatur panjang garis), ALIGN (mengatur posisi garis), dan
NOSHADE (membuat garis horizontal yang ditampilkan tanpa bayang-bayang 3-D).
 Tampilan kode
HTML di atas :

1. Buatlah kode html untuk tampilan berikut !

The State Flag of New Mexico has on it a modern

interpretation of an ancient symbol of a sun design,
as seen on a late 19th century water jar from the Zia
Pueblo.  This pueblo is thought to have been one of
the Seven Golden Cities of Cibola, which explorer
Vasquez de Coronado sought.  The red sun symbol
was then called a “Zia” and is shown on a field of
gold.  The red and gold colors, which the Spanish
Conquistadores brought to the New World, were the
colors of Queen Isabela of Castile.  Here is the
official salute to the New Mexican Flag:
I salute the flag of the State of New Mexico and the Zia
symbol

2. Buatlah biodata dengan kode html menggunakan font (name, size, color)
dan preeformated text !
 TUGAS FONT DAN LIST
A. Soal
3. Buatlah kode html untuk tampilan berikut !

My Excellent Bookstore Adventure

The other day, I went to a unique bookstore called Mary, Mary, Quite
Contrary.
There were tons of unexpected delights, including, believe it or not, a Self-
Helpless section! For real.
I saw titles like Got a 50-Cent Head? Here's How To Get a Ten Dollar Haircut!
and A Few Geese Shy of a Gaggle-And Proud Of It!

4. Buatlah kode html untuk tampilan berikut !

From Buck-Naked to Beautiful: Dressing Up Your Page

Sprucing Up Your Text
Yer Basic Text Formatting Styles
Combining Text Formats
Accessorizing: Displaying Special Characters
Sectioning Your Page With Headings
A Few More Formatting Features
Handling Preformatted Text
Them's the Breaks: Using <BR> for Line Breaks
Inserting Horizontal Lines

LIST/DAFTAR

Banyak cara untuk menyampaikan informasi ke pembaca atau pengguna, di antaranya

melalui gambar, dokumen, dan tabel. Pada bagian ini, kita akan mempelajari daftar
sebagai sarana yang efektif di dalam menyampaikan informasi. Banyak sekali aplikasi
yang menggunakan daftar, di antaranya daftar peringkat, daftar antrian, daftar menu
makanan, daftar kerja seorang pimpinan perusahaan, dll. Sehubungan dengan aplikasi
menggunakan HTML, tersedia beberapa jenis daftar yang akan dibahas lebih lanjut.

List HTML merupakan bentuk umum yang biasa digunakan untuk menguraikan daftar
sesuatu :
• List dengan nomor (Ordered List)
• List tanpa nomor (Unordered List)
• List definisi

Langkah-langkah membuat list :

 Mulai dengan tag <ol> à untuk daftar dengan nomor
 Mulai dengan tag <ul> à untuk daftar tanpa nomor
 Masukkan setiap item list dengan menggunakan tag <li>
 Ulangi langkah ketiga untuk menuliskan item list berikutnya
 Akhiri seluruh list dengan tag penutup </ol> atau </ul>

2.1 Ordered List / Numbered List (Daftar Berurut / Daftar Dengan Nomor)

Ordered list adalah jenis daftar di mana item-item yang ada di dalam daftar memiliki
nomor secara berurut. Pembuatan ordered list dimulai dengan <OL> dan diakhiri
</OL>, dan di antaranya terdapat tag <LI> yang menyatakan item di dalam daftar.

Tampilan kode HTML di atas :

 Hal – hal yang perlu diperhatikan dalam ordered list :
 Nomor item secara default  1,2,3…..dst
 Atribut type  Penyajian item list dapat dirubah dengan model angka yang lain

TYPE ARTI
I Ditampilkan dengan angka romawi huruf besar
i Ditampilkan dengan angka romawi huruf kecil
a Diubah dengan menggunakan abjad huruf kecil
A Diubah dengan menggunakan abjad huruf besar

 Atribut Start untuk mendefinisikan nomor awal yang akan digunakan pada
ordered list
 Atribut Value  pada <li> dapat digunakan untuk menggantikan penomoran
yang sedang digunakan. Nilai atribut value juga berupa angka
 Untuk contoh lihat soal !

2.2 Unordered List / Bulleted List (Daftar Tak Berurut / Daftar Dengan
Penanda)

Unordered list adalah jenis daftar di mana urutan dan item-item tidak diutamakan.
Pemakaiannya sama dengan pemakaian ordered list, hanya saja unordered list
menggunakan tag awal <UL> dan tag akhir </UL>, dan setiap item di dalamnya
menggunakan <LI>.

Tampilan kode HTML di atas :

Hal-hal yang perlu diperhatikan dalam unordered list :

 Unorderd list / bulleted list à merupakan urutan daftar/list tanpa nomor

 Bullet default berupa noktah/circle “•”
 Type bullet yang biasa digunakan selain circle
• Disc à bentuk noktah tampa arsiran
• Square à bentuk kotak
• Untuk contoh lihat soal !

2.3 Menu List (Daftar Menu)

Menu list adalah suatu daftar item-item yang pendek dan tidak disertai dengan nomor
ataupun penanda item. Menu list menggunakan tag awal <MENU> dan tag akhir
</MENU> dengan setiap item di dalamnya menggunakan <LI>.

Tampilan kode HTML di atas :

2.4 Definition List (Daftar Istilah)

Definition list adalah jenis daftar khusus yang digunakan untuk mendefinisikan
atau menjelaskan istilah-istilah. Definition list dinyatakan dengan tag <DL>...</DL>, di
mana dalam tag ini terdapat 2 bagian, yaitu :
 Istilah yang akan didefinisikan (definition term), dinyatakan dengan tag tunggal
<DT>
 Definisi dari istilah tersebut (definition data), dinyatakan dengan tag tunggal <DD>.
Browser menampilkan istilah yang akan didefinisikan pada suatu baris tersendiri
dan kemudian definisinya ditampilkan pada baris berikutnya dengan suatu indentasi.
Kerjakan Kode-kode HTML dibawah ini !

1. Coba_list.html

2. ol.html
3. typeol.html

4. startol.html
5. ul1.html

6. typeul.html

7. uldiul.html
8. oldiol.html

9. listbersarang.html