Appearance
Advanced Topics
Images
Image Types
Lists are a way to visually organize related information. They contains words that are related or associated with one another, and are formatted to emphasis them on the page
PNG Portable Network Graphic - Larger file size. Can handle various opacity/transparency setting
JPG/JPEG Joint Photographic Experts Group - Smaller file size. Compressible format. Can loos detail as the size is reduced. Commonly used on social media and blog sites
GIF Graphics Interchange Format - Medium file size. Can contain multiple image frames to create an animation
WebP - Newer format for web pages. It is smaller in size and does not degrade when it is compressed
Adding Images
html
<img src="coffeeCup.png" alt="Image of fresh-brewed coffee in a mug">src - URL/Filename of image file
alt - Alternative text
What does alt do?
The alt parameter provides information to search engines, like Google. Search engines can use the alt text to help catalog your images for future searches
Screen Reader extensions for web browsers can read the alt text out to a user that cannot clearly see the image for themselves
If the image does not load into the browser, the alt text is displayed
Example:
html<!DOCTYPE html> <html> <body> <img src="https://live.staticflickr.com/4120/4863700123_6330ad77a4_h.jpg" alt="Computer Science Students"> </body> </html>Below is what how it will appear in a browser
Image Licensed by CC BY-NC-ND 2.0 DEED, Lawrence Berkeley Nat'l Lab - Roy Kaltschmidt
Styling Images
Images from the internet will be a variety of sizes. Using the CSS height and width properties provide some consistent image resizing to images look nice together on a page
Example:
html<!DOCTYPE html> <html> <body> <img src="https://live.staticflickr.com/4120/4863700123_6330ad77a4_h.jpg" alt="Computer Science Students"> </body> </html>cssimg { width: 350px; }Below is what how it will appear in a browser
cssimg { width: 150px; }Below is what how it will appear in a browser
Image Licensed by CC BY-NC-ND 2.0 DEED, Lawrence Berkeley Nat'l Lab - Roy Kaltschmidt
Only change width on images
The browser will render an image in the proportions of the downloaded file. When only the width property is changed teh browser will adjust the height to keep the image in it's original proportions
If width and height are changed, the image may be squished or stretched undesirably
Background Image
Images can be used as a background rather than a solid color
It important to consider carefully what image is used for a background. This image will be visible behind all page content. The image should be subtile, so it is not distracting to the viewer
Download the desired image into your project folder and update the CSS body element with the background-image property:
css
body {
background-image:url('myBgImage.png');
}There are some other background- properties that may improve how the browser covers the entire body tag with the selected image
background-size helps manage the size pf the image. Set to cover ensures the image covers the entire body
css
body {
background-image:url('myBgImage.png');
background-size: cover;
}