1 / 66

Introducing HTML and XHTML Web Design Basics

Introducing HTML and XHTML Web Design Basics. Goals. Understand hyper-linking Understand how tags are formed Understand HTML as a markup language Understand the role of the W3C. The World Wide Web.

fancy
Download Presentation

Introducing HTML and XHTML Web Design Basics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introducing HTML and XHTMLWeb Design Basics

  2. Goals • Understand hyper-linking • Understand how tags are formed • Understand HTML as a markup language • Understand the role of the W3C

  3. The World Wide Web • Accessing cross-referenced documents, known as hypertext linking, is probably the most important aspect of the Web because it allows you to quickly open other Web pages

  4. The World Wide Web • A hypertext link, or hyperlink, contains a reference to a specific Web page that you can click to quickly open that Web page

  5. The World Wide Web • A document on the Web is called a Web page, identified by a unique address called the Uniform Resource Locator, or URL • URL commonly referred to as a Web address

  6. The World Wide Web • A URL is a type of Uniform Resource Identifier (URI), which is a generic term for many types of names and addresses on the World Wide Web

  7. The World Wide Web • A Web site refers to the location on the Internet of the Web pages and related files (such as graphic files) that belong to a company, organization, or individual

  8. HTML Documents • Originally, people created Web pages using Hypertext Markup Language • Hypertext Markup Language (HTML) is a simple language used to create the Web pages that appear on the World Wide Web

  9. HTML Documents • A markup language is a set of characters or symbols that define a document’s logical structure or how a document should be printed or displayed

  10. HTML Documents • HTML is based on an older language called Standard Generalized Markup Language, or SGML, which defines the data in a document independently of how the data will be displayed

  11. HTML Documents • A targetoutputformat refers to the medium in which a document will be displayed, such as a Web page or an online help system

  12. Basic HTML Syntax • HTML documents are text documents that contain: • formatting instructions, called tags • the text that is to be displayed on a Web page

  13. Basic HTML Syntax • HTML tags range from formatting commands to controls that allow user input • Tags are enclosed in brackets (< >), and most consist of a starting tag and an ending tag that surround the text or other items they are formatting or controlling

  14. Common Structure and Formatting HTML Tags

  15. Basic HTML Syntax • All HTML documents begin with <html> and end with </html> • Two other important HTML tags are the <head> tag and the <body> tag

  16. Basic HTML Syntax • The <head> tag contains information that is used by the Web browser, and you place it at the start of an HTML document, after the opening <html> tag

  17. Basic HTML Syntax • The <head> tag pair and the tags it contains are referred to as the document head • Following the document head is the <body> tag, which contains the document body

  18. Basic HTML Syntax • The <body> tag pair and the text and tags it contains are referred to as the document body • A Web browser’s process of assembling and formatting an HTML document is called parsing or rendering

  19. Basic HTML Syntax • You use various parameters, called attributes, to configure many HTML tags • You place an attribute before the closing bracket of the starting tag, and separate it from the tag name or other attributes with a space

  20. Basic HTML Syntax

  21. Web Page Design and Authoring • Web page design, or Web design, refers to the visual design and creation of the documents that appear on the World Wide Web

  22. Web Page Design and Authoring • Web page authoringrefers to the creation and assembly of the tags, attributes, and data that make up a Web page

  23. Web Page Design and Authoring • This is a subtle, but important distinction: • A book on Web design teaches the visual and graphical design aspects of creating Web pages • A book on XHTML teaches the more basic concepts that you need to get started, such as how to work with tags and attributes

  24. The W3C • Web page authors began to find it necessary to write slightly different HTML code for each Web browser in which they anticipated their Web page would be opened

  25. The W3C • To address the growing need for standards, Tim Berners-Lee established the World Wide Web Consortium, or W3C, in 1994 at MIT to oversee the development of Web technology standards

  26. The W3C • The W3C does not release a version of a particular technology. Instead, it issues a formal recommendation for a technology, which essentially means that the technology is (or will be) a recognized industry standard

  27. Web Browsers • In 2004, Internet Explorer browsers are being used by more than 85% of the market. • Netscape Navigator also makes up a large part of the browser market.

  28. Web Browsers • Three additional browsers that are worth noting are: • Amaya (http://w3.org/amaya) • Mozilla (http://www.mozilla.org) • Opera (http://www.opera.com)

  29. Web Browsers • You must test your Web pages in every browser and browser version in which you anticipate they will be opened.

  30. HTML vs. XHTML

  31. The Evolution of XHTML • The Web is expanding to other media, called user agents, which are devices that are capable of retrieving and processing HTML and XHTML documents

  32. The Evolution of XHTML • A user agent can be a traditional Web browser or a device such as a mobile phone or PDA, or even an application that simply collects and processes data instead of displaying it • HTML is not suitable for user agents other than Web browsers

  33. The Evolution of XHTML • HTML has evolved into a markup language that is more concerned with how data appears than with the data itself • Current and older versions of Web browsers allow you to write sloppy HTML code

  34. The Evolution of XHTML • Languages based on SGML use a Document Type Definition, or DTD, to define the tags and attributes that you can use in a document, and the rules the document must follow when it includes them

  35. The Evolution of XHTML • When a document conforms to an associated DTD, it is said to be valid • When a document does not conform to an associated DTD, it is said to be invalid

  36. The Evolution of XHTML • You can check whether a document conforms to an associated DTD by using a program called a Validating Parser

  37. The Evolution of XHTML • Because HTML is based on SGML, it requires a DTD, and the HTML DTD is built directly into Web browsers • When a Web browser opens an HTML document, it first compares the document to the DTD

  38. The Evolution of XHTML • If an HTML document is missing any required tags, the HTML DTD supplies them, allowing the Web browser to render the page correctly

  39. The Basics of XML • Extensible Markup Language, or XML, is used for creating Web pages and defining and transmitting data between applications • Like HTML, XML is based on SGML

  40. The Basics of XML • Version 1.0 of XML achieved recommendation status by the W3C in 1998 and was still current at the time of this writing

  41. The Basics of XML • In XML you refer to a tag pair and the data it contains as an element • All elements must have an opening and a closing tag • The data contained within an element’s opening and closing tags is referred to as its content

  42. The XML Declaration • XML documents should begin with an XML declaration • Specifies the version of XML being used

  43. The XML Declaration • Not required to include an XML declaration because currently only one version of XML exists, version 1.0 • The encoding attribute of the XML declaration designates the language used by the XML document

  44. The XML Declaration • It’s a good practice to always include the XML declaration because XML will almost certainly evolve into other versions that will contain features not found in version 1.0

  45. Parsing XML Documents • When a document adheres to XML’s syntax rules, it is said to be well formed

  46. Parsing XML Documents • You use a program called a parser to check whether an XML document is well formed • Two types of parsers: non-validating and validating

  47. Parsing XML Documents • A non-validating parser simply checks whether an XML document is well formed • A validating parser checks whether an XML document is well formed and if it conforms to an associated DTD

  48. Writing Well-Formed Documents • Well-formed XML documents allow user agents to read the document’s data easily

  49. Writing Well-Formed Documents • User agents expect XML data to be structured according to specific rules, which allows the user agent to read data quickly without having to decipher the data structure

  50. All XML Documents Must Have a Root Element • A root element contains all the other elements in a document. • The <html>…</html> element is the root element for HTML documents, although most Web browsers do not require a document to include it.

More Related