20-753: Fundamentals of Web Programming 1 Lecture 6: Advanced HTML Fundamentals of Web Programming Lecture 6: Advanced HTML

20-753: Fundamentals of Web Programming 2 Lecture 6: Advanced HTML Today’s Topics Table Tags Form Tags Frame Tags

20-753: Fundamentals of Web Programming 3 Lecture 6: Advanced HTML Table Tags,,,,,,,,,

20-753: Fundamentals of Web Programming 4 Lecture 6: Advanced HTML Tag: Type: container Function: –represent tabular information –control layout of page elements

20-753: Fundamentals of Web Programming 5 Lecture 6: Advanced HTML Tag: Syntax: …

20-753: Fundamentals of Web Programming 6 Lecture 6: Advanced HTML Tag: Attributes: –ALIGN - alignment of table on the page –BORDER - thickness of table border in pixels –BGCOLOR - background color for table cells –CELLPADDING - whitespace between cell contents and cell border

20-753: Fundamentals of Web Programming 7 Lecture 6: Advanced HTML Tag: Attributes (cont.): –CELLSPACING - whitespace between cells –COLS - number of columns in the table (optional, but helps the browser work faster) –FRAME - controls rendering of outer border

20-753: Fundamentals of Web Programming 8 Lecture 6: Advanced HTML Tag: Attributes (cont.): –RULES - controls rendering of inner border –WIDTH - width of the table in pixels or percentage of screen width

20-753: Fundamentals of Web Programming 9 Lecture 6: Advanced HTML Tag: Type: container Function: Specifies a table caption Syntax: … Attributes: –ALIGN - controls where caption appears with respect to the table

20-753: Fundamentals of Web Programming 10 Lecture 6: Advanced HTML Tag: Type: container Function: Defines a specific header row; allows the browser to “float” the headings over page breaks.

20-753: Fundamentals of Web Programming 11 Lecture 6: Advanced HTML Tag: Syntax: …

20-753: Fundamentals of Web Programming 12 Lecture 6: Advanced HTML Tag: Attributes: –ALIGN - controls the horizontal alignment within the cells of the table header –VALIGN - controls the vertical alignment within the cells of the table header

20-753: Fundamentals of Web Programming 13 Lecture 6: Advanced HTML Tag: Type: container Function: Defines a footer section of the table. Syntax: …

20-753: Fundamentals of Web Programming 14 Lecture 6: Advanced HTML Tag: Attributes: –ALIGN - controls the horizontal alignment within the cells of the table footer –VALIGN - controls the vertical alignment within the cells of the table footer

20-753: Fundamentals of Web Programming 15 Lecture 6: Advanced HTML Tag: Type: container Function: Defines the body section of the table. Syntax: …

20-753: Fundamentals of Web Programming 16 Lecture 6: Advanced HTML Tag: Attributes: –ALIGN - controls the horizontal alignment within the cells of the table body –VALIGN - controls the vertical alignment within the cells of the table body

20-753: Fundamentals of Web Programming 17 Lecture 6: Advanced HTML Tag: Type: container Function: Groups a set of columns with the same properties

20-753: Fundamentals of Web Programming 18 Lecture 6: Advanced HTML Tag: Syntax: …

20-753: Fundamentals of Web Programming 19 Lecture 6: Advanced HTML Tag: Attributes: –ALIGN - horizontal alignment within the column group –SPAN - how many columns in group –VALIGN - vertical alignment within the column group –WIDTH - the width of the enclosed columns in pixels or percentage of screen width

20-753: Fundamentals of Web Programming 20 Lecture 6: Advanced HTML Tag: Type: standalone Function: Specifies properties for a column or columns in a column group

20-753: Fundamentals of Web Programming 21 Lecture 6: Advanced HTML Tag: Syntax: …

20-753: Fundamentals of Web Programming 22 Lecture 6: Advanced HTML Tag: Attributes: –ALIGN - horizontal alignment within the column cells –SPAN - how many columns to which to apply the property –VALIGN - vertical alignment within the column cells –WIDTH - the width of the column in pixels or percentage of screen width

20-753: Fundamentals of Web Programming 23 Lecture 6: Advanced HTML Tag: Type: container Function: Defines a row of a table, table header, footer, or body Syntax: …

20-753: Fundamentals of Web Programming 24 Lecture 6: Advanced HTML Tag: Attributes: –ALIGN - horizontal alignment within the cells in this row –BGCOLOR - background color for cells in this row –VALIGN - vertical alignment within the cells in this row

20-753: Fundamentals of Web Programming 25 Lecture 6: Advanced HTML Tag:, Type: container Function: Defines a cell in a table. is rendered in normal weight font and aligned flush left. is rendered in boldface and centered horizontal alignment.

20-753: Fundamentals of Web Programming 26 Lecture 6: Advanced HTML Tag:, Syntax (same for ): …

20-753: Fundamentals of Web Programming 27 Lecture 6: Advanced HTML Tag:, Attributes: –ALIGN - horizontal alignment within the cell –BGCOLOR - background color of the cell –COLSPAN - number of columns the cell should occupy –NOWRAP - suppresses text wrapping within the cell

20-753: Fundamentals of Web Programming 28 Lecture 6: Advanced HTML Tag:, Attributes (cont.): –ROWSPAN - specifies the number of rows the cell should occupy –VALIGN - controls the vertical alignment within the cell

20-753: Fundamentals of Web Programming 29 Lecture 6: Advanced HTML Form Tags,,,,,,,,

20-753: Fundamentals of Web Programming 30 Lecture 6: Advanced HTML Tag: Type: container Function: Contains the text and tags that comprise an HTML form.

20-753: Fundamentals of Web Programming 31 Lecture 6: Advanced HTML Tag: Syntax: …

20-753: Fundamentals of Web Programming 32 Lecture 6: Advanced HTML Tag: Attributes: –ACCEPT-CHARSET - a list of character sets that the form’s processing script can handle. –ACTION - the URL of the script or program that will process the form data.

20-753: Fundamentals of Web Programming 33 Lecture 6: Advanced HTML Tag: Attributes (cont.): –ENCTYPE - used when a file is to be uploaded by the form; set to the MIME type of the file –METHOD GET: append the data to the end of the URL POST: sent as part of HTTP headers –TARGET - the specific frame where the output should be displayed.

20-753: Fundamentals of Web Programming 34 Lecture 6: Advanced HTML Tag: Type: standalone Function: Places controls: –Text, password, or hidden fields –Check boxes, Radio buttons –File upload fields –Image-based buttons –Scripted buttons –Submit/reset buttons

20-753: Fundamentals of Web Programming 35 Lecture 6: Advanced HTML Tag: Syntax:

20-753: Fundamentals of Web Programming 36 Lecture 6: Advanced HTML Tag: Syntax:

20-753: Fundamentals of Web Programming 37 Lecture 6: Advanced HTML Tag: Syntax:

20-753: Fundamentals of Web Programming 38 Lecture 6: Advanced HTML Tag: Syntax:

20-753: Fundamentals of Web Programming 39 Lecture 6: Advanced HTML Tag: Syntax:

20-753: Fundamentals of Web Programming 40 Lecture 6: Advanced HTML Tag: Syntax:

20-753: Fundamentals of Web Programming 41 Lecture 6: Advanced HTML Tag: Syntax:

20-753: Fundamentals of Web Programming 42 Lecture 6: Advanced HTML Tag: Type: container Function: Defines a list of choices for the user (one or many) Syntax:...

20-753: Fundamentals of Web Programming 43 Lecture 6: Advanced HTML Tag: Attributes: –DISABLED - deactivates the field –MULTIPLE - select > 1 option by pressing Ctrl –NAME - field name passed to server –SIZE - the number of options visible if SIZE=1 and MULTIPLE isn’t specified, uses a drop-down list otherwise, uses a scrollable list

20-753: Fundamentals of Web Programming 44 Lecture 6: Advanced HTML Tag: Type: container Function: Defines a specific option inside. Syntax:...

20-753: Fundamentals of Web Programming 45 Lecture 6: Advanced HTML Tag: Attributes: –DISABLED - deactivates the option –SELECTED - preselects an option –VALUE - value to pass to the browser if the option is selected; defaults to the text inside the option tag

20-753: Fundamentals of Web Programming 46 Lecture 6: Advanced HTML Tag: Type: container Function: Defines a multiple-line text input window. Syntax:...

20-753: Fundamentals of Web Programming 47 Lecture 6: Advanced HTML Tag: Attributes: –COLS - number of columns wide –DISABLED - deactivate the text –NAME - assigns a unique name to pass to the processing program –READONLY - leaves the window active, but uneditable by the user –ROWS - number of rows high

20-753: Fundamentals of Web Programming 48 Lecture 6: Advanced HTML Tag: Type: container Function: Defines a 3D button in the form. Contains text or image. Syntax:...

20-753: Fundamentals of Web Programming 49 Lecture 6: Advanced HTML Tag: Attributes: –DISABLED - disables the button –NAME - gives the button a unique name –TYPE - set to SUBMIT or RESET (two types of button) –VALUE - what is passed to the server when the button is clicked

20-753: Fundamentals of Web Programming 50 Lecture 6: Advanced HTML Tag: Type: container Function: Defines a form field label. Syntax:...

20-753: Fundamentals of Web Programming 51 Lecture 6: Advanced HTML Tag: Attributes: –ACCESSKEY - shortcut to zoom to the labelled field –DISABLED - deactivate the label –FOR - the value of the ID attribute for the labelled field

20-753: Fundamentals of Web Programming 52 Lecture 6: Advanced HTML Tag: Type: container Function: Groups related form input fields. Syntax:... Attributes: none Related: Use to give the group fields a label.

20-753: Fundamentals of Web Programming 53 Lecture 6: Advanced HTML Tag: Type: container Function: Names a group of related form fields. Syntax:...

20-753: Fundamentals of Web Programming 54 Lecture 6: Advanced HTML Tag: Attributes: –ACCESSKEY - A keyboard key used as a shortcut –ALIGN - controls how the legend text is aligned with respect to the form fields

20-753: Fundamentals of Web Programming 55 Lecture 6: Advanced HTML Frame Tags,,,

20-753: Fundamentals of Web Programming 56 Lecture 6: Advanced HTML Tag: Type: container Function: Divides the browser window into frames. Syntax:... Can take one of ROWS, COLS

20-753: Fundamentals of Web Programming 57 Lecture 6: Advanced HTML Tag: Attributes: –ROWS - how to break up the window into multiple rows the number of items determines the number of rows; each item can be in pixels, a percentage of screen height, or relative to the amount of space available –COLS - analogous to ROWS, but divides the window into columns

20-753: Fundamentals of Web Programming 58 Lecture 6: Advanced HTML Tag: Type: standalone Function: Places content into a frame.

20-753: Fundamentals of Web Programming 59 Lecture 6: Advanced HTML Tag: Syntax:

20-753: Fundamentals of Web Programming 60 Lecture 6: Advanced HTML Tag: Attributes: –FRAMEBORDER - switches frame border off/on (0 or 1) –MARGINHEIGHT - top margin of the frame –MARGINWIDTH - left margin of the frame –NAME - a unique name to be used as TARGET attribute elsewhere

20-753: Fundamentals of Web Programming 61 Lecture 6: Advanced HTML Tag: –NORESIZE - suppresses dragging of frame borders –SCROLLING - controls presence of scrollbars YES - always NO - never AUTO - if the frame contents exceed the frame’s extent –SRC - URL to load into the frame

20-753: Fundamentals of Web Programming 62 Lecture 6: Advanced HTML Tag: Type: container Function: Provides alternate layout for browsers without frames. Syntax:... Related: Appears inside, before any nested tags.

20-753: Fundamentals of Web Programming 63 Lecture 6: Advanced HTML Tag: Type: container Function: Places a floating frame on the page.

20-753: Fundamentals of Web Programming 64 Lecture 6: Advanced HTML Tag: Syntax:...

20-753: Fundamentals of Web Programming 65 Lecture 6: Advanced HTML Tag: Attributes: –ALIGN - controls how the floating frame is aligned –FRAMEBORDER - turns frame border off/on (0 or 1) –HEIGHT - in pixels –MARGINHEIGHT - top margin, in pixels –MARGINWIDTH - left margin, in pixels

20-753: Fundamentals of Web Programming 66 Lecture 6: Advanced HTML Tag: –NAME - unique name for use in TARGET elsewhere –SCROLLING - always, never, when needed –SRC - URL to load into the frame –WIDTH - in pixels