Class7-html

Headings in a Table

Headings in a table are defined with the <th> tag.

<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <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>

How it looks in a browser:

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

---

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

<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></td> </tr> </table>

How it looks in a browser:

row 1, cell 1	row 1, cell 2
row 2, cell 1

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).

To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible: 

<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>&nbsp;</td> </tr> </table>

How it looks in a browser:

row 1, cell 1	row 1, cell 2
row 2, cell 1

Table Tags

Tag	Description
<table>	Defines a table
<th>	Defines a table header
<tr>	Defines a table row
<td>	Defines a table cell
<caption>	Defines a table caption
<colgroup>	Defines groups of table columns
<col>	Defines the attribute values for one or more columns in a table
<thead>	Defines a table head
<tbody>	Defines a table body
<tfoot>	Defines a table footer

Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small black circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul> <li>Coffee</li> <li>Milk</li> </ul>

Here is how it looks in a browser:

• Coffee
• Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

---

Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol> <li>Coffee</li> <li>Milk</li> </ol>

Here is how it looks in a browser:

1. Coffee
2. Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

---

Class 6 -html

HTML uses the <a> (anchor) tag to create a link to another document:

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

The Frame Tag

·       The <frame> tag defines what HTML document to put into each frame

In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column:

<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>

Frame Tags

Tag	Description
<frame />	Defines a window (a frame) in a frameset
<frameset>	Defines a set of frames
<noframes>	Defines an alternate content for users that do not support frames
<iframe>	Defines an inline frame

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>

How it looks in a browser:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

---

Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to use the border attribute:

<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>

---

 

html (Class 5)

Paragraphs

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p> <p>This is another paragraph</p>

Line Breaks

The <br> tag is used when you want to break a line, but don't want to start a new

paragraph. The <br> tag forces a line break wherever you place it.

<p>This <br> is a para<br>graph with line breaks</p>

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment

will be ignored by the browser. You can use comments to explain your code, which

can help you when you edit the source code at a later date.

<!-- This is a comment -->

Examples

Text formatting

This example demonstrates how you can format text in an HTML document.

Program 1:

<html> <body> <b>This text is bold</b> <br> <strong> This text is strong </strong> <br> <big> This text is big </big> <br> <em> This text is emphasized </em> <br> <i> This text is italic </i> <br> <small> This text is small </small> <br> This text contains <sub> subscript </sub> <br> This text contains <sup> superscript </sup> </body> </html>

Text Formatting Tags

Tag	Description
<acronym>	Defines an acronym
<abbr>	Defines an abbreviation
<address>	Defines contact information for the author/owner of a document
<b>	Defines bold text
<bdo>	Defines the text direction
<big>	Defines big text
<blockquote>	Defines a long quotation
<center>	Deprecated. Defines centered text
<cite>	Defines a citation
<code>	Defines computer code text
<del>	Defines deleted text
<dfn>	Defines a definition term
<em>	Defines emphasized text
<font>	Deprecated. Defines font, color, and size for text
<i>	Defines italic text
<ins>	Defines inserted text
<kbd>	Defines keyboard text
<pre>	Defines preformatted text
<q>	Defines a short quotation
<s>	Deprecated. Defines strikethrough text
<samp>	Defines sample computer code
<small>	Defines small text
<strike>	Deprecated. Defines strikethrough text
<strong>	Defines strong text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<tt>	Defines teletype text
<u>	Deprecated. Defines underlined text
<var>	Defines a variable part of a text
<xmp>	Deprecated. Defines preformatted text
<head>	Defines information about the document
<title>	Defines the document title
<meta>	Defines metadata about an HTML document
<base />	Defines a default address or a default target for all links on a page
<basefont />	Deprecated. Defines a default font, color, or size for the text in a page