Project 3 – Final Piece (Red Star Foods)



HTML is the markup language for creating websites that can be uploaded to the World Wide Web.  It can be written in any text editor including notepad which is usually installed as standard on all computers. 

Using text editors specifically designed for writing HTML, such as Dreamweaver or Aptana, offer additional functionality to aid the writing of code.

Instructions are input to the HTML page in the form of tags and commands.  A tag is opened with the tag name which is enclosed with <> charachers, for example <body>.  The tag is then closed by enclosing with the characters </ and >, for example </body>

The fundamental components of an HTML page are the html, header and body tags.

  • The HTML tag contains the entire code for the page
  • The Head tag contains information about the site which are not directly delivered to the browser.  This can include links to external stylesheets and javascript sheets, meta tags and scripts.
  • The body tag sits below the header tag and contains all of the information that is delivered to the user’s browser.

The basic anatomy of an HTML page:







Within the body tag, content is input by enclosing within additional tags such as <div> (for divisions, i.e. sections) and <p> (for paragraphs).

 A page created using an HTML page only will deliver raw, unformatted text / images to the page with no styling.

It is possible to add styling to the HTML page by either assigning styles in the header to specific divs and classes, or by adding styles within the individual tags themselves.  However,  these methods are inefficient when creating sites with multiple sites of consistent formatting, and therefore external stylesheets are created using CSS pages.

As with HTML, CSS is a markup language that can be written on any text editor.  A single stylesheet is usually assigned to all pages of a site.  Styles are assigned to the various elements of the html page (e.g. divs).  CSS stands for Cascading Style Sheets, which is a reference to the hierarchy structure that it adheres to.  Styling assigned to a parent element applied to all child elements within.


The Cookie Law is a piece of privacy legislation that requires websites to obtain consent from visitors to store or retrieve any information on a computer or any other web connected device, like a smartphone or tablet, and is designed to protect online privacy.  It aims to make users aware of how information about them is collected by websites and enables then to choose whether or not they want to allow it to take place.

A cookie is a small data file that stores information in user’s browsers.  They are a kind of short term memory for the web and enable a site to ‘remember’ little bits of information between pages or visits. Almost all websites use cookies, some sites use hundreds of them.

They are mostly used to make the web experience better, like automatically logging you in to a site on return visits, or remembering settings like text size. Most websites also use tools like Google Analytics to measure site performance and collect traffic stats, and this also uses cookies in most cases.

However some cookies are used to collect data across websites you have visited, creating a ‘behavioural profile’. This profile can then be used to decide what content or adverts to show you. This use of cookies for tracking in particular is what the EU wants to raise awareness of with the law. By requiring websites to inform and obtain consent for cookies it aims to give web users more control over their online privacy.

There are other technologies, like Flash and HTML5 Local Storage that do similar things, and these are also covered by the legislation, but as cookies are the most common technology in use, it has become known as the Cookie Law.

Non-compliance with the cookie law can lead to a fine being imposed by the Information Commissioner’s Office.  It can also result in users choosing not to engage with a site if they believe their privacy to be at risk.

Compliance with the cookie law comes down to three basic steps:

1)     Work out what cookies your site sets, and what they are used for, with a cookie audit. 

2)     Inform visitors how cookies on your site are used

3)     Given the user some control by obtaining their consent.  Implied consent is a valid form of consent and can be used in the context of compliance with the revised rules on cookies.  If you are relying on implied consent you need to be satisfied that your users understand that their actions will result in cookies being set. Without this understanding you do not have their informed consent. You should not rely on the fact that users might have read a privacy policy that is perhaps hard to find or difficult to understand. In some circumstances, for example where you are collecting sensitive personal data such as health information, you might feel that explicit consent is more appropriate

In June 2012, European data protection authorities adopted an opinion that “some cookies can be exempted from informed consent under certain conditions if they are not used for additional purposes. These cookies include cookies used to keep track of a user’s input when filling online forms or as a shopping cart, also known as session-id cookies, multimedia player session cookies and user interface customisation cookies, eg language preference cookies to remember the language selected by the user.”

Below is an example of an implied consent notice in the footer of a website:



Information is freely available via the Internet, but this does not mean it is free to copy and is still covered by specific copyright laws (generally the same principles and legislation that cover printed works).   Unless explicitly stated otherwise, the majority of such resources will be subject to copyright restrictions and will be the property of the copyright holder.  Even if there is no copyright statement on the material, one must not assume that it is copyright-free.


Hyperlinks to external websites do not usually cause any problems with regards to copyright legislation and principles.  However, they should be  incorporated in a way that ensures that the user is aware that they are being taken to an external site, and that the links does not suggest that the user is being taken to another page of the current site.  With this in mind, a link should never be put directly on a navigation element of the page, as this could be considered ambiguous.  Links should also be to a home page rather than deeper into the site.  If the link is to a specific article, it should be made clear that the link is taking the user to an external site.  Problems can also arise if an external site is linked or referred to in a derogatory manner, by quoting out of context or making an inference that is not directly supported by evidence.



Images on the internet are not copyright free, and care should be taken in their use.  Designers should always strive to produce/obtain original material themselves.  If necessary, images obtained from the internet should be purchased directly from the owner, permission sought from the owner, or copywright free images used instead (by using advanced google search or Creative Commons search engine).  For any images used that are not your own, always acknowledge your source, and never alter the image unless permission has been specifically granted for you to do so.


There may well be multiple copyrights in screenshots, including fonts, graphics etc. If using these for learning and teaching purposes you must avoid any alteration to the original, and any misleading labelling.


Care must be taken with use of company logos, particularly where these are used to click through to a web page. Such use, without permission, would infringe the company’s trademark. There have been several high-profile legal suits resulting from such uses.


Web Accessibility Initiative

Launched in 1997, W3C’s Web Accessibility Initiative (WAI) aims to improve the accessibility of the World Wide Web for people with disabilities though a series of recommendations that web developers should adhere to when designing and creating websites for public use.

The guidelines encourage web designers to consider that many users may be operating in contexts very different to their own.  For example:

  • They may not be able to see, hear, move, or may not be able to process some types of information easily or at all.
  • They may have difficulty reading or comprehending text.
  • They may not have or be able to use a keyboard or mouse.
  • They may have a text-only screen, a small screen, or a slow Internet connection.
  • They may not speak or understand fluently the language in which the document is written.
  • They may be in a situation where their eyes, ears, or hands are busy or interfered with (e.g., driving to work, working in a loud environment, etc.).
  • They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.

These considerations will result in standard working practises for a designer when developing a website, such as:

  • Always adding meaningful narrative to images by using “alt” tags.  These are of benefit to visually impaired users who use a screen-reader.
  • Using stylesheets that are consistent across all pages so that users can alter font sizes, colors etc where necessary
  • Assigning a font size to <body> tag and having all child elements of body assigned relative font sizes (using ems as percentages).  This way, visually impaired users can alter all font sizes by simple adjusting the font size in the <body> tag
  • Ensuring use of color of important / essential information on the page does not have the potential  to be ambiguous for colour blind users, or altered display settings on the user’s monitor

Themes covered by WAI

  • Ensuring Graceful Transformation
    • Separate content from structure – ensure site is still meaningful if HTML page only is viewed without styling
    • Always provide text and text equivalents
    • Create documents that work even if the user cannot see and/or hear
    • Create documents that do not rely on one type of hardware
  • Make Content Understandable and Navigable
    • This includes not only making the language clear and simple, but also providing understandable mechanisms for navigating within and between pages


Chunky category headers

I have decided to have chunky ‘stamp’ effect category headers on the site.  Here are some initial sketches for what I planned to create:


I found a font that would fit the bill perfectly at – it’s called “Press Feeling Eroded”.

In photoshop I composed a header for each category using this new font.  Here is an example:


I have added a green background to help when composing and editing the images, but I remove this when being saved for web as the background is to be transparent on the web-page allowing the green background of the site to show through.

Here one of the category headers in situ:


I decided to see if I could optimize the file size of these category headers by inputting the headers directly into HTML, positioning as required using transform etc as separate divs within a containing div, and have the font imported to the site via font-face tool.  However, before I even got to experimenting with positioning, I realised that the font file that the browser would have to load was very big (1.21MB) and was causing a delay even when opening locally – this would be even worse when online.  I did some research into the feasibility of have the font file only containing the specific characters that I require to get the size down, but it the end decided to just stick with PNG files.  For some reason, loading the fonts straight into the browser also lost a considerable amount of clarity, which is strange:




Banner creation

This evening, I used the Youtube tutorial to create a banner to tag onto the aeroplane which will move across the screen from left to right.

Here is my banner (not quite finished, as it needs a Red Star before the text):



I created this little aeroplane in Illustrator during the lesson a couple of weeks ago:


I put the two images together in photoshop in a wide canvas:


I now just need to add a connecting rope, then add to the site with a transform translatex function.