{"id":481,"date":"2026-05-02T13:22:08","date_gmt":"2026-05-02T06:22:08","guid":{"rendered":"https:\/\/www.bisasoftware.id\/2026\/?p=481"},"modified":"2026-05-02T13:22:08","modified_gmt":"2026-05-02T06:22:08","slug":"bab-6-materi-teks-formating","status":"publish","type":"post","link":"https:\/\/www.bisasoftware.id\/2026\/bab-6-materi-teks-formating\/","title":{"rendered":"BAB 6 : MATERI TEKS FORMATING"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">1. Pengertian Text Formatting<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Text Formatting<\/strong> dalam HTML adalah teknik untuk <strong>mengatur tampilan dan penekanan teks<\/strong> agar lebih:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mudah dibaca<\/li>\n\n\n\n<li>Menarik<\/li>\n\n\n\n<li>Informatif<\/li>\n\n\n\n<li>Memiliki penekanan tertentu<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2. Jenis-Jenis Text Formatting<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML menyediakan beberapa tag untuk memformat teks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2.1 Teks Tebal (Bold)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;b&gt;Teks Tebal&lt;\/b&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Hanya mengubah tampilan (visual saja)<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2.2 Teks Penting (Strong)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;strong&gt;Teks Penting&lt;\/strong&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Memiliki makna penting (semantic)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udccc <strong>Perbedaan penting:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;b><\/code> \u2192 hanya tampilan<\/li>\n\n\n\n<li><code>&lt;strong><\/code> \u2192 ada arti (penting untuk SEO &amp; accessibility)<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2.3 Teks Miring (Italic)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;i&gt;Teks Miring&lt;\/i&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2.4 Penekanan (Emphasis)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;em&gt;Teks Ditekankan&lt;\/em&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udccc Sama seperti:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;i><\/code> \u2192 visual<\/li>\n\n\n\n<li><code>&lt;em><\/code> \u2192 makna penekanan<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2.5 Garis Bawah<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;u&gt;Teks Garis Bawah&lt;\/u&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2.6 Highlight (Mark)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;mark&gt;Teks Disorot&lt;\/mark&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2.7 Teks Kecil<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;small&gt;Teks kecil&lt;\/small&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2.8 Coret (Deleted)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;del&gt;Harga lama&lt;\/del&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2.9 Sisipan (Inserted)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ins&gt;Harga baru&lt;\/ins&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2.10 Superscript &amp; Subscript<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>X&lt;sup&gt;2&lt;\/sup&gt;<br>H&lt;sub&gt;2&lt;\/sub&gt;O<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3. Perbedaan Visual vs Semantic (Penting di Industri)<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Visual<\/th><th>Semantic<\/th><\/tr><\/thead><tbody><tr><td><code>&lt;b&gt;<\/code><\/td><td><code>&lt;strong&gt;<\/code><\/td><\/tr><tr><td><code>&lt;i&gt;<\/code><\/td><td><code>&lt;em&gt;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 <strong>Rekomendasi industri:<\/strong><br>Gunakan <strong>semantic<\/strong> karena:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lebih SEO friendly<\/li>\n\n\n\n<li>Lebih baik untuk screen reader<\/li>\n\n\n\n<li>Lebih profesional<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4. Contoh Real (Dunia Nyata)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.1 Contoh Artikel Berita<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Perkembangan Teknologi AI&lt;\/h1&gt;<br><br>&lt;p&gt;<br>Teknologi &lt;strong&gt;Artificial Intelligence&lt;\/strong&gt; berkembang sangat pesat.<br>&lt;\/p&gt;<br><br>&lt;p&gt;<br>Banyak perusahaan mulai menggunakan &lt;em&gt;AI&lt;\/em&gt; untuk meningkatkan efisiensi kerja.<br>&lt;\/p&gt;<br><br>&lt;p&gt;<br>Namun, penggunaan AI harus dilakukan dengan &lt;mark&gt;bijak&lt;\/mark&gt;.<br>&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">4.2 Contoh Toko Online<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2&gt;Sepatu Sneakers&lt;\/h2&gt;<br><br>&lt;p&gt;<br>&lt;del&gt;Rp500.000&lt;\/del&gt; &lt;ins&gt;Rp350.000&lt;\/ins&gt;<br>&lt;\/p&gt;<br><br>&lt;p&gt;<br>Diskon hingga &lt;strong&gt;30%&lt;\/strong&gt; hanya hari ini!<br>&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">4.3 Contoh Materi Pelajaran<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;<br>Rumus luas persegi adalah: L = s&lt;sup&gt;2&lt;\/sup&gt;<br>&lt;\/p&gt;<br><br>&lt;p&gt;<br>Air memiliki rumus kimia: H&lt;sub&gt;2&lt;\/sub&gt;O<br>&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5. Kombinasi Text Formatting<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Tag bisa digabungkan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;<br>&lt;strong&gt;&lt;em&gt;Penting dan ditekankan&lt;\/em&gt;&lt;\/strong&gt;<br>&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">6. Best Practice Industri<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Gunakan semantic tag<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Gunakan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;strong&gt; bukan &lt;b&gt;<br>&lt;em&gt; bukan &lt;i&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Jangan berlebihan<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u274c Salah:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;b&gt;&lt;i&gt;&lt;u&gt;&lt;mark&gt;Terlalu banyak&lt;\/mark&gt;&lt;\/u&gt;&lt;\/i&gt;&lt;\/b&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u2714 Benar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;strong&gt;Penting&lt;\/strong&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Gunakan sesuai konteks<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;mark><\/code> \u2192 highlight penting<\/li>\n\n\n\n<li><code>&lt;del><\/code> \u2192 harga lama<\/li>\n\n\n\n<li><code>&lt;ins><\/code> \u2192 update baru<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">7. Kesalahan Umum Siswa<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u274c 1. Semua teks dibuat bold<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;b&gt;Semua teks&lt;\/b&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Tidak efektif<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u274c 2. Tidak menggunakan semantic<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;b&gt;Penting&lt;\/b&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Harusnya:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;strong&gt;Penting&lt;\/strong&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u274c 3. Over styling<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Terlalu banyak format \u2192 tidak profesional<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">8. Studi Kasus (Mini Project)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Kasus: Halaman Promo Produk<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br>    &lt;title&gt;Promo&lt;\/title&gt;<br>&lt;\/head&gt;<br>&lt;body&gt;<br><br>&lt;h1&gt;Promo Laptop Gaming&lt;\/h1&gt;<br><br>&lt;p&gt;<br>Laptop dengan performa &lt;strong&gt;tinggi&lt;\/strong&gt; untuk gaming dan editing.<br>&lt;\/p&gt;<br><br>&lt;p&gt;<br>Harga:<br>&lt;del&gt;Rp15.000.000&lt;\/del&gt;<br>&lt;ins&gt;Rp12.000.000&lt;\/ins&gt;<br>&lt;\/p&gt;<br><br>&lt;p&gt;<br>Promo berlaku sampai &lt;mark&gt;akhir bulan&lt;\/mark&gt;.<br>&lt;\/p&gt;<br><br>&lt;\/body&gt;<br>&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">9. Latihan Siswa<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Latihan 1<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Buat paragraf dengan:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;strong><\/code><\/li>\n\n\n\n<li><code>&lt;em><\/code><\/li>\n\n\n\n<li><code>&lt;mark><\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Latihan 2<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Buat tampilan:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Harga lama (coret)<\/li>\n\n\n\n<li>Harga baru<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Latihan 3<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Buat materi pelajaran:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gunakan <code>&lt;sup><\/code> dan <code>&lt;sub><\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">10. Mini Project<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Buat halaman:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u201cArtikel Teknologi\u201d<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Isi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Judul<\/li>\n\n\n\n<li>Paragraf<\/li>\n\n\n\n<li>Highlight<\/li>\n\n\n\n<li>Penekanan kata penting<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">11. Kesimpulan<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Text Formatting digunakan untuk:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Memberi penekanan<\/li>\n\n\n\n<li>Memperjelas informasi<\/li>\n\n\n\n<li>Membuat tampilan menarik<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Gunakan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;strong&gt;, &lt;em&gt;, &lt;mark&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Hindari hanya fokus ke tampilan, utamakan <strong>makna (semantic)<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Pengertian Text Formatting Text Formatting dalam HTML adalah teknik untuk mengatur tampilan dan penekanan teks agar lebih: 2. Jenis-Jenis&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[5],"tags":[32],"class_list":["post-481","post","type-post","status-publish","format-standard","hentry","category-tutorial-html","tag-tutorial-html"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=481"}],"version-history":[{"count":1,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/481\/revisions"}],"predecessor-version":[{"id":482,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/481\/revisions\/482"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}