Week 8-11 IXD101: The HTML and CSS of John Baskerville

HTML is the acronym For Hypertext markup Language, which is used for the structure of a web page along with its content. An HTML can be so many elements such as an image, heading or a paragraph; can be link that transports you somewhere else or it can make the content bigger or smaller but there is so much more elements that an HTML can be, that’s why is is very beneficial to know what you HTMLs are and how to use them. To understand this we need to look at the anatomy of HTML’s.

Anatomy Of An HTML Element.

To begin with the very basic elements we have the following:
The opening/closing tag: this takes form in the shape of a p and this helps with the starting and closing of the content you create.

Angle Brackets: This joins the opening and closing tag and again helps state the beginning of the paragraph or the ending of one as well.

The content: This is the text or image that is the main body of the work.

The element: Such as the closing or open tag as they are classified as an element.

Establishing what an element was, we can then talk about the attributes that comes with these elements. Attributes are ‘extra information’ that helps change the contents layout or appearance while remaking hidden from the actually content.
An attribute has the three following things such as: A space between the attribute and the element; attribute name along with the equal sign and wrapped by the opening/ closing quotation marks.

Nesting and Empty elements

Nesting means that if you want to include a element within another element you can do so to put emphasis on the Content that’s in the original element however this would need to be done correctly either wise the content will not appear so smooth or how you intended it to be.

Empty elements are that which have no content, an example with be <img>. This element doesn’t need a closing or opening tags as it has no counted to go allow within its angle brackets.

Anatomy of an HTML document

These listed ways of HTMLs will help you see that it is these forms combined with the elements that help us Create our first HTML.

To start of with me have:

<!DOCTYPE html>- This is a required HTML as back in the 1990s it was used as a form of checking
For errors within your work and making sure your content read smoothly; it was laying out the rules for the content that followed. However, these days you just have to make sure to include this HTML to have your, ‘document behave correctly.’

<html></html>-Thus element is known as your root element as it helps build together continent on the page.

<head></head>- This element helps enclose the information you want to included within your HTML but not show it within ur pages content that web viewer will see. This is information like a page description or key words that appears when ur website is searched.

< meta charset=“ utf-8”>- This element helps handle textual content that you put within your page and is deemed very useful and should be used within your work as it helps avoid any issues that could arise.

<title></title>- This is the title of the page you have created and will be the title that comes up when searched and I’m the browser along with the page being favoured by the user.

<body></body>- This is what you want to display when a user vista your page. Thus could be your text, images or whatever you decided to put within your webpage.

With having all this in mind, I started to create my first HTML. When starting this process I did tell that I was going to struggle as it was a harder task we have been given and I have never attempted any of this kind of design. It was hard but the process was fun and it was something I could always go back and edit and I did have fun when I start to get the hang of it. I can be my worse critic but I was very understanding that I had never done this before and I felt quite motivated that I was learning something that is new to me and very cool when you are able to do this easily.

 

We started off the with John Baskervillle article in week 5. To created my HTML I start do the basics with including what was needed for the beginning of an HTML. After I put what was needed, I went ahead and entered in all the information that was given to me on the passage. Through I did use <strong> and <em> to text out the effects within my texts and help establish the hierarchy as well.

My first version came out over like this.

T

John baskerville

John Baskerville

Letter Founder & Master Printer

John Baskerville (1706-1775) was an English businessman whose entrepreneurial attentions included japanning and papier-mâché; he is, however, best remembered as a typographer and printer, not least for the design of the eponymous typeface which, to this very day, bears his name.

The Man

Baskerville was born in the village of Wolverley, near Kidderminster in Worcestershire, and worked as a printer in Birmingham. Baskerville printed works for the University of Cambridge and, although an atheist, printed a splendid folio bible in 1763. His typefaces were greatly admired by Benjamin Franklin, a printer and fellow member of the Royal Society of Arts, who took the designs back to the newly-created United States, where they were adopted for most federal government publishing.

Baskerville was responsible for numerous innovations in printing, paper and ink production. He developed a technique which produced a smoother whiter paper which showcased his strong black type. He also pioneered a completely new style of typography, adding wide margins and generous leading to improve legibility.

“Having been an early admirer of the beauty of letters, I became insensibly desirous of contributing to the perfection of them. I formed to myself ideas of greater accuracy than had yet appeared, and had endeavoured to produce a set of types according to what I conceived to be their true proportion.”

-John Baskerville, preface to Milton, 1758 (Anatomy of a Typeface)

The Typeface

Baskerville is a Transitional serif typeface designed by John Baskerville in 1757, positioned between the Old Style typefaces of William Caslon, and the modern styles of Giambattista Bodoni and Firmin Didot.

The typeface is the result of Baskerville’s intent to improve upon the types of William Caslon. He increased the contrast between thick and thin strokes, making the serifs sharper and more tapered, and shifted the axis of rounded letters to a more vertical position. The curved strokes are more circular in shape, and the characters became more regular. These changes created a greater consistency in size and form.

Baskerville’s work was criticised by jealous competitors and soon fell out of favour. Since the 1920s, however, numerous revivals of Baskerville have been released by Linotype, Monotype, and other type foundries. Émigré released a popular revival of the typeface in 1996 called Mrs Eaves, named for Baskerville’s wife, Sarah Eaves. Baskerville represents the peak of Transitional type face design and bridges the gap between Old Style and Modern type design.

Mrs Eaves

Mrs Eaves is named after Sarah Eaves, the woman who became John Baskerville’s wife. As Baskerville was setting up his printing and type business, Mrs. Eaves moved in with him as a live-in housekeeper, eventually becoming his wife after the death of her first husband, Mr. Eaves. Mrs Eaves is a revival of the types of English printer and punch-cutter John Baskerville, and is related to contemporary Baskerville typefaces.

Like Baskerville, Mrs Eaves, cut by Zuzana Licko of Émigré, has a near vertical stress, departing from the Old Style model. Identifying characters, similar to Baskerville’s types, are the lowercase g with its open lower counter and swash-like ear. Both the roman and italic uppercase Q have a flowing swash-like tail. The uppercase C has serifs at top and bottom; there is no serif at the apex of the central junction in uppercase W; and the uppercase G has a sharp spur suggesting a vestigial serif.

The content on this page is developed from original copy from Wikipedia and licensed under a Creative Commons Attribution-ShareAlike License, meaning you’re allowed to copy, distribute and transmit the work as long as it is attributed to the original authors.
The CSS, Text, Images And CSS Grid
This part was the most hardest for as me as it was confusing when it came to HTML, however, CSS was what made this section a lot more difficult for me. I was becoming very frustrated and I agree that I should have asked for help as that time but it was something that came slower to me but after numerous YouTube videos, the rewatching of the record class, i finally created a CSS with images and into a grid format suitable for a web screen.
Inputting the navigation links was very harder for myself as I kept trying to great a navigation bar that I was satisfied with and with that I did a lot of experimenting, most of it failing at the Beginning, but after it was able to achieve the sizing I wanted and image I wanted I Finally start to get confidence with the work I made.

Leave a Reply

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