Tutorial 2 Developing a Web Site

XP Objectives Learn how to storyboard various Web site structures Create links among documents in a Web site Understand relative and absolute folder paths Work with the base element Mark a location with the id attribute Create a link to an id Mark an image as a link New Perspectives on HTML and XHTML, Comprehensive2

XP Objectives Create an image map from an inline image Remove an image border Understand URLs Link to a site on the Web Link to an FTP site Link to an address Work with hypertext attributes Work with metadata New Perspectives on HTML and XHTML, Comprehensive3

XP Working with Web Site Structures A storyboard is a diagram of a Web site’s structure, showing all the pages in the site and indicating how they are linked together It is important to storyboard your Web site before you start creating your pages in order to determine which structure works best for the type of information the site contains A well-designed structure can ensure that users will be able to navigate the site without getting lost or missing important information New Perspectives on HTML and XHTML, Comprehensive4

XP Linear Structures In a linear structure, each page is linked with the pages that follow and precede it in an ordered chain Linear structure works best for Web pages with a clearly defined order In an augmented linear structure, each page contains an additional link back to an opening page New Perspectives on HTML and XHTML, Comprehensive5

XP Linear Structures New Perspectives on HTML and XHTML, Comprehensive6 A linear structure An augmented linear structure

XP Hierarchical Structures In the hierarchical structure, the pages are linked going from the home page down to more specific pages Users can easily move from general to specific and back again Within this structure, a user can move quickly to a specific scene within the page, bypassing the need to move through each scene in the play New Perspectives on HTML and XHTML, Comprehensive7

XP Hierarchical Structures New Perspectives on HTML and XHTML, Comprehensive8

XP Mixed Structures As Web sites become larger and more complex, you often need to use a combination of several different structures The overall form can be hierarchical, allowing the user to move from general to specific; however, the links also allow users to move through the site in a linear fashion A site index is a page containing an outline of the entire site and its contents New Perspectives on HTML and XHTML, Comprehensive9

XP Mixed Structures New Perspectives on HTML and XHTML, Comprehensive10

XP Web Site with No Coherent Structure New Perspectives on HTML and XHTML, Comprehensive11

XP Protected Web Site Structures Sections of most commercial Web sites are off- limits except to subscribers and registered customers New Perspectives on HTML and XHTML, Comprehensive12

XP Creating a Hypertext Link New Perspectives on HTML and XHTML, Comprehensive13

XP Creating a Hypertext Link To link to a page, you specify the name of the file using the href attribute of the tag (anchor tag) – content Where reference is the location being linked to and content is the document content that is being marked as a link. For example: – Home – The word “Home” will be underlined, providing a visual clue to the user that the text is linked to another document (home.htm) New Perspectives on HTML and XHTML, Comprehensive14

XP Creating a Hypertext Link Filenames are case sensitive on some operating systems, including the UNIX and Macintosh, but not on others The current standard is to use lowercase filenames for all files on a Website and to avoid special characters such as blanks and slashes You should also keep filenames short to avoid typing errors New Perspectives on HTML and XHTML, Comprehensive15

XP Creating Hypertext Links New Perspectives on HTML and XHTML, Comprehensive16

XP Specifying a Folder Path New Perspectives on HTML and XHTML, Comprehensive17

XP Specifying a Folder Path To create a link to a file located in a different folder than the current document, you must specify the file’s location, or path HTML supports two kinds of paths: absolute and relative. New Perspectives on HTML and XHTML, Comprehensive18

XP Linking to Documents in Other Folders An absolute path specifies a file’s precise location within a computer’s entire folder structure. Syntax of an absolute path: /folder1/folder2/folder3/file Where folder1 is the topmost folder in the computer’s folder tree, followed by folder2, folder3, and so forth. New Perspectives on HTML and XHTML, Comprehensive19

XP Absolute Paths tip1 New Perspectives on HTML and XHTML, Comprehensive20

XP Absolute Paths If files are located on different drives as well as in different folders, you must include the driver letter in the form /drive|/folder1/folder2/folder3/file For example /C|/cameshots/pages/tips/tips1.html Note: The drive letter C does NOT have to be included if the documents are located on the same hard drive New Perspectives on HTML and XHTML, Comprehensive21

XP Relative Paths A relative path specifies a file’s location in relation to the location of the current document. If the file is in the same location as the current document, you do not have to specify the folder name. If the file is in a subfolder of the current document, you have to include the name of the subfolder folder/file New Perspectives on HTML and XHTML, Comprehensive22

XP Relative Paths tip1 New Perspectives on HTML and XHTML, Comprehensive23

XP Relative Paths If you want to go one level up the folder tree, you start the relative path with a double period (..) and then provide the name of the file.../file To specify a different folder on the same level, known as a sibling folder, you move up the folder tree using the double period (..) and then down the tree using the name of the sibling folder.../folder/file You should almost always use relative paths in your links. New Perspectives on HTML and XHTML, Comprehensive24

XP Specifying a Folder Path New Perspectives on HTML and XHTML, Comprehensive25

XP Linking to Locations within Documents To jump to a specific location within a document, you first need to mark that location One way to identify elements in an HTML document is to use the id attribute The id element uses the syntax: id=“id ” where id is the id name assigned to the element. H New Perspectives on HTML and XHTML, Comprehensive26

XP Using the id Attribute Id names must be unique, if you assign the same id to more than one element on your Web page, the browser uses the first occurrence of the id name. Id names are not case sensitive. New Perspectives on HTML and XHTML, Comprehensive27

XP Linking to an id Once you’ve marked an element using the id attribute, you can create a hypertext link to that element using the hypertext link content For example to create a link to h2 heading for the letter A in the glossary document, you would enter the following code: A New Perspectives on HTML and XHTML, Comprehensive28

XP Using the id Attribute for glossary.htm Glossary [ A ] [ B ] [ C ] [ D ] [ E ] [ F ] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] New Perspectives on HTML and XHTML, Comprehensive29

XP Linking to Locations within Documents New Perspectives on HTML and XHTML, Comprehensive30

XP The id Attribute (top of page) Use the id attribute to mark the top of the page … etc. …. Much more follows … Return to Top ⇑ CAMshots ››› Advice and News from the World of Digital Photography by Patrick Healy New Perspectives on HTML and XHTML, Comprehensive31

XP Creating Links between Documents To create a link to a specific location in another file, enter the code content where reference is a reference to an HTML or XHTML file and id is the id of an element marked within that file ”D” terms in the Glossary New Perspectives on HTML and XHTML, Comprehensive32

XP Creating Links between Documents New Perspectives on HTML and XHTML, Comprehensive33

XP Working with Linked Images & Image Maps A standard practice on the Web is to turn the Web site’s logo into a hypertext link pointing to the home page HTML also allows you to divide an image into different zones, or hotspots, each linked to a different destination New Perspectives on HTML and XHTML, Comprehensive34

XP Working with Linked Images & Image Maps New Perspectives on HTML and XHTML, Comprehensive35

XP Removing the border from an inline image To remove a border from an inline image, add the following attribute to the tag: style = “border-width:0” Example: New Perspectives on HTML and XHTML, Comprehensive36

XP Introducing URLs To create a link to a resource on the Internet, you need to know its URL A Uniform Resource Locator (URL) specifies the precise location of a resource on the Internet A protocol is a set of rules defining how information is exchanged between two resources New Perspectives on HTML and XHTML, Comprehensive37

XP Introducing URLs Your Web browser communicates with Web servers using the Hypertext Transfer Protocol (HTTP) The URLs for all Web pages must start with the scheme “http” Other Internet resources use different protocols and have different scheme names New Perspectives on HTML and XHTML, Comprehensive38

XP Linking to a Web Site New Perspectives on HTML and XHTML, Comprehensive39 To create a link to a Web site from your document, use the URL of the Web site as the value of the href attribute. Apogee Photo

XP Linking to an Address To create a hypertext link to an address, use the following syntax: content Exampel: us New Perspectives on HTML and XHTML, Comprehensive40

XP Tutorial- 2 Summary Create a Web site with several linked pages Storyboarding and complex Web structures Creating Web pages linked together Links to locations within documents and from another document Inline images and image maps New Perspectives on HTML and XHTML, Comprehensive41