1. 1 Chapter 2 - Introduction to HTML: Part 2 Outline Basic HTML Tables Intermediate HTML Tables and FormattingBasic HTML Forms More Complex HTML Forms Internal Linking Tags frameset Element Nested framesets

2. 2 Tables TagDescription Defines the table Defines the table caption Defines the table description Defines the table header Defines the table footer Defines the table body Defines the table row Defines the table header Defines the table data cell

3. 3 Tables attribute AttributeDescription BorderCreate a border WidthDetermine the table width ValignDetermine the position of content (top, middle, button) RowspanTo merge rows ClospanTo merge columns CellpadingTo create more white space between the content and its border CellspacingIncrease the distance between the cells BgcolorBackground color for the cell or table BackgroundTo add a background image to the table BordercolorTo coloring the table border FrameControl the border around the table (border, box, above, below,)

4. 4 Table1.html A simple HTML table tag opens a table --> <table border = "1" width = "40%" summary = "This table provides information about the price of fruit"> Price of Fruit Fruit Price The border attribute gives the size in pixels of the table’s border. The width attribute gives the width of the table. The summary attribute describes the table’s contents. Text placed in a table header is rendered bold and centered in the cell.

5. 5 Table1.html Apple $0.25 Orange $1.50 Banana $1.00 Pineapple $2.00 Total $3.75 The body of the table is placed between the tbody tags. Table rows are created using the tr element Data placed between td tags are placed in an individual cell. The table footer belongs at the bottom of the table. It formats text in a similar manner to a table header.

6. 6 Table1.html Program Output Table footer End of table body Start of table body Table header Table Caption

7. 7 Table2.html Internet and WWW How to Program - Tables Table Example Page Here is a more complex sample table. <img src = "camel.gif" width = "205" height = "167" alt = "Picture of a camel" /> Camelid comparison Approximate as of 8/99 # of Humps Indigenous region Spits? Produces Wool? The align attribute is used to horizontally align data in a cell. The span attribute indicates width of the data cell in number of columns. The value of the colspan attribute gives the amount of columns taken up by the cell. The vertical alignment of data in a cell can be specified with the valign attribute.

8. 8 Camels (bactrian) 2 Africa/Asia Llama Llamas 1 Andes Mountains Table2.html The value of the rowspan attribute gives the amount of rows taken up by the cell.

9. 9 Table2.html Program Output Cell spanning the size of two rows. Cell spanning the size of four columns.

10. 10 HTML Form A form is an area that can contain form element. Form can be either visual component (clickable button, and other graphical user interface) and non visual component called hidden inputs, store any data that, the document author specifies such as e-mail address and HTML document file name that acts as link. Form elements are elements that allow the user to enter information (like text field, text area, dropdown list, radio button, check box, etc).

11. 11 Form Tags TagDescription Defines a form user input Defines an input field Defines a text area (multi line text input control) Defines a label to a control Defines a selectable list (dropdown list) Defines an option in the dropdown box Defines a push button

12. 12 Form Type attributes TypeDescription "Text”To insert text “password”Information input by asters “file”To make a brows button “reset”Reset all for elements to their default value “submit”Data will send to the web server for processing. “button”To create a button “hidden”Send form data that is not input by the user.

13. 13 Text Field Text fields are used when you want the user to type letters, numbers…etc AttributeDescription SizeSpecifies the number of characters visible in the text box. MaxlengthLimits the number of characters input into the text box NameIdentifies the input element. First name: Last name: Password: Your file:

14. 14 Buttons 1. create a button: 2. submit, reset: The default value is: Submit  submit query Reset  reset.

15. 15 Text area AttributeDescription rows Specified number of rows cols Specified number of columns wrap "off": text display in one line comment: enter your comment here"

16. 16 Radio button Radio button are used when you want the user to select one of limited number of choices. AttributeDescription NameIdentifies the input element. (must be the same value) ValueDistinguished between radio buttons (the value that will be sending to the web server). CheckedIndicates which radio button is selected initially. Checked=checked Sex: male female

17. 17 Checkbox Check box is used when you want the user to select one or more option of limit number of choices. AttributeDescription NameIdentifies the input element. (must be the same value) ValueDistinguished between check box. CheckedIndicates which check box is selected initially. Checked=checked site design links

18. 18 Dropdown list TagDescription Provide drop-down list of line, from which the user can select an item. Add item to the dropdown list AttributeDescription name Identify the drop-down list selected Specifies which item initially is displayed as the selected item in the select element. car type: BMW Mazda Honda Kia

19. 19 Program Output Text box created using input element. Submit button created using input element. Reset button created using input element.

20. 20 Form2.html creates a multiline textbox --> Comments: Enter your comments here. inserts a --> E-mail Address: <input name = "email" type = "password" size = "25" /> Things you liked: Site design <input name = "thingsliked" type = "checkbox" value = "Design" /> Links <input name = "thingsliked" type = "checkbox" value = "Links" /> Ease of use <input name = "thingsliked" type = "checkbox" value = "Ease" /> Images <input name = "thingsliked" type = "checkbox" value = "Images" /> Setting an input element’s type attribute to checkbox will create a checkbox. Checkboxes that belong to the same group must have same value in the name attribute. The textarea element renders a text area when the page is displayed. The size of the text area can be specified with the rows and cols attribute.

21. 21 Form2.html Program Output Source code <input name = "thingsliked" type = "checkbox" value = "Code" /> Checkbox options created with input element. Text area created with input element.

22. 22 Form3.html Internet and WWW How to Program - Forms Feedback Form Please fill out this form to help us improve our site. <input type = "hidden" name = "redirect" value = "main.html" /> Name:

23. 23 Form3.html Comments: <textarea name = "comments" rows = "4" cols = "36"> E-mail Address: <input name = "email" type = "password" size = "25" /> Things you liked: Site design <input name = "things" type = "checkbox" value = "Design" /> Links <input name = "things" type = "checkbox" value = "Links" /> Ease of use <input name = "things" type = "checkbox" value = "Ease" /> Images <input name = "things" type = "checkbox" value = "Images" /> Source code <input name = "things" type = "checkbox" value = "Code" />

24. 24 Form3.html How did you get to our site?: Search engine <input name = "how get to site" type = "radio" value = "search engine" checked = "checked" /> Links from another site <input name = "how get to site" type = "radio" value = "link" /> Deitel.com Web site <input name = "how get to site" type = "radio" value = "deitel.com" /> Reference in a book <input name = "how get to site" type = "radio" value = "book" /> Other <input name = "how get to site" type = "radio" value = "other" /> The checked attribute will mark this radio option by default. An input element with type value equal to radio creates radio buttons.

25. 25 Form3.html Rate our site: Amazing 10 9 8 7 6 5 4 3 2 1 Awful <input type = "submit" value = "Submit Your Entries" /> The selected attribute selects a default value for the drop down list. The select element creates a drop down list. The option tag is used for each option in the drop down list.

26. 26 Program Output Drop down box list created with input element.The Amazing option is selected as a default value. Radio box list created with input element.

27. 27 Program Output

28. 28 Internal Linking AttributeDescription IdCreate an internal hyperlink destination Mechanism that enable the user to jump between locations in the same document. Internal linking is useful for long documents that contain many sections. Clicking an internal link enable users to find a section without scrolling through the entire document. the internal link address.

29. 29 Internal Linking Example: internal linking internal linking table content chapter one chapter two chapter three chapter four chapter four content tags link image go to table of content To internally link, place a # sign in front of the name of the desired anchor element within the page. An anchor named ch4 will be created at this point on the page. This anchor does not link and will not be seen on the page. However, other anchors can refer to this anchor and link to it.

30. 30 Meta Element AttributeDescription Defines meta information Search engines are read content in each web site these content are called Meta data. Meta data specify information about element Attribute: Name: type of element (keyword, description) Content: provide information search engines to catalog pages. Type, value  "keyword": list of words that describe a page.  "Description": description of site written in sentence form. Note: Meta element is defined in section tag because they are not visible to the user, and if not in head section they will not be visible to the user.

31. 31 Meta Element Example: Meta data The meta element provides information to search engines about the document. The name attribute describes the type of meta element. The content attribute provides the information search engines use to catalog pages.

32. 32 HTML Frames TagDescription Defines a set of frames Defines a frame (sub window) Defines a no frame section for browser that do not handle frames. The frame set tag: tag: defines how to divide the window into frames. Each frameset defines a set of rows or columns. The value of rows/columns indicates the amount of screen area each row/column will occupy. Defines before the tag.

33. 33 Frameset Tag Example 1: two horizontal frames First frame extends 50% from the document. Second frame extends 50% from the document. Example 2: Two vertical frames First frame extends 110 pixels from the left. Second frame fills the reminder of the browser width (*). The frame set tag: tag: defines how to divide the window into frames. Each frameset defines a set of rows or columns. The value of rows/columns indicates the amount of screen area each row/column will occupy. Defines before the tag.

34. 34 Frame Tag The frame tag: tag defines what HTML document to put into each frame. Example 1: AttributeDescription srcDefines the source of the document noresizePreventing the user to resize the frame border. "Resize".

35. 35 Frame Tag Example 2: Example 3:: Your browser does not handle frames

36. 36 Index.html Internet and WWW How to Program - Main This page uses frames, but your browser does not support them. Please, follow this link to browse our site without frames. The frameset element informs the browser that the page contains frames. The frame element loads documents into the frameset. The src attribute indicates the document to be loaded. Nav.html is loaded into the left frame and main.html is loaded into the right frame. The noframes element provides an option for browsers that do not display frames.

37. 37 Index.html Right frame (main) Left frame (leftframe)

38. 38 Program Output When Header Examples is selected, the document it links to is displayed in the right frame.

39. 39 Target Attribute Target: defines which frame that the document will be located. AttributeDescription “_blank”Loads the page into a new browser window “_top”Loads the page into a frame in which the anchor element appear. “-self”Loads the page into the full browser window.

40. 40 Target Attribute Ex: Navigation frame: Navigation frame caption a list of links with the second frame as the target. The first file called content.html contains three links Source code: frame a frame b frame c The second file Source code: The target attribute specifies where the document linked by the anchor should display. The document will open in the frame called main.