In this session, you will learn to:

Slides:



Advertisements
Similar presentations
Tables Tables provide a means of organising the layout of data
Advertisements

Chapter 3 – Web Design Tables & Page Layout
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 6: HTML Tables.
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
Tutorial 4: Designing a Web Page with Tables
Introducing Web Tables
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.
Tutorial 8 Designing a Web Site with Frames. XP Objectives Explore the uses of frames in a Web site Create a frameset consisting of rows and columns of.
1 Tables: Data in Rows and Columns – What is Table? – How Tables are Used? – Designing Tables – Table, Cell, Row Attributes – Using Tables for Alignment.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 5 - Introduction to XHTML: Part 2 Outline 5.1 Introduction 5.2 Basic XHTML Tables 5.3 Intermediate.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic Table, Forms, Metatags and 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.
INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.
HTML Tables and Forms Creating Web Pages with HTML CIS 133 Web Programming Concepts 1.
1 XHTML Tables A table is a matrix of cells, for displaying content in rows and columns The cells can include almost any element Some cells display row.
CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.
XP 1 Tutorial 5 Using Frames in a Web Site. XP 2 Tutorial Objectives  Describe the uses of frames in a Web site  Lay out frames within a browser window.
Dr. Nuha El-KhaliliInternet Programming ( ) HTML Hyper Text Markup Language The language of web pages Maintained by the W3C
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML Pt. 2.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 5 - Introduction to XHTML: Part 2 Outline 5.1 Introduction 5.2 Basic XHTML Tables 5.3 Intermediate.
Tutorial 8 Designing a Web Site with Frames. XP Objectives Explore the uses of frames in a Web site Create a frameset consisting of rows and columns of.
Designing a Web Page with Tables. A text table: contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Introduction HTML (Hypertext Markup Language) is used to create document on the World Wide Web. HTML is not a programming language, it is a markup language.
Tutorial 8 Designing a Web Site with Frames. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore the uses of frames.
Introducing Web Tables. Tables for tabulating items  Better looking  More flexibility  More efficient to explain information than plain text.
TABLES 1. In this chapter you will learn that tables have many uses in HTML. Objectives: Upon completing this section, you should be able to: 1. Insert.
Lesson 7. Tables Table Tags and Attributes Tables HTML tables are used in two main ways: 1.To organize tabular data in a familiar spreadsheet-like way.
 2003 Prentice Hall, Inc. All rights reserved. Introduction to HTML: Tables Outline 1 Introduction 2 Basic HTML Tables 3 Intermediate HTML Tables and.
CIS234A Lecture 8 Instructor Greg D’Andrea. Review Text Table contains only text, evenly spaced on the Web page in rows and columns uses only standard.
Lecture 6 More Advanced HTML Boriana Koleva Room: C54
CSE 409 – Advanced Internet Technology 1 DISCUSSION OF BASIC HTML TAGS.
Week 9: HTML Tables and Frames HNDIT11062 – Web Development.
20-753: Fundamentals of Web Programming 1 Lecture 6: Advanced HTML Fundamentals of Web Programming Lecture 6: Advanced HTML.
LINKING WEBPAGES USING HTML HYPERLINKS. Hyperlinks are text strings or images on a webpage which when clicked on, links to another section in the same.
Tables creating a table within a web page. What makes up a table? Columns Rows.
1 Chapter 2 - Introduction to HTML: Part 2 Outline Basic HTML Tables Intermediate HTML Tables and FormattingBasic HTML Forms More Complex HTML Forms Internal.
Introduction to XHTML/HTML5 (part 2) Instructor: Sergey Goldman Based on Based on Internet & World Wide Web How To Program (multiple versions) 1.
XHTML Introductory1 Frames Chapter 5. XHTML Introductory2 Objectives In this chapter, you will: Work with the Frameset Document Type Definition (DTD)
In this session, you will learn to:
Yourfriendmanoj.wordpress.com Fb/yourfriendmanoj
Working with Tables: Module A: Table Basics
>> HTML: Tables.
Web Development & Design Foundations with HTML5 8th Edition
Basic XHTML Tables XHTML tables—a frequently used feature that organizes data into rows and columns. Tables are defined with the table element. Table.
The Web Warrior Guide to Web Design Technologies
Tutorial 8 Designing a Web Site with Frames
Chapter 5 Introduction to XHTML: Part 2
Programming the Web using XHTML and JavaScript
Introduction to HTML.
Chapter 7 Tables.
Chapter 5 - Introduction to XHTML: Part 2
H T M L A B E S X P I N D.
HTML and CSS 8th Edition Chapter 18: Tables.
Using HTML Tables SWBAT: - create tables using HTML
TABLES.
Tutorial 8 Designing a Web Site with Frames
HTML Tables & Frames Internet Technology.
HTML Frames
Introduction to HTML.
H T M L A B E S X P I N D.
Site Development Foundations Lesson 6
Principles of Web Design 5th Edition
H T M L A B E S X P I N D.
HTML Tables & Frames Internet Technology.
Basics of Web Design Chapter 9 Table Basics Key Concepts
Presentation transcript:

In this session, you will learn to: Objectives In this session, you will learn to: Create tables Create forms Work with frames

Introducing Tables Tables are used to present data in a tabular format. Tables provide structured information to the end user. Tables consist of rows and columns. The <TABLE> tag is used to create a table.

Introducing Tables (Contd.) The following table describes the basic tags required to create a table. Tags Description <TABLE> Specifies the tag for creating a table. The table tag starts with the <TABLE> tag and ends with a </TABLE> tag. <TH> Specifies the table header. By default, header cells are in bold and are center aligned. A table header starts with the <TH> tag and ends with the </TH> tag. <TR> Specifies the table row. The contents of the row are placed between the <TR></TR> container tags. <TD> Specifies the table data that must be written within the <TD></TD> container tags. The <TD> tags are specified within the <TR> tags. <CAPTION> Specifies the table caption that can be placed above or below the table. The <CAPTION>…</CAPTION> tag should appear inside the <TABLE>…</TABLE> tag. <THEAD> Specifies the table header defined inside the <TABLE> tag. <TBODY> Specifies the contents of a table. <TFOOT> Specifies the table footer defined inside the <TABLE> tag.

Modifying Table Attributes Attributes enable you to specify additional formatting information such as the height, width, and border of the tags. The <TABLE> tag has the following attributes: BORDER BGCOLOR CELLSPACING CELLPADDING WIDTH HEIGHT ALIGN VALIGN

Modifying Table Attributes (Contd.) BORDERCOLOR BACKGROUND FRAME RULES The <TD> tag has the following attributes: COLSPAN ROWSPAN The <COLGROUP> tag has the following attributes: ALIGN VALIGN SPAN The <CAPTION> tag has the following attributes: 5

Demo: Arranging Data by Using Tables Problem Statement: Fun Seasons Corp. is a leading departmental store in New Jersey, United States. The store offers a wide range of products. Recently, the store planned to launch its Web site to showcase its products and services online to attract more customers. Create a Products and Services Web page that displays information such as the Product Code, Product Category, Product Name, Product Price, and Product Description in a tabular format. You need to enhance the table created by using the various table attributes. 6

Demo: Arranging Data by Using Tables (Contd.) Solution: To solve the preceding problem, you need to perform the following tasks: Create a table in a Web page. Populate the table with information. Verify the solution. 7

Creating Forms on a Web Page Forms allow you to create interactive Web pages by providing an interface for exchanging information on the Internet. The <FORM> tag is used to define a form. The <FORM> tag supports the following attributes: NAME ACTION METHOD ENCTYPE

You can add the following types of controls to a form: Types of Form Fields You can add the following types of controls to a form: Text box Radio button Check box Buttons Select lists Text area

Types of Form Fields (Contd.) The <INPUT> Tag: Represents the fields in which the user can edit content. The various attributes of the <INPUT> tag are: TYPE VALUE NAME CHECKED SIZE MAXLENGTH ALIGN SRC

Types of Form Fields (Contd.) The <SELECT> Tag: Is a container tag which allows the user to select one of the options from a drop-down list. The attributes of the <SELECT> tag are: MULTIPLE NAME SIZE The <OPTION> Tag: Occurs within a <SELECT> tag. Represents one choice. Has only two attributes: SELECTED VALUE

Types of Form Fields (Contd.) The <TEXTAREA> Tag: Enables you to create a field in which the user can enter a large amount of text. The <TEXTAREA> tag supports the following attributes: ROWS COLS NAME

Demo: Creating Interactive Web Pages Problem Statement: PlaceMe, Inc. is an upcoming placement consultancy firm based in New York. To increase its database of job seekers, the firm wants to provide a registration form on their Web site, where candidates can enter their personal, educational, and professional details. The form should contain the following fields: Login Details: User Name Password Re-enter Password 13

Demo: Creating Interactive Web Pages (Contd.) Personal Details: First Name Last Name E-mail Gender Phone Number Preferred Job Location: User should be able to select multiple job locations. Professional Details: Experience (in years) Job Category: User should be able to select multiple job categories. Key Skills Educational Details: Degree Held Specialization 14

Demo: Creating Interactive Web Pages (Contd.) The form should also contain buttons to enable a user to submit or reset the values entered in the various fields. The form should have an interface, as shown in the following figure. 15

Demo: Creating Interactive Web Pages (Contd.) Solution: To solve the preceding problem, you need to perform the following tasks: Create a Web form in a Web page. Insert the heading section in the Web form. Insert the LOGIN DETAILS section in the Web form. Insert the PERSONAL DETAILS section in the Web form. Insert the PROFESSIONAL DETAILS section in the Web form. Insert the QUALIFICATIONS section in the Web form. Verify the solution. 16

The layout of a Web page can be made flexible by using frames. Working with Frames The layout of a Web page can be made flexible by using frames. Frames divide the client area into multiple sub regions called frames. The properties of a frame are: It can load its own URL, independent of the other frames. It can be given a name so that other URLs can target it. It can change its size dynamically according to the change in size of the visible client area. The basic structure of a frame document resembles an HTML document, except that the <BODY> tag is replaced by the <FRAMESET> tag.

Working with Frames (Contd.) Using Frame Tags: A FRAME document is generated by: <FRAMESET> Tag <FRAME> Tag The <FRAMESET> Tag: Is the main container tag for the frame. The two attributes of the <FRAMESET> tag are: ROWS COLS

Working with Frames (Contd.) The <FRAME> Tag: Defines one frame in a <FRAMESET> tag. The <FRAME> tag is not a container tag and does not have any matching end tag. The various attributes of the <FRAME> tag are: SRC MARGINWIDTH MARGINHEIGHT SCROLLING NORESIZE FRAMEBORDER FRAMESPACING The<Frame>Tag defines the HTML document that needs to be displayed in each frame. Explain the functioning of various attributes of the <FRAME> tag.

Working with Frames (Contd.) The <NOFRAME> tag is used for creating alternate content that is viewable by nonframe-enabled browsers. You can reference a frame by using the following tags: NAME attribute of the <FRAME> tag TARGET attribute of the <ANCHOR> tag The <BASE> tag

Demo: Creating Frames in a Web Page Problem Statement: LeadTheRoad Inc. is one of the leading international travel and tourism group in the United States. The company provides services to customers at almost 100 locations spread across more than 30 countries. Recently, the company has planned to include a Web page on their Web site that will provide information about the popular chains of hotels in various continents, such as Asia, Europe, Australia, and the United States. The list of the continents should always be visible in the browser window. 21

Demo: Creating Frames in a Web Page (Contd.) Solution: To solve the preceding problem, you need to perform the following tasks: Create a Web page that contains the frames. Create a Web page for the banner frame of the main.html file. Create a Web page for the main frame of the main.html file. Create a Web page for the contents frame of the main.html file. Create a Web page for the Asia continent. Create a Web page for the Africa continent. Create a Web page for the North America continent. Create a Web page for the South America continent. Create a Web page for the Australia continent. Create a Web page for the Europe continent. Verify the solution. 22

In this session, you learned that: Summary In this session, you learned that: Tables are used to display data in a tabular format. The basic tags required to create a table are: <TABLE> <TH> <TR> <TD> <CAPTION> <THEAD> <TBODY> <TFOOT>

Summary (Contd.) The attributes of the <TABLE> tag are: BORDER BGCOLOR CELLSPACING CELLPADDING WIDTH HEIGHT ALIGN VALIGN BORDERCOLOR BORDERCOLORLIGHT BORDERCOLORDARK BACKGROUND FRAME RULES

Summary (Contd.) Forms allow the user to input data on a Web page. Form tags are used to define the contents of a form. The <FORM> tag supports the following attributes: NAME ACTION ENCTYPE METHOD Form elements that can be created in the Web form are: Text box Radio buttons Check box Buttons Select lists Text area

Summary (Contd.) The fields of a Web form are created using the <INPUT>, <SELECT>, <OPTION>, and <TEXTAREA> tags. The layout of the Web pages can be made flexible by using frames. Frames allow the visible client area to be divided into more than one subregion. A <FRAMESET> tag is the main container for the frame. Some attributes of the <FRAMESET> tag are: ROWS COLS

Summary (Contd.) Some attributes of the <FRAME> tag are: MARGINWIDTH MARGINHEIGHT SCROLLING NORESIZE FRAMEBORDER FRAMESPACING The <NOFRAME> tag is used for creating alternate content that is viewable by nonframe-enabled browsers. A frame can be referenced by the: NAME attribute of the <FRAME> tag. TARGET attribute of the <ANCHOR> tag. <BASE> tag.