Academic Year, Spring Semester Bilkent University - Faculty of Art, Design and Architecture Department of Communication and Design CS 153 Introduction to Computing I Lesson 8

Review of Last Week Open notepad or TryIt. Open notepad or TryIt. Create a frameset that has Create a frameset that has First column 300 pixels wide. Address First column 300 pixels wide. Address Second column *. Address Second column *. Address

</frameset>

Review of Last Week Open notepad or TryIt. Open notepad or TryIt. Create a frameset that has Create a frameset that has First row 250 pixels long. Address First row 250 pixels long. Address Second row *. Address Second row *. Address

</frameset>

Review of Last Week Open notepad or TryIt. Open notepad or TryIt. Create a frameset that has Create a frameset that has First Column 250 pixels wide. Address First Column 250 pixels wide. Address Second Column 250 pixels wide. Address Second Column 250 pixels wide. Address Third Column is * wide. This column has 2 rows: Third Column is * wide. This column has 2 rows: First row is 250 pixels long. Address: First row is 250 pixels long. Address: Second row is * pixels long. Address: Second row is * pixels long. Address:

</frameset></frameset>

Forms Forms allows you to submit data taken from user. Forms allows you to submit data taken from user. The destination that you submit your data would be CGI (Common Gateway Interface) programs that are at the Web, or . The destination that you submit your data would be CGI (Common Gateway Interface) programs that are at the Web, or . In order to use option, client’s program should be setted-up correctly. In order to use option, client’s program should be setted-up correctly.

Forms A form should be inside tag. A form should be inside tag....</form> Parameters: Parameters: ACTION, Specifies the URL of the application that will process the form.(required) ACTION, Specifies the URL of the application that will process the form.(required) METHOD, Specifies the parameter-passing style, either get or post.(required) METHOD, Specifies the parameter-passing style, either get or post.(required) ENCTYPE, Encoding Type Specifies how the form element values will be encoded either ENCTYPE, Encoding Type Specifies how the form element values will be encoded either “application/x-www-form-urlencoded” or “application/x-www-form-urlencoded” or “multipart/form-data”. “multipart/form-data”....</FORM>

INPUT Tag Input has several different form elements controlled by type attribute. Input has several different form elements controlled by type attribute.

Checkbox data to display data to display With Checkbox and RadioButton you can group them in order to have a logical selection. With Checkbox and RadioButton you can group them in order to have a logical selection. Checkbox, Creates checkbox input element. Checkbox, Creates checkbox input element. Checked, Marks the element as initially checked. Checked, Marks the element as initially checked. Name, Name of the parameter.(required) Name, Name of the parameter.(required) Value, Value of the parameter.(required) Value, Value of the parameter.(required) Extra Mozerella Cheese Extra Mozerella Cheese

Radio Button Radio, Creates a radio button input element.(Single selection in a group is possible) Radio, Creates a radio button input element.(Single selection in a group is possible) Checked, Mark the element as initially selected. Checked, Mark the element as initially selected. Name, Name of the parameter.(required) Name, Name of the parameter.(required) Value, Value of the parameter.(required) Value, Value of the parameter.(required) Big Coke Big Coke Medium Coke Medium Coke Small Coke Small Coke

File Allows you to pick a file from your disk Allows you to pick a file from your disk File, Creates a file selection element. File, Creates a file selection element. Maxlength, Specifies the maximum number of characters to accept. Maxlength, Specifies the maximum number of characters to accept. Name, Name of the parameter.(required) Name, Name of the parameter.(required) Size, Number of characters to display. Size, Number of characters to display.

Hidden Field Hidden, Creates hidden element.(Names the form) Hidden, Creates hidden element.(Names the form) Maxlength, Specifies the maximum number of characters to accept. Maxlength, Specifies the maximum number of characters to accept. Name, Name of the parameter.(required) Name, Name of the parameter.(required) Size, Number of character to display. Size, Number of character to display. Value, Specifies the value of this element. Value, Specifies the value of this element.

Image Image, Create an image input element. (Works also as a submit button; Sends x,y coordinate of the clicked point.) Image, Create an image input element. (Works also as a submit button; Sends x,y coordinate of the clicked point.) Align, Align the image to either the top, middle, or bootom of the form. Align, Align the image to either the top, middle, or bootom of the form. Name, Name of the parameter.(required) Name, Name of the parameter.(required) Src, URL of the image.(required) Src, URL of the image.(required)

Reset Button Reset button clears the form Reset button clears the form Reset, Creates reset button. Reset, Creates reset button. Value, Alternate label for reset button. Value, Alternate label for reset button.

Submit button Sends the entered information Sends the entered information Submit, Creates submit button. Submit, Creates submit button. Name, Nameof the parameter.(required) Name, Nameof the parameter.(required) Value, Alternate label for the submit button. Value, Alternate label for the submit button.

Text field Text, Creates text input element. Text, Creates text input element. Maxlength, Specifies maximum number of character to accept. Maxlength, Specifies maximum number of character to accept. Name, Name of the parameter.(required) Name, Name of the parameter.(required) Size, Number of characters to display. Size, Number of characters to display. Value, Initial value for the element. Value, Initial value for the element.

Textarea tag the information here will be displayed as initial/default information. the information here will be displayed as initial/default information. Used to define multiline text area. Cols, Number of column to display Cols, Number of column to display Rows, Number of row to display Rows, Number of row to display Name, Defines the name for text area.(required) Name, Defines the name for text area.(required) Wrap, The values are OFF, VIRTUAL, PHYSICAL Wrap, The values are OFF, VIRTUAL, PHYSICAL OFF, No word wrapping OFF, No word wrapping VIRTUAL, Just display wrapping but don't send it. VIRTUAL, Just display wrapping but don't send it. PHYSICAL, Display and send the word wrapping. PHYSICAL, Display and send the word wrapping.

Select Tag Define a multiple-choice menu or scrolling list. Define a multiple-choice menu or scrolling list. Multiple, If appears, then user can select more than 1 option. Multiple, If appears, then user can select more than 1 option. Name, Defines name for the selected option.(required) Name, Defines name for the selected option.(required) Size, number of items to display in pull-down menu. If value is 1 then it changes into pull-down menu, If the number is more than 1 then it changes into scrolling list. Size, number of items to display in pull-down menu. If value is 1 then it changes into pull-down menu, If the number is more than 1 then it changes into scrolling list.

Option Tag Defines options in SELECT tag. Defines options in SELECT tag. Selected, Makes the item initially selected. Selected, Makes the item initially selected. Value, Send this value(instead of displayed value). Value, Send this value(instead of displayed value).

Select Example No Car Mazda Mercedes Renault Subaru Opel Honda Suzuki Fiat Ford No Car Mazda Mercedes Renault Subaru Opel Honda Suzuki Fiat Ford

Project %25 A simple shopping site. A simple shopping site. You will need a image map program. (for example mapedit, or any other you may find at the internet.) install it and learn it. You will need a image map program. (for example mapedit, or any other you may find at the internet.) install it and learn it. 3 types of pages: 3 types of pages: Frames page Frames page Top page Top page Products page Products page

Homework Frames page Frames page 2 rows: 100, and rest of the space 2 rows: 100, and rest of the space With no spacing between frames With no spacing between frames With no frame borders With no frame borders Frame names Frame names top: top.html top: top.html mainFrame: cd.html mainFrame: cd.html

Homework top.html: top.html: Has only an image with image map. (title.gif) Has only an image with image map. (title.gif) 3 rectangles at CD, DVD and FLOPPY pointing to cd.html, dvd.html, floppy.html will open at bottom frame. 3 rectangles at CD, DVD and FLOPPY pointing to cd.html, dvd.html, floppy.html will open at bottom frame.

Homework Product pages Product pages All has the same structure. All has the same structure. cd.html dvd.html floppy.html cd.html dvd.html floppy.html It has a form It has a form method=post ENCTYPE="application/x- www-form-urlencoded" method=post ENCTYPE="application/x- www-form-urlencoded" A big table that has 2 columns, and same number of rows that products have A big table that has 2 columns, and same number of rows that products have Left cell has the product image Left cell has the product image Right cell has Right cell has a product name in bold followed by short description and a product name in bold followed by short description and details (in a new line) and details (in a new line) and another 2x2 table that shows another 2x2 table that shows the price and total price including VAT the price and total price including VAT A text box that allows only 3 characters to be entered, with a name equals to the product name. A text box that allows only 3 characters to be entered, with a name equals to the product name. Submit button just after the big table. Submit button just after the big table.

Homework Sample product page, the tables are dashed in order to allow you to see them. Normally there are no table borders.

Homework

Homework

Homework When we click on “Satın Al” an will be sent to with the data. Test it with your own .

FAQ The Turkish text on your web page is not looking correct? The Turkish text on your web page is not looking correct? Try adding Try adding to... to... All images are available at All images are available at

EOL