1. HTML and CSS- Layout

2. HTML Layout Frame Table – Block HTML5 layout elements

3. Example

4. HTML5 Layout

5. HTML Layout – using Frame HTML Frames Your browser does not support frames.

6. HTML Layout – using Frame HTML Frames Your browser does not support frames.

7. HTML5 doesn’t support Frame anymore!!!

8. iFrame – inline Frame

9. iFrame – inline CSS <!– dotted style and size = 5px 

10. iFrame – Try this and see what happen

11. What do you see any differences between them? This is an iframe. This is an iframe.

12. HTML – Table layout

13. HTML Layout – using Tables HTML Layout using Tables This is Web Page Main title Main Menu HTML PHP PERL... Technical and Managerial Tutorials Copyright © 2007 Tutorialspoint.com

14. HTML Layout – using Tables Three Column HTML Layout Main Menu HTML PHP PERL... Technical and Managerial Tutorials Right Menu HTML PHP PERL...

15. HTML Layout using HTML Layouts using DIV, SPAN This is Web Page Main title Main Menu HTML PHP PERL... Technical and Managerial Tutorials Right Menu HTML PHP PERL... Copyright © 2007 Tutorialspoint.com

16. HTML using #header { background-color:black; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } City Gallery London Paris Tokyo London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. Copyright � W3Schools.com

17. HTML5 Layout

18. header { background-color:black; color:white; text-align:center; padding:5px; } nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } section { width:350px; float:left; padding:10px; } footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } City Gallery London Paris Tokyo London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. Copyright � W3Schools.com

19. Semantic Elements A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: and - Tells nothing about its content. Examples of semantic elements:,, and - Clearly defines its content.

20. New Semantic Elements in HTML5

21. According to W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading." WWF The World Wide Fund for Nature (WWF) is....

22. An article should make sense on its own, and it should be possible to read it independently from the rest of the web site. Examples of where an element can be used: Forum post Blog post Newspaper article What Does WWF Do? WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.

23. A element should contain information about its containing element. A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc. Posted by: Hege Refsnes Contact information: someone@example.com.

24. The element defines a set of navigation links. The element is intended for large blocks of navigation links. However, not all links in a document should be inside a element! HTML | CSS | JavaScript | jQuery

25. The element defines some content aside from the content it is placed in (like a sidebar). The aside content should be related to the surrounding content. My family and I visited The Epcot center this summer. Epcot Center The Epcot Center is a theme park in Disney World, Florida.

26. Example Please see this code SampleSample

28. Layout trends 2015 1.Split screens – http://www.deweyspizza.comhttp://www.deweyspizza.com – http://tympanus.net/Blueprints/SplitLayout/index.html http://tympanus.net/Blueprints/SplitLayout/index.html – http://www.pixelatingbits.com/latest-web-trend-22-fantastic-vertically-split-layout-website-designs- for-inspiration/ http://www.pixelatingbits.com/latest-web-trend-22-fantastic-vertically-split-layout-website-designs- for-inspiration/ 2.Block grids -http://www.sitepoint.com/web-layout-ideas-2015/http://www.sitepoint.com/web-layout-ideas-2015/ 3.No chrome – http://www.webdesignerdepot.com http://www.webdesignerdepot.com 4.Single Screen – http://hatchcollective.co.uk http://hatchcollective.co.uk 5.Big backgrounds/parallax - http://mintdesigncompany.com/http://mintdesigncompany.com/ http://www.webdesignerdepot.com/2015/01/4-essential-layout-trends-for-2015/

29. Resources w3schools.com www.tutorialspoint.com

30. Practical Please see practical #4 on my website