ITE 115 Developing a Web Site Patrick Healy, NVCC

ITE 115 Developing a Web Site Patrick Healy, NVCC
HTML Tutorial 2 ITE 115 Developing a Web Site Patrick Healy, NVCC Creating a Web Site for Camera Shots (CAMshots) Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

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

Objectives Discuss different types of Web site structures Create links between documents. Create links to sections within a document. Define absolute and relative paths. Relative path: /home/phealy/ite115 Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Objectives Interpret the structure and content of a URL. Link to a page on the Web. Link to FTP servers, newsgroups, and addresses. Open links in a secondary window. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Objectives Work with pop up titles (tool tips) and access keys. Create semantic links (rel & rev) Create link elements. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

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 link’s destination. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

The “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. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Creating 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 heading Computer Classes Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Creating 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 link Note: &#183 is the special middot bullet symbol Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

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

Creating Links Within a Document

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

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> · <a href="links.htm">Resources</a> · <a href="#classes">Classes</a> · <a href="#grading">Grading</a> · <a href="#app">Appointments</a> · <a href="#safety">Safety</a> · <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 location Type of Reference Description Examples Fully qualified URL (also called absolute URL) A URL (i.e., URI) that contains a full path to a resource, including the protocol indicator. Also known as a hard link. or c:\intetpub\wwwroot\ccyp\syb\syb.html Partial URL (also called relative URL) A URL that assumes the current document’s path. All references are made from the document’s current directory. syb.html: Specifies a file in the current directory ../css/stylesheet.css: Specifies a file one directory up from the current page pub/images/mybullet.gif: Specifies a file in a subdirectory

You can specify various protocols Protocol Hyperlink HTML Example HTTP Visit the <a href=” site. HTTPS (Secure HTTP) Visit our <a href=” CIW<a/> site. FTP Download the file from our <a href=”ftp://ftp.server.com”>FTP server.</a> You can send to us at <a Telnet Please visit our <a href="telnet:melvyl.ucr.edu">Telnet server.</a>

Make sure that you: Use a closing anchor tag </a> Place quotation marks around the value Include the closing bracket at the end of the opening <a> tag Various issues to troubleshoot with hyperlinks Text and images disappear All successive Web page text is a hyperlink Garbled code appears on screen Code will not validate due to a problem <a> tag

Creating local hyperlinks Creating external hyperlinks Using images as hyperlinks Creating internal links On a long page, a link to another point lower on the page Internal links require internal bookmarks Example: <a name="targetArea1"> target anchor text or image (or both) </a> … other page content here … <a href="#targetArea1"> text/images linking to targetArea1 </a>

Example of Clickable Image: <p align="center"><a href=" <img border="0" src="Java Get Java Software.gif" width="100" height="43"></a></p> Explanation: When the image is clicked, the user is taken to the Web site. 20

Accessing an External File's Internal Link
Link to a specific point in another page without first accessing the top of that page To link to an internal anchor inside of another file, use the following syntax: <a href="URL/filename.ext#AnchorName">link text/image</a>

Accessing an External File's Internal Link (Example: Monroe Library)
<h2 id="jb">Judicial Branch</h2> <blockquote><p> <a href=" Courts</a><br /> <a href=" Supreme Court </a><br /> <a href=" Courts of Appeals</a><br /> <a href=" District Courts</a> </p></blockquote>

Managing Hyperlinks All hyperlinks need to be verified
Verify that the URL or other reference is valid Verify that the target page or location is accessed Hyperlinks also need to be managed Over time, URLs (and content) change “Dead” links frustrate users Manually check links Automatic link-checking software: Linklint Link Controller Checkbot Link should still be reviewed manually to verify relevance of linked content

The Storyboard Diagram
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. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Working with Web Site Structures
The three chemistry pages Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

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

Linear Structures A linear structure An augmented linear structure Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

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 and XHTML, Comprehensive

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

Mixed Structures Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

A little planning can make your Web site easier to use. Each page should contain, at minimum, a link to the site’s home page, or to the relevant main topic page, if applicable. You may want to provide 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 and XHTML, Comprehensive

Creating Links Between Documents

Creating Links Between Documents
To link to a page, you specify the name of the file using the href attribute of the <a> 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. Keep filenames short to avoid typing errors. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Linking to a Location Within 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. <a href = “#fieIdName ”>content</a> Example: <a href=“#grading”>Grading </a> Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

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 file’s location, or path, so that browsers can find it. HTML supports two kinds of paths: relative and absolute. An absolute path specifies a file’s precise location within a computer’s entire folder structure. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

An absolute path specifies a file’s precise location within a computer’s entire folder structure. Example of an absolute path: /C| / faculty/healy/class/ITE115.htm Note: The drive letter C does NOT have to be included if the documents are located on the same hard drive. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

A Sample Folder Tree Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

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

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. 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 and XHTML, Comprehensive

Relative Paths Examples of relative paths: class/chem115.htm class/grading.htm class/contacts.htm where the absolute path is: /C| / faculty/healy/class/chem295.htm Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Base Element: 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 document’s new location, the base element can redirect browsers to the document’s 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 and XHTML, Comprehensive

Changing the Base The syntax for specifying the base is: <base href=“path” /> Where path is the folder location that you want the browser to use when resolving relative paths in the current document. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Base Element Example For example, given the following BASE declaration and a declaration: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <HTML> <HEAD> <TITLE>Our Products</TITLE> <BASE href=" </HEAD> <BODY> <P>Have you seen our <A href="../cages/birds.gif">Bird Cages</A>? </BODY> </HTML> the relative URI "../cages/birds.gif" would resolve to: Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Understanding URLs To create a link to a resource on the Internet, you need to know its URL or Internet address. 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 and XHTML, Comprehensive

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”. Secure sites start with “https” Other Internet resources use different protocols and have different scheme names. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Digital Certificates & https
What is a certificate authority (CA)? Authorized person or company that issues and verifies digital certificates Users apply for digital certificate from the CA such as Verisign p Fig

Secure Sockets Layer and https
What is Secure Sockets Layer (SSL)? Provides encryption of all data that passes between client and Internet server Web addresses beginning with “https” to indicate secure connections Only the client computer must have a digital certificate Indicates secure Web page p Fig

Common Communication Protocols

Linking to a Web Page A sample URL for a Web page Tutorial 2
New Perspectives on HTML and XHTML, Comprehensive

Linking to a Web Page Linking to George Mason University &
University of Mary Washington Note the screen tips: (supported by IE4 & later)

Linking to a Web Page If a URL includes no path, then it indicates the topmost folder in the server’s directory tree. If a URL does not specify a filename, the server searches for a file named “index.html” or “index.htm”. Can also be: default.html or home.html Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Linking to FTP Servers 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 username & password to access its files. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Linking to FTP Servers A very simple and direct way to FTP to your Web folders: (a) Use Microsoft Internet Explorer 6 (your browser): (b) In the browser’s address window, type: ftp:// (c) Press [Enter] (d) Log on to the ftp server using your own credentials such as: (1) NVSTU/JBSMITH17 (2) Type in your password (e) Copy your files from the local hard drive to your Web folder on the server (f) Your Web folder will have an address like: and you may view your uploaded files there. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Linking to FTP Servers A very simple and direct way to FTP to your Web folders: (a) Use Microsoft Internet Explorer 7 (your browser): (b) In the browser’s address window, type: ftp:// (c) Press [Enter] (d) Log on to the ftp server using your own credentials such as: (1) NVSTU\MISMITH24 (2) Type in your password (e) Copy your files from the local hard drive to your Web folder on the server (f) Your Web folder will have an address like: and you may view your uploaded files there. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive 55

Linking to FTP Servers Also see these instructions for Internet Explorer 7: Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive 56

Linking to FTP Servers An FTP site as it appears in Internet Explorer

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 and XHTML, Comprehensive

Linking to E- mail Many Web sites use to allow users to communicate with a site’s owner, or with the staff of the organization that runs the site. You can turn an address into a link, so that when a user clicks on an address, the browser starts an program and automatically inserts the address into the “To” field of the new outgoing message. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Linking to E- mail in a Web page
<h2>Address and Phone and </h2> <p>You can contact Patrick Healy at:</p> <blockquote><p> Patrick Healy<br /> 15200 Neabsco Mills Road<br /> Woodbridge, Virginia <br /> Phone: (703) <br /> <a </p></blockquote> Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Linking to E- mail The effect of links on increasing Spam is a concern. Spam is unsolicited junk set to large numbers of people, promoting products, services, and in some cases, pornographic Web sites. Spammers create their lists through scanning Usenet postings, stealing Internet mailing lists, and using programs called harvesters that scan HTML code on the Web looking for the addresses contained in mailto URLs. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

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

Controlling Spam (Junk Email)
If you must publish your address, try posting it as something like this: JohnSmithATinternetserviceDOTcom rather than This will fool automated Web crawler software. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

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 <a> tag. If you want to provide additional information to your users, you can provide a popup title to your links. It is sometimes called a “tool tip” 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 and XHTML, Comprehensive

Creating a Popup Title ( like a “tool tip” )
Basically use this format: < a href=“url” title=“text” > Element </a> Example: < a href=“chem.htm” title=“Return to Chemistry Home Page” > Home Page </a> Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Creating an Access Key Another way to activate a link is to assign a keyboard key called an access key Syntax is: <a href = “url” accesskey = “char”> Element </a> where char is a single keyboard character In Windows, hold down the Alt key and press the access key (Alt + h) On a MacIntosh use (Ctrl+h) Example: <a href = “chem.htm” accesskey = “h” >Home Page </a> Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Since only some browsers support popup titles, you should not place crucial information in them. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Creating a Book Mark in a Web Page
When the user clicks on the link item Top of Page the user is taken to the top of the Web page, in this case, the top of the home page. At the top of the Web page, insert: <p align="center"><a name="Top of Page"></a><img SRC="NOVAheader.gif" width="595" height="50"> </p> At the bottom of the Web page or in the We page, add this: <p align="center"><a href="index.htm#Top of Page">Top of Page</a></p> Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Creating a Book Mark in a Web Page (another example)
When the user clicks on the link item Return to Top the user is taken to the top of the Web page, in this case, the top of the home page. At appropriate points on the Web page, add this: <p><a href="#top">Return to Top</a></p> Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Creating a Book Mark using <div id > (another method)
When the user clicks on the link item Top of the user is taken to the top of the Web page, in this case, the top of the home page. <body> <! start of body of web page --- > <div id="top"> … etc … <div><center><a href="#top">Return to Top</a> ⇑</center></div> </body> <!--- code of &#8657 is an up-arrow - Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Creating a Semantic Link (rel)
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. Example: If you wanted to link to a glossary of chemistry terms, you could insert the following link into the chemistry Web page: <a href=“terms.htm” rel=“glossary”>Chemistry Glossary</a> Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Creating a Semantic Link (rev)
The rev attribute complements the rel attribute by describing the contents of the source document as viewed from the destination document’s perspective. Example: To go from the chemistry home page to the glossary, you could include the following rev attribute to describe where the user is coming from: <a href=“terms.htm” rel=“glossary” rev=“home”>Chemistry Glossary</a> Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Creating a Semantic Links
To go from the chemistry home page to the glossary, you could include the following rev attribute to describe where the user is coming from: <a href=“terms.htm” rel=“glossary” rev=“home”>Chemistry Glossary </a> (Going from chemistry home page to the glossary of terms) This information is designed for the browser and NOT the user. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Creating a Semantic Link
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 ways—for example to build a custom toolbar containing a list of links specific to the page being viewed. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Link Types Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Using the Link Element Another way to add a link to your document is to add a link element to the document’s head. Link elements are intended only for the browser’s use and are placed within a documents’ head. A document head can contain several link elements. 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 browser’s documentation to find out what relationship names it supports. Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

Using the Link Element Basic template of a link element: <link href=“url” rel=“text” rev=“text” target=“window” /> Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

ITE 115 Tutorial 2 Developing a Web Site: CAMshots (ITE 115 Healy)

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, Comprehensive

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, Comprehensive

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, Comprehensive

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, Comprehensive

Linear Structures A linear structure An augmented linear structure

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, Comprehensive

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, Comprehensive

Mixed Structures New Perspectives on HTML and XHTML, Comprehensive

Web Site with No Coherent Structure

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, Comprehensive

Creating a Hypertext Link

Creating a Hypertext Link
To link to a page, you specify the name of the file using the href attribute of the <a> tag (anchor 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 New Perspectives on HTML and XHTML, Comprehensive

Tutorial 2: Pages to Develop
child.htm contest.htm flower.htm glossary.htm home.htm scenic.htm tips.htm New Perspectives on HTML and XHTML, Comprehensive

Marking a Hypertext Link
To mark Web content as hypertext, use the following construct: <a href = “reference” > content </a> Example: < a href = “home.htm” > <Home </a> (See pages HTML 68 – 70) Carey 5th Edition New Perspectives on HTML and XHTML, Comprehensive

Creating Hypertext Links

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 An absolute path specifies a file’s precise location within a computer’s entire folder structure 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 New Perspectives on HTML and XHTML, Comprehensive

If you want to go one level up the folder tree, you start the relative path with a double period (..), a forward 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 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 New Perspectives on HTML and XHTML, Comprehensive

An absolute path specifies a file’s precise location within a computer’s entire folder structure. Example of an absolute path: /C| / faculty/healy/class/ITE115.htm 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, Comprehensive

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

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. 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. New Perspectives on HTML and XHTML, Comprehensive

Relative Paths /C| / faculty/healy/class/ITE115.htm
Examples of relative paths: class/ITP120.htm class/ITP240.htm class/ITP295.htm where the absolute path is: /C| / faculty/healy/class/ITE115.htm New Perspectives on HTML and XHTML, Comprehensive

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 document’s new location, the base element can redirect browsers to the document’s 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 New Perspectives on HTML and XHTML, Comprehensive

Using the id Attribute 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 Id names must be unique Id names are not case sensitive New Perspectives on HTML and XHTML, Comprehensive

Using the id Attribute 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 heading Computer Classes New Perspectives on HTML and XHTML, Comprehensive

Using the id Attribute for glossary.htm
<h1 style="color: blue">Glossary</h1> <p> [<a href="#a">A</a>] [<a href="#b">B</a>] [<a href="#c">C</a>] [<a href="#d">D</a>] [<a href="#e">E</a>] [<a href="#f">F</a>] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] </p> New Perspectives on HTML and XHTML, Comprehensive

Using the id Attribute for glossary.htm
<hr /> <h2 id="a">A</h2> <dl> <dt><b>Ambient Light</b></dt> <dd>The natural light in a scene.</dd> <dt id="aperture"><b>Aperture</b></dt> <dd>The maximum size of the hole through which light enters the camera.</dd> <dt><b>Artifact</b></dt> <dd>Unwanted distortions in an image caused by image compression.</dd> <dt><b>Aspect Ratio</b></dt> <dd>The ratio between the width and height of an image.</dd> </dl> New Perspectives on HTML and XHTML, Comprehensive

The id Attribute (top of page)
Use the id attribute to mark the top of the page <body> <div id="top"> <img src="camshots.jpg" alt="CAMshots" usemap="#logomap" style="border: 0px;" /> … etc. …. Much more follows … <hr /> <div><a href="#top">Return to Top</a> ⇑</div> <address> CAMshots ››› Advice and News from the World of Digital Photography by Patrick Healy </address> </body> </html> New Perspectives on HTML and XHTML, Comprehensive

Definition List The definition list contains a list of definition terms, each followed by a definition description. Tags: <dl> for definition list <dt> for definition term <dd> the definition itself (data definition) Web browsers typically display the definition description below the definition term and slightly indented such as: ITE 115 Computer Applications & Concepts An introductory course requiring some computer skills New Perspectives on HTML and XHTML, Comprehensive

Definition List <dl> <dt> General Computing </dt> <dd> An intro course requiring basic math </dd> <dt> Software Design </dt> <dd> Software design with basic math </dd> <dt> Advanced Java Programming </dt> <dd> This course requires Java I programming </dd> </dl> New Perspectives on HTML and XHTML, Comprehensive

How the list looks on a Web page
General Computing An intro course requiring basic math Software Design Software design requiring basic math Advanced Java Programming This course requires Java I programming New Perspectives on HTML and XHTML, Comprehensive

Linking to Locations within Documents
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 A link’s content is not limited to text Generally, a link should not contain any block-level elements New Perspectives on HTML and XHTML, Comprehensive

Linking to Locations within Documents

Creating Links between Documents
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 XHTML file and id is the id of an element marked within that file New Perspectives on HTML and XHTML, Comprehensive

Creating Links between Documents

<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 link Note: &#183 is the special middot bullet symbol New Perspectives on HTML and XHTML, Comprehensive

Linking to a Location within 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. <a href = “#fieIdName ”>content</a> Example: <a href=“#grading”>Grading </a> New Perspectives on HTML and XHTML, Comprehensive

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 <a href="reference"><img src="file" alt="text" /></a> 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, Comprehensive

To define these hotspots, you create an image map that matches a specified region of the inline image to a specific destination New Perspectives on HTML and XHTML, Comprehensive

Client-Side Image Maps
A client-side image map is inserted in an image map into the HTML file The browser locally processes the image map Because all of the processing is done locally, you can easily test Web pages This is more responsive than server-side maps The browser’s status bar displays the target of each hotspot Older browsers do NOT support client-side images New Perspectives on HTML and XHTML, Comprehensive

child.htm (image map) <div> <img src="contest1.jpg" alt="Photo contest" usemap="#contestmap" style="border: 0px;" /> <map id="contestmap" name="contestmap"> <area shape="poly" coords="457, 84, 474, 63, 549, 63, 566, 84" href="child.htm" alt="Child Photos" /> <area shape="poly" coords="554, 84, 571, 63, 646, 63, 663, 84" href="flower.htm" alt="Flower Photos" /> <area shape="poly" coords="651, 84, 668, 63, 743, 63, 760, 84" href="scenic.htm" alt="Scenic Photos" /> <area shape="circle" coords="82, 82, 78" href="contest.htm" alt="Contest Results" /> </map> </div> New Perspectives on HTML and XHTML, Comprehensive

contest.htm image map <div> <img src="contest1.jpg" alt="Photo contest" usemap="#contestmap" style="border: 0px;" /> <map id="contestmap" name="contestmap"> <area shape="poly" coords="457, 84, 474, 63, 549, 63, 566, 84" href="child.htm" alt="Child Photos" /> <area shape="poly" coords="554, 84, 571, 63, 646, 63, 663, 84" href="flower.htm" alt="Flower Photos" /> <area shape="poly" coords="651, 84, 668, 63, 743, 63, 760, 84" href="scenic.htm" alt="Scenic Photos" /> <area shape="circle" coords="82, 82, 78" href="contest.htm" alt="Contest Results" /> </map> </div> New Perspectives on HTML and XHTML, Comprehensive

flower.htm image map <div> <img src="contest1.jpg" alt="Photo contest" usemap="#contestmap" style="border: 0px;" /> <map id="contestmap" name="contestmap"> <area shape="poly" coords="457, 84, 474, 63, 549, 63, 566, 84" href="child.htm" alt="Child Photos" /> <area shape="poly" coords="554, 84, 571, 63, 646, 63, 663, 84" href="flower.htm" alt="Flower Photos" /> <area shape="poly" coords="651, 84, 668, 63, 743, 63, 760, 84" href="scenic.htm" alt="Scenic Photos" /> <area shape="circle" coords="82, 82, 78" href="contest.htm" alt="Contest Results" /> </map> </div> New Perspectives on HTML and XHTML, Comprehensive

glossary.htm image map <div id="top"> <img src="camshots.jpg" alt="CAMshots" usemap="#logomap" style="border: 0px;" /> <map id="logomap" name="logomap"> <area shape="circle" coords="82, 78, 80" href="home.htm" alt="Home" /> <area shape="rect" coords="168, 110, 225, 145" href="tips.htm" alt="Tips" /> <area shape="rect" coords="240, 110, 402, 145" href="glossary.htm" alt="Glossary" /> </map> </div> New Perspectives on HTML and XHTML, Comprehensive

home.htm image map <div> <img src="camshots.jpg" alt="CAMshots" usemap="#logomap" style="border: 0px;" /> <map id="logomap" name="logomap"> <area shape="circle" coords="82, 78, 80" href="home.htm" alt="Home" /> <area shape="rect" coords="168, 110, 225, 145" href="tips.htm" alt="Tips" /> <area shape="rect" coords="240, 110, 402, 145" href="glossary.htm" alt="Glossary" /> </map> </div> New Perspectives on HTML and XHTML, Comprehensive

scenic.htm image map <div> <img src="contest1.jpg" alt="Photo contest" usemap="#contestmap" style="border: 0px;" /> <map id="contestmap" name="contestmap"> <area shape="poly" coords="457, 84, 474, 63, 549, 63, 566, 84" href="child.htm" alt="Child Photos" /> <area shape="poly" coords="554, 84, 571, 63, 646, 63, 663, 84" href="flower.htm" alt="Flower Photos" /> <area shape="poly" coords="651, 84, 668, 63, 743, 63, 760, 84" href="scenic.htm" alt="Scenic Photos" /> <area shape="circle" coords="82, 82, 78" href="contest.htm" alt="Contest Results" /> </map> </div> New Perspectives on HTML and XHTML, Comprehensive

tips.htm image map <body> <div> <img src="camshots.jpg" alt="CAMshots" usemap="#logomap" style="border: 0px;" /> <map id="logomap" name="logomap"> <area shape="circle" coords="82, 78, 80" href="home.htm" alt="Home" /> <area shape="rect" coords="168, 110, 225, 145" href="tips.htm" alt="Tips" /> <area shape="rect" coords="240, 110, 402, 145" href="glossary.htm" alt="Glossary" /> </map> </div> New Perspectives on HTML and XHTML, Comprehensive

Hotspots on a Web Page What is a “hotspot” ?
A hotspot is an area within an image that accesses a link or performs an action when clicked or activated by the user. New Perspectives on HTML and XHTML, Comprehensive

Defining Hotspots on a Web Page
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 and XHTML, Comprehensive

Creating a Rectangular Hotspot
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 numbers separated by commas HTML expects that the first two numbers represent the coordinates for the upper-left corner of the rectangle, and the second two numbers indicate the location of the lower-right corner The hotspot is a hypertext link to water.htm New Perspectives on HTML and XHTML, Comprehensive

Creating a Circular Hotspot
A circular hotspot is defined by the location of its center 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 of 66 pixels The hotspot is a hypertext link to page karts.htm New Perspectives on HTML and XHTML, Comprehensive

Creating a Polygonal Hotspot
To create a polygonal hotspot, you enter the coordinates 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.htm New Perspectives on HTML and XHTML, Comprehensive

Creating a Default Hotspot
<area shape="default" coords="0, 0, x, y" … /> where x is the width of the inline image in pixels and y is the image’s height Any spot that is NOT covered by another hotspot will activate the default hotspot link New Perspectives on HTML and XHTML, Comprehensive

Creating a Client-Side Image Map

Applying an Image Map New Perspectives on HTML and XHTML, Comprehensive

Server-Side Image Maps
In a server-side image map, the image map is stored on the Web server Server-side image maps are supported by most graphical browsers Server-side image maps can be slow to operate The browser’s status bar does not display the target of each hotspot New Perspectives on HTML and XHTML, Comprehensive

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, Comprehensive

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, Comprehensive

Internet Protocols New Perspectives on HTML and XHTML, Comprehensive

A sample URL for a Web page
Linking to a Web Site A sample URL for a Web page New Perspectives on HTML and XHTML, Comprehensive

Linking to a Web Site If a URL includes no path, then it indicates the topmost folder in the server’s directory tree If a URL does not specify a filename, the server searches for the default home page The server name portion of the URL is also called the domain name The top level, called an extension, indicates the general audience supported by the Web server <a href=" Photo</a> New Perspectives on HTML and XHTML, Comprehensive

Linking to a Web Site New Perspectives on HTML and XHTML, Comprehensive

Linking to FTP Servers FTP servers are another method of storing and sharing 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 New Perspectives on HTML and XHTML, Comprehensive

Linking to FTP Servers New Perspectives on HTML and XHTML, Comprehensive

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

Creating a Bookmark When the user clicks on the link item Top of Page
the user is taken to the top of the Web page, in this case, the top of the home page. At the top of the Web page, insert: <p align="center"><a name="Top of Page"></a><img SRC="NVCCheader.gif" width="595" height="50"> </p> At the bottom of the Web page or in the We page, add this: <p align="center"><a href="index.htm#Top of Page">Top of Page</a></p> New Perspectives on HTML and XHTML, Comprehensive

Creating a Bookmark When the user clicks on the link item Return to Top the user is taken to the top of the Web page, in this case, the top of the home page. At appropriate points on the Web page, add this: <p> <a href="#top">Return to Top</a> </p> New Perspectives on HTML and XHTML, Comprehensive

Linking to an E-Mail Address
Many Web sites use to allow users to communicate with a site’s owner, sales representative, or technical support staff You can turn an address into a hypertext link, so that when a user clicks on an address, the browser starts an program and automatically inserts the address into the “To” field of the new outgoing message New Perspectives on HTML and XHTML, Comprehensive

The mailto protocol also allows you to add information to the , including the subject line and the text of the message mailto:address?header1=value1&header2=value2& ... This%20is%20a%20test%20message To preserve information about blank spaces, URLs use escape characters %20 is a blank New Perspectives on HTML and XHTML, Comprehensive

<h2>Address and Phone and </h2> <p>You can contact Patrick Healy at:</p> <blockquote><p> Patrick Healy <br /> Neabsco Mills Road <br /> Woodbridge, Virginia <br /> Phone: (703) <br /> <a </p></blockquote> New Perspectives on HTML and XHTML, Comprehensive

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

HTML provides several attributes to control the behavior and appearance of your links You can force a document to appear in a secondary window or tab by adding the target attribute to the tag <a> tag If you want to provide additional information to your users, you can provide a tooltip to your links A tooltip is a descriptive text that appears whenever a user positions the mouse pointer over a link New Perspectives on HTML and XHTML, Comprehensive

Creating a Semantic Links: rel & rev
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 document’s perspective New Perspectives on HTML and XHTML, Comprehensive

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 ways—for example to build a custom toolbar containing a list of links specific to the page being viewed New Perspectives on HTML and XHTML, Comprehensive

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. Example: If you wanted to link to a glossary of chemistry terms, you could insert the following link into the chemistry Web page: <a href=“terms.htm” rel=“glossary”>Chemistry Glossary</a> New Perspectives on HTML and XHTML, Comprehensive

The rev attribute complements the rel attribute by describing the contents of the source document as viewed from the destination document’s perspective. Example: To go from the chemistry home page to the glossary, you could include the following rev attribute to describe where the user is coming from: <a href=“terms.htm” rel=“glossary” rev=“home”>Chemistry Glossary</a> New Perspectives on HTML and XHTML, Comprehensive

To go from the chemistry home page to the glossary, you could include the following rev attribute to describe where the user is coming from: <a href=“terms.htm” rel=“glossary” rev=“home”>Chemistry Glossary </a> (Going from chemistry home page to the glossary of terms) This information is designed for the browser and NOT the user. New Perspectives on HTML and XHTML, Comprehensive

Creating a Semantic Links
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 ways—for example to build a custom toolbar containing a list of links specific to the page being viewed. New Perspectives on HTML and XHTML, Comprehensive

Using the Link Element Another way to add a link to your document is to add a link element to the document’s head Link elements are intended only for the browser’s 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 browser’s documentation to find out what relationship names it supports New Perspectives on HTML and XHTML, Comprehensive

Using the Link Element Another way to add a link to your document is to add a link element to the document’s head. Link elements are intended only for the browser’s use and are placed within a documents’ head. A document head can contain several link elements. 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 browser’s documentation to find out what relationship names it supports. New Perspectives on HTML and XHTML, Comprehensive

Using the Link Element Basic template of a link element:
<link href=“url” rel=“text” rev=“text” target=“window” /> New Perspectives on HTML and XHTML, Comprehensive

Link Types New Perspectives on HTML and XHTML, Comprehensive

Working with Metadata Web authors often turn to companies that specialize in making sites appear more prominently in search engines (Google, Yahoo) Information about the site is called metadata Add metadata to your Web pages by adding a meta element to the head section of the document <meta name="text" content="text" scheme="text" http-equiv="text" /> New Perspectives on HTML and XHTML, Comprehensive

Metadata <head> <meta name="author" content="Patrick Healy" /> <meta name="description" content="A site for sharing information on digital photography and cameras" /> <meta name="keywords" content="photography, cameras, digital imaging" /> <!-- New Perspectives on HTML and XHTML 5th Edition Tutorial 2 CAMshots Home Page Author: Patrick Healy Date: December 1, 2008 Filename: home.htm Supporting files: camshots.jpg, pearlake.jpg -- > <title>CAMshots Home Page</title> </head> New Perspectives on HTML and XHTML, Comprehensive

Working with Metadata New Perspectives on HTML and XHTML, Comprehensive

Working with Metadata In recent years, search engines have become more sophisticated in evaluating Web sites The meta element has decreased in importance, but it is still used by search engines when adding a site to their indexes New Perspectives on HTML and XHTML, Comprehensive

Working with Metadata You can add information and commands to this communication stream with the meta element’s http-equiv attribute Force the Web browser to refresh the Web page at timed intervals such as every 60 seconds. <meta http-equiv="refresh" content="60" /> Redirect the browser from the current document to a new document every 5 seconds. <meta http-equiv="refresh" content="5;url= /> The browser uses the ISO character set: <meta http-equiv="Content-Type" content="text/html;charset=ISO " /> New Perspectives on HTML and XHTML, Comprehensive

ITE 115 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 Create links to sites and to non-Web locations Different hypertext attributes Working with meta data elements New Perspectives on HTML and XHTML, Comprehensive

ITE 115 Web Lecture 2 End of Presentation Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

ITE 115 Developing a Web Site Patrick Healy, NVCC

Similar presentations

Presentation on theme: "ITE 115 Developing a Web Site Patrick Healy, NVCC"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

ITE 115 Developing a Web Site Patrick Healy, NVCC

Similar presentations

Presentation on theme: "ITE 115 Developing a Web Site Patrick Healy, NVCC"— Presentation transcript:

Similar presentations

About project

Feedback