ITE 115 Developing a Basic Web Site Patrick Healy, NVCCObjectivesSlide 3Slide 4Slide 5Working with LinksThe “id” ElementCreating Element IdsCreating Links on a Web PageSlide 10Creating Links Within a DocumentSlide 12Creating Anchor Tags <a> </a>The Anchor Tag <a>Anchor Tags: Chemistry Web SiteThe Anchor Tag (cont’d)Slide 17Slide 18Slide 19Slide 20Accessing an External File's Internal LinkAccessing an External File's Internal Link (Example: Monroe Library)Managing HyperlinksThe Storyboard DiagramWorking with Web Site StructuresLinear StructuresSlide 27Hierarchical StructuresSlide 29Mixed StructuresSlide 31Slide 32Creating Links Between DocumentsCreating Links Between DocumentsLinking to a Location Within Another DocumentLinking to Documents in Other FoldersSlide 37A Sample Folder TreeRelative PathsSlide 40Slide 41Base Element: Changing the BaseChanging the BaseBase Element Example http://www.w3.org/TR/html401/struct/links.html#idx-base_URIUnderstanding URLsSlide 46Digital Certificates & httpsSecure Sockets Layer and httpsCommon Communication ProtocolsLinking to a Web PageSlide 51Slide 52Linking to FTP ServersSlide 54Slide 55Slide 56Linking to FTP Servers An FTP site as it appears in Internet ExplorerLinking to a Local FileLinking to E- mailLinking to E- mail in a Web pageSlide 61Slide 62Controlling Spam (Junk Email)Working with Hypertext AttributesCreating a Popup Title ( like a “tool tip” )Creating an Access KeySlide 67Creating a Book Mark in a Web PageCreating a Book Mark in a Web Page (another example)Creating a Semantic Link (rel)Creating a Semantic Link (rev)Creating a Semantic LinksCreating a Semantic LinkLink TypesUsing the Link ElementSlide 76ITE 115 Web Lecture 2XPTutorial 2 New Perspectives on HTML and XHTML, Comprehensive1ITE 115 Developing a Basic Web SitePatrick Healy, NVCCCreating a Web Sitefor Mr. Dube’s Chemistry ClassesHTML Tutorial 2XPTutorial 2 New Perspectives on HTML and XHTML, Comprehensive2Objectives•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.XPTutorial 2 New Perspectives on HTML and XHTML, Comprehensive3Objectives•Discuss different types of Web site structures •Create links between documents.•Create links to sections within a document.•Define absolute and relative paths.•http://www.nvcc.edu/home/phealy/ite115•Relative path: /home/phealy/ite115XPTutorial 2 New Perspectives on HTML and XHTML, Comprehensive4Objectives•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.XPTutorial 2 New Perspectives on HTML and XHTML, Comprehensive5Objectives•Work with pop up titles (tool tips) and access keys.•Create semantic links (rel & rev)•Create link elements.XPTutorial 2 New Perspectives on HTML and XHTML, Comprehensive6Working 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 link’s destination.XPTutorial 2 New Perspectives on HTML and XHTML, Comprehensive7The “id” Element •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.XPTutorial 2 New Perspectives on HTML and XHTML, Comprehensive8Creating Element Ids•The id element uses the syntax: id=“id ” where id is the id name assigned to the element. Note: id names must be unique.Example:<h2 id=“classes”>Computer Classes </h2>The id name “classes” is assigned to the h2 headingComputer ClassesXPTutorial 2 New Perspectives on HTML and XHTML, Comprehensive9Creating Links on a Web Page<p style=“text-align: center” > <a href=“#classes”>Computer Classes</a> &#183 <a href=“#grading”>Grading</a> &#183 <a href=“#appts”>Appointments</a> &#183 <a href=“#attend”>Attendance</a> &#183</p>Note: The # sign is an internal linkNote: &#183 is the special middot bullet symbolXPTutorial 2 New Perspectives on HTML and XHTML, Comprehensive10Creating Links on a Web PageXPTutorial 2 New Perspectives on HTML and XHTML, Comprehensive11Creating 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 <a> tag, and use the href attribute to identify the link target.•Example: <a name=“classes”>content</a>Better still:<a name=#”classes”<a><h2>Chemistry Classes</h2>•A link’s content is not limited to text.•Generally, a link should not contain any block-level elements.XPTutorial 2 New Perspectives on HTML and XHTML, Comprehensive12Creating Links Within a DocumentXPTutorial 2 New Perspectives on HTML and XHTML, Comprehensive13Creating Anchor Tags <a> </a>•An anchor element marks a specific location within a document. •Since you create anchors with the same <a> 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 document’s appearance. It just creates a destination within your document.The Anchor Tag <a>•The <a> tag creates hyperlinks•A container tag that encompasses the text or image (or both) to be used as a link•The syntax for using the anchor tag to create a link is as follows: <a href="URL"> linked text or image (or both) </a>Anchor Tags: Chemistry Web Site<p style="text-align: center"> <a href="contacts.htm">Contacts</a> &#183; <a href="links.htm">Resources</a> &#183; <a href="#classes">Classes</a> &#183; <a href="#grading">Grading</a> &#183; <a href="#app">Appointments</a> &#183; <a href="#safety">Safety</a> &#183; <a href="glossary.htm">Glossary</a></p><hr style="color: blue; background-color: blue; height: 2; width: 100%" /><! Note: &#183 is the code for middle dot (bullet) >The Anchor Tag (cont’d)•A fully qualified URL specifies an entire path•A partial URL assumes a path relative to the file’s current locationType of ReferenceDescription ExamplesFully qualified URL (also called absolute URL)A URL (i.e., URI) that contains a full path to a resource, including the protocol