HTML Text Formatting

HTML Text Formatting

This text is bold

This text is big

This text is italic

This is computer output

This is _subscript and ^superscript

Try it yourself »

Format HTML Tag

HTML menggunakan tag seperti <b> dan <i> untuk output format, seperti tekstebal atau miring.

Tag ini disebut format HTML tag (lihat di bagian bawah halaman ini untukreferensi lengkap).

Seringkali <strong> merender sebagai <b>, dan <em> merender sebagai <i>.

Namun, ada perbedaan dalam arti dari tag ini:

<b> atau <i> mendefinisikan teks tebal atau miring saja.

<strong> atau <em> berarti bahwa Anda ingin teks yang akan diberikan dengan cara bahwa pengguna memahami sebagai "penting". Hari ini, semua browser utama membuat kuat sebagai tebal dan em sebagai huruf miring. Namun, jikabrowser suatu hari ingin membuat teks yang disorot dengan fitur yang kuat, mungkin kursif misalnya dan tidak tebal!

Coba Sendiri - Contoh

Text formatting
Bagaimana memformat teks pada dokumen HTML.

Preformatted text
Bagaimana mengontrol line break dan spasi dengan pre tag.

"Computer output" tags
Bagaimana perbedaan "output komputer" tag akan ditampilkan.

Address
Cara mendefinisikan informasi kontak untuk penulis / pemilik dari sebuah dokumen HTML.

Abbreviations and acronyms
Bagaimana menangani singkatan dan akronim.

Text direction
Bagaimana mengubah arah teks.

Quotations
Bagaimana menangani kutipan panjang dan pendek.

Deleted and inserted text
Bagaimana untuk menandai teks yang dihapus dan dimasukkan.

HTML Text Formatting Tags

Tag	Description
<b>	Defines bold text
<big>	Defines big text
<em>	Defines emphasized text
<i>	Defines italic text
<small>	Defines small text
<strong>	Defines strong text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<ins>	Defines inserted text
<del>	Defines deleted text

HTML "Computer Output" Tags

Tag	Description
<code>	Defines computer code text
<kbd>	Defines keyboard text
<samp>	Defines sample computer code
<tt>	Defines teletype text
<var>	Defines a variable
<pre>	Defines preformatted text

HTML Citations, Quotations, and Definition Tags

Tag	Description
<abbr>	Defines an abbreviation
<acronym>	Defines an acronym
<address>	Defines contact information for the author/owner of a document
<bdo>	Defines the text direction
<blockquote>	Defines a long quotation
<q>	Defines a short quotation
<cite>	Defines a citation
<dfn>	Defines a definition term

sumber: http://www.w3schools.com/html/html_formatting.asp

HTML Paragraphs

kalau sebelumnya kita sudah belajar tentang HTML headings, nah sekarang kita buka dengan HTML paragraf.


Dokumen HTML terbagi ke dalam paragraf.


HTML Paragraf

untuk mendefinisikan Paragraf hanya cukup dengan tag <p>.

Contohnya:

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Try it yourself »
Catatan: Browser secara otomatis menambahkan baris kosong sebelum dan sesudah paragraf.


Jangan Lupakan Tag Akhir

Kebanyakan browser akan menampilkan HTML dengan benar bahkan jika Anda lupa tag penutup:

Contoh:

<p>This is a paragraph
<p>This is another paragraph

Try it yourself »


Contoh di atas akan bekerja di hampir semua browser, tapi jangan bergantung pada itu. Melupakan tag akhir dapat menghasilkan hasil yang tidak diharapkanatau kesalahan.

Catatan: versi HTML selanjutnya tidak akan memungkinkan Anda untuk melewatkan tag akhir.


HTML line Breaks

Gunakan tag <br /> jika Anda ingin istirahat baris (baris baru) tanpa perlu memulai sebuah paragraf baru:

Contoh:

<p>This is<br />a para<br />graph with line breaks</p>

Try it yourself »


Unsur <br /> adalah elemen HTML yang kosong. Tidak memiliki tag penutup.

<br> atau <br />

Dalam XHTML, XML, elemen tanpa tag penutup (tag penutup) tidak diperbolehkan.

Bahkan jika karya <br> di semua browser, menulis <br /> bukan bekerja lebih baik dalam aplikasi XHTML dan XML.
HTML Output - Tips Berguna

Anda tidak bisa yakin bagaimana HTML akan ditampilkan. Layar besar atau kecil, dan jendela ukurannya akan menciptakan hasil yang berbeda.

Dengan HTML, Anda tidak dapat mengubah output dengan menambahkan spasi ekstra atau baris ekstra dalam kode HTML Anda.

Browser akan menghapus spasi ekstra dan garis ekstra saat halamanditampilkan. Setiap jumlah baris dihitung sebagai satu baris, dan sejumlah ruangdihitung sebagai satu spasi.


Try it yourself
(Contoh ini menunjukkan beberapa masalah format HTML)

Examples from this page

HTML paragraphs
Bagaimana paragraf HTML akan ditampilkan dalam browser.

Line breaks
Penggunaan jeda baris dalam dokumen HTML.

Poem problems
Beberapa masalah dengan format HTML.

Contoh lainnya

More paragraphs
Perilaku default dari paragraf

HTML Tag Reference

Referensi tag W3Schools 'berisi informasi tambahan tentang elemen HTML dan atribut mereka. 

Tag	Description
<p>	Defines a paragraph
<br />	Inserts a single line break

sumber: http://www.w3schools.com/html/html_paragraphs.asp

HTML Headings.

kalau sebelumnya kita sudah belajar attribut dalam HTML, sekarang kita belajar tentang HTML Headings.

Headings ini penting dalam dokumen HTML.

cara mendefinisikan Headings HTML yaitu dengan <h1> sampai <h6>.

<h1> mendefinisikan heading yang paling penting. <h6> mendefinisikan heading paling tidak penting.

Untuk contoh, kita bisa coba disini.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Try it yourself »

Catatan: Browser secara otomatis menambahkan beberapa ruang kosong (margin) sebelum dan sesudah heading masing-masing.

Headings yang Penting

Menggunakan headings HTML untuk heading saja. Jangan gunakan heading untuk membuat teks BESAR atau tebal.

Mesin pencari menggunakan Headings Anda ke indeks struktur dan isi darihalaman web Anda.

Karena pengguna dapat skim halaman Anda dengan heading tersebut, pentinguntuk menggunakan heading untuk menunjukkan struktur dokumen.

Heading H1 harus digunakan sebagai headings utama, diikuti dengan headingH2, maka kurang penting heading H3 , dan sebagainya.

HTML Lines

<hr /> tag menciptakan garis horizontal di halaman HTML.

Unsur HR dapat digunakan untuk konten terpisah:

Example

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

Try it yourself »

HTML Comments

Comments dapat dimasukkan ke dalam kode HTML untuk membuatnya lebih mudah dibaca dan dimengerti. Komentar diabaikan oleh browser dan tidak ditampilkan.

Komentar ditulis seperti ini:

Example

<!-- This is a comment -->

Try it yourself »

Catatan: Ada tanda seru setelah kurung buka, tetapi tidak sebelum kurung tutup.

HTML Tips - Cara View Source HTML

Apakah Anda pernah melihat sebuah halaman Web dan bertanya-tanya "Hei!Bagaimana mereka melakukannya?"

Untuk mengetahuinya, klik kanan pada halaman dan pilih "View Source" (IE) atau"View Page Source" (Firefox), atau serupa untuk browser lainnya. Ini akan membuka jendela yang berisi kode HTML dari halaman.

Examples From This Page

Headings
How to display headings in an HTML document.

Hidden comments
How to insert comments in the HTML source code.

Horizontal lines
How to insert a horizontal line.

HTML Tag Referensi


Referensi tag W3Schools 'berisi informasi tambahan tentang tag dan atribut mereka.


Anda akan belajar lebih lanjut tentang tag HTML dan atribut dalam bab-babselanjutnya dari tutorial ini.

Tag	Description
<html>	Defines an HTML document
<body>	Defines the document's body
<h1> to <h6>	Defines HTML headings
<hr />	Defines a horizontal line
<!-->	Defines a comment

sumber: http://www.w3schools.com/html/html_headings.asp