1. INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 sunny.shi@senecacollege.ca SENECA COLLEGE

2. 2 Outline Layout & Navigation – Centering – Positioning – CSS lists – CSS tables – CSS hyperlinks – Menu – Layout Usability HTML5 new tags

3. Centering -lines of text Centering lines of text in a paragraph or in a heading. p { text-align: center } h2 { text-align: center } center_text.html

4. Centering – a block Rephrase: left and right margin to be equal. – set the margins to 'auto'. – used with a block of fixed width. div.center { border: 2px solid red; margin-left: auto; margin-right: auto; width: 400px; } … center_block.html

5. Centering – Vertically Specify the outer block as a table cell, – the contents of a table cell can be centered vertically. div {height: 100px; width: 500px; } div.center { border: 10px dotted red; display: table-cell; vertical-align: middle; text-align: center;} This div is centered border_vertical

6. Positioning property: position a browser renders html statements in the order that they are in the html file - this is called normal flow CSS positioning can be used to position elements precisely 6

7. Positioning Values for property: position – absolute - position precisely within the containing element – relative - position precisely relative to normal flow – fixed - position precisely within the browser window, and does not move when the page is scrolled – static - position using normal flow (default) Values for Properties: "left", "right", "top", and "bottom" can be given offsets in px or % tags, with various classes, are used to create the different divisions of the document. 7 position.htmlPosition_relative.html

8. Positioning what if the text takes more than the allotted space? 8 use the property "overflow" to specify an action: eg. {overflow:scroll} - include scroll bars eg. {overflow:auto} - scroll if required eg. {overflow:hidden} - hide overflow eg. {overflow:visible} - default position.html

9. Positioning graphics and titles can be positioned in a similar fashion: 9 Position_graphic.html

10. CSS Lists Set different list item markers for ordered lists Set different list item markers for unordered lists Set an image as the list item marker ul.circle {list-style-type:circle} ul.square {list-style-type:square} ol.upper-roman {list-style-type:upper-roman} ol.lower-alpha {list-style-type:lower-alpha} 10

11. Property: list-style-type Values 11

12. 12 Property: list-style-type Values Css_list.html

13. Table Formatting CSS properties: – margin, padding, width, height, text-align, vertical- align, background-color, background-image, border formatting the entire table: – table {margin: auto; width: 80%} – table {border: dotted} – table {background-color: yellow} 13

14. Border Collapse Property: border-collapse sets whether the table borders are collapsed into a single border or separated. E.g.: table { border-collapse:collapse; } table,th, td { border: 1px solid black; } 14

15. Formatting Table Cells td {border: 4px inset #4400FF} td {padding:10px 20px} td {background-color: aqua} td {height: 100px; width: 400px} using "text-align" and "vertical-align" 15 Css_table.html

16. Table Sections - group the first one or more rows of a table for formatting - group the middle rows of a table for formatting - group the last one or more rows of a table for formatting 16 Table_section.html

17. Styling Links Properties: – color, font-family, background Links are styled differently depending on what state they are in. The four link states are: – a:link - a normal, unvisited link – a:visited - a link the user has visited – a:hover - a link when the user mouses over it – a:active - a link the moment it is clicked 17 NOTE: When setting the style for several link states, a:hover MUST come after a:link and a:visited a:active MUST come after a:hover Css_link.html

18. CSS – display property defines how a certain HTML element should be displayed. p.inline { display:inline; } 18 Css_display.html

19. display property values 19

20. Menu Link_download.html Menu1.html Menu2.html Menu3.html 20

21. HTML5 Structural Elements  HTML 5 defines a number of new container elements for constructing documents. – Header, nav, section, aside, article and footer 21

22. HTML5 new tags - Defines an article. Specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute independently from the rest of the site. Potential sources for the element: – Forum post – Blog post – News story – Comment 22 New_tags.html

23. HTML5 new tags - Defines content aside from the page content The aside content should be related to the surrounding content. The content could be placed as a sidebar in an article. 23 New_tags.html

24. HTML5 new tags - Defines a header for a document or section The tag specifies a header for a document or section. The element should be used as a container for introductory content or set of navigational links. You can have several elements in one document. Note: A tag cannot be placed within a, or another 24 New_tags.html

25. HTML5 new tags - Groups heading ( to ) elements The element is used to group a set of to elements, when a heading has multiple levels (subheadings). 25 New_tags.html

26. HTML5 new tags - Defines a section in a document Such as chapters, headers, footers, or any other sections of the document. 26 New_tags.html

27. HTML5 new tags - Defines a footer for a document or section 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. You can have several elements in one document. 27 New_tags.html

28. Web Pages Layouts  One-column layout 28  Two-column layout  docStructure.html & docStructure.css

29. Web Pages Layouts  Three-column layout  Column3.html & column3.css 29

30. Create Create 2-column fluid (float-based) layouts 1.Set the width of the page (e.g. 960px or 80%) and center the page:.container { width: 960px; background-color: grey; margin: auto; } 2.Set the width of the “aside” block and float it to left: aside { width: 10%; float: left; } 3.Set the width of the “main” section and float it to left: section.main { width: 80%; float: left; } 30

31. Create Create 2-column fluid (float-based) layouts 4. Set the clear property of the footer to ‘both’: footer { clear: both; background-color: #aaa; } 5. Set margin, border, padding, background-color, … to each structural element, e.g.: aside, section.main {margin-top: 58px; margin-right: 10px; margin- left: 10px; } Note: You may use relative width or absolute values for the page and columns. 31

32. Create Create 2-column tabular layouts docStructure.html & Tabular.css 32

33. Create Create 2-column tabular layouts.container display: table;.container { display: table; width: 960px; margin: auto; } aside display: table-cell; aside { display: table-cell; width: 192px; } section.main display: table-cell; section.main { display: table-cell; width: 720px; } footer { background-color: #aaa; } aside, section.main {margin-top: 58px; margin-right: 10px; margin-left: 10px; Note: using HTML table to create page layouts is obsolete and not allowed in INT222 assignments 33

34. CSS Resources Menu http://cssmenumaker.com/# Menu http://www.cssplay.co.uk/menus/ Layout http://www.cssplay.co.uk/layouts/ CSS Library: http://www.dynamicdrive.com/style/ CSS Reference: https://developer.mozilla.org/en- US/docs/Web/CSS/Reference https://developer.mozilla.org/en- US/docs/Web/CSS/Reference 34

35. Usability What and Why of Usability http://guidelines.usability.gov/ User Experience Basics http://www.usability.gov/what-and-why/user- experience.html User Interface Design Basics http://www.usability.gov/what-and-why/user-interface- design.html Web Style Guide http://webstyleguide.com/wsg3/ 35

36. Lab 4 Practice with CSS 36

37. Next Class Week 8 (after study week) Midterm test 1- – Paper based test – Reference sheet provided – You are not allowed any references – Class time, 2 periods (100 minutes) 37

38. Thank you!