WIXLIB

Tutorial 2Developing a Basic Web SiteHTML, CSS,and Dynamic HTML5TH EDITION

Objectives XPExplore how to storyboard a Web siteCreate navigation listsCreate links between documents in a Web siteUnderstand absolute and relative folder pathsSet a base pathMark a location with the id attributeCreate a link to an idNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Objectives Mark an image as a linkCreate an image mapUnderstand URLsLink to a resource on the WebLink to an e-mail addressWork with hypertext attributesWork with metadataNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Creating HyperlinksNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Exploring Web Site StructuresXP A storyboard is a diagram of a Web site’s structure,showing all the pages in the site and indicating howthey are linked together It is important to storyboard your Web site beforeyou start creating your pages in order to determinewhich structure works best for the type ofinformation the site contains A well-designed structure can ensure that users willbe able to navigate the site without getting lost ormissing important informationNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Linear StructuresXP In a linear structure, each page is linked withthe pages that follow and precede it Linear structures work for Web sites that aresmall in size and have a clearly defined orderof pages In an augmented linear structure, each pagecontains an additional link back to an openingpageNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Linear StructuresA linear structureAn augmented linearstructureNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Hierarchical StructuresXP In the hierarchical structure, the pages arelinked going from the home page down tomore specific pages Users can easily move from general to specificand back againNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Hierarchical StructuresNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Mixed StructuresXP As Web sites become larger and morecomplex, you often need to use a combinationof several different structures The overall form can be hierarchical, allowingthe user to move from general to specific;however, the links also allow users to movethrough the site in a linear fashion A site index is a page containing an outline ofthe entire site and its contentsNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Mixed StructuresNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Web Site with No CoherentStructureNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Protected StructuresXP Sections of most commercial Web sites areoff-limits except to subscribers and registeredcustomersNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Creating a Navigation ListXP Every Web site should include a navigationlist, which is a list containing links to the maintopic areas of the site HTML5 introduced the nav structural elementto make it easier to mark up navigation listsNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Creating a Hypertext LinkNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Creating a Hypertext Link Hypertext links are created by enclosing somedocument content within a set of opening andclosing a tags To mark content as a hypertext link, use a href ”reference” content /a where reference is the location being linked to andcontent is the document content that is being markedas a linkNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Creating a Hypertext LinkNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Attributes of the a ElementNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Specifying a Folder PathNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Specifying a Folder PathXP To create a link to a file located in a different folder thanthe current document, you must specify the file’slocation, or path An absolute path specifies a file’s precise location withina computer’s entire folder structure A relative path specifies a file’s location in relation to thelocation of the current document If the file is in the same location as the currentdocument, you do not have to specify the folder name If the file is in a subfolder of the current document, youhave to include the name of the subfolderNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Specifying a Folder PathXP If you want to go one level up the folder tree, youstart the relative path with a double period (.), aforward slash, and then provide the name of the file To specify a different folder on the same level,known as a sibling folder, you move up the foldertree using the double period (.) and then down thetree using the name of the sibling folder You should almost always use relative paths in yourlinksNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Specifying a Folder PathNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Setting the Base PathXP A browser resolves relative paths based on thelocation of the current document You can change this behavior by using the baseelement to specify a different starting location for allrelative paths To set the default location for a relative path, addthe element base href ”path” / to the document head, where path is the folderlocation that you want browsers to use whenresolving relative paths in the current documentNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Marking Locations with the idAttributeXP To jump to a specific location within a document,you first need to mark that location One way to identify elements in an HTML documentis to use the id attribute Id names must be unique Id names are not case sensitiveNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Linking to Locations withinDocumentsNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Linking to an id Once you’ve marked an element using the idattribute, you can create a hypertext link to thatelement using the a element a href ”#id” content /a New Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Creating Links betweenDocumentsXP To create a link to a specific location in another file,enter the code a href "reference#id" content /a where reference is a reference to an HTML or XHTMLfile and id is the id of an element marked within thatfileNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Creating Links betweenDocumentsNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Image Maps and External LinksNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Working with Linked Imagesand Image MapsXP A standard practice on the Web is to turn the Website’s logo into a hypertext link pointing to the homepage a href "reference" img src "file"alt "text" / /a Thumbnail images are small representations oflarger image files HTML also allows you to divide an image intodifferent zones, or hotspots, each linked to adifferent destinationNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Working with Linked Imagesand Image MapsNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Working with Linked Imagesand Image MapsXP To define these hotspots, you create an image mapthat matches a specified region of the inline image toa specific destination HTML supports two kinds of image maps:– Client-side image maps– Server-side image mapsNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Client-Side Image MapsXP A client-side image map is inserted in an image mapdefined in the Web page The Web browser locally processes the image map Because all of the processing is done locally, you caneasily test Web pages More responsive than server-side maps The browser’s status bar displays the target of eachhotspot Older browsers do not support client-side imagesNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Defining Hotspots Define a hotspot using two properties:– Its location in the image– Its shape Syntax of the hotspot element: area shape “shape” coords “coordinates”href “url” alt “text” / New Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Creating a Rectangular HotspotXP Two points define a rectangular hotspot:– the upper-left corner– the lower-right corner A sample code for a rectangular hotspot is: area shape “rect”coords “384,61,499,271”href “water.htm” – Coordinates are entered as a series of four numbersseparated by commas– HTML expects that the first two numbers represent thecoordinates for the upper-left corner of the rectangle, andthe second two numbers indicate the location of thelower-right corner– The hotspot is a hypertext link to water.htmNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Creating a Circular HotspotXP A circular hotspot is defined by the location of itscenter and its radius A sample code for a circular hotspot is: area shape “circle” coords “307,137,66”href “karts.htm” – Coordinates are (307, 137), and it has a radius of66 pixels– The hotspot is a hypertext link to karts.htmNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Creating a Polygonal HotspotXP To create a polygonal hotspot, you enter thecoordinates for each vertex in the shape A sample code for a polygonal hotspot is: area shape “polygon”coords “13,60,13,270,370,270,370,225,230,225, 230,60” href “rides.htm” – Coordinates are for each vertex in the shape– The hotspot is a hypertext link to rides.htmNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Creating a Default HotspotXP area shape "default" coords "0, 0, x, y" / where x is the width of the inline image in pixels andy is the image’s height Any spot that is not covered by another hotspot willactivate the default hotspot linkNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Creating a Client-Side Image Map XPNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Applying an Image MapNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Server-Side Image MapsXP In a server-side image map, the image map is storedon the Web server Server-side image maps are supported by mostgraphical browsers Server-side image maps can be slow to operate The browser’s status bar does not display the targetof each hotspotNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Introducing URLsXP To create a link to a resource on the Internet, youneed to know its URL A Uniform Resource Locator (URL) specifies theprecise location and type of a resource on theInternet A protocol is a set of rules defining how informationis passed between two resourcesNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Introducing URLsXP Your Web browser communicates with Web serversusing the Hypertext Transfer Protocol (HTTP) The URLs for all Web pages must start with the httpscheme Other Internet resources use different protocols andhave different scheme namesNew Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Internet ProtocolsNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Linking to a Web SiteA sample URL for a Web pageNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP

Linking to a Web SiteXP If a URL includes no path, then it indicates thetopmost folder in the server’s directory tree If a URL does not specify a filename, the serversearches for the default home page The server name portion of the URL is also called thedomain name The top level, called an extension, indicates thegeneral audience supported by the Web server a href "http://www.apogeephoto.com" ApogeePhoto /a New Perspectives on HTML, CSS, and Dynamic HTML 5th Edition

Linking to a Web SiteNew Perspectives on HTML, CSS, and Dynamic HTML 5th EditionXP