CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Introducing XHTML: Module D: Text, Lists & Links.

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Goals Understand how to modify the way in which text is presented and interpretedUnderstand how to modify the way in which text is presented and interpreted Understand how to create listsUnderstand how to create lists Understand how to create linksUnderstand how to create links

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Text-Formatting Elements Formatting elements provide specific instructions about how their contents should be displayedFormatting elements provide specific instructions about how their contents should be displayed For instance, the element instructs user agents to display its contents as boldface textFor instance, the element instructs user agents to display its contents as boldface text

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Text-Formatting Elements Phrase elements, however, primarily identify or describe their contentsPhrase elements, however, primarily identify or describe their contents For instance, the element is an emphasized piece of data, similar to a quotationFor instance, the element is an emphasized piece of data, similar to a quotation

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Phrase Elements It is a much better choice to format the text on your Web pages using a phrase element that more adequately describes its contentIt is a much better choice to format the text on your Web pages using a phrase element that more adequately describes its content

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Phrase Elements Using phrase elements helps ensure that your Web pages are compatible with user agents that may not be capable of handling formatting elementsUsing phrase elements helps ensure that your Web pages are compatible with user agents that may not be capable of handling formatting elements

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Element You use the element to supply contact information for a Web pageYou use the element to supply contact information for a Web page Usually, you place the element either at the beginning or the end of the Web pageUsually, you place the element either at the beginning or the end of the Web page

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Element Within the element, you place any data, including paragraphs and links, that is part of the contact information for the Web pageWithin the element, you place any data, including paragraphs and links, that is part of the contact information for the Web page Most Web browsers render the contents of the element in italicsMost Web browsers render the contents of the element in italics

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The and Elements The and elements are used for marking changes to a documentThe and elements are used for marking changes to a document The element marks text to be deleted from a document, whereas the element marks text to be inserted into a documentThe element marks text to be deleted from a document, whereas the element marks text to be inserted into a document

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The and Elements When using the and elements to mark up documents it is important to know why a change is made and when it was madeWhen using the and elements to mark up documents it is important to know why a change is made and when it was made

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The and Elements For this reason, the and elements include two optional attributes: cite and datetimeFor this reason, the and elements include two optional attributes: cite and datetime –You assign the cite attribute the URL of a Web page containing an explanation for the change –The datetime attribute specifies the date and time a change was made

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The and Elements Unlike most XHTML elements, the and elements can act as both inline and block-level elementsUnlike most XHTML elements, the and elements can act as both inline and block-level elements

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The and Elements However, when used as block-level elements, the and elements do not appear on their own line, as do most other block-level elementsHowever, when used as block-level elements, the and elements do not appear on their own line, as do most other block-level elements

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Element The element (short for preformatted text) tells a Web browser that any text and line breaks contained between the opening and closing tag are to be rendered exactly as they appearThe element (short for preformatted text) tells a Web browser that any text and line breaks contained between the opening and closing tag are to be rendered exactly as they appear

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Element The user agent should display the contents of a element in a monospace font, leave any white space intact, and should not wrap long lines of textThe user agent should display the contents of a element in a monospace font, leave any white space intact, and should not wrap long lines of text

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Element The element was originally designed as a way of preserving column alignment and line spacingThe element was originally designed as a way of preserving column alignment and line spacing In current browsers, you will find it is much easier to use tables to manage column alignmentIn current browsers, you will find it is much easier to use tables to manage column alignment

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Element The element is still typically used to contain computer output or programming code that needs to be rendered in a monospace font and that needs to retain its original line breaks, spaces, and white spaceThe element is still typically used to contain computer output or programming code that needs to be rendered in a monospace font and that needs to retain its original line breaks, spaces, and white space

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Quotations Quotations are no more or less important than other types of data you find on Web pages, but because the element is a block- level element and the element is an inline element, it is easier to discuss both elements in the same sectionQuotations are no more or less important than other types of data you find on Web pages, but because the element is a block- level element and the element is an inline element, it is easier to discuss both elements in the same section

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Element The element is a block- level element that defines long quotations on Web pagesThe element is a block- level element that defines long quotations on Web pages The element includes an optional cite attribute to which you can assign a URL that cites the quotation, provided you found it on the WebThe element includes an optional cite attribute to which you can assign a URL that cites the quotation, provided you found it on the Web

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Element The only purpose of the cite attribute is to identify the location of a URL that is the original source of a quotation; the value assigned to it is not rendered by a browser or visible in a ToolTipThe only purpose of the cite attribute is to identify the location of a URL that is the original source of a quotation; the value assigned to it is not rendered by a browser or visible in a ToolTip

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The Element The element is an inline element that you use to specify short quotations on your Web pageThe element is an inline element that you use to specify short quotations on your Web page You can also include the cite attribute with the element, which you assign the URL where you found the quotationYou can also include the cite attribute with the element, which you assign the URL where you found the quotation

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Special Characters You will often find it necessary to add special characters to your XHTML documents, such as a copyright symbol (©) or a non-English character such as the Latin capital letter E with a circumflex (Ê)You will often find it necessary to add special characters to your XHTML documents, such as a copyright symbol (©) or a non-English character such as the Latin capital letter E with a circumflex (Ê)

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Special Characters You add special characters to an XHTML document using numeric character references or character entity referencesYou add special characters to an XHTML document using numeric character references or character entity references

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Numeric Character References A numeric character reference inserts a special character using its numeric position in the Unicode character setA numeric character reference inserts a special character using its numeric position in the Unicode character set Unicode is a standardized set of characters from many of the world’s languagesUnicode is a standardized set of characters from many of the world’s languages

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Numeric Character References A number represents each character in the Unicode character setA number represents each character in the Unicode character set To display a character using a numeric character reference, place an ampersand (&) and the number sign (#) before the character’s Unicode number and a semicolon after the Unicode numberTo display a character using a numeric character reference, place an ampersand (&) and the number sign (#) before the character’s Unicode number and a semicolon after the Unicode number

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Numeric Character References Numeric character references and character references are both defined using an ampersandNumeric character references and character references are both defined using an ampersand For this reason, a Web browser may be confused if it encounters an ampersand within the text of a Web pageFor this reason, a Web browser may be confused if it encounters an ampersand within the text of a Web page

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Numeric Character References Therefore, you should use a numeric character reference of & in place of any ampersands in your documentTherefore, you should use a numeric character reference of & in place of any ampersands in your document

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Character Entities A character entity reference, or character entity, uses a descriptive name for a special character instead of its Unicode numberA character entity reference, or character entity, uses a descriptive name for a special character instead of its Unicode number For instance, you can display the copyright symbol on a Web page using a character entity of ©For instance, you can display the copyright symbol on a Web page using a character entity of ©

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Character Entities Most Web browsers ignore multiple, contiguous spaces on a Web page and replace them with a single spaceMost Web browsers ignore multiple, contiguous spaces on a Web page and replace them with a single space To force Web browsers to render multiple spaces, you must add a non- breaking space using the character entityTo force Web browsers to render multiple spaces, you must add a non- breaking space using the character entity

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Creating Lists Lists are a very important tool in proper Web page authoring because they provide a way of logically ordering a series of words or numbersLists are a very important tool in proper Web page authoring because they provide a way of logically ordering a series of words or numbers

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Creating Lists They also provide a simple, yet effective design technique for making it easier for Web site visitors to locate informationThey also provide a simple, yet effective design technique for making it easier for Web site visitors to locate information You can add three types of lists to a Web page; unordered lists, ordered lists, and definition listsYou can add three types of lists to a Web page; unordered lists, ordered lists, and definition lists

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Unordered Lists An unordered list is a series of bulleted itemsAn unordered list is a series of bulleted items To define the items you want to appear in the bulleted list, you nest elements within a elementTo define the items you want to appear in the bulleted list, you nest elements within a element

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Ordered Lists An ordered list is a series of numbered itemsAn ordered list is a series of numbered items To define the items you want to appear in the numbered list, you nest elements within an elementTo define the items you want to appear in the numbered list, you nest elements within an element

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Definition Lists A definition list is a series of terms and their definitionsA definition list is a series of terms and their definitions Web browsers render each term and its definition on separate lines with an indented left marginWeb browsers render each term and its definition on separate lines with an indented left margin

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Definition Lists You create a definition list by using the element, you nest elements for term names and elements for term definitionsYou create a definition list by using the element, you nest elements for term names and elements for term definitions

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science You activate a hypertext link by clicking it with your mouse buttonYou activate a hypertext link by clicking it with your mouse button A hypertext link in an HTML document is underlined and often displayed in a vivid colorA hypertext link in an HTML document is underlined and often displayed in a vivid color Linking Web Pages

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The text or image used to represent a link on a Web page is called an anchorThe text or image used to represent a link on a Web page is called an anchor You create a basic hypertext link using the element (the a stands for anchor)You create a basic hypertext link using the element (the a stands for anchor) Linking Web Pages

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Linking Web Pages It is not always necessary to use images for links because basic text links, if properly placed on a Web page, can be just as effectiveIt is not always necessary to use images for links because basic text links, if properly placed on a Web page, can be just as effective It takes much less time to create a text-based hyperlink than it does to design an image to use as a hyperlinkIt takes much less time to create a text-based hyperlink than it does to design an image to use as a hyperlink

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Hypertext Transfer Protocol (HTTP)Hypertext Transfer Protocol (HTTP) –manages the hypertext links that are used to navigate the Web –ensures that Web browsers correctly process and display the various types of information contained in Web pages (text, graphics, audio, and so on) Uniform Resource Locators

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The protocol portion of a URL is followed by a colon, two forward slashes, and a hostThe protocol portion of a URL is followed by a colon, two forward slashes, and a host A host refers to a computer system that is being accessed by a remote computerA host refers to a computer system that is being accessed by a remote computer The host portion of a URL is usually www for “World Wide Web”The host portion of a URL is usually www for “World Wide Web” Uniform Resource Locators

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Domain nameDomain name –a unique address used for identifying a computer, often a Web server, on the Internet –consists of two parts separated by a period –The first part of a domain name is usually text that easily identifies a person or an organization, such as DonGosselin or Course Uniform Resource Locators

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science –The last part of a domain name, known as the domain identifier, identifies the type of institution or organization –Common domain identifiers include.biz,.com,.edu,.info,.net,.org,.gov,.mil, or.int Uniform Resource Locators

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Absolute and Relative Links An absolute URL refers to the full Web address of a Web page or to a specific drive and directoryAn absolute URL refers to the full Web address of a Web page or to a specific drive and directory A relative URL specifies the location of a file relative to the location of the currently loaded Web pageA relative URL specifies the location of a file relative to the location of the currently loaded Web page

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Linking Within the Same Web Page Bookmarks are internal links within the current document and can be a particularly effective tool for helping users navigate through a long Web pageBookmarks are internal links within the current document and can be a particularly effective tool for helping users navigate through a long Web page You create bookmark links by using the id attributeYou create bookmark links by using the id attribute

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Linking Within the Same Web Page The standard id attribute uniquely identifies an individual element in a documentThe standard id attribute uniquely identifies an individual element in a document Any element that includes an id attribute can be the target of a linkAny element that includes an id attribute can be the target of a link

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Linking Within the Same Web Page The id attribute replaces the name attribute that is used in HTMLThe id attribute replaces the name attribute that is used in HTML Many older browsers do not recognize the id attributeMany older browsers do not recognize the id attribute To address this problem the name attribute was not deprecated in the elementTo address this problem the name attribute was not deprecated in the element

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Linking Within the Same Web Page To ensure that your links are valid in older browsers, you must use both the id and name attributes inside an element and assign the same value to both attributesTo ensure that your links are valid in older browsers, you must use both the id and name attributes inside an element and assign the same value to both attributes

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Metadata The term metadata means information about informationThe term metadata means information about information In a Web page, you use the element to provide information to search engines and Web servers about the information in your Web pageIn a Web page, you use the element to provide information to search engines and Web servers about the information in your Web page

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Metadata You must place the element within the elementYou must place the element within the element You can use three primary attributes with the element: name, content, and http-equivYou can use three primary attributes with the element: name, content, and http-equiv

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The name Attribute You use the name attribute to define the name of the information you want to provide about the Web pageYou use the name attribute to define the name of the information you want to provide about the Web page You can use any text you like as the value of the name attributeYou can use any text you like as the value of the name attribute

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The name Attribute Two values that are used by some search engines are description and keywordTwo values that are used by some search engines are description and keyword –Many search engines create a description of a Web page based on the first 200 characters following the opening tag, unless the Web page includes a description element

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The name Attribute –Keywords are the words that describe the type of Web page a user is looking for and will likely type into a Web directory or search engine

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Hiding Web Pages from Search Engines Your Web site may includes pages that you do not want to be included in any search engine indexesYour Web site may includes pages that you do not want to be included in any search engine indexes

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Hiding Web Pages from Search Engines For instance, you may have a page that stores personal information or private data that, although not private enough to encrypt using special security software or a protocol such as HTTPS, should not be returned to a user who performs a search in a search engineFor instance, you may have a page that stores personal information or private data that, although not private enough to encrypt using special security software or a protocol such as HTTPS, should not be returned to a user who performs a search in a search engine

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Hiding Web Pages from Search Engines You can inform search engine spiders that you do not want certain pages on your site to be indexed by placing a file named robots.tx in the root directory of the Web server that hosts your Web siteYou can inform search engine spiders that you do not want certain pages on your site to be indexed by placing a file named robots.tx in the root directory of the Web server that hosts your Web site This technique is called the Robots Exclusion ProtocolThis technique is called the Robots Exclusion Protocol

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The http-equiv Attribute When a user wants to access a Web page, either by entering its URL in a browser’s Address box or by clicking a link, the user’s Web browser asks the Web server for the Web page in what is referred to as a requestWhen a user wants to access a Web page, either by entering its URL in a browser’s Address box or by clicking a link, the user’s Web browser asks the Web server for the Web page in what is referred to as a request

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The http-equiv Attribute What the Web server returns to the user is called the responseWhat the Web server returns to the user is called the response One part of the response is the requested Web pageOne part of the response is the requested Web page

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The http-equiv Attribute The response header is sent to the Web browser before the Web page is sent in order to provide information that the browser needs to render the pageThe response header is sent to the Web browser before the Web page is sent in order to provide information that the browser needs to render the page

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The http-equiv Attribute One of the most important pieces of information in the response header is the type of data, or content-type, that the server is sendingOne of the most important pieces of information in the response header is the type of data, or content-type, that the server is sending

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science The http-equiv Attribute One important use of the element is to specify a document’s character encodingOne important use of the element is to specify a document’s character encoding The W3C strongly encourages the use of content-type elements to specify an XHTML document’s character setThe W3C strongly encourages the use of content-type elements to specify an XHTML document’s character set

N241: Fundamentals of Web Development Copyright ©2004  Department of Computer & Information Science Resources Slides were adapted from the following text & companion lectures:Slides were adapted from the following text & companion lectures: XHTML, Comprehensive First Edition Dan Gosselin Published by Course Technology (2004)

CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Introducing XHTML: Module D: Text, Lists & Links.

Similar presentations

Presentation on theme: "CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Introducing XHTML: Module D: Text, Lists & Links."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Introducing XHTML: Module D: Text, Lists & Links.

Similar presentations

Presentation on theme: "CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Introducing XHTML: Module D: Text, Lists & Links."— Presentation transcript:

Similar presentations

About project

Feedback