Belajar HTML Part 6: HTML Style

Sebelum Anda meneruskan untuk praktek pada tutorial HTML Style, sebaiknya Anda pelajari dulu tutorial sebelumnya yaitu HTML Paragraf, karena disini kita akan menghias paragraf yang sudah kita buat sebelumnya.

HTML Style

Seperti yang sudah saya beritahukan kepada Anda tentang pengenalan HTML bahwa HTML tidak berdiri sendiri tetapi bisa dikombinasikan dengan bahasa pemrograman lain untuk membuat website yang bagus. Nah di pembahasan tutorial kali ini kita akan pelajari bagaimana HTML bisa dikombinasikan dengan bahasa pemrograman lain. Saat ini kita akan kombinasikan dengan CSS dasar untuk pengenalan ya.

Atribut HTML Style

Untuk menghias suatu elemt HTML seperti <p>, <b>, <strong>, kita perlu atribut bernama style. Lalu Anda bertanya fungsinya apa? Fungsinya untuk mengubah tampilan. Lebih jelasnya tentang atribut style, Anda bisa lihat anatomi berikut :

<tag_pembuka style="property:value;"> Ini adalah text untuk tampil di browser </tag_penutup>

Property adalah CSS Property seperti warna background, warna text dan sebagainya.

Values adalah nilai dari CSS Property.

Begini, kalau ada text "Aku belajar HTML di klikfadhil.blogspot.com" lalu Anda ingin mengganti warna tulisan menjadi merah, maka Property yang digunakan adalah color dan nilai value-nya adalah red;

HTML Warna Background

Properti CSS yang digunakan untuk mengubah warna background adalah background-color.

Contoh

Silakan Anda coba di Notepad dan buka di browser, maka background tampilan akan berubah menjadi merah muda. Bisu gita ya? hehe

HTML Warna Text

Kalau tadi kita sudah coba mengganti warna background, sekarang kita coba mengganti warna tulisan "Belajar HTML di klikfadhil.blogspot.com" dari hitam menjadi hijau ya. Untuk mengganti warna pada text, maka properti CSS yang digunakan adalah color.

Silakan anda coba di Notepad dan lihat perubahan warnanya di browser. Anda juga bisa mengganti warna pada tulisan "Dipandu oleh Ganfadhil" dengan warna lain terserah Anda.

HTML Font

Nah tadi Anda sudah pelajari bagaimana cara mengganti warna background dan warna text, sekarang saya akan beri sedikit materi tentang mengubah font text. Untuk mengubah front pada suatu text, properti CSS yang digunakan adalah font-family.

Silakan Anda coba di Notepad dan lihat perbedaan font pada kedua text tersebut.

Lalu bagaiaman cara mengganti font dan warna text secara bersamaan?

Anda bisa lakukan dengan cara seperti ini

<p style="font-family:courier;color:red">Dipandu oleh Ganfadhil</p>

Anda bisa menambahkan properti lain setelah tanda ; (titik koma). Titik koma disini gunanya untuk memisahkan antar properti dan value yang satu dengan lainnya. Jadi ayo inget - inget ya.

HTML Ukuran Font

Selain mengganti warna dan font pada text, kita juga bisa memperbesar dan memperkecil tulisan kita di HTML. Caranya cukup mudah, sama seperti sebelumnya tapi untuk properti ukuran text, kita menggunakan font-size.

Silakan Anda coba di Notepad dan lihat perbedaan ukuran text di browser. Semakin besar ukuran pixel yang Anda beri, jelas ukuran text akan semakin besar.

HTML Text Alignment

Nah ini materi perkenalan bonus deh buat Anda hehe.. Disini, kita akan mengatur alinea pada paragraf atau tulisan. Properti CSS untuk mengatur alinea adalah text-alignment dengan beberapa value yaitu left, center, right dan justify.

Silakan Anda coba di Notepad dan lihat di browser maka alineanya akan berubah. Untuk values justify silakan Anda coba dengan membuat banyak paragraf dan menggunakan value justify untuk text-alinment nya.

Kesimpulan

Di tutorial HTML Style ini ada beberapa hal yang bisa kita simpulkan.

1. Untuk menghias element HTML, perlu atribut style lengkap dengan properti dan value dari CSS.
2. Mengganti warna background dengan properti background-color
3. Mengganti warna text dengan properti color
4. Mengganti font text dengan properti font-family
5. Mengganti ukuran text dengan properti font-size
6. Mengatur alinea tulisan dengan properti text-alignment

Sekian tutorial HTML Style yang saya berikan disini, yang jelas sekarang Anda sudah pelajari dasar untuk mempercantik tampilan HTML dengan CSS dasar. Di tutorial selanjtnya kita akan bahas HTML Quotation berupa tag khusus untuk menangani kutipan - kutipan.