Learning Intention

To gain an introduction to a modern online presention language, HTML5

Success Criteria

Build a basic webpage in HTML5 that contains the contains the following

• Heading
• Paragraph text
• An image
• A link to another HTML page
• A link to external website such as google.

Warm Up

http://www.android.com/phones/ | http://lexus.co.kr/html/lexus_story/the_beginning.asp are example of modern HTML5 websites. Notice that there is lots of white space, a clear structure and easy navigation. The site are also responsive to the users device. They will work on a desktop screen or a mobile phone, so they are scaleable.

Introduction

This is an excellent introduction video of how to html.
https://www.youtube.com/watch?v=9gTw2EDkaDQ

Takes notes in OneNote when directed by the teacher.

Activities

Ardiuno Coding: MRCArduino Project

Easy

In your network folders create a new folder called “first website”.  Then follow the three tutorials below to create basic HTML webpage.

Part 1 – The Basics

Part 2 – Text

Part 3 – Images and Hyperlinks

Medium

Now start creating a website. Create two or more pages and link them together.

Use CSS to change the colour of the background and some of the element in the page

Part 5 – New Semantic Elements

Part 6 – CSS Page Layout

Hard

Create a wire frame for  a webpage and label the section according to a HTML5 page structure.

Create a webpage with a HTML5 structure <header>, <nav>, <section>, <article>, <aside>, <footer>

Use an external CSS3 style sheet to  control the layout and colour of the different sections of the website.

Killer

Use Photoshop or Illustrator or an online wire frame tool to design a template for your teams site.

Build the first page using HTML5 structure and CSS3 but make the page responsive to different users, eg, page will look differently if viewed on mobile phone.

Reflection

What did you learn today about HMTL5, rate your personal success in achieving any of the tasks today.

Homework

Research, research, research. Your team needs to develop an attractive layout for your site, use the following steps to come up with a design.

1. Pencil and paper first
2. Create a wireframe, identify all the HTML5 structure
3. Create a page with the HMTL5 structure
4. Use CSS3 to control the layout and style of the page

Make mistakes, share your ideas, save often, use class time to fix things up and get advice from the teacher.