{"id":2934,"date":"2019-09-11T12:16:30","date_gmt":"2019-09-11T12:16:30","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=2934"},"modified":"2023-02-12T03:08:35","modified_gmt":"2023-02-12T03:08:35","slug":"tutorial-html-05-format-text-pada-html","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/tutorial-html-05-format-text-pada-html\/","title":{"rendered":"Tutorial HTML #05 &#8211; Format Text Pada HTML"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; 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.<\/p>\n<h3>Belajar HTML Format Text Pada HTML<\/h3>\n<p>Format text bold (tebal) untuk membuat teks menjadi tebal pada tampilan halaman web menggunakan tag &lt;b&gt; berikut syntax HTML untuk membuat format text tebal<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;b&gt;ini text tebal&lt;\/b&gt;<\/pre>\n<p>Format text italic (miring) untuk membuat teks miring pada HTML menggunakan tag &lt;i&gt; contohnya<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;i&gt;ini text miring&lt;\/i&gt;<\/pre>\n<p>Format text underline (garis bawah) untuk membuat teks underline\/garis bawah pada HTML menggunakan tag &lt;u&gt;<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;u&gt;ini text underline&lt;\/u&gt;<\/pre>\n<p>Berikut format text yang sering digunanakan dalam HTML.<\/p>\n<table width=\"498\">\n<tbody>\n<tr>\n<td><strong>tag<\/strong><\/td>\n<td><strong>description<\/strong><\/td>\n<\/tr>\n<tr>\n<td>&lt;b&gt;<\/td>\n<td>format text bold\/tebal<\/td>\n<\/tr>\n<tr>\n<td>&lt;i&gt;<\/td>\n<td>format text italic\/miring<\/td>\n<\/tr>\n<tr>\n<td>&lt;u&gt;<\/td>\n<td>format text\u00a0underline\/garis bawah<\/td>\n<\/tr>\n<tr>\n<td>&lt;small&gt;<\/td>\n<td>format text kecil<\/td>\n<\/tr>\n<tr>\n<td>&lt;strong&gt;<\/td>\n<td>format text yang hampir sama dengan format bold<\/td>\n<\/tr>\n<tr>\n<td>&lt;sub&gt;<\/td>\n<td><span id=\"ouHighlight__0_6TO0_13\">format<\/span><span id=\"noHighlight_0.6552861076779664\">\u00a0<\/span><span id=\"ouHighlight__8_18TO15_25\">subscripted<\/span><span id=\"noHighlight_0.8544427719898522\">\u00a0<\/span><span id=\"ouHighlight__20_23TO27_30\" class=\"\">teks<\/span><\/td>\n<\/tr>\n<tr>\n<td>&lt;sup&gt;<\/td>\n<td><span id=\"ouHighlight__0_6TO0_13\" class=\"\">format<\/span><span id=\"noHighlight_0.23039073986001313\">\u00a0<\/span><span id=\"ouHighlight__8_20TO15_27\" class=\"\">superscripted<\/span><span id=\"noHighlight_0.823857041541487\">\u00a0<\/span><span id=\"ouHighlight__22_25TO29_32\">teks<\/span><\/td>\n<\/tr>\n<tr>\n<td>&lt;ins&gt;<\/td>\n<td><span class=\"\">format text garis bawah<\/span><\/td>\n<\/tr>\n<tr>\n<td>&lt;del&gt;<\/td>\n<td>format text dengan garis di tengah<\/td>\n<\/tr>\n<tr>\n<td>&lt;mark&gt;<\/td>\n<td>format text yang berwarna<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Berikut contoh penulisan tag\/element format text di yang sudah dipelajari di atas :<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;title&gt;belajar format format text&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;b&gt;ini format format text tebal&lt;\/b&gt;&lt;br\/&gt;\r\n    &lt;i&gt;ini format text italic&lt;\/i&gt;&lt;br\/&gt;\r\n    &lt;u&gt;ini format text underline&lt;\/u&gt;&lt;br\/&gt;\r\n    &lt;em&gt;ini format text em&lt;\/em&gt;&lt;br\/&gt;\r\n    &lt;small&gt;ini format text small&lt;\/small&gt;&lt;br\/&gt;\r\n    &lt;strong&gt;ini format text strong&lt;\/strong&gt;&lt;br\/&gt;\r\n    &lt;sub&gt;ini format text sub&lt;\/sub&gt;&lt;br\/&gt;\r\n    &lt;sup&gt;ini format text sup&lt;\/sup&gt;&lt;br\/&gt;\r\n    &lt;ins&gt;ini format text ins&lt;\/ins&gt;&lt;br\/&gt;\r\n    &lt;del&gt;ini format text del&lt;\/del&gt;&lt;br\/&gt;\r\n    &lt;mark&gt;ini format text mark&lt;\/mark&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><iframe style=\"width: 100%;\" title=\"Format Text Pada HTML\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/eYMLzdJ?default-tab=result&amp;theme-id=dark\" height=\"350\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/eYMLzdJ\"><br \/>\nFormat Text Pada HTML<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Dalam penuliasan HTML sangat sering menggunakan format text didalamanya. <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/tutorial-html-05-format-text-pada-html\/\" title=\"Tutorial HTML #05 &#8211; Format Text Pada HTML\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3272,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[225,233,103,227],"newstopic":[],"class_list":{"0":"post-2934","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-belajar-html","10":"tag-format-text-pada-html","11":"tag-web-design","12":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=2934"}],"version-history":[{"count":3,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2934\/revisions"}],"predecessor-version":[{"id":2937,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2934\/revisions\/2937"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3272"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=2934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=2934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=2934"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=2934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}