HTML Design

HTML Design

1. Task Requirements

   • Prescribed Criteria
     • Prescribed Criteria 2
       • Use HTML to organise appropriate information on the webpages. (Five or more)
         • Image
         • Table showing different information
         • Hyperlink to an external website
         • Ordered or unordered list
         • Button
         • Different heading sizes
         • Paragraphs
         • Image link
         • Video
     • Prescribed Criteria 3
       • Have an aesthetic that suits/aligns with your User Persona
         • Has a layout that is spread out and in three columns?
         • Has multiple images?
         • Engages the user and is simple?
         • Has information about hockey gear and basic rules?
     • Prescribed Criteria 1
       • Include two aspects styled using CSS.
         • Background colour/image.
         • Font type/colour.
   • Self-Determined Criteria
     • Use the user persona to align with the information on the website.
       • Has information on where to play?
       • Has information on where to buy gear?
       • Has information on where to buy gear?

2. User Persona

   • Wants
     • A website that meets my needs.
     • A website that is interesting and easy to read.
     • A website that gives me information about hockey.
   • Needs
     • I need a website that gives me a clear idea of hockey gear, and some basic rules. I also need information on upcoming games that I could go to and clubs to play at in Brisbane.
   • Details
     • Location: Brisbane, QLD
     • Age: 14
     • Name: Maddie Wilson
     • Occupation: Un-employed
     • Education: Y9 High School
     • Interests: Playing hockey, reading and cooking.
   • Topic
     • Hockey
   • Problem summary
     • The website I want to use has to have images and multiple different sections to give me information about hockey, such as basic rules, where to play and hockey gear. I also want the text and information in three columns.

3. Coding Environment

   • Key Algorithms
     • Website Navigation
   • Coding Language
     • HTML
       • Hyper Text Markup Language
       • HTML is what makes up the website, and usually includes all the tags that give the website its structure.
     • CSS
       • Cascading Style Sheets
       • CSS is what gives the website its extra things. Text, images and other styling tools are in it.
   • Developer Tools
     • Notepad++

4. User Interface

   • Aesthetic
     • Colours
       • Grey
       • Dark Red
       • White
     • Different formats
       • 3 columns
   • User Interface Components
     • Buttons
     • Images
     • Links
   • Features
     • 3 columns split
     • Dropdown menu
     • Home button