1. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the book authors, 2002 Web Design in a Nutshell Chapter 8: HTML Overview

2. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition2  Wiley and the book authors, 2002 Synopsis Brief Synopsis:  The HTML standard  Keeping style separate from content  Three flavors of HTML 4.01  The future of HTML  HTML tags  Containers  Empty (“Standalone”) tags  Attributes  Nesting HTML tags  Information browsers ignore  Document structure  Tips on good HTML  HTML tools

3. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition3  Wiley and the book authors, 2002 Overview HTML (Hypertext Markup Language) is the language used to create web documents. It defines the syntax and placement of the elements that make up the structure of a web document. All web page elements are identified by special tags that give browsers instructions on how to display the content (the tags themselves do not display)

4. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition4  Wiley and the book authors, 2002 The HTML standard The HTML standard and all other Web-related standards are developed under the authority of the World Wide Web Consortium (W3C). Standards, specifications, and drafts of new proposals can be found at http://www.w3.orghttp://www.w3.org The current HTML standard (4.01) is also known as XHTML 1.0 (2 nd Edition) The W3C has pulled in the reins from the proprietary coding developed by the browser manufactures with the HTML 4 specification.  It incorporates many of the tags introduced by the popular browsers that improve web functionality.  It also officially “deprecates” tags that are used in common practice but are not in keeping with the priorities of the markup language.  One of the driving principles of the new HTML specification is to keep style information separated from content.

5. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition5  Wiley and the book authors, 2002 Keeping style separate from content Before HTML, there was SGML (Standard Generalized Markup Language), which established the system of describing documents in terms of their structure, independent of appearance. Because HTML is one application of an STML tagging system, the principle of keeping style information separate from the structure of the document remains inherent to the HTML purpose.  This ideal has been compromised by the creation of HTML tags that contain explicit style instructions (e.g. the tag). Cascading Style Sheets promise to keep style information out of the content by storing all style instructions in a separate document (or a separate section of the source document).

6. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition6  Wiley and the book authors, 2002 Three flavors of HTML 4.01 HTML 4.01 specifications actually encompass three slightly different specification for documents These documents, called Document Type Definitions (or DTDs), define every tag, attribute, and entity along with the rules for their use.  Strict: excludes all deprecated tags and attributes. In an ideal world, all developers would mark up the structure of their documents according to the strict version of HTML, leaving all presentation to be handled by style sheets  Transitional: includes many of the elements dedicated to appearance (e.g. tag and align attribute) that are in common use today.  Frameset: identical to Transitional, except it allows for the element to be used in place of the element

7. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition7  Wiley and the book authors, 2002 The future of HTML According to the W3C, HTML 4.01 is the end of the line for HTML. The next version of HTML is the XHTML Version 1.0 specification. XHTML is the same as HTML 4.01, but rewritten using the new rules of XML (eXtensible Markup Language). XHTML uses all the same HTML tags, but enforces a set of rules (such as closing all tags, putting attribute values in quote marks, & keeping tags all lowercase) that make a document “well-formed.”

8. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition8  Wiley and the book authors, 2002 HTML tags Elements in the HTML specification are indicated by tags. An HTML tag is made up of the element name followed by an optional list of attributes, all of which appear between angle brackets (<>). Nothing within the brackets is displayed in the browser. The tag name is generally an abbreviation of the element’s name or the tag’s function. Attributes are properties that extend or refine the tag’s function.

9. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition9  Wiley and the book authors, 2002 Containers Most HTML elements or components are containers, meaning they have a start tag and an end tag. The text, or other objects, enclosed within the tags follows the tag’s instructions.  The container tags make the enclosed text italic  The weather is gorgeous today The end tag contains the same name as the start tag, but is preceded by a slash (/). For some tags, the end tag is optional and the browser determines when the tag ends by context. However, when in doubt, use the end tag  This is especially important when using Cascading Style Sheets  The new XHTML standard requires that all tags be closed

10. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition10  Wiley and the book authors, 2002 Empty (“Standalone”) tags A few tags do not have end tags because they are used to place standalone elements in the document or on the page.

11. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition11  Wiley and the book authors, 2002 Attributes Attributes are added within a tag to extend or modify the tag’s actions  Attributes always go in the start tag (end tags never have attributes)  You can add multiple attributes within a single tag  Attributes go after the tag name, separated by one or more spaces  Attributes order is insignificant Most attributes take values, which follow an equals sign  Values should be less than 1024 characters  Some values may be case-sensitive (e.g. filenames and URLs)  Values should always be contained in quotation marks

12. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition12  Wiley and the book authors, 2002 Nesting HTML tags HTML elements may be contained within other HTML elements (called nesting) Both the beginning and end tags of the enclosed tag must be completely contained within the beginning and end tags of the outer tag. The weather is gorgeous today Nested tags do not necessarily need to appear right next to each other This links to a really cool page A common mistake is overlapping the tags The weather is gorgeous today

13. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition13  Wiley and the book authors, 2002 Information browsers ignore White space  line breaks, tabs, multiple spaces (unless preformatted with Multiple, consecutive tags with no text Unrecognized tags  A browser simply ignores any tag it doesn’t understand or that was incorrectly specified.  Some browsers may display invalid or unrecognized tags as normal text Text in comments  Browsers do not display text between the special elements used to denote a comment  There must be a space between the initial, but you can put nearly anything inside the comment otherwise.

14. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition14  Wiley and the book authors, 2002 Document structure A typical HTML document is divided into two major portions, the head and the body.  The head contains information about the document, such as its title, script functions, and “meta” tags  The body contains the actual contents of the document  HTML documents should contain at least these 4 elements Document Title This is my content

15. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition15  Wiley and the book authors, 2002 Tips on good HTML Follow HTML syntax as described by the current W3C specification  Ensures that your document displays the way you intend it to on the greatest number of browsers Validate your HTML  Run your HTML code through one of the many available online HTML validation services (e.g. http://validator.w3.org)http://validator.w3.org Follow code-write contentions to make your HTML easier to read  Use comments to delineate sections of your code so you can find them quickly  Use line breaks, tabs, and extra spaces to make your document easier to scan  Write all tags and attributes in lower-case Avoid adding extra or redundant tags  Common with many WYSIWYG programs (e.g. FrontPage) Keep good HTML style when naming your files  Use the proper HTML document suffix,.html  Avoid spaces and special characters (e.g. ?, %, #, etc.). Stick to letters, numbers, underscores, hyphens, and periods  Consistently use all lowercase letters in filenames and directory names

16. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition16  Wiley and the book authors, 2002 HTML tools HTML documents are simple ASCII text files, so you can use any text editor to write them HTML editors are text editing tools designed especially for writing HTML  The book recommends and I have used for years a program called Homesite from Allaire (now merged with Macromedia) and can be purchased at http://www.macromedia.com/software/homesite/http://www.macromedia.com/software/homesite/  Other editors can be found at http://www.shareware.comhttp://www.shareware.com WYSIWYG authoring tools have graphical interfaces that make writing HTML more like using a word processor  Useful for beginners, prototyping, quick page development  Bad for generating clean documents, adding unnecessary or proprietary tags, strip out tags they don’t recognize, conforming to HTML standards