Developing a Basic Web Site

1
Developing a Basic Web Site

• Maureen Smith
• Professor, Saddleback College
• Tutorial 2

2
Lesson Plan

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

3
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

4

• 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

5

• 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

6
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

7
Working with Links

• Having added new content to the chem page, its
  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

8

• Called the links destination
• Lets 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

9

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

10
Creating Element ids

• Now we need a way to identify those elements in
  the document
• One way is through the id attribute
• lth2 idclassesgtChemistry Classeslt/h2gt
• Assigns the id name classes to the h2 heading
  Chemistry Classes
• id names MUST BE UNIQUE

11

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

12
Creating Links within a Document

• Lets 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 ltagt
  tag and use href attribute to identify the link
  target

13

• lta hrefidgtcontentlt/agt
• where id is the value of the id attribute for the
  destination and content is the hypertext
• lta hrefclassesgtClasseslt/agt
• Not limited to textan image can be a link
• lta hrefclassesgtltimg srcdube.jpg /gtlt/agt

14

• A link should not contain any block-level
  elements but you can put them on the outside
• lth2gtlta hrefclassesgtView Class Listlt/agtlt/h2gt
• Cannot place one link inside another
• But can place most inline elements in a link

15

• Lets change the entries in the list to links
  pointing to the different headings
• See tutorial2/chem3.htm
• Then test your links

16
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
• Were done adding links to the chem page

17
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

18
Working with Web Site Structures

• Before you set up links for a site, its
  worthwhile to map out exactly how you want the
  pages to relate
• Called storyboarding
• A diagram of the sites structure

19

• 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

20
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

21

• 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

22

• Each page contains an additional link back to
  opening page

Augmented linear structure
23
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

24
Hierarchical structure
25
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

26

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

27
Creating Links between Documents

• To move between the three pages in the chem site,
  lets 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

28
Linking to a Document

• Begin by inserting links in chem page to the
  other two pages
• lta hrefcontacts.htmgtContact melt/agt
• Must be located in same folder as chem file in
  order for the browser to find it
• Filename is the targetno id needed
• Filenames are case sensitive on some operating
  systems, but not on others

29

• 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
• Lets add links to the Contact and Links pages
• See tutorial2/chem4.htmthen test

30

• 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

31
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
• lta hrefchem4.htmclassesgtClasseslt/agt
• See tutorial2/contacts.htm
• See tutorial2/links.htm
• Then test

It works!
32
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 files location or path so browsers
  can find it

33

• HTML supports two kinds of paths absolute paths
  and relative paths

34
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

35

• 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

36

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

37
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 files location in
  relation to the current document

38

• 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

39

• See Figure 2-27
• Should almost always use relative paths
• Are portableif 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

40
Changing the Base

• The browser resolves relative pathnames by
  default based on location of current document
• Can change by specifying a different base in
  documents head
• ltbase hrefpath /gt
• where path is folder location that you want
  browser to use

Finished 2.2!
41
Session 2.3

• In the links.htm file, Stephen has listed some
  Web sites that may be useful
• Lets change these names to links

42
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

43

• 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

44
Linking to a Web Page

• URL for a Web page
• http//server/path/filenameid
• 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.htmmajors protocol
/server/path/filename/id or anchor name
45

• 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 ltagt tag
• lta hrefhttp//school.discovery.comgt
• Discovery Schoolslt/agt
• See tutorial2/links.htm

46
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

47

• Browser supplies this info automatically with
  anonymous username, but some do not allow
  anonymous access

48
Linking to Usenet News

• Usenet is a collection of discussion forums
  called newsgroups
• Users can publicly exchange messages on lots of
  topics
• newsnewsgroup
• Opens a program for reading newsgroups called a
  newsreader displaying latest messages See
  Figure 2-34

49
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

50
Linking to E-mail

• Can communicate with sites owner or staff of
  organization that runs the site through e-mail
• mailtoaddress
• Lets add a link to Stephens e-mail address
• See tutorial2/contacts.htm

51

• There are problems with e-mail links
• User may not know how to use e-mail client
• Users browser may open wrong e-mail client
• Increased spamunsolicited junk e-mail
• Spammers create their e-mail lists by

52

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

53
Working with Hypertext Attributes

• Several attributes control behavior and
  appearance of links

54
Opening a Secondary Window

• By default, each new page you open replaces
  contents of previous page
• Clicking on external links on links page would
  leave chem Web sitewould have to click the back
  button
• Lets have links displayed in second window
• lta hrefurl targetwindowgtcontentlt/agt

55

• 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 namesSee
  Figure 2-38
• Lets target a window called new
• See tutorial2/links.htm (create Mo)

56

• If you want all the links to point to a new
  window, can add target attribute to ltbase /gt tag
  in documents header
• Use sparingly creating secondary windows can
  clog up users desktop and users cannot see their
  Back button

Sparingly!
57
Creating a Popup Title

• 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
• lta hrefchem.htm titleReturn to the Chemistry
  Home PagegtHome Pagelt/agt
• Not supported by all browsers

58
Creating an Access Key

• Instead of clicking on a link, a keyboard key
  (called an access key) can be assigned
• lta hrefchem.htm accesskeyIgtHome Pagelt/agt
• To use it, an accelerator key (usually Alt) is
  pressed
• Not practical most access keys are already
  reserved by browser

59
Creating a Semantic Link

• 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
• lta hrefterms.htm relglossarygtChemistry
  Glossarylt/agt

60

• Rev complements rel and describes contents of
  source document as viewed from destination
  documents perspective
• To go from chem home page to glossary, might
  include the following to describe where the user
  is coming from
• lta hrefterms.htm relglossary
  revhomegtChemistry Glossarylt/agt

61

• 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

62
Using the Link Element

• Another way to add a link to your page is to add
  a link element to documents head
• Intended for browser use and do not appear in
  browser window
• Typically used to connect to style sheets

One last word--
63
Tips for Creating Effective Links

• Storyboard your site before you create it
• Make sure users can easily navigate your site by
  linking each page to the sites home page and a
  page containing a site index
• Avoid using text like click here in your
  linksmake sure your linked text describes what
  the destination contains

64

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

65

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