Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Published byJohnathan Morgan Modified over 8 years ago

Similar presentations

Presentation on theme: "20-753: Fundamentals of Web Programming 1 Lecture 6: Advanced HTML Fundamentals of Web Programming Lecture 6: Advanced HTML."— Presentation transcript:

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

Download ppt "20-753: Fundamentals of Web Programming 1 Lecture 6: Advanced HTML Fundamentals of Web Programming Lecture 6: Advanced HTML."

Similar presentations

Tables Tables provide a means of organising the layout of data

Tables Tables provide a means of organising the layout of data
Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table Modify Your Tables Appearance Create Page Layouts with.

Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table Modify Your Tables Appearance Create Page Layouts with.
Chapter 3 – Web Design Tables & Page Layout

Chapter 3 – Web Design Tables & Page Layout
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 6: HTML Tables.

Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 6: HTML Tables.
Svetlin Nakov Telerik Corporation www.telerik.com.

Svetlin Nakov Telerik Corporation
Tutorial 4: Designing a Web Page with Tables

Tutorial 4: Designing a Web Page with Tables
Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.

Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.
© 2004, Robert K. Moniot Chapters 4 & 5 Introduction to HTML, More Details.

© 2004, Robert K. Moniot Chapters 4 & 5 Introduction to HTML, More Details.
XP 1 Designing a Web Page with Tables Tutorial 4 Creating a News Page.

XP 1 Designing a Web Page with Tables Tutorial 4 Creating a News Page.
Creating a Web Page with Tables. Objectives Create a text table with preformatted text Create the basic structure of a graphical table Organize table.

Creating a Web Page with Tables. Objectives Create a text table with preformatted text Create the basic structure of a graphical table Organize table.
XP Creating Web Pages with HTML Using Tables. XP Objectives Create a text table Create a table using the,, and tags Create table headers and captions.

XP Creating Web Pages with HTML Using Tables. XP Objectives Create a text table Create a table using the,, and tags Create table headers and captions.
Using HTML Tables.

Using HTML Tables.
The Power of Tables They aren't just for sitting stuff on anymore...

The Power of Tables They aren't just for sitting stuff on anymore...
1 Tables: Data in Rows and Columns – What is Table? – How Tables are Used? – Designing Tables – Table, Cell, Row Attributes – Using Tables for Alignment.

1 Tables: Data in Rows and Columns – What is Table? – How Tables are Used? – Designing Tables – Table, Cell, Row Attributes – Using Tables for Alignment.
HTML: Tables and Forms. Objectives Use tables to structure a webpage Use forms to collect user input –Method:Get, Post –Input –Select –Textarea.

HTML: Tables and Forms. Objectives Use tables to structure a webpage Use forms to collect user input –Method:Get, Post –Input –Select –Textarea.
Session 2 Tables and forms in HTML Adapted by Sophie Peter from original document by Charlie Foulkes.

Session 2 Tables and forms in HTML Adapted by Sophie Peter from original document by Charlie Foulkes.
Svetlin Nakov Telerik Corporation www.telerik.com.

Svetlin Nakov Telerik Corporation
Chapter 6 Working with Frames.

Chapter 6 Working with Frames.
XHTML1 Topics Work with the Frameset Document Type Definition (DTD) Create frames Use the target and base attributes Create nested frames Format frames.

XHTML1 Topics Work with the Frameset Document Type Definition (DTD) Create frames Use the target and base attributes Create nested frames Format frames.
HTML. Creating a Table Attributes: border: indicates the border type of the table Value: 0 (no border), 1, 2, etc. cols: indicates the number of columns.

HTML. Creating a Table Attributes: border: indicates the border type of the table Value: 0 (no border), 1, 2, etc. cols: indicates the number of columns.

Similar presentations

Ads by Google