Multimedia and the World Wide Web HCI 201 Lecture Notes #4A.

Slides:



Advertisements
Similar presentations
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.
Advertisements

Internet Basics & Way Beyond!
Multimedia and the World Wide Web HCI 201 Lecture Notes #5A.
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
Chapter 4 – Intermediate HTML 4 Outline 4.1 Unordered Lists 4.2 Nested and Ordered Lists 4.3 Basic HTML Tables 4.4 Intermediate HTML Tables and Formatting.
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.
© 2004, Robert K. Moniot Chapters 4 & 5 Introduction to HTML, More Details.
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
XP 1 New Perspectives on Creating Web Pages with HTML Tutorial 4: Designing a Web Page with Tables.
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.
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.
Multimedia and the World Wide Web HCI 201 Lecture Notes #4B.
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.
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.
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.
Presenting Information on WWW using HTML. Presenting Information on the Web with HTML How Web sites are organized and implemented A brief introduction.
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.
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.
CO1552 – Web Application Development Lists, Special Characters, and Tables.
INTRODUCTION TO HTML5 Styling Text. Change the Font Size  You can use the font-size property to change the font size for a document’s text.  Instead.
Chapter 4: Hypertext Markup Language Primer TECH Prof. Jeff Cheng.
10/4/2015Tables1 Spring, 2008 Modified by Linda Kenney 4/2/08.
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:
CPT 123 Internet Skills Class Notes Publishing to the Web Session B.
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.
Department of Information Technology Chapter 9 – Creating Tables Lecturer: Ms Melinda Chung.
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.
IS1824: Introduction to Internet Multimedia Lecture 5: Layout in HTML Rob Gleasure
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
Introducing Web Tables. Tables for tabulating items  Better looking  More flexibility  More efficient to explain information than plain text.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
Week 5 Working with Tables. 2 Understanding Table Basics.
CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)
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.
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.
Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 5: Working with Tables Kelly L.
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.
Unit 4 Create and Use Tables. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/08/2009 Period : Summary: Reasons for using tables Unit 4 Page 1 Display.
Chapter 5 Working with Tables Principles of Web Design, 4 th Edition.
CSE 409 – Advanced Internet Technology 1 DISCUSSION OF BASIC HTML TAGS.
Formatting Text with HTML. Objectives: Students will be able to: Define the structure of the document with block elements Format numbered, bulleted, and.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
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.
HTML AN INTRODUCTION TO WEB PAGE PROGRAMMING. INTRODUCTION TO HTML With HTML you can create your own Web site. HTML stands for Hyper Text Markup Language.
Designing a Web Page with Tables
Client-Side Internet and Web Programming
Yourfriendmanoj.wordpress.com Fb/yourfriendmanoj
Working with Tables: Module A: Table Basics
LAB Work 02 MBA 61062: E-Commerce
Client-Side Internet and Web Programming
New Perspectives on Creating Web Pages with HTML
Using HTML Tables SWBAT: - create tables using HTML
TABLES.
Presentation transcript:

Multimedia and the World Wide Web HCI 201 Lecture Notes #4A

HCI 201 Notes #4A2 What will we learn today? Unordered list Ordered list Definition list Text table Graphical table Table tags Table attributes

HCI 201 Notes #4A3 Lists Unordered list A collection of related item that have no special order or sequence. Apple Peach Pear - Browser automatically bullet each -tagged item. - Indented from the left margin of the document. - Never omit the end tag.

HCI 201 Notes #4A4 Lists Unordered list Let’s experiment some manipulations: -Q: What happens if we omit the tag? A: We’ll have an indented list without bullets. - Q: Can we change the bullet? A: Yes, we sure can. - Change the type attribute of type=disc | circle | square - Use cascading style sheet (in week #7) - Q: Can we have nested list? A: Yes, and I’ll show you how…

HCI 201 Notes #4A5 Lists Ordered list Use an ordered list when the sequence of items is important. Step 1 Step 2 Step 3 - Never omit, but omitting is Okay in HMTL. - Change the number style with type. (Try “A”, “a”, “1”, “ I ”, “i”) - Set the starting value with start.

HCI 201 Notes #4A6 Lists Change the “type” attribute of ValueGenerated styleSample “A” Capital lettersA, B, C, D, … “a” Lowercase lettersa, b, c, d, … “I” Capital roman numeralsI, II, III, IV, … “i” Lowercase roman numerals i, ii, iii, iv, … “1” Arabic numerals1, 2, 3, 4, … Set the starting value of an ordered list start=# # is an integer, default=1 Subsequent items are incremented by 1, following the same style.

HCI 201 Notes #4A7 Lists Defines an item in a list. Change the style of an individual item (not recommended) ordered item unordered item Change the value of an individual item (ordered list only) Item #1 Item #4 Item #5

HCI 201 Notes #4A8 Lists Definition list A term (marked with ) followed by its definition or explanation (marked with ) Term 1 Definition: blah blah blah Term 2 Definition: yahda yahda yahda - An ideal way to present a glossary, encyclopedia, name-value list. - Never omit, but omit and is OK in HMTL.

HCI 201 Notes #4A9 Lists When to use unordered lists - Hot lists and other link collections - Short, non-sequenced groups of text -Emphasizing the high points of a presentation When to use ordered lists -Tables of contents - Sequential instructions -Sets of sequential sections of text - Assigning numbers to short phrases referenced somewhere else When to use definition lists -Glossaries - Any list of name/value pairs -Custom bullets (make the item an icon-sized bullet image)

HCI 201 Notes #4A10 Case Study 2 Nicole Taylor, an advertising executive, is directing the effort to create web pages for her company. She hopes that the web page can improve the company’s visibility, as well as to show the company’s merchandise. Nicole asks us to create web pages for the Gargoyle Collection. The page should display the product name, item number, description, and price.

HCI 201 Notes #4A11 Text table vs. graphical table Text table (simple, quick, easy to modify) ManufacturerModelPrice City ComputersP500+$2000 Midwest CPU600/Ultra$4500 CMF ComputersP588z$3100 Graphical table (greater control of appearance) ManufacturerModelPrice City ComputersP500+$2000 Midwest CPU600/Ultra$4500 CMF ComputersP588z$3100

HCI 201 Notes #4A12 Text table Choose a fixed-width (typewriter) font A text table relies on spaces and the characters to create its column boundaries.  Arial  Times new roman Courier new With proportional fonts, we cannot control the space between characters Use the tag Using the preformatted text tag, we’re ensured that the columns will keep aligned no matter what font the browser uses. ManufacturerModelPrice City ComputersP500+$

HCI 201 Notes #4A13 When to use it ? - Tables of numbers that must line up correctly. - Computer source code. - To set aside several blank lines. Shall we use Tab in ? - Conveniently stops at every eight character positions. - Tabs are not consistently implemented in different browsers. - Using spaces would be safer. width - Defines the number of characters to fit on a single line. - Does NOT mean the browser will wrap up a line.

HCI 201 Notes #4A14 What can be used in ? - Content-based styles or physical styles. - Entity equivalents for special characters. (<, >, &amp, etc.) What should not be used in ? - Tags that cause a paragraph break. (heading tags,,, etc)

HCI 201 Notes #4A15 Graphical table Defining a table structure Row 1, Col 1 Row 1, Col 2 Row 2, Col 1 Row 2, Col 2 Row 1, Col 1 Row 1, Col 2 Row 2, Col 1 Row 2, Col 2 Let’s create a table for Nicole’s products

HCI 201 Notes #4A16 Table tags - Encapsulates a table and its elements in the document’s body content. - Defines a row in the table. - Defines a data cell in the table. - Defines a header in the table. - Defines a title or caption in the table.

HCI 201 Notes #4A17 Table tags caption text - A brief description of the table content. - Typically placed immediately after tag. - By default, browsers place the caption centered above the table. - To decorate captions (change color, add border, etc.), we will have to use cascading style sheet (week#7) - align=top | bottom - For Internet Explorer valign=top | bottom | middle | baseline align=left | center | right Let’s add a caption for Nicole’s products table.

HCI 201 Notes #4A18 Table tags... - Adds a row into the table. - Every row has the same number of cells as the longest row. (We’ll discuss how to span rows/columns in next class.) - align=left | right | center | justify | char - valign=top | bottom | baseline - char/charoff : line up decimal points for numbers. (the default char is language-based, “.” in English, “,” in French.) - bgcolor : set the background color for the entire row. - nowrap : stops the common word wrapping in all cells in that row.

HCI 201 Notes #4A19 Table tags header text and data content - Stay inside the tag. - Define the content of one cell. You can throw anything in: text, links, images, video clips, forms, even another table. - Two differences between and - Header text is rendered in boldface font. - Header text is aligned centered by default. - Any style defined in or will over write the style defined in. - Add minimum content ( or ) for empty cells.

HCI 201 Notes #4A20 Table attributes bgcolor and background - bgcolor specifies a color for the entire table. - background specifies a background image for the entire table (available only in IE). The image will be - tiled if it is smaller than the table - clipped if it is larger than the table - Background image overwrites the background color

HCI 201 Notes #4A21 Table attributes border, cellspacing, and cellpadding bordercolorlight and bordercolordark

HCI 201 Notes #4A22 Border colors Table attributes Internet Explorer Netscape

HCI 201 Notes #4A23 Table attributes border : default=0 pixel (thickness) Controls which side of the table will have borders: void, box, above, below, lhs, rhs, vsides, hsides Controls how to draw the internal table grids: none, all, rows, cols. cellspacing : default=2 pixels. The space between adjacent cells and outer edges. (around cells) cellpadding : default=1 pixel. The space between the edge of a call and its content. (inside cells)

HCI 201 Notes #4A24 Table attributes width - Default: as wide as needed to display the content - Integer number of pixels or a relative percentage of the screen width - Use relative value to automatically resize the table to the reader’s window screen - Use absolute value for specifically formatted table height - Browser renders the table no shorter than this height, but will make it taller if necessary. NOTE: Always test the appearance of your finished table with different browsers and monitors.

HCI 201 Notes #4A25 Table attributes Nicole wants us to make a few changes: - A thicker border - Increase the space surrounding the text content - Adjust alignment so that caption and headers to be centered Name, Item #, Type, Finish to the left Price to the right - Width for table: 550, for Item#: 60, for Price: Background color for header: black.