Images: HTML and CSS. The Bells page without images in Source View and Design View.
-
Upload
charleen-benson -
Category
Documents
-
view
215 -
download
0
Transcript of Images: HTML and CSS. The Bells page without images in Source View and Design View.
![Page 1: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/1.jpg)
Images: HTML and CSS
![Page 2: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/2.jpg)
The Bells page without images in Source View and Design View
![Page 3: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/3.jpg)
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).
![Page 4: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/4.jpg)
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.
![Page 5: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/5.jpg)
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).
• 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.
![Page 6: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/6.jpg)
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
![Page 7: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/7.jpg)
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
![Page 8: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/8.jpg)
Go to View/Toolbox if you don’t already have the toolbox. Expand the HTML toolbox.
![Page 9: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/9.jpg)
Go to View/Property Window if you don’t already have a Property Window
![Page 10: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/10.jpg)
Result of dragging from the image icon in the toolbox to the top of the body
![Page 11: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/11.jpg)
Click in the region next to source in the Properties Window and then on the button
![Page 12: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/12.jpg)
Find the desired image file using the dialog box. Then click OK.
![Page 13: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/13.jpg)
Provide some alternate text in the alt attribute.
![Page 14: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/14.jpg)
W3schools on the alt attribute
![Page 15: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/15.jpg)
Result in Design View after adding image
![Page 16: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/16.jpg)
Result in Firefox after adding image
![Page 17: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/17.jpg)
Add some image styling – in particular its position and width
![Page 18: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/18.jpg)
W3schools on position
![Page 19: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/19.jpg)
Result in Firefox after positioning the image
![Page 20: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/20.jpg)
Add a border to image’s style
![Page 21: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/21.jpg)
Result in Firefox after giving the image a border
![Page 22: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/22.jpg)
Style the first letter of the text in each <pre> area
![Page 23: Images: HTML and CSS. The Bells page without images in Source View and Design View.](https://reader035.fdocuments.us/reader035/viewer/2022062716/56649dc75503460f94abb93c/html5/thumbnails/23.jpg)
Result in Firefox after styling the first letter in <pre>