gotoplanb/mmc3260-s14-exercises — pull request #65 by cwideman (2014-02-02 18:31:21+00:00)
Title: Exercise 2: HTML Links and Images

Exercise 2: HTML links and images

HTML links and images

Links

Relative links go to another page within your same site. For example, we can open the previous exercise in a new tab. Typically you do not want to open links in new tabs, but we have to in this example because the other page doesn't have a link to get back here.

Absolute links go to another site. Remember to always validate your HTML early and often to find typos and syntax errors.

Notice the inclusion or exclusion of `http://` in the anchor element's href attribute. The href attribute is required. The target attribute is optional and defaults to opening links in the current tab.

A complete HTML tag is comprised of a one element and any optional attribute/value pairs.

Images

As with links, we can have absolute or relative images. This is due to how we hook pages to images or other pages. We'd more formally describe the URL (uniform resource locator) as being absolute or relative.

Here's an image loaded with an absolute URL:

Referencing images on other websites does have ethical and legal implications that will be discussed in lecture. The same issues apply to downloading those images. Be sure you have permission to use the work of others.

Now let's display in image that is relative. Specifically this file is in the same folder as this HTML document:

For cleanliness, you'll always have a folder dedicated for your images. This is really the test for you to understand how relative URLs work. The src attribute value needs to tell the current page to go into another folder and find the image. This is done by providing the folder name and a forward-slash to go into that directory: