{"id":48,"date":"2022-10-05T17:54:00","date_gmt":"2022-10-05T17:54:00","guid":{"rendered":"https:\/\/mjonesdesign.co.uk\/blog\/?p=48"},"modified":"2023-02-25T17:55:52","modified_gmt":"2023-02-25T17:55:52","slug":"html-the-structural-layer","status":"publish","type":"post","link":"https:\/\/mjonesdesign.co.uk\/blog\/2022\/10\/05\/html-the-structural-layer\/","title":{"rendered":"HTML: The Structural Layer<\/strong>"},"content":{"rendered":"\n

Class 2: What I Learned This Week\u2026<\/h2>\n\n\n\n

Three Layers of Technology<\/strong><\/p>\n\n\n\n

    \n
  1. Content \u2013 Text & images<\/li>\n\n\n\n
  2. Structure \u2013 HTML<\/li>\n\n\n\n
  3. Presentation \u2013 CSS<\/li>\n\n\n\n
  4. Behaviour \u2013 Javascript<\/li>\n<\/ol>\n\n\n\n

    Javascript is fragile so we need to make sure when building web pages that if one of the technology fails, the structure will remain intact, and the site will \u2018degrade gracefully\u2019. For example, if Javascript fails then the website should still be functional and styled, it just no longer has certain behaviours. If CSS fails then the decoration will no longer be visible, but the site will still be usable and the content can still be accessed due to the HTML structure.<\/p>\n\n\n\n

    It is a good idea to provide height and width elements to an image in HTML as this will speed up the loading time of the web page.<\/p>\n\n\n\n

    Something else I learnt today was that including the reading direction, e.g. left to right, in your code can be very important as different countries will read things differently. An example of the coding for this is pictured below<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    I already knew about the commenting out function, I\u2019ve used this a lot when I have an issue with my code but don\u2019t know where the source of the problem is. This way, it is easy to figure out what is going wrong and where by commenting bits of code out section by section. Usually this happens with CSS. However, I hadn\u2019t thought about using it to leave myself comments or for others who view my work. This would be especially helpful for something I hadn\u2019t been working on for a while.<\/p>\n\n\n\n

    Some useful links that helped me to understand more about what was said in class:<\/strong><\/p>\n\n\n\n

      \n
    1. https:\/\/www.linkedin.com\/learning\/html-essential-training-4\/<\/a><\/li>\n\n\n\n
    2. https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

      Class 2: What I Learned This Week\u2026 Three Layers of Technology Javascript is fragile so we need to make sure when building web pages that if one of the technology fails, the structure will remain intact, and the site will \u2018degrade gracefully\u2019. For example, if Javascript fails then the website should still be functional and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-48","post","type-post","status-publish","format-standard","hentry","category-design-for-web-content"],"_links":{"self":[{"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=48"}],"version-history":[{"count":1,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/48\/revisions"}],"predecessor-version":[{"id":49,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/48\/revisions\/49"}],"wp:attachment":[{"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=48"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=48"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}