To create visually appealing, accessible and easy to use web content, you need to use both HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). HTML deals with the structure of a webpage- headings, paragraphs, browser data etc., whereas CSS is all about page design and layout. Using there are numerous options for both and selecting the correct one for your content, design goals and accessibility is essential. As a designer I may not be required to use HTML and CSS daily within my career, a working understanding of its capabilities and restrictions, will help when working with engineers and developers as part of a team.
This week’s lecture began with a quick refresh of what we covered last week, and built from there, exploring more HTML elements and tags before moving onto CSS. We then worked on a class exercise to improve the Baskerville page we created last week, by adding better semantic HTML and then CSS to create visual appeal. We also were given a text document to markup and style before next week’s class.
Whilst I have used HTML and CSS previously, I had never been introduced to Markdown. Markdown offers another way to use symbols around text copy to tell a application how that text should be displayed. I have included below a list of common markdown syntax:
Source (https://www.collectiveray.com/markdown-cheat-sheet) Last Accessed 15/11/2022
Markdown is a quicker way to turn text into HTML, than manually inserting the HTML tags yourself. You will need to use a tool that supports markdown, use a plug-in or a converter to make full use of markdown and its speed. For turning large amounts of text copy into HTML for use on a website, it is a much more efficient way of carrying out that task.
For this reason, I think I will work on learning basic markdown syntax as it will not only make the creation of my next project a web essay much quicker, it will also be of great use anytime I may need to work on a website, my personal portfolio for example.
Last week we only covered the very basics of HTML, using block elements to give the text some sort of structure and meaning. This week we looked at a lot more elements, to use to make this markup even better and more useful. We discussed more block level elements such as <article>, <section>, <header> and <footer>. These are essential in marking up text as they provide meaning for each element for example an article is information which is all on the the same topic, such as a blog post or an opinion piece, very much like what you would get in a printed magazine or newspaper.
Marking up content correctly serves two main purposes:
We also looked at inline elements, which can be used to make specific pieces of content stand out the most common of these being:
These are also used by screen readers to let the user know that these pieces of text have been made to stand out, as they cannot see the visual difference.