TUTORIAL LENGKAP CARA MENGATUR GAYA HURUF SERTA MENGUBAH UKURAN WARNA DAN JENIS TEKS HTML

Hay sahabat blogger, kali ini saya akan berbagi tentang bagaimana cara formating teks dalam HTML.

Formating teks dalam HTML sangat diperlukan karena akan membuat tampilan teks HTML kita akan lebih terstruktur dan mudah di pahami.

Dalam formating teks HTML kali ini kita akan belajar tentang bagaimana cara membuat paragraf rata kanan,kiri atau tengah, membuat teks miring, tebal, bergaris ataupun berwarna.

Yuk langsung aja kita mulai.

1. Membuat teks tebal (bold).

Seperti telah kita singgung di awal untuk membuat teks tebal kita membutuhkan tag <b> sebagai tag pembuka dan tag </b> sebagai penutup.

Format teks tebal:

<b>Teks Anda </b>

 
Contoh: ketikan kode di bawah ini di notepad dan kemudian simpan dengan nama: tekstebal.html

<b>Teks ini ditulis dengan huruf tebal </b>

Hasil di browser

tebal.jpg

2. Membuat Teks Miring

Untuk membuat teks miring kita membutuhkan tag <i> sebagai tag pembuka, dan tag </i> sebagai tag penutup

Format Teks Miring:

<i>Teks Anda</i>

 
Contoh: ketikan kode di bawah ini di notepad dan kemudian simpan dengan nama: teksmiring.html

<i>Ini adalah teks yang ditulis dengan gaya miring</i>

Hasil di browser:

miring.jpg

3. Membuat teks bergaris bawah

Untuk membuat teks bergaris bawah, gunakan format berikut:

<u>Teks Anda</u>

 
Contoh: ketikan kode di bawah ini di notepad dan kemudian simpan dengan nama: garisbawah.html

<u>Ini adalah teks yang ditulis dengan garis bawah</u>

Hasil di browser:

garisbwh.jpg

4. Membuat teks bergaris tengah

Untuk membuat teks bergaris tengah, gunakan format berikut:

<strike>Teks Anda</strike>

 
Contoh: ketikan kode di bawah ini di notepad dan kemudian simpan dengan nama: garistengah.html

<strike>Ini adalah teks yang ditulis dengan garis tengah</strike>

Hasil di browser:

garistengah.jpg

5. Paragraf rata kanan, kiri atau tengah.

Untuk membuat paragraf secara umum kita hanya membutuhkan tag <p> sebagai pembuka dan tag </p> sebagai tag penutup. Tapi bagaimana jika kita ingin mengatur paragraf tersebut rata kanan, kiri, kanan-kiri atau tengah?.

Nah agar paragraf yang kita buat bisa kita atur rata kanan kiri atau tengah maka kita harus menambahkan/menyisipkan atribut di tag pembuka <p> dengan “align=”nilainya”, penulisannya sebagai berikut:

a. Paragraf rata kanan

Rumus:

<p align=”right”>Paragraf Anda</p>

 
Contoh: ketikan paragraf dibawah ini di notepad!

<p align=”right”>Feryarya.com adalah sebuah website pribadi untuk sharing informasi. Website ini dibangun oleh seorang yang tidak mempunyai basic dalam dunia pemrograman web design. Walaupun begitu tak menghalangi pemilik website untuk belajar perlahan secara otodikdak. Hanya niat, tekad dan semangat kuat dan pantang menyerah yang di milikinya. Jika orang lain bisa kenapa saya tidak? Begitulah semboyannya dalam belajar</p>.

 
Silahkan anda simpan dengan nama: ratakanan.html. Silahkan coba anda buka file tersebut maka akan muncul tampilan seperti ini:

kanan.jpg

b. Paragraf rata kiri

Rumus:

<p align=”left”>Paragraf Anda</p>

 
Contoh: ketikan paragraf dibawah ini di notepad!

<p align=”left”>Feryarya.com adalah sebuah website pribadi untuk sharing informasi. Website ini dibangun oleh seorang yang tidak mempunyai basic dalam dunia pemrograman web design. Walaupun begitu tak menghalangi pemilik website untuk belajar perlahan secara otodikdak. Hanya niat, tekad dan semangat kuat dan pantang menyerah yang di milikinya. Jika orang lain bisa kenapa saya tidak? Begitulah semboyannya dalam belajar </p>

 
Silahkan anda simpan dengan nama: ratakiri.html. Silahkan coba anda buka file tersebut maka akan muncul tampilan seperti ini:

kiri.jpg

c. Paragraf rata kanan-kiri

Rumus:

<p align=”justify”>Paragraf Anda</p>

 
Contoh: ketikan paragraf dibawah ini di notepad!

<p align=”justify”>Feryarya.com adalah sebuah website pribadi untuk sharing informasi. Website ini dibangun oleh seorang yang tidak mempunyai basic dalam dunia pemrograman web design. Walaupun begitu tak menghalangi pemilik website untuk belajar perlahan secara otodikdak. Hanya niat, tekad dan semangat kuat dan pantang menyerah yang di milikinya. Jika orang lain bisa kenapa saya tidak? Begitulah semboyannya dalam belajar </p>

 
Silahkan anda simpan dengan nama: ratakanankiri.html. Silahkan coba anda buka file tersebut maka akan muncul tampilan seperti ini:

kanankiri.jpg

d. Paragraf rata tengah

Rumus:

<p align=”center”>Paragraf Anda</p>

 
Contoh: ketikan paragraf dibawah ini di notepad!

<p align=”center”>Feryarya.com adalah sebuah website pribadi untuk sharing informasi. Website ini dibangun oleh seorang yang tidak mempunyai basic dalam dunia pemrograman web design. Walaupun begitu tak menghalangi pemilik website untuk belajar perlahan secara otodikdak. Hanya niat, tekad dan semangat kuat dan pantang menyerah yang di milikinya. Jika orang lain bisa kenapa saya tidak? Begitulah semboyannya dalam belajar </p>

 
Silahkan anda simpan dengan nama: ratatengah.html. Silahkan coba anda buka file tersebut maka akan muncul tampilan seperti ini:

tengah.jpg

6. Mengatur jenis, ukuran dan warna teks.

a. Mengatur jenis teks
Untuk mengatur jenis teks gunakan rumus berikut:

<font face=”Arial“>Teks Anda</font>

 
Contoh: ketikan teks berikut di notepad dan simpan dengan nama: jenistext.html

<font face=”Arial“>Ini teks yang ditulis dengan huruf Arial</font>

 

Hasil di browser:

jenis.jpg

Nilai atribut “Arial” bisa anda ganti dengan jenis teks yang lain sesuka anda

b.Mengatur ukuran teks

Untuk mengatur ukuran teks gunakan rumus berikut:

<p style=”font-size:20px”>Teks Anda</font>

 
Contoh: ketikan teks berikut di notepad dan simpan dengan nama: ukuranhuruf.html.

<p style=”font-size:20px”>Ini teks yang ditulis dengan huruf berukuran 20 pixel</font>
<p style=”font-size:30px”>Ini teks yang ditulis dengan huruf berukuran 30 pixel</font>

Hasil di browser:

ukuran.jpg

Untuk ukuran huruf dari 20px dan seterusnya bisa diganti dengan ukuruan angka 1, 2, 3 sampai 7.

c. Mengatur Warna teks

Untuk mengatur warna teks gunakan rumus berikut:

<font color=”red”>Teks Anda</font>

 
Contoh: ketikan teks berikut di notepad dan simpan dengan nama: warnahuruf.html

<font color=”red”>teks ini ditulis dengan warna merah</font>

<font color=”blue”>teks ini ditulis dengan warna biru</font>

Hasilnya di browser:

warna.jpg

Oke gan, saya rasa cukup sekian dulu tutorial HTML-nya. Saya rasa cukup lengkap, tapi apabila ada yang kurang mohon komentar dan masukannya. Saya harap artikel ini bisa bermanfaat. Terima kasih..

Tutorial terbaru lainnya:

2 Comments

Tinggalkan Balasan