Mengatur Font dan Warna
• Dokumen HTML menyediakan fasilitas
untuk mengubah warna baik warna font,
maupun background.
• Kita dapat menspesifikasikan ukuran dan
• Kita dapat menspesifikasikan ukuran dan
• HTML menggunakan tag <Font> untuk
mengatur font atau spesifikasi tulisan di
HTML.
<font size=”2” face=”verdana”>This is a
<font size=”2” face=”verdana”>This is a
Menggunakan font size
• Contoh mendemonstrasikan bagaimana
mengubah ukuran font:
<html> <head>
<title>Ukuran Font</title> <title>Ukuran Font</title> </head>
<body>
Menggunakan Font Face
• Contoh mendemonstrasikan bagaimana
mengubah jenis font:
<html> <head>
<title>Ukuran Font</title> </head>
</head> <body>
<Font face=“Times”>Another letter </Font><br>
<Font face=“Comic Sans MS”>Another letter </Font><br> <Font face=“Verdana”>Another letter </Font><br>
<Font face=“Arial”>Another letter </Font><br>
<Font face=“Licida Dingbom”>Another letter </Font><br> </body>
Menggunakan Font Color
• Contoh mendemonstrasikan bagaimana
mengubah warna font:
<html> <head> <head>
<title>Ukuran Font</title> </head>
<body>
<font color=“red">Ini warna merah</font><br> <font color=“white">Ini warna putih</font><br> <font color=“blue">Ini warna biru</font><br> <font color=“green">Ini warna hijau</font><br> <font color=“yellow">Ini warna kuning</font><br>
• Penggunaan warna font dengan
menggunakan kode warna:
<html> <head> <head>
<title>Ukuran Font</title> </head>
<body>
<font color="#FF0000">Ini warna merah</font><br> <font color="#FFFFFF">Ini warna putih</font><br> <font color="#0000FF">Ini warna biru</font><br> <font color="#00FF00">Ini warna hijau</font><br> <font color="#FFFF00">Ini warna kuning</font><br> <font color="#FF00FF">Ini warna pink</font><br>
Menampilkan warna latar belakang
• Untuk menampilkan warna background,
dengan menggunakan tag:
•
<body bgcolor=“[warna]”></body>
• Contoh:
• Contoh:
<html> <head>
<title>Ukuran Font</title> </head>
<body bgcolor="#00FF00">
Menampilkan warna teks atau font
di halaman
• Untuk menampilkan warna teks, dengan
menggunakan tag:
•
<body text=“[warna]”></body>
• Contoh:
• Contoh:
<html> <head>
<title>Ukuran Font</title> </head>
<body bgcolor="#00FF00" text="#FFFFFF">
Menampilkan background image
• Untuk menampilkan background gambar,
dengan menggunakan tag:
•
<body background=“[image]”></body>
•
Contoh:
•
Contoh:
<html> <head>
<title>Ukuran Font</title> </head>
<body background=“gambar1.jpg" bgcolor="#00FF00" text="#FFFFFF">
Mengatur Font dan Warna dengan
CSS
• Untuk mendeklarasikan CSS diletakkan di
bagian head dari dokumen HTML, ditandai
dengan:
<style type=“text/css”>
<style type=“text/css”>
<! Isi ->
Contoh Penggunaan CSS
<html>
<head>
<title>Ukuran Font</title>
<style type=“text/css”>
Body{ background-color:red; color:blue; family:verdana;
font-size:12pt;
Background-image:url(“.. /picture/background.jpg”);
Background-image:url(“.. /picture/background.jpg”);
margin-left:15px
}
