Unit - 1 Xhtml

UNIT - 1 XHTML • What is XHTML – XHTML stands for EXtensible HyperText Markup Language. It is a cross between HTML and XML language. – XHTML is almost identical to HTML but it is stricter than HTML. XHTML is HTML defined as an XML application. It is supported by all major browsers. – Although XHTML is almost the same as HTML but It is more important to create your code correctly, because XHTML is stricter than HTML in syntax and case sensitivity. XHTML documents are well-formed and parsed using standard XML parsers, unlike HTML, which requires a lenient HTML-specific parser. • HTML Versions • Since the early days of the web, there have been many versions of HTML: Why Use XHTML? • XHTML was developed to make HTML more extensible and increase interoperability with other data formats. There are two main reasons behind the creation of XHTML: – It creates a stricter standard for making web pages, reducing incompatibilities between browsers. So it is compatible for all major browsers. – It creates a standard that can be used on a variety of different devices without changes. • <html> • <head> • <body> • <h1> BAD HTML • </body> • The above HTML code doesn't follow the HTML rule although it runs. Now a day, there are different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. The main issue with the bad HTML is that it can't be interpreted by smaller devices. • So, XHTML is introduced to combine the strengths of HTML and XML. • XHTML is HTML redesigned as XML. It helps you to create better formatted code on your site. • XHTML doesn't facilitate you to make badly formed code to be XHTML compatible. Unlike with HTML (where simple errors (like missing out a closing tag) are ignored by the browser), XHTML code must be exactly how it is specified to be. Basic Syntax • Tags – The <!DOCTYPE html> declaration defines this document to be HTML5 – The <html> element is the root element of an HTML page – The <head> element contains meta information about the document – The <title> element specifies a title for the document – The <body> element contains the visible page content – The <h1> element defines a large heading – The <p> element defines a paragraph • <html> • <head> • <title>Page title</title> • </head> • <body> • <h1>This is a heading</h1> • <p>This is a paragraph.</p> • <p>This is another paragraph.</p> • </body> • </html> • You can easily maintain, edit, convert and format your document in the long run. • Since XHTML is an official standard of the W3C, your website becomes more compatible with many browsers and it is rendered more accurately. • XHTML combines strength of HTML and XML. Also, XHTML pages can be rendered by all XML enabled browsers. • XHTML defines quality standard for your webpages and if you follow that, then your web pages are counted as quality web pages. The W3C certifies those pages with their quality stamp. • Web Browsers – The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them. – The browser does not display the HTML tags, but uses them to determine how to display the document: Basic Understanding • What is SGML? – This is Standard Generalized Markup Language (SGML) application conforming to International Standard ISO 8879. HTML is widely regarded as the standard publishing language of the World Wide Web. – This is a language for describing markup languages, particularly those used in electronic document exchange, document management, and document publishing. HTML is an example of a language defined in SGML. • What is XML? – XML stands for EXtensible Markup Language. XML is a markup language much like HTML and it was designed to describe data. XML tags are not predefined. You must define your own tags according to your needs. • XHTML – XHTML syntax is very similar to HTML syntax and almost all the valid HTML elements are valid in XHTML as well. But when you write an XHTML document, you need to pay a bit extra attention to make your HTML document compliant to XHTML. Basic Syntax • converting existing HTML document into XHTML document − – Write a DOCTYPE declaration at the start of the XHTML document. – Write all XHTML tags and attributes in lower case only. – Close all XHTML tags properly. – Nest all the tags properly. – Quote all the attribute values. – Forbid Attribute minimization. – Replace the name attribute with the id attribute. – Deprecate the language attribute of the script tag. • XHTML document must include four tags <html>, <head>, <title>, and <body> • Tags are fundamental syntactic unit of HTML. • Tags are used to specify categories of content. • Most tags appears in pairs: opening tag and closing tag. • The name of the closing tag is the name of its corresponding opening tag with a slash attached to the beginning. Whatever appears in between these two tags is the content of the tag. • The opening tag and the closing tag together specify a container for the content they enclose. • The container and its content together are called an element. • An XHTML document consists of two parts, the head and the body. • Head part provides information about the document. • Body parts provides the content of the document , which itself includes tags and attributes. • Comments :- browsers ignores the XHTML comments. • Comments in the program increase the readability of the programs. • E.g. • <!– anything except two adjacent dashes DOCTYPE Declaration • DTD stands for Document Type Definition. • A DTD allows you to create rules for the elements within your XHTML documents. Although XHTML itself has rules, the rules defined in a DTD are specific to your own needs. • All XHTML documents must have a DOCTYPE declaration at the start. • The XHTML standard defines three Document Type Definitions (DTDs). The most commonly used and easy one is the XHTML Transitional document. • XHTML 1.0 document type definitions correspond to three DTDs − – Strict – Transitional – Frameset • The basic syntax is: <!DOCTYPE rootname [DTD]> • ...where, rootname is the root element, and [DTD] is the actual definition. • Actually, there are slight variations depending on whether your DTD is internal or external (or both), public or private. • <!DOCTYPE rootname PUBLIC identifier URL> • The keyword PUBLIC indicates that it's a public DTD (for public distribution). • The presence of URL indicates that this is an external DTD (the DTD is defined in a document located at the URL). • The identifier indicates the formal public identifier and is required when using a public DTD. – E.g. – <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> Standard XHTML Document Structure • Every XHTML document must begin with an xml declaration element that simply identifies the document as being one based on XML. <?xml version="1.0" encoding="UTF-8"?> – First Attribute specifies the version number (still 1.0) – Second attribute defines encoding used for the document. (unicode encoding , utf-8) Example <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Basic Text Markup • Paragraph – Text is normally organized into paragraph in the body of a document. – XHTML standard does not allow text to be placed directly in a document. Example 1 Example 2 <!DOCTYPE html> <!DOCTYPE html> <html> <html> <body> <body> <p> <p>This is a paragraph. This paragraph <p>This is a paragraph. contains a lot of lines <p>This is a paragraph. in the source code, but the browser <p>Don't forget to close your HTML ignores it. tags!</p> </p> </body> </body> </html> </html> Line Breaks • <br /> element defines a line break. • Use <br /> if you want a line break (a new line) without starting a new paragraph. • < br /> the slash indicates that the tag is both an opening and closing tag. • eg. <p>This is<br / >a paragraph<br />with line breaks.</p> Preserving whitespace • The text inside a <pre> element preserves both spaces and line breaks. Headings • In XHTML there are six levels of headings, specified by the tags <h1>, <h2>, <h3>, <h4>,<h5> and <h6>. • <h1>, <h2>, <h3> uses font sizes that are larger than that of the default size of text. • <h4> uses the default size and • <h5> and <h6> use smaller size. Block Quotation • A block of text to be set off from the normal flow of text in a document. <!DOCTYPE html> <html> <body> <p>Browsers usually indent blockquote elements.</p> <blockquote > “For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.” </blockquote> </body> </html> Font styles and sizes • Content – based style tags – tags indicates the particular kind of text that appears in their content. – Emphasis tag <em>- special text content. Mostly highlighted by italic font. – Strong tag <strong> - more than emphasis tag. Mostly highlighted by bold font. – Code tag <code> - used to specify a monospace font, usually used for program code. • Non content – based style tags- – <sub> subscript character – <sup> superscript character XHTML tags are categorized in block or inline. Inline tag :- content appears on the current line. Inline tag does not implicitly include line break . Exception is br. E.g <em>, <strong> Block tag :- breaks the current line so that its content appears on a new line. The heading and block quote tags are block tag. Character Entities • The special character are defined as entities which are names for the character by the browser. Horizontal Rules • Places the horizontal lines in between the document to make it easy for reading. • It is represented by <hr />. • The browser chose the thickness, length and horizontal placement of line.

Unit - 1 Xhtml

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support