{"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 wp-block-paragraph\" 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 wp-block-paragraph\" 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 wp-block-paragraph\" 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 wp-block-paragraph\" 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 wp-block-paragraph\" 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 wp-block-paragraph\" 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 wp-block-paragraph\" 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 wp-block-paragraph\" 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 wp-block-paragraph\" style=\"color: rgb(0, 0, 0)\">The &lt;\/div&gt;&quot; closes out the HTML<\/p>\n\n\n<p class=\"has-background wp-block-paragraph\" 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}]}}