introducing html & xhtml:. goals understand hyperlinking understand how tags are formed and...
TRANSCRIPT
Introducing HTML & XHTML:
Goals
Understand hyperlinking Understand how tags are formed and
used. Understand HTML as a markup language Understand the role of the W3C Understand top browsers Understand how XHTML evolved. Understand how XML/XHTML differ from
HTML
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
A hypertext link, or hyperlink, contains a reference to a specific Web page that you can click to quickly open that Web page
A document on the Web is called a webpage, identified by a unique address called the Uniform Resource Locator, or URL
URL commonly referred to as a Web address
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.
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
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.
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
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.
A target output format refers to the medium in which a document will be displayed, such as a Web page or an online help system
Basic HTML Syntax
HTML documents are text documents that contain: formatting instructions, called tags the text that is to be displayed on a webpage.
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
Common Structure and Formatting HTML Tags
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
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
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
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
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
Basic HTML Syntax
1. Open a text document and name it index.txt2. Save it in the main directory of your website3. Open a browser in minimize mode, so you can see both browser and
the text document.4. Edit text document.5. When complete, rename to index,html and drag document into
browser.
Web Page Design and Authoring Webpage design, or Web design, refers
to the visual design and creation of the documents that appear on the World Wide Web
Webpage authoring refers to the creation and assembly of the tags, attributes, and data that make up a Web page
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
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
Web Browsers Internet Explorer only is used by 36% of
users defined by w3schools.com http://www.w3schools.com/browsers/browsers_stats.asp
Three additional browsers that are worth noting are: Firefox (http://www.mozilla.com/en-US/firefox/) 47.4% Safari (http://www.apple.com/safari/) 3.3% Chrome (http://www.google.com/chrome) 7.0% Opera (http://www.opera.com) 2.1%
You should test your webpage in every browser and browser version in which you anticipate they will be opened.
The differences and how to implement.
HTML to XHTML
The Evolution to 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
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
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 without effecting the page.
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
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
You can check whether a document conforms to an associated DTD by using a program called a validating parser
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
If an HTML document is missing any required tags, the HTML DTD supplies them, allowing the Web browser to render the page correctly
The Basics of XML
In XHTML 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
The XHTML Declaration
XHTML documents should begin with an XML declaration
The encoding attribute of the XML declaration designates the language used by the XML document
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 current version.
Writing Well-Formed Documents
Well-formed XHTML documents allow user agents to read the document’s data easily
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
All XHTML 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.
XML documents, however, require a root element that you define yourself
XHTML is Case Sensitive
Unlike HTML tags, XML tags are case sensitive
With XML, you cannot mix the case of elements
If you use a different case for an opening and closing tag, they will be treated as completely separate tags, resulting in a document that is not well formed
All XHTML Elements Must Have Closing Tags XML is designed to organize data, not
display it. As a result, instead of documents
consisting of text that contains elements, as is the case with HTML, XHTML documents consist of elements that contain text.
All elements must have a closing tag or the document will not be well formed.
XML Elements Must Be Properly Nested Nesting refers to how elements are placed inside
other elements – What is wrong with this example?<p><b><i>This paragraph is bold and italicized.
</I></b></p> In an HTML document, it makes no difference
how the elements are nested. XHTML documents require that tags be closed in
the opposite order in which they were opened.
Attribute Values Must Appear Within Quotation Marks In HTML, an attribute value can be placed
inside quotation marks or they may be left off.
With XML, you must place quotation marks around the values assigned to an attribute
Empty Elements Must Be Closed Several elements in HTML do not have corresponding
ending tags, including the <hr> element, which inserts a horizontal rule into the document, and the <br> element, which inserts a line break.
Elements that do not require an ending tag are called empty elements because you cannot use them as a tag pair to enclose text or other elements.
You can create an empty element in an XML document by adding a single slash (/) before the tag’s closing bracket to close the element
Most often, you use an empty element for an element that does not require content, such as an image.
Combining XML and HTML
Although XML was designed primarily to define data, this does not mean that you cannot use it to create Web pages.
To make the transition to XML-based Web pages easier, the W3C combined XML and HTML to create Extensible Hypertext Markup Language (XHTML)
Combination of XML and HTML that is used to author Web pages
XHTML is almost identical to HTML, except that it uses strict XML syntax to describe the parts of a document
Questions?