Developing a Basic Web Site

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

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

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

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

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

Session 2.1 • 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 • 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 • 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 • 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 • Let’s create a list of the section names, separated by a bullet • See tutorial2/chem1.htm

Creating Element ids • Now we need a way to identify those elements in the document • One way is through the id attribute <h2 id=“classes”>Chemistry Classes</h2> • 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 • Let’s add ids to the h2 headings • We’ll use id names classes, grading, app, and safety • See tutorial2/chem2.htm • Then we will create links to those sections

Creating Links within a Document • 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 • To create the link, enclose the content in an <a> tag and use href attribute to identify the link target

<a href=“#id”>content</a> • where id is the value of the id attribute for the destination and content is the hypertext <a href=“#classes”>Classes</a> • Not limited to text—an image can be a link <a href=“#classes”><img src=“dube.jpg” /></a>

A link should not contain any block-level elements; but you can put them on the outside <h2><a href=“classes”>View Class List</a></h2> • Cannot place one link inside another • But can place most inline elements in a link

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 • 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 • We’re done adding links to the chem page

Session 2.2 • 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 • 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 • Web sites use several different structures • Examining them can help you decide how to design your own sites

Linear Structures • 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

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 • 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 • As a site becomes more complex, may use a combination of structures • Includes both hierarchical and linear • See Figure 2-12 • 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 • 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 • 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 • Begin by inserting links in chem page to the other two pages <a href=“contacts.htm”>Contact me</a> • Must be located in same folder as chem file in order for the browser to find it • Filename is the target—no id needed • 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 • Let’s add links to the Contact and Links pages • See tutorial2/chem4.htm—then test

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 • Stephen also wants the contact and links pages to contain links to the various sections of the home page <a href=“chem4.htm#classes”>Classes</a> • See tutorial2/contacts.htm • See tutorial2/links.htm • Then test It works!

Linking to Documents in Other Folders • 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! • 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 • 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 • If on different drives, must include drive letter as well

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

Relative Paths • 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 • 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 • The browser resolves relative pathnames by default based on location of current document • Can change by specifying a different base in document’s head • <base href=“path” /> • where path is folder location that you want browser to use Finished 2.2!

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

Understanding URLs • 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 • URL for a Web page: • http://server/path/filename#id • 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 http://www.mwu.edu/course/info.htm#majors protocol/server/path/filename/id or anchor name

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 <a> tag <a href=http://school.discovery.com> Discovery Schools</a> • See tutorial2/links.htm

Linking to FTP Servers • 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 • 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 • 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 • May see a file stored locally on your computer or LAN file://server/path/filename • Rarely used in Web pages

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

Developing a Basic Web Site