XHTML BASICS. Institute of Finance Management CIT Department Herman Mandari

Size: px

Start display at page:

Download "XHTML BASICS. Institute of Finance Management CIT Department Herman Mandari"

Dorcas Townsend
7 years ago
Views:

1 XHTML BASICS Institute of Finance Management CIT Department Herman Mandari

2 HTML Styles Introduces CSS to HTML The main purposes is to provide a common way to style all HTML elements Examples <body style= background-color:yellow > <p style= font-family:times new; color:red; font-size:20px> <h1 style= text-align:center >

<body style= background-color:yellow > <p style=

3 HTML Links Hyperlinks, Anchors, Links In web terms, a hyperlink is a references (an address) to a resource on the web Hyperlink can point to any resource on the web: an HTML page, an image, a sound file, a movie etc. An anchor is a term used to define a hyperlink destination inside a document

any resource on the web: an HTML page, an image, a sound file, a movie

4 HTML Links HTML link <a href= url >link text </a> <a href= Named Attributes (named anchor) <a name= label >Any content</a> <a href= #label > Any content</a> The # in the href defines a link to a named anchor

com>mandari</a> Named Attributes (named anchor) <a name=

5 HTML Images In HTML, images are defined with the <img> tag To display an image on a page, you need to use the scr attribute. Scr stands for source. <img scr= url /> The URL points to the location where the image is store

6 HTML Lists HTML supports ordered, unordered and definition list Unordered Lists An ordered list is a list of items. The list items are marked with bullets An ordered list starts with <ul> tag. Each list item starts with the <li> tag

7 Examples <ul> <li>coffee</li> <li>milk</li> </ul> Here is how it looks in a browser Coffee Milk

8 HTML List Ordered Lists An ordered list is also a list of items. The list items are marked with numbers An ordered list starts with the <ol> tag. Each list item start with the <li> <ol> <li>coffee</li> <li> Milk</li> </ol>

9 HTML Lists Definition Lists A definition list is not a list of single items. It is a list of items (terms), with description of each item A definition list starts with a <dl> tag (definition list) Each term start with a <dt> tag (definition term) Each description starts with a <dd> tag (definition description )

list starts with a <dl> tag (definition list) Each term start with a <dt> tag

10 Definition Lists <dl> <dt>coffee</td> <dd>black hot drink </dd> <dt>milk</dt> <dd>white cold drink</dd> </dl>

11 Output Here is how it look in a browser Coffee Black hot drink Milk White cold drink

12 Overview of the form Forms are used all over the web to Accept information Provide accessibility Type of form Search form, order form, Newsletter sign-up form, survey form, etc.. A form is an XHTML element that is used to contain and organize other objects such as text boxes, check boxes, and buttons that can accept information from web site visitors.

13 Two Components Needed for Forms 1st component - the XHTML form itself, which is the web page user interface 2nd component - server-side processing (called CGI for Common Gateway Interface),which works with the form data and sends , writes to a text file, updates a database, or performs some other type ofprocessing on the server

Common Gateway Interface),which works with the form data and sends email, writes to

14 XHTML Using Forms <form> tag Used to contain the form elements on a web page Container tag <input> tag Used to configure a number of form elements including text boxes, radio buttons, check boxes, and buttons stand alone tag <textarea> tag Used to configure a scrolling text box Container tag <select> tag Used to configure a select box (drop down list) Container tag <option> tag Used to configure an option in the select box Container tag

alone tag <textarea> tag Used to configure a scrolling text box Container tag <select> tag Used to configure

15 <form> Sample Form XHTML <input type="text" name="customer " /><br /> <input type="submit" /> </form>

16 Complied Xhtml code

17 XHTML <form> tag The <form> tag attributes: action Specifies the server-side program or script that will process your form data id Identifies the form method get default value, form data passed in URL post more secure, form data passed in HTTP Entity Body name Identifies the form

Identifies the form method get default value, form data passed in URL

18 XHTML<input> tag Text box Used to accept text information Attributes: type= text name size maxlength value

19 Sample text box

20 code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>untitled Document</title> </head> <body> <form> <input type="text" name="customer " /> <input type="submit" value="submit" /> </form> </body> </html>

dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;

21 Password Text Field Used to accept text information that needs to be hidden as it is entered Attributes: type= password name size maxlength value

22 Sample

23 <html> <head> <title>untitled Document</title> </head> Sample code <body> <form> Password:: <input type="password" name="customer " /><br/><br /> <input type="submit" value="submit" /> </form> </body> </html>

24 XHTML<input> tag Check box Used to allow the user to select one or more of a group of predetermined items Attributes: type= checkbox name checked value

25 Sample check box

26 Sample checkbox codes <html> <head> <title>untitled Document</title> </head> <body> <form> <h2>choose the browser you use:</h2> <p> Internet Explorer: <input name="checkbox" type="checkbox" value="checkbox" checked> <br /> Mozilla Firefox: <input type="checkbox" name="checkbox" value="checkbox"><br /> Google Chrome: <input type="checkbox" name="checkbox" value="checkbox"><br /> </form> </body> </html>

27 Radio buttons Used to allow the user to select exactly one from a group of predetermined items Each radio button in a group is given the same name and a unique value Attributes: type= radio name checked value

28 Sample radio button display

29 Sample Radio button code <html> <head> <title>untitled Document</title> </head> <body> <form> <h2>select your sex below </h2> <p> Male <input name="radiobutton" type="radio" value="radiobutton" checked><br /> Female <input name="radiobutton" type="radio" value="radiobutton"> <br /> </form> </body> </html>

30 XHTML<textarea> tagscrolling Used to configure a scrolling text box Attributes: name cols rows value Text Box

31 Sample text area form

32 Sample text area codes <html> <head> <title>untitled Document</title> </head> <body> <form> <h2>write your message below</h2> <p> <textarea name="textarea" cols="30" rows="4"></textarea> </p> <p> <br /> </form> </body> </html>

33 XHTML<option> tag Used (along with <option> tags) to configure a Select List. This form element is referred to by several different names: Select List, Select Box, Drop- Down List, Drop- Down Box, and Option Box. Used to configure the options in a Select List Attributes: value Selected

34 Sample Option form

35 XHTML<input> tag Submit Button Used to submit the form When clicked, it triggers the action method on the <form> tag and causes the browser to send the form data (the name and value pairs for each form element) to the web server. Attributes: type= submit name value

36 Sample submit button

37 Sample button codes <html> <head> <title>untitled Document</title> </head> <body> <form> <h2>press the button below to Register </h2> <p> <input type="submit" name="submit" value="registration Button"> </p> <p> <br /> </form> </body> </html>

38 Complete Reference W3schools website,

39 END

Introduction to XHTML. 2010, Robert K. Moniot 1

Introduction to XHTML. 2010, Robert K. Moniot 1 Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document