Compare Revisions

Making your page using web standards - how to

Revision 36709:

Revision 36709 by Dikrib on

Revision 36710:

Revision 36710 by Dikrib on

Title:
Making your page using web standards - how to
Making your page using web standards - how to
Slug:
Using_Web_Standards_in_your_Web_Pages/Making_your_page_using_web_standards_-_how_to
Using_Web_Standards_in_your_Web_Pages/Making_your_page_using_web_standards_-_how_to
Content:

Revision 36709
Revision 36710
t8      First, see <a href="/en/Fixing_common_validation_problems" t8      The contents of this page has been moved to <a href="/en/Fi
>title="Fixing common validation problems">fixing common validatio>xing_common_validation_problems" title="Fixing common validation 
>n problems</a>.>problems">fixing common validation problems</a>.
9    </p>
10    <p>
11      Then see these additional steps tips:
12    </p>
13    <h3 name="I_use_.3Cfont.3E._How_to_define_or_to_replace_.3Cfo
>nt.3E_with_CSS.3F"> 
14      Common problems
15    </h3>
16    <h4 name="I_use_.3Cfont.3E._How_to_define_or_to_replace_.3Cfo
>nt.3E_with_CSS.3F"> 
17      The <code>font</code> element is deprecated
18    </h4>
19    <p>
20      The purpose of the deprecated <code>font</code> element was
> to specify typeface, color and size of the enclosed text. This i 
>s however much better done with CSS. The quickest way is to direc 
>tly replace the <code>font</code> element with a <code>span</code 
>> element and add the style as inline CSS: 
21    </p>
22    <pre>
23&lt;p&gt;&lt;font color="blue" face="Helvetica"&gt;
24A really &lt;font size="+1"&gt;big&lt;/font&gt; shoe.
25&lt;/font&gt;&lt;/p&gt;
26</pre>
27    <p>
28      ... becomes:
29    </p>
30    <pre>
31&lt;p&gt;&lt;span style="color: blue; font-family: Helvetica, san
>s-serif;"&gt; 
32A really &lt;span style="font-size: larger;"&gt;big&lt;/span&gt; 
>shoe. 
33&lt;/span&gt;&lt;/p&gt;
34</pre>
35    <p>
36      ... or even more concisely:
37    </p>
38    <pre>
39&lt;p style="color: blue; font-family: Helvetica, sans-serif;"&gt
>; 
40A really &lt;span style="font-size: larger;"&gt;big&lt;/span&gt; 
>shoe.&lt;/p&gt; 
41</pre>
42    <p>
43      This is appropriate usage for a local change to the font. H
>owever, this is not the best use of styles; the strength of CSS l 
>ies in the ability to gather text and other styling into logical  
>groupings that can be applied across a document, without repeatin 
>g the specific styling on every element that requires it. 
44    </p>
45    <p>
46      More on conversion of &lt;FONT&gt;: <a class="external" hre
>f="http://www.w3.org/QA/Tips/font-size#css">W3C Quality Assurance 
> tip for webmaster: Care With Font Size, Forget &lt;font&gt; and  
>use CSS</a> 
47    </p>
48    <h2 name="I_use_.3Ccenter.3E_or_align.3D.22center.22._How_to_
>align_with_CSS.3F"> 
49      I use <code>&lt;center&gt;</code> or <code>align="center"</
>code>. How to align with CSS? 
50    </h2>
51    <p>
52      The <a class="external" href="http://www.w3.org/TR/REC-CSS1
>#text-align">CSS1 text-align property</a> specifies how text or i 
>nline elements (like an image) are aligned within an element. 
53    </p>
54    <pre>
55&lt;p style="text-align: center;"&gt;&lt;img src="..." width="...
>" 
56height="..." alt="..."&gt;&lt;/p&gt;
57// will center the image inside the &lt;p&gt; element
58</pre>
59    <p>
60      CSS <code>margin-left: auto; margin-right: auto;</code> pro
>perties will center a block-level element within its containing b 
>lock. Defining margin-left and margin-right is for block-level el 
>ements. When both <code>margin-left</code> and <code>margin-right 
></code> are <code>auto</code>, they are set to equal values, thus 
> centering a block-level element within its parent.<br> 
61      <a class="external" href="http://www.w3.org/TR/REC-CSS1#hor
>izontal-formatting">CSS1 horizontal formating</a> 
62    </p>
63    <p>
64      Worth mentioning is the excellent tutorial:<br>
65      <a class="external" href="http://dorward.me.uk/www/centre/"
>>Centring using CSS</a> by David Dorward<br> 
66      Also <a class="external" href="http://www.gtalbot.org/NvuSe
>ction/NvuWebDesignTips/HorizontalAlignment.html">Interactive demo 
> on CSS horizontal alignment and horizontal formating</a> by Géra 
>rd Talbot 
67    </p>
68    <h2 name="How_to_replace_bgcolor.3F_How_to_colorize_backgroun
>d_with_CSS.3F"> 
69      How to replace <code>bgcolor</code>? How to colorize backgr
>ound with CSS? 
70    </h2>
71    <p>
72      The <code>bgcolor</code> attribute can be replaced with <a 
>class="external" href="http://www.w3.org/TR/CSS1#background-color 
>">CSS1 background-color property</a>. 
73    </p>
74    <p>
75      If you have
76    </p>
77    <pre>
78&lt;td bgcolor="green" width="150"&gt;
79... content here ...
80&lt;/td&gt;
81</pre>
82    <p>
83      ... can replace it with:
84    </p>
85    <pre>
86&lt;td style="background-color: green;" width="150"&gt;
87... content here ...
88&lt;/td&gt;
89</pre>
90    <h2 name="How_to_upgrade_markup_code_in_specific_cases:_.3Cem
>bed.3E.2C_.3Capplet.3E.2C_.3Cmarquee.3E.2C_.3Cbgsound.3E"> 
91      How to upgrade markup code in specific cases: <code>&lt;emb
>ed&gt;</code>, <code>&lt;applet&gt;</code>, <code>&lt;marquee&gt; 
></code>, <code>&lt;bgsound&gt;</code> 
92    </h2>
93    <h3 name="What_if_I_use_.3Cembed.3E_for_Flash_or_for_a_video.
>3F"> 
94      What if I use <code>&lt;embed&gt;</code> for Flash or for a
> video? 
95    </h3>
96    <p>
97      Explaining in details how to do this would go beyond the sc
>ope of this article. Nevertheless, we recommend the following art 
>icles so that you can have a Flash movie or a video in your web p 
>age and, at the same time, have your page validate. 
98    </p>
99    <ul>
100      <li>
101        <a class="external" href="http://www.alistapart.com/artic
>les/flashsatay">Embedding Flash While Supporting Standards</a> by 
> Drew McLellan, November 2002 
102      </li>
103      <li>
104        <a class="external" href="http://www.alistapart.com/artic
>les/byebyeembed">Bye Bye Embed: Embedding a video</a> by Elizabet 
>h Castro, July 2006 
105      </li>
106      <li>
107        <a class="external" href="http://wiki.dreamhost.com/index
>.php/Object_Embedding">Embedding Object with valid code</a> by Me 
>diaWiki, March 2007 
108      </li>
109      <li>
110        <a class="external" href="http://ln.hixie.ch/?start=10817
>98064&amp;count=1">Embedding flash without &lt;embed&gt;</a> by I 
>an "Hixie" Hickson, April 2004 
111      </li>
112      <li>
113        <a class="external" href="http://alistapart.com/articles/
>flashembedcagematch">Flash Embedding Cage Match</a> by Bobby van  
>der Sluis, February 2006 
114      </li>
115    </ul>
116    <h3 name="What_if_I_use_.3Capplet.3E.3F">
117      What if I use <code>&lt;applet&gt;</code>?
118    </h3>
119    <p>
120      We recommend these resources:
121    </p>
122    <ul>
123      <li>
124        <a class="external" href="http://ww2.cs.fsu.edu/%7Esteele
>/XHTML/appletObject.html">Java applet using &lt;object&gt; tag</a 
>> by Shayne Steele 
125      </li>
126      <li>
127        <a class="external" href="http://www.w3.org/TR/html401/st
>ruct/objects.html#edef-APPLET">HTML 4.01 on Including an applet</ 
>a> 
128      </li>
129      <li>
130        <a class="external" href="http://www.w3.org/TR/html401/st
>ruct/objects.html#edef-OBJECT">HTML 4.01 on Including an object</ 
>a> 
131      </li>
132    </ul>
133    <p>
134      <span class="comment">Worth mentioning here: Java Upgrade G
>uide: Migrating From the Microsoft VM for Java to the Sun JRE <a  
>class=" external" href="http://java.sun.com/j2se/1.4.2/docs/guide 
>/deployment/deployment-guide/upgrade-guide/index.html" rel="freel 
>ink">http://java.sun.com/j2se/1.4.2/docs/...ide/index.html</a> "a 
>fter December, 2007, Microsoft will no longer support or provide  
>a Java implementation with any of its products. (...) Those runni 
>ng applets in the Internet Explorer web browser will need to down 
>load and install an alternate VM."</span> 
135    </p>
136    <h3 name="What_if_I_use_.3Cmarquee.3E.3F">
137      What if I use <code>&lt;marquee&gt;</code>?
138    </h3>
139    <p>
140      Marquee can be replaced with content string inside a <code>
>&lt;div&gt;</code> or <code>&lt;span&gt;</code> rotating over tim 
>e with Javascript and DOM level 1. It must be said that this sort 
> of effect is discouraged. Studies have shown that <strong>consta 
>ntly moving objects or moving text disturb reading and weakens pe 
>ripherical vision</strong>. DHTML marquee also <strong>greatly co 
>nsumes user system resources (cpu, RAM)</strong> on tested browse 
>rs and will put modest systems under considerable stress. If afte 
>r webpage assessment and consideration, you still want to include 
> a marquee effect in your page, then you can use the following re 
>commendable tutorials:<br> 
141      <a class="external" href="http://devedge-temp.mozilla.org/t
>oolbox/examples/2001/stock-ticker/" title="http://devedge-temp.mo 
>zilla.org/toolbox/examples/2001/stock-ticker/">Cross-browser and  
>web standard compliant Stock Ticker example</a> by D. Rosenberg<b 
>r> 
142      <a class="external" href="http://devedge-temp.mozilla.org/t
>oolbox/examples/2002/xb/xbMarquee/index_en.html">Comprehensive we 
>b standard compliant alternative to &lt;marquee&gt;</a> by D. Ros 
>enberg<br> 
143      Firefox 2 and Firefox 3 support the non-standard <code>&lt;
>marquee&gt;</code> element. On the other hand, Firefox users can  
>disable such support by <a class="external" href="http://www.mozi 
>lla.org/unix/customizing.html#userContent">customizing an userCon 
>tent.css</a> 
144    </p>
145    <h3 name="What_if_I_have_.3Cbgsound.3E.3F">
146      What if I have <code>&lt;bgsound&gt;</code>?
147    </h3>
148    <p>
149      Then use HTML 4.01 <code>OBJECT</code>, e.g.:<br>
150      <code>&lt;OBJECT data="audiofile.wav" type="audio/wav" ...&
>gt;&lt;/OBJECT&gt;</code><br> 
151      See <a class="external" href="http://devedge-temp.mozilla.o
>rg/library/manuals/2002/plugin/1.0/intro.html#1003240">this DevEd 
>ge article</a> for information on rendering a sound OBJECT invisi 
>ble within the page.<br> 
152      Web page background sound often slows down considerably web
> page loading; like the text effects above, music or sound accomp 
>anying a page is seldom appreciated. According to the survey page 
> <a class="external" href="http://www.lowendmac.com/musings/02/05 
>28.html">What we really hate on the web</a>, 41.9% of survey resp 
>ondents will avoid sites that automatically play music; 71.1% str 
>ongly dislike sites that automatically play music.<br> 
153      <a class="external" href="http://www.wowwebdesigns.com/powe
>r_guides/music_off.php">Why Playing Music on your Web Site is a B 
>ad Idea</a> by A. Gulez 
154    </p>
155    <h2 name="Step_3:_Validate_your_CSS_code">
156      Step 3: Validate your CSS code
157    </h2>
158    <h3 name="Where_can_I_validate_my_CSS_code.3F">
159      Where can I validate my CSS code?
160    </h3>
161    <p>
162      Free Online CSS validation services:
163    </p>
164    <ul>
165      <li>
166        <a class="external" href="http://jigsaw.w3.org/css-valida
>tor/">W3C CSS Validation Service</a> 
167      </li>
168      <li>
169        <a class="external" href="http://www.htmlhelp.org/tools/c
>sscheck/"><abbr title="Web Design Group">WDG</abbr> CSS checker</ 
>a> 
170      </li>
171    </ul>
172    <p>
173      Built-in report of CSS parsing errors in modern browsers:
174    </p>
175    <ul>
176      <li>Error console in Firefox 3. From the menu, Tools/Error 
>console; the error console reports CSS parsing errors. 
177      </li>
178      <li>Error console in Opera 9.5. From the menu, Tools/Advanc
>ed/Error console; the error console reports CSS parsing errors. 
179      </li>
180      <li>Error console in Safari 3. From the menu, Develop/Show 
>Error console: the error console reports CSS parsing errors. 
181      </li>
182      <li>Error console in Icab 4. From the menu, Preferences/Sho
>w All/Other/Error report: the error console reports CSS parsing e 
>rrors. 
183      </li>
184    </ul>
185    <p>
186      There are also other possible and excellent debugging CSS a
>nd DHTML tools, useful tools (Addons, Toolbars, Extensions) for d 
>evelopers. Here is a <a class="external" href="http://css.tests.f 
>ree.fr/en/debugging_css_tools.php">list of recommendable and free 
> debugging tools</a> from <a class=" external" href="http://css.t 
>ests.free.fr/" rel="freelink">http://css.tests.free.fr/</a> 
187    </p>
188    <p>
189      <a class="external" href="/en/The_Business_Benefits_of_Web_
>Standards" title="en/Using_Web_Standards_in_your_Web_Pages/Benefi 
>ts_of_using_web_standards">&lt;- Previous section: Benefits of we 
>b standards</a> 
190    </p>
191    <p style="text-align: right;">
192      <a class="external" href="/en/Using_Web_Standards_in_your_W
>eb_Pages/Using_the_W3C_DOM" title="en/Using_Web_Standards_in_your 
>_Web_Pages/Using_the_W3C_DOM">Next section: Using the W3C DOM -&g 
>t;</a> 

Back to History