W3C home > Mailing lists > Public > public-html-commits@w3.org > May 2011

html5/alt-techniques Overview.html,1.67,1.68

From: Steven Faulkners via cvs-syncmail <cvsmail@w3.org>
Date: Mon, 09 May 2011 13:23:08 +0000
To: public-html-commits@w3.org
Message-Id: <E1QJQQW-0002qt-Ry@lionel-hutz.w3.org>
Update of /sources/public/html5/alt-techniques
In directory hutz:/tmp/cvs-serv10872

Modified Files:
	Overview.html 
Log Message:
fixed up error in figcaption example

Index: Overview.html
===================================================================
RCS file: /sources/public/html5/alt-techniques/Overview.html,v
retrieving revision 1.67
retrieving revision 1.68
diff -u -d -r1.67 -r1.68
--- Overview.html	9 May 2011 13:13:33 -0000	1.67
+++ Overview.html	9 May 2011 13:23:06 -0000	1.68
@@ -745,7 +745,9 @@
 <div class="example">
   <p>In this example, we have a link pointing to a site's home page, the link contains a house icon image and the text &quot;home&quot;. The image has an empty alt text. Where images are used in this way, it is also be appropriate to add the image using CSS. </p>
   <p><strong>Example Image in context: </strong></p>
-  <p><img src="images/home.gif" alt="A house icon next to the word 'home'." width="66" height="29"></p>
+  <div class="element">
+    <p><img src="images/home.gif" alt="A house icon next to the word 'home'." width="66" height="29"></p>
+  </div>
   
   <p><strong>Example code 1 - inline image:</strong></p>
   <pre>&lt;a href=&quot;home.html&quot;&gt;
@@ -1022,7 +1024,9 @@
 <p>This example shows a <a href="http://recaptcha.net/learnmore.html">CAPTCHA test</a> which uses a distorted image of text. The text alternative in the alt attribute provides instructions for a user in the case where she cannot access the image content. </p>
 <div class="example">
   <p><strong>Example Image:</strong></p>
-  <p><img src="images/captcha.gif" alt="captcha containing the words 'aides' and 'sprucest'. The letters are distorted and the color of the letters and background is partially inverted," width="270" height="60"></p>
+  <div class="element">
+    <p><img src="images/captcha.gif" alt="captcha containing the words 'aides' and 'sprucest'. The letters are distorted and the color of the letters and background is partially inverted," width="270" height="60"></p>
+  </div>
   <p><strong>Example code:</strong> </p>
   <PRE>&lt;img src="captcha.png" <strong>alt="An audio challenge follows if you cannot view this image."</strong>&gt; 
 &lt;!-- audio CAPTCHA option that allows the user to listen and type the word --&gt;  
@@ -1039,7 +1043,9 @@
 <h4 id="141">Example 14.1</h4>
 <div class="example">
   <p><strong>Example:</strong></p>
-  <p><a href="http://dev.w3.org/html5/spec/spec.html"><img src="images/HTML5_Logo.png" width="128" height="128" alt="HTML5 specification"></a></p>
+  <div class="element">
+    <p><a href="http://dev.w3.org/html5/spec/spec.html"><img src="images/HTML5_Logo.png" width="128" height="128" alt="HTML5 specification"></a></p>
+  </div>
   <p><strong>Example code:</strong></p>
   <pre><code>&lt;a href=&quot;http://dev.w3.org/html5/spec/spec.html&quot;&gt;
 &lt;img src=&quot;HTML5_Logo.png&quot; <strong>alt=&quot;HTML5 specification&quot;</strong>&gt;&lt;/a&gt;</code></pre>
@@ -1048,7 +1054,9 @@
 <p>If the logo is being used to represent the entity, e.g. as a page    heading, the <a href="http://dev.w3.org/html5/spec/embedded-content-1.html#attr-img-alt">alt</a> attribute MUST    contain the name of the entity being represented by the logo. The <a href="http://dev.w3.org/html5/spec/embedded-content-1.html#attr-img-alt">alt</a> attribute SHOULD NOT contain text like the word "logo", as it is not the fact that it is    a logo that is being conveyed, it's the entity itself. </p>
 <div class="example">
   <p><strong>Example:</strong></p>
-  <p><abbr title="World Wide Web Consortium"><a href="http://w3.org"><img src="images/w3c_home.png" width="72" height="48" alt="W3C web site"></a></abbr></p>
+  <div class="element">
+    <p><abbr title="World Wide Web Consortium"><a href="http://w3.org"><img src="images/w3c_home.png" width="72" height="48" alt="W3C web site"></a></abbr></p>
+  </div>
   <p><strong>Example code:</strong></p>
   <pre>&lt;abbr title=&quot;World Wide Web Consortium&quot;&gt;
 &lt;img src=&quot;images/w3c_home.png&quot; <strong>alt=&quot;W3C&quot;</strong>&gt;
@@ -1060,7 +1068,9 @@
 <p>If the logo is being used next to the name of the what that    it represents, then the logo is supplemental, and its <a href="http://dev.w3.org/html5/spec/embedded-content-1.html#attr-img-alt">alt</a> attribute MUST instead be    empty.</p>
 <div class="example">
   <p><strong>Example:</strong></p>
-  <p><abbr title="World Wide Web Consortium"><a href="http://w3.org"><img src="images/w3c_home.png" width="72" height="48" alt="W3C web site"></a></abbr>  W3C (World Wide Web Consortium)</p>
+  <div class="element">
+    <p><abbr title="World Wide Web Consortium"><a href="http://w3.org"><img src="images/w3c_home.png" width="72" height="48" alt="W3C web site"></a></abbr>  W3C (World Wide Web Consortium)</p>
+  </div>
   <p><strong>Example code:</strong></p>
   <pre>
 &lt;p&gt;&lt;img src=&quot;images/w3c_home.png&quot; <strong>alt=&quot;&quot;</strong>&gt;
@@ -1156,20 +1166,26 @@
 <h4 id="hf">The <code>figure</code> and <code>figcaption</code> elements</h4>
 <p>The <code>figure</code> and <code>figcaption</code> elements provide a method to explicitly associate a caption with with a variety of content including images. Any content inside the <code>figure</code> element that is not contained within the <code>figcaption</code> element is labelled by the content of the <code>figcaption</code> element. The <code>figcaption</code> content may be an adjunct to the text alternative provided using the alt attribute:</p>
 <div class="example">
-  <p><strong>Example:</strong></p>
-  <p><img src="images/shadows.jpg" width="400" height="310" alt="Shadow like figures and a graffiti tag drawn on the walls of a partially demolished building, illuminated by the light from a street lamp."></p>
   <p>The <code>figcaption</code> content may be a text alternative for the image, obviating the need for a text alternative provided using the <code>alt</code> attribute. This would only be the case if the <code>figcaption</code> content provides an adequate text alternative for the visual content in the image:</p>
-  <p><strong>Code examples:</strong>:</p>
+  <p><strong>Example A:</strong></p>
+  <div class="element">
+    <p><img src="images/shadows.jpg" width="400" height="310" alt="Shadow like figures and a graffiti tag drawn on the walls of a partially demolished building, illuminated by the light from a street lamp."></p>
+  </div>
+  <p><strong>Code example:</strong>:</p>
 <pre>
 &lt;img src="example.jpg" <strong>alt="Shadow like figures and a graffiti tag drawn on the walls of a partially 
 demolished building, illuminated by the light from a street lamp."</strong>&gt;</pre>
-<pre>
-&lt;figure&gt;
-&lt;img src="example.jpg"&gt;
-&lt;figcaption&gt;<strong> Shadow like figures and a graffiti tag drawn on the walls of a 
-partially demolished building, illuminated by the light from a street lamp. </strong>&lt;/figcaption&gt;
-&lt;/figure&gt;
-</pre>
+<p><strong>Example B: </strong></p>
+<div class="element1">
+  <p><img src="images/shadows.jpg" width="400" height="310"></p>
+  <p><code><strong>Shadow like figures and a graffiti tag drawn on the walls of a     
+ partially demolished building, illuminated by the light from a street lamp. </strong></code></p>
+  
+  
+
+</div>  <p><strong>Code example:</strong></p>
+<pre><code>&lt;figure&gt;   <br>&lt;img src="shadows.jpg"&gt;   <br>&lt;figcaption&gt;<strong> Shadow like figures and a graffiti tag drawn on the walls of a     
+ partially demolished building, illuminated by the light from a street lamp. </strong>&lt;/figcaption&gt;   <br>&lt;/figure&gt; </code></pre>
 </div>
 <h5 id="hg">Advantages:</h5>
 <ul>
Received on Monday, 9 May 2011 13:23:14 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 9 May 2011 13:23:14 GMT