Cascading Style Sheet CSS Closing Switch Closing Tag Code View Exercise 3 Key Terms Attribute Cascading Style Sheet CSS Closing Switch Closing Tag Code View Design View Live View Element Head HTML

More Key Terms HTML Tag Insertion Point Keywords Line break Nest Exercise 3 More Key Terms HTML Tag Insertion Point Keywords Line break Nest One-sided tag Opening tag Schema Styles Syntax Value XML Wicket XHTML

Exercise 3 HTML (Hypertext Markup Language) is a scripting language-or code-you use to create pages that can be viewed with a Web browser. Nearly every item on a Web page-including text, formatting, pictures, and other page elements-is controlled by HTML coding. In addition to HTML coding, Web pages may also incorporate Java scripts, CotdFusion's CFML code, ActiveX, and other specialized Web page coding designed for different kinds of dynamic or interactive application and content. These codes, too, can be applied and edited in Dreamweaver. Unlike some programming languages, HTML is text-based and easy to read and follow. Even developers with little programming experience can read and generally understand what's happening in HTML code.

Exercise 3 Dreamweaver CS4 supports XHTML (Extensible Hypertext Markup Language). XHTML Is a reformulation of the most current version of HTML (HTML 4.0) that uses XML (Extensible Markup Language). XML is a language that uses tags to structure information, similar to HTML. Unlike HTML, however, XML allows you to create your own tags to fit your information more specifically. XHTML was developed to answer a need for a stricter version of HTML that could be used to deliver content across a wide variety of devices: not merely computer browsers, but also mobile phones, laptops, PDAs, and so on. XHTML combines the standard HTML structure with the power and flexibility of XML. By default, Dreamweaver saves new Web pages as XHTML Transitional documents and applies any code necessary to meet XHTML requirements, such as including an XHTML DOCTYPE declaration in the Head section of the document.

Exercise 3 HTML documents have a standard structure that consists of two sections: a Head section and a Body section. The Head section contains information that browsers need to display the Web page, such as the page title and the character set used to create the page. None of the information in the Head section appears in the browser except the page title, which displays in the browser's title bar. The Body section contains the actual Web page content, such as the page's headings, paragraphs, and pictures.

Exercise 3 HTML coding instructions are delivered to the browser by means of HTML tags HTML tags have a specific structure, or syntax: The first part of an HTML tag is the left Wicket <. Next is the tag element, or name, such as title or H2. Tag attributes may follow the tag element. For example, the align="left" information that follows the h1 tag in line is the attribute that controls the alignment of the text. <h1>Welcome to GardenScape</h1> Last is the right wicket >. HTML tags may be written with all capital letters or all lowercase letters. Dreamweaver's tags are all lowercase, so that convention will be used in this book. Most HTML codes require both an opening tag and a closing tag. The opening tag instructs the browser to begin displaying a format or feature for example, <title>.

Exercise 3 Tags may be nested to supply additional formatting to text. For example, in the following HTML code, the word three will appear In Italics in the paragraph: <p>We also have <i>three</i> award winning landscape designers on staff!</p> <h1>Welcome to GardenScape!</h1> Don't forget the closing switch when nesting tags, or applied formats will not be "turned off “ Some HTML tags are one-sided tags (also called standalone or empty tags). One-sided tags do not require a closing tag. The <br> (line break) tag is a one-sided tag.

Exercise 3 Tag attributes modify a tag element by supplying addltionai instructions to the browser about how to display an element. Attributes appear within HTML tags, usually between the tag element and the right wicket. Attributes often include values that give specific Instructions to the browser. Attribute values are usually enclosed in quotation marks. "' Typically, attributes are not repeated in closing tags. In the following HTML code, for example, the tag element is font. The size attribute tells the browser to display a specific size. The value is "4", and this is the exact size the browser will display. <font size="4">

Exercise 3 Today cascading style sheets (CSS) are considered the standard for formatting Web pages. Using CSS, a designer can format a page precisely using styles. Styles are saved instructions that tell the Web browser how to display the styled element. Styles can be used to format text and headings, tables, blocks of type on a page, and images, and even change the default formats of HTML tags. As a result of the widespread use of CSS, many standard HTML tags have been deprecated in recent versions of HTML. This means that, although they are still supported by most browsers,they may not be supported for much longer. The <font> tag is one of these tags.

Exercise 3 In later exercises, when you learn how to validate the markup language in your site, you may be warned that <font> is deprecated and you should instead consider using CSS styles to format text. By default, Dreamweaver is set up to create CSS styles for you when you apply formats to text. This means that if you check the code after applying formats to a page, you will not see HTML tags, attributes, and values such as those discussed in previous sections of this exercise. You will instead see CSS style definitions. When you apply formats to text on a Web page, Dreamweaver CS4 prompts you to create a CSS style that you can also use on other pages in the site

Exercise 3 - XML XML is an acronym for Extensible Markup Language. XML is a markup language similar to HTML in that it can be used as the basis for structuring and working with data on your Web pages. XML is first and foremost a data tagging system that enables you to identify information as a specific data type; this enables you to code information for easy storage and retrieval. You can use XML to tag page and form content as well as to display page content in a specific context (for example, as the result to the search a user performs on your site). .

Exercise 3 - XML XML separates the data and the format in which it is displayed. The format coding for XML data is stored separately from the XML data; this enables you to apply a variety of formats to the XML data by simply attaching different style sheets. These style sheets are known as XSLTs (Extensible Stylesheet Language Transformations). XSL is to XML what CSS is to the information on your Web page. The XSL is applied to the page when you attach an XSLT. In Dreamweaver you attach the XSLT to the XML data. You can create an XML page from the Dreamweaver Getting Started window or you can choose File> New and click XML

Exercise 3 A newly created XML file has only one line of code: The XML declaration is Inserted at the top of the file. This line lets Dreamweaver know the file Is an XML file. You use XML tags to Identify the Individual data elements In the code. The coding system Is similar to HTML In that there are open tags and close tags that Include the / character. Dreamweaver supports code hinting for XML, and after you have entered a full tag, with the open and close tags, the program will offer the code In a popup list like the one you see In the following illustration. You can complete the tag by pressing Enter.

Exercise 3 - Keywords To make sure others can find and visit your site, you can supply keywords on your pages that search engines use to index a site in their databases. You add keywords to the Head section of a site using a <meta> tag. To add a <meta> tag containing keywords to your home page, use the Insert> HTML > Head Tags> Keywords menu command to open the Keywords dialog box. Here you can type the keywords that summarize your site's subject.

Exercise 3 Use Effective Keywords One of the most important aspects of creating anew Web site is to identify keywords that will help potential visitors find your site using a search engine. Keyword research is an important strategy for creating a new Web site. Learn about Keywords Think about your goals in creating your site. Identify five or six words that you think will bring visitors to your site.

Exercise 3 Dreamweaver automatically inserts a line space after a paragraph, so you do not have to double-space between paragraphs as you might do in a word-processing document. If you do not want the default space to appear after a paragraph, you can insert a line break rather than a paragraph break. For easy access to the break tag (and other special characters), click the arrow below the Insert panel tab and click Text to display the Text panel. Clicking the BR button on the Text panel inserts the HTML <br> (Break) tag, which creates a new line but not a new paragraph. You can also insert this tag as you type by pressing the Shift + Enter key combination.

Exercise 3 You can format the text in a Dreamweaver document with standard HTML paragraph and heading tags that control font style and size. By default, all new text is formatted with the Paragraph format. This format equates to the HTML <p> (Paragraph) tag. You can use the Property inspector panel to apply other formats, including three levels of headings and the preformatted font that can be used to display program code You also use the elements in the Text list in the Insert panel to change the format of text on the page.

Exercise 3 By default, the Document window displays page content in Design view. In Design view, content looks almost identical to the way it will appear in a browser. WYSIWYG When you switch to Code view, the page content's HTML coding appears. You can write or edit HTML code while working in Code view. Click anywhere in the paragraph you want to format and click the Format list arrow on the Property inspector to display the list of paragraph and heading formats. Or, you can choose the format and then begin typing. The format is applied automatically to the new text. Heading levels are ordered from largest (Heading 1) to smallest (Heading 6)