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 texts visual style guide" />
    <meta name="description" content="CentOS texts visual style guide is a tool to help you customize texts inside CentOS websites." />
	<meta name="copyright" content="2009-2010 Alain Reguera Delgado" />

	<title>Texts - Home</title>

	<link href="/home/centos/artwork/trunk/Identity/Webenv/Css/base.css" rel="stylesheet" type="text/css" media="screen projection"/>
	<link href="/home/centos/artwork/trunk/Identity/Webenv/Css/base-app.css" rel="stylesheet" type="text/css" media="screen projection"/>
	<link href="/home/centos/artwork/trunk/Identity/Webenv/Css/base-app-content-1.css" rel="stylesheet" type="text/css" media="screen projection"/>
	<link href="/home/centos/artwork/trunk/Identity/Webenv/Css/base-app-tabs.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/centos-logo-white-resized-x58.png" alt="CentOS"/></a>
        </div>

        <!-- 
        Advertisement area (468x60 pixels). 
        -->
        <div class="advertisement">
            <img src="/home/centos/artwork/trunk/Identity/Images/Webenv/ads-sample-468x60.png" alt="Advertisement" />
            <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, Mirrors, 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="/home/centos/artwork/trunk/Identity/Models/Html/Moin/index.xhtml"><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 Projects (Alt+Shift+7)"
            href="https://projects.centos.org/trac/"><span>Projects</span></a>
            </span>

            <span>
            <a accesskey="8" title="CentOS Mirrors (Alt+Shift+8)"
            href="http://mirrors.centos.org"><span>Mirrors</span></a>
            </span>

        </div>

        <!-- 
        CentOS soponsors promotion. 
        -->

        <div class="page-line white"><hr style="display:none;" /></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><a title="CentOS headings visual style guide."
                href="headings.xhtml"><span>Headings</span></a></span>

                <span class="current"><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="content-links">

            <!--
            The content of right column goes 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 goes here.
            -->

	        <h1><a name="head-96bb8c40094976aafc04146acfa0fcc7">Texts</a></h1>

	        <p>CentOS Texts Visual Style Guide.</p>

<div class="toc"> <h3>Table of contents</h3> <ul><li><a href="#head-96bb8c40094976aafc04146acfa0fcc7">Texts</a> <ul><li><a href="#head-a29eedd9676451b30ee79514b2694630">Phrase elements</a> </li><li><a href="#head-54d983d751dd0b134757c1ceb88ae90d">Subscripts and superscripts</a> </li><li><a href="#head-755c38290fc13f7a16da25bb341ee801">Paragraphs</a> <ul><li><a href="#head-56e8fa440dddb2f62d6eb58248a24f67">Preformatted texts</a> </li><li><a href="#head-52264dbe52fa3a0ff0aaa45ce10f5518">Quotations</a> </li></ul></li><li><a href="#head-612ce8a2feb77cce2ca666f22d75db96">Recommendations</a> </li></ul> </li></ul> </div>

	        <h2><a name="head-a29eedd9676451b30ee79514b2694630">Phrase elements</a></h2>

	        <dl>
            	<dt>EM</dt>
            	<dd><em>Indicates emphasis.</em></dd>

            	<dt>STRONG</dt>
            	<dd><strong>Indicates stronger emphasis.</strong></dd>

            	<dt>CITE</dt> 
                <dd><cite>Contains a citation or a reference to other
                sources.</cite></dd>

    	        <dt>DFN</dt>
                <dd><dfn>Indicates that this is the defining instance
                of the enclosed term.</dfn></dd>

    	        <dt>CODE</dt>
            	<dd><code>Designates a fragment of computer code.</code></dd>

    	        <dt>SAMP</dt> 
                <dd><samp>Designates sample output from programs,
                scripts, etc.</samp></dd>

    	        <dt>KBD</dt>
	            <dd><kbd>Indicates text to be entered by the user.</kbd></dd>

    	        <dt>VAR</dt> 
                <dd><var>Indicates an instance of a variable or
                program argument.</var></dd>

    	        <dt>ABBR</dt>
                <dd><abbr title="Abbrebiation">Indicates an
                abbreviated form (e.g., WWW, HTTP, URI, Mass.,
                etc.).</abbr></dd>

    	        <dt>ACRONYM</dt>
                <dd><acronym title="Acronym">Indicates an acronym
                (e.g., WAC, radar, etc.).</acronym></dd>

	        </dl>

	        <h2><a name="head-54d983d751dd0b134757c1ceb88ae90d">Subscripts and superscripts</a></h2>

	        <dl>
	
		        <dt>SUB</dt>
		        <dd>H<sub>2</sub>O</dd>

		        <dt>SUP</dt>
        		<dd>E = mc<sup>2</sup></dd>
		        <dd><span lang="fr">M<sup>lle</sup> Dupont</span></dd>
            </dl>

	        <h2><a name="head-755c38290fc13f7a16da25bb341ee801">Paragraphs</a></h2>

            <p><a href="http://www.centos.org/">CentOS</a> is an
            Enterprise-class Linux Distribution derived from sources
            freely provided to the public by a prominent North
            American Enterprise Linux vendor.  CentOS conforms fully
            with the upstream vendors redistribution policy and aims
            to be 100% binary compatible.  (CentOS mainly changes
            packages to remove upstream vendor branding and
            artwork.)</p>
    
            <p>CentOS is developed by a small but growing team of core
            developers.&nbsp; In turn the core developers are
            supported by an active user community including system
            administrators, network administrators, enterprise users,
            managers, core Linux contributors and Linux enthusiasts
            from around the world.</p>

            <p>CentOS has numerous advantages including: an active and
            growing user community, quickly rebuilt, tested, and QA'ed
            errata packages, an extensive <a
            href="http://www.centos.org/modules/tinycontent/index.php?id=15">mirror
            network</a>, developers who are contactable and responsive
            reliable Enterprise Linux class distribution, multiple
            free support avenues including a <a
            href="http://wiki.centos.org/">wiki</a>, <a
            href="http://www.centos.org/modules/tinycontent/index.php?id=8">IRC
            Chat</a>, <a
            href="http://www.centos.org/modules/tinycontent/index.php?id=16">Email
            Lists</a>, <a
            href="http://www.centos.org/modules/newbb/">Forums</a>,and
            a dynamic&nbsp;<a
            href="http://www.centos.org/modules/smartfaq/">FAQ</a>.
            </p>


	        <h3><a name="head-56e8fa440dddb2f62d6eb58248a24f67">Preformatted texts</a></h3>

	        <pre>This is a small one-line pre formatted element.</pre>

        	<pre>This is a long one-line pre formatted element to illustrate how the content is scrollable when it doesn't fit the current screen area.</pre>

	        <h3><a name="head-52264dbe52fa3a0ff0aaa45ce10f5518">Quotations</a></h3>

        	<blockquote>
                <p>The simplest quotation.</p>
                <pre>&lt;blockquote&gt;
    &lt;p&gt;The simplest quotation.&lt;/p&gt;
&lt;/blockquote&gt;</pre>
            </blockquote>

        	<blockquote>
                <h3>Tip</h3>
                <p>The simplest quotation using heading.</p>
                <pre>&lt;blockquote&gt;&lt;h3&gt;Tip&lt;/h3&gt; 
    &lt;p&gt;The simplest quotation using heading.&lt;/p&gt;
&lt;/blockquote&gt;</pre>
            </blockquote>

	<blockquote class="icon orange">
        <img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-idea.png" alt="Tip" />
        <h3>Tip</h3>
        <p>Simple quotations can be combined with color classes, icons
        and headings to make your message more attractive. To set
        quotation with icons, use the <tt>icon</tt> class in the
        <tt>blockquote</tt> html tag. The heading is set using
        <tt>h3</tt> heading level.</p>
        <pre>&lt;blockquote class="icon orange"&gt;
    &lt;img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-idea.png" alt="Tip" /&gt;
    &lt;h3&gt;Tip&lt;/h3&gt;
    &lt;p&gt;This is a simple quotation with an icon.&lt;/p&gt;
&lt;/blockquote&gt;</pre>
    <p>The following color classes are available:</p> 

    <ul>
        <li><tt>blue</tt></li>
        <li><tt>orange</tt></li>
        <li><tt>green</tt></li>
        <li><tt>violet</tt></li>
        <li><tt>red</tt></li>
    </ul>

    <p>The following icon paths are available:</p> 
    <table>
    <tr>
    <td><img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-idea.png" alt="Tip" /></td>
    <td>/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-idea.png</td>
    </tr>
    <tr>
    <td><img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-info.png" alt="Info" /></td>
    <td>/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-info.png</td>
    </tr>
    <tr>
    <td><img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-attention.png" alt="Attention" /></td>
    <td>/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-attention.png</td>
    </tr>
    <tr>
    <td><img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-alert.png" alt="Alert" /></td>
    <td>/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-alert.png</td>
    </tr>
    <tr>
    <td><img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-ruler.png" alt="Convenction" /></td>
    <td>/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-ruler.png</td>
    </tr>
    <tr>
    <td><img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-star.png" alt="Star" /></td>
    <td>/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-star.png</td>
    </tr>
    <tr>
    <td><img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-error.png" alt="Error" /></td>
    <td>/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-error.png</td>
    </tr>
    <tr>
    <td><img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-success.png" alt="Success" /></td>
    <td>/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-success.png</td>
    </tr>
    </table>
    <p>As you probably have noted, it is possible to use pre-formatted
    texts, lists, tables and several paragraphs inside one admonition.
    In fact, it is possible to use any html code inside admonitions.
    Feel yourself free to experiment new combinations.</p>
    </blockquote>

    <blockquote class="message">
        <p>This admonition style is used to output web application
        messages like action results. This one is the simplest.</p>
<pre>&lt;blockquote class="message"&gt;
    &lt;p&gt;This is the simplest administrative admonition.&lt;/p&gt;
&lt;/blockquote&gt;</pre>
    </blockquote>

    <blockquote class="icon message green">
        <img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-success.png" alt="Success" />
        <h3>Success</h3>
        <p>This admonition style is used to output web application
        messages like action results. This one combines color classes,
        heading, and icon.</p>
        <pre>&lt;blockquote class="icon message green"&gt;
    &lt;img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-success.png" alt="Success" /&gt;
    &lt;p&gt;This admonition style is used to output web application messages like action results. This one combines color classes, heading, and icon.&lt;/p&gt;
&lt;/blockquote&gt;</pre>
    </blockquote>

    <blockquote class="icon message red">
        <img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-error.png" alt="Error" />
        <h3>Error</h3>
        <p>This admonition style is used to output web application
        messages like action results. This one combines color classes,
        heading, and icon.</p>
        <pre>&lt;blockquote class="icon message error"&gt;
    &lt;img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-error.png" alt="Error" /&gt;
    &lt;p&gt;This admonition style is used to output web application messages like action results. This one combines color classes, heading, and icon.&lt;/p&gt;
&lt;/blockquote&gt;</pre>
    </blockquote>

	<p>The <q cite="http://www.centos.org/">Community Enterprise
	Operating System</q> is a GNU/Linux Distribution based on the
	freely available sources of a prominet Linux vendor.</p>

    <pre>&lt;p&gt;The &lt;q cite="http://www.centos.org/"&gt;Community Enterprise
Operating System&lt;/q&gt; is a GNU/Linux Distribution based on the freely
available sources of a prominet Linux vendor.&lt;/p&gt;</pre>

	<p>John said, <q lang="en-US">I saw Lucy at lunch, she told me
	<q lang="en-US">Mary wants you to get some ice cream on your
	way home.</q> I think I will get some at Ben and Jerry’s, on
	Gloucester Road.</q></p>

    <pre>&lt;p&gt;John said, &lt;q lang="en-US"&gt;I saw Lucy at lunch,
she told me &lt;q lang="en-US"&gt;Mary wants you to get some ice cream
on your way home.&lt;/q&gt; I think I will get some at Ben and
Jerry’s, on Gloucester Road.&lt;/q&gt;&lt;/p&gt;</pre>

    <h2><a name="head-612ce8a2feb77cce2ca666f22d75db96">Recommendations</a></h2>

    <p>In order to maintain a consistent quotation style, consider the
    following recomendations:</p>

	<blockquote class="icon blue">
    <img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-info.png" alt="Note" />
    <h3>Note</h3>
    <p>Use this quotation style to remark notes inside your content.</p>
    <pre>&lt;blockquote class="icon blue"&gt;
    &lt;img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-info.png" alt="Note" /&gt;
    &lt;h3&gt;Note&lt;/h3&gt;
    &lt;p&gt;Use this quotation style to remark notes inside your content.&lt;/p&gt;
&lt;/blockquote&gt;</pre>
    </blockquote>

	<blockquote class="icon orange">
    <img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-idea.png" alt="Tip" />
    <h3>Tip</h3>
    <p>Use this quotation style to remark tips inside your content.</p>
    <pre>&lt;blockquote class="icon orange"&gt;
    &lt;img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-idea.png" alt="Tip" /&gt;
    &lt;h3&gt;Tip&lt;/h3&gt;
    &lt;p&gt;Use this quotation style to remark tips inside your content.&lt;/p&gt;
&lt;/blockquote&gt;</pre>
    </blockquote>

	<blockquote class="icon orange">
    <img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-star.png" alt="Important" />
    <h3>Important</h3>
    <p>Use this quotation style to remark important ideas inside your
    content.</p>
    <pre>&lt;blockquote class="icon orange"&gt;
    &lt;h3&gt;Important&lt;/h3&gt;
    &lt;img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-star.png" alt="Important" /&gt;
    &lt;p&gt;Use this quotation style to remark important ideas inside your content.&lt;/p&gt;
&lt;/blockquote&gt;</pre>
    </blockquote>

	<blockquote class="icon orange">
    <img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-ruler.png" alt="Convenction" />
    <h3>Convenction</h3>
    <p>Use this quotation style to remark convenctions inside your
    content.</p>
    <pre>&lt;blockquote class="icon orange"&gt;
    &lt;h3&gt;Convenction&lt;/h3&gt;
    &lt;img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-ruler.png" alt="Convenction" /&gt;
    &lt;p&gt;Use this quotation style to remark convenctions inside your content.&lt;/p&gt;
&lt;/blockquote&gt;</pre>
    </blockquote>

	<blockquote class="icon orange">
    <img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-alert.png" alt="Alert" />
    <h3>Warning</h3>
    <p>Use this quotation style to remark warnings inside your content.</p>
    <pre>&lt;blockquote class="icon orange"&gt;
    &lt;img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-alert.png" alt="Alert" /&gt;
    &lt;h3&gt;Warning&lt;/h3&gt;
    &lt;p&gt;Use this quotation style to remark warnings inside your content.&lt;/p&gt;
&lt;/blockquote&gt;</pre>
    </blockquote>

	<blockquote class="icon orange">
    <img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-attention.png" alt="Important" />
    <h3>Caution</h3>
    <p>Use this quotation style to remark caution ideas inside your
    content.</p>
    <pre>&lt;blockquote class="icon orange"&gt;
    &lt;h3&gt;Caution&lt;/h3&gt;
    &lt;img src="/home/centos/artwork/trunk/Identity/Images/Webenv/icon-admonition-attention.png" alt="Important" /&gt;
    &lt;p&gt;Use this quotation style to remark caution ideas inside your content.&lt;/p&gt;
&lt;/blockquote&gt;</pre>
    </blockquote>

	<ul>
		<li>...</li>
	</ul>

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