Huruf miring sering digunakan dalam sebuah web, dimana huruf ini digunakan untuk tujuan tertentu biasanya digunakan untuk menandai kalimat atau kata penting di dalam konten. Untuk menggunkan style atau gaya Font ini kita dapat menggunakan property font-style. property font-style ini memiliki 3 nilai yaitu: normal, italic, dan oblique. Pada dasarnya untuk menggunakan huruf miring kita dapat menggunakan italic atau oblique, kedua value(nilai) dari property font-style ini sama-sam berfungsi untuk memiringkan huruf, namun ada sedikit perbedaan dari kedua value tersebut, dimana font-style: italic akan menggunakan format font terpisah yang bertipe italic, sedangkan font-style: oblique hanya akan memiringkan font yang ada beberapa derajat dan jika teman-teman ingin mengembalikan huruf ke bentuk semula(default) teman-teman dapat menggunakan value normal.
Cara Membuat Huruf Tebal Dengan CSS
Dalam membuat font HTML menjadi tebal, teman-teman dapat menggunakan property font-weight dimana property ini berfungsi menebalkan huruf atau font, property ini memiliki value yang beragam diantaranya: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 dan 900. Semua value diatas memiliki tingkat ketebalan yang berbeda-beda, dimulai dari yang paling kecil 100 dan yang paling besar 900, Jika teman-teman ingin membuat huruf menjadi tebal tanpa mempedulikan tingkat ketebalannya, teman-teman dapat menggunaka font-weight: bold. Dari berbagai macam value diatas teman-teman dapat menggunakan sesuai keinginan dan kebutuhan. Untuk menghapus atau mengembalikan text ke bentuk semula(default) teman-teman dapat menggunakan value normal perintahnya sebagai berikut: font-weight : normal.
Untuk lebih jelas mari kita buat contoh untuk penerapannya, silahkan teman-teman tulis code dibawah ini dan simpan dengan nama file sesuai dengan yang teman-teman inginkan.
<!DOCTYPE html> <html> <head> <title>Point Website</title> <style type="text/css"> .box { width: 500px; margin: auto; } p.satu { font-style: oblique; font-weight: bold; color: blue; } p.dua { font-style: italic; font-weight: 600; color: red; } </style> </head> <body> <div class="box"> <p class="satu">Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p> <p class="dua">consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body> </html>jika teman-teman jalankan maka hasilnya akan seperti berikut ini:sedikit penjelasan dari code diatas, jika teman-teman perhatikan pada code CSS diatas, saya mengunakan value oblique untuk memiringkan huruf pada paragraf pertama, memberikan ketebalan huruf dengan value bold dan memberikan warna pada huruf dengan value blue. Sedangkan pada paragraf kedua saya memiringkan huruf dengan value italic, memberikan ketebalan dengan value 600 dan memberikan warna dengan property color dengan value red. Untuk lebih mengenal semua value dari masing-masing property diatas, silahkan teman-teman ganti value dari code diatas dengan value yang sudah saya jelaskan dari masing-masing property tersebut. Sekian tutorial dari Point Website, semoga dapat membantu teman-teman dalam membuat dan mempelajari website.
Dalam penuliasan HTML sangat sering menggunakan format text didalamanya. baik itu dalam penulisan judul, ataupun isi dari content/halaman dari website sendiri. Berikut beberapa penjelasan dan contoh dari Format Text Pada HTML.
Belajar HTML Format Text Pada HTML
- format text bold (tebal). untuk membuat teks menjadi tebal pada tampilan halaman web menggunakan tag <b> berikut syntax HTML untuk membuat format text tebal :
1
<b>ini text tebal</b>
- format text italic (miring). untuk membuat teks miring pada HTML menggunakan tag <i>, contohnya
1
<i>ini text miring</i>
- format text underline (garis bawah), untuk membuat teks underline/garis bawah pada HTML menggunakan tag <u>
1
<u>ini text underline</u>
berikut format text yang sering digunanakan dalam HTML.
tagdescription<b>format text bold/tebal<i>format text italic/miring<u>format text underline/garis bawah<small>format text kecil<strong>format text yang hampir sama dengan format bold<sub>format subscripted teks<sup>format superscripted teks<ins>format text garis bawah<del>format text dengan garis di tengah<mark>format text yang berwarnaberikut contoh penulisan tag/element format text di yang sudah di pelajari di atas :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>belajar format format text</title>
</head>
<body>
<b>ini format format text tebal</b><br/>
<i>ini format text italic</i><br/>
<u>ini format text underline</u><br/>
<em>ini format text em</em><br/>
<small>ini format text small</small><br/>
<strong>ini format text strong</strong><br/>
<sub>ini format text sub</sub><br/>
<sup>ini format text sup</sup><br/>
<ins>ini format text ins</ins><br/>
<del>ini format text del</del><br/>
<mark>ini format text mark</mark>
</body>
</html>
Belajar HTML Format Text Pada HTML
Tutorial HTML Dasar Lainnya
Belajar HTML Part 1 : Pengertian HTML
Belajar HTML Part 2 : Memilih Text Editor
Belajar HTML Part 3 : Mengenal Tag, Element, Atribut HTML
Belajar HTML Part 4 : Heading Pada HTML
Belajar HTML Part 5 : Format Text Pada HTML
Belajar HTML Part 6 : Membuat Paragraf Pada HTML
Belajar HTML Part 7 : Membuat Table Pada HTML
Belajar HTML Part 8 : Membuat Hyperlink Pada HTML
Belajar HTML Part 9 : Membuat List Pada HTML
Belajar HTML Part 10 : Membuat Format Code Pada HTML
Belajar HTML Part 11 : Membuat Form Pada HTML
Belajar HTML Part 12 : Atribut Form Pada HTML
Belajar HTML Part 13 : Membuat Symbol Pada HTML
Belajar HTML Part 14 :Menampilkan Gambar Pada HTML
Belajar HTML Part 15 : Tag Iframe Pada HTML
Belajar HTML Part 16 : Menghubungkan HTML dengan CSS
Belajar HTML Part 17 : Mengenal Class dan Id Pada HTML
Incoming search terms:
- //www malasngoding com/belajar-html-format-text-pada-html/
- format teks html
- format html
- format teks pada html
- format teks dalam html
- format text html
- cara membuat format html
- tag forma
- format text pada html
- kode text html
- SHARE :
Muzanni
Algorithms Learner, future lecturer and Happy to sharing about knowledge
- Author's profile
- All posts by Muzanni
Tags: Belajar HTML Format Text Pada HTML, format text html, html dasar, membuat bold huruf tebal di html, membuat tulisan kecil fi html, membuat tulisan miring italic di html, penggunaan format text html, text html, tutorial format text html
Tutorial HTML Dasar
- #1. Pengertian HTML
- #2. Memilih Text Editor
- #3. Mengenal Tag, Element dan Atribut
- #4. Mengenal Heading HTML
- #5. Format Text HTML
- #6. Paragraf HTML
- #7. Membuat Tabel HTML
- #8. Link / Hyperlink HTML
- #9. List HTML
- #10. Format Code
- #11. Form HTML
- #12. Atribut Form HTML
- #13. Simbol HTML
- #14. Menampilkan Gambar HTML
- #15. Iframe HTML
- #16. Menghubungkan HTML dan CSS
- #17. Mengenal Class dan Id
- #18. Baris Baru (Tag BR)
Tutorial HTML Lanjutan
- #1. Favicon
- #2. Pemutar Video HTML
- #3. Tutorial HTML Lainnya
Produk
- Source Code Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200,000
- Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website Rp 200,000
- Source Code Toko Sport PHP dan MySQLi Rp 200,000
- Source Code Sistem Informasi Kuesioner Berbasis Web Rp 200,000
Tutorial Terbaru
- Tutorial Python # 13 : Jenis Operator Pada Python September 24, 2022
- Membuat Laporan PDF Dengan PHP dan MySQLi September 3, 2022
- Export Data ke Excel Dengan PHP dan MySQLi August 23, 2022
- Membuat Select Option Dinamis Menggunakan Ajax August 17, 2022
- Membuat QR Code Dengan PHP August 3, 2022
Toko Kami
SOCIAL
Malas Ngoding
TUTORIAL MENARIK LAINNYA
Selamat datang kembali di website malasngoding.com. Pada materi tutorial ini kita akan belajar tentang cara menampilkan file PDF di HTML di Website. Seperti yang kita ketahui, ... Diki Alfarabi HadiMenampilkan PDF Di HTML Dengan Mudah
12 August 2020
Membuat Game Snake Dengan HTML5 dan JQuery – Selamat datang di tutorial cara membuat game dengan html5. seperti pada judul tutorial ini, kita akan membahas ... Diki Alfarabi HadiMembuat Game Snake Dengan HTML5 dan JQuery
14 May 2017
Membuat Baris Baru atau Enter di HTML – hai teman-teman semuanya apakabar ? assalamualaikum.. kembali lagi di www.malasngoding.com. situs penyedia tutorial-tutorial seputar pemrograman yang berkualitas ... Diki Alfarabi HadiMembuat Baris Baru atau Enter di HTML
10 April 2017
Selamat datang kembali di www.malasngoding.com. situs yang fokus membahas tentang tutorial pemograman web, mobile dan desktop. Sesuai dengan judul “Cara Disable Resize Form Textarea Dengan ...Cara Disable Resize Form Textarea Dengan CSS
31 March 2017Apa perintah HTML untuk membuat teks atau tulisan bergaris bawah?
Apa itu text formatting text pada HTML?
Bagaimana cara membuat teks tebal HTML?
Apa fungsi I pada HTML?