Presentation is loading. Please wait.

Presentation is loading. Please wait.

. 1 Introduction to HTML Part 2 Outline 4.1 Introduction 4.2 Basic HTML Tables 4.3 Intermediate HTML Tables and Formatting 4.4 Basic HTML Forms 4.5 More.

Similar presentations


Presentation on theme: ". 1 Introduction to HTML Part 2 Outline 4.1 Introduction 4.2 Basic HTML Tables 4.3 Intermediate HTML Tables and Formatting 4.4 Basic HTML Forms 4.5 More."— Presentation transcript:

1 . 1 Introduction to HTML Part 2 Outline 4.1 Introduction 4.2 Basic HTML Tables 4.3 Intermediate HTML Tables and Formatting 4.4 Basic HTML Forms 4.5 More Complex HTML Forms 4.6 Internal Linking 4.7 meta Elements 4.8 frameset Element 4.9 Nested frameset s 4.10 Web Resources

2 . 2 Objectives To be able to create tables with rows and columns of data. To be able to control table formatting. To be able to create and use forms. To be able to create and use image maps to aid in Web- page navigation. To be able to make Web pages accessible to search engines using meta elements. To be able to use the frameset element to display multiple Web pages in a single browser window.

3 Introduction Tables: present information Forms: collect information from visitor Internal linking and image maps: Enhance Web page navigation Frames: display multiple documents in the browser

4 Basic HTML Tables Organize data into rows and columns table element: AttributesDescription border specifies the tables border width in pixels summary describes the tables contents Caption (sub element) describes the tables content and helps text- based browsers interpret table data

5 . 5 Head section (header cell, defined with a thead element) Contains header information such as column names Foot section (defined with a tfoot element) Table body (defined with a tbody element) Data cells (defined with td element) Sub-elements (for thead & tfoot)Description trindividual table row thcolumns in the head section

6 . 6 Example1: HTML Table: table1.html

Price of Fruit Fruit Price Total $3.75
Price of">

7 . 7 Apple $0.25 Orange $0.50 Banana $1.00 Pineapple $2.00

8 Intermediate HTML Tables &Formatting Element colgroup: g roups and formats columns Element col: tr and th attributes: attributesDescription aligndetermines the alignment of text in the column span d etermines how many columns the col element formats attributesDescription rowspan,colspan specify the number of rows or columns occupied by a cell valign = top = middle = bottom = baseline a ligns data vertically

9 . 9 Example2: Complex HTML table: table2.html Picture of a camel Camelid comparison Approximate as of 9/2002 merge two rows merge four columns

10 . 10 # of Humps Indigenous region Spits? Produces Wool? Camels (bactrian) 2 Africa/Asia Yes Llamas 1 Andes Mountains Yes

11 Basic HTML Forms Element form: Sub-element: input AttributesDescription method method = post method = get s pecifies how the forms data is sent to Web server Appends form data to the browser request Appends form data directly to the end of the URL actionSpecifies the URL of a script on the Web server

12 . 12 Sub-Element input: AttributesDescription type type = hidden type = text type = submit type = reset Type of forms input hidden input passed to server-side script Textbox with specific size Submit button Reset button nameName passed to server-side script as parameter valueVisible name on the form

13 . 13 Name: Example3: Form design: form.html

14 More Complex HTML Forms Sub-Element textarea: Inserts a multiline text box (text area) Sub-Element input: AttributesDescription rowsSpecifies the number of rows colsSpecifies the number columns AttributesDescription type type = password type = checkbox type = radio Type of forms input Password box with specific size Enable users to select from a set of options Radio button

15 . 15 Sub-Element select: Drop down list Contains element option: Sub-Element option: Adds items to the drop-down list AttributesDescription selectedSpecifies which item initially is displayed as the selected item

16 . 16 Example 4: Form with text areas, a password box and checkboxes: form2.html Comments: Enter your comments here. Address:

17 . 17 Things you liked: Site design Links Ease of use Images Source code

18 . 18 Example 5: Form including radio buttons and a drop-down list: form3.html

19 . 19 How did you get to our site?: Search engine Links from another site Deitel.com Web site Reference in a book Other

20 . 20 Rate our site: Amazing Awful

21 Internal Linking Enables the user to jump between locations in the same document Use anchor attribute: href = #section name

22 . 22 Example 6: Internal hyperlinks: links.html The Best Features of the Internet Go to Favorite Bugs You can meet people from countries around the world. It is the technology of the future! My 3 Favorite Bugs Go to Favorite Features Fire Fly Gal Ant Roman Tic id attribute creates an internal hyperlink destination an internal links address is #id

23 meta Elements Specify information about a document AttributesDescription name name = keywords name = description Identifies the type of meta element Provides search engines with a list of words that describe a page Provides a description of a site contentProvides the information search engine use to catalog pages

24 . 24 Example 7: meta tags provide keywords and a description: main.html Internet and WWW How to Program - Welcome tags provide search engines with information used to catalog a site

25 frameset Element Allow browser display more than one document simultaneously Element: frameset Sub-Element: frame Specifies the documents that will be loaded Attribute src: s pecifies URL of the page to display AttributesDescription cols Specifies the framesets column layout rowsSpecifies the number of rows and the size of each row

26 . 26

27 . 27 Example 8: XHTML frames document with navigation and content: index.html This page uses frames, but your browser does not support them. Please, follow this link to browse our site without frames. frame elements specify which pages are loaded into a given frame

28 Nested framesets frameset s within frameset s

29 . 29 Example 9: Framed web site with a nested frameset: index2.html This page uses frames, but your browser does not support them. nested framesets are used to change the formatting and layout of the frameset

30 Web Resources


Download ppt ". 1 Introduction to HTML Part 2 Outline 4.1 Introduction 4.2 Basic HTML Tables 4.3 Intermediate HTML Tables and Formatting 4.4 Basic HTML Forms 4.5 More."

Similar presentations


Ads by Google