INTERNET APPLICATIONS CPIT 405 XHTML Objectives To understand

INTERNET APPLICATIONS CPIT 405 XHTML

Objectives To understand the structure of the xhtml documents and to create xhtml files with formatting tags. To show the difference between three DOCTYPE declarations and to validate the XHTML code according to the DOCTYPE. To understand the special characters. To use thead, tfoot and tbody elements for tables. To setup environment variables in a system. To learn how to configure the. htaccess and index file. To learn the basic commands of start and stop the server.

How to Create XHTML file Use any text editor such as Windows Notepad. When you save an HTML file, use (. html ) extension by choosing File menu Save as then write the file name with the extension.

The structure of the XHTML file XHTML documents require certain mandatory elements. � The html, head, body and title elements must exist. Additionally there must be a DOCTYPE declaration. The DOCTYPE definition specifies the document type. Your code should look like this:

<? xml version = "1. 0" encoding = "utf-8"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns = "http: //www. w 3. org/1999/xhtml"> <head> <title>Some Title</title> </head> <body> body of page </body> </html>

Basic XHTML elements, attributes and Attribute Values For body element: � Inside the < body> tag write these attributes background=” Sunset. jpg” or bgcolor=”red” � You should use a relative path or a full path for the background image For Headings tags: � you can insert the heading tags inside body and it has 6 tags from <h 1> to <h 6>

To write a paragraph inside the <body> tag: � � � You can insert the paragraph tag Open a pargaph tag and write the text “This is a paragraph tag” and then close the tag The tag has attributes such as align to change the alignment of the paragraph to left, right, center of the page. To break text inside body, add the empty element and For formatting the text with Boldface, Underline and Italic tags: notice the effect of it. � � Use the tag for boldface type, for italic and for underline. There are other formatting tags listed below you can use them

Tag Description Defines bold text <big> Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text <strike> defines strikethrough text Deprecated. Use styles instead

To make characters subscripted or superscripted � use the or the Example: To write H 2 O you can use the tag § e. g. (H20 ) To write 24=16 you can use the tag e. g. (24=16)

To format the text with FONT tags You can format your text using tag. � It has Attributes: size, color, family. Note: most of font tags are deprecated in HTML 5

Exercise: Create an HTML file to display the following code in the browser and notice the output. Then, modify the HTML code to display the page in figure 1.

<? xml version = "1. 0" encoding = "utf-8"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html xmlns = "http: //www. w 3. org/1999/xhtml"> <head> <title>Some Title</title> </head> <body background="jobs. jpg"> <h 1>This is a h 1 heading</h 1> This is the 1st paragraph very simple! this text is bold and out of the paragraph this text is underlined and out of the paragraph this text is italic and out of the paragraph </body> </html>

Document Type Definitions A The DOCTYPE definition line in an XHTML document specifies the document type by referencing a Document Type Definition (DTD). The DTD specifies the syntax and legal elements of an XHTML document. Three types of documents are defined:

1. Strict • • • Used when you want to apply the strictest rules. XHTML should not contain any presentational tags. Use Cascading Style Sheets for the display of data. The Strict DTD includes elements and attributes that have not been deprecated. <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/strict. dtd">

2. Transitional Used when your document contains presentational tags. This is useful for browsers that do not support Cascading Style Sheets. The Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes. <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/transitional. dtd">

3. Frameset This is used when the page contains frames to split the browser window into two or more panes. The Frameset DTD includes everything in the transitional DTD plus frames as well. <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Frameset//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/frameset. dtd">

Example: validate the following XHTML code with transitional DOCTYPE using w 3 validator here http: //validator. w 3. org/

<? xml version = "1. 0" encoding = "utf-8"? > <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> <html xmlns = "http: //www. w 3. org/1999/xhtml"> <head> <title> Transitional DTD XHTML Example </title> </head> <body bgcolor="#FFFFFF" link="#000000" text="red"> This is a transitional XHTML example </body> </html>

Some questions convert DOCTYPE to Strict in the above example and then validate the code. Explain and justify the validator output.

XHTML special characters Some characters are reserved in XHTML. � e. g. you cannot use the greater than or less than signs within your text because the browser could mistake them for markup. If you want to force certain characters to show up, you will need to use escape codes instead of those characters.

Escape code is just a programming term for replacing characters that a program uses in a special way with something else. All of these codes start with an & and end with a ; between these characters is either a short mnemonic indicating what the character is or a number code starting with #. The mnemonics are easier to remember, but some of them only work in certain browsers. The number codes will work when the mnemonics don't.

You will see that s can also be useful when making tables. & to show a & (ampersand) or & < to show a < (less-than sign) or < > to show a > (greater-than sign) or > Codes for other special characters, such as ¢ £ ¥ ® © ½ ° ± á ç è ñ ö ÷ û ²etc. can be found here: http: //www. w 3 schools. com/tags/ref_entities. as p

Tables The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, footer). Browsers can use these elements to enable scrolling of the table body independently of the header and footer. The <thead> tag must be used in the following context: As a child of a <table> element, after any <caption>, and <colgroup> elements, and before any <tbody>, <tfoot>, and <tr> elements. The <tfoot> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements and before any <tbody> and <tr> elements.

Example: Note: Use thead, tfoot and tbody. Use the special characters codes. Use colspan attribute of <td> element to merge the cells.

<!DOCTYPE html PUBLIC “-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/strict. dtd"> <html> <head> <title> Special characters and Table example </title> </head> <body> <table border="1"> <caption>Monthly Savings</caption> <tr> <td>Month</td> <th>Savings</th> <th>Evaluation</th> </tr> <tr> <td>January</td> <td> £ 50</td> <td> < the average </td> </tr> <tr> <td>February</td> <td> £ 180</td> <td> > the average </td> </tr> <tr> <td>March</td> <td> £ 100</td> <td> = the average </td> </tr> <tr> <td>Sum</td> <td> £ 330</td> </tr> </table> Tip: The thead, tbody, and tfoot elements will not affect the layout of the table by default. However, you can use CSS to style these elements. </body> </html>

Configuring. htaccess file By default our servers will look for (in order) a file by the name of index. html, index. cgi, index. php, index. htm, default. htm or home. htm in a given directory and will load the first file it finds as the directory's (or site's) index or "home" page. If you wish to use an alternate file name as a default index page this can be done by adding the following directive to a. htaccess file stored either in your root directory (if you wish the directive to be in effect for your entire site) or in a specific folder:

Directory. Index filename. ext For example if you wish the default index page in a given directory to be "default. php" you would place a. htaccess file in that folder containing the following line: Directory. Index default. php

Things to Note You can specify multiple file names and the server will look for them in the order you specify and set the first valid file name found as the directory's index page. Directory. Index page 1. html index. php index. htm

Creating a. htaccess File You can create a. htaccess file on your local computer or on the server. 1. 2. 3. On your computer: Open Notepad or any other text editor. Put in what you want in the file. Go to Save As, and put ". htaccess" for the filename, including the quotations. Note: If you save the file as. htaccess it will be hidden and you will not be able to see it in the Finder. Using your preferred FTP client upload the file to the server. The. htaccess file will need to be in the folder where your site is located, typically the root folder (public_html) folder. Also, . htaccess file is used to deny/permit accessing certain specific files in the web server.

Environment variables An environment variable is a dynamic "object" on a computer that stores a value, which in turn can be referenced by one or more software programs in Windows. Environment variables help programs know what directory to install files in, where to store temporary files, where to find user profile settings, and many other things.

To set JAVA_HOME variable or any other environment variable using GUI : first you need to know the installation path for the Java Development Kit. Open the default installation path for the Java Development Kit C: Program FilesJava There should be a subdirectory like C: Program FilesJavajre 7 Once you have the JDK installation path: 1. Right-click the My Computer icon on your desktop and select Properties. 2. Click the Advanced tab. 3. Click the Environment Variables button. 4. Under System Variables, click New. 5. Enter the variable name as JAVA_HOME. 6. Enter the variable value as the installation path for JRE. 7. Click OK. 8. Click Apply Changes.

Setting environment variables using command prompt Check previous lab slides.

Assignment 2 Write an xhtml code to design the following table Price Without taxes With taxes 150 165 200 210 300 330 Item DVD player Laser printer LCD monitor

We’re done! Thank you for listening