ICCT Wiki

User Tools

Site Tools

Trace:
eg-259:css

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
eg-259:css [2012/01/20 16:04] – [Using Colours] eechriseg-259:css [2012/01/20 16:39] (current) – [The Structural and Presentation Layers] eechris
Line 532: Line 532:
     <meta charset="utf-8" />     <meta charset="utf-8" />
     <title> Sequence types </title>     <title> Sequence types </title>
-    <style type = "text/css">+    <style>
       ol {       ol {
         list-style-type: upper-roman;         list-style-type: upper-roman;
Line 739: Line 739:
 Example: [[/eg-259/examples/lecture2/float.html|float.html]] Example: [[/eg-259/examples/lecture2/float.html|float.html]]
  
-<code html> +<code html|An example to illustrate the float property> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD HTML 1.1//EN" +
-  "http://www.w3.org/TR/HTML11/DTD/HTML11.dtd"> +
 <!-- float.html <!-- float.html
-     An example to illustrate the float property +An example to illustrate the float property 
-     --> +--> 
-<html xmlns = "http://www.w3.org/1999/HTML" xml:lang="en"> +<html lang="en"> 
-  <head> <title> The float property </title> +  <head> 
-    <style type = "text/css"> +    <meta charset="utf-8" /> 
-      img {float: right}+    <title> The float property </title> 
 +    <style> 
 +      img { 
 +        float: right 
 +      }
     </style>     </style>
   </head>   </head>
Line 758: Line 759:
     </p>     </p>
     <p>     <p>
-      This is a picture of a Cessna 210. The 210 is the flagship  +      This is a picture of a Cessna 210. The 210 is the flagship 
-      single-engine Cessna aircraft. Although the 210 began as a  +      single-engine Cessna aircraft. Although the 210 began as a 
-      four-place aircraft, it soon acquired a third row of seats,  +      four-place aircraft, it soon acquired a third row of seats, 
-      stretching it to a six-place plane. The 210 is classified  +      stretching it to a six-place plane. The 210 is classified 
-      as a high-performance airplane, which means its landing  +      as a high-performance airplane, which means its landing 
-      gear is retractable and its engine has more than 200  +      gear is retractable and its engine has more than 200 
-      horsepower. In its first model year, which was 1960,  +      horsepower. In its first model year, which was 1960, 
-      the 210 was powered by a 260-horsepower fuel-injected  +      the 210 was powered by a 260-horsepower fuel-injected 
-      six-cylinder engine that displaced 471 cubic inches.  +      six-cylinder engine that displaced 471 cubic inches. 
-      The 210 is the fastest single-engine airplane ever +      The 210 is the fastest single-engine airplane ever
       built by Cessna.       built by Cessna.
     </p>     </p>
Line 801: Line 802:
 ---- ----
  
-<code html> +<code html|An example of a simple table with various borders> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD HTML 1.1//EN" +
-  "http://www.w3.org/TR/HTML11/DTD/HTML11.dtd"> +
 <!-- borders.html <!-- borders.html
-     An example of a simple table with various borders +An example of a simple table with various borders 
-     --> +--> 
-<html xmlns = "http://www.w3.org/1999/HTML" xml:lang="en"> +<html lang="en"> 
-  <head> <title> Table borders </title> +  <head> 
-    <style type = "text/css"> +    <meta charset="utf-8" /> 
-      table {border-top-width: medium; +    <title> Table borders </title> 
-             border-bottom-width: thick; +    <style> 
-             border-top-color: red; +      table { 
-             border-bottom-color: blue; +        border-top-width: medium; 
-             border-top-style: dotted; +        border-bottom-width: thick; 
-             border-bottom-style: dashed; +        border-top-color: red; 
-            } +        border-bottom-color: blue; 
-      p {border-style: dashed; border-width: thin;  +        border-top-style: dotted; 
-         border-color: green +        border-bottom-style: dashed; 
-        }+      } 
 +      p { 
 +        border-style: dashed; 
 +        border-width: thin; 
 +        border-color: green 
 +      }
     </style>     </style>
   </head>   </head>
   <body>   <body>
     <table border = "5">     <table border = "5">
-      <caption> Fruit Juice Drinks </caption>+      <caption> 
 +        Fruit Juice Drinks 
 +      </caption>
       <tr>       <tr>
-        <th> </th>+        <th></th>
         <th> Apple </th>         <th> Apple </th>
         <th> Orange </th>         <th> Orange </th>
Line 836: Line 841:
         <th> Breakfast </th>         <th> Breakfast </th>
         <td> 0 </td>         <td> 0 </td>
-<td> 0 </td>+        <td> 0 </td>
       </tr>       </tr>
       <tr>       <tr>
Line 883: Line 888:
 ---- ----
  
-<code html> +<code html|An example to illustrate margins and padding> 
-<!DOCTYPE html PUBLIC "-//w3c//DTD HTML 1.1//EN" +<!DOCTYPE html>
-  "http://www.w3.org/TR/HTML11/DTD/HTML11.dtd"> +
 <!-- marpads.html <!-- marpads.html
-     An example to illustrate margins and padding +An example to illustrate margins and padding 
-     --> +--> 
-<html xmlns = "http://www.w3.org/1999/HTML"> +<html lang="en"> 
-  <head> <title> Table borders </title> +  <head> 
-    <style type = "text/css"> +    <meta charset="utf-8" /> 
-      p.one   {margin: 0.2in; +    <title> Table borders </title> 
-               padding: 0.2in; +    <style> 
-               background-color: #C0C0C0; +      p.one { 
-               border-style: solid; +        margin: 0.2in; 
-              } +        padding: 0.2in; 
-      p.two   {margin: 0.1in; +        background-color: #C0C0C0; 
-               padding: 0.3in; +        border-style: solid; 
-               background-color: #C0C0C0; +      } 
-               border-style: solid; +      p.two { 
-              } +        margin: 0.1in; 
-      p.three {margin: 0.3in; +        padding: 0.3in; 
-               padding: 0.1in; +        background-color: #C0C0C0; 
-               background-color: #C0C0C0; +        border-style: solid; 
-               border-style: solid; +      } 
-              } +      p.three { 
-p.four  {margin:0.4in; +        margin: 0.3in; 
-               background-color: #C0C0C0;} +        padding: 0.1in; 
-      p.five  {padding: 0.4in; +        background-color: #C0C0C0; 
-               background-color: #C0C0C0; +        border-style: solid; 
-              }+      } 
 +      p.four { 
 +        margin: 0.4in; 
 +        background-color: #C0C0C0; 
 +      } 
 +      p.five { 
 +        padding: 0.4in; 
 +        background-color: #C0C0C0; 
 +      }
     </style>     </style>
   </head>   </head>
Line 921: Line 932:
     <p class = "one">     <p class = "one">
       Now is the time for all good Web programmers to       Now is the time for all good Web programmers to
-      learn to use style sheets. <br /> [margin = 0.2in,+      learn to use style sheets. 
 +      <br /> 
 +      [margin = 0.2in,
       padding = 0.2in]       padding = 0.2in]
     </p>     </p>
     <p class = "two">     <p class = "two">
       Now is the time for all good Web programmers to       Now is the time for all good Web programmers to
-      learn to use style sheets. <br /> [margin = 0.1in,+      learn to use style sheets. 
 +      <br /> 
 +      [margin = 0.1in,
       padding = 0.3in]       padding = 0.3in]
     </p>     </p>
     <p class = "three">     <p class = "three">
       Now is the time for all good Web programmers to       Now is the time for all good Web programmers to
-      learn to use style sheets. <br /> [margin = 0.3in,+      learn to use style sheets. 
 +      <br /> 
 +      [margin = 0.3in,
       padding = 0.1in]       padding = 0.1in]
     </p>     </p>
     <p class = "four">     <p class = "four">
       Now is the time for all good Web programmers to       Now is the time for all good Web programmers to
-      learn to use style sheets. <br /> [margin = 0.4in,+      learn to use style sheets. 
 +      <br /> 
 +      [margin = 0.4in,
       no padding, no border]       no padding, no border]
     </p>     </p>
     <p class = "five">     <p class = "five">
       Now is the time for all good Web programmers to       Now is the time for all good Web programmers to
-      learn to use style sheets. <br /> [padding = 0.4in,+      learn to use style sheets. 
 +      <br /> 
 +      [padding = 0.4in,
       no margin, no border]       no margin, no border]
     </p>     </p>
Line 963: Line 984:
 ---- ----
  
-<code html> +<code html|An example to illustrate background images> 
-<?xml version = "1.0" encoding = "utf-8"?> +<!DOCTYPE html>
-<!DOCTYPE html PUBLIC "-//w3c//DTD HTML 1.1//EN" +
-  "http://www.w3.org/TR/HTML11/DTD/HTML11.dtd">+
 <!-- back_image.html <!-- back_image.html
-     An example to illustrate background images +An example to illustrate background images 
-     --> +--> 
-<html xmlns = "http://www.w3.org/1999/HTML xml:lang="en"> +<html lang="en"> 
-  <head> <title> Background images </title> +  <head> 
-    <style type = "text/css"> +    <meta charset="utf-8"> 
-      body {background-image: url(c172.gif);} +    <title> Background images </title> 
-      p {margin-left: 30px; margin-right: 30px; +    <style> 
-         margin-top: 50px; font-size: 14pt; color: yellow}+      body { 
 +        background-image: url(c172.gif); 
 +      } 
 +      p { 
 +        margin-left: 30px; 
 +        margin-right: 30px; 
 +        margin-top: 50px; 
 +        font-size: 14pt; 
 +        color: yellow 
 +      }
     </style>     </style>
   </head>   </head>
Line 981: Line 1009:
     <p >     <p >
       The Cessna 172 is the most common general aviation airplane       The Cessna 172 is the most common general aviation airplane
-      in the world. It is an all-metal, single-engine piston, +      in the world. It is an all-metal, single-engine piston,
       high-wing four-place monoplane. It has fixed-gear and is       high-wing four-place monoplane. It has fixed-gear and is
       categorized as a non-high-performance aircraft. The current       categorized as a non-high-performance aircraft. The current
       model is the 172R.       model is the 172R.
-      The wingspan of the 172R is 36'1". Its fuel capacity is 56 +      The wingspan of the 172R is 36'1". Its fuel capacity is 56
       gallons in two tanks, one in each wing. The takeoff weight       gallons in two tanks, one in each wing. The takeoff weight
       is 2,450 pounds. Its maximum useful load is 837 pounds.       is 2,450 pounds. Its maximum useful load is 837 pounds.
-      The maximum speed of the 172R at sea level is 142 mph. +      The maximum speed of the 172R at sea level is 142 mph.
       The plane is powered by a 360 cubic inch gasoline engine       The plane is powered by a 360 cubic inch gasoline engine
-      that develops 160 horsepower. The climb rate of the 172R +      that develops 160 horsepower. The climb rate of the 172R
       at sea level is 720 feet per minute.       at sea level is 720 feet per minute.
     </p>     </p>
Line 1050: Line 1078:
  
   * [[eg-259:lecture2|Lecture Home]]   * [[eg-259:lecture2|Lecture Home]]
-  * [[eg-259:HTML|The Structural Layer]]+  * [[eg-259:xhtml|The Structural Layer]]
   * [[eg-259:css|The Presentation Layer]]   * [[eg-259:css|The Presentation Layer]]
-  * [[eg-259:html5|HTML 2 and HTML 5]]+  * [[eg-259:html5|XHTML 2 and HTML5]]
   * [[eg-259:css3|CSS 3]]   * [[eg-259:css3|CSS 3]]
eg-259/css.1327075498.txt.gz · Last modified: 2012/01/20 16:04 by eechris