elements.html (10614B)
1 <!-- This Source Code Form is subject to the terms of the Mozilla Public 2 - License, v. 2.0. If a copy of the MPL was not distributed with this 3 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> 4 5 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 6 7 <html lang="en"> 8 <head> 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 10 <title>Blueprint HTML Elements Tests</title> 11 12 <!-- Framework CSS --> 13 <link 14 rel="stylesheet" 15 href="screen.css" 16 type="text/css" 17 media="screen, projection" 18 /> 19 <link rel="stylesheet" href="print.css" type="text/css" media="print" /> 20 <!--[if IE 21 ]><link 22 rel="stylesheet" 23 href="ie.css" 24 type="text/css" 25 media="screen, projection" 26 /><![endif]--> 27 </head> 28 <body> 29 <div class="container showgrid"> 30 <h2>Tests for common HTML elements</h2> 31 <hr /> 32 33 <h5>PARAGRAPHS <span class="alt">&</span> BOXES</h5> 34 35 <div class="span-8"> 36 <p> 37 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 38 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 39 minim veniam, quis nostrud exercitation ullamco laboris nisi ut 40 aliquip ex ea commodo consequat. Duis aute irure dolor in 41 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 42 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 43 culpa qui officia deserunt mollit anim id est laborum. 44 </p> 45 <p> 46 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 47 eiusmod tempor <sub>sub text</sub> ut labore et 48 <sup>sup text</sup> magna aliqua. Ut enim ad minim veniam, quis 49 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 50 consequat. Duis aute irure dolor in reprehenderit in voluptate velit 51 esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 52 cupidatat non proident, sunt in culpa qui officia deserunt mollit anim 53 id est laborum. 54 </p> 55 </div> 56 57 <div class="span-8"> 58 <p class="small"> 59 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 60 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 61 minim veniam, quis nostrud exercitation ullamco laboris nisi ut 62 aliquip ex ea commodo consequat. 63 </p> 64 <p> 65 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 66 eiusmod tempor incididunt ut labore et dolore magna aliqua. 67 </p> 68 <p class="large"> 69 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 70 eiusmod tempor incididunt ut labore et dolore magna aliqua. 71 </p> 72 </div> 73 74 <div class="span-8 last"> 75 <div class="box"> 76 <p class="last"> 77 Aliquip ex ea commodo consequat. Duis aute irure dolor in 78 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 79 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 80 culpa qui officia deserunt mollit anim id est laborum. 81 </p> 82 </div> 83 <blockquote> 84 <p> 85 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 86 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 87 ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 88 aliquip ex ea commodo consequat. 89 </p> 90 </blockquote> 91 </div> 92 <hr /> 93 94 <h5>LISTS</h5> 95 96 <div class="span-8"> 97 <ul> 98 <li>Unordered list test</li> 99 <li> 100 Another list element. Lorem ipsum dolor sit amet, consectetur 101 adipisicing elit. 102 </li> 103 <li>Yet another element in the list</li> 104 <li> 105 Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing 106 elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. 107 </li> 108 </ul> 109 <ol> 110 <li>Ordered list test</li> 111 <li>Another list element</li> 112 <li>Yet another element in the list</li> 113 </ol> 114 </div> 115 116 <div class="span-8"> 117 <ol> 118 <li>Ordered list</li> 119 <li> 120 Here's a nested unordered list 121 <ul> 122 <li>Nested Unordered list</li> 123 <li> 124 Nested ordered list 125 <ol> 126 <li>The first</li> 127 <li>And the second</li> 128 </ol> 129 </li> 130 </ul> 131 </li> 132 <li>Ordered List item</li> 133 <li> 134 Nested Ordered list 135 <ol> 136 <li>Some point</li> 137 <li> 138 Nested Unordered list 139 <ul> 140 <li>The first</li> 141 <li>And the second</li> 142 </ul> 143 </li> 144 </ol> 145 </li> 146 </ol> 147 </div> 148 149 <div class="span-8 last"> 150 <dl> 151 <dt>definition list dt</dt> 152 <dd>definition list dd</dd> 153 <dt>definition list dt</dt> 154 <dd>definition list dd</dd> 155 <dt> 156 Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing 157 elit adipisicing elit 158 </dt> 159 <dd> 160 Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing 161 elit adipisicing elit 162 </dd> 163 <dt> 164 Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing 165 elit adipisicing elit 166 </dt> 167 <dd> 168 Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing 169 elit adipisicing elit 170 </dd> 171 </dl> 172 </div> 173 <hr /> 174 175 <h5>HEADINGS</h5> 176 177 <div class="span-8"> 178 <h1>H1: Lorem ipsum dolor sit amet</h1> 179 <h2>H2: Lorem ipsum dolor sit amet, consectetur elit</h2> 180 <h3>H3: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3> 181 <h4> 182 H4: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipis 183 </h4> 184 <h5> 185 H5: Lorem ipsum dolor sit amet, consectetur adipisicing elit 186 adipisicing elit adipisicing elit 187 </h5> 188 <h6> 189 H6: Lorem ipsum dolor sit amet, consectetur adipisicing elit 190 adipisicing elit adipisicing elit 191 </h6> 192 </div> 193 194 <div class="span-8"> 195 <h1>Heading 1</h1> 196 <hr /> 197 <h2>Heading 2</h2> 198 <hr /> 199 <h3>Heading 3</h3> 200 <hr /> 201 <h4>Heading 4</h4> 202 <hr /> 203 <h5>Heading 5</h5> 204 <hr /> 205 <h6>Heading 6</h6> 206 </div> 207 208 <div class="span-8 last"> 209 <h1>Heading 1</h1> 210 <h2>Heading 2</h2> 211 <h3>Heading 3</h3> 212 <h4>Heading 4</h4> 213 <h5>Heading 5</h5> 214 <h6>Heading 6</h6> 215 </div> 216 <hr /> 217 218 <h5>MISC ELEMENTS</h5> 219 220 <div class="span-8"> 221 <p> 222 <strong><strong></strong><br /> 223 <del><del> deleted</del><br /> 224 <dfn><dfn> dfn</dfn><br /> 225 <em><em> emphasis</em> 226 </p> 227 <p> 228 <a><a> anchor</a><br /> 229 <a href="http://www.google.com"><a> a + href</a> 230 </p> 231 <p> 232 <abbr title="extended abbr text should show when mouse over" 233 ><abbr> abbr - extended text when mouseover.</abbr 234 ><br /> 235 <acronym title="extended acronym text should show when mouse over" 236 ><acronym> acronym - extended text when mouseover.</acronym 237 > 238 </p> 239 <address> 240 <address><br /> 241 Donald Duck<br /> 242 Box 555<br /> 243 Disneyland 244 </address> 245 <p> 246 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 247 eiusmod tempor incididunt ut labore dolore. 248 </p> 249 </div> 250 251 <div class="span-8"> 252 <table 253 summary="This is the summary text for this table." 254 border="0" 255 cellspacing="0" 256 cellpadding="0" 257 > 258 <caption> 259 <em>A standard test table with a caption, tr, td elements</em> 260 </caption> 261 <tr> 262 <th class="span-4">Table Header One</th> 263 <th class="span-4 last">Table Header Two</th> 264 </tr> 265 <tr> 266 <td>TD One</td> 267 <td>TD Two</td> 268 </tr> 269 <tr> 270 <td colspan="2">TD colspan 2</td> 271 </tr> 272 </table> 273 274 <table 275 summary="This is the summary text for this table." 276 border="0" 277 cellspacing="0" 278 cellpadding="0" 279 > 280 <caption> 281 <em>A test table with a thead, tfoot, and tbody elements</em> 282 </caption> 283 <thead> 284 <tr> 285 <th class="span-4">Table Header One</th> 286 <th class="span-4 last">Table Header Two</th> 287 </tr> 288 </thead> 289 <tfoot> 290 <tr> 291 <td colspan="2">tfoot footer</td> 292 </tr> 293 </tfoot> 294 <tbody> 295 <tr> 296 <td>TD One</td> 297 <td>TD Two</td> 298 </tr> 299 <tr> 300 <td>TD One</td> 301 <td>TD Two</td> 302 </tr> 303 </tbody> 304 <tbody> 305 <tr> 306 <td>TD One</td> 307 <td>TD Two</td> 308 </tr> 309 <tr> 310 <td>TD One</td> 311 <td>TD Two</td> 312 </tr> 313 </tbody> 314 </table> 315 </div> 316 317 <div class="span-8 last"> 318 <pre> 319 <pre> 320 pre space1 321 pre space1 322 pre space2 323 pre space2 324 pre tab 325 pre tab</pre 326 > 327 328 <code><code> Not indented indent1 indent1 indent2 indent3</code> 329 330 <tt 331 ><tt> This tt text should be monospaced and wrap as if one line 332 of text even though the code has newlines, spaces, and tabs. It should 333 be the same size as <p> text. 334 </tt> 335 </div> 336 <hr /> 337 338 <p> 339 <a href="http://validator.w3.org/check?uri=referer"> 340 <img 341 src="valid.png" 342 alt="Valid HTML 4.01 Strict" 343 height="31" 344 width="88" 345 class="top" 346 /></a> 347 </p> 348 </div> 349 </body> 350 </html>