Belajar HTML Part 8 – Styling di Halaman HTML

CoretanKode – Selamat datang kembali di blog CoretanKode dan pada kesempatan kali ini kita masih akan Belajar HTML dan tema yang kita bahas kali ini adalah tentang bagaimana cara membuat styling menggunakan atribut STYLE di HTML.

Artikel Menarik Lainnya :

Nah sekarang sudah mulai menarik nih pembahasan-nya karena kita sudah akan mulai membuat halaman web HTML kita mempunyai gaya sehingga dapat terlihat lebih atraktif lagi.

Styling yang admin bahas kali ini belum masuk secara penuh ke materi CSS yah kita hanya akan menggunakan atribut Style di beberapa elemen contohnya di elemen paragraf pada dokumen HTML yang telah kalian buat.

Isi tampilkan

Atribut Style pada Elemen HTML

Singkat-nya atribut style yang dapat diimplementasikan kepada elemen-elemen yang ada di HTML ini merupakan sebuah atribut pengatur gaya sebuah elemen, bagaimana sebuah elemen HTML akan ditampilkan yah di setting menggunakan atribut style ini.

Contoh aturan penggunaan atribut Style dapat kalian lihat dibawah ini :

<namatag style=”property:value;”>

Dimana properti merupakan propertI di CSS, sementara Value adalah Value dari CSS.

Mengubah Warna Background HTML

Nah sekarang kita akan mencoba menggunakan atribut style ini untuk mengubah warna background dari sebuah halaman web HTML nih. Berikut ini adalah contoh sintaks untuk mengubah warna background halaman web HTML :

<body style=”background-color:powderblue;”>

<h1>CoretanKode – We Code We Good</h1>

<p>Belajar HTML Lengkap dari Nol.</p>

</body>

Kalian bisa mengganti powderblue dengan warna yang kalian inginkan semisal red untuk warna merah dan blue untuk warna biru, gunakan nama warna versi Bahasa English yah.

READ : Cara Membuat dan Tips Menggunakan PBN untuk SEO

Kalian juga bisa mengubah warna background dari elemen lain seperti paragraf, sehingga membuat efek seakan-akan ada teks yang diberi tanda menggunakan stabilo menggunakan properti background-color ini.

Mengubah Warna Teks di HTML

Bila kalian hanya ingin mengubah warna dari teks yang ada pada halaman web HTML kalian maka kalian hanya perlu menggunakan atribut style lalu menggunakan properti color dan value-nya menggunakan nama warna yang kalian inginkan dalam Bahasa English yah.

Contohnya dapat kalian lihat dibawah ini :

<h1 style=”color:blue;”>CoretanKode – We Code We Good</h1>

<p style=”color:red;”>Warna merah teks-nya sementara judul warna biru.</p>

Mengubah Font Tulisan di HTML

Selanjut-nya apabila kalian ingin mengubah font yang kalian gunakan pada halaman web HTML kalian, kalian bisa melakukannya dengan cara menggunakan atribut style lalu menggunakan properti css font-family lalu isikan value-nya.

Contoh kode pengimplementasian property font-family di HTML seperti berikut :

<h1 style=”font-family:verdana;”>CoretanKode – We Code We Good</h1>

<p style=”font-family:courier;”>Font family untuk ubah teks.</p>

Harus di-ingat bila kalian menggunakan font yang tidak terinstal pada komputer user atau orang yang melihat halaman web anda, maka font halaman web kalian otomatis menggunakan font standar saja.

Mengubah Ukuran Tulisan di HTML

Dalam Belajar HTML kalian juga harus mengenal tentang pengaturan ukuran tulisan pada sebuah halaman website. Kalian bisa dengan sederhana saja mengubah ukuran tulisan di HTML menjadi lebih besar atau mengecilkan dengan menggunakan properti font-size.

Properti Font-Size ini-lah yang menjadi pendefinisi dari sebuah ukuran teks pada sebuah elemen di HTML, berikut ini adalah contoh kode penggunaan-nya :

<h1 style=”font-size:300%;”>CoretanKode – We Code We Good</h1>

<p style=”font-size:160%;”>Jadi kita ubah ukuran tulisan nih.</p>

Kalian dapat menggunakan persen atau pixels pada property Font-Size ini, so have fun nyetting-nya.

READ : Belajar HTML Part 5 - Atribut di HTML [Lengkap]

Mengatur Align Tulisan di HTML

Selanjut-nya yang menjadi hal wajib di pelajari pada materi belajar HTML lengkap ini adalah mengetahui cara mengatur align tulisan di HTML. Align atau perataan teks dapat kalian lakukan menggunakan properti text-align di dalam atribut style.

Properti text-align ini dapat memudahkan kalian apabila kalian ingin membuat sebuah tulisan pada halaman web kalian menjadi rata kanan, rata kiri, rata tengah atau justify sekalipun.

Lalu, berikut ini adalah contoh kode cara menggunakan properti text-align ini :

<h1 style=”text-align:center;”>CoretanKode – We Code We Good</h1>

<p style=”text-align:center;”>Tulisan di taruh tengan.</p>

Rangkuman dari Part 8 Ini

Jadi pada Part 8 dari seri Belajar HTML lengkap dari Nol dan berbahasa Indonesia ini, kita sudah belajar hingga bagaimana membuat sebuah halaman HTML dengan lebih attractive alias menarik lagi.

Kita sudah mengenal cara penggunaan dan pembuatan paragraf yang baik dan bahkan kita sudah berhasil memberikan styling pada elemen HTML yang telah kita buat. Nah apabila kalian ingin lanjut silahkan lanjut di Part 9 dibawah ini :

Bila kalian ingin membaca part sebelumnya bisa langsung mengklik tombol dibawah ini :

Nah jadi itulah yang dapat admin sampaikan pada part ke 8 dari seri Belajar HTML ini, semoga bermanfaat dan terima kasih telah berkunjung, Sampai jumpa di Part selanjutnya dan Assalamualaikum Warahmatullahi Wabarakatu.

Originally posted 2021-11-12 21:40:55.