Tags
 |
Describing ContentMany
HTML tags are used to describe content - for instance, to identify a
paragraph or a headline. The distinct parts of a document are known
as block elements. When a browser sees a block element, it
automatically inserts a line break and adds a little space above and
below the element. You cannot start paragraph text on the same line
as a heading; it will always start as a new "block" of text. This
section will cover some of the basic block elements: paragraphs,
headings, lists, tables, and divisions. There are others
(quotations, preformatted text, and rules) but these will not be
covered here.
Block Elements
-
Paragraphs <p>......</p>
The simplest way to break up text is with paragraphs. Paragraphs
display in the browser's default font with extra space above and
below. Browsers will not recognize a string of <p></p> tags, so you
can't use empty paragraphs to add extra space between elements the
way you can in a word processing program. There is a way to get
around this though, by adding the special character for an empty
space ( ) between the opening and closing tags.
- Line Breaks <br>......</br>
Line breaks are not technically a block element, but are useful to point out here.
If you want to break a line of text but not add extra space
around it, you can insert a <br> tag within a paragraph or block
element. The <br> tag works as a single carriage return.
- Headings <h#>......</h#>
Headings are used to provide logical structure to a
document. The first level heading is displayed at the largest
heading size, and the consecutive levels get smaller and
smaller.
- Lists:
Ordered Lists (numbered) <ol><li>......</li></ol>
The <ol> tag identifies the entire list as "ordered".
Each item within the list is then indicated with an <li> (list
item) tag.
Unordered Lists (bulleted) <ul><li>.....</li></ul>
Use the <ul> tag to make a bulleted list. The browser
automatically adds bullets and sets the items on an indent.
Definition Lists (Dictionary) <dl><dt><dl>.....</dl></dt></dl>
These lists are used for displaying lists of words with
blocks of descriptive text. The <dl> and </dl> tags are used to
mark the beginning and end of the entire list. Within the list,
each word (term) is marked with the <dt> tag, and it's
definition is marked with the <dd> tag.
Inline Styles
- Italic text <i>.....</i> (physical)
- Emphasized text <em>.....</em> (logical)
These tags make the enclosed text italic.
- Bold text <b>.....</b> (physical)
- Strong text <strong>.....</strong> (logical)
These tags make the enclosed text bold.
The Font Tag
The <font> tag is an inline style tag that uses attributes to
control the type-face, size, and color of text. It is not without
problems though and is being deprecated in XHTML in favor or style
sheets (which we'll discuss later). Because of its past popularity
and widespread use in Web authoring tools its use is likely to
continue for many years to come.
 Practice using tags to define the content in your Web page
Inline Images <img src="filename or URL">
This is the basic tag that tells the browser, "Place a
graphic here." The src
attribute (short for "source") is required because it tells the
browser which graphic to use. The value of the src
attribute is the URL of the graphic. If the graphic file is in the
same directory as the HTML file, you can just use it's file name.
The image tag is placed in the flow of the HTML text at the point
you want the graphic to appear.
 See
an example of the <img> tag
Once this window opens in your browser, choose "view" then "source"
to see the source code used to create this page.
Tables
Tables in Web pages have many uses:
- Data display
- Better text alignment
- Overall page structure
- Holding together sliced images
Basic Table Structure
<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> |
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
row 2, cell 2 |
|
|
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. |
How it looks in a browser.
A data cell can contain text, images, lists, paragraphs,
forms, horizontal rules, tables, etc. |
If you do not specify a border attribute the table
will be displayed without any borders.
<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> |
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
|
|
|
Table cells with no content are not
displayed very well in most browsers. |
How it looks in a browser. Note that the
borders around the empty table cell are missing.
|
To avoid display errors, add a non-breaking space ( )
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> </td>
</tr>
</table> |
| row 1, cell 1 |
row 1, cell 2 |
| row 2, cell 1 |
|
|
|
To avoid this, add a non-breaking space ( )
to empty data cells, to make the borders visible. |
How it looks in a browser. |
 Test
Yourself
|
