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.

Belajar HTML Part 5: HTML Paragraf

Setelah sebelumya Anda pelajari tentang HTML heading sekarang kita akan bahas tentang HTML paragraf untuk membuat paragraf atau deretan kalimat yang digabung menjadi satu untuk membahas topik tertentu.

HTML Paragraf

Untuk membuat paragraf di HTML, Anda cukup menggunakan tag <p>.

Contoh:

Silakan Anda coba di Notepad lalu buka di browser. Anda akan melihat ada 2 buah paragraf disitu. Secara default, browser akan memberi jarak antara paragraf satu dengan paragraf yang lainnya.

Perbedaan Bentuk Paragraf

Mungkin muncul pertanyaan di dalam diri Anda, bagaimana tampilan paragraf di browser jika pengetikan paragraf di acak atau diberi enter seperti ini.

Meskipun cara Anda mengetik paragraf seperti itu, HTML paragraf yang ditampilkan di browser tidak akan mengikuti cara penulisan Anda. Browser akan menghapus tambahan spasi atau enter yang Anda lakukan di HTML paragraf.

HTML Line Break

Solusi kalau Anda ingin memberi jarak atau meng-enter kalimat yang masih menjadi satu paragraf adalah dengan menambah HTML line break yang memiliki tag khusus yaitu <br/>. <br/> adalah tag kosong, jadi tolong diingat - ingat untuk menutupnya dengan / (slash). 

Disini Anda bisa membuat baris baru tanpa mengetik paragraf baru.

Silakan Anda coba menambahkan tag <br/> dan lihat perbedaan dengan sebelumnya.

Tag Untuk Menebalkan dan Memiringkan

Dalam pembuatan paragraf, HTML sudah menyedia tag untuk menebalkan dan memiringkan huruf, kata, kalimat sampai paragraf. Saya akan memberi contoh satu per satu supaya Anda paham. Urutannya begini :

1. Menebalkan dan memiringkan huruf
2. Menebalkan dan memiringkan kata
3. Menebalkan dan memiringkan kalimat
4. Menebalkan dan memiringkan paragraf

Silakan Anda coba dan lihat perbedaannya masing - masing. Anda bisa coba untuk mengganti - ganti mana yang akan Anda ubah format penulisannya. Tapi hasil akhir kira - kira akan seperti ini.

Penting !
 Anda akan menemukan bahwa HTML memiliki tag <i> untuk memiringkan tulisan dan tag <b> untuk menebalkan tulisan, fungsinya sama seperti <em> dan <strong>. Sebetulnya untuk memformat suatu huruf, kata, kalimat atau paragraf tidak disarankan menggunakan tag - tag ini.
Para pakar HTML lebih menyarankan untuk mengubah format penulisan menggunakan CSS. Meski begitu empat tag ini <i><em><b><strong> akan memberi efek yang sama kalau Anda gunakan. Silakan coba saja agar lebih paham

setelah Anda peajari membuat paragraf dengan menggunakan HTML paragraf, di tutorial selanjutnya akan kita bahas tentang HTML style yang berguna untuk menghias elemen HTML.

Belajar HTML Part 4: HTML Heading

Di dalam tutorial HTML Dasar, saya sudah bahas sekilas tentang Heading yang berguna untuk membuat judul pada HTML. Sekarang saya akan bahas tutorial yang sedikit lebih spesifik tentang heading yaitu HTML heading.

HTML Heading

Pada dokumen HTML ada tag yaitu tag heading. Tag heading memiliki urutan dimulai dari <h1> sampai <h6>. Tag ini sering digunakan untuk judul, bisa judul utama, subjudul, bab dan subbab. Semakin besar urutannya maka ukuran hurufnya akan semakin kecil.

Fungsinya apa ?

1. Fungsinya untuk mendefinisikan judul secara khusus.

2. Untuk faktor SEO, penggunaan heading ini untuk menekankan kepada search engine bahwa artikel kita memiliki topik penting yang dibahas dan memudahkan search engine untuk mengenali struktur pada halaman yang kta buat.

3. Untuk mengklasifikasikan judul. Misal judul yang paling utama menggunakan tag <h1>, untuk subjudul menggunakan tag <h2>, untuk bab menggunakan tag <h3> dan seterusnya.

Untuk lebih jelasnya ayo kita lihat penampakannya ya.

Sekarang coba Anda ganti tulisan - tulisan yang diapit oleh tag - tag h diatas dengan judul - judul karangan Anda sendiri. Setelah itu lihat hasilnya di browser.

Anda akan lihat perbedaan di setiap baris judul ya? Mulai tebal dan besar sampai kecil dan tipis. Kalau Anda lihat mulai dari <h1> itu adalah judul utama yang memiliki prioritas paling penting, dalam teknik SEO heading <h1> ini digunakan untuk mempermudah search engine mengenali isi artikel Anda. Nah di HTML, fungsi heading ini secara khusus untuk judul, jadi tolong inget - inget ya.

Penting ! Meskipun tag heading mampu menebalkan dan membesarkan tulisan, gunakan tag ini khusus hanya untuk judul.

Oiya satu hal lagi yang perlu Anda tahu bahwa browser akan menambahkan space putih istilahnya margin atau jarak atas dan bawah secara otomatis sebelum dan setelah heading. Lihat gambar di bawah ini.

Disini Anda sudah pelajari HTML Heading yang digunakan untuk memprioritaskan judul, mengklasifikasikan judul dan membuat search engine lebih mudah mengenali struktur halaman. Kalau ada judul, ada juga paragraf. Nah di HTML kita bisa membuat paragraf yang akan saya bahas di tutorial selanjutnya yaitu HTML paragraf. Silakan disimak.