1 evenzia technologies learning html, xhtml & css chapter 2

1

eVenzia Technologies

Learning HTML, XHTML & CSS

Chapter 2

eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 2

An HTML Document

<html>

<body>

<p>This is my first paragraph</p>

<p>This is my <b>second</b> paragraph</p>

</body>

</html>


HTML Headings

<h1>This is a heading</h1><h2>This is a heading</h2> <h3>This is a heading</h3>

Results

This is a headingThis is a headingThis is a heading


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>


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


Changing the Text Color

<p style=“color: red”>This is a red paragraph</p>

Result:

This is a red paragraph


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.


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


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.


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.


Text Direction <p style=“text-align: center;”>Align Center</p>

ResultsAlign Center

<p style=“text-align: right;”>Align Center</p>

ResultsAlign Right

<p style=“text-align: left;”>Align Center</p>

ResultsAlign Left


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.


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.


HTML Text Formatting<p>

<del>This is a deleted item</del>

</p>

Result

Demo


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].


HTML <sub> and <sup> tags

Examples:

<p>This text contains <sub>subscript</sub> text.</p>

<p>This text contains <sup>superscript</sup> text.</p>

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:

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


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


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


Examples A very basic HTML document HTML paragraphs Headings Line breaks Hidden comments


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>


</tr> </table>


Creating Tables

Results:

row 1, cell 1 row 1, cell 2



Creating Tables - Borders

<table style=“border-top: 1px solid red;”> <tr>


</tr> <tr>


</tr> </table>


Creating Tables

Results:




Tables Background Color

<table style=“background-color: #ffa8c9;”> <tr>


</tr> <tr>


</tr> </table>


Creating Tables

Results:




Aligning Tables

<table align=“center” border=“1”> <tr>


</tr> <tr>


</tr> </table>


Creating Tables

Results:




Tables Height & Width

<table align=“center” border=“1” width=“800” height=“400”> <tr>


</tr> <tr>


</tr> </table>


Tables Colspan & Rowspan

Colspan



</tr> <tr>

<td colspan=“2”>row 2, cell 1</td> </tr>

</table>


Tables – Colspan Example

Results:


row 2, cell 1


Tables Colspan & Rowspan

Rowspan



</tr> <tr>


</table>


Tables – Rowspan Example

Results:


row 2, cell 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>


</table>


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>


</table>


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;”> …


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>

1 evenzia technologies learning html, xhtml & css chapter 2

Documents