Pada postingan kali ini saya ingin share / berbagi pengetahuan tentang tipografi pada HTML. Lantas, Apa itu topograpi ?
Tipografi adalah Suatu teknik untuk memanipulasi huruf untuk membuat kesan tertentu dengan tujuan kenyamanan semaksimal mungkin pada saat dibaca. Pada HTML ada beberapa Tag yang digunakan untuk memanipulasi huruf atau text contohnya Heading, Font-face dll. Okee kita bahas saja langsung :
HEADING
Heading biasanya digunakan untuk membuat judul atau sub judul. Heading pada HTML ada 6 jenis.
Penulisan Umum : <hn> teks disini </hn>
* n = angka 1-6
Contoh :
<html>
<head>
<title> Belajar Heading </title>
</head>
<body>
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
</body>
</html>
Maka jika dijalankan di browser hasilnya :
* Semakin besar Angka Heading, maka semakin kecil ukuran font nya.
FONT-FACE
Font-Face digunakan untuk mengganti jenis font.
Penulisan Umum : <font face=”jenis_font”> Teks Disini </font>
Contoh :
<html>
<head>
<title> Font Face </title>
</head>
<body>
<font face = “Calibri”> Font tipe Calibri </font>
<font face = “sans-serif”> Font tipe sans-serif </font>
<font face = “Times New Roman”> Font tipe Times new Roman </font>
</body>
</html>
Maka jika dijalankan di browser masing-masing hasilnya :
Teks tersebut akan berubah sesuai jenis font nya.
FONT - COLOR
Font color berfungsi untuk mewarnai font.
Penulisan Umum : <font color =”warna dalam bahasa inggris atau kode warna”> Teks Disini </font>
Contoh :
<html>
<head>
<title> Font Color </title>
</head>
<body>
<font color=”red”> Teks Warna merah </font><br/>
<font color=”#00FF00”> Teks Warna Hijau dengan kode warna #00FF00 </font>
</body>
</html>
Hasil nya :
* jika menggunakan kode warna, Selalu di awali dengan tanda pagar atau “#”(tanpa tanda Petik).
BOLD, ITALIC, dan UNDERLINE
Pada HTML pun tulisan bisa dibuat menjadi tebal, miring, dan bergaris bawah. Caranya sih cukup mudah, cukup tambahkan :
<b> </b> : Tag ini berfungsi untuk membuat huruf menjadi tebal (bold).
<i> </i> : Tag ini berfungsi untuk membuat huruf menjadi Miring (italic).
<u> </u> : Tag ini berfungsi untuk membuat huruf ada garis bawah nya (Undeline).
Penulisan Umum : <format_huruf> Teks Disini </format_huruf>
Contoh :
<html>
<head>
<title> Format Huruf </title>
</head>
<body>
<b> Huruf Bold </b><br/>
<i> Huruf Miring </i><br/>
<u> Huruf dengan Garis Bawah </u><br/>
<i><b><u> Huruf Miring, Tebal, dan Bergaris Bawah </u></b></i>
</body>
</html>
Jalankan di Browser :
* Tag <b></b> sama saja dengan tag <strong> </strong>, sama sama menghasilkan huruf tebal
Nah mudah bukan ?
sekian dulu, jika ada yang masih kebingungan silahkan tinggalkan komenter di kolom komentar
0 komentar:
Posting Komentar