Categories
Design For Web Content

HTML: The Structural Layer

Class 2: What I Learned This Week…

Three Layers of Technology

  1. Content – Text & images
  2. Structure – HTML
  3. Presentation – CSS
  4. Behaviour – Javascript

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 ‘degrade gracefully’. 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.

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.

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

I already knew about the commenting out function, I’ve used this a lot when I have an issue with my code but don’t 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’t thought about using it to leave myself comments or for others who view my work. This would be especially helpful for something I hadn’t been working on for a while.

Some useful links that helped me to understand more about what was said in class:

  1. https://www.linkedin.com/learning/html-essential-training-4/
  2. https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Leave a Reply

Your email address will not be published. Required fields are marked *