HTML : Style pada HTML

fajaryusuf.com

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 fajaryusuf.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

<!DOCTYPE html>
<html>
<body style="background-color:hotpink;">
 
<h1>Belajar HTML di fajaryusuf.com</h1>
<p>Dipandu oleh fajaryusuf</p>
 
</body>
</html>

Silakan Anda coba di Notepad atau di HTML Editor FajarYusuf.Com, maka background tampilan akan berubah menjadi merah muda. Bisa gita ya? hehe

HTML : Style pada HTML

HTML Warna Text

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

<!DOCTYPE html>
<html>
<body style="background-color:hotpink;">
 
<h1 style="color:green;">Belajar HTML di fajaryusuf.com</h1>
<p>Dipandu oleh Fajaryusuf</p>
 
</body>
</html>

Silakan Anda coba di Notepad atau di HTML Editor FajarYusuf.Com. Anda juga bisa mengganti warna pada tulisan "Dipandu oleh Fajaryusuf" dengan warna lain terserah Anda.

HTML : Style pada HTML

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.

<!DOCTYPE html>
<html>
<body style="background-color:hotpink;">
 
<h1 style="font-family:verdana;">Belajar HTML di fajaryusuf.com</h1>
<p style="font-family:courier;">Dipandu oleh fajaryusuf</p>
 
</body>
</html>

Silakan Anda coba di Notepad atau di HTML Editor FajarYusuf.Com dan lihat perbedaan font pada kedua text tersebut.


fajaryusuf.com

Lalu bagaiaman cara mengganti font dan warna text secara bersamaan?



Anda bisa lakukan dengan cara seperti ini



<style="font-family:courier;color:red">Dipandu oleh fajaryusuf</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.


<!DOCTYPE html>
<html>
<body style="background-color:hotpink;">
 
<h1 style="font-size:30px;">Belajar HTML di fajaryusuf.com</h1>
<p style="font-size:20px;">Dipandu oleh fajaryusuf</p>
<p style="font-size:5px;">Dipandu oleh fajaryusuf</p>
 
</body>
</html>

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


HTML : Style pada HTML

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 leftcenterright dan justify.

<!DOCTYPE html>
<html>
<body style="background-color:hotpink;">
 
<h1 style="text-alignt:center;">Belajar HTML di fajaryusuf.com</h1>
<p style="text-alignt:left;">Dipandu oleh fajaryusuf</p>
<p style="text-alignt:right;">Dipandu oleh fajaryusuf</p>
 
</body>
</html>
Silakan Anda coba di Notepad atau di HTML Editor FajarYusuf.Com 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 selanjutnya kita akan bahas HTML Quotation berupa tag khusus untuk menangani kutipan - kutipan.

Berlangganan update artikel terbaru via email:

0 Response to "HTML : Style pada HTML "

TENTANG SITUS

SITUS INI ADALAH SITUS INFO GAME TERBARU DAN JUGA SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel