Cara Mengubah Ukuran Text, Jenis Font dan Alignment HTML

Selain mengubah warna background dan text, atribut style juga bisa digunakan untuk mengubah ukuran text, jenis font dan perataan text.

Font Size

Untuk mengubah ukuran dari text tertentu dalam html kita bisa memakai atribut style dengan nilai font-size.
Ukuran dari text diukur berdasarkan pixel, penulisan nya bisa memakai percen ataupun px.
Contoh penulisan <h1 style=”font-size:300%;”>Ini heading</h1>
Atribut ini diletakkan di dalam tag.

Contoh font size

<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">Ini heading H1</h1>
<p style="font-size:160%;">Ini paragraf.</p>
</body>
</html>

Perhatikan pada tag h1 ukuran text nya lebih besar, biasanya tag h1 itu tidak ukuran text nya tidak terlalu besar namun font-size ini kita bisa membuat ukuran text nya sesuai keinginan.
Bukan hanya tag heading, perhatikan juga tag p (paragraf).

Mengubah Jenis Font

Font family berfunsi untuk menentukan jenis font pada text html.
Atribut style pada tag tertentu dengan nilai font family dapat mengubah jenis tulisan pada text tersebut.
Contoh penulisan <h1 style=”font-family:verdana;”>Ini heading</h1>

Contoh mengubah jenis font

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">Ini heading</h1>
<p style="font-family:courier;">Ini paragraf.</p>
</body>
</html>

Dengan menambah style font-family:verdana; dalam contoh diatas berarti saya membuat jenis font verdana untuk heading.
Sedangkan untuk paragraf saya membuat jenis font nya courier
Dengan begitu text antara heading dan paragraf berbeda, dan tentunya akan membuat halaman lebih mudah dibaca.

Mengatur Alignment Text

Atribut style juga bisa digunakan untuk mengatur perataan text atau sering disebut  align.
Nilai dari align ini bisa center, left, right dab juga rata kanan kiri.

Contoh Alignment Style

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center heading</h1>
<p>Ini paragraph.</p>
</body>
</html>

Text-align:center bisa diubah ke left atau right, jika kita memakai center berarti text tersebut akan ke tengah. Lihat contoh diatas.
Dengan semua tutorial diatas saya berharap bisa memahami dan bisa menerapkan pada halaman web yang anda buat.
Ini sangat cocok untuk yang belum bisa css, kalau sudah jago css bisa style text dari css saja.

Keyword:

  • cara uwah warna dan ukuran font di php

Get real time updates directly on you device, subscribe now.

Ingin Berkomentar?

×
Lewat ke baris perkakas