There are three main tools that make up how websites are structured and transferred – those being HyperText Markup Language, Cascading Style Sheets, and JavaScript. HyperText Markup Language, or HTML, is perhaps the most foundational element of webpage and digital design – making up the text and image content of the webpage, classifying them by elements, classes, and identifiers, and laying out their general structure for the page. Cascading Style Sheets, or CSS, is then the tool that takes html content and styles it by its classifications – responsible for more stylistic choices such as font, spacing, and color, as well as key elements including positioning, sizing, and general layout. JavaScript is the last tool that often comes paired in the trio, enabling more interactive elements of a webpage through direct function calls, event listeners and clever scripting. If we were to think of a webpage as a container for information much akin to a physical cupboard or dresser, then HTML would comprise the drawers and contents, while CSS captures properties such as color, sizing, ornamentation, and layout. Lastly, JavaScript would make up the more interactive elements of the dresser not quite embodied by the previous two, including how it opens, if it locks, and perhaps if there are other user features. Although alternatives and upgrades have been created for each tool in the time since their inception, this phase of the practicum primarily focuses on how to create a webpage from scratch using foundational HTML5, CSS3, and JavaScript. As part of a three-webpage series, each webpage showcases and highlights a specific tool of the trio, demonstrating their strengths and use cases while getting in some practice.

For this example, I created a news-site webpage to demonstrate the usage and structure of HTML. As mentioned previously, HTML primarily encapsulates much of the textual and image content of a webpage, but also captures important information such as metadata, links, and text formatting. In doing so, HTML structures information in distinct elements, nesting them as necessary to produce a layered effect of data and styles. While many elements are general and can functionally be swapped interchangeably, others may have specific features embedded within them, such as links, images, lists, or scripts. As well, elements and their contents can be further divided into classes and identifiers for further specialization, which are often used in CSS and JavaScript to reference subsets or specific elements. While identifiers tend to be specific, - unique to a single element in a document – classes are more general, with the ability to be shared between multiple elements and for elements to have multiple classes. Together, classification by proper elements, classes, and identifiers doesn’t just signal to a viewer how information should be grouped but allows other tools to better integrate with the content as well.

This webpage attempts to capture the spirit of HTML by utilizing and nesting separate elements together to create three main sections of the ‘news-site’ – those being the upper navbar for the sites’ title and general information, the side navbar for the sites’ current stories divided by region, and the main body where one may find this passage as well as other example articles. By looking at the contents of the ‘index.html’ file, one may find that each of these sections comprise different but important elements and classes. The upper navbar, for instance, uses the <nav> element to contain its contents, which each section within it being nested <div> elements of different classes. In contrast, the sidebar uses a custom <div> and ‘.side-bar’ class to separate its style from the previous section, and instead orders its contents as a list of links to articles. Lastly, the main body comprises a list of articles by creating sequential <div> elements with the ‘.card’ class, each containing more nested elements with the article’s region, photo, and title. Together, these create a simple news-site with an intuitive UI and uses common classes within its structure to highlight how the HTML content itself is used and structured.