API tools faq
paste
Advertisement
spucoly

html and xhtml 5th edition Tutorial 5 case 2

spucoly
Oct 12th, 2011
5,346
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.63 KB | None | 0 0
raw download clone embed print report
  1. HTML code:
  2.  
  3. <html>
  4. <head>
  5. <!--
  6. New Perspectives on HTML and XHTML
  7. Tutorial 5
  8. Case Problem 2
  9.  
  10. February at the Chamberlain Civic Center
  11. Author: jason summers
  12. Date: 10-13-11
  13.  
  14.  
  15. Filename: feb.htm
  16. Supporting files: bottom.jpg, bottomleft.jpg, bottomright.jpg, calendar.css,
  17. ccc.css, ccc.jpg, left.jpg, right.jpg, tab.jpg, top.jpg,
  18. topleft.jpg, topright.jpg
  19.  
  20.  
  21. Sorry for the bad spacing
  22. -->
  23.  
  24. <link href="ccc.css" rel="stylesheet" type ="text/css" />
  25. <link href="calender.css" rel="stylesheet" type ="text/css" />
  26.  
  27. <title>February at the Chamberlain Civic Center</title>
  28.  
  29. </head>
  30.  
  31.  
  32. <body>
  33. <div id="heading">
  34. <img src="ccc.jpg" alt="The Chamberlain Civic Center" />
  35. <ul>
  36. <li><a href="#">Home</a></li>
  37. <li><a href="#">Events</a></li>
  38. <li><a href="#">Box Office</a></li>
  39. <li><a href="#">Facilities</a></li>
  40. <li><a href="#">Directions</a></li>
  41. <li><a href="#">Contact Us</a></li>
  42. </ul>
  43. </div>
  44.  
  45.  
  46. <div id="leftColumn">
  47. <h2>Coming in February</h2>
  48. <p>February will be another banner month at the Chamberlain Civic
  49. Center with a two day performance of the Tony Award winning
  50. musical, <i>West Side Story</i> by the Broadway Touring Company.
  51. Tickets are going fast, so order yours today.</p>
  52.  
  53. <p>Celebrate Valentine's Day with the Chamberlain Symphony and
  54. their special selection of classical music for lovers. The next
  55. day, exercise your mind by attending the Charles Dickens classic,
  56. <i>The Mystery of Edwin Drood</i>.</p>
  57.  
  58. <p>Jazz lovers have a lot to celebrate in February with a visit
  59. from the <i>Jazz Masters</i> on February 10th, and then on February
  60. 21st, enjoy the music of The Duke with an <i>Ellington Tribute</i>
  61. performed by the Jazz Company of Kansas City.</p>
  62.  
  63. <p>Pins, bottles, plates, and chairs are flying at the Chamberlain
  64. Civic Center in February. The <i>Taiwan Acrobats</i> return with
  65. another amazing performance. Then, on February 25th, the <i>Madtown
  66. Jugglers</i> get into the act with their unique blend of comedy,
  67. juggling, and madness.</p>
  68.  
  69. <p>Enjoy a classical brunch every Sunday in February with music
  70. provided by the <i>Carson Quartet</i>. Seating is limited, so please order
  71. your table in advance.</p>
  72. </div>
  73.  
  74. <div id="rightColumn">
  75.  
  76. <div class="bborder">
  77. <div class="tborder">
  78.  
  79. <div class="lborder">
  80. <div class="rborder">
  81.  
  82. <div class="tlcorner">
  83. <div class="trcorner">
  84. <div class="blcorner">
  85. <div class="brcorner">
  86.  
  87. <div class="boxContent">
  88.  
  89.  
  90.  
  91.  
  92.  
  93. <table class="calender">
  94. <caption>Events in Febuaray at the CCC</caption>
  95.  
  96.  
  97.  
  98.  
  99.  
  100. <colgroup>
  101.  
  102. <col class="weekdays" span="5" />
  103.  
  104. <col class="weekends" span="2" />
  105.  
  106.  
  107. </colgroup>
  108.  
  109.  
  110.  
  111. <thead>
  112. <tr>
  113.  
  114. <th>Sun</th>
  115.  
  116. <th>Mon</th>
  117.  
  118. <th>Tue</th>
  119.  
  120. <th>Wed</th>
  121.  
  122. <th>Thu</th>
  123.  
  124. <th>Fri</th>
  125.  
  126. <th>Sat</th>
  127.  
  128. </tr>
  129.  
  130. </thead>
  131. <tbody>
  132.  
  133. <tr>
  134.  
  135.  
  136. <td><h3>26</h3></td>
  137.  
  138. <td><h3>27</h3></td>
  139.  
  140. <td><h3>28</h3></td>
  141.  
  142. <td><h3>29</h3></td>
  143.  
  144. <td><h3>30</h3></td>
  145.  
  146. <td><h3>31</h3></td>
  147.  
  148. <td><h3>1</h3>
  149.  
  150.  
  151. <dl>
  152.  
  153. <dt>Tawain Elements</dt>
  154.  
  155. <dd>8pm</dd>
  156.  
  157. <dd>$16,$24,$36</dd>
  158.  
  159. </dl>
  160.  
  161.  
  162. </td>
  163.  
  164. </tr>
  165.  
  166.  
  167. <tr>
  168.  
  169. <td><h3>2</h3>
  170.  
  171. <dl>
  172.  
  173.  
  174. <dt>Carson Quartet</dt>
  175.  
  176. <dd>1pm</dd>
  177.  
  178. <dd>$8</dd>
  179.  
  180. </dl>
  181.  
  182. </td>
  183.  
  184.  
  185. <td><h3>3</h3></td>
  186.  
  187. <td><h3>4</h3></td>
  188.  
  189. <td><h3>5</h3>
  190.  
  191.  
  192. <dl>
  193.  
  194. <dt>Joey Gallway</dt>
  195.  
  196. <dd>8pm</dd>
  197.  
  198. <dd>$16,$24,$36</dd>
  199.  
  200. </dl>
  201.  
  202. </td>
  203.  
  204.  
  205. <td><h3>6</h3></td>
  206.  
  207.  
  208. <td><h3>7</h3>
  209.  
  210.  
  211. <dl>
  212.  
  213.  
  214. <dt>West Side Story</dt>
  215.  
  216. <dd>7pm</dd>
  217.  
  218. <dd>$24,$36,$64</dd>
  219.  
  220. </dl>
  221.  
  222. </td>
  223.  
  224.  
  225. <td>
  226.  
  227. <h3>8</h3>
  228.  
  229.  
  230. <dl>
  231.  
  232. <dt>West Side Story</dt>
  233.  
  234. <dd>7pm</dd>
  235.  
  236. <dd>$24,$36,$64</dd>
  237.  
  238. </dl>
  239.  
  240. </td>
  241.  
  242.  
  243. </tr>
  244.  
  245.  
  246. <tr>
  247.  
  248.  
  249.  
  250. <td><h3>9</h3>
  251. <dl>
  252.  
  253. <dt>Carson Quartet</dt>
  254.  
  255. <dd>1pm</dd>
  256.  
  257. <dd>$8</dd>
  258.  
  259. </dl>
  260. </td>
  261.  
  262.  
  263. <td><h3>10</h3>
  264. <dl>
  265.  
  266. <dt>Jazz Masters</dt>
  267.  
  268. <dd>8pm</dd>
  269.  
  270. <dd>$18,$24,$32</dd>
  271.  
  272. </dl>
  273.  
  274. </td>
  275.  
  276.  
  277. <td><h3>11</h3>
  278. </td>
  279.  
  280. <td><h3>12</h3>
  281. </td>
  282.  
  283.  
  284. <td><h3>13</h3>
  285.  
  286. <dl>
  287.  
  288. <dt>Harlem Choir</dt>
  289.  
  290. <dd>8pm</dd>
  291.  
  292. <dd>$18,$24,$32</dd>
  293.  
  294. </dl>
  295.  
  296. </td>
  297.  
  298.  
  299. <td><h3>14</h3>
  300. <dl>
  301.  
  302. <dt>Chamberlain Symphony</dt>
  303.  
  304. <dd>8pm</dd>
  305.  
  306. <dd>$18,$24,$32</dd>
  307.  
  308. </dl>
  309.  
  310. </td>
  311.  
  312.  
  313. <td><h3>15</h3>
  314.  
  315. <dl>
  316.  
  317. <dt>Edwin Drood</dt>
  318.  
  319. <dd>8pm</dd>
  320.  
  321. <dd>$24,$36,$44</dd>
  322.  
  323. </dl>
  324.  
  325. </td>
  326.  
  327. </tr>
  328.  
  329.  
  330. <tr>
  331.  
  332.  
  333.  
  334. <td><h3>16</h3>
  335.  
  336. <dl>
  337.  
  338. <dt>Carson Quartet</dt>
  339.  
  340. <dd>1pm</dd>
  341.  
  342. <dd>$8</dd>
  343.  
  344. </dl>
  345.  
  346. </td>
  347.  
  348.  
  349. <td><h3>17</h3></td>
  350.  
  351. <td><h3>18</h3></td>
  352.  
  353.  
  354. <td><h3>19</h3>
  355.  
  356. <dl>
  357.  
  358. <dt>The Yearling</dt>
  359.  
  360. <dd>7pm</dd>
  361.  
  362. <dd>$8,$14,$18</dd>
  363.  
  364. </dl>
  365. </td>
  366.  
  367. <td><h3>20</h3>
  368. </td>
  369.  
  370.  
  371. <td><h3>21</h3>
  372.  
  373. <dl>
  374.  
  375. <dt>An Ellington Tribute</dt>
  376.  
  377. <dd>8pm</dd>
  378.  
  379. <dd>$24,$32,$48</dd>
  380.  
  381. </dl>
  382. </td>
  383.  
  384. <td><h3>22</h3>
  385.  
  386.  
  387. <dl>
  388.  
  389. <dt>Othello</dt>
  390.  
  391. <dd>8pm</dd>
  392.  
  393. <dd>$18,$28,$42</dd>
  394.  
  395. </dl>
  396.  
  397. </td>
  398.  
  399. </tr>
  400.  
  401.  
  402. <tr>
  403.  
  404.  
  405. <td><h3>23</h3>
  406.  
  407. <dl>
  408.  
  409. <dt>Carson Quartet</dt>
  410.  
  411. <dd>1pm</dd>
  412.  
  413. <dd>$8</dd>
  414.  
  415. </dl>
  416.  
  417. </td>
  418.  
  419.  
  420. <td><h3>24</h3></td>
  421.  
  422.  
  423. <td><h3>25</h3>
  424.  
  425. <dl>
  426.  
  427. <dt>Madtown Jugglers</dt>
  428.  
  429. <dd>8pm</dd>
  430.  
  431. <dd>$12,$16,$20</dd>
  432.  
  433. </dl>
  434. </td>
  435.  
  436.  
  437. <td><h3>26</h3></td>
  438.  
  439. <td><h3>27</h3></td>
  440.  
  441.  
  442. <td><h3>28</h3>
  443.  
  444. <dl>
  445.  
  446. <dt>Ralph Williams</dt>
  447.  
  448. <dd>8pm</dd>
  449.  
  450. <dd>$32,$48,$64</dd>
  451.  
  452. </dl>
  453.  
  454. </td>
  455.  
  456.  
  457. <td><h3>1</h3>
  458. </td>
  459.  
  460. </tr>
  461.  
  462.  
  463. </tbody>
  464.  
  465. </div>
  466. </table>
  467.  
  468.  
  469.  
  470.  
  471. </div>
  472.  
  473.  
  474. </div>
  475. </div>
  476. </div>
  477. </div>
  478.  
  479.  
  480.  
  481.  
  482.  
  483. </div>
  484. </div>
  485.  
  486. </div>
  487. </div>
  488.  
  489.  
  490.  
  491. </div>
  492.  
  493. </body>
  494.  
  495.  
  496.  
  497. </html>
  498.  
  499. CSS Code:
  500.  
  501. /*
  502. New Perspectives on HTML and XHTML 5th Edition
  503. Tutorial 5
  504. Case Problem 2
  505.  
  506. Chamberlain Civic Center Style Sheet
  507. Author: jason Summers
  508. Date: 10-13-11
  509.  
  510. Filename: ccc.css
  511. Supporting Files: bottom.jpg, bottomleft.jpg, bottomright.jpg, left.jpg
  512. tab.jpg, top.jpg, topleft.jpg, topright.jpg, right.jpg
  513.  
  514. */
  515.  
  516. body {font-family: Verdana, Geneva, sans-serif}
  517. #heading {position: absolute; top: 0px; left: 15px; width: 920px; border-bottom: 1px solid red; }
  518. #leftColumn {position: absolute; top: 170px; left: 15px; width: 280px}
  519. #rightColumn {position: absolute; top: 170px; left: 320px; width: 600px}
  520.  
  521.  
  522.  
  523. #heading ul {list-style-type: none; padding: 0px; margin: 0px; height: 20px}
  524. #heading ul li {float: left; margin: 0px 3px; width: 100px; height: 20px; text-align: center; background: url(tab.jpg) no-repeat 100% 0%;}
  525. #heading ul li a {display: block; width: 100px; font-size: 10px; text-decoration: none; color: black}
  526. #heading ul li a:hover {color: red}
  527.  
  528.  
  529.  
  530. #leftColumn h2 {font-size: 24px; color: red; margin: 0px 0px 10px 0px}
  531. #leftColumn p {font-size: 10px; padding: 0px; margin: 0px 0px 10px 0px}
  532. #leftColumn p i {color: red; font-style: normal}
  533.  
  534.  
  535. .tlcorner {background: url(topleft.jpg) no-repeat top left}
  536.  
  537. .trcorner {background: url(topright.jpg) no-repeat top right}
  538.  
  539. .blcorner {background: url(bottomleft.jpg) no-repeat bottom left}
  540.  
  541. .brcorner {background: url(bottomright.jpg) no-repeat bottom right}
  542.  
  543.  
  544.  
  545. .tborder {background: url(top.jpg) repeat-x top}
  546.  
  547. .bborder {background: url(bottom.jpg) repeat-x bottom}
  548.  
  549.  
  550.  
  551. .lborder {background: url(left.jpg) repeat-y left}
  552.  
  553. .rborder {background: url(right.jpg) repeat-y right}
  554.  
  555. div.boxcontent {padding: 50px}
  556.  
  557. css 2 code:
  558. /*
  559. New Perspectives on HTML and XHTML 5th Edition
  560. Tutorial 5
  561. Case Problem 2
  562.  
  563. CCC Calendar Table style sheet
  564. Author: jason summers
  565. Date: 10-11-13
  566. Filename: calender.css
  567. Supporting Files: bottom.jpg, bottomleft.jpg, bottomright.jpg, left.jpg
  568. tab.jpg, top.jpg, topleft.jpg, topright.jpg, right.jpg
  569.  
  570.  
  571. */
  572.  
  573. table.calender {border-collapse: separate; border-spacing: 5px; font-size: 8px}
  574. table.calender caption {caption-side: top; text-align: left; font-size: 16px; letter-spacing: 3px}
  575.  
  576. table.calender col {width: 14%}
  577. table.calender col.weekends {background-color: rgb( 255, 232, 232); width: 14%}
  578. table.calender col.weekdays {background-color: white; width: 14%}
  579.  
  580. table.calender thead tr th {color:white; background-color: red; letter-spacing: 5px}
  581. table.calender thead tr {height: 5%}
  582. table.calender thead tr td {height: 19%}
  583.  
  584. table.calender tbody td {border: 1px solid gray; vertical-align: top; height: 19%}
  585. table.calender tbody td h3 {font-size: 8px; margin: 0px; padding: 0px}
  586. table.calender tbody td dl {margin: 0px; padding: 0px}
  587. table.calender tbody td dd {margin: 0px; padding: 0px}
  588. table.calender tbody td dt {margin: 0px; padding: 0px}
  589.  
  590. table.calender thead td {vertical-align: top}
  591.  
  592.  
  593.  
  594.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!