IT145 HTML and CSS

Week 5

Questions from last time?

Where are you having the most difficulties?

Review--Flow Elements and Phrasing Elements: What can each contain?

Some of you have run into situations where the validator gives an error that results from putting a type of element inside another element that is not allowed to contain that type of element. (The error you get may be a complaint about having an ending tag without a starting tag.) For example, you are allowed to put <p> tags inside a <figure> element, but not the other way around.

Some elements in HTML5 are know as Flow Elements. Examples include: <section>, <article>, <div>, <h1>, <p>, and <blockquote>. SOME of these elements are allowed to contain other flow content, while others are only allowed to contain "phrasing content" (see below). The <section>, <article>, <div>, and <blockquote> items from above are allowed to contain flow content (which includes other flow elements). The <h1> and <p> elements from above are only allowed to contain parsing content (they can't contain other flow elements). Here is a link to a page that specifies what each element is allowed to contain (follow the links on that page).

Some HTML5 elements are known as Phrasing Elements (which are a subset of flow elements). Examples include: <em>, <strong>, and <span>. For the most part, these phrasing elements can only contain phrasing content, which includes other phrasing elements (but they cannot contain flow elements).

Some phrasing elements and flow elements are empty elements that can't contain any other elements (examples are the phrasing elements <img> and <br>, and the flow element <hr>).

The <a> element (which we will learn about today) is a phrasing element, but it is "transparent," meaning that it can contain either flow elements or only phrasing elements depending on what the parent element of the <a> element can contain.

Some HTML5 element are known as Metadata Elements, such as <link> and <style>, which generally don't contain page content.

Chapter 6: Links

The World Wide Web uses the concepts of hypertext, with hyperlinks linking Web pages together. Hyperlinks (or simply "links" as they are called) can be applied to text, block elements (in HTML5), images, or even multiple parts of one image.

A link has two ends, called "anchors": the starting point (the link text or image that you click on), and the destination.

Links are generally created with the <a> tag (a is for anchor), but can also be created with the <area> tag in an image map.

A link is made up of three parts:

destination — This generally specifies what other web page the user will go to when they click the link, but it can also specify an email address, a file to download, an image to display, a scripted action to perform, or other things. The destination is generally in the form of a URL. When the user points at the link, the destination URL shows up in the status bar of most browsers (if the status bar is showing).
label — This is the text or image that the user clicks on to follow or activate the link. By default in HTML, a text link appears blue and underlined, but the color and underlining behavior is controllable with CSS. In most browsers, when the user points at the link's label, the shape of the mouse cursor changes to a hand with a pointing finger (although this behavior is also controllable with CSS).
target — This specifies where the new page will be displayed. It is usually left out, in which case the new page replaces the page in the current window (or tab) in the browser. Previously, the target attribute was primarily used in a frames layout to specify which frame (of several within the browser window) the new page will appear in...but HTML5 does not have frame layouts. HTML5 does allow the target attribute for specifying that the linked page will open in another window (or another tab in a tabbed browser).

Linking to Other Web Pages Within Your Own Site

Generally, you link to another page within your own Web space by using relative a URL in the href (hypertext reference) attribute of the link. For example, the link:

<a href="other.html">Go To My Other Page</a>

...would display the link text Go To My Other Page that links to a file named "other.html", which is located in the same directory (folder) as the current page that contains the link.

REMEMBER! Do NOT use spaces in the names of your web page files, because this would cause problems on Unix-based servers. Also, you may want to limit your names to all lowercase letters for simplicity. You can use capital letters if you want, but then you have to remember to type the names of files into the href attribute exactly as the file names are capitalized. Avoid using special symbols other than hyphen ( - ) or underscore ( _ ) in your filenames, and it may be best to avoid the underscore as well.

REMEMBER! When you create Web pages, your Web page file names should end in either .html or .htm (it's best to pick one and be consistent).

ALSO: It's important that every page on your Web site have links back to other pages in your site (at least to the main page). Don't just count on a user being able to click the Back button in their browser to return to the previous page in your site that they were on BECAUSE they may not have gotten to your page by following a link from another page of your site. Perhaps they followed a link to your page that some other Web site author made and added to his/her site. Or perhaps they found your page using a Web search engine. In either case, the can't use the Back button to get to any other page on your site. So always include links on your pages that take the user back to the most useful other page(s) in your site for them to navigate around the rest of your Web site.

To link to another page that is located in a subdirectory (subfolder) within your own Web space, you would use relative a URL as shown in this example:

<a href="rockets/interceptor.html">Tom's Interceptor</a>

...which displays the link text Tom's Interceptor that links to a file named "interceptor.html", which is located in the rockets directory (folder) that is located in the same directory as the current page.

To link FROM a page that is located in a subdirectory (subfolder) to a page that is one directory level higher up, you use ../ in the relative URL. For example, to get back from the interceptor.html page (used in the above example) to this page you are currently reading (which is named index.html, and is located in the week05 folder along with the rockets folder), I used:

<a href="../index.html">Return to Links Lecture Page</a>

...which brings me up one directory level (out of the rockets folder, and up into the week05 folder) where it finds the index.html (which you are reading).

Note that you can use multiple ../ to move up multiple directory levels. For example, to link from the interceptor.html file (in the previous example) to the lecture page from last week, I would use the relative URL: ../../week04/index.html
(This jumps me up two directory levels, from the rockets directory into week05 directory and then into public_html directory, and then jumps down one level into week04 directory to grab the index.html file there. Fun!)

You can link to a directory by specifying a URL that ends with a slash ( / ). For example, from this page (the index.html page in the week05 directory of my site), I could link to last weeks lecture by using the link:

<a href="../week04/">Week 4 Lecture</a>

...which takes me to Week 4 Lecture by jumping up one level in the directory structure (into my public_html directory), and then jumping down into the week04 directory. And because the link does not specify a specific file, the Web Server will send out the default file from the week04 directory (last week's index.html file). If there had been no default file, the Web Server might return and error, or it might display the contents of the directory, depending on how it is configured. Default files are usually named index.html or default.htm, depending on how the server is configured.

To link to a Web page that is outside your Web space, use an absolute URL. For example, to get to the UNM-LA Home page I can use:

Note that it would also work if I leave off the index.html part, since that is the default page from that server.

In general, you would NOT use absolute URLs to link to pages on your own site because if you ever have to move the site to a different server, you'd then have to change all the absolute URLs to our pages (whereas relative would continue to work fine on the new server).

It's a good idea to keep link labels short. You should also avoid using "click here" as a link label, and instead choose words in the natural flow of the sentence describing where the link will go. Examples:

AVOID: Click here to learn more about Tom' Interceptor.

BETTER: You can learn more about Tom's Interceptor.

HTML5 Block-Level Links

New in HTML5, you can apply links to block-level elements. Remember, the term "block level" is discouraged, so this is an unofficial name, but it means that you can make whole paragraphs or sections of your document into links. This was not valid in older versions of HTML -- you were supposed to only put links on inline elements. But browsers allowed putting links on block elements anyway, so the new HTML5 feature will actually work in older browsers.

Here is an example of a block-level link:

<p>Tom built this scaled-up version of the old Estes Interceptor model rocket kit. His version is approximately 3X larger than the original. The scale-up is 4 inches in diameter and flies on H motors.</p>

</a>

Which shows up as:

Tom built this scaled-up version of the old Estes Interceptor model rocket kit. His version is approximately 3X larger than the original. The scale-up is 4 inches in diameter and flies on H motors.

This looks pretty bad, because of the default text color and the underlining that makes the paragraph hard to read. So I would not advise using block-level links until we learn the CSS needed to control the look of your links (the color, and whether they are underlines or not).

In general, it is not a good idea to make too large of a section of your page into a link, for accessibility reasons.

Titles and Rel Attributes

We discussed previously that the title attribute can be placed in a tag to pop up a screen tip whenever the user points to the element with the title attribute. This is especially useful with links since it can be used to give users some information about where the link will take them. Example:

Which shows up as below. Point at it (don't click).

UNM-LA

You will also notice the rel="external" attribute and value in the example above. This doesn't actually DO anything, but it is a way of specifying that the link points to a Web page that is not part of your Web site. There are many values that have been proposed for use with the rel attribute (such as: author, co-worker, friend, appendix) and which may be included in the HTML5 standard when it's finalized. For now, none of these do anything, but they do provide more information content to your page that could be exploited. I think the rel="external" might be useful if you needed to search for all of the external links in your pages (in case you wanted to check to see if they still link to existing pages).

Linking to Anchors

On a long Web page (like this one!), it is often handy to be able to link to a specific spot on the page (a simple link to a Web page with take you to the top of the page). You can use this to create an index to allow users to jump to different sections of a Web page (like I have the handy "Assignment" link at the top of these Lecture pages).

In older versions of HTML, you would create a "named anchor" using the <a> tag and the name attribute, but this method is not allowed in HTML5. It looked like this:

<a name="anchorname"></a> or <a name="anchorname" />

In HTML5, you should instead link to an element with a id attribute, like this:

<h2 id="asg">Assignment 5</h2>

HTML5 will still allow you to link to link to the old-style named anchors that are on other people's old pages (see below), but you should not use the <a> tag to create named anchor points on your pages written using HTML5.

To link to an anchor point on the current page, you use a link like this:

...where the label after the # is the id of the element you wish to jump to. The above example code will take you to the Top of This Page (because I put the id "pagetop" on the WEEK 5 heading line at the top of this page.

NOTE! You must include the pound sign (#) in the URL of the link. You do NOT put in the pound sign when creating the id name for the anchor point.

To link to an named anchor point on a different page, you append the pound sign (#) and the name of the anchor to the URL for that page. For example this code:

<a href="other.html#fun">Middle of My Other Page</a>

...will link you to the "fun" anchor somewhere near the Middle of My Other Page.

Similarly, this code: <a href="other.html#cat">Cat id Spot</a> (which is inserted at the end of this paragraph) will link you to an <h2> near the bottom of my other.html page that has id="cat" assigned to it. Go to the Cat id Spot

You can link to anchor points that already exist in other people's Web pages using an absolute URL. Of course, you can't actually create the anchor points on their pages...you can only use ones that already exist. For example, by appending "#External_links" to the URL for the Wikipedia page about NASA (http://en.wikipedia.org/wiki/NASA), I can make a link that jumps directly to the External Links section of their NASA page. (To figure out how to do this, I viewed the source code for that Wikipedia page and found that the external links section had the id="External_links" assigned to it.)

Note: If you try to link to an anchor point on a short page, you may not see anything happen (since the anchor point may already be visible). If you link to an anchor near the bottom of a page, the browser may only be able to show the page with the anchor appearing somewhere in the middle of the window (instead of at the top, as would normally be the case) because there is not enough page content to show below it to bring the anchor point to the top of the window. You can see this effect by clicking on the link to a line low on the page of my example page.

Targeting Links

Targeting links allows you to specify what window (or tab, in a tabbed browser) the new page will appear in . If you don't specify any target, the new page appears in the current window (or tab). In older versions of HTML, targeting was primarily used for Frames-based Web pages so that clicking on a link in one frame caused the linked page to appear in a different frame. HTML5 does not support frames (other than iframes, which can be targeted by links), so the target attribute is not used this way in HTML5.

But... targeting links still works in HTML5 for having new pages open in a new browser window (or in a new browser window tab, in the case of tabbed browsers). Targeting was not allowed in XHTML Strict pages, but they work fine in XHTML Transitional (where the W3C recommended using JavaScript to open links in a new window).

The textbook speaks derisively about using the target attribute to open pages in new windows, but I still think it is useful under certain conditions. For example, if you have a customer browsing a page displaying information about your product, and you wish to link to a government site with regulations your product adheres to, you wouldn't want the user to click on the link and maybe get caught up in reading the regulations (or following links there) and ending up not coming back to your product page. But providing the link to open the page in another tab provides the user with the information and still keeps your page open in a tab in their browser.

To have a link open a page in a new window (or tab), use the target attribute with the value "_blank" (don't forget the underscore character) like this:

Try out this link: UNM-LA Home and the UNM-LA home page should open in a new browser window or tab. Exactly what will happen (Will the page open in a new window or tab? Will that new tab become active or leave the original tab active?) depends on the Web browser and its settings.

You can also target a specific name for a window such as target="windowname", and then if you have multiple links on your page that target this same window name, each subsequent link would open its page into that same window (instead of making a new one).

Creating Keyboard Shortcuts

You can add a keyboard shortcut to a link on your Web page by using the accesskey attribute. This allows the user to activate the link by pressing keys instead of clicking on the link. This can be important for some disabled users who may have to do everything by keyboard when surfing. For example:

<a href="http://www.unm.edu" accesskey="u">UNM Main Campus [u]</a>

...would set the access key to "u" for that link. Notice that I have listed the access key in the link label because otherwise a user would have no idea it's there. Here are some links with access keys:

UNM Main Campus [u]
UNM-Los Alamos [l]
NASA [n]

To access these links via your keyboard on a PC, press Alt plus the key specified. Or you may need to press Shift+Alt plus the specified key, depending on your browser. Or, in Internet Explorer on the PC, using Alt plus the access key only highlights the link, and then you must press the Enter key to activate the link.

To access these links via your keyboard on a Mac, press Control plus the key specified. In Safari under some version of the Mac OS, you may have to press Control + Option plus the key specified.

Keyboard shortcuts do not work in the Opera browser (at least in the versions I last tried).

Note that keyboard shortcuts may cause problems if they override a regular keyboard shortcut used on the user's computer.

Setting the Tab Order for Links

In most browsers, you can use the Tab key to select the links on a Web page, jumping from link to link, and the press Enter (or Return) to activate the link. (Some browsers may require you to press Option-Tab or Alt-Tab to do this. Using Shift-Tab may move you backwards through the links.) But the links may not highlight in the order you desire (perhaps you want all the links in a sidebar to highlight before the links in the main page area highlight...or maybe you want the links to highlight down one column before going over to the next column). Normally, the links will highlight in the order that they appear in the HTML code. You can control the order that the links highlight by using the tabindex="n" attribute, where n is a number that specifies the order:

<a href="http://www.unm.edu" tabindex="5">UNM Main Campus (u)</a>

Note: The three links above (in the accesskey example) have their tabindex values set as 5, 4, 3 from top to bottom) so you can see the tab effect.

The tabindex can have any integer value fro 0 to 32767. The lower numbers are first.

Setting a negative tabindex removes that link from the tabbing sequence.

Items with the same tabindex will highlight in the order they appear in the HTML code (once the tabbing sequence reaches that group).

Links that don't have a tabindex are highlighted after all links that do have a tabindex (or in the Opera browser, only the links with a tabindex are highlighted at all).

NOTE: Browsers may highlight other items (such as the browser's address field and search field and items on the favorites bar) before going on to highlight links on the page.

NOTE MAC USERS: In Safari, the default keys for tabbing through the links are Option-Tab instead of just Tab (but this can be changed in the Preferences). In Firefox on the Mac, the tabbing through the links may not work unless you first go to the System Preference pane for Keyboard and select the All Controls button under Full Keyboard Access.

Using Images as Links

You can use an image as the label for a link by enclosing the <img> element within the <a> element, as shown in this example:

Some browsers (such as Internet Explorer) show a border around any image that is a link (with the color of the border being the default link color). This is usually not desirable because the border or border color will clash with your page design. You can prevent the border from appearing by including the border="0" attribute in the <img> tag. BUT, the border attribute of the <img> tag has been deprecated in HTML5, so you should use CSS formatting to remove the border (you would set the border property to none). The image below has border="0" for comparison with he image link above (remember: your browser may automatically suppress the default borders around images used as links, so you may see no difference between the tow links).

You can also include text inside the <a> element that encloses the image if you want both text and graphics for the same link:

<a href="http://www.la.unm.edu">
<img src="UNMLAlogo.gif" alt="UNM-LA logo" align="middle"
width="180" height="124" />UNM-Los Alamos
</a>

UNM-LA logo UNM-Los Alamos

Thumbnail Images

You can make an image-intensive Web page download much faster by displaying thumbnails (small versions of the images) that are links to the larger versions of the images, instead of display the large images themselves on the page. Example:

Click on the image to see a larger version.

You will notice that the link above links directly to an image file (and not to a Web page). This will display the image in the browser window. It may be preferable to link to a Web page that contains the larger image so that you can provide text to describe the picture and control the background color of the page.

Image Maps

You can make a single image have multiple clickable regions that can each link to a different page. Example:

Click an Object Below to Learn More About it!

The HTML code for making this client-side image map is shown below. First there is the image element, and then the map element. (This is called a "client-side image map" to distinguish it from a "server-side image map" -- client-side map interaction is handled by the Web browser, while a server-side image map requires interaction with a Web server to handle the clicks on the hotspots.)

</map>

The image tag includes the usemap attribute that specifies where the image map is located (be sure to include the pound sign # ).

The image map contains the area elements that define the locations of the clickable areas (specified in pixels from the 0,0 point in the upper-left corner of the image) and where they link to (and also alt text for each region. Note that if there are any overlapping regions (the Jupiter and Europa regions overlap in my example), the first region that includes the clicked point (in the order listed in the map) is the one selected.

The area element can specify a rectangular region (shape="rect") which is described by the coordinates coords="x1,y1,x2,y2" where x1,y1 is the upper-left point of the rectangle, and x2,y2 is the lower-right corner.

The area element can specify a circular region (shape="circle") which is described by the coordinates coords="x,y,r" where x,y is the center point of the circle, and r is the radius of the circle.

The area element can specify a polygon region (shape="poly") which is described by the coordinates coords="x1,y1,x2,y2..." where xn,yn are the vertex points of the polygon.

If you add title attributes to to the area elements, tool tips will pop up when the user points to the clickable regions. I did that with the Jupiter region in the example above.

The hard part is figuring out the coordinates of the clickable regions. You can do this in a image editing program, such as Photoshop, that can be set to display the coordinates of the cursor placed over the image. You can also do this using the Web Developer toolbar in Firefox (if you have it installed). Open the image in the Firefox browser. Then, choose Miscellaneous | Display Ruler from the Web Developer toolbar. You can now click and drag in the image to select rectangular areas, and then read the start (upper-left) and end (lower-right) points of the rectangle from the toolbar. NOTE! The x and y values will be displayed relative tot he upper-left corner of the browser window, so you will need to position a box in the upper-left corner of your image to read the coordinates of that corner, and then subtract those values from any x and y coordinates you measure with the box tool.

I will demonstrate using the Web Developer ruler in class.

Here is an image I made for a page describing different parts of a model rocket. I will us this image to demonstrate how to make an image map. You can see the completed Model Rocket Parts page if you are interested.

model rocket parts

Top of Page

Assignment 5 - Due Saturday, Sept. 28

You will build several Web pages (you will need at least three) that you link together using the elements we have covered in this lecture. The main page for this assignment should be where you do most of the work (all other pages in the assignment should be accessible from that main page). Use the HTML5 DOCTYPE. You must include the following:

Make a link from your main page to another page in the same directory (folder) in your Web site. Also make a link back from that page to your main page.
Make a link from your main page to another page that is located is a subdirectory (subfolder) in your Web site. Also make a link back from that page to your main page.
Make a link from your main page to a Web Page that is outside your Web space (to the UNM-LA home page, for example).
Make an image into a link to another Web page.
Make a small thumbnail image that links to a larger version of that image.
Link to an anchor point on the same Web page (include enough filler text paragraphs on the page as needed to see the browser window jump to a new location on the page when you click this link).
Link to an anchor point on a different Web page.
Make a link that opens my IT145 course home page in a new window (or tab).
Make at least one link that has a keyboard shortcut (and include text to tell me what that shortcut key is).
Make an email or file download link.

Upload the pages to your web space on ftp.unm.edu using the web tools discussed/used in class or similar tools. You may name the page whatever you like.

Validate your pages using the W3C HTML validator at: http://validator.w3.org/
If your page does not validate (because of deprecated tags or attributes), explain why in your message to me (but DON'T leave validation errors in your page that are due to typos or other HTML mistakes -- the validator is to help you find and correct these errors).

Send an email to tbeach@unm.edu that includes the URL to your main page for this assignment.

NOTE! The Subject line of this email should be "IT145 YourName Asg. 5"

You will be graded on:

All the links specified above must work correctly
How many different Web elements you used from this lecture.
How many different element attributes you used.
You sent the correct URL in your email.
The pages validate using the W3C page validator (or any validation errors due to deprecated tag usage are explained).

Extra Credit:

Make an client-side image map with at least three clickable regions that link to other pages.

Reading Assignment:

Read Chapters 7 and 8 of HTML5 and CSS3 (for next week's lecture)