Where to get Images.

Transcription

1

2 Where to get Images Images are under copywrite from the author, we need to either use free images or purchase the right to use them. Places to Get Images:

3 Where to put your images We will be putting our images in an images folder in your root directory. E.g. Imagine we have the following directory structure: Do NOT get in bad habits of not putting your images in a folder. Your directory structure will get messy and unmanageable!

4 Images Folder So you will end up with something like: Look at all the images in their folder

5 The Image Tag Images are put inside <img> tags <img> is a self enclosing tag, this means there is no </img> All the information about the image is stored inside the <img> tag as attributes.

6 The src Attribute src stands for source. It contains the path to the file. Similar to links the path can either be relative or absolute Since, you will be storing your images in an images folder you will need to specify that in the path. Now we have: Folder File Name File Path

7 And your Image Appears

8 The alternate text Attribute The alt attribute describes the picture, e.g. The alt attribute will not appear in your document, but is important for accessibility. Screen readers for the visually impaired will read the alt attribute so the user knows what the picture is of. Do not leave this attribute out even if the picture is not important, the user needs to know why it exists.

9 The title Attribute The title attribute can provide additional information about the image. Most browsers will show this information when the user hovers over it in a tooltip.

10 The title Attribute Here s an example of the title tooltip, shown when you hover over the image.

11 Width and Height of Images DO NOT specify the width and height of your image as inline html like: Bad! Instead we will be specifying the size in your stylesheet when we get there. For now just resize the image to proper dimensions before you include it in your site.

12 Placing images in code Images are a inline element. This means that they will not by default have a new line before an after them. No new line before this text

13 Paragraphs are Block Level Paragraphs are block level elements, hence they always have a new line before and after them New line before the paragraph

14 Aligning Images What if you want your text to appear beside your picture???? We ll then you re just going to have to be patient and wait till we get to css stylesheets hehehe

15 The figure Tag The figure tag is used for images that would be like a figure in a report. Use the figure tag if you could move the image to an appendix and simply reference it without effecting the flow of your document.

16 The figure caption Tag The <figcaption> tag is used to hold the figures title for display It goes inside the figure tag

17 Figure and Figure Caption Note: these are HTML5 tags so older browsers may simply ignore them and only display the image

18 Images Formats JPG, GIF or PNG???

19 JPG JPG Images is a compressed file format, making it take up less space on your website and become faster to load The compression is lossy. This means that some of the image data is actually lost; however, the change in quality is said to be invisible to the human eye. JPG compression works well for pictures JPG does not work well not for lettering or simple images of few colors. JPG does not support transparency

20 GIF GIF uses a losless compression. Only supports 256 colors GIF is better than JPG for images that have few colors. Simple images. Images like sunsets have tons of colors, even though they are close in shade and should use JPG rather than GIF.

21 PNG An improvement on GIF Can be compressed slightly more, and supports more transparency.

22 Image Sizing In Pixles

23 Image Sizing Images are measured in pixels. Pixels are: The smallest dots on your computer screen

24 Tools for Image Editing Software: Adobe PhotoShop Pixelmator PaintShop Pro Paint.net Online Tools: