Belajar HTML (07): Format Heading dan Font

Sebelumnya kita sudah pernah belajar tentang format teks dan juga format kutipan, sekarang kita akan pelajari bagaimana memformat heading atau judul dalam halaman web. Juga akan dipelajari bagaimana memformat tulisan dengan bentuk font yang kita tentukan sendiri, termasuk warna dan ukurannya.

Apabila pada kode halaman HTML kita perlu diberikan penjelasan, maka silahkan gunakan tanda komentar agar penjelasan atau kode program tidak dijalanakan oleh browser saat diakses.

Membuat Heading pada halaman web

Untuk membuat heading atau judul, HTML telah menyediakan sebanyak 6 macam format dengan ukuran yang berbeda-beda. Heading 1 sampai dengan Heading 6, menggunakan tag <h1> dan </h1> sampai <h6> dan </h6>.

Agar lebih mudah dipahami, silahkan coba kode program berikut ini, simpan dengan nama file 12-html-heading.html, kemudian akses menggunakan browser.

<!DOCTYPE html>
<html>
<head>
   <title>Membuat Heading</title>
</head>
<body>
   <p>Dalam halama ini ditampilan 6 buah heading secara berurutan dari heading 1 sampai dengan heading 6</p>
   <h1>Judul dengan heading 1</h1>
   <h2>Judul dengan heading 2</h2>
   <h3>Judul dengan heading 3</h3>
   <h4>Judul dengan heading 4</h4>
   <h5>Judul dengan heading 5</h5>
   <h6>Judul dengan heading 6</h6>
</body>
</html>

Oke, kira-kira tampilannya akan seperti gambar ini.

Format Heading pada HTML

Perlu diketahui berdasarkan gambaran yang dihasilkan di atas, bahwa jika kita menggunakan heading, maka secara otomatis format tulisan akan menjadi tebal dan lebarnya akan sepenuh lebar layar, maksudnya, objek lain dalam halaman tersebut akan berada di bawah heading (bukan disampingnya, walaupun kita mengetikkan kode di sampingnya).

Format Font

Kita masuk ke format font, dalam hali ini bukan hanya fontnya saja tetapi juga ukuran dan warnanya. Tag yang digunakan adalah <font> dan </font>. Agar jenis font bisa sesuai dengan yang kita inginkan, maka perlu ditambah dengan atribut face="jenis_font". Demikian pula untuk ukurannya, menggunakan atribut size="berapa" dan warnanya menggunakan color="warna".

Selanjutnya →

Halaman : 1 2

Share

banghaji

aslinya karyawan, suka belajar pemrograman, senang berbagi ilmu melalui tulisan, lagi usaha menghasilkan uang online :cool:

You may also like...

2 Responses

  1. 30 Januari 2017

    […] lanjut lagi tutorial kita tentang HTML. Terakhir yang dibahas adalah tentang bagaimana memformat heading dan font dalam halaman web. Jika Anda baru pertama kali terdampar di blog ini, mungkin Anda perlu membaca […]

  2. 29 Juli 2017

    […] saya tulis tentang HTML ini, di antaranya tentang Elemen dan Atribut, ada juga Format Teks, tentang Format Heading dan Font, dan banyak lagi Seri Belajar HTML […]

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *