Summary 5 | Chapter 4 & 13
Images
The use of images on a website can greatly enhance its visual appeal and help set the tone quickly. Relevant images should convey information, the right mood, be instantly recognizable and fit the color palette. Stock photography can be used if necessary but must be paid for. Keeping images in a separate folder helps with organization, especially on a larger site, and adding images to a webpage requires the use of the <img> element with the src and alt attributes. The alt attribute should provide an accurate description of the image content for accessibility and search engine purposes. A title attribute can also be used for additional information.
Placing Images
The placement of an image in HTML code affects how it is displayed. Placing an image before a paragraph starts the paragraph on a new line after the image, while placing an image inside the start of a paragraph aligns the first row of text with the bottom of the image. Placing an image in the middle of a paragraph puts the image between the words of the paragraph it appears in. Browsers show HTML elements as block or inline elements, and images placed before a block element sit on a new line after the image, while images inside a block element let text or other inline elements flow around the image. The align attribute, which has been removed from HTML5, was commonly used to control the alignment of images horizontally, with values of "left" or "right" aligning the image to the left or right and letting the text flow around it. Giving an image a margin can improve readability.
Boxes
Designers can set their own dimensions for a box using the height and width properties. The most popular ways to specify the size of a box are pixels, percentages, or ems. Pixels have traditionally been the most popular method because they allow designers to accurately control the box's size. Percentages and ems are becoming more popular for measurements as designers try to create designs that are flexible across devices with different-sized screens.