1. Today’s Lesson….. 1.Formative Assessment Given Back – Go through Answers. 2.Webpage Design.

2. Webpage Design

3. Lesson Objectives. - You (the student) should be able to understand how the rule of thirds can be used to create an aesthetically pleasing web page. - You (the student) should be able to understand that there are three different types of colour scheme (monochromatic, analogous and complementary) that can be used in the creation of aesthetically pleasing web pages. - You (the student) should characterize and compare various editors for creating web pages according to the quality of the interface, capabilities, semantics and syntax

4. Success Criteria. -You (the student) are able to modify a css file to create three web pages that uses the rule of thirds & each one uses either (monochromatic, analogous and complementary) that can be used in the creation of aesthetically pleasing web pages. -You (the student) are able to characterise and compare various editors for creating web pages according to the quality of the interface, capabilities, semantics and syntax

5. Warm-Up Exercise. HTML & CSS Students go to www.Kahoot.it Teacher: www.create.kahoot.itwww.create.kahoot.it

6. Task 1. Describe what you think a good website looks like? Make a list of the styles and structures that go into making a good website, use examples of sites that you use every day.

7. Web page design is an art. There are several rules that you can follow to help make a professional looking website.

8. Rule of Thirds. A piece of work is divided into 9 even squares. The rule of thirds comes from traditional art, especially photography.

9. Rule of Thirds. Eye-catching items should line up near the intersections of these lines for the most impactful results. The rule of thirds comes from traditional art, especially photography.

10. Rule of Thirds. The ideal goal is to capture something in a unique way that draws attention into some part of the photograph. The rule of thirds comes from traditional art, especially photography.

11. Rule of Thirds. You want inequality because this forces some elements to appear more significant than others. The rule of thirds comes from traditional art, especially photography.

12. Rule of Thirds. It relates in the same way that you would draw attention to certain pieces of a photograph. The rule of thirds & Webpage Design.

13. Creating an HTML 5 Webpage using the rule of thirds. 1. Adding the components.

14. Rule of Thirds. HTML 5 Tags & Layout. Creating a Webpage in HTML 5.

16. The HTML element provides general information (metadata) about the document, including its title and links to/definitions of scripts and style sheets.

17. The HTML Element represents the content of an HTML document. There can be only one element in a document.

19. The HTML element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as or ) is appropriate. or ) is appropriate.

20. flow content Elements belonging to the flow content category typically contain text or embedded content.

22. The HTML element represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on.

24. The HTML element (HTML Navigation Element) represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

26. The HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). This could be a forum post, a magazine or newspaper article, a blog entry, an object, or any other independent item of content. Each should be identified, typically by including a heading ( - element) as a child of the element. - element) as a child of the element.

27. The HTML element represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each should be identified, typically by including a heading ( - element) as a child of the element. - element) as a child of the element.

29. The HTML element represents a section of the page with content connected tangentially to the rest, which could be considered separate from that content. These sections are often represented as sidebars or inserts. They often contain the definitions on the sidebars, such as definitions from the glossary; there may also be other types of information, such as related advertisements; the biography of the author; web applications; profile information or related links on the blog.

31. Creating an HTML 5 Webpage using the rule of thirds – part 1. Task 2. Download the document html 5 – template.html & open in web browser.

32. This is what we want. This is what we get.

33. Creating an HTML 5 Webpage using the rule of thirds – part 2. 3. Add a Cascading Style Sheet (CSS). Download styles.css & join it to your html file. Use Notepad ++

35. Colour Schemes. 1.Monochromatic 2.Analogous 3.Complementary

36. Monochromatic. Monochromatic colour schemes are derived from a single base colour. The base colour is extended using its shades, tones and tints.

37. Analogous. Analogous colors are colors that are adjacent to each other on a color wheel.

38. Complementary. The diagram shows colours that are opposite each other. Examples of include: red and green blue and orange yellow and violet.

39. Colour Schemes. Task: Redesign the Rule of Thirds Website using three different types of colour scheme. Monochromatic Analogous Complementary

40. Colour Schemes. Task: Email the screenshot to teacher. cockerill_g@ast.nis.edu.kz

41. 3 DIFFERENT METHODS FOR CREATING WEBSITES 1.Text Based 2.WYSIWYG 3.Content Management System (CMS)

42. 1. Text Based Systems.

43. A text editor is a type of program used for editing plain text files. Text editors are provided with operating systems and software development packages, and can be used to change configuration files, documentation files and programming language source code.

44. 2. WYSIWYG.

45. HTML editors that support What You See Is What You Get (WYSIWYG) paradigm provide a user interface similar to a word processor for creating HTML documents, as an alternative to manual coding. Achieving true WYSIWYG however is not always possible.

46. 3. Content Management System (CMS.)

47. A CMS or a 'Content Management System' quite literally allows you to control and manage the content within your web site - without technical training. Using this uncomplicated system you can very easily add, delete images and edit text in your web site on the fly.

48. Task 5 In pairs collect information that compares the pros and cons of each of the three methods of website creation. The contents of the web page will characterize and compare various editors for creating web pages according to the quality of the interface, capabilities, semantics and syntax. Collect pictures as well as text. You will use this information to create a webpage.

49. Task 6 Start to create a webpage using the information gathered in Task 5. You will need to make use of & tags so that your page scales on different devices. You must create a css file that makes your webpage aesthetically pleasing by using the rule of thirds and a recognized colour scheme.