Putting It Together | Blogging in a Snap (Sams Teach Yourself)

The following code listing uses most of the basic HTML tags described in this appendix. You can match some of the items to the visual display in the figure following the listing.

   1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   2:          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   3:  <html>   4:  <head>   5:  <title>HTML Markup Example</title>   6:  </head>   7:  <body>   8:     9:  <h1>This is a Level 1 Heading</h1>  10:   11: <p>Here is a paragraph of content, followed by a line break. <br/>  12: Accumsan at qui augue quis dolore diam, wisi nulla molestie tation   13: iusto, in nostrud, tation. Facilisis consequat ut delenit feugait   14: ullamcorper eu tincidunt eros.</p>  15:  16: <blockquote>More content, blockquoted. Feugiat feugait vel, laoreet lobortis  17: feugait commodo adipiscing dignissim aliquam in aliquip iriure at ullamcorper.   18: </blockquote>  19:  20: <p>An unordered list:</p>  21: <ul>  22: <li>list item #1</li>  23: <li>list item #2</li>  24: <li>list item #3</li>  25: </ul>  26:  27: <p>An ordered list:</p>  28: <ol>  29: <li>list item #1</li>  30: <li>list item #2</li>  31: <li>list item #3</li>  32: </ol>  33:  34: <p>An example of nested lists:</p>  35: <ul>  36: <li>list item</li>  37: <ol>  38: <li>sub item #1</li>  39: <li>sub item #2</li>  40: <li>sub item #3</li>  41: </ol>  42: </ul>  43:  44: <b>bolded text</b><br/>  45: <i>italicized text</i><br/>  46: <u>underlined text</u><br/>  47: <s>strikethrough</s> text<br/>  48: <tt>typewriter text</tt><br/>  49:  50: <p>Here's a hyperlink:<br/>  51: <a href="http://bloggerinasnap.blogspot.com">visit my blog!</a></p>  52:  53: <p>Here's an image:<br/>  54: <img src="/books/2/863/1/html/2/http://photos2.flickr.com/3623668_0743b16eda_m.jpg"   55: width="180" height="240" alt="petey"/></p>  56:  57: <p>A basic table:</p>  58: <table border="1">  59: <tr>  60:        <td>row 1, cell 1</td>  61:        <td>row 1, cell 2</td>  62:        <td>row 1, cell 3</td>  63: </tr>  64: <tr>  65:        <td>row 2, cell 1</td>  66:        <td>row 2, cell 2</td>  67:        <td>row 2, cell 3</td>  68: </tr>  69: <tr>  70:        <td>row 3, cell 1</td>  71:        <td>row 3, cell 2</td>  72:        <td>row 3, cell 3</td>  73: </tr>  74: </table>  75:  76: <p>A table using rowspan:</p>  77: <table border="1">  78: <tr>  79:        <td rowspan="3">row 1, cell 1</td>  80:        <td>row 1, cell 2</td>  81:        <td>row 1, cell 3</td>  82: </tr>  83: <tr>  84:        <td>row 2, cell 2</td>  85:        <td>row 2, cell 3</td>  86: </tr>  87: <tr>  88:        <td>row 3, cell 2</td>  89:        <td>row 3, cell 3</td>  90: </tr>  91: </table>  92:  93: <p>A table using colspan:</p>  94: <table border="1">  95: <tr>  96:        <td>row 1, cell 1</td>  97:        <td colspan="2">row 1, cell 2</td>  98: </tr>  99: <tr> 100:       <td>row 2, cell 1</td> 101:       <td>row 2, cell 2</td> 102:       <td>row 2, cell 3</td> 103: </tr> 104: <tr> 105:       <td>row 3, cell 1</td> 106:       <td>row 3, cell 2</td> 107:       <td>row 3, cell 3</td> 108: </tr> 109: </table> 110: 111: <p>Display HTML entities:<br/> 112: &lt;a href="http://www.somedomain.com"&gt;Link here!&lt;/a&gt;</p> 113: 114: </body> 115: </html>

Browser display of HTML used in code listing

1.	Level 1 heading. The code in line 9 of the listing produces a level 1 heading.
2.	Paragraph. The code beginning in line 11 of the listing produces the first line of the paragraph. A line break separates the text in lines 1214 of the listing from the opening line of the paragraph.
3.	Blockquoted text. The code in lines 1618 is used to create an indented chunk of text called a blockquote.
4.	Unordered list. The code in lines 2125 is used to create an unordered list with the default bullet indicator before line items.
5.	Ordered list. The code in lines 2832 is used to create an ordered list using standard numbering before line items.
6.	Ordered list nested in an unordered list. The code in lines 3542 displays an ordered list inside an unordered list.
7.	Bold text. The code in line 44 displays as bold.
8.	Italicized text. The code in line 45 displays as italicized.
9.	Underlined text. The code in line 46 displays as underlined.
10.	Text with strikethrough. The code in line 47 displays one portion of the phrase with strikethrough text, one portion with plain text.
11.	Typewriter-formatted text. The code in line 48 displays as if it were typed on a typewriter.
12.	Hyperlink. The code in line 51 is used to create a hyperlink.
13.	Embedded image. The code in lines 5455 embeds an image with a specific height and width.
14.	Three-row, three-column table. The code in lines 5893 displays a table with three columns and three rows, with text in each of the individual cells.
15.	Table using `rowspan` to span three rows. The code in lines 7791 displays a table; the first column spans all three rows, whereas the second and third columns have cells in each of the three rows.
16.	Table using `colspan` to span two columns. The code in lines 92108 displays a table; the second and third cells in the first row appear merged, through the use of the `colspan` attribute.
17.	Literal printing of HTML entities. The code in line 112 displays HTML entities rather than rendering them.