Presentation is loading. Please wait.

Presentation is loading. Please wait.

More HTML: Tables etc. CSC 102 Lecture 6.

Published byAlicia Edwards Modified over 6 years ago

Similar presentations

Presentation on theme: "More HTML: Tables etc. CSC 102 Lecture 6."— Presentation transcript:

1 More HTML: Tables etc. CSC 102 Lecture 6

2 HTML: Review Browser interprets HTML to display page
Web pages written in HTML HTML = ordinary text + markup tags Tags use angle brackets: <> Specifies metainformation: structure, roles, etc. Browser interprets HTML to display page <html> <head> <title>Appears in Menu Bar</title> </head> <body> <p>This is the content.</p> </body> </html>

3 Escape Codes What if you want to display angle brackets?
Browser can’t tell difference from a tag Need system for “special” characters Web is World-Wide – non-Latin alphabets? Solution: escape codes Code Symbol < € € é é > ö ö & & ñ ñ î î

4 HTML Lists One tag surrounds the entire list
Other tags surround items in the list Three types of lists: ordered, unordered, definition <ol> <li>First</li> <li>Second</li> <li>Third</li> </ol> <ul> <li>Point</li> </ul> <dl> <dt>Topic</dt> <dd>Description</dd> <dt>Description</dt> </dl>

5 HTML Tables Tables have many uses: Data presentation
Page layout (now obsolete) Special effects

6 Table Tags & Organization
Table is nested boxes <table> on outside Rows & caption within <tr> <caption> Data & header cells innermost <td> <th> Optional groupings <thead>, <tbody>, <tfoot> Same # columns each row

7 Table Tags & Organization
<table> <tr><th></th><th></th><th></th></tr> <tr><td></td><td></td><td></td></tr> <caption></caption> </table>

8 Combining Cells Cells may span multiple rows or columns May do both
<th rowspan="2"> <td colspan="2"> May do both Only describe first item in merged group First & third rows in example would list just two cells each colspan="2" rowspan="2"

9 Combining Cells Cell deleted here <table> <tr><th></th> <th colspan="2"></th></tr> <tr><td rowspan="2"> </td><td></td><td></td> </tr> <tr><td></td><td></td><td></td></tr> <tr><td></td><td></td></tr> <caption></caption> </table> colspan="2" rowspan="2" Cell deleted here

10 Full list of table properties
Styles for Table Cells You can set the background color <td style="background-color: red;"> You can set the height and width <td style="height:4in; width:2in;"> You can adjust the borders <table style="border-collapse: collapse; padding:0"> <td style="border:1px solid black"> You can set the alignment within the cell <td style="text-align: center; valign: top;"> A Full list of table properties

11 Color & HTML HTML style rules recognize many color names
17 original names added later Can also mix your own from red, green, blue Amount from of each, given in hexadecimal Format: #ABCDEF Use color picker if you like. Red Blue Green

12 Images Images are just grids of colored squares: pixels
One byte per pixel (grayscale) or 3B per pixel (color) Transparency adds extra bit or byte per pixel Many file formats store image pixel data Q. Which is better? A. Depends on the application!

13 Image File Formats File Format Compr- ession Colors Trans- parency
Notes Web Usage JPEG (Joint Photographic Expert Group) Lossy Good 2563 (all) None Best for natural images Photos PNG (Portable Network Graphics) Exact Full (256b) Best transparency Logos/ Icons GIF (Graphics Interchange Format) LZW Medium 256 (limited) Some (1b) Supports simple animation Anim-ations BMP (Bitmap) Windows only High bandwidth No RAW (Raw camera image) Specialized uses TIFF (Tagged Image File Format) Varies Not well supported

14 Images & Copyright Rule: Assume that all content has a copyright attached, unless explicitly noted otherwise Licenses: Public domain: pre-1923 or released by author; creations of U.S. government Copyleft/Creative Commons: permissive licenses; read the terms! Wikimedia is a source. Fair use: some uses of copyrighted material limited/noncommercial (commentary, parody,educ.) cannot deprive owner of revenue only court-tested for written material

15 Photo Editing Some images need alterations before use
Need photo editing application Choices: Photoshop, Paint, Paint.Net, GIMP, etc. Things you can do: Lower resolution (#pixels)  faster downloads Lighten or darken image Crop unwanted areas Transparent background

16 HTML Escape Codes & Lists HTML Tables Image Editing
Lab Activities HTML Escape Codes & Lists HTML Tables Image Editing

Download ppt "More HTML: Tables etc. CSC 102 Lecture 6."

Similar presentations

Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything Text Lists Other tables Pictures …

Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything Text Lists Other tables Pictures …
Creating Tables Text Tables -created by using preformatted tags. Graphical Tables - created using Table Structure with HTML.

Creating Tables Text Tables -created by using preformatted tags. Graphical Tables - created using Table Structure with HTML.
Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.

Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.
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.

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

Tutorial 4: Designing a Web Page with Tables
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.
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.

 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Using HTML Tables.

Using HTML Tables.
Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative.

Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative.
XP 1 Tutorial 4 Designing a Web Page with Tables.

XP 1 Tutorial 4 Designing a Web Page 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.

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.
WEB GRAPHICS. The Pixel Computer displays are comprised of rows and columns of pixels. Pixels are indivisible. Some common screen resolutions are:, 600.

WEB GRAPHICS. The Pixel Computer displays are comprised of rows and columns of pixels. Pixels are indivisible. Some common screen resolutions are:, 600.
Chapter 4 Fluency with Information Technology L. Snyder Marking Up With HTML: A Hypertext Markup Language Primer.

Chapter 4 Fluency with Information Technology L. Snyder Marking Up With HTML: A Hypertext Markup Language Primer.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.

Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Fluency with Information Technology Third Edition by Lawrence Snyder Chapter.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc. 2013. All Rights Reserved.

Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The.

Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The.
1 Basic HTML. 2 Part 1: Basic Web Page Production.

1 Basic HTML. 2 Part 1: Basic Web Page Production.
HTML 4 Foundation Level Course HyperText Markup Language Most common language used in creating Web documents. You can use HTML to create cross-platform.

HTML 4 Foundation Level Course HyperText Markup Language Most common language used in creating Web documents. You can use HTML to create cross-platform.
>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.

>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.

Similar presentations

Ads by Google