Web Development Lesson 6 - Media

In this exercise you will

1. add images to a page of text
2. wrap the text around the images

• Create a file in your directory called 'media.php'.
• Add the relevant PHP code to set the page up.

<?php
    include("header.php");
    include("menu.php");
?>

<?php
    include("footer.php");
?>

• 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 <main> between the two PHP code blocks.
• We'll also continue using the following files.
• header.php
• menu.php
• footer.php
• style.css

• Go to Google and search for any image you like. Select it, then right click on the enlarged image at the right of the screen and select 'Copy Image Link'.
• In your 'media.php' file, add code for an image between the <main> tags by typing 'img' and selecting the top option.

<img src="" alt="">

• src is the source of the image and should either be a full URL (for images hosted on other sites) or a relative file name (for images hosted on your server). Paste your image link here.

        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="">

• alt is alternate text to be used whenever an image can't be displayed. Perhaps the site is unavailable or the user is using a screen reader. It should briefly describe the image.

        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="tree at sunset">

• To see the alternate text, remove the 'h' at the beginning of the link and refresh your page. Save and upload the file using FileZilla.
• Restore the 'h' and save your file again. Check that the file appears properly.
• There is another attribute that can be useful for images. Sometimes we want to include more detail that doesn't interfere with the flow of the text. For this we use title.

        <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">

• Save and upload the file again and try hovering your mouse over the image to see the title.

• Your image might be too big for the page, so let's limit the size. Add the following code to 'style.css'.

img {
  max-height: 250px;
}

• max-height is like height 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 max-height and max-width together will also allow scaling without distorting the image.

• 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 <main> element and removing the background color.

main {
  border: darkgreen solid 2px;
  position: absolute;
  top: 100px;
  left: 16%;
  right: 0px;
  bottom: 80px;
  overflow: scroll;
  padding: 20px;
}

• 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.

img {
  max-height: 250px;
  border: solid 2px green;
}

• I'd like more space between the image and the border. Play around with thepadding to see what looks good to you.

img {
  max-height: 250px;
  border: solid 2px green;
  padding: 10px;
}

• There's one last thing we can do to change the way images look. We can round the corners.

img {
  max-height: 250px;
  border: solid 2px green;
  padding: 10px;
  border-radius: 30px;
}

• Try a few values of border-radius. 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?

• Now let's add some text to the page. Paste the following code below the image.

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec enim sem, efficitur et fringilla et, pretium at turpis. Nunc interdum, dolor vitae aliquam accumsan, lacus sapien varius tortor, fringilla lobortis turpis tortor et ante. In hac habitasse platea dictumst. Nullam elementum blandit tincidunt. Sed semper finibus massa, non mollis nulla mollis et. Nunc lectus metus, tempor nec dui ut, pharetra eleifend massa. Ut tempus porta metus, eget aliquet ligula tempor hendrerit. Curabitur vestibulum elit in commodo viverra. Nullam est orci, suscipit vitae tincidunt porta, lacinia sed nulla. Quisque ex eros, consectetur id metus sit amet, molestie tempor risus. In facilisis consequat eros in convallis. Nulla nec imperdiet nibh. Suspendisse consequat sit amet mi in imperdiet. Nullam eget aliquet metus. Vestibulum non fermentum eros. Cras sodales, nisl eget congue interdum, massa nulla porta lectus, quis suscipit est ipsum sit amet ante.</p>
        <p>Morbi gravida malesuada odio, sed pretium libero aliquam vitae. Suspendisse potenti. Nunc eget leo vulputate, dictum eros non, gravida lorem. In id nunc id orci ornare porttitor. Maecenas id laoreet risus. Aenean lacinia dignissim volutpat. Morbi et ligula ac purus gravida aliquet. Integer feugiat sapien ac porttitor iaculis.</p>
        <p>Phasellus pretium sit amet tellus ac tincidunt. Curabitur in ligula massa. Vivamus in urna suscipit, vehicula velit et, mollis purus. Aliquam sed risus vel urna tristique aliquam. Etiam egestas lectus arcu, quis lobortis diam luctus in. Vivamus id diam metus. Nulla bibendum dolor sit amet egestas semper. Praesent facilisis pellentesque condimentum.</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>

• 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'.

  float: left;

• 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 float: right 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;

  margin: 20px 20px 20px 0px;

• 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.

  margin: 20px 0px 20px 20px;

• media.php
• style.css
• result

Next: Video Players