Images: HTML and CSS

The Bells page without images in Source View and Design View

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 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 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. or relative (a shorter path that starts with the same location as the file doing the referring). Image files are generally referred to by a relative address. – Because the URL attribute value used before did not include “ 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.

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

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

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

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

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

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

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

Provide some alternate text in the alt attribute.

W3schools on the alt attribute

Result in Design View after adding image

Result in Firefox after adding image

Add some image styling – in particular its position and width

W3schools on position

Result in Firefox after positioning the image

Add a border to image’s style

Result in Firefox after giving the image a border

Style the first letter of the text in each area

Result in Firefox after styling the first letter in