Class 2 – Usage of the Most Common XHTML Elements
Here is a document that uses all of the most common XHTML elements. You can see the end result of this code by clicking this link.
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Class 1 - HTML FRAME</title> </head> <body> <!-- this is a comment it won't show up when you view this file in the web browser --> <!-- headings --> <h1>Class 1 - HTML Frame</h1> <h2>Less Important heading</h2> <h3>Even less important</h3> <!-- paragraphs and text --> <p>This is a paragraph</p> <p> This is a paragraph <br /> with line breaks <br /> ... two of them </p> <p> This is a paragraph with a <a href="http://nyu.edu">link</a> </p> <p> This is a paragraph with a <strong>very important</strong> part </p> <!-- preformatted text that maintains spaces and line breaks --> <pre> NYU School of Continuing and Professional Studies 48 Cooper Sq. New York, NY 10003 </pre> <!-- images --> <img src="donkey.jpg" title="donkey" alt="image of donkey" /> <!-- ordered list --> <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ol> <!-- unordered list --> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> <!-- a table with 3 rows and 2 columns --> <table> <tr> <th>heading 1</th> <th>heading 2</th> </tr> <tr> <td>data for row 1 column 1</td> <td>data for row 1 column 2</td> </tr> <tr> <td>data for row 2 column 1</td> <td>data for row 2 column 2</td> </tr> </table> <!-- form controls --> <form> <!-- single-line text input --> <label for="t1">username</label> <input type="text" id="t1" name="t1" /> <br /> <!-- password input --> <label for="t2">password</label> <input type="password" id="t2" name="t2" /> <br /> <!-- drop-down list --> <select> <option>---select an option---</option> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select> <br /> <!-- radio buttons that are mutually exclusive --> <!-- note that the name field of each input tag is the same --> <p>Radio buttons with the same name will be mutually exclusive</p> <input type="radio" id="r1" name="r1"> <label for="r1">radio 1</label> <input type="radio" id="r2" name="r1"> <label for="r2">radio 2</label> <br /> <!-- radio buttons that are NOT mutually exclusive --> <!-- note that the name field of each input tags is NOT the same --> <p>Radio buttons with the different names will not be mutually exclusive</p> <input type="radio" id="r3" name="r3"> <label for="r3">radio 3</label> <input type="radio" id="r4" name="r4"> <label for="r4">radio 4</label> <br /> <!-- multi-line text input --> <textarea>this is some text in a multiline textarea</textarea> <br /> <!-- checkboxes --> <input type="checkbox" id="c1" name="c1" /> <label for="c1">checkbox 1</label> <br /> <input type="checkbox" id="c2" name="c2" /> <label for="c2">checkbox 2</label> <br /> <!-- submit button, submits the form data --> <input type="submit" value="Submit form!" /> <br /> <!-- reset button, resets the form to its original state --> <input type="reset" value="Reset form" /> <br /> <!-- generic button --> <input type="button" value="Do nothing" /> </form> <br /> <br /> <!-- an iframe puts one page within another page --> <iframe src="http://nyu.edu"></iframe> </body> </html>
Loading ...