{"id":356,"date":"2023-02-01T20:01:00","date_gmt":"2023-02-01T20:01:00","guid":{"rendered":"https:\/\/automatethemundane.com\/index.php\/2023\/02\/01\/add-static-text-to-html\/"},"modified":"2023-06-18T21:36:55","modified_gmt":"2023-06-18T21:36:55","slug":"add-static-text-to-html","status":"publish","type":"post","link":"https:\/\/automatethemundane.com\/index.php\/2023\/02\/01\/add-static-text-to-html\/","title":{"rendered":"Add Static Text to HTML"},"content":{"rendered":"\n<p class=\"has-text-color\" style=\"color: rgba(120, 119, 116, 1)\">2\/1\/2023<\/p>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n<h1 class=\"wp-block-heading\">The Why<\/h1>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">A plain HTML content control is fine on its own, but its best when other content is added into it. For this example the previous post on creating HTML content will be used as a baseline. <\/p>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\"><a href=\"https:\/\/automatethemundane.com\/index.php\/2023\/02\/01\/creating-static-html-content\/\">Creating Static HTML Content<\/a><\/p>\n\n\n<h1 class=\"wp-block-heading\">The How<\/h1>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">The end result of this will look like this<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/06\/image-7.png\" alt=\"\"\/><\/figure>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">To get the text to center both in the X and Y, I will use a HTML table for the text to live in. <\/p>\n\n\n<pre class=\"wp-block-code\"><code>&quot;&lt;div style=&#039;border-radius:12px 12px 0px 0px; width:560px; height:100px; background-color:#E5EFFE&#039;&gt;\n\n&lt;table \n\tstyle=&#039;width:100%; class: center; vertical-align: middle; height: 100%; width: 100%&#039;&gt;\n\n&lt;th&gt;Hello World!&lt;\/th&gt;\n\n&lt;\/div&gt;&quot;<\/code><\/pre>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">The \u201c&lt;div style=&#039;border-radius:12px 12px 0px 0px; width:560px; height:100px; background-color:#E5EFFE&#039;&gt;\u201d creates the light blue box and shapes it. <\/p>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">The \u201c&lt;table style=&#039;width:100%; class: center; vertical-align: middle; height: 100%; width: 100%&#039;&gt;\u201d creates the table style and centers it. <\/p>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">The  &lt;th&gt;Hello World!&lt;\/th&gt; is the text inside of an HTML Table Header<\/p>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n<p class=\"has-text-color\" style=\"color: rgb(0, 0, 0)\">The &lt;\/div&gt;&quot; closes out the HTML<\/p>\n\n\n<p class=\"has-background\" style=\"background-color: rgb(241, 241, 239)\">&#x1f4a1; All HTML inside of a Power App must be opened and close with a \u201c\u201d. Any \u201c\u201d in between needs to be replaced with a \u2018\u2019.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>2\/1\/2023 The Why A plain HTML content control is fine on its own, but its best when other content is added into it. For this example the previous post on creating HTML content will be used as a baseline. Creating Static HTML Content The How The end result of this will look like this To [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":192,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[18],"class_list":["post-356","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-canvas-app","tag-canvas-app","entry","has-media"],"jetpack_featured_media_url":"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/06\/cover-1-scaled.jpg","_links":{"self":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts\/356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/comments?post=356"}],"version-history":[{"count":1,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts\/356\/revisions"}],"predecessor-version":[{"id":357,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts\/356\/revisions\/357"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/media\/192"}],"wp:attachment":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/media?parent=356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/categories?post=356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/tags?post=356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}