Blob Blame History Raw
<?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">

        <!-- 
        CentOS specific brand information. Use this section to
        show the CentOS logo. The image used as CentOS logo needs
        to be 58 pixels height.
        -->
        <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>

        <!-- 
        Advertisement area (468x60 pixels). 
        -->
        <div class="ads-google">
            <a title="Google Advertisement"><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>

        <!-- 
        CentOS specific navigation links. Use this section to list the
        web applications you want to be always visible no matter where
        you are inside the CentOS web environment.  Example of web
        applications are: Wiki, Lists, Downloads, Forums, Planet, etc.
        -->
        <div class="page-line"><hr style="display:none;" /></div>
        <div class="tabs1">

            <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>

        <!-- 
        Sponsors Advertisement.
        -->
        <div class="ads-sponsors">
        <a title="Sponsors Advertisement" href=""><img src="/home/centos/artwork/trunk/Identity/Images/Webenv/ads-sample-728x90.png" alt="Sponsors Advertisement" /></a>
        </div>

        <div class="links">

            <!-- 
            Application specific links for user stuff. Use this section to
            set Login, Register, Lost your passwrod?  and so links.
            -->
            <div class="user">
                <span><a href="">Lost your password?</a></span>
                <span><a href="">Register</a></span>
                <span class="last"><a href="">Login</a></span>
            </div>
        
            <!--
            Application specific links for trail sutff. Use this section
            if your application trails the pages you've visited.
            -->
        	<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>

            <!-- 
            Application specific links for content stuff. Use this section
            to set application specific links that need to remain always
            visible inside the application environment.
            -->

            <div class="tabs1">
    
                <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>

    <!--
    Start page body definitions.
    -->

    <div id="page-body">

        <div id="links">
            <!--
            The content of right column starts here.
            -->
            <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">

            <!--
            Application specific links for breadcrumbs sutff. Use this
            section if your application supports breadcrumbs.
            -->
        	<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>

            <!--
            The content of left column starts here.
            -->

	        <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>&lt;h1 class="title" class="title"&gt;&lt;a name="head-5871b1272673f7cf89bcaf48972c848a" href="#head-5871b1272673f7cf89bcaf48972c848a"&gt;Heading Level 1&lt;/a&gt;&lt;/h1&gt;</pre>

            <h2 class="title"><a name="head-78efe0dadf814013fd956a3eb3801572" href="#head-78efe0dadf814013fd956a3eb3801572">Heading Level 2</a></h2>
            <pre>&lt;h2 class="title"&gt;&lt;a name="head-d33a28a4193cffb949f506cfdf770f05" href="#head-d33a28a4193cffb949f506cfdf770f05"&gt;Heading Level 2&lt;/a&gt;&lt;/h2&gt;</pre>

            <h3 class="title"><a name="head-5ba1dc050ed1343de3dfa2fb6c6d5d28" href="#head-5ba1dc050ed1343de3dfa2fb6c6d5d28">Heading Level 3</a></h3>
            <pre>&lt;h3 class="title"&gt;&lt;a name="head-82dd23c665d8ee437a980459c8b80d7a" href="#head-82dd23c665d8ee437a980459c8b80d7a"&gt;Heading Level 3&lt;/a&gt;&lt;/h3&gt;</pre>

            <h4 class="title"><a name="head-fd816535c2c0c07cb3fb982e56bb733d" href="#head-fd816535c2c0c07cb3fb982e56bb733d">Heading Level 4</a></h4>
            <pre>&lt;h4 class="title"&gt;&lt;a name="head-157dc030ea314f4b53a6ed238113a3f8" href="#head-157dc030ea314f4b53a6ed238113a3f8"&gt;Heading Level 4&lt;/a&gt;&lt;/h4&gt;</pre>

            <h5 class="title"><a name="head-f5f6d8cad371d4307a2eab75a11741e1" href="#head-f5f6d8cad371d4307a2eab75a11741e1">Heading Level 5</a></h5>
            <pre>&lt;h5 class="title"&gt;&lt;a name="head-33628cc07bcbefc4e4732407b8680bf6" href="#head-33628cc07bcbefc4e4732407b8680bf6"&gt;Heading Level 5&lt;/a&gt;&lt;/h5&gt;</pre>

            <h6 class="title"><a name="head-ad8feab7822672f2735d6924c77c4147" href="#head-ad8feab7822672f2735d6924c77c4147">Heading Level 6</a></h6>
            <pre>&lt;h6 class="title"&gt;&lt;a name="head-93b42a4a61a0b05a81aff6224555603c" href="#head-93b42a4a61a0b05a81aff6224555603c"&gt;Heading Level 5&lt;/a&gt;&lt;/h6&gt;</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>&lt;h1 class="title"&gt;&lt;a name="head-a1811f6545db914813115417011b2df9"&gt;Heading&lt;/a&gt;&lt;/h1&gt;</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>&lt;h1 class="title"&gt;&lt;a href="#head-a1811f6545db914813115417011b2df9"&gt;Heading&lt;/a&gt;&lt;/h1&gt;</pre>

                <p>or the following, if you want to make a heading an
                anchor and link of itself:</p>

                <pre>&lt;h1 class="title"&gt;&lt;a name="head-a1811f6545db914813115417011b2df9" href="#head-a1811f6545db914813115417011b2df9"&gt;Heading&lt;/a&gt;&lt;/h1&gt;</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>


            <!-- 
            The content of left column ends here.
            -->
            <div class="page-line"><hr style="display:none;" /></div>

        </div>

    </div>


    <!--
    Start page footer definitions.
    -->
    <div class="page-line white"><hr style="display:none;" /></div>
    <div id="page-footer">

        <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="credits">
            Copyright &copy; 2009-2011 Alain Reguera Delgado. All rights
            reserved.<br />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>

</body>

</html>