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:07] – [Alignment of Text] eechriseg-259:css [2012/01/20 16:39] (current) – [The Structural and Presentation Layers] eechris
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>
 <!DOCTYPE html> <!DOCTYPE html>
 <!-- float.html <!-- float.html
Line 748: Line 748:
     <meta charset="utf-8" />     <meta charset="utf-8" />
     <title> The float property </title>     <title> The float property </title>
-    <style type = "text/css">+    <style>
       img {       img {
         float: right         float: right
Line 802: 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 837: 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 884: 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 922: 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 964: 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 982: 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 1051: 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.1327075632.txt.gz · Last modified: 2012/01/20 16:07 by eechris