LUG Programming

Page 21

bar, then Preferences..., then double click on then double click on Editors, then click on Text numbers check box. Finally, click on OK.

General, Editors,

to open the sub-options, and check the Show line

Modifying the XHTML Document

Aptana Studio creates an HTML 4.01 document by default. We actually want an XHTML 1.0 Transitional document. Now, we can make all our changes just using the editor, but since we're working with an Integrated Development Environment, I'll show you how to make the best use of it, and reduce the amount of typing required. Aptana Studio has a useful view called Snippets. If you don't already have this view open, select Windows from the menu bar, then Show view, then click on Snippets. Now click on the start of line 1 of experimental.html, press Shift and the down arrow together, which will highlight the line, then press Enter, which will substitute the first line with a new blank first line, finally, move the cursor up to the start of that line. From the Snippets window, double click on Insert DOCTYPE XHTML 1.0 Transitional. The <DOCTYPE ...> text will be added to our HTML file. To finish our modification, we need to add the XML namespace attribute to our html tag, on line 2. Move the cursor to the '>' character and press the spacebar. Aptana Studio will display a list of attributes in a popup window. Type x, then double click on xmlns. Next, type either a single or double quote, Aptana Studio will create two characters (which delimit the attribute value), and offer a value to insert; http://www.w3.org/1999/xhtml. Double click on the suggestion, and it will be inserted inside the quotes. On line 4, there is a meta tag, which also needs changing. Move the mouse over the content attribute, and a small popup will appear, explaining the attribute. Delete the attribute value (including quotes) after the '=' character, then type a single or double quote, and double click on text/html; charset=UTF-8. Change the title tag contents, on line 5, to LUG something similar.

Programming Course, Lesson 3,

or

Now we have an XHTML document, which uses UTF-8 encoding, the default character encoding for XML documents. Press Ctrl+S to save the file. Adding Tags to the XHTML Document

Next, we want to add tags which link to our (as yet empty) JavaScript and CSS file. On line 5 add a blank line, then in Snippets, double click Insert CSS <link>. Remove the contents of the href attribute value, taking care to keep the double quotes, then type styles/experimental.css. Now we can quickly check that our link is correct, open the experimental.css file, and on line 2 add background: #f00;, press Ctrl+S to save the change, go back to the experimental.html file, and click on the Firefox Preview tab at the bottom of the window. You should see a red screen, which was white before our changes were made. Finally, create a new blank line on line 6, so we can add our JavaScript file. In Copyright Š John Leach 2008. All rights reserved.

21


Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.