Download presentation
Presentation is loading. Please wait.
Published byJohnathan Morgan Modified over 9 years ago
1
20-753: Fundamentals of Web Programming 1 Lecture 6: Advanced HTML Fundamentals of Web Programming Lecture 6: Advanced HTML
2
20-753: Fundamentals of Web Programming 2 Lecture 6: Advanced HTML Today’s Topics Table Tags Form Tags Frame Tags
3
20-753: Fundamentals of Web Programming 3 Lecture 6: Advanced HTML Table Tags,,,,,,,,,
4
20-753: Fundamentals of Web Programming 4 Lecture 6: Advanced HTML Tag: Type: container Function: –represent tabular information –control layout of page elements
5
20-753: Fundamentals of Web Programming 5 Lecture 6: Advanced HTML Tag: Syntax: …
6
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
7
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
8
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
9
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
10
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.
11
20-753: Fundamentals of Web Programming 11 Lecture 6: Advanced HTML Tag: Syntax: …
12
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
13
20-753: Fundamentals of Web Programming 13 Lecture 6: Advanced HTML Tag: Type: container Function: Defines a footer section of the table. Syntax: …
14
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
15
20-753: Fundamentals of Web Programming 15 Lecture 6: Advanced HTML Tag: Type: container Function: Defines the body section of the table. Syntax: …
16
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
17
20-753: Fundamentals of Web Programming 17 Lecture 6: Advanced HTML Tag: Type: container Function: Groups a set of columns with the same properties
18
20-753: Fundamentals of Web Programming 18 Lecture 6: Advanced HTML Tag: Syntax: …
19
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
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
21
20-753: Fundamentals of Web Programming 21 Lecture 6: Advanced HTML Tag: Syntax: …
22
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
23
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: …
24
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
25
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.
26
20-753: Fundamentals of Web Programming 26 Lecture 6: Advanced HTML Tag:, Syntax (same for ): …
27
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
28
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
29
20-753: Fundamentals of Web Programming 29 Lecture 6: Advanced HTML Form Tags,,,,,,,,
30
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.
31
20-753: Fundamentals of Web Programming 31 Lecture 6: Advanced HTML Tag: Syntax: …
32
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.
33
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.
34
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
35
20-753: Fundamentals of Web Programming 35 Lecture 6: Advanced HTML Tag: Syntax:
36
20-753: Fundamentals of Web Programming 36 Lecture 6: Advanced HTML Tag: Syntax:
37
20-753: Fundamentals of Web Programming 37 Lecture 6: Advanced HTML Tag: Syntax:
38
20-753: Fundamentals of Web Programming 38 Lecture 6: Advanced HTML Tag: Syntax:
39
20-753: Fundamentals of Web Programming 39 Lecture 6: Advanced HTML Tag: Syntax:
40
20-753: Fundamentals of Web Programming 40 Lecture 6: Advanced HTML Tag: Syntax:
41
20-753: Fundamentals of Web Programming 41 Lecture 6: Advanced HTML Tag: Syntax:
42
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:...
43
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
44
20-753: Fundamentals of Web Programming 44 Lecture 6: Advanced HTML Tag: Type: container Function: Defines a specific option inside. Syntax:...
45
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
46
20-753: Fundamentals of Web Programming 46 Lecture 6: Advanced HTML Tag: Type: container Function: Defines a multiple-line text input window. Syntax:...
47
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
48
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:...
49
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
50
20-753: Fundamentals of Web Programming 50 Lecture 6: Advanced HTML Tag: Type: container Function: Defines a form field label. Syntax:...
51
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
52
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.
53
20-753: Fundamentals of Web Programming 53 Lecture 6: Advanced HTML Tag: Type: container Function: Names a group of related form fields. Syntax:...
54
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
55
20-753: Fundamentals of Web Programming 55 Lecture 6: Advanced HTML Frame Tags,,,
56
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
57
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
58
20-753: Fundamentals of Web Programming 58 Lecture 6: Advanced HTML Tag: Type: standalone Function: Places content into a frame.
59
20-753: Fundamentals of Web Programming 59 Lecture 6: Advanced HTML Tag: Syntax:
60
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
61
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
62
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.
63
20-753: Fundamentals of Web Programming 63 Lecture 6: Advanced HTML Tag: Type: container Function: Places a floating frame on the page.
64
20-753: Fundamentals of Web Programming 64 Lecture 6: Advanced HTML Tag: Syntax:...
65
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
66
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.