MATERI III
PEMFORMATAN TEXT HTML
Tujuan :
1.
Memahami tentang format page break
2.
Memahami tentang pengaturan berbagai macam teks.
A. Pemformatan Page Break
Tag <BR> di gunakan untuk memulai baris ba
ru pada document HTML, tag ini fungsinya
mirip dengan carriage return.
Font
Dengan tag <FONT> anda bisa menentukan form
at tampilan font dalam document HTML
seperti color, size, style dan lainya.
Contoh:
Attribute
Description
color Untuk menentukan warna font, anda bisa
menggunakan nama font atau hexadecimal
(#000000 - #ffffff)
size Untuk menentukan ukuran dari font 1 - 7
face Untuk menentukan jenis font biasanya dalam satu list
ada beberapa font dan akan di baca mulai dari yang
paling kiri.
Color
Color merupakan attribute yang bisa anda tamb
ahkan pada beberapa element seperti body,
font, link dan lainya. Color di bagi dalam tiga ke
tegori warna primer yaitu
red, green dan blue.
Masing-masing color didefinisikan da
lam dua digit hexadecimal number.
#RRGGBB
Hexadecimal
Color
#FF0000
Red
#00FF00
Green
#0000FF
Blue
#000000
Black
#FFFFFF
White
Alignment
Align attribute digunakan untuk menentukan pe
rataan object dalam document HTML baik
berupa text, object, image, para
graph, division dan lain-lain.
Value
Description
Left Rata kiri
Right
Rata kanan
Center Rata tengah
Justify Rata kanan kiri
B. Format text
Physical Formatting
Tag
Description
<B> ... </B>
Bold text
<I> ... </I>
Italic text
<U> ... </U>
Underline Text
<BIG> ... </BIG>
Untuk ukuran yang lebih besar
dari normal
<SMALL> ... </SMALL>
Untuk ukuran yang lebih kecil
dari normal
<STRIKE> ... </STRIKE>
Untuk memberi garis di tengah
text
<SUP> ... </SUP>
Superscript text
<SUB> ... </SUB>
Subscript text
<CENTER> ... </CENTER>
Center document
Logical Formatting
Tag
Description
<EM> ... </EM>
Text miring / <I>
<STRONG> ...
</STRONG>
Text tebal / <B>
<DEL> ... </DEL>
Mencoret text / <STRIKE>
<INS> ... </INS>
Underline text / <U>
Preformatted text
Tag PRE di gunakan untuk menampilkan
text sesuai dengan format aslinya.
LATIHAN - LATIHAN
A.
PENGATURAN TEKS
1. Pengaturan teks
<html>
<head>
<title>Format Teks</title>
</head>
<body>
<p>
<b>Tulisan ini ditebalkan (bold)</b>
</p>
<p>
<strong>Tulisan ini ditebalkan
(strong)</strong>
</p>
<p>
<em>Tulisan ini miring (emphasize)
</em>
</p>
<p>
<big>Tulisan ini besar (big)</big>
</p>
<p>
<i>Tulisan ini miring (italic) </i>
</p>
<p>Tulisan ini
<sub>subscript</sub>
</p>
<p>Tulisan ini
<sup>superscript</sup>
</p>
</body>
</html>
2. Tag <pre> dan </pre>dapat kita gunakan
untuk menampilkan sesuai dengan dokumen web
tersebut dalam editor teks.
a. Latihan <pre> yang pertama
Coba hilangkan tag <PRE> dan lihat apa perbedaanya.
b. Latihan <pre> yang kedua
<HTML>
<HEAD>
<TITLE>Preformat </TITLE>
</HEAD>
<BODY>
<H2>Daftar Harga Keladi:</H2>
<PRE>
Red Flash.........35.000
Red Fire..........60.000
Fannie Munson.....60.000
</PRE>
Harga sewaktu-waktu bisa berubah.
</BODY>
</HTML>
<html>
<head>
<title>Tag Preformatted</title>
</head>
<body>
<pre>
This section provides a brief overview of the menus in
Dreamweaver.
The File menu and Edit menu contain the standard menu
items for File and Edit.
menus, such as New, Open, Save, Save All, Cut, Copy, Paste,
Undo,and Redo
</pre>
<pre>
Ini adalah
preformatted text.
Menampilkan spasi
Dan line break apa adanya.
</pre>
<p>Tag PRE cocok digunakan untuk menampilkan kode bahasa
pemrograman komputer :</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
2. Tag <blockquote> digunakan untuk membuat se
bagian teks yang dikutip sebagai suatu blok
sendiri. Kebanyakan browser umumnya mengguna
kan margin untuk kutipan teks tadi untuk
memisahkan dari teks yang mengelilinginya.
3. Pengaturan Font : Face (untuk jenis Font),
Size (untuk ukuran Font), Color (untuk warna)
4. Pengaturan warna background : BGCOLOR
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
Normal: 012345ABCD<BR>
<FONT COLOR="blue" FACE = "Arial">Arial:
012345ABCD</FONT>
<BR>
<FONT COLOR="green" FACE = "Courier" SIZE="5">
Courier: 012345ABCD</FONT>
<BR>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Warna - Bagian 2</TITLE>
</HEAD>
<BODY BGCOLOR = "black" TEXT = "gray">
Normal<BR>
<FONT COLOR = "blue">Warna Biru</FONT><BR>
<FONT COLOR = "green">Warna Hijau</FONT><BR>
<FONT COLOR = "red">Warna Merah</FONT><BR>
<FONT COLOR = "yellow">Warna kuning</FONT><BR>
</BODY>
</HTML>
<html>
<head>
<title>quotation</title>
</head>
<body>
tulisan ini BUKAN quotation
<blockquote>
tulisan ini adalah quotation <br>
tulisan ini adalah quotation <br>
tulisan ini adalah quotation <br>
</blockquote>
</body>
</html>
Tidak ada komentar:
Posting Komentar