Kumpulan Kode HTML Terlengkap Untuk Mempercantik Tampilan Postingan Blog

Dalam kesempatan kali ini saya akan membagikan beberapa kumpulan kode HTML untuk mempercantik atau membuat Artikel blog lebih menarik. Kode HTML dibawah ini pun sangat cocok dipakai ketika membuat Artikel saat Offline. Selain itu anda juga bisa menambah ilmu anda tentang HTML, jadi bisa mempermudah anda dalam mengedit atau membuat Tema Blog menjadi lebih menarik lagi sesuai keinginan sendiri.

Agar lebih mudah dipahami, Saya akan memberikan penjelasannya sedikit disetiap kode HTML dibawah ini :

Kode HTML Untuk Menampilkan Gambar
1. Biasa

<img src=" Url / Link Gambar "/>

2. Dengan Ukuran Tertentu

<img src=" Url / Link Gambar "width="100" height="100"/>

Keterangan :
Width : Tinggi Gambar
Height : Lebar Gambar

3. Dengan Posisi Tertentu

<div style="text-align: center;"> <img src=" Url / Link Gambar "width="100" height="100"/> </div>

Keterangan :
Ganti kata yang berwarna merah, Dengan posisi yang di inginkan.
Center (Tengah), Left (Kiri) dan Right (Kanan).

4. Menambah Link Pada Gambar

<a href=" Url / Link Tujuan "><img src =" Url / Link Gambar"/></a>

Kode HTML Untuk Membuat Paragraft
Ada 2 cara dalam membuat Paragraft di Artikel Postingan Blog, Yaitu :
Cara Pertama, Dengan menambahkan kode <p> didepan kalimat dan diakhiri </p>. Dengan cara sederhana ini dapat membuat tulisan anda akan seperti ini :

HTML adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.

Cara Kedua, Dengan menambahkan Kode HTML berikut ini :

<div style="text-indent:25px;"> Teks Anda </div>

Hasilnya,

HTML adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML.

Fungsi dari "text-indent:25px", ialah untuk memberikan jarak pada kata pertama pada setiap paragraft, Anda juga dapat menambah atau mengurangi jaraknya dengan mengubah angka px nya sesuai keinginan.


Kode HTML Tautan Link Dengan Teks
1. Kode HTML Tautan Link Biasa

<a href=" Url / Link "> Teks Anda</a>

2. Kode HTML Tautan Link dengan Teks Yang Berwarna

<a href=" Url / Link "><span style="color: blue;"> Teks Anda </span></a>

Keterangan : Anda juga bisa mengubah kode warnanya dengan kode CSS, Contoh : " Color : #00ff88 "

3. Kode HTML Tautan Link Dengan Membuka Tab Baru

<a href="Url / Link" target"_blank"> Teks Anda </a>

Kode HTML untuk Mengatur Ukuran Font
1. XX - Kecil

<span style="font-size: xx-small;"> Teks Anda </span>

2. Kecil (Sedang)

<span style="font-size: x-small;"> Teks Anda </span>

3. Kecil (Normal)

<span style="font-size: small;"> Teks Anda </span>

4. Besar (Sedang)

<span style="font-size: large;"> Teks Anda </span>

5. X - Besar

<span style="font-size: x-large;"> Teks Anda </span>

6. Ukuran yang bisa Diatus Sendiri

<span style="font-size: 10px;"> Teks Anda </span>

Keterangan :
Ubah angka sebelum PX sesuai keinginan, Semakin Besar Angka nya, semakin besar pula Font, Dan begitu juga sebaliknya.


Kode HTML untuk Mengatur Jenis Font
1. Jenis Font Arial

<span style="font-family: Arial, Helvetica, sans-serif;">Teks Anda</span>

2. Jenis Font Courier

<span style="font-family: &quot;Courier New&quot;, Courier, monospace;">Teks Anda</span>

3. Jenis Font Georgia

<span style="font-family: Georgia, &quot;Times New Roman&quot;, serif;">Teks Anda</span>

4. Jenis Font Helvetica

<span style="font-family: &quot;Helvetica Neue&quot;, Arial, Helvetica, sans-serif;">Teks Anda</span>

5. Jenis Font Times

<span style="font-family: Times, &quot;Times New Roman&quot;, serif;">Teks Anda</span>

6. Jenis Font Trebuchet

<span style="font-family: &quot;Trebuchet MS&quot;, sans-serif;">Teks Anda</span>

7. Jenis Font Verdana

<span style="font-family: Verdana, sans-serif;">Teks Anda</span>

Kode HTML untuk Mengubah Warna Font / Teks

<span style="color: blue">Teks Anda</span>

Keterangan :
Kode Warnanya bisa anda pakai dengan kata warna dalam bahasa inggris atau juga bisa memakai kode warna css.


Kode HTML untuk Mengatur letak Paragraft
1. Tengah

<center>teks anda</center>
Atau,
<div style="text-align: center;"> Teks Anda </div>

2. Rata di Kanan

<div style="text-align: right;"> Teks Anda </div>

3. Rata di Kiri

<div style="text-align: left;"> Teks Anda </div>

4. Rata Kanan dan Kiri

<div style="text-align: justify;"> Teks Anda </div>

Kode HTML untuk Membuat List / Daftar
1. List Bullet

<ul>
<li>Teks Anda 1</li>
<li>Teks Anda 2</li>
<li>Teks Anda 3</li>
</ul>

2. List bullet Lingkaran

<ul type="Circle">
<li>Teks Anda 1</li>
<li>Teks Anda 2</li>
<li>Teks Anda 3</li>
</ul>

3. List bullet Kotak

<ul type="Square">
<li>Teks Anda 1</li>
<li>Teks Anda 2</li>
<li>Teks Anda 3</li>
</ul>

4. List Dengan Nomor

<ol>
<li>Teks Anda 1</li>
<li>Teks Anda 2</li>
<li>Teks Anda 3</li>
</ol>

5. List Dengan Huruf (Besar)

<ol type="A">
<li>Teks Anda 1</li>
<li>Teks Anda 2</li>
<li>Teks Anda 3</li>
</ol>

6. List Dengan Huruf (Kecil)

<ol type="a">
<li>Teks Anda 1</li>
<li>Teks Anda 2</li>
<li>Teks Anda 3</li>
</ol>

7. List dengan Angka Romawi (Besar)

<ol type="I">
<li>Teks Anda 1</li>
<li>Teks Anda 2</li>
<li>Teks Anda 3</li>
</ol>

8. List dengan Angka Romawi (Kecil)

<ol type="i">
<li>Teks Anda 1</li>
<li>Teks Anda 2</li>
<li>Teks Anda 3</li>
</ol>

Kode HTML Lainnya

<br/> : Baris Baru

<b> Teks Tebal </b>

<i> Teks Miring </i>

<s> Teks Di Coret </s>

<u> Teks Garis Bawah </u>

<tt> Teks Mesin Ketik </tt>

_{Teks _sub}

^{Teks ^sup}

<mark> Penanda Tulisan </mark>

<span style="background-color: #ffff00;"> Teks Stabilo </span>

Nah, itulah beberapa kumpulan kode HTML yang bisa digunakan untuk mempercantik Artikel postingan Blog. Dan bisa juga mempermudah anda dalam membuat Artikel secara Offline.
Semoga Artikel yang berjudul Kumpulan Kode HTML Terlengkap Untuk Mempercantik Tampilan Postingan Blog ini dapat bermanfaat bagi pembaca semua.
Sekian dan Terima Kasih

Share :