02 materi html pengolahan format font

MATERI HTML FORMAT TEKS DAN
PENGOLAHAN FONT

PEMBIMBING OLEH :
DEKA M WILDAN
TAHUN AJARAN 2013/2014

2. HTML FORMAT FONT
Memformat font pada html pada dasarnya mengubah atau
mendesain suatu teks. Format font terdiri atas beberapa
macam, yaitu : format heading, paragraf, warna teks, elemen
tebal, elemen garis bawah, elemen italic (miring), Elemen
Garis Horizontal atau <HR>, format teks dan elemen
perataan.
1. Heading
Heading berfungsi untuk membuat header dengan format 6 jenis
ukuran huruf. Nilai ukuran huruf terbesar adalah H1 dan H6
adalah nilai ukuran huruf terkecil. Berikut daftar Heading :
H1,H2,H3,H4,H5,H6
Sintaks :
<hx align=“left”|”right”|”center”>
TEKS YANG DIBUAT HEADING
</hx>
Keterangan : karakter “x” diisi dengan nilai level heading
dimana x adalah penyebut dari nilai level dari suatu heading.


Copyright©deka@smkbhinus.net

2. HTML FORMAT FONT PART 2


Contoh implementasi pada latihan2.html :

<html>
<head>
<title>
LATIHAN MEMBUAT HEADING
</title>
</head>
<body>
<h1 align=“left”>INI HEADING 1 RATA KIRI</h1>
<h2 align=“center”>INI HEADING 2 RATA TENGAH</h2>
<h3 align=“right”>INI HEADING 3 RATA KANAN</h3>
<h4>INI HEADING 4</h4>
</body>
</html>

DAN HASILNYA AKAN TERLIHAT SEPERTI GAMBAR DI BAWAH INI :


2. TUGAS FORMAT FONT : TUGAS HEADING


Buatlah halaman web heading teks dengan nama file
“heading.html” dengan hasil mirip seperti di bawah ini :


2. MEMBUAT PARAGRAF
Membuat paragraf, pada dasarnya sama seperti
membuat heading dalam pemberian properti dan
atribut, hanya berbeda pada ukuran dan
penempatannya saja. Contoh Sintax atau perintah
membuat paragraf :
<p>.....</p> karakter titik-titik (.....) merupakan teks
yang dibuat paragraf. Kemudian jika ditambahkan
properti dan atribut, seperti di bawah ini :
<p align=“left”|“center”|”right”>TEKS PARAGRAF</p>


3. MEMBUAT HURUF TEBAL, MIRING DAN GARIS
BAWAH
Untuk membuat huruf tebal atau bold, menggunakan syntax atau
perintah : <b>......</b> , kepanjangan dari <bold>, sedangkan untuk
membuat huruf miring gunakan perintah : <i>......</i> , kepanjangan
dari <italic>, dan untuk membuat garis bawah, gunakan perintah :
<u>........</u> kepanjangan dari <underline>. Khusus untuk
pemformatan huruf seperti membuat huruf tebal, miring, dan garis
bawah tidak mempunyai properti dan atribut, karena format tersebut
masing-masing hanya mempunyai satu fungsi.


2. TUGAS FORMAT FONT : TUGAS HEADING,
PARAGRAF DAN BENTUK TEKS


Buatlah halaman web dengan nama file “tugasfont2.html”
dengan hasil tampilan seperti gambar di bawah ini :


4. MENGOLAH FONT TEKS
Untuk merubah dan mengolah font teks, gunakan syntax atau
perintah :
<font [nama properti]=[nilai atribut]>TEKS</font>
Macam-macam properti dan atribut pada font :
<font color =red|blue|yellow|green|”#00ff00”|”#dedeca”>
<font face=“Arial”|”Times New Roman”|”Verdana”>
<font size=“1”|”2”|”3”|”4”|”5”|”6”|”7”>
Contoh penggabungan ketiga properti tersebut :
<font face=“Arial” size=“5” color=blue>TEKS YANG DI
OLAH</font>


2. TUGAS FORMAT FONT : MENGOLAH FONT TEKS
Buatlah halaman web dengan nama “tugasfont3.html” dari
aplikasi notepad dengan contoh hasil mirip seperti gambar di
bawah ini :


2. HTML FORMAT FONT PART7
5. Element HR <Horizontal Rule>
Elemen HR atau Horizontal Rule berfungsi untuk membuat suatu
garis horizontal. Elemen ini tidak mempunyai tag penutup dan
mempunyai properti dan atribut seperti : “align” untuk
menempatkan posisi secara horizontal (“left”,”right”,”center”),
“size” untuk mengatur ukuran ketebalan garis (“pixel”), ”width”
untuk mengatur ukuran panjang garis (“persen”), dan “noshade”
(garis solid). Syntax atau perintah untuk membuat garis horizontal
adalah :
<hr align=“left”|”center”|”right” size=“1”|”2”|”3”|”4”|”5”|”6”
width=“10%”|”20%”|”30%”|”40%”|”50%”|”60%”|”70%”|”80%”|”90%”|
”100%” noshade>


2. HTML FORMAT FONT : PART 8
6. Elemen <center> :
Untuk membuat perataan pada semua konten bisa
menggunakan perintah : <center>............</center>. Fungsi
tersebut digunakan merata tengahkan objek atau konten
sebagai pengganti paragraf <p>. Contoh :
<center>
Kalimat ini di rata tengahkan oleh elemen center
</center>


Contoh latihan pembuatan garis horizontal atau
<HR> dan elemen center. Buat file “latihanhr.html” dengan aplikasi
notepad dan ketikkan kode htmlnya seperti di bawah ini :
<html>
<head>
<title>Latihan Membuat garis Horizontal</title>
</head>
<body bgcolor=blue>
<h1 align=“center”><font color=lightblue>
DINAS PENDIDIKAN JAWA TENGAH
</font></h1>
<h2 align=“center”><font color=yellow>
PEMERINTAH KABUPATEN KENDAL
</font></h2>
<hr align=“center” size=“5” width=“100%” noshade>
</body>
</html>

Dan hasilnya seperti gambar di bawah ini :


2. TUGAS HTML FORMAT FONT : HORIZONTAL RULE
Buatlah halaman web dengan nama file “tugashr.html” dari aplikasi
notepad dan buat seperti hasil gambar di bawah ini :


02 materi html pengolahan format font

Recommended

Recommended

More Related Content

Similar to 02 materi html pengolahan format font

Similar to 02 materi html pengolahan format font (20)

More from Deka M Wildan

More from Deka M Wildan (20)

02 materi html pengolahan format font