HTML

What is HTML?

HTML (HyperText Markup Language) is the universal markup language used on the web. HTML allows a developer or designer to format text, add graphics, create links, input forms, frames and tables, etc., and save it all in a text file that any browser can read and display. Tim Berners-Lee (b. 1995), an English software engineer who is considered the inventor of the World Wide Web, produced the first version of HTML in 1993. Since 1993 there has been many versions of HTML with the most recent being HTML5 which I will be using to produce my first website.

Using Github, I created my first HTML website entitled Baskerville containing content organising into paragraphs and headings. Using Github (a code hosting platform for version control which would allow me to keep track of different edits I make to my website), I was able to create a repository. The repository is the project’s folder; storing every single project file, its documentation and its revision history of every document. Once this was created, I was able to begin creating my HTML on Visual Studio Code.

 HTML & Using Visual Studio Code

In this first markup I was able establish paragraphs and titles using tags. An HTML tag provides direction for visual content that can be seen on the final website. Using the paragraph (<p></p>) and heading tags (<h1></h1><h2></h2>…) I was able to create a visual hierarchy of information by establishing my main titles with large fonts and spacing according to their heading tag. Using these pieces of markup language, I was able to create a basic website with a visual hierarchy which defined the websites title and subsequent paragraph titles.

After creating a a general layout which provides information in a basic layout, I began to build a list of hyperlinks. These hyperlinks allow a user to interact with the website. I created hyperlinks which are show at the header of the webpage. Listed as the paragraph titles, I was able to create link which will direct user’s to content within the webpage. These links are seen in blue and underlined to indicate to distinguish them from the main text. This enhances the user’s experience as they are enables information to accessed quickly and directly, rather than having the user scroll through paragraphs. I also included links to my blog and  email, a feature used on most websites to increased accessibility. This text is centred at the footer to define itself from the informational paragraphs.

CSS

What is CSS?

CSS (Cascading Style Sheets) is a language designed to specify the overall appearance of webpages as well as the appearance and structure of the text and elements such as images and buttons on webpages and their layout. Styles can be specified with CSS using internal style sheet definitions which are placed right into HTML code or in external files. Using CSS will allow me to create a more engaging and easily read design layout for the Baskerville HTML which I can then adapt to my hand-in projects. Initially released in 1996, CSS has had a huge impact on interaction design and has evolved considerably since its introduction. During the 1990s and early-2000s, developers utilised CSS to create webpages that were full of loud, vibrant elements like GIFs and hyperlinks however in recent years web design has become significantly more clean and minimal as seen below.

Using CSS to Create a Visually Appealing Webpage

Using CSS I was able to experiment create planes of colour, adding colour to text and also applying a header which holds the links directing the user to content within the webpage. I was also able to use AdobeFonts to apply the typeface Baskerville as the webpages font to reflect the content which explores the create of Baskerville. I also began to explore including images on my webpage as shown below to further user engagement with the content.