Item 7: Biscotti: The Twice Cooked Biscuit

This was to be used by us as practice for inserting JavaScript into our pages, but it also was a way of further practicing the HTML and CSS skills we have previously learnt. It was to be done on either a food, or a musical instrument, and I decided to make mine about Biscotti, the inspiration for my beloved cat!

Because Biscotti is traditionally served with tea, I decided to make a lovely floral picture on my background. This was also the inspiration for my colour scheme: dusty pinks and deep greens. I really liked the feel this brought to all of my pages, and the colour scheme was something that was really good to continue with.

I set all of my different headings into different sizes, depending on what size I wanted them to be. Even though Heading 2 is different to Heading 1, I made it bigger because I thought that would be better for my page.  I also liked the way that is consistently placed emphasis on the title of the page itself, rather than the entire website. For the titles, I chose a dark, dark green colour, which would stand out from the whites and pinks that I had chosen for my backgrounds and navigation, and which would add definition to each title.

Padding within my nav

In my navigation, I chose to place padding around the top and the bottom, using CSS. I chose to do this because it made the words within my navigation stand out more, and also made more of a definite feature of the navigation bar.

Showing the CSS Source Tag

Using CSS in a website like this one allowed me to fully achieve what I wanted to in terms of style and design. Although I have done this in the past, I made all of my CSS external, and linked that document to all of my coding in the head section of my code.

JavaScript for Print Button

Because I was making this website about Biscotti, I wanted to have my mum's old recipe in the page. I also wanted to give people the option, should they want to, to print out that recipe, so I used JavaScript to add in a button, which I then styled using CSS,  which, when clicked, would give you all the print options. I am really glad that I included this, because it adds another element to that page alone. I included this piece of JavaScript within my code, rather than externalising it onto a different document, because it wasn't very big, and it made sense for me to do this.