<?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 environment" />
<meta name="description" content="The CentOS web environment html definitions." />
<meta name="copyright" content="2009-2010 Alain Reguera Delgado" />
<title>Texts - Home</title>
<link href="/home/centos/artwork/trunk/Identity/Models/Css/Home/stylesheet.css" rel="stylesheet" type="text/css" />
</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 36 pixels height.
-->
<div id="logo">
<a title="Community Enterprise Operating System"
href="http://www.centos.org/"><img
src="/home/centos/artwork/trunk/Identity/Brands/Img/CentOS/Logo/Horizontal/5c-tm/white/136.png" alt="CentOS"/></a>
</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="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.html"><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 Forums (Alt+Shift+5)"
href="http://planet.centos.org"><span>Planet</span></a>
</span>
<span>
<a accesskey="6" title="CentOS Projects (Alt+Shift+6)"
href="https://projects.centos.org/trac/"><span>Projects</span></a>
</span>
<span>
<a accesskey="7" title="CentOS Mirrors (Alt+Shift+7)"
href="http://mirrors.centos.org"><span>Mirrors</span></a>
</span>
</div>
<!--
CentOS soponsors promotion.
-->
<!--
Google promotion ads.
-->
<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="">Login</a></span>
<span><a href="">Register</a></span>
<span class="last"><a href="">Lost your password?</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>
</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.html"><span>Welcome</span></a></span>
<span><a title="CentOS headings visual style guide."
href="headings.html"><span>Headings</span></a></span>
<span class="current"><a title="CentOS texts visual style guide."
href="texts.html"><span>Texts</span></a></span>
<span><a title="CentOS lists visual style guide."
href="lists.html"><span>Lists</span></a></span>
<span><a title="CentOS links visual style guide."
href="links.html"><span>Links</span></a></span>
<span><a title="CentOS tables visual style guide."
href="tables.html"><span>Tables</span></a></span>
<span><a title="CentOS forms visual style guide."
href="forms.html"><span>Forms</span></a></span>
<span><a title="CentOS pagination visual style guide."
href="pagination.html"><span>Pagination</span></a></span>
</div>
<div class="page-line white"><hr style="display:none;" /></div>
</div>
<!--
Start page body definitions.
-->
<div id="page-body">
<div id="right">
<!--
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="left">
<!--
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>Texts</h1>
<p>CentOS Texts Visual Style Guide.</p>
<h2>Recommendations</h2>
<ul>
<li>...</li>
</ul>
<h2>Examples</h2>
<h3>Phrase elements</h3>
<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>
<h3>Subscripts and superscripts</h3>
<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>
<h3>Paragraphs</h3>
<p>Paragraph here. Paragraph here. Paragraph here. Paragraph here.
Paragraph here. Paragraph here. Paragraph here. Paragraph here.
Paragraph here. Paragraph here. Paragraph here. Paragraph here.
Paragraph here. Paragraph here.</p>
<p>Paragraph here. Paragraph here. Paragraph here. Paragraph here.
Paragraph here. Paragraph here. Paragraph here. Paragraph here.
Paragraph here. Paragraph here. Paragraph here. Paragraph here.
Paragraph here. Paragraph here.</p>
<h3>Preformatted text</h3>
<pre>This is a pre formatted element.</pre>
<pre>
This is a pre formatted element (line 1).
This is a pre formatted element (line 2).
This is a pre formatted element (line 3).
</pre>
<h3>Quotations</h3>
<blockquote>
<p>The simplest quotation.</p>
<pre><blockquote>
<p>The simplest quotation.</p>
</blockquote></pre>
</blockquote>
<blockquote>
<h3>Tip</h3>
<p>The simplest quotation using heading.</p>
<pre><blockquote>
<h3>Tip</h3>
<p>The simplest quotation using heading.</p>
</blockquote></pre>
</blockquote>
<blockquote class="icon orange">
<img src="/home/centos/artwork/trunk/Identity/Widgets/Img/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><blockquote class="icon orange">
<img src="/home/centos/artwork/trunk/Identity/Widgets/Img/icon-admonition-idea.png" alt="Tip" />
<h3>Tip</h3>
<p>This is a simple quotation with an icon. </p>
</blockquote></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/Widgets/Img/icon-admonition-idea.png" alt="Tip" /></td>
<td>/home/centos/artwork/trunk/Identity/Widgets/Img/icon-admonition-idea.png</td>
</tr>
<tr>
<td><img src="/home/centos/artwork/trunk/Identity/Widgets/Img/icon-admonition-info.png" alt="Info" /></td>
<td>/home/centos/artwork/trunk/Identity/Widgets/Img/icon-admonition-info.png</td>
</tr>
<tr>
<td><img src="/home/centos/artwork/trunk/Identity/Widgets/Img/icon-admonition-attention.png" alt="Attention" /></td>
<td>/home/centos/artwork/trunk/Identity/Widgets/Img/icon-admonition-attention.png</td>
</tr>
<tr>
<td><img src="/home/centos/artwork/trunk/Identity/Widgets/Img/icon-admonition-alert.png" alt="Alert" /></td>
<td>/home/centos/artwork/trunk/Identity/Widgets/Img/icon-admonition-alert.png</td>
</tr>
<tr>
<td><img src="/home/centos/artwork/trunk/Identity/Widgets/Img/icon-admonition-star.png" alt="Star" /></td>
<td>/home/centos/artwork/trunk/Identity/Widgets/Img/icon-admonition-star.png</td>
</tr>
<tr>
<td><img src="/home/centos/artwork/trunk/Identity/Widgets/Img/icon-admonition-error.png" alt="Error" /></td>
<td>/home/centos/artwork/trunk/Identity/Widgets/Img/icon-admonition-error.png</td>
</tr>
<tr>
<td><img src="/home/centos/artwork/trunk/Identity/Widgets/Img/icon-admonition-success.png" alt="Success" /></td>
<td>/home/centos/artwork/trunk/Identity/Widgets/Img/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><blockquote class="message">
<p>This is the simplest administrative admonition.</p>
</blockquote></pre>
</blockquote>
<blockquote class="icon message green">
<img src="/home/centos/artwork/trunk/Identity/Widgets/Img/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 clases,
heading, and icon.</p>
<pre><blockquote class="icon message green">
<img src="/home/centos/artwork/trunk/Identity/Widgets/Img/icon-admonition-success.png" alt="Success" />
<p>This admonition style is used to output web application messages like action results. This one combines color clases, heading, and icon.</p>
</blockquote></pre>
</blockquote>
<blockquote class="icon message red">
<img src="/home/centos/artwork/trunk/Identity/Widgets/Img/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 clases,
heading, and icon.</p>
<pre><blockquote class="icon message error">
<img src="/home/centos/artwork/trunk/Identity/Widgets/Img/icon-admonition-error.png" alt="Error" />
<p>This admonition style is used to output web application messages like action results. This one combines color clases, heading, and icon.</p>
</blockquote></pre>
</blockquote>
<h4>Inline quotation</h4>
<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>
<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>
</div>
<!--
The content of left column ends here.
-->
<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/Models/Img/Promo/Web/png/top.png"
alt="Top"/></a>
<div>
<div class="credits">
Copyright 2009-2010 © 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>