Developing a Basic Web Site

1. Developing a Basic Web Site Tutorial 2: Web Site Structures & Links

2. Tutorial Objectives • Create hypertext links between elements within a Web page • Create hypertext links between Web pages • Review basic Web page structures • Create hypertext links to Web pages on the Internet • Distinguish between and be able to use absolute and relative pathnames • Create hypertext links to various Internet resources

3. Creating a Hypertext Document • Hypertext documents contain hypertext links, items that you can select to view another topic or document, often called the destination of the link. • These links can point to: • another section • the same document • to a different document • to a different Web page • to a variety of other Web objects

4. The browser may only show a portion of the page. The user must scroll down to see the rest of the page.

5. Place links at the top of the page to make it easier for the user to navigate to a particular section. To link to an element with an id: <a href=“#classes”> Classes </a> To add an id name to an element: <h2 id=“classes”> Chemistry Classes </h2>

6. Place links at the top of the page to make it easier for the user to navigate to a particular section. To link to an anchor element: <a href=“#classes”> Classes </a> To define an anchor element: <h2> <a name=“classes”> Chemistry Classes</a> </h2>

7. Each page is linked to the next and to previous page, in an ordered chain of pages. Link to previous page In this structure you can jump only from one page to the next or previous page Link to next page Linear Structures

8. Include a link in each page that jumps directly back to the first page, while keeping the links to move to the next and previous pages. second link jumps back to beginning first link jumps to previous page third link jumps to next page third page has three links Augmented Linear Structure

9. It starts with a general topic that includes links to more specific topics. Each specific topic includes links to yet more specialized topics, and so on. In a hierarchical structure, users can move easily from general to specific and back. Hierarchical Structure

10. This figure shows a hierarchical structure in which each level of pages is related in a linear structure. information about the play information about the acts overall structure is hierarchical each level is linear the scenes Combination of Linear and Hierarchical Structures

11. Linking to a Document • To create a link to a document, use the same <a> tag with the href attribute i.e. <a href=“contact.htm”>Contact me</a>. • In order for the browser to be able to locate and open contact.htm, it must be in the same folder as the document containing the link.

12. Linking to a Section of a Document • To navigate to a specific location elsewhere in a document, rather than the top, you can set anchors or ids and link to an anchor you create within the document. <a href=“home.htm#interests”> View my interests </a> • the entire text, “View my interests,” is linked to the Interests section in the home.htm file, via the anchor name “interests” • the pound symbol (#) in this tag distinguishes the filename from the anchor name

13. Linking to Documents in Other Folders • Browsers assume that if no folder information is given, the file is in the same folder as the current document. • When referencing a file located in a different folder than the link tag, you must include the location, or path, for the file. • HTML supports two kinds of paths: absolutepaths and relative paths.

14. Absolute Pathnames • An absolute pathname provides a precise location for a file. • With HTML, absolute pathnames begin with a slash (/) and are followed by a sequence of folders beginning with the highest level folder and proceeding to the folder that contains the file. • Each folder is separated by a slash. • After you type the name of the folder or folders that contains the file, type a final slash and then the filename itself i.e. /tutorial.02/case/parks.htm. • HTML also requires you to include the drive letter followed by a vertical bar (|) i.e. /C|/tutorial.02/case/parks.htm.

15. This figure shows five HTML files that are located in four different folders. The top most folder is the tutorial.02 folder. Within the tutorial.02 folder are the tutorial and case1 folders, and within the case1 folder is the extra folder. Folder Tree

16. This figure shows absolute pathnames for five HTML files. Absolute Pathname

17. Relative Pathnames • A relative path specifies the location for a file in relation to the folder containing the current Web document. • As with absolute pathnames, folder names are separated by slashes. • Unlike absolute pathnames, a relative pathname does not begin with a slash. • To reference a file in a folder directly above the current folder in the folder hierarchy, relative pathnames use two periods (..) i.e. ../tutorial/chem.htm.

18. Relative Pathnames Continued • Relative pathnames make your hypertext links portable. • Unlike absolute pathnames, If you move your files to a different computer or server, the hypertext links will stay intact. • If absolute pathnames are used, each link has to be revised. This can be a very tedious process.

19. This figure shows the relative pathnames and their interpretations for HMTL files and how they would be displayed. Relative Pathnames

20. Linking to Documents on the Internet • A URL specifies a precise location on the Web for a file. • You can find the URL of a Web page in the Location or Address box of your browser’s document window. • Once you know a document’s URL, you can create a link to it by adding the URL to the <a> tag along with the href attribute in your text file i.e. <a href=“ http://www.mwu.edu/course/info.html”> Course Information</a>.

21. Displaying Linked Documents in a New Window • By default, each Web page you open is displayed in the main browser window, replacing the one you were viewing last. • To force a document to appear in a new window, you would use the target attribute in the href tag i.e. <a href=“url” target=“new_window”>Hypertext</a> • new_window is a name assigned to the new browser window

22. Linking to File Transfer Protocol (FTP) Servers • You can create links to other Internet resources, such as FTP (File Transfer Protocol) servers. • FTP servers can store files that Internet users can download, or transfer, to their computers • FTP is the communications protocol these file servers use to transfer information • URLs for FTP servers follow the same format as those for Web pages, except that they use the FTP protocol rather than the HTTP protocol i.e. <a href= ftp://ftp.microsoft.com>Microsoft FTP server</a>.

23. Linking to E-mail • You can identify e-mail addresses as hypertext links. • when a user clicks the e-mail address, the browser starts a mail program and automatically inserts the e-mail address into the “To” field of the outgoing message • The URL for an e-mail address is mailto:e-mail_address. <a href=“mailto:davis@mwu.edu”>davis@mwu.edu</a>