INTERNET APPLICATIONS CPIT405 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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Some Title body of page
Basic XHTML elements, attributes and Attribute Values For body element: Inside the 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 to
To write a paragraph inside the 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 notice the effect of it. For formatting the text with Boldface, Underline and Italic tags: Use the tag for boldface type, for italic and for underline. There are other formatting tags listed below you can use them
TagDescription Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text 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.(H 2 0 ) To write 2 4 =16 you can use the tag e.g.(2 4 =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 HTML5
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Some Title This is a h1 heading This is the 1 st 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
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 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.
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.
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.
Example: validate the following XHTML code with transitional DOCTYPE using w3 validator here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Transitional DTD XHTML Example This is a transitional XHTML example
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:
Tables The element is used in conjunction with the and 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 tag must be used in the following context: As a child of a element, after any, and elements, and before any,, and elements. The tag must be used in the following context: As a child of a element, after any,, and elements and before any and elements.
Example: Note: Use thead, tfoot and tbody. Use the special characters codes. Use colspan attribute of element to merge the cells.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" " Special characters and Table example Monthly Savings Month Savings Evaluation January £ 50 February £ 180 > the average March £ 100 = the average Sum £ 330 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.
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 your entire site) or in a specific folder:
DirectoryIndex filename.ext DirectoryIndex default.php 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:
Things to Note DirectoryIndex page1.html index.html index.php index.htm 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.
Creating a.htaccess File You can create a.htaccess file on your local computer or on the server. On your computer: 1. Open Notepad or any other text editor. 2. Put in what you want in the file. 3. 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 Files\Java There should be a subdirectory like C:\Program Files\Java\jre7 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. You might need to restart windows.
Setting environment variables using command prompt Check previous lab slides.
Assignment 2 Write an xhtml code to design the following table Price Item Without taxesWith taxes DVD player Laser printer LCD monitor
We’re done! Thank you for listening