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