eVenzia Technologies

eVenzia Technologies Learning HTML, XHTML & CSS Chapter 2

An HTML Document <html> <body> <p>This is my first paragraph</p> <p>This is my <b>second</b> paragraph</p> </body> </html> eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

HTML Headings <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> Results This is a heading This is a heading This is a heading eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

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

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

Changing the Text Color <p style=“color: red”>This is a red paragraph</p> Result: This is a red paragraph eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

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

HTML Text Formatting • <p><i>This text is italic</i></p>This text is italic • <p><small>This text is small</small></p>This text is small • <p><b>This text is bold</b></p>This text is bold • <p><u>This text is underlined</u></p>This text is underlined eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

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

HTML Text Formatting <abbr title="United Nations">UN</abbr> <acronym title="World Wide Web">WWW</acronym> • 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)

Text Direction • <p style=“text-align: center;”>Align Center</p> Results Align Center • <p style=“text-align: right;”>Align Center</p> Results Align Right • <p style=“text-align: left;”>Align Center</p> Results Align Left eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

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

HTML Quotations <q> This is a short quotation </q> 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)

HTML Text Formatting <p> <del>This is a deleted item</del> </p> Result Demo eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

HTML <sub> and <sup> tags Definition and Usage • The <sub> tag defines subscript text. Subscript text appears half a character below the baseline. Subscript text can be used for chemical formulas, like H2O. • The <sup> 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)

HTML <sub> and <sup> tags Examples: • <p>This text contains <sub>subscript</sub> text.</p> • <p>This text contains <sup>superscript</sup> text.</p> eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

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)

Basic HTML Tags <html> Defines an HTML document <body> Defines the document's body <h1> to <h6> Defines header 1 to header 6 <p> Defines a paragraph <br /> Inserts a single line break <hr> Defines a horizontal rule  Defines a comment eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

Basic HTML Tags <b> Defines bold text <i> Defines italic text <u> Defines underline text <small> Defines a small text <p style=“color: red;”> Defines a red text <p style=“color: #ff0606;”> Defines a red text <p style=“text-align: center;”> Aligns text center <p style=“text-align: right;”> Aligns text right eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

Basic HTML Tags <p style=“text-align: left;”> Aligns text left <blockquote> Defines is a long quotation <q> Defines is a short quotation <del> Defines a deleted item <sub> Defines subscript text <sup> Defines superscript text eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

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

Creating Tables Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> 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. <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

Creating Tables Results: eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

Creating Tables - Borders <table style=“border-top: 1px solid red;”> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

Tables Background Color <table style=“background-color: #ffa8c9;”> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

Aligning Tables <table align=“center” border=“1”> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

Tables Height & Width <table align=“center” border=“1” width=“800” height=“400”> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

Tables Colspan & Rowspan Colspan <table align=“center” border=“1” width=“800” height=“400”> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td colspan=“2”>row 2, cell 1</td> </tr> </table> eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

Tables – Colspan Example Results: eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

Tables Colspan & Rowspan Rowspan <table align=“center” border=“1” width=“800” height=“400”> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td colspan=“2”>row 2, cell 1</td> </tr> </table> eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

Tables – Rowspan Example Results: eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

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

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

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. <table style=“text-align: center;”> … <td align=“center”> … <div style=“text-align: center;”> … eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

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”> <tr> <td valign=“top”>row 1, cell 1</td> <td valign=“bottom”>row 1, cell 2</td> </tr> <tr> <td valign=“middle” colspan=“2”>row 2, cell 1</td> </tr> </table> eVenzia Technologies (XHTML & CSS Training course - Chapter 2)

eVenzia Technologies