| <?xml version="1.0"?> |
| <!DOCTYPE html |
| PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en"> |
| <head> |
| |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> |
| <meta http-equiv="content-style-type" content="text/css" /> |
| <meta http-equiv="content-language" content="en" /> |
| <meta name="keywords" content="centos web headings visual style guide" /> |
| <meta name="description" content="CentOS headings visual style guide is a tool to help you customize headings inside CentOS websites." /> |
| <meta name="copyright" content="2009-2010 Alain Reguera Delgado" /> |
| |
| <title>Headings - Home</title> |
| |
| <link href="/home/centos/artwork/trunk/Identity/Webenv/Css/App/default.css" rel="stylesheet" type="text/css" media="screen projection"/> |
| |
| </head> |
| |
| <body> |
| |
| <a name="top" /> |
| |
| <div id="wrap"> |
| |
| <div id="page-header"> |
| |
| |
| |
| |
| |
| |
| <div id="logo"> |
| <a title="Community Enterprise Operating System" |
| href="http://www.centos.org/"><img |
| src="/home/centos/artwork/trunk/Identity/Images/Brands/Logos/White/78/centos.png" alt="CentOS"/></a> |
| </div> |
| |
| |
| |
| |
| <div class="ads-google"> |
| <a title="Google Advertisement" href=""><img src="/home/centos/artwork/trunk/Identity/Images/Webenv/ads-sample-468x60.png" alt="Google Advertisement" /></a> |
| <script type="text/javascript"><!-- |
| google_ad_client = "pub-6973128787810819"; |
| google_ad_width = 468; |
| google_ad_height = 60; |
| google_ad_format = "468x60_as"; |
| google_ad_type = "text_image"; |
| google_ad_channel = ""; |
| google_color_border = "204c8d"; |
| google_color_bg = "345c97"; |
| google_color_link = "0000FF"; |
| google_color_text = "FFFFFF"; |
| google_color_url = "008000"; |
| |
| </script> |
| |
| <script type="text/javascript" |
| src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> |
| </script> |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| <div class="page-line"><hr style="display:none;" /></div> |
| <div class="tabs"> |
| |
| <span class="current"> |
| <a accesskey="1" title="CentOS Home Page (Alt+Shift+1)" href="http://www.centos.org/"> |
| <span>Home</span></a> |
| </span> |
| |
| <span> |
| <a accesskey="2" title="CentOS Wiki (Alt+Shift+2)" |
| href="http://wiki.centos.org/"> |
| <span>Wiki</span></a> |
| </span> |
| |
| <span> |
| <a accesskey="3" title="CentOS Mailing Lists (Alt+Shift+3)" href="http://lists.centos.org/"> |
| <span>Lists</span></a> |
| </span> |
| |
| <span> |
| <a accesskey="4" title="CentOS Forums (Alt+Shift+4)" href="http://forums.centos.org"> |
| <span>Forums</span></a> |
| </span> |
| |
| <span> |
| <a accesskey="5" title="CentOS Planet (Alt+Shift+5)" href="http://planet.centos.org"> |
| <span>Planet</span></a> |
| </span> |
| |
| <span> |
| <a accesskey="6" title="CentOS Bugs (Alt+Shift+6)" href="http://bugs.centos.org"> |
| <span>Bugs</span></a> |
| </span> |
| |
| <span> |
| <a accesskey="7" title="CentOS SIGs (Alt+Shift+7)" href="http://sigs.centos.org/"> |
| <span>SIGs</span></a> |
| </span> |
| |
| <span> |
| <a accesskey="8" title="CentOS Downloads (Alt+Shift+8)" href="http://mirrors.centos.org"> |
| <span>Downloads</span></a> |
| </span> |
| |
| </div> |
| |
| |
| |
| |
| <div id="last-releases"> |
| <div class="left"> |
| <span class="title"><a href="">Last Releases</a>:</span> |
| <span class="release"><a href="">6.0</a></span> |
| <span class="release"><a href="">5.8</a></span> |
| <span class="release"><a href="">4.12</a></span> |
| <span class="release last"><a href="">3.18</a></span> |
| </div> |
| <div class="right"> |
| <span class="rss"><a href="" title="RSS"><span>RSS</span></a></span> |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| |
| <div id="appslinks"> |
| |
| |
| |
| |
| |
| |
| <div class="userlinks"> |
| <div class="lastvisit"> |
| <span class="title"><a href="">Your last visit was at</a></span> |
| <span class="datetime">Thu Aug 25 14:13:05 CDT 2011</span> |
| </div> |
| <div class="session"> |
| <span><a href="">Lost your password?</a></span> |
| <span><a href="">Register</a></span> |
| <span class="last"><a href="">Login</a></span> |
| </div> |
| <div class="trail"> |
| <span><a href="">Pagination</a></span> |
| <span><a href="">Lists</a></span> |
| <span><a href="">Headings</a></span> |
| <span><a href="">Links</a></span> |
| <span><a href="">Texts</a></span> |
| <span class="last"><a href="">Home</a></span> |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| <div class="tabs"> |
| |
| <span><a title="Welcome to the web special interest group" |
| href="index.xhtml"><span>Welcome</span></a></span> |
| |
| <span class="current"><a title="CentOS headings visual style guide." |
| href="headings.xhtml"><span>Headings</span></a></span> |
| |
| <span><a title="CentOS texts visual style guide." |
| href="texts.xhtml"><span>Texts</span></a></span> |
| |
| <span><a title="CentOS lists visual style guide." |
| href="lists.xhtml"><span>Lists</span></a></span> |
| |
| <span><a title="CentOS links visual style guide." |
| href="links.xhtml"><span>Links</span></a></span> |
| |
| <span><a title="CentOS tables visual style guide." |
| href="tables.xhtml"><span>Tables</span></a></span> |
| |
| <span><a title="CentOS forms visual style guide." |
| href="forms.xhtml"><span>Forms</span></a></span> |
| |
| <span><a title="CentOS pagination visual style guide." |
| href="pagination.xhtml"><span>Pagination</span></a></span> |
| |
| </div> |
| |
| </div> |
| |
| <div class="page-line white"><hr style="display:none;" /></div> |
| |
| </div> |
| |
| |
| |
| |
| |
| <div id="page-body"> |
| |
| <div id="rightbar"> |
| |
| |
| |
| |
| |
| <ul class="first"> |
| <li><a href="">Release Notes</a></li> |
| <li><a href="">Lifetime</a></li> |
| <li><a href="">Downloads</a></li> |
| <li><a href="">Documentation</a></li> |
| <li class="current"><a href="">Security Advisories</a></li> |
| <li><a href="">Bugs</a></li> |
| <li><a href="">Tips and tricks</a></li> |
| <li><a href="">HowTos</a></li> |
| </ul> |
| |
| <ul> |
| <li>In this bar, it is possible to separate links by |
| blocks.</li> |
| </ul> |
| |
| </div> |
| |
| <div id="content"> |
| |
| |
| |
| |
| |
| <h1 class="title"><a name="head-13565f63786fdd627fe0a3da2eadb098">Headings</a></h1> |
| |
| <p>CentOS Headings Visual Style Guide.</p> |
| |
| <div class="toc"> <p>Table of contents</p> <dl><dt><a href="#head-13565f63786fdd627fe0a3da2eadb098">Headings</a> </dt><dt><a href="#head-d11297f57835c598dabca3e180eceef2">Heading Level 1</a> <dl><dt><a href="#head-78efe0dadf814013fd956a3eb3801572">Heading Level 2</a> <dl><dt><a href="#head-5ba1dc050ed1343de3dfa2fb6c6d5d28">Heading Level 3</a> <dl><dt><a href="#head-fd816535c2c0c07cb3fb982e56bb733d">Heading Level 4</a> <dl><dt><a href="#head-f5f6d8cad371d4307a2eab75a11741e1">Heading Level 5</a> <dl><dt><a href="#head-ad8feab7822672f2735d6924c77c4147">Heading Level 6</a> </dt></dl></dt></dl></dt></dl></dt></dl></dt><dt><a href="#head-a87c1d68dc93f779d26b1be6960d9e93">Recommendations</a> </dt></dl> </dt></dl> </div> |
| |
| <h1 class="title"><a name="head-d11297f57835c598dabca3e180eceef2" href="#head-d11297f57835c598dabca3e180eceef2">Heading Level 1</a></h1> |
| <pre><h1 class="title" class="title"><a name="head-5871b1272673f7cf89bcaf48972c848a" href="#head-5871b1272673f7cf89bcaf48972c848a">Heading Level 1</a></h1></pre> |
| |
| <h2 class="title"><a name="head-78efe0dadf814013fd956a3eb3801572" href="#head-78efe0dadf814013fd956a3eb3801572">Heading Level 2</a></h2> |
| <pre><h2 class="title"><a name="head-d33a28a4193cffb949f506cfdf770f05" href="#head-d33a28a4193cffb949f506cfdf770f05">Heading Level 2</a></h2></pre> |
| |
| <h3 class="title"><a name="head-5ba1dc050ed1343de3dfa2fb6c6d5d28" href="#head-5ba1dc050ed1343de3dfa2fb6c6d5d28">Heading Level 3</a></h3> |
| <pre><h3 class="title"><a name="head-82dd23c665d8ee437a980459c8b80d7a" href="#head-82dd23c665d8ee437a980459c8b80d7a">Heading Level 3</a></h3></pre> |
| |
| <h4 class="title"><a name="head-fd816535c2c0c07cb3fb982e56bb733d" href="#head-fd816535c2c0c07cb3fb982e56bb733d">Heading Level 4</a></h4> |
| <pre><h4 class="title"><a name="head-157dc030ea314f4b53a6ed238113a3f8" href="#head-157dc030ea314f4b53a6ed238113a3f8">Heading Level 4</a></h4></pre> |
| |
| <h5 class="title"><a name="head-f5f6d8cad371d4307a2eab75a11741e1" href="#head-f5f6d8cad371d4307a2eab75a11741e1">Heading Level 5</a></h5> |
| <pre><h5 class="title"><a name="head-33628cc07bcbefc4e4732407b8680bf6" href="#head-33628cc07bcbefc4e4732407b8680bf6">Heading Level 5</a></h5></pre> |
| |
| <h6 class="title"><a name="head-ad8feab7822672f2735d6924c77c4147" href="#head-ad8feab7822672f2735d6924c77c4147">Heading Level 6</a></h6> |
| <pre><h6 class="title"><a name="head-93b42a4a61a0b05a81aff6224555603c" href="#head-93b42a4a61a0b05a81aff6224555603c">Heading Level 5</a></h6></pre> |
| |
| <h2 class="title"><a name="head-a87c1d68dc93f779d26b1be6960d9e93">Recommendations</a></h2> |
| |
| <p>As heading design recommendations:</p> |
| |
| <ul> |
| |
| <li><p>When defining headings, make them accessible |
| using the following structure:</p> |
| |
| <pre><h1 class="title"><a name="head-a1811f6545db914813115417011b2df9">Heading</a></h1></pre> |
| |
| <p>Where <tt>a1811f6545db914813115417011b2df9</tt> is the |
| result of applying <tt>md5sum</tt> command to |
| <tt>Heading</tt> string. In this case, |
| <tt>Heading</tt> is the heading name.</p> |
| |
| </li> |
| |
| <li><p>Sometimes headings are used as links. For those |
| cases, use the following structure:</p></li> |
| |
| <pre><h1 class="title"><a href="#head-a1811f6545db914813115417011b2df9">Heading</a></h1></pre> |
| |
| <p>or the following, if you want to make a heading an |
| anchor and link of itself:</p> |
| |
| <pre><h1 class="title"><a name="head-a1811f6545db914813115417011b2df9" href="#head-a1811f6545db914813115417011b2df9">Heading</a></h1></pre> |
| |
| <li><p>Avoid using more than 4 levels of headings. If |
| you think you need to, you probably do; but consider |
| splitting your content in several pages instead. Too |
| many headings could affect your content |
| readability.</p></li> |
| |
| </ul> |
| |
| |
| |
| |
| <div class="page-line"><hr style="display:none;" /></div> |
| |
| </div> |
| |
| </div> |
| |
| |
| |
| |
| <div id="page-footer"> |
| <div class="credits"> |
| <div class="top"> |
| <a title="Top" href="#top"><img src="/home/centos/artwork/trunk/Identity/Images/Webenv/top.png" alt="Top"/></a> |
| </div> |
| <div class="copyright">Copyright © 2009-2011 Alain Reguera Delgado. All rights reserved.</div> |
| <div class="license">This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 Unported License</a>.</div> |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </body> |
| |
| </html> |