Chapter 2. Format Karakter

Ukuran: px

Mulai penontonan dengan halaman:

Download "Chapter 2. Format Karakter"

Hadian Halim
7 tahun lalu
Tontonan:

1 Chapter 2. Format Karakter Format terhadap karakter yang ditampilkan akan sangat berguna untuk membuat sebuah dokumen HTML yang menarik.pemformatan karakter tersebut mencakup beberapa hal : 1) Logical Format 2) Physical Format 3) Tag <BLOCKQUOTE> 4) Tag 5) Karakter Khusus 2.1. Logical Format Logical format akan menerapkan layout dokumen secara logis dan terstruktur. Tagtag yang termasuk logical format adalah sebagai berikut : <CITE>, digunakan untuk menandai suatu kutipan (Citation). <CODE>, digunakan untuk menampilkan kode-kode pemrograman, misalnya bahasa C. , digunakan untuk menandai suatu teks yang ditekankan oleh penulis. <KBD>, digunakan untuk menandai suatu teks yang harus dimasukkan oleh user melalui keyboard. <SAMP>, digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh. , digunakan untuk menandai bagian yang terpenting dari suatu teks. <VAR>, digunakan untuk menampilkan nama variabel. <DFN>, digunakan untuk menandai sebuah subdefinisidari daftar definisi. Semua tag tersebut memerlukan tag penutupnya masing-masing.

2 Latihan 6.html <HTML> <HEAD> <TITLE> Logical Format </TITLE> </HEAD> <BODY> <CITE> Tom Sawyer </CITE> adalah salah satu tokoh penting di dunia sastra amerika. Kode yang paling pertama dipelajari oleh programmer C adalah :<CODE>puts ( Hello World! );</CODE> Ia berkata, Sekali tidak tetap tidak. Untuk berpindah ke direktor root, ketikkan <KBD>cd / </KBD>. Pada abjad terdapat 5 huruf vokal, yaitu <SAMP>AEIUO</SAMP>. Hal yang harus diingat-ingat adalah Jangan Panik! Kode program tersebut diiterasi sebanyak <VAR>N</VAR> kali. <DFN>Trenggiling adalah hewan pemakan semut. </DFN> </BODY> </HTML>

3 2.2. Physical Format Physical format adalah format terhadap fisik suatu font. Tag-tag yang termasuk physical format adalah sebagai berikut : , untuk menampilkan huruf tebal. , untuk menampilkan huruf miring. , untuk menampilkan garis bawah pada teks. <TT>, untuk menampilkan huruf seperti huruf mesin ketik. <STRIKE>, untuk menampilkan garis horizontal pada bagian tengah huruf. <BIG>, untuk menampilkan ukuran huruf yang lebih besar. , untuk menampilkan ukuran huruf yang lebih kecil. , untuk menampilkan subscript. , untuk menampilkan superscript. Latihan 7.html <HTML> <HEAD> <TITLE> Memformat Karakter </TITLE> </HEAD> <BODY> kalimat ini akan dicetak tebal. kalimat ini akan dicetak miring kalima ini akan bergaris bawah <STRIKE> kalimat ini akan bergaris tengah </STRIKE> <TT>menampilkan huruf seperti huruf mesin ketik.</tt> Untuk menampilkan subscript Untuk menampilkan subscript </BODY> </HTML>

4 2.3. Tag <BLOCKQUOTE> Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE.Dengan perintah <Blockquote> browser akan menampilkan teks menjorok ke dalam ( mengindentasi teks ) atau menampilkan teks. Latihan 8.html <title>quotes/indentasi</title> quote atau Indentasi Dengan HTML, Anda dapat mengatur indentasi text yang Anda buat dengan menggunakan tag BLOCKQUOTE <blockquote>ini adalah paragraf yang menggunakan blockquote, Anda dapat melihat perbedaanya ketika script ini Anda jalankan. Kira-kira sampai disini Anda mengerti atau tidak??kalau tidak,yuk tanya dan kita sharing... </blockquote> Nah, Anda sudah mengetahui perbedaannya kan??jadi, belajar HTML itu tidak sulit dan Anda bisa mencoba banyak hal disini.

5 2.4. Tag Dengan tag anda bisa menentukan format tampilan font dalam document HTML seperti color, size dan lainnya Ukuran Font Atribut SIZE digunakan untuk mengatur ukuran font. Nilai font dimulai dengan nilai 1 untuk ukuran huruf terkecil dan nilai 7 untuk ukuran paling besar Jenis Font Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus diisi dengan string jenis font seperti Arial, Times New Roman, Verdana dan lain sebagainya Warna Font Atribut COLOR digunakan untuk mengatur warna font yang diinginkan. Untuk memberi nilai pada atribut color ada dua cara, yaitu : 1. Dengan menyebutkan nama warna seperti red, green dan blue. 2. Dengan menggunakan nilai RGB ( Red Green Blue ) dari satu warna misalnya FF0000 untuk red, 00FF00 untuk green dan 0000FF untuk Blue. Latihan 9.html <title>formating Teks</title> Menggunakan Font dan Atributnya Teks ini menggunakan atribut FACE teks ini menggunakan atribut SIZE teks ini menggunakan atribut COLOR

6 Latihan 10.html <title>formating Teks</title> Menggunakan Font dan Atributnya Teks ini menggunakan atribut FACE dan COLOR teks ini menggunakan atribut SIZE dan FACE teks ini menggunakan atribut COLOR, FACE dan SIZE

7 Sebagai latihan, buatlah script HTML sehingga hasilnya akan tampak seperti berikut ini! Gunakan tag-tag HTML beserta atributnya yang telah kita pelajari! 2.5. Karakter Khusus Tanda lebih kecil (<) dan lebih besar (>) merupakan tag HTML, lalu bagaimana cara untuk menuliskan tanda tersebut ke dalam dokumen web kita? Caranya adalah dengan menuliskan entitas karakter yang mempunyai 3 bagian: sebuah ampersand (&), sebuah nama entitas atau sebuah # dan nomor entitas, dan sebuah titik koma. Contoh : Untuk menampilkan tanda lebih kecil kita harus menuliskan : < atau < Tabel 1. Karakter khusus Hasil Keterangan Nama Entitas Nomor Entitas Copyright Registered Trademark x Tanda kali ± Plus minus &plusmn ±

8 Latihan 11.html <HTML> <HEAD> <TITLE> Memformat Karakter </TITLE> </HEAD> <BODY> copyright registered trademark trademark non-breaking space ampersand & «angle quotation mark (left) angle quotation mark (right)» "tanda kutip " lebih kecil < lebih besar > tanda kali tanda bagi </BODY> </HTML>

9 2.6. Preformatted Text Preformatted text <PRE> digunakan untuk menampilakan teks sama seperti yang Anda ketikkan dalam dokumen HTML. Browser akan menampilkan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang ditampilkan oleh aplikasi berbasiskan teks. Sebagai contoh, cobalah latihan berikut ini : Latihan 12.html <title>formating Teks</title> Moncoba PreFormatted Text <pre> Ketika Anda membuat ini, maka hasilnya sama dengan tampilan pada browser ************ Coba yang ini...sama saja kan??? ************************************ </pre>

10 2.7. Grouping Element Tag DIV dan SPAN digunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content, sementara div digunakan untuk blocklevel content. Latihan 13.html <title>div dan Span</title> <div> Divisi 1 Div tag digunakan untuk mengelompokkan group element biasanya untuk blocklevel element. </div> <div align="right"> Divisi 2 Ini didalam devisi kedua. di tulis dengan alignment kanan. </div> baris ini dalam span dengan warna hijau.

11 Latihan 14.html <title>nazneen Online Bookstore</title> <div align="right"> <h1 align="right"> NAZNEEN ONLINE BOOKSTORE</h1> <h1 align="right">jl. Cempaka 143 A Condong Catur Depok Sleman Yogyakarta Telp </h1> <hr color="#990000" align="right" size="3" width="100%"> </div>

dokumen-dokumen yang mirip

HTML (Hypertext Markup Language)

1 HTML (Hypertext Markup Language) HTML atau Hypertext Markup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen (web page) dan aplikasi yang berjalan di halaman web. Dokumen HTML