1 evenzia technologies learning html, xhtml & css chapter 2
Post on 29-Dec-2015
228 Views
Preview:
TRANSCRIPT
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>
eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 3
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
eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 4
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) 5
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) 6
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) 7
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) 8
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) 9
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) 10
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) 11
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
eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 12
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) 13
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) 14
HTML Text Formatting<p>
<del>This is a deleted item</del>
</p>
Result
Demo
eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 15
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) 16
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) 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:
<!-- This is a comment -->
eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 18
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
<!-- My Comments here --> Defines a comment
eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 19
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) 20
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) 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 <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) 23
Creating Tables
Results:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 24
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) 25
Creating Tables
Results:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 26
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) 27
Creating Tables
Results:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 28
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) 29
Creating Tables
Results:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 30
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) 31
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) 32
Tables – Colspan Example
Results:
row 1, cell 1 row 1, cell 2
row 2, cell 1
eVenzia Technologies (XHTML & CSS Training course - Chapter 2) 33
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) 34
Tables – Rowspan Example
Results:
row 1, cell 1 row 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”>
<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) 36
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) 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.
<table style=“text-align: center;”> …<td align=“center”> …<div style=“text-align: center;”> …
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”>
<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>
top related