{"id":2940,"date":"2019-09-15T12:37:21","date_gmt":"2019-09-15T12:37:21","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=2940"},"modified":"2023-02-12T03:08:31","modified_gmt":"2023-02-12T03:08:31","slug":"tutorial-html-06-paragraf-pada-html","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/tutorial-html-06-paragraf-pada-html\/","title":{"rendered":"Tutorial HTML #06 &#8211; Paragraf 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; Untuk memahami pembuatan\u00a0<strong>paragraf<\/strong> &lt;p&gt; pada HTML, diharapkan anda terlebih dahulu sudah memahami penulisan dan apa itu tag, element, atribut (<strong><em><a href=\"https:\/\/rengga.dev\/blog\/tutorial-html-03-mengenal-tag-element-atribut-html\/\" target=\"_blank\" rel=\"noopener\">bisa anda pelajari disini<\/a><\/em><\/strong>). paragraf disini merupakan suatu tag untuk membuat suatu elemen dalam penulisan HTML. dalam paragraf itu sendiri terdapat 3 element\/tag lain yang bisa dikombinasikan langsung dengan tag paragraf &lt;p&gt;. element tag tersebut yaitu :<\/p>\n<ol>\n<li>Paragraf rata kiri menggunakan align left<\/li>\n<li>Paragraf rata kanan menggunakan align right<\/li>\n<li>Paragraf rata tengah menggunakan align center<\/li>\n<li>Paragraf rata kiri kanan menggunaan align justify<\/li>\n<\/ol>\n<h3>Penulisan Paragraf &lt;p&gt;<\/h3>\n<p>HTML mengunakan tag kusus untuk membuat paragraf yaitu &lt;p&gt;. perhatikan contoh berikut :<\/p>\n<div id=\"crayon-62f4f159e1dc6107901619\" class=\"crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate\" data-settings=\" minimize scroll-mouseover\">\n<div class=\"crayon-plain-wrap\">\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 membuat paragraf&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\nini adalah paragraf pertama\r\nini adalah paragraf kedua\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<\/div>\n<\/div>\n<div id=\"attachment_311\" class=\"wp-caption aligncenter\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-311 size-full\" src=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2016\/01\/paragraf.png\" sizes=\"auto, (max-width: 621px) 100vw, 621px\" srcset=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2016\/01\/paragraf.png 621w, https:\/\/www.malasngoding.com\/wp-content\/uploads\/2016\/01\/paragraf-600x346.png 600w, https:\/\/www.malasngoding.com\/wp-content\/uploads\/2016\/01\/paragraf-300x173.png 300w\" alt=\"Belajar HTML Part 6: Membuat Paragraf Pada HTML\" width=\"621\" height=\"358\" aria-describedby=\"caption-attachment-311\" \/><\/p>\n<\/div>\n<p>Dari contoh di atas itu termasuk penulisan paragraf yang kurang tepat, di karenakan paragraf satu dan paragraf kedua tidak di pisahkan melainkan di satukan. dalam HTML enter dan spasi itu di abaikan.<\/p>\n<p>untuk penulisan yang lebih tepatnya, paragraf menggunakan &lt;p&gt; berikut inplementasi &lt;p&gt; \u00a0dalam dokumen HTML :<\/p>\n<div id=\"crayon-62f4f159e1dcf479986429\" class=\"crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate\" data-settings=\" minimize scroll-mouseover\">\n<div class=\"crayon-toolbar\" data-settings=\" show\">\n<div class=\"crayon-tools\">\n<div class=\"crayon-button crayon-nums-button crayon-pressed\" title=\"Toggle Line Numbers\">\n<div class=\"crayon-button-icon\">\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 membuat paragraf&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;p&gt;ini merupakan penulisan paragraf pertama dalam dokument HTML&lt;\/p&gt;\r\n&lt;p&gt;ini merupakan penulisan paragraf kedua dalam dokument HTML&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"attachment_313\" class=\"wp-caption aligncenter\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-313 size-full\" src=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2016\/01\/paragraf-2.png\" sizes=\"auto, (max-width: 551px) 100vw, 551px\" srcset=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2016\/01\/paragraf-2.png 551w, https:\/\/www.malasngoding.com\/wp-content\/uploads\/2016\/01\/paragraf-2-300x176.png 300w\" alt=\"Belajar HTML Part 6: Membuat Paragraf Pada HTML\" width=\"551\" height=\"324\" aria-describedby=\"caption-attachment-313\" \/>Dari contoh di atas dapat anda lihat bahwa penulisan paragraf pertama dan paragraf kedua di pisahkan. untuk memisahkan antara paragraf satu dan dua ini menggunakana &lt;p&gt;.<\/p>\n<\/div>\n<h3>Jenis Paragraf<\/h3>\n<p>Paragraf rata kiri<\/p>\n<div class=\"content-iklan\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p align=\"left\"&gt;1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML&lt;\/p&gt;<\/pre>\n<\/div>\n<p>Paragraf rata kanan<\/p>\n<div id=\"crayon-62f4f159e1dd4499748852\" class=\"crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate\" data-settings=\" minimize scroll-mouseover\">\n<div class=\"crayon-toolbar\" data-settings=\" show\">\n<div class=\"crayon-tools\">\n<div class=\"crayon-button crayon-nums-button crayon-pressed\" title=\"Toggle Line Numbers\">\n<div class=\"crayon-button-icon\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p align=\"right\"&gt;2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML&lt;\/p&gt;<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Paragraf rata tengah<\/p>\n<div id=\"crayon-62f4f159e1dd5624790062\" class=\"crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate\" data-settings=\" minimize scroll-mouseover\">\n<div class=\"crayon-toolbar\" data-settings=\" show\">\n<div class=\"crayon-tools\">\n<div class=\"crayon-button crayon-nums-button crayon-pressed\" title=\"Toggle Line Numbers\">\n<div class=\"crayon-button-icon\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p align=\"center\"&gt;3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML&lt;\/p&gt;<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Paragraf rata kiri kanan<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;p align=\"justivy\"&gt;4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML&lt;\/p&gt;<\/pre>\n<p>Berikut contoh lengkapnya :<\/p>\n<div id=\"crayon-62f4f159e1dd7258436565\" class=\"crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate\" data-settings=\" minimize scroll-mouseover\">\n<div class=\"crayon-toolbar\" data-settings=\" show\">\n<div class=\"crayon-tools\">\n<div class=\"crayon-button crayon-nums-button crayon-pressed\" title=\"Toggle Line Numbers\">\n<div class=\"crayon-button-icon\">\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 membuat paragraf&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;p align=\"left\"&gt;1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML&lt;\/p&gt;\r\n&lt;p align=\"right\"&gt;2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML&lt;\/p&gt;\r\n&lt;p align=\"center\"&gt;3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML&lt;\/p&gt;\r\n&lt;p align=\"justivy\"&gt;4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><iframe style=\"width: 100%;\" title=\"Tutorial HTML - Jenis Paragraf\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/NWYLRPx?default-tab=result&amp;theme-id=dark\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/NWYLRPx\"><br \/>\nTutorial HTML &#8211; Jenis Paragraf<\/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<h3>Penulisan Paragraf &lt;br&gt;<\/h3>\n<p>Cara lain yang bisa anda gunakan dalam penulisan paragraf dalam dokumen HTML adalah menggunakan tag &lt;br&gt; atau dikenal dengan <em>break<\/em>. perhatikan contoh berikut :<\/p>\n<div id=\"crayon-62f4f159e1dd9572730371\" class=\"crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate\" data-settings=\" minimize scroll-mouseover\">\n<div class=\"crayon-toolbar\" data-settings=\" show\">\n<div class=\"crayon-tools\">\n<div class=\"crayon-button crayon-nums-button crayon-pressed\" title=\"Toggle Line Numbers\">\n<div class=\"crayon-button-icon\">\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 membuat paragraf&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\nini merupakan penulisan paragrah pertama &lt;\/br&gt;\r\nini merupakan penulisan paragrah kedua\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-320 size-full aligncenter\" title=\"Belajar HTML Membuat Paragraf Pada HTML\" src=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2016\/01\/paragraf-4.png\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" srcset=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2016\/01\/paragraf-4.png 532w, https:\/\/www.malasngoding.com\/wp-content\/uploads\/2016\/01\/paragraf-4-300x182.png 300w\" alt=\"Belajar HTML Part 6: Membuat Paragraf Pada HTML\" width=\"532\" height=\"322\" aria-describedby=\"caption-attachment-320\" \/><\/p>\n<p>Dari contoh di atas bisa anda lihat penggunaan &lt;br\/&gt; dalam dokument HTML. &lt;br\/&gt; ini bisa digunakan dalam penulisan paragraf namun fungsi dari &lt;br\/&gt; sebenarnya adalah memisahkan teks satu dengan teks lainnya. \u00a0ada sedikit perbedaan antara penggunakan &lt;p&gt; dengan &lt;br\/&gt; yang bisa bisa anda lihat sendiri di atas. \u00a0salah satu perbedaannya adalah : jika menggunakan &lt;p&gt; maka bari yang di atur dalam HTML lebih besar \u00a0di bandingkan dengan &lt;br\/&gt;. jika memang membutuhkan paragraf dalam dokumen HTML sebaiknya langsung menggunakan tag &lt;p&gt;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Untuk memahami pembuatan\u00a0paragraf &lt;p&gt; pada HTML, diharapkan anda terlebih <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/tutorial-html-06-paragraf-pada-html\/\" title=\"Tutorial HTML #06 &#8211; Paragraf Pada HTML\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3270,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[225,234,103,227],"newstopic":[],"class_list":{"0":"post-2940","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-paragraf-pada-html","11":"tag-web-design","12":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2940","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=2940"}],"version-history":[{"count":7,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2940\/revisions"}],"predecessor-version":[{"id":3271,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2940\/revisions\/3271"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3270"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=2940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=2940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=2940"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=2940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}