Chapter 5: Images
Choosing Images for Your Site
Images can help your website by making a difference in quality. Images can set the tone for your website in less time that it takes to read a description. If you don't have any photos that you took, there are websites like freepik that let you use their stock images they have. Always remember that if you don't buy it or credit the image, it may be subject to copyright issues. When selecting images, keep in mind that a simple background for your images might be best.
Storing Images on Your Site
Keeping images in a seperate fold linked to your webpage, will help with organization within your webpage and materials. When creating a new webpage it best to make a folder for images to help with organization, and call it images for less confusion. In the images folder you can have multiple folders for better oraginzation within your folder and webpage, for example logos and buttons you make might be under interface while product advertisement might be placed in products. If your are using a content management system might have tools for you to make somethings easier.
Adding Images
To add an image to the page, you need to use an img tag element. This tag is an empty element which means that it has no closing tag. The img element has two attributes that it must have always, which is SRC and ALT. SRC tells the browser where it can find the image on your website. ALT provides a text description for the image on your website if you can't see it, don't forget to add this because you might be sued if you don't. You can also use the title attribute on images to provide more information about your image on your page.
Chapter 15: Layout
Normal Flow
In a normal flow, each block-level element sits on top of the next one. Because this is the default way in most browsers, you don't need a CSS property to indicate that they should appear in normal flow instead it should be position: static;. The heading might not necessarily need to have a specified width but if it does it will stretch the width of the browser. If the paragraph has a specified width, it will show that some elements might start on a new line if it doesn't fit within the specified width.
Overlapping Elements
If you use either fixed, relative, or absolute positioning boxes can overlap. If boxes do overlap, the elements that appear later in the HTML code sits on top of those that are earlier in the page. If you want to control the element that you want on top of the other elements you can use the z-index property. Its value is number, the higher the number the closer that element is to the front. Z-index is sometimes refered to as the stacking context.
Floating Elements
The float property allows you to take an element in normal flow and place it to the left or the right of the webpage as possible. Anything else that sits inside the containing element will flow around it. When using the float property, you should also use the width property to indicate how wide the float element should be. If you don't specify width it might take up the full width of the containing element.