1. INT222 – Internet Fundamentals Week 8: Using New HTML features 1

2. Outline HTML5 structural elements Navigation and menus Figure and figcaption tags HTML5 video and audio tags New html5 form input tag attributes Test #1 : release answers 2

3. HTML5 structural elements HTML 5 defines a number of new container elements for constructing documents. – Header, nav, section, aside, article and footer 3

4. HTML5 structural elements 4......... logo etc …......... menu options …......... section 1 … article within the section another article within the section......... aside content …......... footer content...copyright etc…

5. The HTML4 way of doing same thing 5......... logo etc …......... menu options …......... section 1 … …………….main page content goes in here………….......... aside content …......... footer content...copyright etc…

6. tags can contain others 6

7. Navigation and menus 7

8. Navigation and Menus Single Level Menu Options – Horizontal Single Level Menu Example Horizontal Single Level Menu Example Navigation bar – Vertical Single Level Menu Example Vertical Single Level Menu Example Multi Level Menu Options – Horizontal Multi Level Menu Example Horizontal Multi Level Menu Example – Vertical Multi Level Menu Example Vertical Multi Level Menu Example 8

9. Creating Dropdown Menu Creating (Horizontal Multi ) two-level menu two-level menu Step 1: In HTML nav tags, create menu items in a nested unordered list. Step 2: – In CSS, set rules to hide sub menu’s items: nav li >ul { display : none; } – For the menus to reappear on hover of the LI, they need to be converted back to block elements. nav li:hover > ul { display: block; position: absolute; padding-top: 10px } 9

10. Creating Dropdown Menu Step 3: Set up the main navigation menu with CSS nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: block; float: left; color:#000000; background-color: #cccccc; padding: 5px 10px; margin-right: 20px; position: relative; } 10

11. Creating Dropdown Menu Step 4: Add gradient and change font color on hover. nav li:hover > ul li { float: none; width:130px; color: #000000; background-color: #cccccc; padding: 5px 1px; border: 1px solid; } Step 5: Position your dropdown and align it to list item. – position:relative; declaration was added to the top list items – position:absolute; declaration was added to your list inside that relatively positioned item. –.clear: both; avoid wrapping. 11

12. Resource & Reference DynamicDrive site - CSS library http://www.dynamicdrive.com/style/csslibrary/category/C2 MDN : CSS position https://developer.mozilla.org/en-US/docs/Web/CSS/position MDN : float and clear https://developer.mozilla.org/en-US/docs/Web/CSS/float 12

13. Web Pages Layouts 13

14. Basic Web Pages Layouts One-column layout 14

15. Basic Web Pages Layouts Two-column layout 15

16. Basic Web Pages Layouts Three-column layout 16

17. Creating Two-column Layout Make sure to – set CSS rules for both sections/blocks of “aside” and “.main” as float: left; – set the CSS rule for the block underneath them as clear: both; – Put all in a “container” div 17

18. Resource & Reference Example A simple two-column layout with HTML5 & CSS DynamicDrive site - CSS library http://www.dynamicdrive.com/style/layouts/category/C9/ MDN : float and clear https://developer.mozilla.org/en-US/docs/Web/CSS/float 18

19. About HTML-table-based Layouts HTML-table-based layouts’ disadvantages: – Not accessible, inflexible, hurt search engine optmization and etc.. HTML-table-based layouts are not allowed in INT222 assignments. Using CSS to show elements as table: – display : table; – display: table-cell; Exercise 02 - HTML FormExercise 02 - HTML Form: https://zenit.senecac.on.ca/~emile.ohan/int222/exercise/exercise-02.css 19

20. Figure and figcaption tags 20

21. Figure and figcaption tags The HTML Element represents a caption associated with a figure described by the rest of the data of the element - the can be the first or last element inside a block. Examples figure & figcaption tags 21

22. HTML5 video and audio tags 22

23. HTML5 Video and Audio Tags Current, no standard for playing audio/video files on a web page. – Most audio/video files are played through a plug-in (like flash). – However, different browsers may have different plug-ins. HTML5 introduced a built-in media support via the and elements, offering the ability to easily embed media into HTML documents. – IE 9, Firefox, Opera, Chrome, and Safari support – IE8 and earlier versions, do not support.

24. The Element Your browser does not support the audio tag used. Example : audio tagaudio tag

25. Attributes of Element controls – Displays the standard HTML5 controls for the audio on the web page. src – It’s optional. You may instead use the element. autoplay loop preload buffered, muted, played

26. The Element <source src="DogTease_VP8.webm" type="video/webm" /> Your browser does not support the audio tag used. Example : video tagvideo tag

27. Attributes of Element Element The Element shares many attributes with the element but has its own attributes: – Height, width – poster

28. The element The source element is used to specify multiple media resources for audio and video elements in HTML5. It is an empty element. It is commonly used to serve the same media in multiple formats supported by different browsers. Attributes – src, type, media

29. More Information about Audio/Video Formats Audio file formats – mp3 audio format mp3 audio format – ogg audio/video format ogg audio/video format Video file formats – mp4 video format mp4 video format – webm audio/video format webm audio/video format

30. New html5 form input tag attributes 30

31. Example: linklink 31

32. Review Creating site navigation and page layout use HTML5 and CSS. New HTML tags – Figure and figcaption tags – HTML5 video and audio tags New html5 form input tag attributes Test #1 : release answers 32

33. Thank You! 33