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

2. 22 Outline Table Image Audio Video Next class DOM

3. 33 Table tables are supposed to structure tabular data, and not for web page layouts. Make web page layouts using CSS. Layout table: sometimes must be used when no equivalent CSS construct is available.

4. 4 Grades for Course INT222 Student IDStudent Name Grade 1234598Tom87.5 3242345Helen92 3847987Kelly78

5. 55 Table Tags : defines the table, all table tags must be inside. : defines the caption of a table. : defines a table row. : defines a table header, bold and centered by default. : defines a data cell, text regular and left-aligned by default.

6. 66 Table Attributes - border : value is the thickness of the table border in pixels. By default, the table has no borders, - the border attribute is absent -

7. 77 Table Attributes -colspan - value: positive integer, specifies how many columns of the table this cell should span. - By default value ='1'.

8. 88 Table Attributes - rowspan - value: positive integer, specifies how many rows of the table this cell should span. - By default value ='1'.

9. 9 Table.html

10. 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 10

11. 11 table section table {border: solid} caption {font-size: 16pt; color: purple;} thead {color: red; background-color: yellow;} tbody {color: green;height: 100px;} tfoot {color: blue} Table_section.html

12. Table Template Table Caption Header, first cell. Header, second cell. Header, third cell. Second row, first cell. Second row, second cell. Second row, third cell. more row, first cell. more row, second cell. more row, third cell. Foot row, first cell. Foot row, second cell. Foot row, third cell. </html

13. Image Three basic image formats for the web: 1.GIF (Graphics Interchange Format) primarily used for line drawings, limited to 256 colours usually much smaller files than JPEG for the same size image supports animation (several images displayed consecutively) supports image transparency uses lossless compression 13

14. Image Three basic image formats for the web: 2. JPG (JPEG - Joint Photographic Experts Group) best for photographic images, can contain 16.7 million colours does not support image transparency uses lossy compression 3. PNG (Portable Network Graphics) intended as a GIF replacement can contain 16.7 million colours supports image transparency uses lossless compression 14

15. 15 Image Tags src: image to display width and height: dimension of the image. Browser reserves a place for the image on the page and continues loading other page elements instead of waiting for the image to load. – recommend use alt: alternative label for the image, in case fail to load the picture title: specify extra information about the tag : positive integer, number of pixels for the width of border navigation.html

16. Image link http://senecac.on.caseneca_logo.gif 16 navigation.html

17. & this is a figure caption for a flower <img src="flower1.jpg" width=200 height=100 alt="Flower" title="Flower " /> 17 usually with represents a self-contained content for: image, illustration, diagram, code snippet, schema Figure.html

18. Image Generators for Web Developers Adobe photoshop http://www.gimp.org/windows/ http://dummyimage.com http://lorempixel.com http://placekitten.com http://placehold.it More from you

19. 19 Image Mapping Image -> image map, - one or more links apply to different regions of the image - click on different parts of the image -> activate different hyperlinks

20. 20 Make an Image Map 1 image ->1 to more smaller pieces, Put link tags around each piece of image 1 link 1 piece of image.

21. 21 Make an Image Map Active areas are described by their pixel co-ordinates with 0,0 being the top left corner. Put the image in your page using a normal image tag, except add the attribute usemap="#name_of_map", e.g., You can have more than one image map in the same page as long as they've got different names. (0,0)

22. 22 Image Map Example imagemap.html, imagemap2.html

23. 23 Area Tag Put tag for each active area Attributes for tag : - shape: rect (rectangle), circle, poly (polygon). - coords: coordinates of this shape. Start from upper left corner “0,0”. Each number is separated by commas, * Rectangle: “x1, y1, x2, y2” coordinates of upper-left and lower-right corners * Circle: “x,y, r”, coordinate of circle center and the radius of the circle in pixels. * Polygon: “x1,y1, x2, y2, x3, y3,…”, coordinates of each point - href: like the href in a regular link tag. - alt: alternative label <area shape = "rect" coords = "0,0, 200, 166" href = "http://cs.senecac.on.ca" alt = “area rect"/> <area shape = “circle" coords = “150,260, 130" href = "http://cs.senecac.on.ca" alt = “area circle"/> <area shape = “poly" coords = "0,0, 50, 60, 150, 230, 100, 366" href "http://cs.senecac.on.ca" alt = “area polygon"/>

24. 24 Tools for Creating Images & Image Maps X-Map: Free Html Map Editor used for determining image coordinates X-Map: Free Html Map Editor http://www.carlosag.net/Tools/XMap/ Paint Shop Pro used for image creation Paint Shop Pro http://www.corel.com/servlet/Satellite/us/en/Product/1184951547051#versio nTabview=tab1&tabview=tab0 http://www.corel.com/servlet/Satellite/us/en/Product/1184951547051#versio nTabview=tab1&tabview=tab0 Gif Construction used for image creation and animation Gif Construction http://www.mindworkshop.com/ Truespace Graphics used for image creation and animation Truespace Graphics http://www.caligari.com/

25. Current, no standard for playing audio files on a web page. Most audio files are played through a plug-in (like flash). However, different browsers may have different plug-ins. HTML5 specifies a standard way to embed an audio file on a web page: - the element. IE 9, Firefox, Opera, Chrome, and Safari support IE8 and earlier versions, do not support. 25 horse.ogg horse.mp3 Your browser does not support the audio element. Audio - Horse /figcaption> Test_audio.html

26. Audio Formats and Browser Support 26

27. 27 Test_video.html

28. Summary of HTML tags Inside the head element: – title – script – style – link The remainder are in the body element.

29. Summary of HTML tags Content containers: – p – div – span – details – em (and i) – strong (and b) – mark – pre – header – footer – nav – article – section – blockquote – h1, h2, h3, h4, h5, h6 – script (yes, script can be in the head and/or body) Content container for row-and-column data: table tbody th tr td

30. Summary of HTML tags List-making: – ul – ol – li Link: – a Media: – img – audio – video – canvas Interactivity (for user input): – form (and all its elements) Separators (breaks): – br – hr

31. Bonus Time

32. Next Class DOM 32

33. Thank you!