This week’s class introduced us to HTML and CSS, providing a foundation for how websites are structured and styled. We explored the different elements and tags in HTML, understanding how content is organised, and learned how CSS controls the visual presentation, from colours and fonts to layout and spacing. The session highlighted how these two languages work together to bring designs to life, allowing us to turn concepts into functional web pages.
HTML stands for HyperText Markup Language. It uses tags to identify elements so the browser can display them properly. Paired with CSS, a cascading style sheet, it can be designed to become much more than simple, basic sites. Upon reviewing this, I don't have a not much knowledge when it comes to experience with HTML and CSS, as when I was in school, I did study digital technology and made a couple of websites, but nothing else, so it is a good opportunity to go from here.
A doctype declaration - tells the browser which version of HTML it is written in. HTML tags - wrap the entire content of the page. Head tags - act as a container for extra information you want to include in the page. Body tags - contains all content on display. Head elements - the information in the head tags used by e.g browsers to understand how the content should be rendered, and search engines such as Google to display information about their page in their search results. Charset attribute - This attribute simply specifies which character set the document should use. Viewport attribute - The viewport tells the browser to make the webpage fit the user’s device regardless of its size, e.g moving from a mobile device to a computer.
All text hyperlinks should be underlined. Hyperlinks should be the only elements that are underlined to avoid confusing the user. The text of the link should clearly explain where it will take the user. If an image or icon is used as a link, make sure to include a description of where it leads, either as text or in the image's alt attribute. If an image or icon is used as a link, make sure to include a description of where it leads, either as text or in the image's alt attribute. By default, each hyperlink opens in the same window, so the user can use the browser’s back button to return to the previous page. If you set a hyperlink to open in a new browser tab, using the attribute target= "_blank", include the words "(opens in new tab)" at the end of the link text.
Below is an example of basic code that I put together on software called Visual Studio Code, which allows me to trial different types of code as well as to put it live, and see what the outcome looks like on a website in a browser.
Lists - these allow you to group a set of related items into a list, including an ordered and unordered list. An ordered list shows the list items as a numbered list. Unordered lists show the list items as a bulleted list. Lists in HTML can be nested, which means that a list item can have a sub-list within it. Hyperlinks - I can use hyperlinks to navigate to another page and a location within a webpage. Hyperlinks should be the only element in HTML that is underlined to avoid confusion with the user. Block quotes - Are used to show that the text inside is a long quote. It is also used to mention where the quote is from, including a cover, website, book, movie, etc. Landmarks - In HTML, landmarks are used in a semantic way to define different parts of a web page, including header, main, nav and footer.
<aside>
Overall, this week’s class gave a solid introduction to the fundamentals of web design. I feel more confident understanding how HTML structures content and CSS shapes its appearance, and I can already see how these skills will help me translate my design ideas into actual websites. It was insightful to see how code can bring creative concepts to life while maintaining clarity and organization.
</aside>