Style Dan Formating Text Pada HTML | Kita Ngoding HTML #06

Tutorial HTML Dasar.- Pada kesempatan sebelumnya kita telah membahas tentang struktur html, tentang apa itu paragraf, dan tentang heading. Dan sekarang kita akan bahas tentang bagaimana Cara Memberikan Style, Formatting Pada HTML.

Sebenarnya untuk membuat style pada HTML lebih di prioritaskan menggunakan CSS, HTML diibaratkan hanya sebagai kerangka bangunan saja.

Walaupun CSS lebih di peruntukkan untuk menghias sebuah HTML. Akan tetapi, bukan berarti kita tidak bisa menggunakan kode HTML untuk memberikan sebuah Style dan Formating Pada Halaman Website yang kita punya. Jadi Bagaimana Cara Memberikan Style Dan Formating Untuk Website Menggunakan HTML?. Mari simak penjelasan berikut :

Style Dan Formating Text Pada HTML | Kita Ngoding HTML #06 |

Memberikan Styles HTML

Untuk HTML Style ini biasanya digunakan untuk memberikan style ke element seperti warna, huruf, ukuran huruf dan masih banyak lagi.

Mengatur penulisan style pada sebuah element HTML dapat dilakukan dengan atribut style seperti dibawah ini:

<tagname style=”property:velue;”>

Berikut ini adalah contoh penggunaan atribut style di HTML :

Style Background

<!DOCTYPE html>
<html>
<head>
    <title>Style, Formating Dan Lain-Lain</title>
</head>
<!-- Memberikan Warna Background Pada -->
<body style="background-color:powderblue">
    <h1 style="background-color:tomato"> Judul Artikel </h1>
    <p style="background-color:tomato"> Paragraf Artikel </p>
</body>
</html>

Output :

Baca Juga : Pengertian CSS dan Fungsinya

Warna Text, Jenis huruf, Ukuran Text Dan Perataan Text

Contoh syntaxnya sebagai berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Style, Formating Dan Lain-Lain</title>
</head>
<!-- Memberikan Warna Tulisan -->
<body>
<h1 style="color:red; font-family:verdana; 
font-size:300%; text-align:center"> Judul Artikel </h1>
<p style="color:blue; font-family:calibri; 
font-size:150%; text-align:left"> Paragraf Artikel </p>
</body>
</html>

Outputnya :

Untuk penjelasan syntaxnya admin akan rangkum dengan menggunakan tabel, sebagai berikut :

Nama Property	Keterangan
Background-color	Untuk memberikan background
Color	Untuk memberikan warna text
Font-family	Untuk mengatur jenis huruf
Font-size	Untuk mengatur ukuran huruf
Text-align	Untuk mengatur perataan text

Baca Juga : Perseiapan HTML Dasar

Memberikan Format Text HTML

Apa itu pemformatan HTML?

Dalam beberapa kasus kita akan membutuhkan format special text pada artikel website yang kita buat. Terus bagaimana bentuk kode HTML yang harus dibuat?.

Perhatikan tabel dibawah :

Tag	Keterangan
<b>	Memberikan penebalan pada text
<strong>	Untuk memberikan penanda bahwa text tersebut adalah text penting. Hasilnya akan mirip dengan tag<b>.
<i>	Italic Text / huruf miring
<em>	Membuat huruf miring
<mark>	Memberikan tanda
<small>	Mengecilkan text
<del>	Menghapus text / mencoret text
<ins>	Menyisipkan text / seperti underline
<sub>	Subscript text
<sup>	Superscript text

Baca Juga : Tag Image HTML Dasar

Contoh Syntaxnya admin rangkum jadi satu supaya tidak makan waktu dan tempat :

<!DOCTYPE html>
<html>
<head>
    <title>Style, Formating Dan Lain-Lain</title>
</head>
<body>
    <h1>Memberikan Format Penulisan</h1>
    <p><b>Huruf Tebal 'bold'</b><br>
    <strong>Text Penting 'strong'</strong><br>
    <i>Text Mirip 'italic'</i><br>
    <em>Text miring</em><br>
    <mark>Menandai Text</mark><br>
    <small>Mengecilkan Text</small><br>
    <del>Menghapuskan Text</del><br>
    <ins>Menyisipkan text</ins>
    <sub>Subscripts text</sub>
    <sup>Superscripts text</sup>
</p>
</body>
</html>

Outputnya seperti gambar dibawah ini :

Seperti yang admin jelaskan diawal, untuk membuatkan Style Dan Formating Pada Halaman HTML kita harus menggunakan Syntax CSS. Pada blog ini, kita telah membahas tentang CSS jadi kalian tinggal baca saja nanti.

Demikian penjelasan tentang Sytles dan Formating Pada HTML. Untuk bahasan selanjutnya kita akan membahas tentang Link Pada HTML.

Jangan lupa untuk mengunjungi tulisan admin pada halaman yang lainnya juga ya, linknya telah admin siapkan dibawah ini :

Artikel Lainnya :

Tutorial HTML #11 | Form Pada HTML Dasar

Tutorial HTML #10 | List Pada HTML

Tutorial HTML #09 | Tabel Pada HTML Dasar

Tutorial HTML #08 | Tag Image HTML Dasar

Tutorial HTML #07 | Membuat Link HTML

Tutorial HTML #06 | Styles Dan Formating Pada HTML

Tutorial HTML #05 | Tentang Tag Heading

Tutorial HTML #04 | Tentang Tag Paragraf HTML

Tutorial HTML #03 | Pengenalan Struktur HTML