- Chapter 1:Cara Membuat Tulisan Bold, Italic, Larger, smaller, dan Struktur Dokumen Pada HTML.
- Chapter 2:Cara Membuat Headings (h1,h2,h3) dan Horizontal Ruled Lines Pada HTML.
 |
| Membuat paragraph, Align Attribute, Line Break, dan Preformatted Text Pada HTML |
Paragraphs...
Anda akan sering menggunakan paragraf dalam HTML, seperti yang Anda lakukan ketika Anda menulis sebuah cerita. Tag pembuka untuk sebuah paragraf adalah <p>, dan tag penutupnya adalah </p>. Tag penutup untuk sebuah paragraf tidak selalu diperlukan, tapi saya sarankan Anda harus menggunakan tag penutup paragraph tersebut agar Anda tahu dibagian mana paragraph tersebut akan berhenti.
Contoh Penulisan paragraph...
Randy jatuh dari tangga, tubuhnya terluka kasihan sekali!
<p>Randy jatuh dari tangga, tubuhnya terluka kasihan sekali!</p>
Text Formatting Properties...
Jika tulisan Anda tidak bervariasi dan tanpa ada satupun text yang diatur/diformat, itu akan terlihat membosankan. Ini adalah alasan mengapa kita harus membuat tulisan yang menarik dengan Text Formatting. Beberapa tag Text Formatting yang umum adalah:
<b> dan </b> untuk bold,Untuk lebih jelasnya Anda dapat melihat chapter sebelumnya tentang Cara penulisan Bold, Italic, Larger, smaller dan struktur dokumen pada HTML.
<i> dan </i> untuk italics,
<u> dan </u> untuk underlined, and
<tt> dan </tt> untuk typewriter.
Text Formatting Properties Pada Font Tags
Formatnya adalah seperti ini <font size=n> dan </font>.
Keterangan :
- n adalah jumlah poin font yang digunakan untuk mengubah ukuran font saat ini.
- n bisa positif atau negatif: bilangan positif akan meningkatkan ukuran font, dan angka negatif akan menguranginya.
- n juga bisa menjadi angka absolut, yang menunjukkan ukuran mutlak suatu font (bukan ukuran relatif).
Contoh Pembuatan Font Tags...
Apakah Randy jatuh dari tangga sekolah?
<font size=+1>Apakah</font> <font size=+2>Randy</font> <font size=+3>Jatuh</font> <font size+2>dari</font> <font size=+1>Tangga</font> <font size=-1>sekolah?</font>
ALIGN attributes...
Banyak tag yang mendukung ALIGN atribut. Anda bisa mengubah arah suatu objek tulisan dengan tag ALIGN ini, entah itu ke kiri ataupun ke kanan. Tag ALIGN atribut ditempatkan dalam tag pembuka sebelum tanda >.
Left Align
<h1 align=left>Left Align</h1>
Center Align
<h1 align=center>Center Align</h1>
Right Align
<h1 align=right>Right Align</h1>
The Line Break...
Ketika Anda menulis dalam mode HTML, biasanya teks akan melakukan word-wrap (pergantian baris secara otomatis) di ujung baris. Jika Anda ingin melakukan BREAK teks sebelum sampai diujung baris, Anda bisa menggunakan Tag <br>. Perlu diketahui, tag ini tidak memiliki tag penutup.
Contoh TANPA line Break...
Kalimat 1.Kalimat 2.Kalimat 3
Contoh DENGAN line Break...
Kalimat 1.
Kalimat 2.
Kalimat 3.
Bentuk Penulisan :
Kalimat 1.<br>
Kalimat 2.<br>
Kalimat 3.<br>
Preformatted Text...
Apa itu preformatted text? Preformatted text adalah tag HTML yang berfungsi untuk membuat tulisan sesuai dengan tulisan yang Anda buat (sesuai dengan aslinya). Jika Anda ingin membuat tulisan break tanpa tag <br>, Anda bisa gunakan ini sebagai alternatif. Anda hanya tinggal memasukkan tulisan didalam tag <pre> dan </pre>.
Didalam tag tersebut Anda bisa berkreasi dengan tulisan Anda, entah itu menggunakan spasi, enter, semua format akan mengikuti sesuai dengan text yang Anda buat.
Contoh teks TANPA preformatting...
Misalkan Anda membuat tulisan seperti ini :
Rudi makan nasi.
^ ^-enak ^lezat
^-nikmat
Maka jika Anda tanpa menggunakan preformatting hasilnya jadi seperti ini : Rudi makan nasi.^ ^-enak ^lezat ^-nikmat
Note : Jika Anda TIDAK menggunakan preformatting, HTML akan mengabaikan jeda baris tambahan pada contoh teks diatas, sehingga teks tidak dicetak dengan benar.
Contoh Teks DENGAN preformatting...
Bentuk penulisannya adalah :
Praktek HTML
Tambahkan HTML di bawah ini di project ("Home.htm") yang Anda buat di chapter sebelumnya, Lalu taruh diantara tag <body> dan </body>:
Simpan file "Home.htm".
Rudi makan nasi.
^ ^-enak ^lezat
^-nimat
Bentuk penulisannya adalah :
<pre> Rudi makan nasi. ^ ^-enak ^lezat ^-nikmat </pre>
Praktek HTML
Tambahkan HTML di bawah ini di project ("Home.htm") yang Anda buat di chapter sebelumnya, Lalu taruh diantara tag <body> dan </body>:
<h1>Nama Anda, Home Page</h1>
<hr>
Ini adalah Home Page dari <b>YOURNAME</b>.
<p>Tulis sesuatu tentang diri Anda di sini. Jelaskan secara singkat siapa Anda dan apa yang Anda lakukan untuk kehidupan Anda. Ingatlah untuk menggunakan teks tebal dan miring, untuk lebih memahami HTML lebih lanjut.</p>
Simpan file "Home.htm".