Developing a Basic Web Site Maureen Smith Professor, Saddleback College Tutorial 2

Lesson Plan n Review n How to FTP n Tutorial 2 – Developing a Basic Web Site –Session 2.1 –Session 2.2 –Session 2.3 n Review

Objectives n Define links and how to use them n Create element ids to mark specific locations within a document n Create links to jump between sections of the same document n Describe how to set and use anchors for backward compatibility with older browsers

n List different types of Web site structures and how to employ them n Create links to sections within a document n Define absolute and relative paths n Interpret the structure and contents of a URL

n Link to a page on the Web n Link to FTP servers, newsgroups, and addresses n Open links in a secondary window n Work with popup titles and access keys n Create semantic links n Create link elements

Session 2.1 n In this session, you will create anchors on a Web page that let you jump to specific points in the document –After creating those anchors, you will create and then test your first hypertext link to another document

Working with Links n Having added new content to the chem page, it’s too long to fit in a window –When opening it, the user sees only a small portion and must scroll –We need a quicker way to access the info not seen n A user can select a link in a page to view another topic or document

–Called the link’s destination –Let’s add links that point to the different sections by listing them at the top and formatting them as links –Users can then click a link to move directly to the section that interests them n Three steps: –List the section names at the top

–Mark each section using an id attribute –Link the text you added in step 1 to the sections you marked in step 2 n Let’s create a list of the section names, separated by a bullet –See tutorial2/chem1.htm

Creating Element ids n Now we need a way to identify those elements in the document –One way is through the id attribute Chemistry Classes –Assigns the id name “classes” to the h2 heading “Chemistry Classes” –id names MUST BE UNIQUE

Browser will report an error if it finds duplicate id names They are not case sensitive n Let’s add ids to the h2 headings –We’ll use id names classes, grading, app, and safety –See tutorial2/chem2.htm n Then we will create links to those sections

Creating Links within a Document n Let’s link the list entries to the four sections –When you click one of the links at the top, browser will display corresponding section without scrolling –See figure 2-5 n To create the link, enclose the content in an tag and use href attribute to identify the link target

content –where id is the value of the id attribute for the destination and content is the hypertext Classes n Not limited to text—an image can be a link

n A link should not contain any block-level elements; but you can put them on the outside View Class List n Cannot place one link inside another –But can place most inline elements in a link

n Let’s change the entries in the list to links pointing to the different headings –See tutorial2/chem3.htm –Then test your links

Creating Anchors n Older browser versions do not support ids as link destinations –Have to insert an anchor element by using “name” instead of “id” –See page 63 if your audience will mostly have older versions n We’re done adding links to the chem page

Session 2.2 n Stephen wants two more pages added to his site –One showing contact info and one listing his favorite chemistry links –Each page must contain links to the other pages so users can easily move around within the site

Working with Web Site Structures n Before you set up links for a site, it’s worthwhile to map out exactly how you want the pages to relate –Called storyboarding –A diagram of the site’s structure

–Shows all pages in the site and how they are linked together n Web sites use several different structures –Examining them can help you decide how to design your own sites

Linear Structures n An online version of a famous play would have links between individual scenes –This would use a linear structure in which each page is linked with the pages that follow and precede it in an ordered chain

n Linear works best for pages with a clearly defined order –But difficult as the chain of pages increases in length –Can modify to make it easier to return immediately to opening page, rather than backtracking, by using an augmented linear structure

–Each page contains an additional link back to opening page Augmented linear structure

Hierarchical structures n A hierarchical structure starts with a general topic that includes links to more specific topics –Each specific topic includes links to yet more specialized topics, etc –Users can easily move from general to specific and back, but not from specific to specific

Hierarchical structure

Mixed Structures n As a site becomes more complex, may use a combination of structures –Includes both hierarchical and linear –See Figure 2-12 n Search results can point to any page and will need a way to quickly understand what your site contains and how to get at it

–So each page should contain at minimum a link to home page –May want to use a site index—a page containing an outline of entire site and its contents –See Figure 2-13 for a confusing structure

Creating Links between Documents n To move between the three pages in the chem site, let’s create links between each page and the other two pages –See Figure 2-14 n Will use files named conttxt.htm and linkstxt.htm from your data files –May want to rename them as contacts.htm and links.htm

Linking to a Document n Begin by inserting links in chem page to the other two pages Contact me n Must be located in same folder as chem file in order for the browser to find it –Filename is the target—no id needed n Filenames are case sensitive on some operating systems, but not on others

–To avoid a problem, use lowercase for all files on a web site and avoid special characters like blanks and slashes –Keep them short so users are less apt to make typing errors n Let’s add links to the Contact and Links pages –See tutorial2/chem4.htm—then test

n Now we need similar links in the contacts and links files that allow users to open the other two pages –See tutorial2/contacts.htm –See tutorial2/links.htm –Then test

Linking to a Location within another Document n Stephen also wants the contact and links pages to contain links to the various sections of the home page Classes –See tutorial2/contacts.htm –See tutorial2/links.htm –Then test

Linking to Documents in Other Folders n None of our links have specified a location of the destination document –Browsers assume that if this info is not included, the destination document is located in the same folder as the document containing the link –This is not always the case! n Must specify file’s location or path so browsers can find it

–HTML supports two kinds of paths: absolute paths and relative paths

Absolute Paths n The absolute path shows exactly where the file is on the computer –In HTML, you start every absolute pathname with a slash (/) –Then you type the folder names on the computer, starting with the topmost folder in the folder hierarchy and progressing through the different levels of subfolders –Separate each folder name from the next with a slash

–The pathname, from left to right, leads down through the folder hierarchy to the folder that contains the file –After you type the name of the folder that contains the file, you type a final slash and then the filename –See Figure 2-26 n If on different drives, must include drive letter as well

/C|/faculty/dube/class/chem.htm n Don’t have to include drive letter if destination document is on same drive as the document containing the link

Relative Paths n If a computer has many folders and subfolders, absolute pathnames can be long, cumbersome, confusing –For that reason, most Web authors use relative pathnames in their hypertext links –A relative path gives a file’s location in relation to the current document

–Unlike absolute pathnames, a relative pathname does not begin with a slash –To reference a file in a folder above the current folder in the folder hierarchy, relative pathnames use two periods (..) –To specify a different folder on same level (sibling folder), move up folder tree using double period and then down using name of sibling folder

–See Figure 2-27 n Should almost always use relative paths –Are portable—if you move files to a different computer or server, can move entire folder structure without changing relative pathnames you created –If you use absolute, would have to revise each link to reflect new location

Changing the Base n The browser resolves relative pathnames by default based on location of current document –Can change by specifying a different base in document’s head – –where path is folder location that you want browser to use

Session 2.3 n In the links.htm file, Stephen has listed some Web sites that may be useful –Let’s change these names to links

Understanding URLs n Need to know the URL to link to a resource on the Internet –URL, or Uniform Resource Locator, specifies precise location of a resource –Name is taken from protocol used to access the resource –A protocol is a set of rules defining how info is exchanged between two devices

–Browser communicates with servers using the Hypertext Transfer Protocol or HTTP –So URLs for all Web pages begin with “http” –See Figure 2-28 for other protocols

Linking to a Web Page n URL for a Web page: – –where server is name of server storing file, path is path to file on that server, filename is name of file, and if necessary, id is name of an id or anchor within the file protocol/server/path/filename/id or anchor name

n There are six Web page URLs to add to our Links page –See list in Figure 2-30 –Each URL will be the href attribute value for the appropriate tag Discovery Schools –See tutorial2/links.htm

Linking to FTP Servers n FTP servers are one of the main resources for storing files on Internet –Use a communications protocol called File Transfer Protocol or FTP ftp://server/path/filename –See Figure 2-33 n Requires password and username to access files

–Browser supplies this info automatically with “anonymous” username, but some do not allow anonymous access

Linking to Usenet News n Usenet is a collection of discussion forums called newsgroups –Users can publicly exchange messages on lots of topics news:newsgroup –Opens a program for reading newsgroups called a newsreader displaying latest messages – See Figure 2-34

Linking to a Local File n May see a file stored locally on your computer or LAN file://server/path/filename –Rarely used in Web pages

Linking to n Can communicate with site’s owner or staff of organization that runs the site through mailto:address n Let’s add a link to Stephen’s address –See tutorial2/contacts.htm

n There are problems with links –User may not know how to use client –User’s browser may open wrong client –Increased spam—unsolicited junk n Spammers create their lists by:

–Scanning Usenet postings, stealing Internet mailing lists, using programs called harvesters that scan mailto URLs –Many developers are removing links in favor of Web forms that submit requests to a secure server –See suggestions on page 83

Working with Hypertext Attributes n Several attributes control behavior and appearance of links

Opening a Secondary Window n By default, each new page you open replaces contents of previous page –Clicking on external links on links page would leave chem Web site—would have to click the back button n Let’s have links displayed in second window content

–Window is name assigned to new window –If several links have same target name, all open in same window, replacing previous contents –HTML supports several special target names—See Figure 2-38 n Let’s target a window called “new” –See tutorial2/links.htm (create Mo)

n If you want all the links to point to a new window, can add target attribute to tag in document’s header –Use sparingly; creating secondary windows can clog up user’s desktop and users cannot see their Back button

Creating a Popup Title n Can add a popup title to your links to provide additional info –Descriptive text that appears whenever user positions mouse over a link –See Figure 2-40 Home Page –Not supported by all browsers

Creating an Access Key n Instead of clicking on a link, a keyboard key (called an access key) can be assigned Home Page –To use it, an accelerator key (usually Alt) is pressed –Not practical; most access keys are already reserved by browser

Creating a Semantic Link n Two attributes, rel and rev, let you specify relationship between a link and its destination –Rel describes contents; example, linking to a glossary of chemistry terms Chemistry Glossary

n Rev complements rel and describes contents of source document as viewed from destination document’s perspective –To go from chem home page to glossary, might include the following to describe where the user is coming from Chemistry Glossary

n These links are called semantic links because the tag contains info re the relationship between link and destination –Not designed for user, but for browser –See Figure 2-41 for link types that can be used

Using the Link Element n Another way to add a link to your page is to add a link element to document’s head –Intended for browser use and do not appear in browser window –Typically used to connect to style sheets

Tips for Creating Effective Links n Storyboard your site before you create it n Make sure users can easily navigate your site by linking each page to the site’s home page and a page containing a site index n Avoid using text like “click here” in your links—make sure your linked text describes what the destination contains

n Never place two links adjacent to one another; separate them with text or extra space or symbol n Avoid long pages; break up each page into a sequence of linked pages n If you do create a long page, create links to different sections and a link back to top of page

n Use only lowercase filenames for all documents n Use anchors if you need your internal document links to work with older browsers n Use care when inserting an link –Research latest tools to thwart harvesters and spammers