File indexing completed on 2024-12-22 03:46:44

0001 <html>
0002 <h1>Easy stuff</h1>
0003 <h2>One format</h2>
0004 <p>A <b>bold</b> part.
0005 </p>
0006 <p>An <i>italic</i> part.
0007 </p>
0008 <p>An <u>underlined</u> part.
0009 </p>
0010 <p>A <s>striked out</s> part.
0011 </p>
0012 
0013 <p><span style="color:blue;">the color blue</span>.</p>
0014 
0015 <p><span style="background-color:red;">the backbround color red</span>.</p>
0016 
0017 <p><span style="font-family:courier;">the courier font</span>.</p>
0018 
0019 <p><span style="font-size:xx-large;">Very large text</span>
0020 
0021 <h2>Two formats</h2>
0022 <p>A <b><i>bold/italic</i></b> part.
0023 </p>
0024 <p>A <b><u>bold/underlined</u></b> part.
0025 </p>
0026 <p>An <u><s>underlined/striked</s></u> part.
0027 </p>
0028 <p>A <s><b>Bold/striked out</b></s> part.
0029 </p>
0030 
0031 <h2>Two formats at edges</h2>
0032 <p><b><i>A bold/italic</i></b> part.
0033 </p>
0034 <p>A bold/underlined <b><u>part.</u></b>
0035 </p>
0036 
0037 <h2>Format boundaries</h2>
0038 <p>An adjacent <b>bold</b><u>underlined</u> part.
0039 </p>
0040 <p>An overlapping <b>bold <u>and </u></b><u>underlined</u> part.
0041 </p>
0042 <p>Bold inside <u>un<b>derl</b>ined</u> part.
0043 </p>
0044 
0045 <h2>Lists</h2>
0046 <h3>Unordered lists</h3>
0047 Disc:
0048 <ul>
0049 <li>this</li>
0050 <li>that</li>
0051 <li>these</li>
0052 <li>those</li>
0053 </ul>
0054 
0055 Circle:
0056 <ul style="list-style-type: circle;">
0057 <li>this</li>
0058 <li>that</li>
0059 <li>these</li>
0060 <li>those</li>
0061 </ul>
0062 
0063 Square:
0064 <ul style="list-style-type: square;">
0065 <li>this</li>
0066 <li>that</li>
0067 <li>these</li>
0068 <li>those</li>
0069 </ul>
0070 
0071 <h3>Ordered lists</h3>
0072 
0073 Decimal:
0074 <ol style="list-style-type: decimal;">
0075 <li>this</li>
0076 <li>that</li>
0077 <li>these</li>
0078 <li>those</li>
0079 </ol>
0080 
0081 Alpha lowercase:
0082 <ol style="list-style-type: lower-alpha;">
0083 <li>this</li>
0084 <li>that</li>
0085 <li>these</li>
0086 <li>those</li>
0087 </ol>
0088 
0089 Alpha uppercase:
0090 <ol style="list-style-type: upper-alpha;">
0091 <li>this</li>
0092 <li>that</li>
0093 <li>these</li>
0094 <li>those</li>
0095 </ol>
0096 
0097 <h3>Nested lists</h3>
0098 
0099 <ol>
0100 <li>this</li>
0101 <li>
0102     <ul>
0103     <li>Fizz</li>
0104     <li>Bang</li>
0105     <li>Crash</li>
0106     <li>Wallop</li>
0107     </ul>
0108 </li>
0109 <li>these</li>
0110     <ul>
0111     <li>nest</li>
0112         <ul>
0113         <li>nested</li>
0114             <ul>
0115             <li>dumb</li>
0116                 <ul>
0117                 <li>dumber</li>
0118                 </ul>
0119             </ul>
0120         </ul>
0121     </ul>
0122 <li>those</li>
0123 </ol>
0124 
0125 <h3>Images</h3>
0126 
0127 A local image:
0128 
0129 A remote image:
0130 
0131 <h3>Links</h3>
0132 A named link to <a href="http://www.google.com">google</a>.
0133 
0134 A raw link to <a href="http://pim.google.com">http://pim.google.com</a>.
0135 
0136 An image link to <a href="http://google.com/"><img src="http://www.google.com/logo.png" /></a>.
0137 
0138 Another named <a href="http://contact.google.com">link</a>.
0139 
0140 Another link to <a href="http://www.google.com">The google homepage</a>.
0141 
0142 A formatted <a href="http://office.google.com"><s>link</s></a>.
0143 
0144 <h3>Tables</h3>
0145 
0146 <h4>Tables with no defined width attributes</h4>
0147 Simple grid:
0148 <table border="1">
0149 <tr><td>one-one</td><td>one-two</td></tr>
0150 <tr><td>two-one</td><td>two-two</td></tr>
0151 </table>
0152 
0153 Simple grid with colspan:
0154 <table border="1">
0155 <tr><td colspan="2">one-one and one-two</td><td>one-three</td></tr>
0156 <tr><td>two-one</td><td>two-two</td><td>two-three</td></tr>
0157 </table>
0158 
0159 Simple grid with rowspan:
0160 <table border="1">
0161 <tr><td rowspan="2">one-one and two-one</td><td>one-three</td></tr>
0162 <tr><td>two-two</td></tr>
0163 <tr><td>three-one</td><td>three-two</td></tr>
0164 </table>
0165 
0166 Simple grid with missing bottom right cell.
0167 <table border="1">
0168 <tr><td>one-one</td><td>one-two</td></tr>
0169 <tr><td>two-one</td></tr>
0170 </table>
0171 
0172 Table with header:
0173 <table border="1">
0174 <tr><th>Col1</th><th>Col2</th></tr>
0175 <tr><td>one-one</td><td>one-two</td></tr>
0176 <tr><td>two-one</td><td>two-two</td></tr>
0177 </table>
0178 
0179 Table with wide content:
0180 <table border="1">
0181 <tr><td>one-one</td><td>one-two</td><td>Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td><td>Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td></tr>
0182 <tr><td>two-one</td><td>two-two</td><td>Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td><td>Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td></tr>
0183 </table>
0184 
0185 
0186 Table with formatted contents:
0187 <table border="1">
0188 <tr><td><b>bold</b></td><td>a <a href="http://google.com">link</a>.</td></tr>
0189 <tr><td><span style="font-size:xx-large;">big text</span></td><td><span style="font-family:courier;">another font</span></td></tr>
0190 </table>
0191 
0192 Table with nested table:
0193 <table border="1">
0194 <tr><th>Col1</th><th>Col2</th></tr>
0195 <tr><td>one-one</td><td>one-two</td></tr>
0196 <tr><td>two-one</td><td>
0197 <table border="1">
0198 <tr><th>Col1</th><th>Col2</th></tr>
0199 <tr><td>one-one</td><td>one-two</td></tr>
0200 <tr><td>two-one</td><td>two-two</td></tr>
0201 </table>
0202 </td></tr>
0203 </table>
0204 
0205 <h4>Tables with widths defined</h4>
0206 Table with 50 percent width
0207 <table border="1" width="50%">
0208 <tr><th>Col1</th><th>Col2</th></tr>
0209 <tr><td>one-one</td><td>one-two</td></tr>
0210 <tr><td>two-one</td><td>two-two</td></tr>
0211 </table>
0212 
0213 Table with 50 percent width and 70% first column width
0214 <table border="1" width="50%">
0215 <tr><th width="70%">Col1</th><th>Col2</th></tr>
0216 <tr><td>one-one</td><td>one-two</td></tr>
0217 <tr><td>two-one</td><td>two-two</td></tr>
0218 </table>
0219 
0220 Table with 50 percent width and 100px first column width
0221 <table border="1" width="50%">
0222 <tr><th width="100">Col1</th><th>Col2</th></tr>
0223 <tr><td>one-one</td><td>one-two</td></tr>
0224 <tr><td>two-one</td><td>two-two</td></tr>
0225 </table>
0226 
0227 Table with 100px first column width:
0228 <table border="1">
0229 <tr><th width="100">Col1</th><th>Col2</th></tr>
0230 <tr><td>one-one</td><td>one-two</td></tr>
0231 <tr><td>two-one</td><td>two-two</td></tr>
0232 </table>
0233 
0234 Table with 10% first column width (makes second column 9 times wider):
0235 <table border="1">
0236 <tr><th width="10%">Col1</th><th>Col2</th></tr>
0237 <tr><td>one-one</td><td>one-two</td></tr>
0238 <tr><td>two-one</td><td>two-two</td></tr>
0239 </table>
0240 
0241 Table with 10% first column width on the first row and 20% width on the next row:
0242 <table border="1">
0243 <tr><th width="10%">Col1</th><th>Col2</th></tr>
0244 <tr><td width="20%">one-one</td><td>one-two</td></tr>
0245 <tr><td>two-one</td><td>two-two</td></tr>
0246 </table>
0247 
0248 Table with 300px width:
0249 <table border="1" width="300">
0250 <tr><th>Col1</th><th>Col2</th></tr>
0251 <tr><td>one-one</td><td>one-two</td></tr>
0252 <tr><td>two-one</td><td>two-two</td></tr>
0253 </table>
0254 
0255 Table with 300px width, first column width 100px, second column width 200px:
0256 <table border="1" width="300">
0257 <tr><th width="100">Col1</th><th width="200">Col2</th></tr>
0258 <tr><td>one-one</td><td>one-two</td></tr>
0259 <tr><td>two-one</td><td>two-two</td></tr>
0260 </table>
0261 
0262 <h4>Tables with non matching fixed widths</h4>
0263 
0264 Table with 300px width, first column width 100px, second column width 100px:
0265 <table border="1" width="300">
0266 <tr><th width="100">Col1</th><th width="100">Col2</th></tr>
0267 <tr><td>one-one</td><td>one-two</td></tr>
0268 <tr><td>two-one</td><td>two-two</td></tr>
0269 </table>
0270 
0271 Table with 300px width, first column width 75px, second column width 225px:
0272 <table border="1" width="300">
0273 <tr><th width="75">Col1</th><th width="225">Col2</th></tr>
0274 <tr><td>one-one</td><td>one-two</td></tr>
0275 <tr><td>two-one</td><td>two-two</td></tr>
0276 </table>
0277 
0278 Table with 300px width, first column width 75px, second column width 150px:
0279 <table border="1" width="300">
0280 <tr><th width="75">Col1</th><th width="150">Col2</th></tr>
0281 <tr><td>one-one</td><td>one-two</td></tr>
0282 <tr><td>two-one</td><td>two-two</td></tr>
0283 </table>
0284 
0285 
0286 <h3>Paragraph formatting</h3>
0287 
0288 <h4>Left aligned paragraph. (Reversed in RTL).</h4>
0289 <p align="left">
0290 Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
0291 </p>
0292 
0293 <h4>Right aligned paragraph. (Reversed in RTL).</h4>
0294 <p align="right">
0295 Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
0296 </p>
0297 
0298 <h4>Center aligned paragraph.</h4>
0299 <p align="center">
0300 Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
0301 </p>
0302 
0303 <h4>Justified paragraph.</h4>
0304 <p align="justify">
0305 Lorem Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
0306 </p>
0307 
0308 <p>lorem ipsum</p>
0309 <p style="margin-top:10px;margin-bottom:0px;">
0310 Margin above this paragraph. No margin below.
0311 </p>
0312 <p style="margin-top:0px;margin-bottom:10px;">
0313 Margin below this paragraph. No margin above.
0314 </p>
0315 <p>lorem ipsum</p>
0316 
0317 <h3>Other document formatting</h3>
0318 
0319 A horizontal line:
0320 <hr />
0321 <p>
0322 A line with<sup>superscript</sup> and<sub>subscript</sub>.
0323 </p>
0324 
0325 </html>