{"id":40368,"date":"2018-08-26T03:01:00","date_gmt":"2018-08-25T17:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=40368"},"modified":"2018-08-26T13:19:23","modified_gmt":"2018-08-26T03:19:23","slug":"gimp-guides-to-html-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guides-to-html-primer-tutorial\/","title":{"rendered":"Gimp Guides to HTML Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.youtube.com\/watch?v=uOILGAtY2W4\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Guides to HTML Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/gimp_guides.jpg\" title=\"Gimp Guides to HTML Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Guides to HTML Primer Tutorial<\/p><\/div>\n<p>The great <a target=_blank title='GIMP' href='http:\/\/gimp.org'>GIMP<\/a> image editor has several ways to create <a target=_blank title='GIMP Guides information' href='https:\/\/docs.gimp.org\/2.6\/en\/gimp-concepts-image-guides.html'>Guides<\/a>, which are the precursor to being able to break an image into component parts via &#8220;Image -&gt; Transform -&gt; Guillotine&#8221; or the more enticing, for those web developers out there, &#8220;Filter -&gt; Web -&gt; Slice&#8221; which effectively does what Guillotine does and writes out some HTML in the form of an HTML table element that includes some &#8220;a&#8221; link opportunities to do something special for individual images of the new &#8220;image jigsaw&#8221; surrounded by Guides.  Within the options of that last menu you would also see an &#8220;Image Map&#8221; option helping out in a similar fashion to the stupendous <a target=_blank title='mobilefish' href='http:\/\/www.mobilefish.com\/services\/image_map\/image_map.php'>mobilefish<\/a> functionality.<\/p>\n<p>With this in mind, we almost immediately thought of the great <a target=_blank title='Piet Mondrian' href='https:\/\/en.wikipedia.org\/wiki\/Piet_Mondrian'>Piet Mondrian<\/a> and his rectangle paintings in primary colours, wondering if by now you could get image downloads of his work, given he died some time ago now.  And yes, there at this Pixabay <a target=_blank title='Pixabay Mondrian image link, thanks' href='https:\/\/pixabay.com\/en\/mondrian-red-blue-yellow-1504681\/'>webpage<\/a>, thanks, we were able to do that and download an image version of &#8220;Composition with Red Yellow and Blue&#8221; to open with GIMP.<\/p>\n<p>Which ways, then, in GIMP, can you create Guides?<\/p>\n<ul>\n<li>precise Horizontal or Vertical position specification in pixels (via Image -&gt; Guides -&gt; New Guide&#8230;) or percentage (via Image -&gt; Guides -&gt; New Guide (by Percent)&#8230;) values<\/li>\n<li>position via a Selection (via Image -&gt; Guides -&gt; New Guides from Selection) &#8230; and today&#8217;s method of choice &#8230;<\/li>\n<li>user long hover then drag of the rulers at the top and left for dynamic Horizontal and Vertical Guides respectively<\/li>\n<\/ul>\n<p>Best for this is that you can see us doing this with YouTube video we made for the purpose on our MacBook Pro using <a target=_blank title='QuickTime information from Apple' href='https:\/\/support.apple.com\/downloads\/quicktime'>QuickTime Player<\/a> &#8220;File -&gt; New Screen Recording&#8221; resultant presentation you can play below.<\/p>\n<p><iframe loading=\"lazy\" width=\"420\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/uOILGAtY2W4\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p> &#8230; and the resultant HTML code snippet, including <em>our bits<\/em>, produced looked like &#8230;<\/p>\n<p><code><br \/>\n&lt;!--HTML SNIPPET GENERATED BY GIMP<br \/>\n&nbsp;<br \/>\nWARNING!! This is NOT a fully valid HTML document, it is rather a piece of<br \/>\nHTML generated by GIMP's py-slice plugin that should be embedded in an HTML<br \/>\nor XHTML document to be valid.<br \/>\n&nbsp;<br \/>\nReplace the href targets in the anchor (&lt;a &gt;) for your URLS to have it working<br \/>\nas a menu.<br \/>\n<em>&nbsp;<br \/>\n&nbsp;<br \/>\n     Thanks for viewing.<\/em><br \/>\n --&gt;<br \/>\n&lt;table cellpadding=\"0\" border=\"0\" cellspacing=\"0\"&gt;<br \/>\n  &lt;tr&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_0_0.jpg\" style=\"width: 51px;  height: 4px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_0_1.jpg\" style=\"width: 70px;  height: 4px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_0_2.jpg\" style=\"width: 11px;  height: 4px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_0_3.jpg\" style=\"width: 164px;  height: 4px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_0_4.jpg\" style=\"width: 95px;  height: 4px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_0_5.jpg\" style=\"width: 110px;  height: 4px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_0_6.jpg\" style=\"width: 139px;  height: 4px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n  &lt;tr&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_1_0.jpg\" style=\"width: 51px;  height: 128px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_1_1.jpg\"  style=\"width: 70px; height: 128px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_1_2.jpg\"  style=\"width: 11px; height: 128px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a<em> title='blue' onclick=\"alert('Am I blue?');\"<\/em> href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_1_3.jpg\"  style=\"width: 164px; height: 128px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_1_4.jpg\"  style=\"width: 95px; height: 128px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_1_5.jpg\"  style=\"width: 110px; height: 128px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_1_6.jpg\" style=\"width: 139px;  height: 128px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n  &lt;tr&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_2_0.jpg\" style=\"width: 51px;  height: 14px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_2_1.jpg\"  style=\"width: 70px; height: 14px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_2_2.jpg\"  style=\"width: 11px; height: 14px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_2_3.jpg\"  style=\"width: 164px; height: 14px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_2_4.jpg\"  style=\"width: 95px; height: 14px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_2_5.jpg\"  style=\"width: 110px; height: 14px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_2_6.jpg\" style=\"width: 139px;  height: 14px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n  &lt;tr&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_3_0.jpg\" style=\"width: 51px;  height: 147px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_3_1.jpg\"  style=\"width: 70px; height: 147px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_3_2.jpg\"  style=\"width: 11px; height: 147px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_3_3.jpg\"  style=\"width: 164px; height: 147px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_3_4.jpg\"  style=\"width: 95px; height: 147px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a<em> title='Blue' onclick=\"alert('Am i Blue?');\"<\/em> href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_3_5.jpg\"  style=\"width: 110px; height: 147px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_3_6.jpg\" style=\"width: 139px;  height: 147px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n  &lt;tr&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_4_0.jpg\" style=\"width: 51px;  height: 107px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_4_1.jpg\"  style=\"width: 70px; height: 107px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_4_2.jpg\"  style=\"width: 11px; height: 107px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_4_3.jpg\"  style=\"width: 164px; height: 107px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_4_4.jpg\"  style=\"width: 95px; height: 107px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_4_5.jpg\"  style=\"width: 110px; height: 107px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_4_6.jpg\" style=\"width: 139px;  height: 107px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n  &lt;tr&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_5_0.jpg\" style=\"width: 51px;  height: 78px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a<em> title='BLUE' onclick=\"alert('Am i BLUE?');\"<\/em> href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_5_1.jpg\"  style=\"width: 70px; height: 78px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_5_2.jpg\"  style=\"width: 11px; height: 78px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_5_3.jpg\"  style=\"width: 164px; height: 78px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_5_4.jpg\"  style=\"width: 95px; height: 78px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;a href=\"#\"&gt;&lt;img alt=\" \" src=\"blue_5_5.jpg\"  style=\"width: 110px; height: 78px; border-width: 0px;\"&gt;&lt;\/a&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_5_6.jpg\" style=\"width: 139px;  height: 78px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n  &lt;tr&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_6_0.jpg\" style=\"width: 51px;  height: 2px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_6_1.jpg\" style=\"width: 70px;  height: 2px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_6_2.jpg\" style=\"width: 11px;  height: 2px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_6_3.jpg\" style=\"width: 164px;  height: 2px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_6_4.jpg\" style=\"width: 95px;  height: 2px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_6_5.jpg\" style=\"width: 110px;  height: 2px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n    &lt;td&gt;&lt;img alt=\" \" src=\"blue_6_6.jpg\" style=\"width: 139px;  height: 2px; border-width: 0px;\"&gt;&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;\/table&gt;<br \/>\n<\/code><\/p>\n<p>We hope you find these GIMP &#8220;Slice and Dice&#8221; webpage creation ideas of interest.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d40368' onclick='var dv=document.getElementById(\"d40368\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gimp\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40368' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The great GIMP image editor has several ways to create Guides, which are the precursor to being able to break an image into component parts via &#8220;Image -&gt; Transform -&gt; Guillotine&#8221; or the more enticing, for those web developers out &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guides-to-html-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,16,37],"tags":[1822,491,2663,576,590,1116,2664,1319,1407,1418],"class_list":["post-40368","post","type-post","status-publish","format-standard","hentry","category-elearning","category-gimp","category-tutorials","tag-editor","tag-gimp","tag-guides","tag-html","tag-image","tag-selection","tag-slice","tag-tutorial","tag-web-design","tag-webpage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40368"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=40368"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40368\/revisions"}],"predecessor-version":[{"id":40384,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/40368\/revisions\/40384"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=40368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=40368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=40368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}