XP Tutorial 2 Developing a Basic Web Site

XP Tutorial 2 Developing a Basic Web Site

XP Tutorial 2 Developing a Basic Web Site Creating a Chemistry Web Site Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Objectives XP

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 Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 2 Objectives

XP List different types of Web site structures and how to employ them Create links between documents Create links to sections within a document Define absolute and relative paths Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 3 Objectives

XP Interpret the structure and content 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 Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 4 Objectives

XP Work with pop up titles and access keys Create semantic links Create link elements Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 5 XP Working with Links Using a link is a quicker way to access information at

the bottom of a Web page than scrolling down A user can select a link in a Web page, usually by clicking it with a mouse, to view another topic or document, often called the links destination Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 6 Creating Element Ids XP One way to identify elements in an HTML document

is to use the id attribute Id names must be unique Id names are not case sensitive Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 7 XP Creating Links Within a Document To create a link within a document, you enclose the content that you want to format as a link in an tag, and use the href attribute to identify the link

target A links content is not limited to text Generally, a link should not contain any block-level elements Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 8 XP Creating Links Within a Document Tutorial 2

New Perspectives on HTML, XHTML, and DHTML, Comprehensive 9 Creating Anchors XP An anchor element marks a specific location within a document Since you create anchors with the same tag that you use to create links, anchor content can also include most inline elements and empty elements; however, anchors cannot include block-level elements

Inserting an anchor does not change your documents appearance. It just creates a destination within your document Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 10 XP Working with Web Site Structures A storyboard is a diagram of a Web sites 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 Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 11 XP Working with Web Site Structures The three chemistry pages

Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 12 Linear Structures XP 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 Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 13 Linear Structures XP A linear structure An augmented linear structure

Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 14 XP Hierarchical Structures In the hierarchical structure, the pages are linked going from the most general 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 Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 15 Hierarchical Structures Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive XP

16 Mixed Structures XP 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 Tutorial 2

New Perspectives on HTML, XHTML, and DHTML, Comprehensive 17 Mixed Structures Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive XP 18 XP

Working with Web Site Structures A little foresight can go a long way toward making your Web site easier to use Each page should contain, at minimum, a link to the sites home page, or to the relevant main topic page, if applicable You may want to supply your users with a site index which is a page containing an outline of the entire site and its contents Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 19

Creating Links Between Documents Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive XP 20 XP Creating Links Between Documents

To link to a page, you specify the name of the file using the href attribute of the tag 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 Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 21

Linking to a Location Within XP Another Document When linking to a location within another document, you must use the anchor name of the location within the document and the filename content Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 22 XP

Linking to Documents in Other Folders To create a link to a file located in a different folder than the current document, you must specify the files location, or path, so that browsers can find it HTML supports two kinds of paths: relative and absolute An absolute path specifies a files precise location within a computers entire folder structure Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 23

A Sample Folder Tree Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive XP 24 XP Relative Paths A relative path specifies a files 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 Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 25 XP Relative Paths If you want to go one level up the folder tree, you start the relative path with a double period (..) 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 folder tree using the double period (..) and then down the tree using the name of the sibling folder You should almost always use relative paths in your links Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 26 XP

Changing the Base The base element is useful when a document is moved to a new folder. Rather than rewriting all of the relative paths to reflect the documents new location, the base element can redirect browsers to the documents old location, allowing any relative paths to be resolved The base element is useful when you want to create a copy of a single page from a large Web site on another Web server Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 27

Understanding URLs XP 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 Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

28 XP Understanding 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 Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

29 Common Communication Protocols Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive XP 30 Linking to a Web Page XP

A sample URL for a Web page Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 31 Linking to a Web Page XP If a URL includes no path, then it indicates the topmost folder in the servers directory tree If a URL does not specify a filename, the server

searches for a file named index.html or index.htm Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 32 Linking to FTP Servers XP FTP servers are one of the main sources for storing files on the Internet FTP servers transfer information using a communications protocol called File Transfer

Protocol, or FTP for short An FTP server requires each user to enter a password and a username to access its files Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 33 Linking to FTP Servers XP An FTP site as it appears in Internet Explorer

Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 34 XP Linking to Usenet News Usenet is a collection of discussion forums called newsgroups that let users publicly exchange messages with each other on a wide variety of topics When you click a link to a newsgroup, your computer opens a program for reading newsgroups, known as newsreader, displaying the latest messages from the newsgroup

Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 35 Linking to Usenet News XP A Sample Newsreader Tutorial 2 New Perspectives on HTML, XHTML,

and DHTML, Comprehensive 36 XP Linking to a Local File On occasion, you may see the URL for a file stored locally on your computer or local area network If you are accessing a file from your own computer, the server name might be omitted and replaced by an extra slash (/) The file scheme here does not imply any particular communication protocol; instead the browser retrieves the document using whatever method is the local standard for the type of file specified in the URL

Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 37 Linking to E- mail XP Many Web sites use e-mail to allow users to communicate with a sites owner, or with the staff of the organization that runs the site You can turn an e-mail address into a link, so that when a user clicks on an address, the browser starts an e-mail program and automatically inserts the

address into the To field of the new outgoing message Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 38 XP Linking to E- mail The effect of e-mail links on increasing Spam is a concern Spam is unsolicited junk e-mail set to large numbers of people, promoting products, services, and in some

cases, pornographic Web sites Spammers create their e-mail lists through scanning Usenet postings, stealing Internet mailing lists, and using programs called e-mail harvesters that scan HTML code on the Web looking for the e-mail addresses contained in mailto URLs Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 39 Linking to E- mail XP

If you need to include an e-mail address in your Web page, you can take a few steps to reduce problems with spam: Replace all e-mail addresses in your page with inline images of those addresses Write a program in a language like JavaScript to scramble any e-mail address in the HTML code Replace the characters of the e-mail address with character codes Replace characters with words in your Web pages text Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 40

XP Working with Hypertext Attributes HTML provides several attributes to control the behavior and appearance of your links You can force a document to appear in a new window by adding the target attribute to the tag tag If you want to provide additional information to your users, you can provide a popup title to your links A popup title is a descriptive text that appears whenever a user positions the mouse pointer over a link Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

41 XP Working with Hypertext Attributes Since only some browsers support popup titles, you should not place crucial information in them Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 42 XP

Creating an Access Key Another way to activate a link is to assign a keyboard key, called an access key, to the link To use an access key, you hold down an accelerator key (usually the Alt key in Windows or the Ctrl key on a Macintosh) and then press the specified key Access keys are impractical in most situations because most access keys are already reserved by the browser It is difficult to indicate to the user which access key to press in order to activate a link Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

43 Creating a Semantic Link XP Two attributes, rel and rev, allow you to specify the relationship between a link and its destination The rel attribute describes the content of the destination document The rev attribute complements the rel attribute by describing the contents of the source document as viewed from the destination documents perspective Tutorial 2 New Perspectives on HTML, XHTML,

and DHTML, Comprehensive 44 Creating a Semantic Link XP Links containing the rel and rev attributes are called semantic links because the tag contains information about the relationship between the link and its destination A browser can use the information that these attributes provide in many waysfor example to build a custom toolbar containing a list of links specific to the page being viewed

Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 45 Link Types Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive XP 46

XP Using the Link Element Another way to add a link to your document is to add a link element to the documents head Link elements are intended only for the browsers use Link elements have primarily been used to link style sheets Because no single list of relationship names is widely accepted, you must check with each browsers documentation to find out what relationship names it supports Tutorial 2 New Perspectives on HTML, XHTML,

and DHTML, Comprehensive 47 Summary XP You can create links within a single document You can mark a location within a document by using ids and anchors You can create links between documents within a Web site Storyboarding is an important part of Web page development Tutorial 2

New Perspectives on HTML, XHTML, and DHTML, Comprehensive 48 Summary XP You can reference files in different folders using relative and absolute paths You can create links to different resources on the Internet including: Web pages, FTP servers, newsgroups, and e-mail addresses You can use HTML attributes to open links in new windows, display popup titles, create access keys,

and specify link relationships Tutorial 2 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 49

Recently Viewed Presentations

  • Title Goes Here - CEOS

    Title Goes Here - CEOS

    With CEOS Plenary endorsement, FDA AHT plans to continue its work to integrate and oversee the FDA-related activities of several key entities within the CEOS structure - specifically LSI-VC, SEO, WGISS, and WGCapD - and to keep the momentum that...
  • The Structure of Life

    The Structure of Life

    The Study of Living Organismsā€¦. What makes something living? Look at the two pictures below: With your shoulder partner, you have 2 minutes to decideā€¦ What features make Stephen Curry alive (and awesome)?
  • Rotary Peace Centers

    Rotary Peace Centers

    Application Process Clubs select fellowship applicants and forward to district Districts interview and select prior to 1 July each year World level - District candidates are forwarded to TRF for selection which occurs between July and October Eligibility Criteria Commitment...
  • Latin 1 midterm exam review - SCHOOLinSITES

    Latin 1 midterm exam review - SCHOOLinSITES

    Latin 1 midterm exam review. I.Dictation=1-10. Select the word which you hear. aqua. aquam. aquas. ... For each noun tell its Latin case; then, select the correct Latin noun for its translation. ... future, perfect. Person=1st, 2nd, 3rd. Number-singular or...
  • Ant Colony Optimization (ACO): Applications to Scheduling

    Ant Colony Optimization (ACO): Applications to Scheduling

    Ant Colony Optimization (ACO): Applications to Scheduling Franco Villongco IEOR 4405 4/28/09 Definition Metaheuristic: similar to genetic algorithms, simulated annealing etc. Flexible enough to be applied to combinatorial optimization problems.
  • New UL 62275 Cable ties for electrical installations

    New UL 62275 Cable ties for electrical installations

    Arial Calibri Default Design New UL 62275 Cable ties for electrical installations What is UL 62275? What is UL 62275? Why the new UL 62275 standard? When does it take effect? How will I recognize a compliant product? New UL...
  • Every text has within new interpretations that can

    Every text has within new interpretations that can

    Like Fenelon did, Existential Psychology differentiates between normal and neurotic anxiety, normal anxiety is an element of life preservation as well as the potential drive for inner growth (Yalom 1998). While neurotic anxiety is a symptom of psychic stagnation.
  • Neolithic Agricultural Revolutions

    Neolithic Agricultural Revolutions

    With the Qing government so deeply in their debt, Britain and France became active participants in the period of recovery known as the Tongzhi Restoration that followed the Taiping Rebellion. QING CHINA DECENTRALIZATION (cont.)