Скачать презентацию 1 Credits Parts of the slides are based
cccdec76ff7f510a28b760b793cbe2c5.ppt
- Количество слайдов: 98
Скачать презентацию 1 Credits Parts of the slides are based
Скачать презентацию 1 Credits Parts of the slides are based
1 Credits: Parts of the slides are based on slides created by textbook, Essentials for Design XHTML Copyright (c) 2009 Prentice-Hall. All rights reserved. © 2009 Pearson Education Jozef Goetz, 2010
2 Learning Outcomes § In this chapter, you will learn about: § The development of HTML § The transition from HTML to XHTML § XHTML syntax, tags, and document type definitions § The anatomy of a web page § Formatting the body of a web page § Formatting the text on a web page § Physical and logical style tags § Special Characters § Connecting Web pages using hyperlinks Jozef Goetz, 2010
3 What is HTML? § The World Wide Web is composed of files containing Hypertext Markup Language (HTML) § HTML is based on SGML Standard Generalized Markup Language § Describes the general structure of the document § HTML Describes the Structure of a Page § It defines a set of common styles for Web pages § § § headings paragraphs lists tables and more § Each of these common styles has a tag associated with it to define the element § HTML § Made up of tags and attributes § The set of markup symbols or codes placed in a file intended for display on a Web browser page. Jozef Goetz, 2010
What HTML Is -- and What It Isn’t Heading Paragraph Bulleted List Paragraph Jozef Goetz, 2010 4
5 What is HTML? § The text of the page § Adds special code (tags) around words and paragraphs § each individual markup code is referred to as an element or tag. Each tag has a purpose. § Tags are enclosed in angle brackets, "<" and ">" symbols – referred to as container tags <body> </body> § Most tags come in pairs; an opening tag and a closing tag. § horizontal line: <hr align=“right” /> is a stand-alone or self-contained tag and doesn’t have a closing tag. Jozef Goetz, 2010
HTML Whereas the text is the actual information contained in a page, the tags define the appearance of the document. § Every HTML tag is a name followed by an optional list of attributes, all enclosed between less-than and greater-than symbols (< and >). § An attribute, if present, is followed by an equals sign and the value of the attribute. § Some tags can be used alone; others must be used in pairs. § Those that are used in pairs are called beginning and ending tags. § The beginning tag can have attributes and values and starts with the name of the tag. § The ending tag cannot have attributes or values but must have a slash before the name of the tag. Jozef Goetz, 2010
HTML § The browser makes a decision about the structure of the text based on the tags, which are embedded into the text. § Scripting language that instructs a Web browser how to display a Web page § Less powerful than other computer languages § Runs within a browser, not stand-alone § One of the latest version: HTML 4. 01 § Is being replaced with XHTML Jozef Goetz, 2010
8 What is HTML? § HTML tags that indicate: § page elements § structure § formatting § hypertext links § HTML tags are not case sensitive § XHTML tags are case sensitive § all tags and attributes must be written in lowercase § browsers ignore: § extra spaces § tabs § returns § tags are the only way to format an HTML page Jozef Goetz, 2010
9 What HTML Is § The individual browsers map the tag to how it will be viewed § different browsers can display the same tag element in radically different ways § what this means is that a Web page may look perfect on your system and be unreadable on someone else's Jozef Goetz, 2010
What HTML Is -- and What It Isn’t § In addition to the HTML tags defined in the various versions of HTML: § browser vendors defined their own browser-specific extensions Jozef Goetz, 2010 10
11 What is HTML? § The World Wide Web is composed of files containing Hypertext Markup Language (HTML) § Scripting language that instructs a Web browser how to display a Web page § Less powerful than other computer languages § Runs within a browser, not stand-alone § One of the latest version: HTML 4. 01 § Is being replaced with XHTML Jozef Goetz, 2010
Brief History of HTML § A Brief History of HTML Tags § HTML 2. 0 (RFC 1866) was developed by the IETF's HTML Working Group, which closed in 1996. § It sets the standard for core HTML features based upon current practice in 1994. Jozef Goetz, 2010 12
What HTML Is -- and What It Isn’t § HTML 3. 2 § W 3 C's recommendation for HTML which represented the consensus on HTML features for 1996. § HTML 3. 2 added widely-deployed features such as – tables, – applets, – text-flow around images, – superscripts and – subscripts, § while providing backwards compatibility with the existing HTML 2. 0 Standard. Jozef Goetz, 2010 13
What HTML Is -- and What It Isn’t § HTML 4. 0 § First released as a W 3 C Recommendation on 18 December 1997. § A second release was issued on 24 April 1998 with changes limited to editorial corrections. § This specification has now been superseded by HTML 4. 01. § HTML 4. 01 § The HTML 4. 01 Recommendation released on 24 th December 1999 fixes a number of bugs in the HTML 4. 0 specification. Jozef Goetz, 2010 14
HTML Version Structure WML= Wireless Markup Language Jozef Goetz, 2010 15
Markup Languages § HTML 5 § The next version of HTML 4 and XHTML 1 § http: //www. w 3. org/html/ 16 Jozef Goetz, 2010
Markup Languages § The relationship between XHTML, and XML 17 Jozef Goetz, 2010
18 What is XHTML? § The World Wide Web Consortium http: //w 3 c. org § sets the standards for HTML and its related languages. § The newest version of HTML is actually XHTML – e. Xtensible Hyper. Text Markup Language. § XHTML uses the tags and attributes of HTML along with the syntax of XML (e. Xtensible Markup Language). Jozef Goetz, 2010
What’s wrong with HTML? § Forgiving coding errors and § display size limitation of new Internet devices: § § Web. TV Personal Information Managers Personal Digital Assistants - PDAs Mobile phones § HTML does not fit this need today’s devices § the need for a descriptive rather than structural language became evident and XHTML was created. Jozef Goetz, 2010 19
Programs to Help You Write HTML § Many programs available to help create HTML files § 3 flavors of editors: § HTML-based text editors § WYSIWYG (What You See What You Get) editors § Combination of HTML-based and WYSIWYG editors Dreamweaver § There also converters that generate an HTML file from an existing document. § For now use Notepad Jozef Goetz, 2010 20
What is XHTML and Why Use It? § What is XHTML and Why Use It? § e. Xtensible Hyper. Text Markup Language. § XHTML is the transition from HTML 4. 0 to XML (Extensible Markup Language) § Expected benefits of the transition include: – places specific requirements on documents to ensure they are readable in future browsers, – an improved match to database & workflow applications, – a modular solution to the increasingly disparate capabilities of browsers, – and the ability to cleanly integrate HTML with other XML applications. Jozef Goetz, 2010 21
22 XHTML § XHTML was developed by the W 3 C World Wide Web Consortium to be the reformulation of HTML as an application of XML. § Purpose: § Provides a more structured alternative to nonstandard HTML § Provide ways to extend HTML and add new features § Separate content from presentation (>=XHTML 2. 0) § XHTML combines § the formatting strengths of HTML and § the data structure and extensibility strengths of XML. – allows for custom tags Jozef Goetz, 2010
What is XHTML and Why Use It? 23 § XHTML Syntax § Use lowercase tags and attributes § Place attribute tags in quotes § All container tags must use their opening and closing tags. All tags are enclosed in angle brackets. § Terminate all non-empty single elements – add the closing slash (/) preceded by a space just before the ending greater symbol than (>) • and <hr> become and <hr /> § Tags shouldn’t be overlapped – nested -- <b><i>Bold and Italic</i></b> – overlapping -- <b><i>Bold and Italic</b></i> Jozef Goetz, 2010
XML Declaration § An XML document must be well-formed i. e. adheres to the syntax rules § Use lowercase § Use opening and closing tags <body> </body> § Close stand-alone tag with special syntax <hr /> § XML documents begin with an XML declaration as a directive. The basic form of this directive is (p. 567): <? xml version="1. 0" encoding="UTF-8"? > § UTF-8 a form of Unicode Jozef Goetz, 2010 24
Document Type Definition (DTD) § W 3 C Recommendation: Use a Document Type Definition DTD to identify the type of markup language used in a web page (p. 567): 1. XHTML 1. 0 Transitional This is the least strict specification for XHTML 1. 0. It allows the use of both Cascading Style Sheets and traditional formatting instructions such as fonts. We will use this for most of our coding in this text <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> 2. XHTML 1. 0 Strict 3. XHTML 1. 0 Frameset Jozef Goetz, 2010 25
XHTML 1. 0 Transitional DTD 26 Document Type Definition DTD tag commonly called the DOCTYPE We will use mainly XHTML 1. 0 version sometimes XHTML 1. 1 <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd> http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd gives access to the DTD definitio This DTD module is identified by the PUBLIC and SYSTEM identifiers PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" SYSTEM "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd Jozef Goetz, 2010
27 Versions of XHTML § Strict (XHTML 2. 0) § Must follow complete XML coding rules § Must separate content from presentation § Presentation via Cascading Style Sheets (CSS) § Transitional (XHTML 1. 0, 1. 1) § Reformulation of HTML 4. 01 § Presentation and content tags exist § Frameset § Enable window-in-a-window effect 27 Jozef Goetz, 2010
Dr. Dobb's Update - 07/30/09 - HTML 5 vs. XHTML 2 § XHTML 2 is related to XHTML 1. 0 or XHTML 1. 1 — and you'd be wrong. XHTML 1. 0 is nothing more than HTML 4 with XML syntax. For its part, XHTML 1. 1 is the same, but with the requirement that documents must be served with an XML MIMEtype. § So XHTML 2 is history and we don't have to concern ourselves with it, right? Not really. A lot of people still prefer XHTML syntax. In their comic, Keith and Colbow introduce us to some of these folks who give very good reasons for their views. For example, if you want to keep on closing all tags and quoting all attributes, you can — using either XHTML 2 or HTML 5 lets you use whatever syntax you feel comfortable with. As Keith and Colbow point out, you can even serve your documents as application/XHTML+XML, transforming them from HTML 5 into XHTML 5. Jozef Goetz, 2010 28
Document Type Definition (DTD) § The document type declaration names the document type definition (DTD) in use for the document. § Declares the document type § Required in XHTML § HTML 4. 01 specifies three DTDs: § <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01//EN" "http: //www. w 3. org/TR/html 4/strict. dtd"> § <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01 Transitional//EN" "http: //www. w 3. org/TR/html 4/loose. dtd"> § <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01 Frameset//EN" "http: //www. w 3. org/TR/html 4/frameset. dtd"> Jozef Goetz, 2010 29
First Web Page 30 After the XML and the DTD, each web page begins with an opening <html> and a closing </html> tag. <? xml version="1. 0" encoding="UTF-8"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 transitional. dtd"> <html> an opening tag. . page info goes here </html> a closing tag Jozef Goetz, 2010
Head & Body Sections § Head Section (description) -Contains information that describes the web page document. <head> …head section info goes here </head> § Body Section (contents) -- Used for text and tags that do show directly on the web page. <body> …body section info goes here </body> Jozef Goetz, 2010 31
32 namespace xmlns=http: //www. w 3. org/1999/xhtml> § The location of the documentation for the elements being used http: //www. w 3. org/1999/xhtml/ § This is an XML namespace defined in the XHTML™ 1. 0: The Extensible Hyper. Text Markup Language specification, and § is shared across XHTML Family document types Jozef Goetz, 2010
XHTML <head> and <body> tags <? xml version="1. 0" encoding="UTF-8"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 transitional. dtd"> <html xmlns=http: //www. w 3. org/1999/xhtml> <head>. . Header info goes here </head> <body>. . Body info goes here </body> </html> Jozef Goetz, 2010 33
34 The Title p. 568 -9 § <title> tag § § gives a page a title used in bookmarks used by search engines appears in browser title bar § goes inside the page header (<head>) Jozef Goetz, 2010
35 HTML Code in Notepad and Browser Results Title goes in Title bar of browser Body goes in content area of browser 35 Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010
36 Saving an XHTML File from Notepad § By default, files from Notepad are saved with a. txt extension § If you try to save as filename. htm, then the saved file name will be filename. htm. txt § You can avoid this by either: § Making sure that the Save As Type entry is set as All Files instead of *. txt or § Saving with the name in quotes, like this: "filename. htm" 36 Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010
Checkpoint 2. 1 p. 619 37 § 1. Describe the origin, purpose, and features of HTML. § 2. Explain why you would use XHTML instead of HTML. § 3. Describe the purpose of the header and body sections of a web page. Jozef Goetz, 2010
Lab Excercises 38 Hands On Practice 2. 1 Jozef Goetz, 2010
39 XHTML <body> tag attributes § The <body> tag can be used to set attributes (properties) for entire Web page, such as § § Background color Background image Text color and Link color § bgcolor § Configures the background color of a web page <body bgcolor=“#000066”> // dark navy blue <body bgcolor=“white”> § text Configures the color of the text on the web page <body bgcolor=“#000066” text=“#CCCCCC”> <body bgcolor=“white” text=“red”> § Check the XHTML Reference p. 571 in the textbook for more body tag attributes Jozef Goetz, 2010
40 Headings § Heading tags § Six levels: <h 1>, <h 2>, <h 3>, <h 4>, <h 5>, and <h 6> § used to divide sections -- similar to a book § displayed either in larger or bolder text § can be centered, underlined, capitalized § common to use a heading to duplicate the title Jozef Goetz, 2010
Heading Tags 41 <h 1>Heading Level 1</h 1> <h 2>Heading Level 2</h 2> <h 3>Heading Level 3</h 3> <h 4>Heading Level 4</h 4> <h 5>Heading Level 5</h 5> <h 6>Heading Level 6</h 6> <h 1> is largest <h 6> is smallest Jozef Goetz, 2010
Outline 2002 Prentice Hall. All rights reserved. 42
43 XHTML <p> tag § Enter/Return key does not provide this in XHTML documents § Can use paragraph tag <p> …paragraph goes here </p> § Used to group sentences and sections of text together. § Text that is contained by <p> and </p> tags will have a blank line above and below it. Jozef Goetz, 2010
44 Closing Container Tags § XHTML rules require all tags have closing tags § Opening tag has tag code: § e. g. <p> § Closing tag has forward slash in front of code § e. g. </p> § Content placed between opening and closing tags § <p> CONTENT </p> § Browsers are forgiving, but XHTML rules are strict 44 Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010
45 Effects of <p> Tags Without <p> tag, Enter/Return has no effect on browser display <p> tag inserts white space and separates lines of text Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010 HOP 2. 245 +2. 3
46 Body and Text Basics § Structural elements, called § block-level tags p. 572, control blocks of the text such as §headings §paragraphs and §list § Tags that effect individual section of text called text-level tags p. 574 Jozef Goetz, 2010
Lab Excercises 47 Hands On Practice 2. 2 + 2. 3 Jozef Goetz, 2010
Self-contained <br /> tag § Line Break tag § the line break tag in HTML has no corresponding closing tag. § Many empty tags in HTML (i. e. tags with no text content) have no closing tags, but this is not true in XHTML. § to make an opening tag also be a closing tag, by placing a slash before the end bracket <br />. § Stand alone tag …text goes here <br /> This starts on a new line…. § Used to force a new line when the text on the web page document is displayed by a browser. Jozef Goetz, 2010 48
49 Attributes § Most tags can have attributes § Attribute is: § Information in the opening tag § Additional information that defines a tag § Attribute syntax: § attributename = “value” § Attribute – value pair 49 Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010
50 The align Attribute § Specifies how text within the paragraph should be aligned § Options include: left, center, right, justify § Example: § <p align = “center”> CONTENT </p> 50 Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010
51 HOP 2. 4: Jozef Goetz, 2010
52 Effects of align attribute Effect of <p align=“center”> Effect of <p align=“right”> 52 Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010
53 Effects of Headings Tags <h 1 align="center">Dr. Know-It-All Recommendations</h 1> <h 2 align="center">Upcoming Books</h 2> Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010 HOP 53 2. 4
Lab Excercises 54 Hands On Practice 2. 4 Jozef Goetz, 2010
55 Deprecation § Some HTML tags or attributes are deprecated § they are still supported but will be discontinued in strict XHTML § Deprecated tags/attributes are old (obsolete) versions § Replaced by newer, improved XHTML tags/attributes § Most browsers support deprecated tags § The align attribute is deprecated § Modern alignment is handled through style sheets Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010 55
56 XHTML <pre> tag § Preformatted Text tag § The preformatted text tag preserves your formatting and displays the text in a fixed-width or monospace font. <pre> …text goes here Line breaks and formatting are preserved </pre> § NOTE: Usually is used for listing programming or scripting code Jozef Goetz, 2010
57 Blockquote Tag § Used to indent a block of text for special emphasis. <blockquote> …text goes here </blockquote> § Indents contained text § Indentation from left and right margins and a line break is placed before and after the text § Nest blockquote Prentice-Hall. Allincrease indentation tags to rights reserved. Copyright (c) 2006 Jozef Goetz, 2010 57
58 Effects of Blockquote Tag <blockquote> tag causes this indentation Nested <blockquote> causes more indentation Copyright (c) 2006 Prentice-Hall. All rights reserved. HOP 2. 3 – 2. 558 Jozef Goetz, 2010
Lab Excercises 59 Hands On Practice 2. 5 Jozef Goetz, 2010
XHTML List Basics 60 § Definition List - dl § Ordered List - ol § Unordered List -ul Jozef Goetz, 2010
61 Lists § List Tags Common Elements § opening and closing tag 1. definition list <dl> and </dl> – definition term <dt> and – definition data <dd> 2. ordered list – list items <ol> and </ol> <li> 3. unordered list <ul> and </ul> – list items <li> § list items have their own tag <li> Jozef Goetz, 2010
62 XHTML Definition List § Useful to display a list of terms an definitions or a list of FAQ and answers § <dl> tag Contains the definition list § <dt> tag Contains a defined term § <dd> tag Contains a data definition Jozef Goetz, 2010 HOP 2. 5
XHTML Definition List Example <dl> <dt>IP</dt> <dd>Internet Protocol</dd> <dt>TCP</dt> <dd>Transmission Control Protocol</dd> </dl> Jozef Goetz, 2010
64 1. Definition Lists <dl> Jozef Goetz, 2010
Lab Excercises 65 Hands On Practice 2. 6 Jozef Goetz, 2010
66 2. Ordered Lists Used to convey information in an ordered fashion Jozef Goetz, 2010
2. XHTML Ordered List § <ol> Contains the ordered list § Two main ways to customize ordered lists § how they are numbered – type attribute • default is numerals: 1, 2, … § the number with which the list starts – start attribute § Ex: <ol start=“ 100” type=“I”> § <li> Contains an list item Jozef Goetz, 2010 67
68 2. Ordered List § Type attribute can take one of five values § “ 1” Specifies standard Arabic numerals – 1, 2, 3, 4, 5 § “a” Specifies lowercase letters – a, b, c, d, e § “A” Specifies uppercase letters – A, B, C, D, E § “i” Specifies lowercase Roman numerals – i, iii, iv, v § “I” Specifies uppercase Roman numerals – I, III, IV, V Jozef Goetz, 2010
69 2. Ordered List § Both the start and type attributes are used in the <ol> tag <ol start=100 type=“I”> § start=“ 1” is the default value § type=“ 1” is the default value § By using the value attribute in the <li> tag, numbering can be reassigned at any point <li value=1111> Step 5 and …=> § So, it will start from MCXI. Jozef Goetz, 2010
70 3. Unordered Lists Used to display information in bullet points Jozef Goetz, 2010
XHTML Unordered List Example <ul> <li>TCP</li> <li>IP</li> <li>HTTP</li> <li>FTP</li> </ul> Jozef Goetz, 2010
XHTML Unordered List § HTML 3. 2 provided ways to customize unordered lists § They have been deprecated in HTML 4. 0 in favor of using style sheets § <ul> Contains the unordered list § The type attribute customizes unordered lists § the type attribute has 3 possible values – disc - default – square, – circle § the type attribute is used in the <ul> tag <ul type=“square”> § <li> Contains an list item Jozef Goetz, 2010 72
Outline list. html (1 of 3) Nested and Ordered Lists 2002 Prentice Hall. All rights reserved. 73
list. html Outline (2 of 3) Nested and Ordered Lists 2002 Prentice Hall. All rights reserved. 74
list. html Outline (3 of 3) Nested and Ordered Lists 2002 Prentice Hall. All rights reserved. 75
76 Comments § Comment <!-- text inside here is ignored --> § It’s a good rule of thumb not to include “--”, “<“, “>”, or HTML tags within comments Jozef Goetz, 2010
Lab Excercises 77 Hands On Practice 2. 7 Jozef Goetz, 2010
XHTML Logical Style Tags see Tab. p. 43 -45 § Indicate the logical (general) style used to display the text in between the container tags. § Common Logical Style Tags § <strong></strong> § To cause text to be emphasized or to "stand out" from surrounding text. Usually displayed in bold. <strong> This is important</strong> § <em></em> § To cause text to be emphasized in relation to other text on the page. Usually displayed in italics. <em> Please note</em> Jozef Goetz, 2010 78
XHTML Physical Style Tags § Provide specific font instructions for the browser 79 § Logical Style tags are preferred by the W 3 C § Physical Style tags § They provide specific fonts instructions for the browser § are discussed (see tab p. 45) because some web developers still use them § Common Physical Style Tags § <b></b> § To display as bold text <b>This is important</b> § <i></i> § To display text in italics <i>Please note</i> § Logical Style Tags provides a wider range of Web access Jozef Goetz, 2010
80 XHTML Special Characters HOP 2. 8 § Used to display special characters such as quotes, copyright symbol, etc. § Character entity references (in the form &code; ) § Numeric character references (e. g. & ) Numeric Code © < > & Character Code © © < < > > & & § See the Special Characters section textbook for a detailed list – appendix B p. 596 text from CMPS 318 Jozef Goetz, 2010
Outline contact 2. html (1 of 2) 2002 Prentice Hall. All rights reserved. 81
contact 2. ht Outline ml (2 of 2) 2002 Prentice Hall. All rights reserved. 82
Checkpoint 2. 3 83 HOP 2. 8 § 1. Provide a reason for using logical style tags rather than physical style tags. § The last one describes fonts rather than general styles for the presentation of info. § 2. Describe the purpose of special characters. § Entity ch-rs, displays items such as quotation marks, <, >, the copyright symbol etc. Jozef Goetz, 2010
Lab Excercises 84 Hands On Practice 2. 8 Jozef Goetz, 2010
XHTML <a> tag § The anchor element § href (hypertext reference) § Indicates the target – destination page or location of the link § Text between the <a> and </a> is displayed on the web page. <a href="contact. html">Contact Us</a> § href Attribute § Indicates the file name or URL Web page document, photo, pdf, etc. 85 Jozef Goetz, 2010
Creating Links URL Opening Tag Text that will be displayed Closing Tag Jozef Goetz, 2010
87 Glossary § Hyperlinks – clickable areas take the viewer to another location § Uniform Resource Locator (URL) – the Web address of a resource § Relative URL – local file or folder § Absolute URL – address on another Web server § Typically begins with http: // § HTTP – hypertext transfer protocol § Web server – the computer hosting a Web site 87 Jozef Goetz, 2010
XHTML <a> tag § Absolute link § Link to other Web sites <a href="http: //yahoo. com">Yahoo</a> § Relative link § Link to pages on your own site <a href="index. htm">Home</a> 88 Jozef Goetz, 2010
89 Hyperlinks § Hands-On Practice Home index. html Resume resume. html Favorites favorites. html Jozef Goetz, 2010
90 Effects of <a>, href, and title: Provides text that can appear in a tool tip when the mouse hovers over the link Mouse pointer changes when hovered over the link Tool tip generated by title="Home Page Link" Displayed text generated by text between the <a> tag and the </a> tag When user clicks, the page opened will be based on href=“http: //www. laverne. edu" <a href=“http: //www. laverne. edu" title="Home Page Link">Click here to go to our home page!</a> 90 Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010
XHTML Email Links using the <a> tag § Automatically launch the default mail program configured for the browser § If no browser default is configured, a message is displayed <a href=“mailto: me@hotmail. com”>me@hotmail. com</a> 91 Jozef Goetz, 2010
92 Jozef Goetz, 2010
Checkpoint 1. Describe when to use an absolute link. Is the http protocol used in the href value? 2. Describe when to use a relative link. Is the http protocol used in the href value? 3. What happens when a web site visitor clicks on an e-mail link? 93 Jozef Goetz, 2010
Writing Valid XHTML § Check your code for syntax errors § Benefit: § Valid code more consistent browser display § W 3 C XHTML Validation Tool § http: //validator. w 3. org Jozef Goetz, 2010
95 Web Resources § § § § www. w 3. org/TR/xhtml 11 www. xhtml. org www. w 3 schools. com/xhtml/default. asp http: //validator. w 3. org hotwired. lycos. com/webmonkey/00/50/index 2 a. html wdvl. com/Authoring/Languages/XML/XHTML www. w 3. org/TR/2001/REC-xhtml 11 -20010531 Jozef Goetz, 2010
Summary 96 § This chapter provided an introduction to XHTML. § It began with an introduction to the HTML, discussed the transition to XHTML, continued with the anatomy of a web page, and introduced inline and block-level formatting, and demonstrated the XHTML techniques used to create hyperlinks. § § You will use these skills over and over again as you create Web pages. Jozef Goetz, 2010
Home Project – Java. Jam Cofee House Jozef Goetz, 2010
Home Project – Fish Creek Animal Hospital Jozef Goetz, 2010
Скачать презентацию 1 Credits Parts of the slides are based
cccdec76ff7f510a28b760b793cbe2c5.ppt