Download Images - Northside Middle School

Images
 File Types




.jpg - Joint Photographic experts Group format
.png - Portable Network Graphic format
.gif - Graphics Interchange Format
There are several other image formats but these are the most common
 The Image Tag - <img>
 Does not have a closing tag
 Common attributes




src – the URL of the image file
height – when used alone, width is changed to maintain aspect ratio
width – when used alone, height is changed to maintain aspect ratio
border
<img src="myPicture.png" border="1“>
CITA110 - Introduction to IT
SUNY Canton
Images - 2
Use of Images
 Images are the intellectual property of the person/organization which
created them
 Photographs
 Drawings, sketches, paintings
 Clip Art
 You need permission to use someone else’s property
 Not all web sites advertising free clip art are really free nor do they
guarantee blanket permission for use
 You should give credit to the source of all images that are not your own
 Captions for each individual image
 A separate web page acknowledging all the sources
CITA110 - Introduction to IT
SUNY Canton
Images - 3
About Borders
Use of borders is your option.
Recommendations:
• For pictures, yes
• For most transparent
backgrounds - no
Compare the two images. Although
there is sufficient contrast to see the
top image, the bottom image with a
thin border stands out better.
About Borders
For clip art and images which have transparent backgrounds, a border may not fit the
appearance you are trying to achieve. In that case, the border should not be used.
As an example, compare the three copies of the image used as a divider shown with and
without borders.
Aspect Ratios
 Aspect is the ratio of the height and width
 Example
 On the next slide the original image size is width="346"
height="234“
 The four images were displayed using:

Top image


Middle images



<img src="Tom.png" border="1">
<img src="Tom.png" width="115" border="1">
<img src="Tom.png" height="78" border="1">
Bottom image

<img src="Tom.png" width="100" height="100" border="1">
Aspect Ratios
Your Turn!
 Create a new html file in Notepad.
 Save the image, OFA.jpg, from the X:// drive to your
H:// drive.
 Put that image into your html file.
 ***You will need to make sure that the two files are
saved in the same location!
 Resize the image.
 Give it a border.
 Try adding some text around your image.
 Before, after, in between.
Adding Video
 This section is included for those who want to experiment with video
files
 <embed>
 Does not have a closing tag
 Uses Flash to display the video file – will not work if Flash is not installed
 Attributes:
 src - the URL of the sound file
 width, height - the size of the control panel
 HTML 5 adds a new tag <video> to embed video elements on a web
page
 There are several other ways to add video.


Some are browser dependent
They may all be included on a web page in an attempt to make sure at least one of them will
work with any particular browser