1. Images: HTML and CSS

2. The Bells page without images in Source View and Design View

3. Add code for a background image to the body’s style The attribute is background-image and the value is the name of the image file inside parentheses and after “url” (uniform resource location).

4. 4 Embedded versus referred to When one inserts an image in a Word document, the image is embedded into the Word document. As a result if you want someone to view the document, you only need to send one file – the Word document. When one inserts an image in an HTML document, the image is referred to by the HTML document. As a result if you want someone to view the document, you must send two files – the HTML document and the image file.

5. 5 Relative versus Absolute Path When the HTML document refers to the image file, it provides a path so that the image file can be located. – A file’s path may be absolute (a complete (full) path or an explicit, full URL, e.g. http://www.lasalle.edu/index.htm) or relative (a shorter path that starts with the same location as the file doing the referring).http://www.lasalle.edu/index.htm Image files are generally referred to by a relative address. – Because the URL attribute value used before did not include “http://”, it is a relative address. – Because there was no reference to a folder, it means that the image file is in the same folder as the HTML file.

6. Folders above and below. Code like background-image: url(images/PoeBack.jpg); implies that there is a folder named images at the same level as the HTML file and that folder contains an image file named PoeBack.gif Code like background-image: url(../PoeBack.jpg); implies that the HTML file is in a subfolder that is in another folder and that the higher-level folder contains an image file named PoeBack.gif

7. Portability issue Typically one does not develop web pages on the web server (the computer that will make the page available to users). Thus there should be no explicit reference to the file structure of the computer on which the page was developed. That is, code like url(file:///var/images/image1.jpg) is bad

8. Go to View/Toolbox if you don’t already have the toolbox. Expand the HTML toolbox.

9. Go to View/Property Window if you don’t already have a Property Window

10. Result of dragging from the image icon in the toolbox to the top of the body

11. Click in the region next to source in the Properties Window and then on the button

12. Find the desired image file using the dialog box. Then click OK.

13. Provide some alternate text in the alt attribute.

14. W3schools on the alt attribute

15. Result in Design View after adding image

16. Result in Firefox after adding image

17. Add some image styling – in particular its position and width

18. W3schools on position

19. Result in Firefox after positioning the image

20. Add a border to image’s style

21. Result in Firefox after giving the image a border

22. Style the first letter of the text in each area

23. Result in Firefox after styling the first letter in