text_latin.html

<h1>Good sample content</h1>
<p>Web content can make or break a website – no matter how good the design is. Most designers know this from first-hand experience.</p>
<p>So it wasn’t surprising when WDD visitors who read <a href="http://www.neti.ee">How to spot and avoid web copy that kills websites</a> demanded a follow-up showcasing good web content.</p>
<p>Whether you or your clients write content for your websites, or you partner with content writers (aka web writers, copywriters, SEO copywriters, etc.), the content needs to attract visitors, engage them, and ultimately entice them to take desired actions. Only then do you truly attain a winning website.</p>
<p>Here are good web content examples, and what makes them work.</p>

<h2>Let's test some bold and strong text</h2>
<p>The folks at <a href="http://www.neti.ee">Mailchimp</a> get right down to <b>‘monkey business’</b> with a clear explanation of what they offer: <strong>Easy Email Newsletters</strong>. No “Best-in-class automated information distribution system technology” rubbish here.</p>

<h2>Why <b>don't</b> we try them in the <strong>heading</strong> aswell?</h2>
<p>Each company has its own needs on the basis of which we develop a tailor-made service package. Our strength is our well-trained and experienced staff, which is key to maintain international client relationships. We offer our clients a professional and personal service in all accountancy-related questions.</p>
<p>Tarantino has filed a copyright lawsuit against Gawker Media for disseminating copies of the 146-page screenplay, claiming the company's Defamer blog went "too far" by linking to an anonymous host where fans could read it in full.</p>

<h2>This is how a <i>italic</i> and <em>emphasized</em> text looks like</h2>
<p>When visitors arrive to a site, they <i>want to know</i> if they’re at the right place. 37 Signals helps people determine that immediately by noting who can benefit from their solutions (designers, consultants, manufacturers, etc.). And they nicely segment their offerings and provide descriptive teasers for each tool, setting expectations on what to expect beyond each link.</p>
<p>For example, when you <em>mouse</em> over the <a href="http://www.neti.ee">Basecamp</a> button, the text reads: Are you still managing projects with email? Are you still using Excel for your to-do lists? It’s time to upgrade to Basecamp. Manage projects and collaborate with your team and clients the modern way. They demonstrate they understand you and your pain, and offer a better way to work.</p>

<h3>Added images can be larger than the content area</h3>
<p>If the original image is wider than the content area it should be scaled down to the maximum width of the container.</p>
<img alt="There should be a random image here" src="http://placeimg.com/1000/500/any">
<p>You can change the width and height of this random image by changing the valuses in the URL.</p>
<p>On the other hand an image can be smaller than the contact area. In this case the image should not scale itself before the content area shrinks down to the point where it is narrower than the original image.</p>
<img alt="There should be a random image here" src="http://placeimg.com/480/320/any">
<p>You can change the width and height of this random image by changing the valuses in the URL.</p>

<h3>More headings</h3>
<p>We should style the headings 4-6 aswell even if they can't be added from the UI. Some editors might copy them from the other files or include them using the source code editor.</p>
<p>Here are some examples of the headings:</p>

<h4>Definition and Usage</h4>
<p>The &lt;article&gt; tag specifies independent, self-contained content.</p>
<p>An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.</p>

<h5>Unordered list is next</h5>
<p>Potential sources for the &lt;article&lt; element:</p>
<ul>
  <li>Forum post</li>
  <li>Blog post</li>
  <li>News story</li>
  <li>Common stuff</li>
</ul>

<h5>And here is the ordered list</h5>
<ol>
  <li>Ape</li>
  <li>Monkey</li>
  <li>Gorilla</li>
</ol>

<h5>Don't forget the description list</h5>

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

<h6>Text might be something else than a paragraph</h6>
For <a href="http://www.neti.ee">example</a> this text is wrapped inside a &lt;span&gt; element.
While <a href="http://www.neti.ee">this</a> one is not wrapped at all.
Editors might break a line<br>
from a random place in the text.
They can also <a href="http://www.neti.ee">wrap</a> the text inside the &lt;div&gt; element like this text right here.

<h2>Don't forget the tables</h2>
<table>
  <tbody>
    <tr>
      <td>Ingedient</td>
      <td>Amount</td>
      <td>Fat</td>
      <td>Calories</td>
      <td>Rating</td>
      <td>Consumers</td>
      <td>Available</td>
    </tr>
    <tr>
      <td>Penne Pasta</td>
      <td>200g</td>
      <td>1.6 g</td>
      <td>390</td>
      <td>5.6</td>
      <td>3</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>Fresh tomatoes</td>
      <td>2</td>
      <td>0 g</td>
      <td>152</td>
      <td>152</td>
      <td>152</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>Goat cheese</td>
      <td>1 cup</td>
      <td>14.9 g</td>
      <td>414</td>
      <td>10</td>
      <td>100</td>
      <td>No</td>
    </tr>
    <tr>
      <td>Heave cream</td>
      <td>200ml</td>
      <td>71 g</td>
      <td>842</td>
      <td>99.4</td>
      <td>50</td>
      <td>Unknown</td>
    </tr>
  </tbody>
</table>

<h3>Smaller table</h3>
<table>
  <tbody>
    <tr>
      <td>Monday</td>
      <td>Tuesday</td>
      <td>Wednesday</td>
    </tr>
    <tr>
      <td>Thursday</td>
      <td>Friday<br></td>
      <td>Saturday</td>
    </tr>
  </tbody>
</table>

<h2>Google maps</h2>
<iframe src="http://maps.google.com/maps?f=q&amp;hl=en&amp;q=Paris@48.856614,2.3522219&amp;ie=UTF8&amp;ll=48.856614,2.3522219&amp;z=12&amp;iwloc=A&amp;output=embed" width="100%" height="300" frameborder="0"></iframe>

<h2>"Weird" characters </h2>
<p>What happens if a person wants to write in some "weird" language that uses unusual characters? For example in Russian on Latvian. These characters should be included in the custom webfont aswell.</p>
<h3>Russian</h3>
<p>Все люди рождаются свободными и равными в своем достоинстве и правах. Они наделены разумом и совестью и должны поступать в отношении друг друга в духе братства.</p>
<h3>Latvian</h3>
<p>Visi cilvēki piedzimst brīvi un vienlīdzīgi savā pašcieņā un tiesībās. Viņi ir apveltīti ar saprātu un sirdsapziņu, un viņiem jāizturas citam pret citu brālības garā.</p>

<h2>Code examples</h2>
<p>Some people might want to show some example code in their articles. There are two ways to insert code examples.</p>
<h3>Preformatted text</h3>
<p>One mehtod is using the &lt;pre&gt; tag.</p>
<pre>
$(document).ready(function() {
  $('a').click(function(event) {
    alert('As you can see, the link no longer took you to jquery.com');
    event.preventDefault();
  });
});
</pre>

<h3>Code element</h3>
<p>Code can be also wrapped inside the &lt;code&gt; element</p>
<pre>
<code>
$(document).ready(function() {
  $('#cool-element').click(function(event) {
    console.log('The coolest element ever');
  });
});
</code>
</pre>

<p>Code can also be inline with the text. For example this block here <code>console.log('The coolest element ever');</code> is an inline code example.</p>

<p>What happens if the <code>code-block is longer than the normal code example this one here shows it</code></p>

<p>What happens if the code-block has long words in it andn eeds to be wrapped <code>$(document).ready(function(somethingreallylong) {</code></p>

<h2>Embedding videos</h2>
<p>Now we are going to try different methods to embed a video.</p>

<h3>Youtube</h3>
<h4>Using the E3 UI</h4>
<p>This is the output of a video that is added using the E3 UI (text content area)</p>
<div class="edy-texteditor-container embed-container draggable-container" unselectable="on" style="max-width: 100%; overflow: hidden; position: relative;">
  <div class="edy-padding-resizer-wrapper" style="padding-bottom: 82.11764705882354%;">
    <iframe src="http://www.youtube.com/embed/aLihWxLjLGo?wmode=transparent&amp;jqoemcache=PHT0X" allowfullscreen="true" allowscriptaccess="always" scrolling="no" frameborder="0" style="position: absolute; display: block; width: 100%; height: 100%;"></iframe>
  </div>
</div>

<p>This is the output of a video that is added using the E3 UI (movie content area)</p>
<iframe src="http://www.youtube.com/embed/aLihWxLjLGo?wmode=transparent&amp;jqoemcache=aKeps" width="425" height="349" allowfullscreen="true" allowscriptaccess="always" scrolling="no" frameborder="0" style="width: 924px; height: 758.697247706422px;"></iframe>

<h4>Copy/paste embed link from Youtube</h4>
<iframe width="560" height="315" src="//www.youtube.com/embed/aLihWxLjLGo" frameborder="0" allowfullscreen></iframe>

<h3>Vimeo</h3>
<h4>Using the E3 UI (text content area)</h4>
<div class="edy-texteditor-container embed-container draggable-container" unselectable="on" style="max-width: 100%; overflow: hidden; position: relative;"><div class="edy-padding-resizer-wrapper" style="padding-bottom: 56.25%;"><iframe src="//player.vimeo.com/video/76843270" frameborder="0" title="Miami Fixed Gear Sample Video" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; display: block; width: 100%; height: 100%;"></iframe></div></div>

<h4>Using the E3 UI (movie content area)</h4>
<iframe src="//player.vimeo.com/video/76843270" width="1280" height="720" frameborder="0" title="Miami Fixed Gear Sample Video" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="width: 924px; height: 720px;"></iframe>

<h4>Copy/paste embed link from Vimeo</h4>
<iframe src="//player.vimeo.com/video/76843270" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/76843270">Miami Fixed Gear Sample Video</a> from <a href="http://vimeo.com/rigodiscuafilms">Rigo Discua</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

<h1>Some <b>people</b> might use the <strong>main</strong> heading again</h1>
<h2><i>Italic</i>, <em>italic</em>, <b>bold</b> or <strong>strong</strong></h2>
<p>A text can be <i>italic</i>, <em>emphasized</em>, <b>bold</b> or <strong>strong</strong>.</p>
<p>In some casese they can be <b><i>bold and italic</i></b> or <strong><em>strong and emphasized</em></strong> at the same time.</p>
<p>Almost forgot the <u>underlined text</u>. Some text can also containt the superscript or the subscript.</p>
<p>If you are crazy enough you can also use weird elements like blink or mark.</p>

<h2>This is how the <u>underlined</u> word will look like in a heading</h2>

<h1>Let's check what happens if a heading is linked (this one is not)</h1>
<h1><a href="http://www.neti.ee">Linked heading 1</a></h1>
<h2><a href="http://www.neti.ee">Linked heading 2</a></h2>
<h3><a href="http://www.neti.ee">Linked heading 3</a></h3>
<h4><a href="http://www.neti.ee">Linked heading 4</a></h4>
<h5><a href="http://www.neti.ee">Linked heading 5</a></h5>
<h6><a href="http://www.neti.ee">Linked heading 6</a></h6>

<h1>Let's try out some edge cases:</h1>

<h1>This is heading 1 with a <b>bold</b> word</h1>
<h2>This is heading 2 with a <b>bold</b> word</h2>
<h3>This is heading 3 with a <b>bold</b> word</h3>
<h4>This is heading 4 with a <b>bold</b> word</h4>
<h5>This is heading 5 with a <b>bold</b> word</h5>
<h6>This is heading 6 with a <b>bold</b> word</h6>

<h1>This is heading 1 with a <strong>strong</strong> word</h1>
<h2>This is heading 2 with a <strong>strong</strong> word</h2>
<h3>This is heading 3 with a <strong>strong</strong> word</h3>
<h4>This is heading 4 with a <strong>strong</strong> word</h4>
<h5>This is heading 5 with a <strong>strong</strong> word</h5>
<h6>This is heading 6 with a <strong>strong</strong> word</h6>

<h1>This is heading 1 with a <i>italic</i> word</h1>
<h2>This is heading 2 with a <i>italic</i> word</h2>
<h3>This is heading 3 with a <i>italic</i> word</h3>
<h4>This is heading 4 with a <i>italic</i> word</h4>
<h5>This is heading 5 with a <i>italic</i> word</h5>
<h6>This is heading 6 with a <i>italic</i> word</h6>

<h1>This is heading 1 with a <em>emphasized</em> word</h1>
<h2>This is heading 2 with a <em>emphasized</em> word</h2>
<h3>This is heading 3 with a <em>emphasized</em> word</h3>
<h4>This is heading 4 with a <em>emphasized</em> word</h4>
<h5>This is heading 5 with a <em>emphasized</em> word</h5>
<h6>This is heading 6 with a <em>emphasized</em> word</h6>

<h1>This is heading 1 with a <u>underlined</u> word</h1>
<h2>This is heading 2 with a <u>underlined</u> word</h2>
<h3>This is heading 3 with a <u>underlined</u> word</h3>
<h4>This is heading 4 with a <u>underlined</u> word</h4>
<h5>This is heading 5 with a <u>underlined</u> word</h5>
<h6>This is heading 6 with a <u>underlined</u> word</h6>

<h1>This is just a very long heading 1 that has normal words but still is long and it goes on and on and on and on. Looks like it is never going to end</h1>
<h2>This is just a very long heading 2 that has normal words but still is long and it goes on and on and on and on. Looks like it is never going to end</h2>
<h3>This is just a very long heading 3 that has normal words but still is long and it goes on and on and on and on. Looks like it is never going to end</h3>
<h4>This is just a very long heading 4 that has normal words but still is long and it goes on and on and on and on. Looks like it is never going to end</h4>
<h5>This is just a very long heading 5 that has normal words but still is long and it goes on and on and on and on. Looks like it is never going to end</h5>
<h6>This is just a very long heading 6 that has normal words but still is long and it goes on and on and on and on. Looks like it is never going to end</h6>

<h1>This heading 1 hasaverylongwordinittotestifthewordisgoingtowrapifitdoesn't fit in its container</h1>
<h2>This heading 2 hasaverylongwordinittotestifthewordisgoingtowrapifitdoesn't fit in its container</h2>
<h3>This heading 3 hasaverylongwordinittotestifthewordisgoingtowrapifitdoesn't fit in its container</h3>
<h4>This heading 4 hasaverylongwordinittotestifthewordisgoingtowrapifitdoesn't fit in its container</h4>
<h5>This heading 5 hasaverylongwordinittotestifthewordisgoingtowrapifitdoesn't fit in its container</h5>
<h6>This heading 6 hasaverylongwordinittotestifthewordisgoingtowrapifitdoesn't fit in its container</h6>

<p>There are also some words that might be very long. For example "PNEUMONO­ULTRA­MICRO­SCOPIC­SILICO­VOLCANO­CONIOSIS"</p>
Let's see what happens if we don't wrap it in the &lt;p&gt;: "PNEUMONO­ULTRA­MICRO­SCOPIC­SILICO­VOLCANO­CONIOSIS"
Or if we use a line break<br>in a "PNEUMONO­ULTRA­MICRO­SCOPIC­SILICO­VOLCANO­CONIOSIS" random place.
Like I said before "PNEUMONO­ULTRA­MICRO­SCOPIC­SILICO­VOLCANO­CONIOSIS" can be inside a &lt;div&gt; aswell.