1. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 1 Internet Technology (week 6)  Recap: Validating HTML  Page Layout

2. Internet Technology Dr Jing LU October2013 2 1. Define a DOCTYPE Use the following two lines at the start of each html page: Recap: Validating HTML 2. Nest tags properly 3. Close HTML tags 4. Write code in lower case 5. Add image descriptions

3. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 3 Recall: HTML Lists http://w3schools.com/css/css_navbar.asp Navigation Bar = List of Links Ordered Lists … Unordered Lists … Element for each Item Content

4. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 4 Recall: Relative URLs Example Contact us Home

5. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 5 … … Recall: Tag Defines a division or a section in an HTML document Used to group elements to format them with styles

6. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 6 Internet Technology (week 6)  Recap: Validating HTML  Page Layout

7. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 7 Recall: The Box Model (week 4)

8. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 8 Recall: position Property static – elements are laid out in the normal flow (default) relative – element is moved relative to its “normal” place absolute – element is positioned with respect to the first positioned (non-static) element that contains it fixed – element is positioned relative to browser window and remains exactly where it is when the page is scrolled Further examples from w3schools …

9. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 9 Positioning Scheme Normal flow − block elements begin new block and inline elements laid out in line within their containing block element − for elements with a static or relative position property Absolute position − elements having a position property value of absolute or fixed are absolutely positioned Floated − element is shifted to the left or right within its current line until reaches the edge of its containing block More on “float” property from w3schools …

10. Internet Technology Dr Jing LU October2013 10 HTML5 Layout Elements : defines a header for a document or a section - defines a container for navigation links - defines a section in a document - defines an independent self-contained article - defines content aside from the content (like a sidebar) : defines a footer for a document or a section /www.w3schools.com

11. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 11 Floated Multi-column Layout

12. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 12 Step 1. Start with the basic page structure HTML CODE Header This is your left navigation … Subheading This is the content part … Footer

13. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 13 Step 2.1 Styling the Container CSS CODE body { margin: 10px auto; background-color: #fff; color: #333; border: 1px solid gray; }

14. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 14 Step 2.2 Styling the Top Banner CSS CODE header { padding:.5em; background-color: #ddd; border-bottom: 1px solid gray; }

15. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 15 Step 2.3 Styling the Left nav CSS CODE nav { float: left; width: 160px; margin: 0px; padding: 1em; }

16. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 16 Step 2.4 Styling the Content CSS CODE section { margin-left: 200px; border-left: 1px solid gray; padding: 1em; }

17. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 17 Step 2.5 Styling the Footer CSS CODE footer { clear: both; margin: 0px; padding:.5em; color: #333; background-color: #ddd; border-top: 1px solid gray; }

18. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 18 Header Links… Subheading Content… Footer HTML body {…} header {…} nav {…} section {…} footer {…} CSS Floated Multi-column Layout: Summary

19. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 19 Other Page Layouts Fluid (or Liquid) Layouts Elastic Layout −specify the width using ems Further example from w3C … −specify the width using percentages −adjust to the user’s setup

20. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 20 Task 1: A New Web Page You should have completed an essay that describes and discusses the “Background and Future of the World Wide Web”. Create a web page based on this, adding page layout (using layout tags & external CSS) in the format of two or three columns, including: Top Banner Left Navigation Bar Content Footer

21. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 21 Task 2: Optional Change your page to use a liquid or an elastic layout. All pages: Validate HTML Continue to validate all the web pages you have created to make sure they meet HTML requirements.

22. Internet Technology Dr Jing LU Updated 2014-15 Dr Violet Snell / Dr Kalin Penev 22 References  Three Ways to Insert (use) CSS http://www.w3schools.com/css/css_howto.asphttp://www.w3schools.com/css/css_howto.asp  CSS Validation Service http://www.css-validator.org/http://www.css-validator.org/  CSS Selector Reference http://www.w3schools.com/cssref/css_selectors.asphttp://www.w3schools.com/cssref/css_selectors.asp  CSS Pseudo-elements http://www.w3schools.com/css/css_pseudo_elements.asphttp://www.w3schools.com/css/css_pseudo_elements.asp  CSS Box Model http://w3schools.com/css/css_boxmodel.asphttp://w3schools.com/css/css_boxmodel.asp  CSS margin Property http://www.w3schools.com/cssref/pr_margin.asphttp://www.w3schools.com/cssref/pr_margin.asp  CSS float Property http://www.w3schools.com/cssref/pr_class_float.asphttp://www.w3schools.com/cssref/pr_class_float.asp  CSS Positioning http://w3schools.com/css/css_positioning.asphttp://w3schools.com/css/css_positioning.asp  HTML5 Semantic Elements http://www.w3schools.com/html/html5_semantic_elements.asp http://www.w3schools.com/html/html5_semantic_elements.asp