© 2004, Robert K. Moniot Chapters 4 & 5 Introduction to HTML, More Details.

Slides:



Advertisements
Similar presentations
Copyright © 2003 Pearson Education, Inc. Slide 5-1 Created by Cheryl M. Hughes The Web Wizards Guide to XML by Cheryl M. Hughes.
Advertisements

LIS650 lecture 3 Minor HTML Information Architecture Thomas Krichel
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.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 6: HTML Tables.
Creating Tables in a Web Site
Internet Basics & Way Beyond!
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
© 2010, Robert K. Moniot Chapter 4 Introduction to XHTML 1.
Creating Tables Text Tables -created by using preformatted tags. Graphical Tables - created using Table Structure with HTML.
New Perspectives on Creating Web Pages with HTML
Tutorial 4: Designing a Web Page with Tables
Cos 125 Day 22. Agenda Assignment 6 Not corrected Waiting for tune-ins Assignment 7 is posted Assignment 7 Due April 2PM Left to do 1 Assignments.
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
XP 1 Designing a Web Page with Tables Tutorial 4 Creating a News Page.
Cos 125 Day 24. Agenda All students meeting 7 Pm Monday, April 19 UMS Strategic Plan Assignment #7 Posted Due April 20 Two (one?) more to go Quiz Four.
Creating a Web Page with Tables. Objectives Create a text table with preformatted text Create the basic structure of a graphical table Organize table.
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.
Using HTML Tables.
1 Tables: Data in Rows and Columns – What is Table? – How Tables are Used? – Designing Tables – Table, Cell, Row Attributes – Using Tables for Alignment.
Tables And Lists. Slide 2 Lecture Overview Learn about the basics of tables Create simple 2-dimensional tables Format tables Create tables with complex.
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 Essentials Tables and Table Tags. Overview Use of Tables goes beyond tabulating data Frequently used to format Web pages / control layout Especially.
Chapter 5 Working with Tables. Agenda Add a Table Assign a Table Border Adjust Cell Padding and Spacing Adjust Cell Width and Height Add Column Labels.
XP 1 Tutorial 4 Designing a Web Page with Tables.
XHTML1 Tables N100 Creating a Simple Web Page. XHTML2 Creating Basic Tables Tables are collections of rows and columns that you use to organize and display.
Identifies the Structure Table Row Column 1 Table Heading Column 2.
CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorial 5: Working with Tables.
1 The Structure of a Web Table beginning of the table structure first row of three in the table end of the table structure table cells You do not need.
Updated on: September 4, 2010 CIS67 Foundations for Creating Web Pages Professor Al Fichera.
CHAPTER 11 Tables. How Are Tables Used Data Display  Very tidy and very useful Better Text Alignment  Putting text in tables allows you to format indents.
HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.
Tutorial 5 Working with Web Tables. XP Objectives Explore the structure of a Web table Create headings and cells in a table Create cells that span multiple.
Tables Learning Web Design: Chapter 8. Overview of Tables Uses for tables How to create a table Using CSS to style a table Nested tables Advanced table.
Lecture: Tables. Table Tags (all container tags) establishes a table (________) establishes a row (________) says what’s in the row more than one TD within.
CNIT 132 – Week 7 HTML - Tables. Tables on the World Wide Web A table can be displayed on a Web page either in a text or graphical format. A text table:
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.
Tutorial 5 Working with Tables and Columns
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Department of Information Technology Chapter 9 – Creating Tables Lecturer: Ms Melinda Chung.
Tutorial 5 Working with Tables and Columns
XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 1 New Perspectives on Creating Web Pages with HTML Tutorial 4: Designing a.
XHTML 1.1  Derived from Standard Generalized Markup Language (SGML) of ISO  XHTML concerned primary with content rather than presentation and style 
HTML: Tables & Frames Internet Technology.
Introducing Web Tables. Tables for tabulating items  Better looking  More flexibility  More efficient to explain information than plain text.
WDMD 170 – UW Stevens Point 1 WDMD 170 Internet Languages eLesson: HTML/XHTML Tables (NON-audio version) © Dr. David C. Gibbs
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.
ECA 228 Internet/Intranet Design I Tables. ECA 228 Internet/Intranet Design I Basic HTML Tables Created as a way to present rows and clumns of data.
CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.
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.
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.
HTML Tables The HTML table model allows authors to arrange data - text, preformatted text, images, links, forms, form fields, other tables, etc. - into.
Lecture 6 More Advanced HTML Boriana Koleva Room: C54
20-753: Fundamentals of Web Programming 1 Lecture 6: Advanced HTML Fundamentals of Web Programming Lecture 6: Advanced HTML.
COS 125 DAY 14. Agenda  Assignment 6 DUE  Assignment 7 Posted Due March 9:35 AM  Quiz 2 will be on March 30 Chapters M/C and 4 Short.
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.
©SoftMoore ConsultingSlide 1 Introduction to HTML: Block-Level Elements.
Tutorial 5 Working with Web Tables. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Learn and Apply the structure of.
CIS101 Introduction to Computing Week 07 Spring 2004.
Designing a Web Page with Tables
Yourfriendmanoj.wordpress.com Fb/yourfriendmanoj
Working with Tables: Module A: Table Basics
LAB Work 02 MBA 61062: E-Commerce
HTML Tables.
Tutorial 5 Working with Tables and Columns
Табеле Табеле се представљају елементом TABLE.
Using HTML Tables SWBAT: - create tables using HTML
Lesson 5: HTML Tables.
Presentation transcript:

© 2004, Robert K. Moniot Chapters 4 & 5 Introduction to HTML, More Details

© 2004, Robert K. Moniot Anchors The tag can be used to create an anchor, a marked location in a document. The anchor is given a name using the name attribute. A link can refer to this named location using the # character in the URL. Clicking on the link jumps to the marked location rather than to the head of the referenced document. Example: Create anchor with Section 1. Reference anchor with See Section 1.

© 2004, Robert K. Moniot Anchors The URL referring to an anchor located in the same document can omit everything except the # and the anchor name. Or, the URL can be a relative or absolute URL with the #anchorname at the end. Example: See Section 1 of the paper. Example

© 2004, Robert K. Moniot Tables The W3C says: “Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.” Be aware that not all your visitors will use the same hardware or software to view the page.

© 2004, Robert K. Moniot Table attributes summary="text" – provides a description of the table's purpose and structure for non-visual agents (e.g. speech) width="length" – specifies width of table. Length can be a percentage of the width of the window, or an absolute length in pixels. frame="spec" – specifies which part of frame around table is visible. Spec can be any of: void above below hsides vsides lhs rhs box border

© 2004, Robert K. Moniot Table attributes, cont'd border="pixels" – specifies width of frame drawn around table. Setting it to 0 suppresses the frame. rules="spec" – specifies placement of rules between cells. Spec can be one of: none groups rows cols all Alas, this seems to be ignored by Navigator 4. cellspacing ="pixels" – specifies spacing between cells (above, below, and to either side) cellpadding ="space" – specifies spacing between the boundary of a cell and its contents. Here space can either be a number in pixels, or a percentage of the cell size.

© 2004, Robert K. Moniot Elements within Table Caption: specifies a caption to appear with the table. –Allows an optional attribute align to specify where the caption appears relative to the table. The align position can be one of: top bottom left right This is the caption

© 2004, Robert K. Moniot Cells that Span Rows, Columns A single cell can span multiple columns or multiple rows. This is achieved using the rowspan and colspan attributes of the or element. Example: This cell spans two columns Example: This cell spans two rows You can also use the nowrap attribute to control automatic wrapping of text within a cell. Normally wrapping is good in order to prevent a cell from becoming too wide.

© 2004, Robert K. Moniot Elements within Tables Row groups: these allow you to structure portions of the table into head, body, and foot.... encloses rows in head of table.... encloses rows in foot of table.... encloses rows in body of table. –Note that must come before so that the browser can scroll the body independently of head and foot, or repeat head and foot on multi-page printout. –Multiple elements are allowed, in order to divide the body into groups of rows. The browser may put extra space or other indication of the separation between these groups. –The closing tags are optional.

© 2004, Robert K. Moniot Elements within Tables Column groups: these allow you to specify width and alignment of columns in the table. Form:... alignment is one of: left center right justify vert-alignment is one of: top middle bottom baseline width can be a number of pixels or a percentage of the table width cols is the number of columns sharing the same attributes Example