1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 2.

Slides:



Advertisements
Similar presentations
Using HTML Tables Presenting Information & Layout Control.
Advertisements

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.
HTML popo.
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
Tutorial 4: Designing a Web Page with Tables
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
Introducing Web Tables
HTML TABLES Cyndi Hageman. Tables   Attributes Name or id – used to identify the table Border = set this to determine if there is a border and the size.
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. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation
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.
Notes Ch. 12—Creating Tables Web Page Design. Why Use Tables? Tables are used to create a variety of items such as calendars, charts, and spreadsheets.
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.
HTML. Goals How to use the Komodo editor HTML coding and testing – List and Images – Tables and Links – At least 2 pages and navigation –
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.
CS105 Introduction to Computer Concepts HTML
XHTML Tables. Tables create little boxes in which you can place things to keep them organized. The little boxes are called table cells. Tables are created.
HTML, Third Edition--Illustrated Introductory 1 HTML, Third Edition Illustrated Introductory Unit F Working with Tables.
INTRODUCTORY Tutorial 7 Creating Tables. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Discern the difference between data tables and.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
Dr. Nuha El-KhaliliInternet Programming ( ) HTML Hyper Text Markup Language The language of web pages Maintained by the W3C
HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –
1 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles are normally stored in Style Sheets  Styles.
CPT 123 Internet Skills Class Notes Publishing to the Web Session B.
HTML B OOT C AMP Chapter 10 Tables Kirkwood Continuing Education © Copyright 2015, Fred McClurg All Rights Reserved.
CS105 INTRODUCTION TO COMPUTER CONCEPTS HTML Instructor: Cuong (Charlie) Pham.
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.
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.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
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.
HTML— More Tags, Formatting, and Lists. Formatting Tags  Bold  Italics  Underline  Big text  Small text  Subscript (H 2 O)  Superscript (10 3 )
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.
Tables Web Authoring. This kind of a table THISIs aTABLE THISIs aTABLE THISIs aTABLE THISIs aTABLE.
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.
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.
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.
CSE 409 – Advanced Internet Technology 1 DISCUSSION OF BASIC HTML TAGS.
WEEK -1 ACM 262 ACM 262 Course Notes. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML.
Creating Tables in a Web Site HTML 4 Created by S. Cox.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Introduction to Web Authoring Ellen Cushman /wra210.htm Class mtg. #2.
©SoftMoore ConsultingSlide 1 Introduction to HTML: Block-Level Elements.
Web111a_chapt04.ppt HTM: Section 4 Tables Table Types Text table elements Easy to use Use fixed-font text (font family monospace) Andale Mono Courier Monaco.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 5.
1 R3 R1 R5 R4 R6 R2 B B A A Looking at the Code Under the View menu Select Source.
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.
1 Mansoor Ahmed Bughio. 2 HTML TABLES With HTML you can create tables. Examples Tables This example demonstrates how to create tables in an HTML document.
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
Working with Tables: Module A: Table Basics
LAB Work 02 MBA 61062: E-Commerce
HTML Tables.
Introduction to HTML.
The Internet 10/25/11 XHTML Tables
Табеле Табеле се представљају елементом TABLE.
TABLES.
H T M L A B E S X P I N D.
Site Development Foundations Lesson 6
Presentation transcript:

1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 2

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 2 An HTML Document This is my first paragraph This is my second paragraph

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 3 HTML Headings This is a heading Results This is a heading

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 4 HTML Paragraphs HTML documents are divided into paragraphs. HTML Paragraphs Paragraphs are defined with the tag. This is a paragraph This is another paragraph

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 5 HTML Line Breaks Use the tag if you want a line break (a new line) without starting a new paragraph Example: This is my first class in HTML & CSS Result: This is my first Class in HTML & CSS

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 6 Changing the Text Color This is a red paragraph Result: This is a red paragraph

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 7 HTML Text Formatting HTML Formatting Tags HTML uses tags like and for formatting output, like bold or italic text. These HTML tags are called formatting tags.

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 8 HTML Text Formatting This text is italic This text is italic This text is small This text is small This text is bold This text is bold This text is underlined This text is underlined

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 9 HTML Text Formatting This is preformatted text. It preserves both spaces and line breaks. Results This is preformatted text. It preserves both spaces and line breaks.

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 10 HTML Text Formatting UN WWW abbreviation A shortened form of a word or phrase used chiefly in writing to represent the complete form; for example, U.K. for United Kingdom. Compare contraction. acronym A word formed from the initial parts of a name, such as NATO, from North Atlantic Treaty Organization.

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 11 Text Direction Align Center Results Align Center Results Align Right Align Center Results Align Left

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 12 HTML Quotations This is a long quotation. This is a long quotation. This is a long quotation. Result: This is a long quotation. This is a long quotation. This is a long quotation.

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 13 HTML Quotations This is a short quotation Result: “This is a short quotation” With the block quote element, the browser inserts line breaks and margins.

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 14 HTML Text Formatting This is a deleted item Result Demo

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 15 HTML and tags Definition and Usage The tag defines subscript text. Subscript text appears half a character below the baseline. Subscript text can be used for chemical formulas, like H2O. The tag defines superscript text. Superscript text appears half a character above the baseline. Superscript text can be used for footnotes, like WWW[1].

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 16 HTML and tags Examples: This text contains subscript text. This text contains superscript text.

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 17 HTML Comments Comments can be inserted in the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. Comments are written like this:

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 18 Basic HTML Tags Defines an HTML document Defines the document's body to Defines header 1 to header 6 Defines a paragraph Inserts a single line break Defines a horizontal rule Defines a comment

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 19 Basic HTML Tags Defines bold text Defines italic text Defines underline text Defines a small text Defines a red text Aligns text center Aligns text right

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 20 Basic HTML Tags Aligns text left Defines is a long quotation Defines is a short quotation Defines a deleted item Defines subscript text Defines superscript text

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 21 Examples A very basic HTML document HTML paragraphs Headings Line breaks Hidden comments

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 22 Creating Tables Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 23 Creating Tables Results: row 1, cell 1row 1, cell 2 row 2, cell 1row 2, cell 2

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 24 Creating Tables - Borders row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 25 Creating Tables Results: row 1, cell 1row 1, cell 2 row 2, cell 1row 2, cell 2

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 26 Tables Background Color row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 27 Creating Tables Results: row 1, cell 1row 1, cell 2 row 2, cell 1row 2, cell 2

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 28 Aligning Tables row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 29 Creating Tables Results: row 1, cell 1row 1, cell 2 row 2, cell 1row 2, cell 2

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 30 Tables Height & Width row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 31 Tables Colspan & Rowspan Colspan row 1, cell 1 row 1, cell 2 row 2, cell 1

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 32 Tables – Colspan Example Results: row 1, cell 1row 1, cell 2 row 2, cell 1

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 33 Tables Colspan & Rowspan Rowspan row 1, cell 1 row 1, cell 2 row 2, cell 1

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 34 Tables – Rowspan Example Results: row 1, cell 1row 1, cell 2 row 2, cell 2

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 35 Tables Cell Spacing & Padding Cellspacing <table align=“center” border=“1” width=“800” height=“400” cellspacing=“10”> row 1, cell 1 row 1, cell 2 row 2, cell 1

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 36 Tables Cell Spacing & Padding Cellpadding <table align=“center” border=“1” width=“800” height=“400” cellpadding=“10”> row 1, cell 1 row 1, cell 2 row 2, cell 1

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 37 Tables – Aligning Text You can set the alignment of any HTML element using the text-align style rule or align rule. text-align can be used to set the alignment for a paragraph, a section of the document, or even the whole document. text-align can be used to set alignment to left, right, center, or justified. …

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 38 Tables – Aligning Text VALIGN sets the vertical alignment of the row. VALIGN can be set to TOP, MIDDLE, BOTTOM <table align=“center” border=“1” width=“800” height=“400” cellpadding=“10”> row 1, cell 1 row 1, cell 2 row 2, cell 1