Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML Images & Links

Joe Lennon
October 26, 2012

HTML Images & Links

Basic coverage of how to include images in HTML pages, and how to create links to other pages and to sections within the same page. This slide deck was presented to the BIS1

Joe Lennon

October 26, 2012
Tweet

More Decks by Joe Lennon

Other Decks in Education

Transcript

  1. From last week... Last week we learned about some very

    basic formatting tags that you can use in HTML <strong> <em> <h1> to <h6>
  2. From yesterday... Yesterday you learned how to download images to

    your H: drive Today, you’ll learn how to include those images in a HTML page. You’ll also learn how to create links to other pages and sections within the same page (e.g. Back To Top).
  3. Images You can use HTML to include photos, illustrations and

    other types of images in your Web page. There are three main types of image: JPEG - Good for photos GIF - Good for small images/animated images PNG - Great for transparent images
  4. Images (continued) We can add images to the page using

    the <img> tag. We include images by telling the <img> tag where to find the image using the src attribute. Attributes are key/value pairs of data that tell HTML tags extra information that is not usually rendered in the browser. <img src="myimage.png" />
  5. Images (continued) There are a number of other attributes you

    should always include when using images in HTML width - The width (in pixels) of the image height - The height (in pixels) of the image alt - Alternative text to display if images are off <img src="myimage.png" width="200" height="200" alt="My Image" />
  6. Images (continued) Using the <img> tag introduces us to a

    couple of new concepts. Firstly, you may have noticed that the <img> tag does not have a closing </img> tag. Instead, the tag is self-closing, <img /> (HTML5 allows you to leave out the trailing slash if you like)
  7. Images (continued) The <img> tag also introduces us to the

    concept of a URL (Uniform Resource Locator). A URL is basically a Web address that points to a particular resource on a Web server. When we use the <img> tag, we tell the browser how to find the URL for the image by passing a resource path in the src attribute. Resource paths can be absolute or relative.
  8. Absolute Resource Path An absolute resource path tells the Web

    browser how to find a Web resource using its full URL. For example, to include the Google logo, you’d use the following: <img src="http://www.google.ie/images/srpr/logo3w.png">
  9. Absolute Resource Path Example Go to http://images.google.ie and search for

    “University College Cork”. Find an image you like and click on it. On the right-hand-side, you will see a link to Full-size image - click this to view the image on its own. Copy the URL for the image from the address bar.
  10. Absolute Resource Path Example (continued) Copy the HTML skeleton page

    and add the image to the page as follows: <img src="http://www.transatlanticstudies.com/ images/UCC.jpg" alt="University College Cork"> You can either use the URL from this example, or replace it with the one you found on Google Images
  11. Relative Resource Path A relative resource path tells the browser

    how to find a resource using a path that is relative to the HTML page itself. This is important, you’ll be using relative paths in your projects, so if you don’t understand raise your hand when we’re going through the examples.
  12. Relative Resource Path (continued) Yesterday you learned how to download

    images to your H: drive. You saved images in the following folder location: H:\IS1103\html\images We’ll assume that your HTML pages are saved in: H:\IS1103\html If they’re not, or if you’re not sure, raise your hand!
  13. Relative Resource Path Example If you have a file H:\IS1103\html\mypage.html

    and you want to load a PNG image file located at H:\IS1103\html\images\myimage.png, you’d use the following HTML code <img src="images/myimage.png" alt="Description"> Note that the slash is a forward slash not a back slash!
  14. Relative Resource Path Example (continued) I’m going to go through

    an example of this step- by-step now, so watch carefully how I download the file to the H: drive and include it in my HTML page.
  15. Links To create a link to another HTML page, you

    use the anchor tag <a> You use the href attribute to define the URL of the page you want to link to, and place the content you want to make clickable within the <a> tags. To link to Google, you’d use the following HTML: <a href="http://www.google.ie">Google</a>
  16. Links (continued) Like with images, you can use both absolute

    and relative paths in your links. If you have a folder with two HTML files: page1.html page2.html You can create a link to page2.html in page1.html as follows: <a href="page2.html">Page 2</a>
  17. Links (continued) You can even create links that point to

    specific sections on the same page. This is useful for long pages where you may have a Table of Contents at the top of the page that links to sections further down the page. This is also useful for creating Back to Top links on longer Web pages.
  18. Links (continued) To link to a section, you first need

    to add a section marker, for example: <a name="section1"><h1>Section 1</h1></a> Note that this anchor tag uses the name attribute and does not contain a href attribute. To link to this section marker, you use the following: <a href="#section1">Go to Section 1</a>
  19. Links (continued) To illustrate, let’s create a Back to Top

    example. First, we’ll need to generate a load of random text so we have enough content to make our page scroll. Go to http://www.blindtextgenerator.com/lorem-ipsum to generate dummy text paragraphs. Use the following options: Dummy text: Lorem ipsum Number: 2000 Words, 25 Paragraphs Check Display <p> tags Press Select All and then Copy to Clipboard and then paste it in your file
  20. For Next Week... Create another blog post page example, and

    add lots of paragraphs, headings, images and links to it. Include examples of both absolute and relative resource paths in both your images and links. Create section markers on your page and add a Table of Contents to the top, and a Back to Top link at the bottom of the page.
  21. Next Week Next week, you’ll learn how to create bullet,

    numbered and definition lists in HTML. You’ll also get started working with HTML tables.
  22. Useful Resources Development Resources Codecademy http://www.codecademy.com/ HTML5 Rocks http://html5rocks.com/ Dive

    into HTML5 http://diveintohtml5.info/ Design Resources Dribbble http://dribbble.com/ DribbbleBoard http://dribbbleboard.com/
  23. Mahara Links to slide deck and source code on Mahara.

    http://tucana.ucc.ie/user/view.php?id=396