101 Weeks 7-10: Type History Website

Intro to HTML- History of Type

At the beginning of Week 7 we were introduced to the foundations of HTML, covering the Web standards and fundamental html tags and structure. These include the <head> </head> tags between which, contains the information of the document. The elements within document are the following tags:

<title

<base>

<link>

<style>

<script>

<meta>

From this we began the development of a website using the text file from github- https://github.com/ixdbelfast/ixdbelfast.github.io/blob/master/modules/IXD101/resources/brief-history-of-type.txt 

 

When then had to format the text in our chosen text editors- mine is atom, and match our webpage as close as possible to this image

 

 

 

 

 

 

 

 

 

This is how my initial development of the webpage and I think it matches the image pretty much exactly.

 

 

 

 

The following images show the html code I used to produce this;

 

 

 

 

 

 

 

 

 


 

The following week, we developed our knowledge of HTML further by using CSS- which allows us to further control the presentation of a website and add colour and variable fonts.

After adding a basic css file to the html this is what the website looks like;

 

 

 

 

 

 

 

And this is the css used to produce this;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

In Week 9 we look into web typography, in which we were taught that we can use fonts from Google fonts and Adobe fonts websites by linking them into our files.

We also learned about micro and macro typography, macro typography is for the adaptation of the typeface in the general web design layout. This involves the the margins and the contrast of the font  in the arrangement of paragraphs and images.

Micro technology involves the detail of the typeface – the font itself. This could include the font selection and size.

We then developed our type history website by font pairing and adding variable fonts in the css;

 

 

 

 

 

 

 

 

Between this version and the last version I also changed the background colour as i felt it was too blue toned and dark. I think the addition of some different fonts that work together to create a more interesting webpage to look at.

 

 

 

 

 

 

 

 

Leave a Reply

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