Memformat HTML

7.1 Heading

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>

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>

7.2 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

7.3 Font

HTML 3.2 menyediakan elaman FONT yang dapat digunakan untuk mengubah warna, ukuran dan jenis font suatu teks.

7.3.1 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>

7.3.2 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

Black

Blue

Fuchsia

Gray

Green

Lime

Maroon

Navy

Olive

Purple

Red

Silver

Teal

White

Yellow

Penggunaan pada HTML

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

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

7.3.3 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 jenis 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>

7.4 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>

7.5 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)

7.5.1 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>

Ordered list memiliki atribut-atribut yang dapat digunakan untuk mengganti nomor menjadi huruf atau bilangan romawi. Kita juga dapat mengatur nomor awal untuk daftar kita.

Atribut	Argumen	Keterangan
Type	A	Daftar dengan huruf besar (A,B,C dst)
	a	Daftar dengan huruf kecil (a,b,c, dst)
	I	Daftar dengan bilangan romawi besar (I,II dst)
	i	Daftar dengan bilangan romawi kecil (i,ii, dst)
	1	Daftar dengan nomor berurut (1,2,3 dst)
Start	x	X diisi dengan angka/huruf yang akan dijadikan awal daftar.

Untuk lebih meperjelas 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>

7.5.2 Unordered list

Unordered list/bulleted list adalah suatu daftar dimana urutan tidak diutamakan, jadi item-item dalam daftar bisa muncul dalam sembarang urutan. Unordered list dimulai dengan tag <UL> dan diakhiri dengan tag </UL>. Sedang isi daftar menggunakan tag <LI>. Berikut contoh penggunaan tag unordered list

<html>

<body>

<h4>Atribut Pada Unordered List</h4>

<ul >

<li>atribut Type="disc"</li>

<li>atribut Type="circle"</li>

<li>atribut Type="square"</li>

</ul>

</body>

</html>

Adapun atribut yang dapat ditambahkan pada tag unordered list adalah atribut TYPE

Atribut	Argumen	Keterangan
Type	Disc	Simbol berupa disk
	Circle	Simbol berupa lingkaran
	Square	Simbol berupa kotak

Supaya lebih jelas, berikut ini akan diberikan contoh tentang atribut type dan hasilnya pada browser

Contoh List type disk <ul type="disc"> <li>Apel</li> <li>Mangga</li> <li>Jeruk</li> <li>Pepaya</li> </ul>	Contoh List type circle <ul type="circle"> <li>Apel</li> <li>Mangga</li> <li>Jeruk</li> <li>Pepaya</li> </ul>
Contoh List type square <ul type="square"> <li>Apel</li> <li>Mangga</li> <li>Jeruk</li> <li>Pepaya</li> </ul>

7.5.3 Kombinasi Ordered List dan Unordered List

Untuk daftar yang bertingkat, dapat menggunakan kombinasi dari ordered list dan unordered list. Kedaunya dipakai secara bersama-sama untuk membentuk suatu daftar. Berikut adalah contoh penggunaan kombinasi dari kedua list untuk membentuk suatu daftar.

<html>

<body>

<h4>Contoh Kombinasi Ordered List dan Unordered List:</h4>

<ol>

<li>Kopi

<li>Arabika</li>

<li>Capucino</li>

</ul>

</li>

<li>Teh

<li>Teh hitam</li>

<li>Teh hijau</li>

</ul>

</li>

</ol>

</body>

</html>

7.6 List Definisi

List definisi digunakan untuk mendefinisikan atau menjelaskan istilah-istilah, oleh karena itu disebut juga daftar istliah (glossary list). Terdapat tiga tag yang digunakan untuk menyusun suatu daftar istilah :

<DL>….<DL>	Untuk menyatakan list definisi
<DT>	Istilah yang akan didefinisikan, tag tunggal tanpa penutup
<DD>	Definisi dari istilah tersebut, tag tunggal tanpa penutup

Berikut ini adalah contoh penggunaan dari list definisi dalam HTML

<html>

<body>

<h4>Contoh List Definisi:</h4>

<dl>

<dd>Hyper Text Markup Language, merupakan bahasa markup yang digunakan untuk membuat halaman-halaman web.

</dd>

<dt>Internet Explorer</dt>

<dd>Web browser yang merupakan bawaan dari sistem operasi Windows, digunakan untuk menampilkan halaman-halaman web.

</dd>

</dl>

</body>

</html>
Sumber : Modul HTML

Cari Blog Ini

game keren

Memformat HTML

Komentar

Posting Komentar

Postingan populer dari blog ini

Firewall Dan NAT

NFS Most Wanted full rip