Want more features on Pastebin? Sign Up, it's FREE!
Guest

html and xhtml 5th edition Tutorial 5 case 2

By: spucoly on Oct 12th, 2011  |  syntax: None  |  size: 10.63 KB  |  views: 3,515  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
This paste has a previous version, view the difference. Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  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.  
clone this paste RAW Paste Data