Markup: elements, attributes, and valuesWeb page contentFile names and URLsHTML versus XHTMLXHTML versionsDefault display of XHTMLCascading style sheets (CSS)XHTML Web Page Building BlocksWhile Web pages have become increasingly complex, their underlying structure remains remarkably simple. A Web page is made up of text content, references to more complex content, and markup to describe how things should be displayed.Markup: elements, attributes, and valuesMarkup information for the document content is included in the document itself. Markup can include formatting instructions or details about relationships between parts. Because the markup is text, the document is universally readable. XHTML has three main types of markup: elements, attributes, and values.Elements identify document structure and can contain text, other elements, or nothing at all.- An element containing text: <p>Hello, world!</p>- A nested boldface element within a paragraph element: <p>I like to be <b>bold</b></p>- An element with no content: <hr /> or <hr></hr>Attributes contain information pertaining to an element. In XHTML, attribute values must always be enclosed in quotation marks.- Table element that spans four columns (colspan attribute): <td colspan="4">Expense Report</td>- Image element with a specified file name (src attribute) and width (width attribute): <img src="header.png" width="700" />Elements can be block-level or inline.- Block-levelo Displayed on a new line (e.g., new paragraph)o Used for structural parts, such as headers- Inlineo Displayed on the current line (e.g., boldface this word)o Mainly used for textIf element X contains element Y, X is the parent element of Y, and Y is the child element of X. For example, <p>I like tobe <b>bold</b></p>, the parent element is the paragraph element (p) and the child element is the boldface element (b).XHTML requires that elements be properly nested, meaning that you cannot terminate a parent element without terminatingthe children elements.Correct: <p>I like to be <b>bold</b></p>Incorrect: <p>I like to be <b>bold</p></b> (need to end the boldface element first)Web page contentThe content is basically anything you can type. There are a few exceptions:- Extra spaces or tabs are converted to a single space.- Newlines are ignored. If you want to force a line break, use the <br /> element.- Special characters (e.g., vowels with accents) need special character references, for example &eacute; (è) and &copy; (©).- The ampersand has a special meaning, so if you need an ampersand use &amp;.- < and > signs frequently confuse the HTML parser because they start and end elements. Hence you should use their special character references, &lt and &gt instead. For example, write #include &lt;stdio.h&gt rather than #include <stdio.h>. The semicolon after the character reference tells the HTML parser not to skip a space in the output. For example, #include &lt stdio.h&gt will be displayed as “#include < stdio.h>”, which is not what wasintended.Other non-text elements, such as links, images, Flash animations, sound files, movies, etc. are directives to HTML telling it to do something such as go to another URL or import a file into the page.File names and URLsMost Web content lives in a file on disk. A few things to keep in mind about file names:- File names are case sensitive. MyWebpage.html is different than mywebpage.html.- Extensions should match the content. For example, .html is used for Web pages, .jpg is used for JPEG images, etc.A URL (uniform resource locator) is an address of some content that the browser should display. Most file-based URLs have three parts: scheme, server name, and path.- Schemes tell the browser how to deal with the remainder of the URL. Examples are http and ftp.- The server name is the server on which the desired resource is located. For example in http://www.google.com, www.google.com is the server name.- The path describes how to get to the desired file on the server. For example, in http://www.utk.edu/libraries/index.html, libraries/index.html is the path telling the browser we want thefile index.html in the libraries directory.Here are some other URL examples:- Newsgroup: news:soc.culture.catalan- Email link: mailto:[email protected] Local file: file:///c|/path/home.htmlAbsolute URLs specify the entire path to a file, including the scheme, server name, path, and the file name itself. Think of this as a complete street address – no matter where a letter is sent from, the post office will be able to find where to deliver the message. Relative URLs specify how to get to a resource from your current location. An analogy would be “go three blocks and turn right.”Use absolute URLs when- Referencing a file on another server.- Linking to FTP sites, newsgroups, and email addresses (e.g., anything not HTTP).Use relative URLs when- Referencing a file in the same directory as the current file.- Referencing files on the same server as the current file.HTML versus XHTMLHTML 4 and XHTML 1.0 use the same elements, attributes, and values – the difference is the syntax.- XHTML requires html, head, and body elements and DOCTYPE.- All elements must be closed, even empty elements.- Attribute values must be enclosed in quotation marks.- XHTML is case-sensitive (all lowercase).Advantages of using XHTML:- The markup is consistent, well-structured, and free of non-standard tags. These properties make the markup easier to edit, format with cascading style sheets, convert into a database, and to adapt to other systems (e.g., mobile phone browsers).- XHTML is the new standard for Web pages.- XHTML is more likely to be properly and consistently supported by current browsers, on all platforms.XHTML versionsThere are three versions of XHTML:1. Strict: only elements of XHTML are allowed; useful for taking advantage of connecting to databases, working with styles, easily being updated for future systems.2. Transitional: some elements that will be deprecated are still allowed; useful when the markup includes deprecated elements.3. Frameset: allows frames; this will eventually be phased out.You can state the version for your Web document by using the DOCTYPE declaration. XHTML validation tools can then determine if your markup is correct for the XHTML version you chose.Strict XHTML Page Declaration<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"