Complete Collection HTML Codes Beautify Display Blog Posts

Complete,Collection,HTML Codes, Beautify,Display Blog Posts, On this occasion I will share several sets of HTML code to beautify or make blog articles more attractive. The HTML code below is also very suitable for use when creating articles when offline. Besides that, you can also add to your knowledge of HTML, so it can make it easier for you to edit or make Blog Themes even more attractive according to your own wishes. 

To make it easier to understand, I will provide a little explanation in each HTML code below:

HTML Code To Display Images

1. Ordinary 

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

2. With a Certain Size

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

Information :

Width : Image Height

Height : Image Width

3. With a Certain Position

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

Information :

Replace the word in red with the desired position.

Center (Center), Left (Left) and Right (Right).

4. Adding Links to Images

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

HTML Code To Create Paragraphs

There are 2 ways to create paragraphs in blog post articles, namely:

First method, by adding the code <p> in front of the sentence and ending</p>. In this simple way you can make your writing look like this:

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.

The second way, by adding the following HTML code:

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

Result,

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.

The function of "text-indent:25px", is to provide spacing for the first word of each paragraph, you can also increase or decrease the spacing by changing the px number as desired.

Link Link HTML Code With Text

1. Plain Link Link HTML Code

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

2. HTML Link Link Code with Colored Text

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

Description: You can also change the color code with CSS code, Example: " Color : #00ff88 "

3. Link HTML code by opening a new tab

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

HTML Code to Set Font Size

1. XX - Small

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

So, those are some collections of HTML code that can be used to beautify blog post articles. And it can also make it easier for you to create articles offline. 

Hopefully the article entitled The Complete Collection of HTML Codes to Beautify the Appearance of Blog Posts can be useful for all readers. 

That is all and thank you

READ MORE