| Our next phase of Web page design involves the use of hyperlinks and
images. This page discusses hyperlinks, click here
for images.
Over the next week you need to fashion a multipage site which includes the three basic types of links, lists, and a background image. Please save all of your files to your flash drive, both pages and images. Put these items in the same folder/directory on your flash drive and bring them to class. Along with for your independent Web page projects, you will also need to craft a page which critiques sites devoted to a specific field or subject of interest to you. This will not be due until the Web page project is due: giving you plenty of time to apply all of the formatting techniques we learn along the way.
There are three basic types of links which you will need to use: Chapter 6 in the CWRU tutorial explains how to use these tags to create your own links. There are only two link types: 1) a link between two different Web pages; and, 2) a link to a different location within a single Web page.
Type 1: Links to other sections within the same page.All links use anchors. Anchor tags begin with <A NAME=...> and ends with </A>. You will need to put a named anchor tag at the necessary location on the page. Next, you will need an anchor <A HREF=...> tag which will correspond to the <A NAME > location link. You can see this by using document source under the view menu and looking at HTML on this page. You will see: <A NAME="top"> in front of the header at the top of this page. Here is the tag for the link entitled Back to the top of the page. <A HREF="#top">Back to top of page</A>Also notice that the top of the page contains all three types of links. You can return to the first Technology class Web page or go to the next page on links. You can also go to other sections within this page. Back to top of pageType 2: Linking To Another Page Of Yours.There is really no HTML difference between linking to your other pages and other peoples pages. Most often, your pages will reside in the same file folder and be uploaded to your server at some point. You would also want to keep a copy of that folder on your hard drive for editing and archiving purposes. You will work with you pages over time and continue to refine them. When they are ready, you simply upload them to your server and they will replace the old pages. Keeping them all in one folder helps you do your uploading in one step rather than trying to figure out which page got edited when, etc... Here's the link to go back to the first page:
which uses a Type 2 HREF tag. It will look like this on the browser: Go back to the MUS 384/784 Syllabus If both files reside in the same folder you could accomplish the same thing by only using the filename and including the .htm or .html suffix: <A HREF="default.html">Go back to MUS 384/784 Syllabus </A> The main advantage is a little less typing. The disadvantage is if you move your pages to another folder (directory) your links will no longer work. Fortunately, most of the software used for designing Web pages has a tool to update your links. It is still important to understand HTML so that you can check it when problems arise. The software has limits. Most designers flip back and forth between the web page composition software and the HTML code. Back to top of pageType 3: Linking outside your site.The link to the Case Western site, http://www.cwru.edu/help/introHTML/toc.html, includes the full URL: "http://..." in the address tag. This is a "complete" or "absolute" URL address. Including the complete URL is not necessaary and often not desirable.
Here's how the HTML for the preceding paragraph looks:
The link to the Case Western site,<A HREF="http://www.cwru.edu/help/introHTML/toc.html">Notice the underlined text is framed by the anchor tags, <A> and </A>. The actual URL you're linking to appears within the <A> tags. This could have just as easily been written as: Here's the link for theIn this case, the text surrounded by the <A> tags is "tutorial at Case Western" while the HREF itself stays the same. This sentence will display on a browser as follows: Here's the link for the tutorial at Case Western. The hidden HTML contains the full "http://..." as the address.A cool way to check navigational links: You can see where a link will lead by placing the mouse pointer over the link without clicking, then Find the window on your browser where the URL address is displayed- usually at the base of the page. This trick will save you time when you are needing to do a quick link check. For questions, e-mail me by clicking here. |