Mengatur Gaya Huruf HTML Menggunakan Tag Font
Pemformatan teks pada laman html tidak hanya menggunakan bentuk format standar (bold, italic, underline, dan lain sebagainya), melainkan juga dapat mengubah gaya penulisan huruf dengan menggunakan tag <FONT>. Tag <font> pada html terdiri dari beberapa atribut yaitu SIZE, COLOR, dan FACE yang mendukung pemformatan teks pada laman html. Pada materi ini peserta didik akan belajar bagaimana cara menggunakan Tag <FONT> untuk mengubah bentuk atau gaya penulisan teks pada laman html.
Sebelum memahami lebih dalam materi tentang Mengatur Gaya Huruf HTML Menggunakan Tag Font, terlebih dahulu pelajari materi tentang: Menyematkan Aplikasi Eksternal pada HTML Menggunakan Tag Embed, Membuat Daftar Deskripsi HTML Menggunakan Tag DT, dan Membuat Daftar Deskripsi HTML Menggunakan Tag DL.
- Size
- Face/Type
- Color
satu, font size: atribut ini digunakan untuk mengatur ukuran teks dalam dokumen HTML dengan menggunakan tag font atribut size. Rentang ukuran font dalam HTML adalah antara 1 hingga 7 dengan ukuran defaultnya adalah 3.
Contoh:
Nasi Padang
Nasi Padang
Nasi Padang
Nasi Padang
Nasi Padang
Nasi Padang
dua, Font Type: atribut ini digunakan untuk mengatur jenis font pada dokumen html. Namun, font yang digunakan harus terinstal terlebih dahulu pada komputer yang digunakan untuk menjalankan web browser.
Contoh:
Nasi Padang
Nasi Padang
Nasi Padang
Nasi Padang
tiga, Font Color: digunakan untuk mengatur warna teks menggunakan atribut warna dalam dokumen html. Warna dapat ditentukan baik dengan menggunakan penyebutan literasi warna (orange, pink, red) ataupun dengan menggunakan kode hexadesimal.
Contoh:
Nasi Padang
Catatan: tag font sudah tidak didukung lagi penggunaannya pada HTML5.
<!DOCTYPE html>
<html>
<body>
<font size = "1">
Nasi Padang
</font>
<br />
<font size = "2">
Nasi Padang
</font>
<br />
<font size = "3">
Nasi Padang
</font>
<br />
<font size = "4">
Nasi Padang
</font>
<br />
<font size = "5">
Nasi Padang
</font>
<br />
<font size = "6">
Nasi Padang
</font>
<br />
<font size = "7">
Nasi Padang
</font>
</body>
</html>
Output:
Nasi PadangNasi Padang
Nasi Padang
Nasi Padang
Nasi Padang
Nasi Padang
Nasi Padang
dua, Font Type: atribut ini digunakan untuk mengatur jenis font pada dokumen html. Namun, font yang digunakan harus terinstal terlebih dahulu pada komputer yang digunakan untuk menjalankan web browser.
<!DOCTYPE html>
<html>
<body>
<font
face = "Times New Roman"
size = "6">
Nasi Padang
</font>
<br />
<font
face = "Verdana"
size = "6">
Nasi Padang
</font>
<br />
<font
face = "Comic sans MS"
size =" 6">
Nasi Padang
</font>
<br />
<font
face = "WildWest"
size = "6">
Nasi Padang
</font>
<br />
<font
face = "Bedrock"
size = "6">
Nasi Padang
</font>
<br />
</body>
</html>
Output:
Nasi PadangNasi Padang
Nasi Padang
Nasi Padang
Nasi Padang
tiga, Font Color: digunakan untuk mengatur warna teks menggunakan atribut warna dalam dokumen html. Warna dapat ditentukan baik dengan menggunakan penyebutan literasi warna (orange, pink, red) ataupun dengan menggunakan kode hexadesimal.
Contoh:
<!DOCTYPE html>
<html>
<body>
<font
color = "#009900">
Nasi Padang
</font>
<br />
<font
color = "green">
Nasi Padang
</font>
</body>
</html>
Output:
Nasi PadangNasi Padang
Catatan: tag font sudah tidak didukung lagi penggunaannya pada HTML5.
Baca Juga:
Penggunaan **tag** untuk mengatur gaya huruf pada halaman web telah menjadi hal yang umum dalam pembuatan situs. Salah satu elemen yang pernah sering digunakan adalah elemen untuk gaya huruf, yang membantu desainer dalam menentukan tampilan teks yang sesuai dengan keinginan. Meski sudah tidak disarankan dalam praktik pengembangan web modern, pemahaman mengenai penggunaan elemen ini tetap relevan dalam sejarah perkembangan tata letak web.
Elemen yang dimaksud memungkinkan pengguna untuk menetapkan jenis huruf, ukuran, dan warna teks pada sebuah halaman. Pada awal kemunculannya, penentuan tampilan teks tidaklah sesederhana saat ini. Desainer harus secara langsung menuliskan kode untuk mengatur tampilannya, yang tentunya menghabiskan banyak waktu. Elemen gaya huruf ini memungkinkan penataan teks menjadi lebih terstruktur dan mudah dipahami, terutama dalam tampilan sederhana.
Dalam perkembangannya, elemen gaya huruf mengalami banyak perubahan seiring dengan kemajuan dalam desain dan teknologi halaman web. Elemen ini pernah menjadi alat utama bagi desainer web untuk menyesuaikan teks dengan estetika situs yang diinginkan. Namun, meskipun perannya cukup penting, penggunaannya akhirnya tergeser oleh pengaturan gaya yang lebih efisien dan terstandarisasi.
Pengaturan jenis huruf pada suatu teks dalam halaman web tidak hanya bertujuan untuk mempercantik tampilan, tetapi juga berperan penting dalam meningkatkan keterbacaan. Pilihan huruf yang tepat dapat memengaruhi kenyamanan pembaca, baik dari segi ukuran maupun kontras warna antara teks dan latar belakang. Selain itu, pemilihan jenis huruf yang sesuai dapat mencerminkan citra dan karakter dari suatu situs, seperti situs berita yang sering menggunakan huruf yang formal dan tegas, sementara situs hiburan lebih sering menggunakan huruf yang lebih kasual dan menarik.
Selain jenis huruf, ukuran huruf juga menjadi elemen penting yang harus dipertimbangkan. Ukuran huruf yang terlalu kecil bisa membuat pengunjung sulit membaca teks, sementara ukuran yang terlalu besar dapat mengganggu tampilan keseluruhan halaman. Dalam beberapa kasus, desainer harus menyesuaikan ukuran huruf agar sesuai dengan tata letak dan perangkat yang digunakan oleh pengunjung, terutama dengan semakin beragamnya ukuran layar perangkat yang digunakan untuk mengakses internet saat ini.
Warna teks adalah elemen lain yang dapat diatur dengan elemen ini. Warna memiliki peran penting dalam menciptakan kontras yang cukup antara teks dan latar belakang, sehingga teks mudah dibaca. Pemilihan warna juga dapat berfungsi sebagai alat komunikasi visual, misalnya, warna merah digunakan untuk menekankan peringatan atau informasi penting, sementara warna hijau sering dihubungkan dengan sesuatu yang positif atau berhasil.
Meskipun elemen gaya huruf ini menyediakan fleksibilitas dalam pengaturan tampilan teks, penggunaannya mulai berkurang dengan diperkenalkannya teknologi baru dalam pengembangan halaman web. Salah satu alasan utama adalah karena penggunaan elemen ini tidak sesuai dengan standar desain web yang dipromosikan oleh organisasi pengembangan web. Hal ini dikarenakan pengaturan tampilan secara langsung pada elemen HTML dianggap tidak efisien dan sulit dipelihara dalam jangka panjang, terutama untuk situs dengan skala besar.
Untuk menggantikan peran elemen ini, teknologi baru yang lebih modern dan efisien diperkenalkan, yaitu penggunaan lembar gaya yang memisahkan pengaturan tampilan dari struktur dokumen. Dengan pemisahan ini, pengembang dapat mengelola tampilan halaman dengan lebih mudah dan konsisten tanpa harus mengubah struktur dasar dokumen HTML. Selain itu, lembar gaya memungkinkan lebih banyak variasi dalam pengaturan tampilan teks, seperti pengaturan antar spasi huruf, tinggi baris, serta efek dekoratif lainnya.
Seiring waktu, penggunaan elemen ini semakin jarang ditemukan dalam pengembangan web modern. Meskipun masih didukung oleh beberapa penjelajah web, elemen ini secara perlahan ditinggalkan karena tidak lagi sesuai dengan standar terbaik dalam pengembangan halaman web. Pengembang yang menggunakan elemen ini dianjurkan untuk segera beralih ke metode yang lebih modern agar situs yang dibangun lebih fleksibel dan mudah dikelola, serta mendukung aksesibilitas yang lebih baik bagi pengguna.
Dalam dunia pengembangan web saat ini, pemahaman akan sejarah penggunaan elemen gaya huruf ini tetap memiliki nilai. Memahami bagaimana elemen ini pernah berperan besar dalam pengaturan tampilan teks pada situs membantu dalam mengapresiasi kemajuan teknologi yang ada saat ini. Selain itu, bagi yang masih mengelola situs lama yang menggunakan elemen ini, ada baiknya mulai mempertimbangkan untuk memperbarui situs dengan teknologi yang lebih mutakhir agar tetap relevan dengan perkembangan zaman.
Pada akhirnya, pengelolaan gaya huruf dalam sebuah situs merupakan salah satu aspek penting dalam desain web. Meskipun elemen gaya huruf yang dibahas ini sudah mulai usang, prinsip dasarnya tetap relevan, yaitu memastikan bahwa teks dapat dibaca dengan nyaman dan tampil menarik bagi pengunjung. Pengembang web modern harus terus mengikuti perkembangan teknologi dan standar terbaik dalam pengelolaan tampilan teks agar dapat menciptakan pengalaman pengguna yang optimal di berbagai perangkat dan kondisi.
Oleh karena itu, pengaturan gaya huruf tidak boleh dianggap sepele. Selain memberikan dampak visual, pengaturan yang tepat juga dapat meningkatkan keterlibatan pengunjung, memperkuat identitas merek, serta memberikan kesan profesional pada situs yang dikelola.
Referensi Tambahan:
- 3 Contoh Program Penggunaan Tag Head pada HTML
- Cara Mudah Mengatur Heading Menggunakan Tag Hgroup HTML
- 2 Contoh Program Tujuan Penggunaan Tag HTML
- 2 Contoh Cara Menampilkan Teks dalam Format Miring pada HTML
- 9 Contoh Penggunaan Tag IMG untuk Menampilkan Gambar pada HTML
- 30 Value Utama Penggunaan Tag Input pada HTML
- 2 Atribut Utama Penggunaan Tag Ins pada HTML
Artikel ini akan dibaca oleh: Tessa Ayu Novita, Wildan Pratama Bagaskara, Aditya Aji Pradana, Afifah Eva Nuriyah, dan Aldila Puspita Husna.
12 komentar untuk "Mengatur Gaya Huruf HTML Menggunakan Tag Font"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Apa yang terjadi jika font yang saya gunakan pada tag font tidak tersedia pada browser atau komputer yang saya gunakan untuk membuka dokumen html tersebut?
BalasHapusTeks yang telah diatur tersebut akan diatur kedalam tipe default yang sudah disediakan oleh browser.
HapusApa yang dimaksud dengan tag font pada html?
BalasHapusTag font digunakan untuk mengubah warna, ukuran, dan gaya teks atau style. Tag font dasar digunakan untuk mengatur semua jenis teks dengan bentuk tampilan yang serupa.
HapusFont itu makanan yang berwarna hijau yang didalamnya diisi oleh gula merah?
BalasHapusItu kele-Font,, hohohoho
HapusBagaimana cara memformat font pada HTML5?
BalasHapusSelain menggunakan atribut face pada html, cara lain yang dapat dilakukan untuk memformat teks adalah dengan menggunakan atribut style. Atribut style menentukan penggunaan gaya baris dalam sebuah elemen. Atribut digunakan dengan tag P, dengan properti css berupa font-style, font-size, dan lain sebagainya. Pada HTML5 atribut font sudah tidak lagi didukung penggunaannya, sehingga alternatif pengganti dari tag tersebut adalah menggunakan CSS.
HapusApa tipe default yang digunakan pada html jika tidak dilakukan perubahan format font?
BalasHapusTergantung jenis browser yang digunakan, pada browser seperti Chrome, Opera, dan Firefox: format standar untuk font adalah Times New Roman, Font Serif: Times New Roman, Font Sans-serif: Arial, Monospace at Consolas.
HapusApa yang dimaksud dengan text style?
BalasHapusText Style atau gaya teks adalah sumber daya (resource) yang menentukan atribut dari teks, termasuk juga font, ukuran, spasi baris, gaya font, perataan teks, warna teks, dan latar belakang dari teks. Text tyle juga bisa menjadi bagian dari definisi kelas (dipelajari pada bagian pemrograman berbasis object), sehingga semua item yang terdapat dalam kelas tersebut dapat memiliki atau mewarisi gaya yang sama.
Hapus