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.

• 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 {
  height: 250px;
}

• 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