Heading Dan Font

Heading adalah sekumpulan kata atau frasa yang menjadi judul atau subjudul dalam

suatu dokumen HTML. Sekalipun sama-sama merupakan judul, tetapi heading

berbeda dengan elemen <TITTLE> yang hanya muncul pada title bar dari suatu

jendela browser, bukan di dalam web page.

HTML menyediakan enam buah tingkat heading. Heading level 1 biasanya

merupakan judul yang penting atau judul utama, sedangkan heading level berikutnya

merupakan bagian atau sub judul dari judul utama.

Untuk menyatakan heading, digunakan tag <Hx> dimana x merupakan nomor level

heading dari 1 sampai 6, sedangkan untuk mengakhirinya digunakan tag akhir </Hx>.

Berikut ini adalah contoh penggunaan heading level 1 sampai 6.

<H1>Heading Level 1</H1>

<H2>Heading Level 2</H2>

<H3>Heading Level 3</H3>

<H4>Heading Level 4</H4>

<H5>Heading Level 5</H5>

<H6>Heading Level 6</H6>

Gambar Contoh Tag Heading

Atribut yang dapat ditambahkan pada elemen heading adalah ALIGN dimana

memiliki nilai sebagai berikut :

·         Align=”left”, untuk meratakan heading ke kiri

·         Align=”center”, untuk meratakan heading di tengah

·         Align=”right”, untuk meratakan heading ke kanan

Contoh penulisan adalah

<H1 ALIGN=”center”>Heading di rata Tengah</H1>

Phisical Style

Phisical style adalah suatu jenis format yang diberikan pada teks tanpa tergantung

pada jenis dari elemen dasar teks tersebut. Elemen-elemen ini sudah sering kita pakai

dalam program pengolah kata, seperti menebalkan atau membuat miring suatu teks.

Adapun elemen-elemen pisik yang dapat diterapkan pada dokumen HTML adalah :

Elemen	Fungsi
<B>…………..</B>	Untuk menebalkan teks
<I>……………</I>	Untuk membuat teks terlihat miring
<U>…………..</U>	Untuk menggarisbawahi teks
<S>……………</S>	Untuk memberikan coretan pada teks
<BLINK>…….</BLINK>	Membuat teks berkedip (khusus netscape)
<TT>……..…..<TT>	Menampilkan teks dalam format typewriter
<BIG>………<BIG>	Untuk membesarkan teks
<SMALL>…..<SMALL>	Untuk mengecilkan teks
<SUB>………..<SUB>	Membuat teks subscript
<SUP>……..…<SUP>	Membuat teks superscript

Berikut adalah contoh tampilan phisical style pada browser

Gambar  Tag-tag Physical Style

Font

HTML 3.2 menyediakan elaman FONT yang dapat digunakan untuk mengubah

warna, ukuran dan jenis font suatu teks.

Menentukan Ukuran Teks

Untuk mengatur ukuran suatu teks, elemen FONT menyediakan atribut SIZE dengan

nilai dari 1 sampai 7. Semakin besar angka, maka semakin besar ukuran teks tersebut.

Contoh berikut memperlihatkan kode HTML dengan menggunakan berbagai ukuran

font :

<font size=1>ukuran teks=1</font>

<font size=2>ukuran teks=2</font>

<font size=3>ukuran teks=3</font>

<font size=4>ukuran teks=4</font>

<font size=5>ukuran teks=5</font>

<font size=6>ukuran teks=6</font>

<font size=7>ukuran teks=7</font>

Gambar  Ukuran Font

Mengubah Warna Teks

penggunaan warna pada teks mulai diperkenalkan oleh Internet Explorer 1.0 dengan

menggunakan atribut COLOR pada elemen FONT. Pendefinisian warna dapat

dilakukan dengan dua cara yaitu, melalui nama warna atau menggunakan nilai RGB

warna. Adapun warna yang dikenal pada HTML 3.2 hanya 16 warna.

Aqua                Navy Black               Olive Blue                 Purple Fuchsia           Red Gray                Silver Green              Teal Lime                White Maroon            Yellow

Penggunaan pada HTML

<font color =”red”>teks berwarna merah</font>

<font color=”#8A2BE2”>Teks berwarna Blueviolet</font>

Mengubah Jenis Font

Internet Explorer memperkenalkan atribut FACE pada elemen FONT yang dapat

digunakan untuk membuat bermacam-macam jenis font pad suatu page. Jenis-jenis

font seperti ARIAL, TIMES NEW ROMAN, CENTURY GOTHIC, COURIER NEW

dan sebagainya. Penggunaannya pada HTML

<Font Face=”arial”>Font jenis Arial</font>

<Font Face=”Comic San MS”> Jenis Font Comic San MS</font>

Secara garis besar atribut-atribut yang digunakan elemen FONT adalah sebagai

berikut :

Atribut	Argumen	Keterangan
Size	Diisi dengan angka 1 sampai 7	Digunakan untuk mengatur ukuran font
Color	Nama warna RGB (#XXXXXXXXX)	Digunakan untuk mengubah warna font
face	Jenis font	Digunakan untuk mengubah warna font

Penggunaan atribut-atribut tersebut dapat di satukan dalam satu elemen FONT

sehingga akan diperoleh gabungan dari warna, ukuran dan jenis font.

Contoh dalam HTML

<font size=”6” color=”green” face=”arial”>Gabungan beberapa atribut

pada suatu teks</font>

Ganti Baris dan Garis Horizontal

Elemen yang digunakan untuk ganti baris adalah BR (break rule) berguna untuk

menuliskan teks pada baris berikutnya. Dengan adanya elemen ini, kita tidak lagi

memerlukan elemen PRE jika menulis pada suatu baris baru. Penulisan tag BR tidak

memerlukan penutup.

<Font Face=”arial”>Font jenis Arial</font>

<br>

<Font Face=”Comic San MS”> Jenis Font Comic San MS</font>

Sedangkan untuk membuat garis horizontal, diperlukan elemen HR (horizontal rule).

Ada beberapa atribut yang dapat digunakan untuk mengubah tampilan garis seperti

untuk mengubah panjang, ketebalan, warna dan efek bayangan(3-D).

Berikut ini adalah atribut-atribut yang dapat ditambahkan pada elemen HR, yang

mana pemakaiannya dapat digabungkan dengan elemen HR

Atribut	Argumen	Keterangan
Align	Center Left Right	Digunakan untuk melakukan perataan pada garis yang dibuat
Noshade	noshade	Untuk memunculkan efek tanpa bayang-bayang 3-D
Size	Piksel %	Digunakan untuk menentukan ukuran ketebalan garis argumen dapat berupa piksels atau persen
Width	Piksel %	Digunakan untuk memntukan ukuran panjang garis, argumen dapat berupa piksels atau persen
Color	Nama warna RGB	Untuk memberi warna pada garis yang dibuat

Contoh penggunaan pada HTML

<hr align="left" width="500" size="10" noshade>

<hr>

<hr align="center" width="400" size="7" color="red">

<hr align="right" width="500" size="20" noshade color="green">

Ditampilkan dalam browser sebagai berikut

Gambar Contoh Garis

List (Daftar)

Salah satu cara yang efektif dan mudah untuk dibaca dalam menyampaikan informasi

adalah dengan menggunakan daftar. HTML mewnyediakan beberapa jenis daftar,

yaitu :

·         Ordered list/numbered list (daftar berurut/daftar dengan nomor atau abjad)

·          Unordered list/bulleted list (daftar tidak berurut/menggunakan bullet)

·          Menu list (daftar menu)

·          Directory list

·          Definition list (glossary/daftar istilah)

Ordered list

Ordered list atau numbered list adalah suatu daftar dimana item-item yang ada di

dalam daftar tersebut memiliki nomor secara berurut. Ordered list dimulai dengan tag

awal <OL> dan diakhiri dengan tag akhir </OL>. Sedang untuk menyatakan list item,

menggunakan tag <LI>. Berikut ini contoh penggunaan ordered list :

<html>

<body>

<h4>Contoh Ordered List:</h4>

<ol>

<li>Fakultas Teknik dan Ilmu Komputer</li>

<li>Fakultas Ekomnomi</li>

<li>Fakultas Desain</li>

<li>Fakultas Hukum</li>

<li>Fakultas Sosial Politik</li>

</ol>

</body>

</html>

 Gambar  Contoh Ordered list

penggunaan atribut Type, berikut akan diberikan contoh penggunaan atribut type pada dokumen html

Contoh List Nomor <ol> <li>Apel </li> <li>Pisang</li> <li>Mangga</li> <li>Jambu</li> </ol>	Contoh List huruf besar <ol type="A"> <li>Apel </li> <li>Pisang</li> <li>Mangga</li> <li>Jambu</li> </ol>
Contoh List huruf kecil <ol type="a"> <li>Apel </li> <li>Pisang</li> <li>Mangga</li> <li>Jambu</li> </ol>	Contoh List angka romawi besar <ol type=”I”> <li>Apel </li> <li>Pisang</li> <li>Mangga</li> <li>Jambu</li> </ol>
Contoh List angka romawi kecil <ol type="i"> <li>Apel </li> <li>Pisang</li> <li>Mangga</li> <li>Jambu</li> </ol>

Pada browser akan ditampilkan seperti berikut :

 Gambar  Penggunaan Unordered List