Week5-1 - Seneca College
advertisement
INT222 - Internet Fundamentals
Shi, Yue (Sunny)
Office: T2095
sunny.shi@senecacollege.ca
SENECA COLLEGE
Outline
•
•
•
•
•
Table
Image
Audio
Video
Next class
• DOM
2
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.
3
<caption>
<th>
<tr>
Grades for Course INT222
Student ID
Grade
1234598
Student
Name
Tom
3242345
Helen
92
3847987
Kelly
78
87.5
<td>
4
Table Tags
• <table>: defines the table, all table tags must be
inside <table> </table>.
• <caption>: defines the caption of a table.
• <tr>: defines a table row.
• <th>: defines a table header, bold and centered by
default.
• <td>: defines a data cell, text regular and left-aligned
by default.
5
Table Attributes - border
• <table border='value'>: value is the thickness
of the table border in pixels.
• By default, the table has no borders,
- the border attribute is absent
- <table border = “0”>
6
Table Attributes -colspan
• <th colspan = “value”>
• <td colspan = “value”>
- value: positive integer, specifies how many
columns of the table this cell should span.
- By default value ='1'.
7
Table Attributes - rowspan
• <th rowspan = “value”>
• <td rowspan = “value”>
- value: positive integer, specifies how many rows
of the table this cell should span.
- By default value ='1'.
8
Table.html
9
Table Sections
• <thead> - group the first one or more rows
of a table for formatting
• <tbody> - group the middle rows of a table
for formatting
• <tfoot> - group the last one or more rows
of a table for formatting
10
<!DOCTYPE html>
<html>
<head>
<title>table section</title>
<meta charset="utf-8">
<style>
table {border: solid}
caption {font-size: 16pt; color: purple;}
thead {color: red; background-color: yellow;}
tbody {color: green;height: 100px;}
tfoot {color: blue}
</style>
</head>
<body>
<!– main body in next page -->
Table_section.html
11
Table Template
<table border=“1">
<caption> Table Caption </caption>
<thead>
<tr>
<th>Header, first cell.</td>
<th>Header, second cell.</td>
<th>Header, third cell.</td>
</tr>
</thead>
<tbody>
<tr>
<td>Second row, first cell.</td>
<td>Second row, second cell.</td>
<td>Second row, third cell.</td>
</tr>
<tr>
<td>more row, first cell.</td>
<td>more row, second cell.</td>
<td>more row, third cell.</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Foot row, first cell.</td>
<td>Foot row, second cell.</td>
<td>Foot row, third cell.</td>
</tr>
</tfoot>
</table>
</body>
</html
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
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
Image Tags
• <img src =“url” width = “68” height = “320” alt = “value” title=“title”
/>
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
• <img src=“url" border = “2” />: positive integer, number of pixels for
the width of border
navigation.html
15
Image link
<a href='xxxxx.html'> <img src='action.gif'
alt='text'/> </a>
<a href='http://senecac.on.ca'> <img
src='seneca_logo.gif' alt="Seneca College"
title="seneca college"/> </a>
navigation.html
16
<figure> & <figcaption>
<figure> usually with <figcaption>
represents a self-contained content for:
• image,
<div class="picture">
• illustration,
<figure>
• diagram,
<figcaption>
• code snippet,
this is a figure caption for a flower
</figcaption>
• schema
<img src="flower1.jpg" width=200 height=100
alt="Flower" title="Flower " />
</figure>
</div>
Figure.html
17
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
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
19
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.
20
Make an Image Map
• Active areas are described by their pixel co-ordinates with 0,0 being
the top left corner.
(0,0)
• Put the image in your page using a normal image tag,
except add the attribute usemap="#name_of_map", e.g.,
<img src= "sccs222.jpg" width="400" height="166" border = "2"
usemap="#cs_imgmap" />
• You can have more than one image map in the same page as long as
they've got different names.
21
Image Map Example
<img src= "sccs222.jpg" width=“400" height=“166" border = "2"
usemap="#cs_imgmap" />
<map name = "cs_imgmap">
<area shape = "rect" coords = "0,0, 200, 166" href =
"http://cs.senecac.on.ca" alt = "1st rect"/>
<area shape = "rect" coords = “200, 0, 400, 166" href =
"http://www.yahoo.com" alt = "2nd rect" />
</map>
imagemap.html, imagemap2.html
22
Area Tag
•
•
Put <area> tag for each active area
Attributes for tag <area>:
- 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"/>
23
Tools for Creating Images & Image Maps
•
X-Map: Free Html Map Editor used for determining image coordinates
http://www.carlosag.net/Tools/XMap/
•
Paint Shop Pro used for image creation
http://www.corel.com/servlet/Satellite/us/en/Product/1184951547051#versio
nTabview=tab1&tabview=tab0
•
Gif Construction used for image creation and animation
http://www.mindworkshop.com/
•
Truespace Graphics used for image creation and animation
http://www.caligari.com/
24
<audio>
• 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 <audio> element.
• IE 9, Firefox, Opera, Chrome, and Safari support <audio>
• IE8 and earlier versions, do not support <audio>.
<figure>
<audio controls autoplay loop>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<figcaption>
Audio - Horse
/figcaption>
Test_audio.html
</figure>
25
Audio Formats and Browser Support
26
<video>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
Test_video.html
27
Summary of HTML tags
• Inside the head element:
– title
– script
– style
– link
• The remainder are in the body element.
Summary of HTML tags
• Content containers:
–
–
–
–
–
–
–
–
–
–
–
–
–
–
–
–
p
div
Content container for row-and-column data:
span
• table
details
• tbody
em (and i)
• th
strong (and b)
• tr
mark
pre
• td
header
footer
nav
article
section
blockquote
h1, h2, h3, h4, h5, h6
script (yes, script can be in the head and/or body)
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
Bonus Time
Next Class
• DOM
32
Thank you!
