Presentation is loading. Please wait.

Presentation is loading. Please wait.

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:

1 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

2 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

3 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

4 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

5 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

6 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

7 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

8 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

9 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

10 Creating Links on a Web Page
Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

11 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

12 Creating Links Within a Document
Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

13 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

14 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>

15 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) >

16 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

17 The Anchor Tag (cont’d)
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>

18 The Anchor Tag (cont’d)
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

19 The Anchor Tag (cont’d)
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>

20 The Anchor Tag (cont’d)
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

21 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>

22 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>

23 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

24 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

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

26 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

27 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

28 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

29 Hierarchical Structures
Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

30 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

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

32 Working with Web Site Structures
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

33 Creating Links Between Documents
Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

34 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

35 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

36 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

37 Linking to Documents in Other Folders
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

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

39 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

40 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

41 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

42 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

43 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

44 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

45 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

46 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

47 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

48 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

49 Common Communication Protocols
Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

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

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

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

53 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

54 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

55 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

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

57 Linking to FTP Servers An FTP site as it appears in Internet Explorer
Tutorial 2 New Perspectives on HTML and XHTML, Comprehensive

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

59 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

60 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

61 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

62 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

63 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

64 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

65 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

66 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

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

68 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

69 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

70 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

71 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

72 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

73 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

74 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

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

76 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

77 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

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

79 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

80 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

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

82 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

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

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

85 Hierarchical Structures
New Perspectives on HTML and XHTML, Comprehensive

86 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

87 Mixed Structures New Perspectives on HTML and XHTML, Comprehensive

88 Web Site with No Coherent Structure
New Perspectives on HTML and XHTML, Comprehensive

89 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

90 Creating a Hypertext Link
New Perspectives on HTML and XHTML, Comprehensive

91 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

92 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

93 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

94 Creating Hypertext Links
New Perspectives on HTML and XHTML, Comprehensive

95 Specifying a Folder Path
New Perspectives on HTML and XHTML, Comprehensive

96 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

97 Specifying a Folder Path
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

98 Specifying a Folder Path
New Perspectives on HTML and XHTML, Comprehensive

99 Linking to Documents in Other Folders
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

100 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

101 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

102 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

103 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

104 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

105 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

106 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

107 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

108 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

109 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

110 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

111 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

112 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

113 Linking to Locations within Documents
New Perspectives on HTML and XHTML, Comprehensive

114 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

115 Creating Links between Documents
New Perspectives on HTML and XHTML, Comprehensive

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

117 Creating Links on a Web Page
New Perspectives on HTML and XHTML, Comprehensive

118 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

119 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

120 Working with Linked Images & Image Maps
New Perspectives on HTML and XHTML, Comprehensive

121 Working with Linked Images & Image Maps
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

122 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

123 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

124 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

125 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

126 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

127 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

128 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

129 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

130 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

131 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

132 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

133 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

134 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

135 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

136 Creating a Client-Side Image Map
New Perspectives on HTML and XHTML, Comprehensive

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

138 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

139 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

140 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

141 Internet Protocols New Perspectives on HTML and XHTML, Comprehensive

142 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

143 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

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

145 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

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

147 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

148 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

149 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

150 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

151 Linking to an E-Mail Address
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

152 Linking to an E-Mail Address
New Perspectives on HTML and XHTML, Comprehensive

153 Linking to an E-Mail Address
<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

154 Linking to an E-Mail Address
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

155 Linking to an E-Mail Address
New Perspectives on HTML and XHTML, Comprehensive

156 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 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

157 Working with Hypertext Attributes
New Perspectives on HTML and XHTML, Comprehensive

158 Working with Hypertext Attributes
New Perspectives on HTML and XHTML, Comprehensive

159 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

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

161 Creating a Semantic Link
New Perspectives on HTML and XHTML, Comprehensive

162 Creating a Semantic Link
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

163 Creating a Semantic Link
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

164 Creating a Semantic Link
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

165 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

166 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

167 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

168 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

169 Link Types New Perspectives on HTML and XHTML, Comprehensive

170 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

171 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

172 Working with Metadata New Perspectives on HTML and XHTML, Comprehensive

173 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

174 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

175 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

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


Download ppt "ITE 115 Developing a Web Site Patrick Healy, NVCC"

Similar presentations


Ads by Google