/csstdg4figs

Permalink
Browse files

Initial population

  • Loading branch information...
1 parent 4a35189 commit 86346fb6d231f28e34fe15738992d192b16d187a @meyerweb committed Jul 13, 2015
Unified Split
Showing 463 changed files with 4,391 additions and 0 deletions.
View
1 basic-visual-formatting/3e-html/ch0700.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure Recycling</title><style type="text/css">body {background: white; color: black;}table {background: #666;}th, td {padding: 0.1em 0.25em;}th {background: #BBB;}td {background: #EEE;}</style></head><body><table cellspacing="1"><tr><th>CSS:TDGv2</th><th>First Ed.</th></tr><tr><td></td><td></td></tr><tr><td>7-1</td><td>8-1</td></tr><tr><td>7-2</td><td>8-2</td></tr><tr><td>7-3</td><td>8-7</td></tr><tr><td>7-4</td><td>8-9</td></tr><tr><td>7-5</td><td>8-10</td></tr><tr><td>7-6</td><td>8-12</td></tr><tr><td>7-7</td><td>8-13</td></tr><tr><td>7-8</td><td>8-14</td></tr><tr><td>7-9</td><td>8-18</td></tr><tr><td>7-10</td><td>8-19</td></tr><tr><td>7-11</td><td>8-20</td></tr><tr><td>7-13</td><td>8-4</td></tr><tr><td>7-18</td><td>7-16</td></tr><tr><td>7-19</td><td>7-17</td></tr><tr><td>7-21</td><td>8-21</td></tr><tr><td>7-27</td><td>8-45</td></tr><tr><td>7-28</td><td>8-46</td></tr></table></body></html>
View
1 basic-visual-formatting/3e-html/ch0709.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-9</title><style type="text/css">body {width: 400px;}div {padding: 30px; background: silver;}p {margin: 20px; padding: 0; background: white;}</style></head><body><div><p>A paragraph.</p><p>Another paragraph.</p></div></body></html>
View
1 basic-visual-formatting/3e-html/ch0712.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-12</title><style type="text/css">body {width: 400px;}</style></head><body><img src="smile.gif" style="display: block; width: 25px; margin: 0;"><img src="smile.gif" style="display: block; width: 50px; margin: 0;"><img src="smile.gif" style="display: block; width: 100px; margin: 0;"></body></html>
View
BIN basic-visual-formatting/3e-html/ch0714.psd
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN basic-visual-formatting/3e-html/ch0715.psd
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
1 basic-visual-formatting/3e-html/ch0716.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-16</title><style type="text/css">body {width: 400px;}div {border: 1px dashed gray; margin: 1em 0;}p {border: 1px dotted silver;}</style></head><body><div style="height: 6em;"> <p style="height: 50%;">Half as tall</p></div><div style="height: auto;"> <p style="height: 50%;">NOT half as tall; height reset to auto</p></div></body></html>
View
1 basic-visual-formatting/3e-html/ch0717.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-17</title><style type="text/css">body {width: 400px;}</style></head><body><div style="height: auto; background: silver;"> <p style="margin-top: 2em; margin-bottom: 2em;">A paragraph!</p></div><div style="height: auto; border-top: 1px solid; border-bottom: 1px solid;background: silver;"> <p style="margin-top: 2em; margin-bottom: 2em;">Another paragraph!</p></div></body></html>
View
1 basic-visual-formatting/3e-html/ch0720.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-20</title><style type="text/css">body {width: 500px;}ul {background: #BBB;}li {background: #DDD;}h1 {background: #999;}ul {margin-bottom: 15px; border: 1px solid;}li {margin-top: 10px; margin-bottom: 20px;}h1 {margin-top: 28px;}</style></head><body><ul><li>A list item.</li><li>Another list item.</li></ul><h1>A Heading-1</h1></body></html>
View
1 basic-visual-formatting/3e-html/ch0722.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-22</title><style type="text/css">p.neg {margin-top: -50px; margin-right: 10px; margin-left: 10px; margin-bottom: 0; border: 3px solid gray;}</style></head><body><div style="width: 420px; background-color: silver; padding: 10px; margin-top: 50px; border: 1px solid;"><p class="neg">A paragraph.</p>A div.</div></body></html>
View
1 basic-visual-formatting/3e-html/ch0723.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-23</title><style type="text/css">p.neg {margin-bottom: -50px; margin-right: 10px; margin-left: 10px; margin-top: 0; border: 3px solid gray;}</style></head><body><div style="width: 420px; margin-top: 50px;"><p class="neg">A paragraph.</p></div><p>The next paragraph.</p><div style="width: 420px; margin-top: 50px; padding: 10px; background: silver;"><p class="neg">A paragraph.</p></div><p>The next paragraph.</p></body></html>
View
1 basic-visual-formatting/3e-html/ch0724.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-24</title><style type="text/css">body {width: 500px;}ul {background: #BBB;}li {background: #DDD;}h1 {background: #999;}li {margin-bottom: 20px;}ul {margin-bottom: -15px;}h1 {margin-top: -18px;}</style></head><body><ul><li>A list item.</li><li>Another list item.</li></ul><h1>A Heading-1</h1></body></html>
View
1 basic-visual-formatting/3e-html/ch0725.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-25</title><style type="text/css">body {width: 500px;}ul {border: 1px solid gray; margin: 1em;}li {border: 1px dotted gray; margin: 5px 0;}</style></head><body><ul><li>A list item.</li><li>Another list item.</li><li>A third list item.</li><li>Yet another list item.</li><li>Listy!</li></ul></body></html>
View
1 basic-visual-formatting/3e-html/ch0726.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-26</title><style type="text/css">body {width: 500px;}ul {border: 1px solid gray; margin: 1em;}li {border: 1px dotted gray; margin: 5px 0;}#one {padding: 0 0 0 1em;}#two {padding: 0 0 0 0.25em;}</style></head><body><ul id="one"><li>A list item.</li><li>Another list item.</li><li>A third list item.</li></ul><ul id="two"><li>A list item.</li><li>Another list item.</li><li>A third list item.</li></ul></body></html>
View
1 basic-visual-formatting/3e-html/ch0729.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-29</title><style type="text/css">body {width: 500px;}p {border: 1px dotted gray;}.cl1 {text-align: left;}.cl2 {text-align: right;}.cl3 {text-align: center;}.cl4 {text-align: justify;}span {background: silver;</style></head><body><p class="cl1"><span>This paragraph assumes the style <code>text-align: left;</code>, which causes the line boxes within the element to line up along the left inner content edge of the paragraph.</span></p><p class="cl2"><span>This paragraph assumes the style <code>text-align: right;</code>, which causes the line boxes within the element to line up along the right inner content edge of the paragraph.</span></p><p class="cl3"><span>This paragraph assumes the style <code>text-align: center;</code>, which causes the line boxes within the element to line up their centers with the center of the content area of the paragraph.</span></p><p class="cl4"><span>This paragraph assumes the style <code>text-align: justify;</code>, which causes the line boxes within the element to align their left and right edges to the left and right inner content edges of the paragraph. The exception is the last line box, whose right edge does not align with the right content edge of the paragraph. (In right-to-left languages, the left edge of the last line box would not be so aligned.)</span></p></body></html>
View
1 basic-visual-formatting/3e-html/ch0734.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-34</title><style type="text/css">body {width: 800px;}</style></head><body><p style="font-size: 24px; line-height: 24px;">This is text, <em>some of which is emphasized</em>, plus other text<br>which is <strong style="font-size: 48px; vertical-align: 8px;">strongly emphasized</strong> and which is<br>larger than the surrounding text.</p></body></html>
View
1 basic-visual-formatting/3e-html/ch0735.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-35</title><style type="text/css">body {width: 800px;}</style></head><body><p style="font-size: 24px; line-height: 24px;">this is text, <em>some of which is emphasized</em>, plus other text<br>which is <strong style="font-size: 48px;">strong</strong> and <span style="vertical-align: top;">tall</span> and which is<br>larger than the surrounding text.</p></body></html>
View
1 basic-visual-formatting/3e-html/ch0736.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-36</title><style type="text/css">body {width: 800px;}</style></head><body><p style="font-size: 24px; line-height: 24px;">this is text, <em>some of which is emphasized</em>, plus other text<br>which is <strong style="font-size: 48px;">strong</strong> and <span style="vertical-align: top; line-height: 36px;">tall</span> and which is<br>larger than the surrounding text.</p></body></html>
View
1 basic-visual-formatting/3e-html/ch0737.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-37</title><style type="text/css">body {width: 800px;}p {font-size: 14px; line-height: 100%;}big {font-size: 250%; line-height: 100%;}</style></head><body><p>Not only does this paragraph have "normal" text, but it also<br>contains a line in which </span><big>some big text </big><span>is found.<br>This large text helps illustrate our point.</p></body></html>
View
1 basic-visual-formatting/3e-html/ch0738.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-38</title><style type="text/css">body {width: 800px;}p {font-size: 14px; line-height: 24px;}a:link {border: 5px solid blue;}</style></head><body><p><span>Not only does this paragraph have "normal" text, but it also<br>contains a line in which <a href="blah">a hyperlink</a> is found.<br>This large text helps illustrate our point.</span></p></body></html>
View
1 basic-visual-formatting/3e-html/ch0739.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-39</title><style type="text/css">body {width: 500px;}p {font-size: 15px; line-height: 1.5;}small {font-size: 66%;}big {font-size: 200%;}</style></head><body><p>This paragraph has a line-height of 1.5 times its font-size. In addition,any elements within it <small>such as this small element</small> also haveline-heights 1.5 time their font-size... and that includes <big>this big element right here</big>. By using a scaling factor, line-heights scaleto match the font-size of any element.</p></body></html>
View
1 basic-visual-formatting/3e-html/ch0740.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-40</title><style type="text/css">body {width: 500px;}p {font-size: 15px;}span {border: 1px solid;}</style></head><body><p><span>The text in this paragraph has been wrapped with a <code>span</code> element. This helps to visualize the limits of each line's box. Note that in many cases the borders actually pass each other; this is because the border is drawn around the outside of the element's content, and so sticks one pixel beyond the actual limit of the content area (which would technically fall in the space between pixels).</span></p></body></html>
View
1 basic-visual-formatting/3e-html/ch0741.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-41</title><style type="text/css">body {width: 500px;}p {font-size: 15px;}span {border: 1px solid black; padding: 4px;}</style></head><body><p><span>The text in this paragraph has been wrapped with a <code>span</code> element. This helps to visualize the limits of each line's box. Note that in many cases the borders actually pass each other; this is because the border is drawn around the outside of the element's content, and so sticks one pixel beyond the actual limit of the content area (which would technically fall in the space between pixels). Having added padding, the borders intrude into adjacent line boxes even more than before.</span></p></body></html>
View
1 basic-visual-formatting/3e-html/ch0742.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-42</title><style type="text/css">body {width: 500px;}p {font-size: 15px; line-height: 1em;}p span {background: #999; padding-right: 20px; padding-left: 20px;}</style></head><body><p>This paragraph contains a <code>span</code> element that has been given <span>right and left padding plus a background, which causes some interesting effects</span>. The extra space you see at the beginning and end of the <code>span</code> is to be expected.</p></body></html>
View
1 basic-visual-formatting/3e-html/ch0743.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-43</title><style type="text/css">body {width: 500px;}p {font-size: 15px; line-height: 1em;}p span {background: #999; padding-top: 10px; padding-bottom: 10px;}</style></head><body><p>The text in this paragraph contains a <code>span</code> element. This element has been given <span>top and bottom padding plus a background, which causes some interesting effects</span>. The overlap you see is to be expected.</p></body></html>
View
1 basic-visual-formatting/3e-html/ch0744.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-44</title><style type="text/css">body {width: 500px;}p {font-size: 15px; line-height: 18px;}img {height: 30px; margin: 0; padding: 0; border: none;}</style></head><body><p>The text in this paragraph contains an <code>img</code> element. This element has been given a height that is larger than a typical line box height for this paragraph, <img src="ohio.gif"> which leads to some potentially unwanted consequences. The extra space you see between lines of text is to be expected.</p></body></html>
View
1 basic-visual-formatting/3e-html/ch0745.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-45</title><style type="text/css">body {width: 500px;}p {font-size: 15px; line-height: 18px;}img {height: 20px; width: 20px;}img.one {margin: 0; padding: 0; border: 1px dotted;}img.two {margin: 5px; padding: 3px; border: 1px solid;}</style></head><body><p>The text in this paragraph contains two <code>img</code> elements. <img src="ohio.gif" class="one">These elements have been given styles <img src="ohio.gif" class="two"> that lead to some potentially unwanted consequences. The extra space you see between lines of text is to be expected.</p></body></html>
View
1 basic-visual-formatting/3e-html/ch0746.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-46</title><style type="text/css">body {width: 500px;}p {font-size: 15px; line-height: 18px;}img {height: 20px; width: 20px;}img.one {margin: 0; padding: 0; border: 1px dotted;}img.two {margin: 5px; padding: 3px; border: 1px solid;}img.two {margin-top: -10px;}</style></head><body><p>The text in this paragraph contains two <code>img</code> elements. <img src="ohio.gif" class="one">These elements have been given styles <img src="ohio.gif" class="two"> that lead to some potentially unwanted consequences. The extra space you see between lines of text is to be expected.</p></body></html>
View
1 basic-visual-formatting/3e-html/ch0747.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-47</title><style type="text/css">body {width: 1000px;}p {font-size: 30px; line-height: 36px;}img {height: 40px; width: 40px;}img.one {margin: 0; padding: 0; border: 2px dotted;}img.two {margin: 10px; margin-bottom: 10px; padding: 6px; border: 2px solid;}</style></head><body><p>The text in this paragraph contains two <code>img</code> elements. <img src="ohio.gif" class="one">These elements have been given styles <img src="ohio.gif" class="two"> that lead to some potentially unwanted consequences. The extra space you see between lines of text is to be expected.</p></body></html>
View
BIN basic-visual-formatting/3e-html/ch0747.psd
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
1 basic-visual-formatting/3e-html/ch0748.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-48</title><style type="text/css">body {width: 500px;}p {font-size: 15px; line-height: 18px;}img {height: 20px; width: 20px;}img.one {margin: 0; padding: 0; border: 1px dotted;}img.two {margin: 5px; margin-bottom: -10px; padding: 3px; border: 1px solid;}</style></head><body><p>The text in this paragraph contains two <code>img</code> elements. <img src="ohio.gif" class="one">These elements have been given styles <img src="ohio.gif" class="two"> that lead to some potentially unwanted consequences. The extra space you see between lines of text is to be expected.</p></body></html>
View
1 basic-visual-formatting/3e-html/ch0749.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-49</title><style type="text/css">body {width: 500px;}div#navigation a {display: block;}</style></head><body><div id="navigation"><a href="index.html">WidgetCo Home</a><a href="products.html">Products</a><a href="services.html">Services</a><a href="fun.html">Widgety Fun!</a><a href="support.html">Support</a><a href="about.html" id="current">About Us</a><a href="contact.html">Contact</a></div></body></html>
View
1 basic-visual-formatting/3e-html/ch0750.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-50</title><style type="text/css">#rollcall li {display: inline; border-right: 1px solid; padding: 0 0.33em;}#rollcall li:first-child{border-left: 1px solid;}</style></head><body><ul id="rollcall"><li>Bob C.</li><li>Marcio G.</li><li>Eric M.</li><li>Kat M.</li><li>Tristan N.</li><li>Arun R.</li><li>Doron R.</li><li>Susie W.</li></ul></body></html>
View
1 basic-visual-formatting/3e-html/ch0751.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><title>Figure 7-51</title><style type="text/css">body {width: 500px;}div {margin: 1em 0; border: 1px solid;}p {border: 1px dotted;}div#one p {display: block; width: 6em; text-align: center;}div#two p {display: inline; width: 6em; text-align: center;}div#three p {display: inline-block; width: 6em; text-align: center;}</style></head><body><div id="one">This text is the content of a block-level level element. Within this block-level element is another block-level element. <p>Look, it's a block-level paragraph.</p> Here's the rest of the DIV, which is still block-level.</div><div id="two">This text is the content of a block-level level element. Within this block-level element is an inline element. <p>Look, it's an inline paragraph.</p> Here's the rest of the DIV, which is still block-level.</div><div id="three">This text is the content of a block-level level element. Within this block-level element is an inline-block element. <p>Look, it's an inline-block paragraph.</p> Here's the rest of the DIV, which is still block-level.</div></body></html>
Oops, something went wrong.

0 comments on commit 86346fb

Please sign in to comment.