11/22/2011
Computer Science Dept
XHTML BASICS
Lecture 4
HTML Styles
Introduces CSS to HTML The main purposes is to provide a common way to style all HTML elements Style can be added to html in three ways
in separate style sheet files (CSS files) in the style element in the HTML head section in the style attribute in single HTML elements
11/22/2011
HTML Styles
Examples
Provide body with background color <body style=background-color:yellow> Formating paragraph <p style=font-family:times new; color:red; font-size:20px> paragraph </p> Align title text <h1 style=text-align:center> heading 1 contents </h1>
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
11/22/2011
HTML Links
HTML link <a href=url>link text </a> <a href=http://www.mandari.com>mandari</a> 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
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 alt=altenative text /> The URL points to the location where the image is store
11/22/2011
HTML Lists
HTML supports ordered, unordered and definition list Unordered Lists
Unordered 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
Example Unordered List
<ul> <li>Coffee</li> <li>Milk</li> </ul> Here is how it looks in a browser Coffee Milk
11/22/2011
HTML List Ordered 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>
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 )
11/22/2011
Definition Lists
<dl> <dt>Coffee</td> <dd>Black hot drink </dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
Output
Here is how it look in a browser Coffee Black hot drink Milk White cold drink
11/22/2011
Overview of XHTML 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.
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 email, writes to a text file, updates a database, or performs some other type ofprocessing on the server
11/22/2011
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
Sample Form XHTML
<form> Email: <input type="text" name="CustomerEmail" /><br/> <input type="submit" name =SubBtn/> </form>
11/22/2011
Complied Xhtml code
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
11/22/2011
XHTML<input> tag Text box
Used to accept text information Attributes:
type=text name size maxlength value
Sample textbox form
10
11/22/2011
Sample Email form code
<html> <head> <title>Email Forms</title> </head> <body> <form>
Email: <input type="text" name="CustomerEmail" /> <input type="submit" value="submit" />
</form> </body> </html>
Password Text Field
Used to accept text information that needs to be hidden as it is entered Attributes:
type=password name size maxlength value
11
11/22/2011
Sample Password Field
Sample Password Field code
<html> <head> <title>Password Forms</title> </head> <body> <form> Password:: <input type="password" name="CustomerEmail" /><br/><br /> <input type="submit" value="submit" /> </form> </body> </html>
12
11/22/2011
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
Sample check box form
13
11/22/2011
Sample checkbox codes
<html> <head> <title>Checkbox form</title> </head> <body> <form> <h2>Choose the browser you use:</h2> 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>
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
14
11/22/2011
Sample radio button display
Sample Radio button code
<html> <head> <title>Radion Button Control</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>
15
11/22/2011
XHTML<textarea> tagScrolling
Text Box
Used to configure a scrolling text box Attributes:
name cols rows value
Sample text area form
16
11/22/2011
Sample text area codes
<html> <head> <title>Test area form</title> </head> <body> <form> <h2>write your message below</h2>
<textarea name="textarea" cols="30" rows="4"></textarea>
</form> </body> </html>
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, DropDown List, Drop- Down Box, and Option Box. Used to configure the options in a Select List Attributes:
value Selected
17
11/22/2011
Sample Option form
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
18
11/22/2011
Sample submit button
Sample button codes
<html> <head> <title>Button Control</title> </head> <body> <form> <h2>Press the button below to Register </h2> <input type="submit" name="Submit" value="Registration Button"> <br /> </form> </body> </html>
19
11/22/2011
END
20
