| Both sides previous revision
Previous revision
Next revision
|
Previous revision
|
en:web_development:media:images [2021/12/16 17:48]
mag |
en:web_development:media:images [2023/08/16 09:33] (current)
|
| * Click on 'PHP' in the bottom right corner and change it to 'HTML'. This will provide the automatic support for building HTML code, which we'll focus on initially. | * Click on 'PHP' in the bottom right corner and change it to 'HTML'. This will provide the automatic support for building HTML code, which we'll focus on initially. |
| * Add tags for <html><main></html> between the two PHP code blocks. | * Add tags for <html><main></html> between the two PHP code blocks. |
| | * We'll also continue using the following files. |
| | * [[https://techschool.murraygunn.id.au/webdev/classes/layout/4/cabecera.php|header.php]] |
| | * [[https://techschool.murraygunn.id.au/webdev/classes/layout/4/menu.php|menu.php]] |
| | * [[https://techschool.murraygunn.id.au/webdev/classes/layout/4/pie.php|footer.php]] |
| | * [[https://techschool.murraygunn.id.au/webdev/classes/layout/4/style.php|style.css]] |
| |
| ==== Images ==== | ==== Images ==== |
| <code> <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="tree at sunset" title="this was the first image listed on Google when I checked"></code> | <code> <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="tree at sunset" title="this was the first image listed on Google when I checked"></code> |
| * Save and upload the file again and try hovering your mouse over the image to see the title. | * Save and upload the file again and try hovering your mouse over the image to see the title. |
| | |
| | ==== Image Size ==== |
| | |
| * Your image might be too big for the page, so let's limit the size. Add the following code to 'style.css'. | * Your image might be too big for the page, so let's limit the size. Add the following code to 'style.css'. |
| <code>img { | <code>img { |
| height: 250px; | max-height: 250px; |
| | }</code> |
| | * <html>max-height</html> is like <html>height</html> but will allow elements with smaller heights to remain unchanged. |
| | * Save your file, upload and notice the change (if your image was taller than 250px). Images scale both height and width when you change only one dimension. Using <html>max-height</html> and <html>max-width</html> together will also allow scaling without distorting the image. |
| | |
| | ==== Padding and Margin ==== |
| | |
| | * Before we go any further, let's improve the overall look of the page. We need some space between each of the elements. |
| | * Let's start with 20px padding in the <html><main></html> element and removing the background color. |
| | <code>main { |
| | border: darkgreen solid 2px; |
| | position: absolute; |
| | top: 100px; |
| | left: 16%; |
| | right: 0px; |
| | bottom: 80px; |
| | overflow: scroll; |
| | padding: 20px; |
| | }</code> |
| | * Save, upload and check that if you like. |
| | * Then let's add a border to the image so we can see what we're doing. |
| | <code>img { |
| | max-height: 250px; |
| | border: solid 2px green; |
| | }</code> |
| | * I'd like more space between the image and the border. Play around with thepadding to see what looks good to you. |
| | <code>img { |
| | max-height: 250px; |
| | border: solid 2px green; |
| | padding: 10px; |
| | }</code> |
| | |
| | ==== Rounded Corners ==== |
| | * There's one last thing we can do to change the way images look. We can round the corners. |
| | <code>img { |
| | max-height: 250px; |
| | border: solid 2px green; |
| | padding: 10px; |
| | border-radius: 30px; |
| }</code> | }</code> |
| * | * Try a few values of <html>border-radius</html>. Anything less than your padding value will only round the border. Anything more than your padding value will also round the image corners. Which look do you like best? |
| |
| ==== Float ==== | ==== Float ==== |
| <p>Mauris ac sapien justo. Curabitur a feugiat velit. Donec non mi ac turpis faucibus hendrerit. Nulla luctus est lectus, nec rhoncus nisi eleifend ac. Nullam iaculis mi eget faucibus mattis. Nullam nec cursus nisi. Donec vel nunc ac felis sodales tincidunt sed condimentum mauris.</p> | <p>Mauris ac sapien justo. Curabitur a feugiat velit. Donec non mi ac turpis faucibus hendrerit. Nulla luctus est lectus, nec rhoncus nisi eleifend ac. Nullam iaculis mi eget faucibus mattis. Nullam nec cursus nisi. Donec vel nunc ac felis sodales tincidunt sed condimentum mauris.</p> |
| <p>Praesent lobortis dictum purus, convallis dapibus velit malesuada non. Sed sit amet magna sagittis, maximus odio in, mattis erat. Phasellus ultricies risus turpis, vitae tempor diam finibus eu. Sed luctus augue purus, eget consectetur sapien egestas et. Sed eget tristique mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum rhoncus vehicula pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean placerat arcu vitae nisi vehicula semper. Cras sit amet risus dolor.</p></code> | <p>Praesent lobortis dictum purus, convallis dapibus velit malesuada non. Sed sit amet magna sagittis, maximus odio in, mattis erat. Phasellus ultricies risus turpis, vitae tempor diam finibus eu. Sed luctus augue purus, eget consectetur sapien egestas et. Sed eget tristique mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum rhoncus vehicula pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean placerat arcu vitae nisi vehicula semper. Cras sit amet risus dolor.</p></code> |
| * Save and upload the file. You'll see that the text all sits below the image | * Save and upload the file. You'll see that the text all sits below the image. |
| | * We can make the text flow around the image by making the image 'float'. |
| | <code> float: left;</code> |
| | * Save and upload the file and take another look at the page. Now the text fills up the space to the right of the image and continues across the full space below it. |
| | * If we'd set <html>float: right</html> then the image would sit to the right and the text would fill up the space to the left. Try that yourself. |
| | * Let's add some space around the image so the text doesn't abut it. Rather than setting it all to the same value (try that to see that the image is no longer aligned to the text), let's leave the left margin as 0px; |
| | <code> margin: 20px 20px 20px 0px;</code> |
| | * When we split values out like this, they apply clockwise from the top, so the left value is last. If you've left your image floating to the right, you'll probably want different code. |
| | <code> margin: 20px 0px 20px 20px;</code> |
| |
| | ==== Codigo Final ==== |
| | * [[https://techschool.murraygunn.id.au/webdev/classes/media/1/media.es.php|media.php]] |
| | * [[https://techschool.murraygunn.id.au/webdev/classes/media/1/style.php|style.css]] |
| | * [[https://techschool.murraygunn.id.au/webdev/classes/media/1/media.php|result]] |
| |
| | [[en:web_development:media:video|Next: Video Players]] |
